在Angular和Firebase上将Firebase与Angular教程应用程序进行兼容（摘要：“20200307 Angular+Firebase Live Coding Session #gdgtokyo”）

2 年 ago

雅, 悟

3 minutes

is your name?

这篇文章记录了3/7（星期六）由GDG Tokyo组织的[Angular+Firebase现场编程会议]中涉及的实践内容。在实践活动中，我们将Firebase与Angular教程中的[手机支付电子商务网站]进行集成，实现了应用的托管、Firestore数据库的使用、FirebaseAuth的身份验证以及使用FirebaseRemoteConfig进行应用程序文案更改，无需发布应用程序。

待办事项 shì

（RemoteConfig的Web应用版本为beta版）

这是用来做什么的？

这篇文章是关于Angular和Firebase的入门指南，内容如下：
connpass URL:
https://gdg-tokyo.connpass.com/event/168843/?utm_campaign=event_message_to_selected_participant&utm_source=notifications&utm_medium=email&utm_content=title_link

这是Angular和Firebase的入门级Live Coding Session。

以下是中文的译文：
有什么用途

F/W的处理方式，功能如下所示。

Firebase

Firestore
Authentication
Hosting
RemoteConfig

环境和版本

Node: 10.16.3

注意

以下是实施的大致流程：
1. 创建Angular项目
2. 创建Firebase项目
2. 在Firebase控制台中启用所需功能
3. 在Angular应用中使用添加的Firebase功能（编辑app.component.ts）
4. 编写各个组件（≒页面）的TS/HTML代码
5. 重复进行步骤2至4

繁殖步骤

以下是Hand-on的存档视频。

最初的建设

https://angular.jp/guide/setup-local#%E5%89%8D%E6%8F%90%E6%9D%A1%E4%BB%B6

从GitHub克隆完成Angular教程的源代码（lacolaco的github）

git clone github.com/lacolaco/angularfire-20200307-starter
（可能需要使用”cd”命令切换到项目目录）
npm install
npm run start

在Firebase上创建项目

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

将Web应用程序添加到Firebase项目

将Angular应用程序与Firebase项目关联（在environment中添加firebaseConfig）

Firebase控制台 -> 菜单栏齿轮图标 -> 项目设置 -> 通用标签页 -> 我的应用程序 -> Firebase SDK片段 -> 复制配置片段
粘贴如下：

const firebaseConfig = {
  apiKey: ~~~
  ~~~中略~~~
  measurementId: ~~~
};

在环境变量中添加一行常数。

export const environment = {
  production: false,
  firebaseConfig //←追記
};

使用Firebase Hosting进行应用程序托管。

在Firebase控制台-主机中选择要主机化的应用程序

使用以下命令来主机化Angular应用程序

   npm run ng deploy

?主持完成了?（1/5已完成）

使用Firestore将数据从Firebase数据库传递到Angular应用程序。

克隆的项目中的产品（如Phone XL）只需加载/src/app/product.ts文件。要实现显示Firestore数据库的数据。

集合：”products”
文档：自动生成ID即可
字段（请复制/src/product.ts）：

name(string)
price(number)
desctiprion(string)
id(number)

※注意※
id是不在products.ts中的属性，但是后来需要在ngFor中循环集合并生成HTML元素，所以需要一个可迭代对象。

使用Angular使用Firestore

要导入”AngularFireModule”和”AngularFirestoreModule”。
‘fire/firestore’;目前必须这样写。

/src/app/app.component.ts
import { AngularFireModule } from ‘@angular/fire’;
import { AngularFirestoreModule } from ‘@angular/fire/firestore’;
import ‘fire/firestore’;

在@NgModule中注册导入的两个模块

/src/app/app.component.ts
RouterModule.forRoot([
~~~中略~~~
]),
AngularFireModule.initializeApp(environment.firebaseConfig), // 添加
AngularFirebaseModule, // 添加

4. 将AngularFirestore注入到product-list.component中
– 同时，通过”valueChanges”方法，使应用程序能够实时检测和更新当Firestore发生更改时的变化。

constructor(private firestore: AngularFirestore) {}
products = this.firestore.collection('products').valueChanges();

? 每次在Firestore上进行更改时，应用程序的产品信息将会被更新 ? (2/5完成)

使用FirebaseAuth实现Google身份验证。

Firebase控制台 – 身份验证 – 登录方法选项卡 – Google – 启用

使Angular应用程序可以使用FirebaseAuth

/src/app/app.component.ts
import { AngularFireAuthModule } from ‘@angular/fire/auth’; //←添加
~~~省略~~~
AngularFirestoreModule,
AngularFireAuthModule, //←添加

为了添加”/sign-in”页面，生成一个sign-in组件。

```
ng generate conponent sign-in
```

4. 设置应用程序的路由（页面跳转设置）。

    RouterModule.forRoot([
      { path: '', component: ProductListComponent },
      { path: 'products/:productId', component: ProductDetailsComponent },
      { path: 'cart', component: CartComponent },
      { path: 'shipping', component: ShippingComponent },
      { path: 'sign-in', component: SignInComponent }, //←追記

请在浏览器中访问 localhost:4200/sign-in

登录页正常！

增加一个signIn方法。

  ngOnInit(): void {
  }

//↓追記
  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>

7. 将“退出”功能添加到顶部栏上
（在底部添加一个按钮元素）

<button *ngIf="user | async" (click)="signOut()">
  Sign out
</button>

? Google 登录已完成实施 ? (3/5 完成)

使用FirebaseAuthGuard来防止非登录/登录状态下的不一致。

ログイン状態で/sign-inページに遷移したら, /ページにリダイレクトさせる

添加模块

import { 
  AngularFireAuthGuardModule,
  canActivate,
  redirectLoggedInTo,
  redirectUnauthorizedTo
} from '@angular/fire/auth-guard';

2. 路由的设置

    RouterModule.forRoot([
      { path: '', component: ProductListComponent },
      { path: 'products/:productId', component: ProductDetailsComponent },
//↓cartページにcanActivate関数追加
      {
        path: 'cart',
        component: CartComponent,
        ...canActivate(() => redirectUnauthorizedTo(['/sign-in']))
      },
      { path: 'shipping', component: ShippingComponent },
//↓sign-inページにcanActivate関数追加
      {
        path: 'sign-in',
        component: SignInComponent,
        ...canActivate(() => redirectLoggedInTo(['/']))
      },
    ]),

canActivate関数の書き方はAngularっぽい書き方らしい

? 当在非登录状态下进入购物车页面时，会跳转至登录页面；而在登录状态下进行跳转至登录页面时，则会回到(根)页面。? (4/5 已完成)

在不发布应用程序的情况下，使用FirebaseRemoteConfig更改应用程序内的文本。

RemoteConfig的Web应用版是beta版的。

使用Firebase设置RemoteConfig

Firebase Console – Remote Config(下の方) – パラメータを追加 – 任意のパラメータキー – 値を入力(ex)Now on sale! – 条件の値を追加 – (ex)言語 – Japaneseの場合セール中です

2. 添加模块

import {
  AngularFireRemoteConfigModule,
  SETTHINGS
} from '@angular/fire/remote-config';

SETTINGSは開発用にRemoteConfigのFetch間隔を指定するために使用. 指定しない場合のFetch間隔は長いため, Fetch間隔を任意に指定できるようにする.

请在3.providers中记录设置常量。

  providers: [
    {
      provide: SETTINGS, //←追記
      useValue: { minimumFetchIntervalMillis: 10_000 } //←追記
    }
  ],

4. 生成一个用于显示推广信息的组件。

ng generate component promotion-message

5. 添加模块

AngularFireAuthGuardModule,
AngularFireRemoteConfigModule, //←追記

6. 促销信息端的实施

constructor(private config: AngularFireRemoteConfig) {}

promotionMessage = this.config.strings['promotionMessage'];

7. 模板方面的实现

<p *ngIf="promotionMessage | async as message">{{ message }}></p>

? 在应用程序中显示由 RemoteConfig 设置的字符串 ?（5/5 完成）

终极代码

我参考了(lacolaco様)的finished分支。