Firebase is a great platform that gives a suite of tools with which you can easily create and manage your app’s backend, and concentrate on developing a marvelous frontend. This is where Angular steps in: it helps you build your app in component-based architecture, and provides solutions for various client-side aspects. The combination of the two gives a powerful connection between the application and the database. In this lecture I’ll show how to implement common use-cases of users and data management by leveraging Firebase’s and Angular’s strengths: realtime synchronization, OAuth and more.

1. Angular is on Fire(base)!
Shmuela Jacobs
AMSTERDAM 16 - 17 MAY 2017

2. Shmuela Jacobs
Front-end Developer, Consultant & Trainer
shmuela@ng-girls.org
shmool
@ShmuelaJ

3. Shmuela Jacobs
Front-end Developer & Consultant
shmuela@ng-girls.org
shmool
@ShmuelaJ

4. Shmuela Jacobs
Front-end Developer & Consultant
shmuela@ng-girls.org
shmool
@ShmuelaJ

5. Shmuela Jacobs
Front-end Developer & Consultant
shmuela@ng-girls.org
shmool
@ShmuelaJ

6. https://openfire-cookbook.firebaseapp.com
Demo App - OpenFire Cookbook

7. Firebase

8. 4

9. https://github.com/angular/angular-cli
Angular CLI

10. https://github.com/angular/angularfire2
AngularFire2
Do stuff like:
<div> {{ (authService.authState$ | async )?.displayName }} </div>

11. Firebase Authentication
Email + Password - with all the needed features
Federated identity providers - Google, Facebook...
Other identity providers - using Cloud Functions
Smart user management
Anonymous user

12. DB with AngularFire2
Real time
Read/write protection
Lists
Objects
Queries - observables!

13. Cloud Functions
Firebase cloud messaging (FCM)
send emails
send SMS
modify realtime DB
execute intensive tasks
access storage
batch jobs
integrate with 3rd party services and APIs
NEW!

14. Cloud Functions Triggers
Realtime DB - on write
Authentication - user created/deleted
Cloud Storage
Analytics
HTTP
Google Cloud Pub/Sub (messaging)

15. Project Setup
npm i angular-cli -g
ng new my-app --style=scss --prefix=sj -it --routing
cd my-app
npm i firebase angularfire2 -S
npm i firebase-tools -g
firebase login
firebase init

16. OpenFire CookBook
Authentication
Real Time Database
Cloud Functions
NEW!

17. OpenFire Cookbook User Management
Authentication - password + Google
Routing
User Avatar
Read permission - all
Write permission - authenticated user
Edit permission - recipe owner

18. DB Rules
{
"rules": {
".read": "auth != null",
".write": "auth != null"
}
}

19. DB Rules
{
"rules": {
".read": true,
".write": true
}
}

20. DB Rules
{
"rules": {
".read": true,
".write": false,
"recipes": {
"$recipeId": {
".write": "auth.uid != null && (!data.exists()
|| data.child('uid').val() === auth.uid)"
}
}
}
}

21. DB Rules
{
"rules": {
// By default, make all data private unless specified otherwise.
".read": false,
".write": false,
"room-metadata": {
".read": true,
"$roomId": {
// Append-only by anyone, and admins can add official rooms, and edit or remove rooms as
well.
".write": "(auth != null) && (!data.exists() || root.child('moderators').hasChild(auth.uid)
|| data.child('createdByUserId').val() === auth.uid)",
".validate": "newData.hasChildren(['name','type'])",
"id": {
".validate": "(newData.val() === $roomId)"
},
"createdByUserId": {
".validate": "(auth.uid === newData.val())"
},
"numUsers": {
".validate": "(newData.isNumber())"
},
"type": {
".validate": "('public' === newData.val()) || 'private' === newData.val() || ('official'
Erik Haddad - firechat
https://firechat.social
erikhaddad

22. Deploy
ng build --prod
firebase deploy

23. More in Firebase
Storage
Notifications
Invites
AdWords
Analytics
...and more!
firebase.google.com
angular.io
github.com/angular/angularfire2
angularfirebase.com

24. Shmuela Jacobs
shmuela@ng-girls.org
shmool
@ShmuelaJ
ng-girls.org