gdg-tokyo.connpass.com/event/168843/
Video: https://www.youtube.com/watch?v=zeS5kfdrSxQ
Note: hackmd.io/@lacolaco/20200307-note
Create a simple e-commerce app.
angular.jp/start
npm install
npm run start
https://console.firebase.google.com/
Goal: Set up Firebase configuration
The official Angular library for Firebase.
https://firebaseopensource.com/projects/angular/angularfire2/
https://github.com/angular/angularfire
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)Goal: Get public URL for the app
ng add
command automatically have added deploy config for your project, already!
npm run ng deploy
https://github.com/angular/angularfire/blob/6.0.0-rc.1/docs/deploy/getting-started.md
Appendix
Goal: Replace products.ts
and shipping.json
by Firestore
Firestore: https://firebase.google.com/docs/firestore?hl=ja
products
collection in Firestore
products
products.ts
id
field for product detail page's URLconst 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
};
AngularFireModule
in AppModule
import { AngularFireModule } from '@angular/fire';
import 'firebase/firestore'
;import { AngularFirestoreModule } from '@angular/fire/firestore';
import 'firebase/firestore';
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFirestoreModule,
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
shipping
collection in Firestore
assets/shipping.json
AngularFirestore
service from CartService
Goal: Add "Sign in with Google" to the app
Firebase Auth: https://firebase.google.com/docs/auth?hl=ja
AngularFireAuthModule
in AppModule
/sign-in
Page
ng g component sign-in
AppModule
localhost:4200/sign-in
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>
top-bar
componentAngularFireAuth
<button *ngIf="user | async" (click)="signOut()">
Sign out
</button>
AngularFireAuth
in CartComponent
AuthGuard
to cart page
@angular/fire/auth-guard
packagecanActivate()
API and redirect to top if not signed inhttps://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
Goal: Get promotion message via RemoteConfig
RemoteConfig: https://firebase.google.com/docs/remote-config?hl=ja
(RemoteConfig for Web is now in beta)
AngularFireRemoteConfigModule
SETTINGS
for debuggingimport {
AngularFireRemoteConfigModule,
SETTINGS
} from '@angular/fire/remote-config';
providers: [
{
provide: SETTINGS,
useValue: { minimumFetchIntervalMillis: 10_000 }
}
],
promotionMessage
configng g component promotion-message
<app-promotion-message>
to AppComponent
AngularFireRemoteConfig
service in componentconfig.strings['promotionMessage']
constructor(private config: AngularFireRemoteConfig) {}
promotionMessage = this.config.strings['promotionMessage'];
<p *ngIf="promotionMessage | async as message">{{ message }}</p>
https://github.com/angular/angularfire/blob/6.0.0-rc.1/docs/remote-config/getting-started.md
Join our community!: community.angular.jp