Workshop "Building Modern Web Applications with Firebase (and Angular)", Arman Murzabulatov
0 likes195 views
The document outlines an extensive overview of Firebase, a serverless app development platform by Google, detailing its features, benefits, and use cases for various development scenarios. It highlights Firebase's capabilities including authentication, real-time databases, cloud functions, and machine learning, emphasizing how it simplifies backend development and aids in faster application deployment. The document also provides implementation guidance, best practices for secure authentication, and explores integration with popular frontend frameworks like Angular, React, and Vue.js.
Workshop "Building Modern Web Applications with Firebase (and Angular)", Arman Murzabulatov
- 2. About me
- 3. • 15+ years in software engineering About me
- 4. • 15+ years in software engineering • Pascal -> C++ -> Java -> JS|TS About me
- 5. • 15+ years in software engineering • Pascal -> C++ -> Java -> JS|TS • ex-CTO SaaS startup About me
- 6. • 15+ years in software engineering • Pascal -> C++ -> Java -> JS|TS • ex-CTO SaaS startup • 5 years in FinTech (RBC, HSBC, Berenberg, Rabo) About me
- 7. • 15+ years in software engineering • Pascal -> C++ -> Java -> JS|TS • ex-CTO SaaS startup • 5 years in FinTech (RBC, HSBC, Berenberg, Rabo) • ACM - semi fi nalist About me
- 10. Scope Serverless… • Authentication • Database and data storages
- 11. Scope Serverless… • Authentication • Database and data storages • APIs & TS/JS scripts on the cloud
- 12. Scope Serverless… • Authentication • Database and data storages • APIs & TS/JS scripts on the cloud • Machine Learning
- 13. Scope Serverless… • Authentication • Database and data storages • APIs & TS/JS scripts on the cloud • Machine Learning • and more
- 15. Challenges in Scaling and Maintaining Dedicated Backend Infrastructure
- 16. Challenges in Scaling and Maintaining Dedicated Backend Infrastructure • Time-consuming
- 17. Challenges in Scaling and Maintaining Dedicated Backend Infrastructure • Time-consuming • Resource-intensive
- 18. Challenges in Scaling and Maintaining Dedicated Backend Infrastructure • Time-consuming • Resource-intensive • High costs
- 19. Advantages of Serverless Backend Solutions
- 20. Advantages of Serverless Backend Solutions • Cost-e ff ective
- 21. Advantages of Serverless Backend Solutions • Cost-e ff ective • Faster development
- 22. Advantages of Serverless Backend Solutions • Cost-e ff ective • Faster development • Easy scalability
- 23. Advantages of Serverless Backend Solutions • Cost-e ff ective • Faster development • Easy scalability • Low maintenance
- 24. Ideal for
- 25. Ideal for • Early-stage startups with dynamic products
- 26. Ideal for • Early-stage startups with dynamic products • Solo developers working on hobby projects
- 27. Ideal for • Early-stage startups with dynamic products • Solo developers working on hobby projects • Mature teams working on proofs of concept
- 28. Firebase Google's Serverless Backend Solution
- 29. Firebase Google's Serverless Backend Solution
- 30. Firebase Google's Serverless Backend Solution
- 31. Firebase Google's Serverless Backend Solution
- 32. Firebase Google's Serverless Backend Solution
- 33. Firebase Google's Serverless Backend Solution
- 35. • A comprehensive app development platform by Google What is Firebase?
- 36. • A comprehensive app development platform by Google • Provides serverless backend infrastructure What is Firebase?
- 37. • A comprehensive app development platform by Google • Provides serverless backend infrastructure • O ff ers a suite of tools and services for app development What is Firebase?
- 39. Key Firebase Features Firebase Authentication
- 40. Key Firebase Features Firebase Authentication Realtime Database
- 41. Key Firebase Features Firebase Authentication Realtime Database Firestore
- 42. Key Firebase Features Firebase Authentication Realtime Database Firestore Cloud Functions
- 43. Key Firebase Features Firebase Authentication Realtime Database Firestore Cloud Functions Firebase ML
- 44. Key Firebase Features Firebase Authentication Realtime Database Firestore Cloud Functions Firebase ML and more…
- 45. Benefits of Using Firebase
- 46. Benefits of Using Firebase • Simpli fi es backend development
- 47. Benefits of Using Firebase • Simpli fi es backend development • Speeds up app development and deployment
- 48. Benefits of Using Firebase • Simpli fi es backend development • Speeds up app development and deployment • Easily integrates with popular frontend frameworks
- 51. Firebase Authentication • A comprehensive authentication solution Overview
- 52. Firebase Authentication • A comprehensive authentication solution • Supports multiple authentication providers (e.g., email/password, Google, Facebook, Twitter, etc.) Overview
- 53. Firebase Authentication • A comprehensive authentication solution • Supports multiple authentication providers (e.g., email/password, Google, Facebook, Twitter, etc.) • Simpli fi es user management and security Overview
- 54. Setting Up Firebase Authentication
- 55. Setting Up Firebase Authentication • Enable desired authentication providers in the Firebase Console
- 56. Setting Up Firebase Authentication • Enable desired authentication providers in the Firebase Console
- 57. Setting Up Firebase Authentication • Enable desired authentication providers in the Firebase Console
- 58. Setting Up Firebase Authentication • Enable desired authentication providers in the Firebase Console • Integrate Firebase SDK into your app
- 59. Setting Up Firebase Authentication • Enable desired authentication providers in the Firebase Console • Integrate Firebase SDK into your app
- 60. Setting Up Firebase Authentication • Enable desired authentication providers in the Firebase Console • Integrate Firebase SDK into your app
- 61. Setting Up Firebase Authentication • Enable desired authentication providers in the Firebase Console • Integrate Firebase SDK into your app • Implement sign-in and sign-up fl ows
- 62. Setting Up Firebase Authentication • Enable desired authentication providers in the Firebase Console • Integrate Firebase SDK into your app • Implement sign-in and sign-up fl ows • Use built-in providers (Facebook, Twitter, GitHub, Google and etc.)
- 63. Setting Up Firebase Authentication • Enable desired authentication providers in the Firebase Console • Integrate Firebase SDK into your app • Implement sign-in and sign-up fl ows • Use built-in providers (Facebook, Twitter, GitHub, Google and etc.) • Authenticate with Email/Password or Email link (passwordless sign-in)
- 64. Setting Up Firebase Authentication • Enable desired authentication providers in the Firebase Console • Integrate Firebase SDK into your app • Implement sign-in and sign-up fl ows • Use built-in providers (Facebook, Twitter, GitHub, Google and etc.) • Authenticate with Email/Password or Email link (passwordless sign-in) • built custom or use open source UI
- 65. Setting Up Firebase Authentication • Enable desired authentication providers in the Firebase Console • Integrate Firebase SDK into your app • Implement sign-in and sign-up fl ows • Use built-in providers (Facebook, Twitter, GitHub, Google and etc.) • Authenticate with Email/Password or Email link (passwordless sign-in) • built custom or use open source UI • Framework utility libraries like https://github.com/angular/angular fi re
- 66. What happens when user sign-in
- 67. What happens when user sign-in • Step 1: Information about the user is returned via callbacks.
- 68. What happens when user sign-in • Step 1: Information about the user is returned via callbacks. • Step 2: User information contains a unique ID
- 69. What happens when user sign-in • Step 1: Information about the user is returned via callbacks. • Step 2: User information contains a unique ID • Step 3: Firebase will also manage your user session
- 70. What happens when user sign-in • Step 1: Information about the user is returned via callbacks. • Step 2: User information contains a unique ID • Step 3: Firebase will also manage your user session
- 71. What happens when user sign-in • Step 1: Information about the user is returned via callbacks. • Step 2: User information contains a unique ID • Step 3: Firebase will also manage your user session • … so we can focus on your users and not the sign-in infrastructure.
- 72. Best Practices for Secure Authentication
- 73. Best Practices for Secure Authentication • Use secure, up-to-date authentication libraries
- 74. Best Practices for Secure Authentication • Use secure, up-to-date authentication libraries • Implement multi-factor authentication (MFA) where possible
- 75. Best Practices for Secure Authentication • Use secure, up-to-date authentication libraries • Implement multi-factor authentication (MFA) where possible • Regularly monitor and review user access logs
- 76. Choosing the Right Database
- 77. Realtime Database vs Firestore
- 78. Firebase • A NoSQL, cloud-hosted database Realtime Database
- 79. Firebase • A NoSQL, cloud-hosted database • Low-latency updates and presence detection Realtime Database
- 80. Firebase • A NoSQL, cloud-hosted database • Low-latency updates and presence detection • Real-time collaboration apps Realtime Database
- 81. Firebase • A NoSQL, cloud-hosted database • Low-latency updates and presence detection • Real-time collaboration apps • IoT devices Realtime Database
- 82. Firebase • A NoSQL, cloud-hosted database • Low-latency updates and presence detection • Real-time collaboration apps • IoT devices • Gaming apps Realtime Database
- 83. Firebase • A NoSQL, cloud-hosted database • Low-latency updates and presence detection • Real-time collaboration apps • IoT devices • Gaming apps • Realtime data synchronization Realtime Database
- 84. Firebase • A NoSQL, cloud-hosted database • Low-latency updates and presence detection • Real-time collaboration apps • IoT devices • Gaming apps • Realtime data synchronization • JSON data storage Realtime Database
- 85. • A NoSQL, cloud-hosted database Firestore
- 86. • A NoSQL, cloud-hosted database • Realtime updates & o ffl ine support Firestore
- 87. • A NoSQL, cloud-hosted database • Realtime updates & o ffl ine support • Advanced querying and indexing Firestore
- 88. • A NoSQL, cloud-hosted database • Realtime updates & o ffl ine support • Advanced querying and indexing • Documents and collections Firestore
- 89. • A NoSQL, cloud-hosted database • Realtime updates & o ffl ine support • Advanced querying and indexing • Documents and collections • Large-scale apps Firestore
- 90. • A NoSQL, cloud-hosted database • Realtime updates & o ffl ine support • Advanced querying and indexing • Documents and collections • Large-scale apps • Complex data structures Firestore
- 91. • A NoSQL, cloud-hosted database • Realtime updates & o ffl ine support • Advanced querying and indexing • Documents and collections • Large-scale apps • Complex data structures • Apps with multiple sub-collections Firestore
- 92. Implementation in Angular Step 1: Firebase SDK integration
- 93. Implementation in Angular Step 1: Firebase SDK integration • ng add @angular/ fi re
- 94. Implementation in Angular Step 1: Firebase SDK integration • ng add @angular/ fi re • Add Firebase con fi g to environments variables
- 95. Implementation in Angular Step 1: Firebase SDK integration • ng add @angular/ fi re • Add Firebase con fi g to environments variables • Con fi gure @NgModule for the AngularFireModule
- 96. Implementation in Angular Step 2: Setting up and con fi guring databases
- 97. Implementation in Angular Step 2: Setting up and con fi guring databases • Enable desired database (Realtime Database or Firestore) in the Firebase Console
- 98. Implementation in Angular Step 2: Setting up and con fi guring databases • Enable desired database (Realtime Database or Firestore) in the Firebase Console • De fi ne data models in your Angular app to represent your data structure
- 99. Implementation in Angular Step 2: Setting up and con fi guring databases • Enable desired database (Realtime Database or Firestore) in the Firebase Console • De fi ne data models in your Angular app to represent your data structure • Create services to handle database operations (e.g., create, read, update, delete)
- 101. Data Operations Realtime Database • Imsport and inject AngularFireDatabase in your service
- 102. Data Operations Realtime Database • Imsport and inject AngularFireDatabase in your service
- 103. Data Operations Realtime Database • Imsport and inject AngularFireDatabase in your service • Read data: this.db.object('/path/to/data').valueChanges()
- 104. Data Operations Realtime Database • Imsport and inject AngularFireDatabase in your service • Read data: this.db.object('/path/to/data').valueChanges() • Write data: this.db.object('/path/to/data').set(newData)
- 105. Data Operations Realtime Database • Imsport and inject AngularFireDatabase in your service • Read data: this.db.object('/path/to/data').valueChanges() • Write data: this.db.object('/path/to/data').set(newData) • Update data: this.db.object('/path/to/data').update(updatedData)
- 106. Data Operations Realtime Database • Imsport and inject AngularFireDatabase in your service • Read data: this.db.object('/path/to/data').valueChanges() • Write data: this.db.object('/path/to/data').set(newData) • Update data: this.db.object('/path/to/data').update(updatedData) • Delete data: this.db.object('/path/to/data').remove()
- 108. Data Operations Firestore • Import and inject AngularFirestore in your service
- 109. Data Operations Firestore • Import and inject AngularFirestore in your service
- 110. Data Operations Firestore • Import and inject AngularFirestore in your service • Read data: this.afs.doc('/path/to/data').valueChanges()
- 111. Data Operations Firestore • Import and inject AngularFirestore in your service • Read data: this.afs.doc('/path/to/data').valueChanges() • Write data: this.afs.doc('/path/to/data').set(newData)
- 112. Data Operations Firestore • Import and inject AngularFirestore in your service • Read data: this.afs.doc('/path/to/data').valueChanges() • Write data: this.afs.doc('/path/to/data').set(newData) • Update data: this.afs.doc('/path/to/data').update(updatedData)
- 113. Data Operations Firestore • Import and inject AngularFirestore in your service • Read data: this.afs.doc('/path/to/data').valueChanges() • Write data: this.afs.doc('/path/to/data').set(newData) • Update data: this.afs.doc('/path/to/data').update(updatedData) • Delete data: this.afs.doc('/path/to/data').delete()
- 114. Extend with Cloud Functions
- 115. What are Cloud Functions?
- 116. What are Cloud Functions? • Serverless, event-driven functions
- 117. What are Cloud Functions? • Serverless, event-driven functions • Supports Node.js, Python, and Go
- 118. What are Cloud Functions? • Serverless, event-driven functions • Supports Node.js, Python, and Go • Automatically scales with your app's usage
- 119. Benefits and Use Cases
- 120. Benefits and Use Cases • Execute custom server-side logic without managing servers
- 121. Benefits and Use Cases • Execute custom server-side logic without managing servers • Perform data validation, data transformation, or data aggregation
- 122. Benefits and Use Cases • Execute custom server-side logic without managing servers • Perform data validation, data transformation, or data aggregation • Respond to events from Firebase services (e.g., Firestore, Realtime Database, Authentication)
- 123. Setting Up & Deploying Cloud Functions
- 124. Setting Up & Deploying Cloud Functions • Install Firebase CLI
- 125. Setting Up & Deploying Cloud Functions • Install Firebase CLI • Initialize Functions firebase init functions
- 126. Setting Up & Deploying Cloud Functions • Install Firebase CLI • Initialize Functions firebase init functions • Create Functions
- 127. Setting Up & Deploying Cloud Functions • Install Firebase CLI • Initialize Functions firebase init functions • Create Functions • Deploy Functions firebase deploy --only functions
- 128. Setting Up & Deploying Cloud Functions • Install Firebase CLI • Initialize Functions firebase init functions • Create Functions • Deploy Functions firebase deploy --only functions • Monitor Functions
- 130. Calling Cloud Functions • Import fi rebase/app and fi rebase/functions packages in your frontend app
- 131. Calling Cloud Functions • Import fi rebase/app and fi rebase/functions packages in your frontend app • Initialize Firebase with your project con fi guration
- 132. Calling Cloud Functions • Import fi rebase/app and fi rebase/functions packages in your frontend app • Initialize Firebase with your project con fi guration • Call Functions: Use firebase.functions().httpsCallable('functionName') to create a reference to the function, and call it with the call() method
- 133. Example in Node.js: and calling it from Angular
- 134. Example in Node.js: and calling it from Angular const functions = require('firebase-functions'); exports.myFunction = functions.https.onCall((data, context) => { // function body });
- 135. Example in Node.js: and calling it from Angular const functions = require('firebase-functions'); exports.myFunction = functions.https.onCall((data, context) => { // function body }); import { AngularFireFunctions } from '@angular/fire/functions'; // ... constructor(private fns: AngularFireFunctions) {} // ... const callable = this.fns.httpsCallable('myFunction'); callable({ /* data */ }).toPromise().then(console.log);
- 137. Firebase Extensions
- 138. Firebase Extensions
- 139. Chatbot with PaLM API Latest extension
- 140. Chatbot with PaLM API Latest extension
- 141. Chatbot with PaLM API Latest extension
- 142. Chatbot with PaLM API Latest extension
- 143. Chatbot with PaLM API Latest extension
- 145. Bene fi ts • Leverage Google's machine learning capabilities Firebase ML
- 146. Bene fi ts • Leverage Google's machine learning capabilities • Easy-to-use SDKs Firebase ML
- 147. Bene fi ts • Leverage Google's machine learning capabilities • Easy-to-use SDKs • Pre-trained models for common ML tasks Firebase ML
- 148. Bene fi ts • Leverage Google's machine learning capabilities • Easy-to-use SDKs • Pre-trained models for common ML tasks • Custom model deployment and hosting Firebase ML
- 149. for Common ML Tasks Pre-built APIs
- 150. for Common ML Tasks • Image Labelling Pre-built APIs
- 151. for Common ML Tasks • Image Labelling • Text Recognition Pre-built APIs
- 152. for Common ML Tasks • Image Labelling • Text Recognition • Object Detection and Tracking Pre-built APIs
- 153. for Common ML Tasks • Image Labelling • Text Recognition • Object Detection and Tracking • Face Detection Pre-built APIs
- 154. for Common ML Tasks • Image Labelling • Text Recognition • Object Detection and Tracking • Face Detection • Barcode Scanning Pre-built APIs
- 155. for Common ML Tasks • Image Labelling • Text Recognition • Object Detection and Tracking • Face Detection • Barcode Scanning • Landmark Recognition Pre-built APIs
- 156. … Deployment and Hosting Custom Model …
- 157. … Deployment and Hosting • Train our own custom ML models and deploy to Firebase Custom Model …
- 158. … Deployment and Hosting • Train our own custom ML models and deploy to Firebase • App downloads custom model from Firebase and uses it Custom Model …
- 159. … Deployment and Hosting • Train our own custom ML models and deploy to Firebase • App downloads custom model from Firebase and uses it • Hosts and serves custom models Custom Model …
- 161. Other Firebase Features • Storage
- 162. Other Firebase Features • Storage • Analytics
- 163. Other Firebase Features • Storage • Analytics • Hosting
- 164. Other Firebase Features • Storage • Analytics • Hosting • Remote Con fi g
- 165. Other Firebase Features • Storage • Analytics • Hosting • Remote Con fi g • … and many more
- 166. Working with React, VueJS, and more or cross-framework compatibility
- 167. Working with React, VueJS, and more or cross-framework compatibility • Most services are Framework Agnostic
- 168. Working with React, VueJS, and more or cross-framework compatibility • Most services are Framework Agnostic • Firebase SDK is compatible with popular frontend frameworks
- 169. Working with React, VueJS, and more or cross-framework compatibility • Most services are Framework Agnostic • Firebase SDK is compatible with popular frontend frameworks • React: react- fi rebase, react-redux- fi rebase
- 170. Working with React, VueJS, and more or cross-framework compatibility • Most services are Framework Agnostic • Firebase SDK is compatible with popular frontend frameworks • React: react- fi rebase, react-redux- fi rebase • VueJS: vue fi re, vuex fi re
- 171. Working with React, VueJS, and more or cross-framework compatibility • Most services are Framework Agnostic • Firebase SDK is compatible with popular frontend frameworks • React: react- fi rebase, react-redux- fi rebase • VueJS: vue fi re, vuex fi re • General resources: Firebase documentation, community examples, tutorials
- 172. Conclusion
- 173. Key Points
- 174. Key Points • Firebase simpli fi es serverless backend development
- 175. Key Points • Firebase simpli fi es serverless backend development • Provides a suite of tools and services, such as Authentication, Realtime Database, Firestore, Cloud Functions, and Firebase ML
- 176. Key Points • Firebase simpli fi es serverless backend development • Provides a suite of tools and services, such as Authentication, Realtime Database, Firestore, Cloud Functions, and Firebase ML • Compatible with popular frontend frameworks like Angular, React, and VueJS
- 177. What next
- 178. What next • Leverage Firebase to build scalable, cost-e ff ective backend solutions for your mobile or web apps
- 179. What next • Leverage Firebase to build scalable, cost-e ff ective backend solutions for your mobile or web apps • Experiment with di ff erent Firebase features to fi nd the best combination for your projects
- 180. Q&A Thanks!