In this workshop, participants will learn how to build a modern web app using Firebase and Angular. It covers key concepts like Firebase auth, Firestore & real-time database, cloud functions, integration with Angular, and other essential topics.

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

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

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

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)

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

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

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!