Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Build Collaborative App Using Polymer and Firebase

1,666 views

Published on

The presentation talks about developing an end-to-end collaborative application using Polymer - for the presentation - and Firebase as its cloud-based realtime database. It discusses about using the Firebase authentication, documentation, and collection related APIs and how these Polymer elements shall be used in an application.

Published in: Technology
  • Be the first to comment

Build Collaborative App Using Polymer and Firebase

  1. 1. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. + Build Collaborative App
  2. 2. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. CTO & Co-Founder @ Ajit Kumar
  3. 3. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Application Demo
  4. 4. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. GitHub URL ajit-kumar-azad/polymer-firebase
  5. 5. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Polymer
  6. 6. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Polymer Library to create reusable components - Web Component - for the modern web
  7. 7. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Polymer For everything……...you have an ELEMENT!
  8. 8. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Polymer Credit: https://www.polymer-project.org/1.0/docs/start/what-is-polymer.html
  9. 9. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. What does it offer? ● Build app using existing Polymer elements ● Create Web Components
  10. 10. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Polymer Elements
  11. 11. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. A sample Web Component
  12. 12. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. How to use it?
  13. 13. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. And, the output is?
  14. 14. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. An example from our app
  15. 15. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Another example...
  16. 16. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Firebase
  17. 17. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Firebase Real-time NoSQL Cloud Database
  18. 18. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. What does it offer? ● Authenticate users ● Store data ● Sync data to all connected clients, in real- time ● Data is available when your app goes offline ● Hosting
  19. 19. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. API/SDK is available for? ● Web (JavaScript) ● Android (Java) ● iOS (Objective C) ● REST (Server-side)
  20. 20. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Pattern 1: 100% Firebase-powered Source: https://www.firebase.com/blog/2013-03-25-where-does-firebase-fit.html
  21. 21. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Pattern 2: Firebase-powered + server code Source: https://www.firebase.com/blog/2013-03-25-where-does-firebase-fit.html
  22. 22. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Pattern 3: Existing app with Firebase-powered features Source: https://www.firebase.com/blog/2013-03-25-where-does-firebase-fit.html
  23. 23. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. We will be using Pattern 1: 100% Firebase-powered
  24. 24. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Initialization
  25. 25. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Create
  26. 26. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Read
  27. 27. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Update
  28. 28. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Delete
  29. 29. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. But, where is the ELEMENT?
  30. 30. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Google Web Components (GWC)
  31. 31. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Why GWC? ● Easier to integrate ● Easier for data-binding
  32. 32. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Adding it to your Polymer project... bower install --save GoogleWebComponents/firebase-element
  33. 33. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Firebase GWC ● firebase-auth ● firebase-collection ● firebase-document
  34. 34. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Authentication
  35. 35. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Collection
  36. 36. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Collection
  37. 37. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Document
  38. 38. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. There is more… ● Sorting/Ordering ● Indexing ● Pagination ● Transaction ● Offline Capabilities ● Security ● Open Data Sets (Airport delays, earthquakes, Weather, etc.)
  39. 39. Copyright © Walking Tree Consultancy Services Pvt. Ltd.Copyright © Walking Tree Consultancy Services Pvt. Ltd. Thank You! @findajit in.linkedin.com/in/ajitkumarazad

×