在Angular项目中引入Firebase

1 年 ago
新, 韵
4 minutes

这篇文章是有关使用Angular+Firebase创建聊天应用程序的入门指南。
前一篇文章：Firebase的环境设置
下一篇文章：实现Angular+Cloud Firestore的增删查改操作。

在这篇文章中所要做的事情

在这篇文章中，我们将使用名为”angularfire”的库来将Firebase引入到Angular项目中。

    • angularfireとfirebaseをインストール

 

    Cloud Firestoreを導入する

AngularFire 是什么

这是一个使用Angular进行封装的方便易用的Firebase客户端。其特点是使用RxJS来实现客户端与Firebase之间的同步。目前（2018年9月），它支持Cloud Firestore、Realtime Database、Authentication、Cloud Storage、Firebase Messaging、Cloud Functions和Analytics。官方网站上也有介绍。

（2018/1更新）我已经将RTDB的描述更改为最新版本。
（2018/9更新）由于angularfire的支持，我已将描述更改为Firestore。
（2020/6更新）我正在更新为当前（2020年6月）最新内容。

实施内容

安装AngularFire和Firebase。

首先，在项目中安装angularfire和firebase。

cd 自分のプロジェクト
ng add @angular/fire@next
Please select a project:
> NgChat (ngchat-xxx)

（2020/06追記）这个命令在firebase官方文档和angularfire官方文档中有所不同。在进行测试时，请确认使用的是运行时的angularfire官方文档。

安装完成后，进行环境设置。
打开Firebase控制台，进入设置>“一般”选项卡，选择Firebase SDK片段中的“配置”。
复制其中的配置，打开/src/environments/environment.ts并输入。（将<>中的部分替换为自己的apiKey）。

screenshot-console.firebase.google.com-2020.06.18-17_35_31.png
// <>となっている部分は、自分のapiKeyを入力
export const environment = {
  production: false,
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>',
    appId: '<your-app-id>',
    measurementId: '<your-measurement-id>',
  }
};

请在/src/app/app.module.ts文件中打开，并编写代码来导入AngularFireModule和environment。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { environment } from '../environments/environment'; // 追加
import { AngularFireModule } from '@angular/fire'; // 追加

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ChatDatePipe } from './pipe/chat-date.pipe';

@NgModule({
  declarations: [
    AppComponent,
    ChatDatePipe
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    FormsModule,
    AngularFireModule.initializeApp(environment.firebase) // 追加,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在Angular中，通过使用模块来管理外部库、组件等类。我们可以按照功能单元创建模块文件，并使用@Ngmodule装饰器来管理该功能模块所需的库模块、组件、服务等类。

@Ngmodule装饰器有几个属性，每个属性的作用都在这里得到了解释。主要的属性包括以下内容：

@Ngmodule({
// 注册在该模块内声明的指令（组件）和管道
declarations: [],
// 导入其他模块到自己的模块中
imports: [],
// 指定在其他模块中被导入到imports中的内容
exports: [],
// 注册在该模块内声明的服务
providers: [],
// 指定应用程序的入口点组件
bootstrap: []
})

在本项目中，我们将导入用于使用的AngularFire功能模块。
由于我们要使用身份验证和数据库，所以我们将导入AngularFireAuthModule和AngularFirestoreModule。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { environment } from '../environments/environment'; // 追加
import { AngularFireModule } from '@angular/fire'; // 追加
import { AngularFirestoreModule } from '@angular/fire/firestore'; // 追加
import { AngularFireAuthModule } from '@angular/fire/auth'; // 追加

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ChatDatePipe } from './pipe/chat-date.pipe';

@NgModule({
  declarations: [
    AppComponent,
    ChatDatePipe
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    FormsModule,
    AngularFireModule.initializeApp(environment.firebase), // 追加,
    AngularFirestoreModule,  // 追加
    AngularFireAuthModule,  // 追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在，库的安装已经完成了。

引入Cloud Firestore

我会在Cloud Firestore中尝试一下，看看库是否已经正确引入。
首先，我会在/src/app/app.component.ts文件中进行修改，将AngularFireDatabase进行DI（依赖注入），以便在这个组件中可以使用Cloud Firestore。

import { Component } from '@angular/core';
import { Comment, User } from './class/chat';
import { AngularFirestore } from '@angular/fire/firestore'; // 追加
import { Observable } from 'rxjs'; // 追加

export class AppComponent {

  item: Observable<Comment>; // 追加
  public content = '';
  public comments = COMMENTS;
  public current_user = CURRENT_USER;

  // DI（依存性注入する機能を指定）
  constructor(db: AngularFirestore) {
    this.item = db
      .collection('comments')
      .doc<Comment>('item')
      .valueChanges();
  }

  // 新しいコメントを追加
  addComment(comment: string) {
     if (comment) {
       this.comments.push(new Comment(this.current_user, comment));
     }
  }

}

下面是一种可能的中文表述：
接下来，我们将修改/src/app/app.component.html文件。

<div class="page">
  <section class="card">
    <div class="card-header">
      NgChat
    </div>
    <div class="card-body">
      <ng-container *ngFor="let comment of comments">
      <div class="media">
        <div class="media-left" *ngIf="comment.user.uid !== currentUser.uid">
          <a href="#" class="icon-rounded">{{comment.initial}}</a>
        </div>
        <div class="media-body">
          <h4 class="media-heading">{{comment.user.name}} Date: {{comment.date | chatDate}}</h4>
          <div>{{comment.content}}</div>
        </div>
        <div class="media-right" *ngIf="comment.user.uid === currentUser.uid">
          <a href="#" class="icon-rounded">{{comment.initial}}</a>
        </div>
      </div>
      <hr>
      </ng-container>
      <!-- Firestoreの反映箇所 -->
      <div class="media">
        <div class="media-left">
          <a href="#" class="icon-rounded">{{(item | async)?.initial}}</a>
        </div>
        <div class="media-body">
          <h4 class="media-heading">{{(item | async)?.user.name}}</h4>
          <div>{{(item | async)?.content}}</div>
        </div>
      </div>
    </div>
  </section>

  <section>
    <form class="chart-form" (submit)="addComment(content)">
      <div class="input-group">
        <input type="text" class="form-control"
               [(ngModel)]="content"
               name="comment"
               placeholder="Comment" />
        <div class="input-group-append">
          <button class="btn btn-info" type="submit">SEND</button>
        </div>
      </div>
    </form>
  </section>
</div>

在读取item数据时，使用了一个名为async的管道。
这个管道用于在异步加载到视图中时使用。这里使用了Angular中的Rxjs库的Observable，关于它的详细信息将在另一篇文章中解释。

只需提供一个选项：
客户端准备工作已经完成。
使用ng serve命令来运行项目将会在控制台输出错误日志。

ERROR in The target entry-point "@angular/fire" has missing dependencies:
 - firebase/app

到2020年6月為止，僅通過ng add @angular/fire@next並不足夠，您還需要另外安裝Firebase的庫。

 npm install firebase --save

接下来只需将数据存储在Cloud Firestore中。
首先，注册一个名为“comments”的collection作为数据的父集合。

screenshot-console.firebase.google.com-2020.06.23-00_16_07.png

接下来要注册下一个子项”item”。

screenshot-console.firebase.google.com-2020.06.23-00_19_43.png

为了能够确认执行结果，我们将更改规则以允许所有的写入和读取操作。

screenshot-console.firebase.google.com-2020.06.23-00_27_00.png

运行结果

Jun-23-2020 00-46-43.gif

确认了数据库更新会实时反映到聊天中。
接下来我们将实施Cloud Firestore的CRUD（创建、读取、更新、删除）操作。

源代码

请在此时点提供源代码。
※由于删除了apiKey，请在尝试时使用您自己创建的apiKey。

✖
广告
将在 10 秒后关闭
bannerAds