Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting started with Firebase in Angular

Getting started with Firebase in Angular

Wojciech Sznapka

January 16, 2019
Tweet

More Decks by Wojciech Sznapka

Other Decks in Technology

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: '[email protected]',
    to: '[email protected]',
    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: [email protected]

    View Slide