Getting started with Firebase in Angular

1. GETTING STARTED WITH FIREBASE
2. HELLO! I am Wojtek Sznapka 2
3. Let’s talk about Typical* Single Page Application architecture *modern
4. DATA FLOW ⊗ REST API which queries database by some parameters ⊗ Returns data in JSON format (via Observable) ⊗ Displays it on frontend ⊗ Polls every second or so to get latest data* ⊗ *or use Websockets...
5. SAVING DATA INPUTTED BY USER ⊗ Handle form input ⊗ Send data to REST API ⊗ Check authorization ⊗ Save in database ⊗ Get back to the list (make sure to display new content if was created in the meantime)
6. THAT’S A LOT OF BORING WORK
7. ⊗ Providing REST API (which has quite repetitive methods) ⊗ … or Websockets server to ensure better experience ⊗ Maintaining database ⊗ Managing users’ sessions and authorization
8. WHAT IF WE GET RID OF BACKEND? … and backend developers?
9. GOOGLE FIREBASE PLATFORM ⊗ Realtime database ⊗ Auth service ⊗ Hosting ⊗ Cloud functions ⊗ … and many more
10. FIRESTORE - realtime database ⊗ Cloud hosted ⊗ NoSQL database ⊗ Client libraries for Android, iOS, Javascript (Angular, React etc.) ⊗ Oriented around documents and collections (like MongoDB) ⊗ Realtime
11. FIRESTORE INSTALLATION ⊗ npm install firebase @angular/fire --save ⊗ Copy credentials to environment.ts ⊗ Import in module: @NgModule({ imports: [ AngularFireModule.initializeApp(environment.firebase), AngularFirestoreModule, // … ],
12. THE SIMPLEST COMPONENT export class AppComponent implements OnInit { meetupers$: Observable<any[]>; constructor(private db: AngularFirestore) {} ngOnInit(): void { this.meetupers$ = this.db .collection('meetupers') .valueChanges(); } }
13. EVEN SIMPLER TEMPLATE <div class="jumbotron"> <h1>Welcome to Firebase meetupers opinion collector!</h1> </div> <h2>How would you rate Firebase's ease of use: </h2> <ul> <li *ngFor="let m of meetupers | async"> {{m.name}} {{m.score}} / 5 </li> </ul>
15. SAVING DATA TEMPLATE <input placeholder="Your name" class="form-control" [formControl]="name"> <select class="form-control" [formControl]="score"> <option *ngFor="let opt of [1, 2, 3, 4, 5]" [value]="opt">{{opt}}</option> </select> <button class="btn btn-success" (click)="save()">Save</button>
16. SAVING DATA METHOD export class AppComponent implements OnInit { name = new FormControl(''); score = new FormControl(''); save() { this.db.collection('meetupers').add({ name: this.name.value, score: parseInt(this.score.value), }).then(() => { this.name.setValue(null); this.score.setValue(null); console.log('Yass!'); });
17. BUT I NEED TO FILTER DATA!
18. LET’S TRIGGER FILTERING <h1>Welcome to Firebase meetupers opinion collector!</h1> <button class="btn btn-warning" (click)="propagandaMode()"> Show only good reviews </button>
19. HANDLING FILTERS propagandaMode() { this.meetupers$ = this.db.collection( 'meetupers', ref => ref.where('score', '>', 3) ).valueChanges(); } ⊗ Query options: where, orderBy, limit, startAt, startAfter, endAt, endBefore
20. FIRESTORE IS PUBLICLY AVAILABLE how’s that secure?
21. FIREBASE AUTH + DATABASE ⊗ Couple lines of code to setup authentication ⊚ Federated identity providers (FB, Google, Twitter, Github) ⊚ Email and password based protection ⊚ Custom auth system integration ⊗ Wide range of possibilities of protecting collections based on auth state ⊗ FirebaseUI handles sign-in flow
23. USE AngularFireAuth authState: Observable<firebase.User>; constructor(public auth: AngularFireAuth) {} ngOnInit() { this.authState = this.auth.authState; } login() { this.auth.auth.signInWithPopup( new auth.GoogleAuthProvider() ); }
24. HOW ABOUT LOGIC RELATED TO DATA? For example: send an email when new opinion is created
25. SERVERLESS! Here: Cloud Functions
26. CLOUD FUNCTIONS ⊗ JS/TS function being invoked on certain trigger ⊗ Trigger can be HTTP or related to Firestore document (change, create, delete) ⊗ Ability to run any JS/TS code with any dependencies based on event data firebase deploy --only functions
28. CLOUD FUNCTIONS - PREPARE import * as functions from 'firebase-functions'; import * as nodemailer from 'nodemailer'; const mailTransport = nodemailer.createTransport({ service: 'gmail', auth: { user: '***', pass: '*** }, // better: use ENV vars });
29. CLOUD FUNCTIONS - FIRESTORE ONWRITE exports.sendEmail = functions.firestore.document('/meetupers/{uid}').onWrite(async (change) => { const meetuper = change.after; await mailTransport.sendMail({ from: 'mailer@sznapka.pl', to: 'wojciech@sznapka.pl', subject: `${meetuper.get('name')}: ${meetuper.get('score')} / 5`, text: 'Yass!', }); return null; });
30. THANKS! Any questions? You can find me at: twitter: @sznapka email: wojciech.sznapka@sts.pl