Getting started with Firebase in Angular

Transcript

1. GETTING STARTED
   WITH FIREBASE
   

   View Slide

2. HELLO!
   I am Wojtek Sznapka
   2
   

   View Slide

3. Let’s talk about
   Typical* Single Page Application architecture
   *modern
   

   View Slide

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

   View Slide

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)
   

   View Slide

6. THAT’S A LOT
   OF BORING
   WORK
   

   View Slide

7. ⊗ Providing REST API (which has quite repetitive methods)
   ⊗ … or Websockets server to ensure better experience
   ⊗ Maintaining database
   ⊗ Managing users’ sessions and authorization
   

   View Slide

8. WHAT IF WE GET RID OF
   BACKEND?
   … and backend developers?
   

   View Slide

9. GOOGLE FIREBASE PLATFORM
   ⊗ Realtime database
   ⊗ Auth service
   ⊗ Hosting
   ⊗ Cloud functions
   ⊗ … and many more
   

   View Slide

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
    

    View Slide

11. FIRESTORE INSTALLATION
    ⊗ npm install firebase @angular/fire --save
    ⊗ Copy credentials to environment.ts
    ⊗ Import in module:
    @NgModule({
    imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    // …
    ],
    

    View Slide

12. THE SIMPLEST COMPONENT
    export class AppComponent implements OnInit {
    meetupers$: Observable;
    constructor(private db: AngularFirestore) {}
    ngOnInit(): void {
    this.meetupers$ = this.db
    .collection('meetupers')
    .valueChanges();
    }
    }
    

    View Slide

13. EVEN SIMPLER TEMPLATE
    
    Welcome to Firebase meetupers opinion collector!
    
    How would you rate Firebase's ease of use:
    
    
    {{m.name}} {{m.score}} / 5
    
    
    

    View Slide

14. View Slide

15. SAVING DATA TEMPLATE
    [formControl]="name">
    
    [value]="opt">{{opt}}
    
    Save
    

    View Slide

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!');
    });
    

    View Slide

17. BUT I NEED TO FILTER
    DATA!
    

    View Slide

18. LET’S TRIGGER FILTERING
    Welcome to Firebase meetupers opinion collector!
    
    Show only good reviews
    
    

    View Slide

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
    

    View Slide

20. FIRESTORE IS PUBLICLY
    AVAILABLE
    how’s that secure?
    

    View Slide

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
    

    View Slide

22. View Slide

23. USE AngularFireAuth
    authState: Observable;
    constructor(public auth: AngularFireAuth) {}
    ngOnInit() {
    this.authState = this.auth.authState;
    }
    login() {
    this.auth.auth.signInWithPopup(
    new auth.GoogleAuthProvider()
    );
    }
    

    View Slide

24. HOW ABOUT LOGIC
    RELATED TO DATA?
    For example: send an email when new opinion is
    created
    

    View Slide

25. SERVERLESS!
    Here: Cloud Functions
    

    View Slide

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
    

    View Slide

27. View Slide

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
    });
    

    View Slide

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;
    });
    

    View Slide

30. THANKS!
    Any questions?
    You can find me at:
    twitter: @sznapka
    email: wojciech.sznapka@sts.pl
    

    View Slide