AngularFireでAngularでCloudFirestoreを使用する

Cloud Firestore は、Firebaseリアルタイムデータベースが最適なツールではない可能性があるギャップを埋めるための新しいデータベースとして発表されました。 Cloud Firestoreは、NoSQLのドキュメントベースのデータベースです。データベースのルートにはコレクション（例： todos 、 users 、 files ）があり、コレクションにはドキュメントのみを含めることができます。ドキュメントにはキーと値のペアが含まれ、subcollectionsと呼ばれる独自のコレクションを含めることができます。したがって、これにより、従来のFirebaseリアルタイムデータベースで提供されるフラットなJSONツリーと比較して、より複雑な階層的ニーズを持つアプリを簡単に構築できます。

ここでは、Angular2+プロジェクトでCloudFirestoreとの対話を使用するための非常に基本的なことについて説明します。 Firebaseアカウントを持っている必要があり、新しいデータベースを有効にする必要があります。

設定

まず、必要なFirebaseパッケージをインストールします（ Firebase ＆ anglefire2 ）Angularプロジェクトに：

$ yarn add firebase angularfire2

# or, using npm:
$ npm install firebase angularfire2

次に、AngleFireModuleとAngularFirestoreModuleの両方をアプリモジュールに追加します。

app.module.tsc

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';

AngleFirestoreModuleでenablePersistenceメソッドを呼び出して、Chrome、Safari、Firefoxでローカルキャッシュを自動的に有効にします。これにより、アプリをオフラインでも利用できるようになります。

これにより、Firebaseアプリの設定は次のようにenviroment.tsファイル内に配置されます。

/enviroments/enviroment.ts

export const environment = {
  production: false,
  firebase: {
    apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    authDomain: 'your-project-id.firebaseapp.com',
    databaseURL: 'https://your-project-id.firebaseio.com',
    projectId: 'your-project-id',
    storageBucket: 'your-project-id.appspot.com',
    messagingSenderId: 'XXXXXXXXXXXX'
  }
};

基本的な使用法

アプリがFirebaseで構成されたので、データベースを試してみることができます。 todos コレクションを含む単純なtodoアプリと、descriptionとcompletedを含むそのコレクション内のドキュメントのアイデアに関するCRUD操作のいくつかを示します。フィールド。

まず、コンポーネントにインジェクタブルAnglelarFirestoreをインジェクトします。

import { Component } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';

@Component({ ... })
export class AppComponent {
  constructor(private afs: AngularFirestore) {
    // ...
  }
}

コレクションにアクセスするには、次のようなコレクションへの参照を作成します。

this.todoCollectionRef = this.afs.collection('todos'); // a ref to the todos collection

コレクションへの参照を作成してもネットワーク呼び出しは行われず、コレクションは必要に応じて自動的に作成されるため、存在しないコレクションを参照しても安全です。ドキュメントのないコレクションも自動的に削除されます。

次に、コレクション参照で valueChanges（）を呼び出すことにより、コレクションのドキュメントの変更をリッスンできます。

this.todo$ = this.todoCollectionRef.valueChanges();

valueChanges メソッドは、コレクション内の監視可能なドキュメントを返します。 snapshotChanges メソッドもあります。このメソッドは、ドキュメントに関するIDとメタデータも返します。代わりにsnapshotChangesを使用した例を読んでください。

したがって、これが最初のtodoアプリであり、データベースからtodosコレクション内のドキュメントを取得します。

app.component.ts

import { Component } from '@angular/core';
import {
  AngularFirestore,
  AngularFirestoreCollection
} from 'angularfire2/firestore';

import { Observable } from 'rxjs/Observable';
export interface Todo {
  description: string;
  completed: boolean;
}
@Component({ ... })
export class AppComponent {
  todoCollectionRef: AngularFirestoreCollection<Todo>;
  todo$: Observable<Todo[]>;

そして、次のような単純なものを使用して、テンプレートにToDoアイテムを表示できます。

app.component.html

<ul>
  <li *ngFor="let todo of todo$ | async"
      [class.completed]="todo.completed">
    {{ todo.description }}
  </li>
</ul>

アイテムの追加

コレクションに新しいドキュメントを追加するには、コレクション参照でaddを呼び出すだけです。

addTodo(todoDesc: string) {
  if (todoDesc && todoDesc.trim().length) {
    this.todoCollectionRef.add({ description: todoDesc, completed: false });
  }
}

Todo インターフェイスに対して入力されたtodoコレクション参照のおかげで、TypeScriptコンパイラはaddメソッドを使用して渡されるデータの形状を認識します。

アイテムの更新と削除

コレクション内のドキュメントを更新または削除するには、ドキュメントの id も必要です。これは、valueChangesメソッドでは返されません。代わりにsnapshotChangesメソッドを使用するように実装を少し変更し、各todoドキュメントにidも含めます。

app.component.ts

import { Component } from '@angular/core';
import {
  AngularFirestore,
  AngularFirestoreCollection
} from 'angularfire2/firestore';

import { Observable } from 'rxjs/Observable';
export interface Todo {
  id?: string;
  description: string;
  completed: boolean;
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  todoCollectionRef: AngularFirestoreCollection<Todo>;
  todo$: Observable<Todo[]>;

snapshotChanges によって返されたオブザーバブルにマッピングして、ドキュメントのIDとそのデータを抽出します。

snapshotChanges によって返されるアクションは、タイプ DocumentChangeAction であり、タイプとペイロードを含みます。タイプは追加、変更、または削除のいずれかであり、ペイロードにはドキュメントのID、メタデータ、およびデータが含まれます。

これが適切に行われていても、すべてが同じように機能し、todoドキュメントの更新と削除を簡単に実装して、変更をテンプレートにすぐに反映させることができます。

app.component.ts（部分的）

updateTodo(todo: Todo) {
  this.todoCollectionRef.doc(todo.id).update({ completed: !todo.completed });
}

deleteTodo(todo: Todo) {
  this.todoCollectionRef.doc(todo.id).delete();
}

詳細はこちら

APIと使用可能なメソッドの詳細については、AngularFire2のGithubレポジトリとCloudFirestoreドキュメントを参照してください。
AngularでのFirebaseリアルタイムデータベースの使用については、この投稿をご覧ください。