Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Creating real time applications with Angular and Firebase

275 Aufrufe

Veröffentlicht am

Talk presented at DevFest Florida 2019 - November 16 2019

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Creating real time applications with Angular and Firebase

  1. 1. Creating real time applications with Angular and Firebase Loiane Groner @loiane
  2. 2. Agenda ● Firebase overview ● Firebase Database ● Connecting to Firebase ● Angular ● Firebase Authentication ● Cloud Functions ● Firebase Extensions ● Firebase Hosting @loiane
  3. 3. ● Software Engineer | Business Analyst by day ● Blog / Youtube by night ○ Loiane.com ○ youtube.com/loianegroner Loiane Groner @loiane
  4. 4. What is Firebase? Realtime database by Google ... @loiane
  5. 5. @loiane
  6. 6. @loiane
  7. 7. @loiane
  8. 8. @loiane
  9. 9. Database
  10. 10. @loiane
  11. 11. @loiane
  12. 12. 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
  13. 13. @loiane
  14. 14. @loiane
  15. 15. @loiane
  16. 16. @loiane
  17. 17. Connecting to our app
  18. 18. @loiane
  19. 19. @loiane
  20. 20. @loiane
  21. 21. @loiane
  22. 22. @loiane
  23. 23. There is also an easier way to connect to Angular (or other frameworks) @loiane@loiane
  24. 24. @loiane
  25. 25. Angular
  26. 26. Demo @loiane
  27. 27. @loiane
  28. 28. @loiane
  29. 29. Schematics @loiane
  30. 30. @loiane Setup
  31. 31. @loiane Firebase config src/environment/environment.ts
  32. 32. @loiane
  33. 33. @loiane Importing @angular/fire
  34. 34. @loiane Retrieving a collection
  35. 35. @loiane Angular Template
  36. 36. @loiane Updating a document
  37. 37. @loiane How does it work?
  38. 38. @loiane Behind the scenes
  39. 39. @loiane Streams => Angular + RxJS
  40. 40. Important Notes!
  41. 41. @loiane
  42. 42. @loiane Don't forget to publish your rules!
  43. 43. Authentication
  44. 44. @loiane Firebase Authentication
  45. 45. @loiane Firebase Auth + Angular + Material https://github.com/AnthonyNahas/ngx-auth-firebaseui
  46. 46. @loiane @angular/fire
  47. 47. @loiane Auth page: admin users
  48. 48. Cloud Functions
  49. 49. @loiane Cloud Functions: Node.js
  50. 50. 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
  51. 51. @loiane Cloud Functions: Node.js
  52. 52. @loiane Cloud Functions: Node.js
  53. 53. @loiane Cloud Functions: Node.js + TypeScript
  54. 54. @loiane Cloud Functions: Node.js + TypeScript
  55. 55. Cloud Functions: Logs @loiane
  56. 56. Firebase Extensions
  57. 57. @loiane
  58. 58. Great way of adding functionality with no code! @loiane@loiane
  59. 59. @loiane Demo
  60. 60. @loiane
  61. 61. @loiane
  62. 62. @loiane
  63. 63. @loiane
  64. 64. @loiane
  65. 65. Firebase Hosting
  66. 66. @loiane Angular CLI: ng deploy
  67. 67. @loiane Integration with CI
  68. 68. @loiane CI
  69. 69. Pricing
  70. 70. Pricing @loiane
  71. 71. Pricing @loiane
  72. 72. 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
  73. 73. Questions? @loiane
  74. 74. Thank you! Obrigada! @loiane

×