Creating real time applications with Angular and Firebase
0 likes422 views
This document discusses how to create real-time applications using Angular and Firebase. It covers Firebase features like the real-time database, authentication, cloud functions, and hosting. It also discusses how to connect Angular applications to Firebase using the AngularFire library and shows demos of retrieving and updating data from Firebase in an Angular application.
Creating real time applications with Angular and Firebase
- 2. Creating real time applications with Angular and Firebase Loiane Groner @loiane
- 3. Agenda ● Firebase overview ● Firebase Database ● Connecting to Firebase ● Angular ● Firebase Authentication ● Cloud Functions ● Firebase Extensions ● Firebase Hosting @loiane
- 4. ● Software Engineer | Business Analyst by day ● Blog / Youtube by night ○ Loiane.com ○ youtube.com/loianegroner Loiane Groner @loiane
- 5. What is Firebase? Realtime database by Google ... @loiane
- 6. @loiane
- 7. @loiane
- 8. @loiane
- 9. @loiane
- 10. Database
- 11. @loiane
- 12. @loiane
- 13. Firebase Database: Realtime Database x Cloud Firestore ● Great for real time applications ● Synchronizes the data between different devices ● Cache for offline support ● NoSQL database @loiane
- 14. @loiane
- 15. @loiane
- 16. @loiane
- 17. @loiane
- 18. Connecting to our app
- 19. @loiane
- 20. @loiane
- 21. @loiane
- 22. @loiane
- 23. @loiane
- 24. There is also an easier way to connect to Angular (or other frameworks) @loiane@loiane
- 25. @loiane
- 26. Angular
- 27. Demo @loiane
- 28. @loiane
- 29. @loiane
- 31. @loiane Setup
- 33. @loiane
- 38. @loiane How does it work?
- 40. @loiane Streams => Angular + RxJS
- 41. Important Notes!
- 42. @loiane
- 43. @loiane Don't forget to publish your rules!
- 44. Authentication
- 46. @loiane Firebase Auth + Angular + Material https://github.com/AnthonyNahas/ngx-auth-firebaseui
- 48. @loiane Auth page: admin users
- 49. Cloud Functions
- 51. Cloud Functions ● Define individual functions that will run on Google Cloud ○ Additional logic to the front-end application ● Node.js, Python, Go ● Different triggers are available @loiane
- 54. @loiane Cloud Functions: Node.js + TypeScript
- 55. @loiane Cloud Functions: Node.js + TypeScript
- 58. @loiane
- 59. Great way of adding functionality with no code! @loiane@loiane
- 60. @loiane Demo
- 61. @loiane
- 62. @loiane
- 63. @loiane
- 64. @loiane
- 65. @loiane
- 66. Firebase Hosting
- 67. @loiane Angular CLI: ng deploy
- 69. @loiane CI
- 70. Pricing
- 71. Pricing @loiane
- 72. Pricing @loiane
- 73. Want to learn more? ● Firebase Docs https://firebase.google.com/docs ● Angular Docs https://angular.io ● Angular Fire https://github.com/angular/angularfire ● Sample Source Code https://github.com/loiane/angular-firebase-heroes @loiane