# 20200307 Angular x Firebase Getting Started
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
- twitter.com/laco2net
- github.com/lacolaco
---
## 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?
- angular.jp
- [2020-01-12 Angularの今を知る 2020年版 (オープンセミナー香川 2019) - Google スライド](https://docs.google.com/presentation/d/1oAVy-bmG9EzHdiLH0f6G9LqXLihGIj8EF0jlgPsF8Fk/pub?slide=id.p)
## Set up local environment
- angular.jp/guide/setup-local#%E5%89%8D%E6%8F%90%E6%9D%A1%E4%BB%B6
- Node.js v10.13+
## Build Angular Starter App
Create a simple e-commerce app.
angular.jp/start
- Set up **github.com/lacolaco/angularfire-20200307-starter**
- git clone
- `npm install`
- `npm run 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
- Other hosting platforms: https://angular.jp/guide/deployment#automatic-deployment-with-the-cli
---
## 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
```ts
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`
```ts
import { AngularFireModule } from '@angular/fire';
```
- Add AngularFirestore module
- and add `import 'firebase/firestore'`;
```ts
import { AngularFirestoreModule } from '@angular/fire/firestore';
import 'firebase/firestore';
```
```ts
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFirestoreModule,
```
- Use product data from Firestore in Angular template
- Use `AngularFirestore` service from component
```ts
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
- Create `shipping` collection in Firestore
- Copy data from `assets/shipping.json`
- Use shipping data from Firestore in Angular template
- Use `AngularFirestore` service from `CartService`
- Enable offline experience: https://github.com/angular/angularfire/blob/6.0.0-rc.1/docs/firestore/offline-data.md
---
## 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`
```ts
signIn() {
this.auth.signInWithPopup(new auth.GoogleAuthProvider());
}
```
```html
<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`
```html
<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
```ts
import {
AngularFireRemoteConfigModule,
SETTINGS
} from '@angular/fire/remote-config';
```
```ts
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']`
```ts
constructor(private config: AngularFireRemoteConfig) {}
promotionMessage = this.config.strings['promotionMessage'];
```
```html
<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
Sign in with Wallet
Connect another wallet