[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

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
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...
23. ADDING PWA AWESOMENESS... $ npm i http-server
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...
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
40. #devfest18 Building Projects with Native Code
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 “
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
55. Thank you! You have questions? You can reach me via email: juarezpaf@gmail.com Juarez Filho Google Developer Expert