Try   HackMD

20200307 Angular x Firebase Getting Started

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

gdg-tokyo.connpass.com/event/168843/
Video: https://www.youtube.com/watch?v=zeS5kfdrSxQ
Note: hackmd.io/@lacolaco/20200307-note


About Me?

https://docs.google.com/presentation/d/e/2PACX-1vQqaDZLnSTHZWlQ-SBljyKY_Q5_jCQYG8t5nx3-b5nYjld8q9J9haaYVUnioETVvG9padqOF9AXW9r3/pub?slide=id.p7


Agenda

  • Build Angular Starter App
  • Create Firebase project
  • Add Firebase to Angular app
  • Deploy to Firebase Hosting
  • Add Firestore for product data
  • Add Firebase Auth for signing in
  • Add Firebase RemoteConfig for changing app behavior

New to Angular?

Set up local environment

Build Angular Starter App

Create a simple e-commerce app.
angular.jp/start


Create Firebase project

https://console.firebase.google.com/


Add Firebase to Angular app

Goal: Set up Firebase configuration

AngularFire

The official Angular library for Firebase.

https://firebaseopensource.com/projects/angular/angularfire2/
https://github.com/angular/angularfire

Add AngularFire to the project

https://github.com/angular/angularfire/blob/6.0.0-rc.1/docs/install-and-setup.md

  • $ npm run ng add @angular/fire@next (for Angular v9)
  • Choose your Firebase project in prompt

Deploy to Firebase Hosting

Goal: Get public URL for the app

ng add command automatically have added deploy config for your project, already!

  • Use npm run ng deploy
  • Check out your deployed URL

https://github.com/angular/angularfire/blob/6.0.0-rc.1/docs/deploy/getting-started.md

Appendix


Add Firestore for product data

Goal: Replace products.ts and shipping.json by Firestore

Firestore: https://firebase.google.com/docs/firestore?hl=ja

  • Create products collection in Firestore
    • Open Firebase console
    • Add new collection: products
    • Copy product data from products.ts
    • Add id field for product detail page's URL
  • Initialize Firebase app
    • Write Firebase configuration in Angular app
const firebaseConfig = {
  apiKey: "AIzaSyB567tO0CTk76QarG-Kcqe9_iCMa3G19hY",
  authDomain: "angularfirebase-e031e.firebaseapp.com",
  databaseURL: "https://angularfirebase-e031e.firebaseio.com",
  projectId: "angularfirebase-e031e",
  storageBucket: "angularfirebase-e031e.appspot.com",
  messagingSenderId: "748796783412",
  appId: "1:748796783412:web:a3fadcd11c08138cb2d361",
  measurementId: "G-686X4G24P0"
};

export const environment = {
  production: false,
  firebaseConfig
};
  • Import AngularFireModule in AppModule
import { AngularFireModule } from '@angular/fire';
  • Add AngularFirestore module
    • and add import 'firebase/firestore';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import 'firebase/firestore';
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
  • Use product data from Firestore in Angular template
    • Use AngularFirestore service from component
  constructor(private firestore: AngularFirestore) {}

  products = this.firestore.collection('products').valueChanges();

https://github.com/angular/angularfire/blob/6.0.0-rc.1/docs/firestore/collections.md

Appendix


Add Firebase Auth for signing in

Goal: Add "Sign in with Google" to the app

Firebase Auth: https://firebase.google.com/docs/auth?hl=ja

  • Enable Google Auth in Firebase app
    • Open Firebase console
  • Add AngularFireAuth module
    • import AngularFireAuthModule in AppModule
  • Add /sign-in Page
    • ng g component sign-in
    • Add a route to AppModule
    • Open localhost:4200/sign-in
    • Add sign-in form using AngularFireAuth
signIn() {
    this.auth.signInWithPopup(new auth.GoogleAuthProvider());
  }
<div *ngIf="user | async as u; else showSignIn">
  Logged in
  {{ u.displayName }}

  <a routerLink="/cart">Go to cart</a>
</div>

<ng-template #showSignIn>
  <button (click)="signIn()">Sign in with Google</button>
</ng-template>
  • Add Sign out button on the top-bar
    • Edit top-bar component
    • Add sign-out button using AngularFireAuth
<button *ngIf="user | async" (click)="signOut()">
  Sign out
</button>
  • [skip] Use user information in checkout form
    • Use AngularFireAuth in CartComponent
  • Add AuthGuard to cart page
    • Import @angular/fire/auth-guard package
    • Use canActivate() API and redirect to top if not signed in

https://github.com/angular/angularfire/blob/6.0.0-rc.1/docs/auth/getting-started.md
https://github.com/angular/angularfire/blob/6.0.0-rc.1/docs/auth/router-guards.md


Add Firebase RemoteConfig for changing app behavior

Goal: Get promotion message via RemoteConfig

RemoteConfig: https://firebase.google.com/docs/remote-config?hl=ja
(RemoteConfig for Web is now in beta)

  • Add AngularFireRemoteConfigModule
    • provide RemoteConfig's SETTINGS for debugging
import {
  AngularFireRemoteConfigModule,
  SETTINGS
} from '@angular/fire/remote-config';
  providers: [
    {
      provide: SETTINGS,
      useValue: { minimumFetchIntervalMillis: 10_000 }
    }
  ],
  • Create promotion message config
    • Open Firebase Console
    • Publish promotionMessage config
  • Add promotion message component in products page
    • ng g component promotion-message
    • Add <app-promotion-message> to AppComponent
    • Use AngularFireRemoteConfig service in component
    • Get config with config.strings['promotionMessage']
  constructor(private config: AngularFireRemoteConfig) {}

  promotionMessage = this.config.strings['promotionMessage'];
<p *ngIf="promotionMessage | async as message">{{ message }}</p>
  • Change config condition
    • Add Conditions for users in Japan
    • Hide promotion message

https://github.com/angular/angularfire/blob/6.0.0-rc.1/docs/remote-config/getting-started.md


Wrap up


Thank you!

Join our community!: community.angular.jp