Angular5+Firebaseでチャットアプリを作る② Firebase連携編

この記事は次の記事の続きです。

Angular5+Firebaseでチャットアプリを作る① モックデータ反映編

また、この記事は次の教材を参考に作成しています。おすすめの教材です。

参考:【最新v5対応】はじめてのAngular入門 実践シングルページアプリケーション(SPA)構築 | Udemy

前回はモックデータの反映まで完了しました。

今回は、Angular5とFirebaseを連携して、データベースのデータを反映するところまでやっていきます。

firebaseはGoogleが提供しているサーバーサービスです。

firebaseはリアルタイムデータベースなので、データの書き換えをリアルタイムで行うことができます。

データの取得、書き換えはアプリに必要な機能なのでぜひ使っていきたいものです。

ただし、Googleのアカウントが必要なので無い方は作ることになります。

プロジェクトを作成する

Firebase

上のリンクから次の画面を開き 「コンソールへ移動」をクリックします。

プロジェクトを追加をクリックして情報を入力します。

このサイトではangularで使うことを前提としているので、

プロジェクト名はangular-testとしています。この部分はどんな名前でも構いません。

国名を「日本」にすることを忘れずに!

そして、「プロジェクトを作成」をクリックします。

少し待てば、プロジェクトが作成され次のように表示されます。

これがFirebaseのコンソール画面になります。

「ウェブアプリにFirebaseを追加」をクリックします。

すると、APIキーが表示されます。

あとで必要になるのでどこかにコピーしておきましょう。

コピーするのは var config = {} 内です。

apiKey:の行からmessagingSenderId:の行までになります。

FirebaseとAngularを連携する

取得したAPIを使ってFirebaseをAngularに連携しましょう。

Firebaseをインストールする

まず、Firebaseツールをインストールします。

インストールすると、コマンドプロントなどのCLIからFirebaseを操作することができるようになります。

では、コマンドプロンプトに次のコマンドを入力します。

コマンド npm install -g firebase-tools

次の表示になればインストール完了になります。

CLIを使ってログイン

次のコマンドを入力してCLIからfirebaseにログインします。

コマンド firebase login

コマンドを入力すると。

? Allow Firebase to collect anonymous CLI usage and error reporting information?

と聞かれるので「y」を入力し、Enterします。

そして自動的にブラウザが開かれて、よく見るGoogle認証が表示されるので、

Firebaseを作ったアカウントで認証しましょう。

完了すれば、Success! Logged in as (アカウント名) が表示されます。

firebaseの関連ライブラリをインストール

次のコマンドをAngularで作成中のプロジェクトファイルのディレクトリで実行します。

コマンド npm install firebase angularfire2 -save

firebase:firebaseを扱うためのは公式のjavaScriptライブラリです。

angularfire2:angularのプロジェクトでfirebaseのAPIを使いやすくする ラッパーライブラリ です。

これらをAngularプロジェクトファイル内にダウンロードします。

AngularにFirebaseAPIキーを追加

environment.tsのプロダクションの下に、控えておいたAPIキーを追加します。

“”の中は人それぞれになるのでここでは記入していません。本来は文字列が入ります。

environment.ts

そして、AngularFire関連のモジュールとAPIを読み込ませるために、app.module.tsも編集していきます。

次のコードをインポートに組み込みます。

import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';

AngularFireModuleのダウンロードとモジュール設定ファイルのenvironmentを読み込みます。

次に、NgModule.imports配列に次のコードを加えます。

AngularFireModule.initializeApp(environment.firebase)

initializeAppというメソッドにenvironmentのなかのfirebaseの設定を渡します。

AngularFireの機能を追加する

次のコードをインポートとして加えます。

import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';

AngularFireのデータベースアクセスと認証の機能を追加しました。

これも先ほどと同じように、NgModule.imports配列に次のコードを加えます。

AngularFireDatabaseModule,
AngularFireAuthModule

これでAngularでFirebaseを使う準備ができました。

AngularでFirebaseを使ってみる

AngularでFirebaseを使えるようになったのでデータベースの値をブラウザに反映させてみましょう。

アクセス制限を解除する

Firebaseプロジェクト作成後は当たり前ですがデータベースへのアクセス制限がかかっています。

ここで一旦制限を解除します。

Firebaseのコンソール画面のProtect OverviewからDatabaseをクリックします。

次に、タブからルールをクリックします。

認証が必要な設定から無しに変更します。

どちらもセミコロンの後をtrueにすれば、認証なしになります。

他の記述は変更しません。

“.read”: true,
“.write”: true

チャットを使うユーザーなら誰でも読み書きできるようになりました。
ログインユーザーのみ等の設定もできます。

ブラウザからデータベースを読み書きする

では、次にブラウザからデータベースを読み書きできるようにファイルを編集していきます。

app.component.tsを開き、次のコードを定義します。

import { AngularFireDatabase } from ‘angularfire2/database’;
import { Observable } from ‘rxjs/Observable’;

そしてコンポーネントの中に、次のコードを定義します。

item: Observable<any>
constructor(private db: AngularFireDatabase) {
this.item = db.object(‘/item’).valueChanges();
}

db(AngularFireDatabase)というサービスのobjectメソッドの‘/item’内のデータベースのデータに対して、valueChanges()を実行することで、データの変化を監視します。そしてその‘/item’内のデータがthis.itemの中に格納されます。

次にapp.component.htmlの編集をおこないブラウザの入力をデータベースに反映させます。

app.component.html

{{ (item | async)?.initial }}

Firebaseから取得してきたデータがこのパイプで表示されます。

item:Firebaseから取得してきたデータ

| async:AsyncPipeは、取得したitemのオブザーバブルな値を評価し、解決すると値を返します。つまり、Firebaseから取得してきたデータは型が無いのでasyncを一端かますことで表示がうまくいくようになります。

Firebaseで初めてのデータベース作成

データベースで配列を作成し、そのデータをブラウザに反映させるようにします。

ここでは言葉で説明しづらいので画像多めになります。

まず、子要素を作成するため、プラスアイコンをクリックします。

次に、配列の名前としてitemを入力します。

値には何も入れません。

そしてまた、プラスをクリックします。

次にitemの子要素として、nameとmessageを作っていきます。

できたら追加をクリックします。

値はなんでもかまいません。

これでitem配列の作成ができました。

このようにブラウザにデータベースの内容が反映されています。

{{ (item | async)?.name }}

このパイプを使って、Firebaseの中のitem配列の子要素のnameの値を表示させています。

initialはここでは設定していませんが、後々設定していきます。

入力をFirebaseに反映させる

次に、データベースへの書き込みができるようにしていましょう。

今、データベースからデータを取得するのにobjectメソッドを使用しています。

db.object(‘/item’)

これは単一の配列データを扱うものなのでアプリに用いるには適していません。

そのため、listメソッドを使用します

単一の配列を扱うのがobjectメソッドで、複数の配列を扱うのがlistメソッドです。

チャットは一つのメッセージで一つの配列になるので、複数のメッセージを扱うためにlistメソッドを使っていきます。

listには次のメソッドがあります。

メソッド
push(value: T) 新規作成
update(keyRefOrSnap: string, value: T) 更新
remove(key: string?) 削除。キーに対応する項目を削除します。キーパラメータが指定されていない場合、リスト全体が削除されます。

引用: angularfire2/lists.md at master · angular/angularfire2 · GitHub

データベースに新規作成

まずは、新規作成から実装していきます。

今は、データベースから取得したデータをitemに格納しています。

これまで、モックデータを格納してきたのはcommentsです。

htmlにもcomments配列をチャットラインに表示するように実装してきました。

そこで、commentsにデータベースのデータを格納し、モックデータではなく、

データベースのデータを表示させましょう。

次のコードを加えます。

comments: Observable<any[]>;

itemがcommentsに変わり、any[]として配列を扱えるようにします。

そして、次のコードも加え、データベース内の読み込む場所を格納する型の定義をします。

Refは参照用の定義としてよく使います。

commentsRef: AngularFireList<any>;

AngularFireListは{ AngularFireDatabase, AngularFireList }とすることで使うことができます。

次に、コンストラクター内に次のコードを加えます。

this.commentsRef = db.list(‘/comments’);
this.comments = this.commentsRef.valueChanges();

データベースの中の読み込むリストデータの場所をcommentsとし、

commentsの中の読み込んだ配列データをcommentsに格納します。

次に、データベースに入力したデータを書き込むようにaddComment内に次コードを加えます。

this.commentsRef.push(new Comment(this.currentUser, comment));
this.content = ”;

commentsRefPushすることで、データベースの’/comments’に入力したコメントを含んだComment配列が書き込まれます。

そして、入力値であるcontentをカラにします。

次に、チャットラインに表示するデータのcommentsがObservableになったので、タグ内に| asyncを加えます。

テストデータを入力してみる

ここまでで、入力値をデータベースに反映させる機能ができました。

試しに、ブラウザで文字を入力して送信してみましょう。

テストと入力してみました。

データベースに書き込まれているか確認します。

Firebaseの配列を見てみましょう。

このようになっていたら成功です。

無事にデータベースに書き込まれました。

this.commentsRef = db.list(‘/comments’);

commentsRefとして指定した/commentsに書き込まれています。

また、配列内の値を変更してみましょう。

変更した値にブラウザも変更するようになっています。

では、データベースに読み書きができるようになったので、読みとり専用のitem部分を消していきます。

コンポーネントはもちろんのこと、html内のitemを表示するために追加した部分を消します。

この部分です。

そして、モックデータ部分も必要ないので消しましょう。

今回はここまで

さて、ここまででFirebaseをangularで扱えるようになりました。

次回はコメントの編集や削除からになります。

入力したデータが反映されようやくチャットアプリとしてらしくなってきました。

アプリ実装までもうひと踏ん張りです!