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

8. Scope Serverless…

9. Scope Serverless… • Authentication

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

14. Why Serverless Backend?

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

34. What is Firebase?

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?

38. Key Firebase Features

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

49. Secure User Authentication

50. Firebase Authentication Overview

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

58. 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)

100. Data Operations Realtime Database

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()

107. Data Operations Firestore

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

129. Calling Cloud 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);

136. Exploring Additional Firebase Capabilities

137. Firebase Extensions

138. Firebase Extensions

139. Chatbot with PaLM API Latest extension

144. Bene fi ts Firebase ML

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 …

160. Other Firebase Features

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!

Workshop "Building Modern Web Applications with Firebase (and Angular)", Arman Murzabulatov

Workshop "Building Modern Web Applications with Firebase (and Angular)", Arman Murzabulatov

Recommandé

Contenu connexe

Similaire à Workshop "Building Modern Web Applications with Firebase (and Angular)", Arman Murzabulatov

Similaire à Workshop "Building Modern Web Applications with Firebase (and Angular)", Arman Murzabulatov(20)

Plus de Fwdays

Plus de Fwdays(20)

Dernier

Dernier(20)

Workshop "Building Modern Web Applications with Firebase (and Angular)", Arman Murzabulatov