[Juarez Filho] Building your own Google Keep clone powered by Firebase

[Juarez Filho] Building your own Google Keep clone powered by Firebase

Content level: Intermediate

Join me on an adventure cloning the famous Google Keep app taking advantage of Angular v6 and Firebase features. Following this talk, you will learn Angular CLI tips, Angular Best Practices including TypeScript and Modern JavaScript, Material Design for the UI components, AngularFire, and tons of Firebase awesomeness.

In a nutshell, it will cover: 🔒 Authentication with Google ✏️ Notes management using Firestore 🎈 Activity using the Realtime Database 🌈 Cloud Functions for advanced techniques including image thumbnails and sub-collections removal 🖼️ Cloud Storage for the built-in gallery section inside of each note 🌩️ Cloud Messaging to send push notifications when a new collaborator is added to a note 🌟 And of course, Firebase Hosting which provides a fast and secure web hosting

Did I mention it is a Progressive Web App? 🚀

by Juarez Filho
Google Developer Expert / Ireland

3a6de6bc902de7f75c0e753b3202ed52?s=128

Google Developers Group Lviv

October 13, 2018
Tweet

Transcript

  1. Juarez Filho Google Developer Expert Building your own Google Keep

    clone powered by Firebase
  2. @juarezpaf

  3. Born in Brazil Living the dream with my lovely wife

    in Dublin Senior Developer #jesusfreak
  4. #traveller

  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. STARTING THE PROJECT...

  14. STARTING THE PROJECT...

  15. STARTING THE PROJECT...

  16. STARTING THE PROJECT...

  17. #PROTIP

  18. Use tools (Angular CLI) for task automation Be curious about

    new possibilities to improve your current workflow Testing is indispensable. Just do it! Learn how to customize app settings (angular.json) STARTING THE PROJECT...
  19. ADDING PWA AWESOMENESS...

  20. ADDING PWA AWESOMENESS...

  21. None
  22. None
  23. ADDING PWA AWESOMENESS... $ npm i http-server

  24. None
  25. None
  26. ADDING PWA AWESOMENESS... Add PWA capabilities via Angular CLI Check

    Angular Docs for a better understanding Filling the manifest.json with real data Customize ngsw-config.json for advanced usage Test with --prod flag and Chrome DevTools
  27. PWA RESOURCES... developers.google.com/web/progressive-web-apps ionicframework.com/pwa itnext.io/turning-an-angular-6-app-into-a-progressive- web-app-9e6fc6361ba6 smashingmagazine.com/2018/09/pwa-angular-6 youtube.com/watch?v=othhfZ0mGjU

  28. A TOUCH OF GLAMOUR...

  29. SETTING UP ANGULAR MATERIAL...

  30. SETTING UP ANGULAR MATERIAL...

  31. SETTING UP ANGULAR MATERIAL...

  32. SETTING UP ANGULAR MATERIAL...

  33. SETTING UP ANGULAR MATERIAL...

  34. SETTING UP ANGULAR MATERIAL...

  35. None
  36. Add PWA capabilities via Angular CLI Check Angular Docs for

    a better understanding Filling the manifest.json with real data Customize ngsw-config.json for advanced usage Test with --prod flag and Chrome DevTools SETTING UP ANGULAR MATERIAL...
  37. ANGULAR MATERIAL RESOURCES... developers.google.com/web/progressive-web-apps ionicframework.com/pwa itnext.io/turning-an-angular-6-app-into-a-progressive- web-app-9e6fc6361ba6 smashingmagazine.com/2018/09/pwa-angular-6 youtube.com/watch?v=othhfZ0mGjU

  38. #devfest18 Powered by Expo

  39. None
  40. #devfest18 Building Projects with Native Code

  41. None
  42. None
  43. #devfest18

  44. #devfest18

  45. +

  46. #devfest18 Show me the code...⚡

  47. “ First do it then do it right then do

    it better − Addy Osmani “
  48. None
  49. Want to help shape Firebase? Join us for one of

    our future user studies! Firebase Alpha Program firebase.google.com/alpha
  50. Step-by-steps tutorial teaching you how to use Firebase features Firebase

    Codelabs g.co/codelabs
  51. firebase.google.com/summit/

  52. “ If at first you don’t succeed; call it version

    1.0 “
  53. #devfest18

  54. None
  55. Thank you! You have questions? You can reach me via

    email: juarezpaf@gmail.com Juarez Filho Google Developer Expert