Ionic3でchatを写経してみる（３）

2018年3月7日

前回に引き続き、以下のサイトをIonic3に変更しながら、写経していきたい。

https://qiita.com/Yamamoto0525/items/65d5a0b36eb4dbd8079b

（環境）

VisualStudioCode

C:/ionic3/ フォルダに、firebase-chat アプリを作成している。

今回はhttps://qiita.com/Yamamoto0525/items/fb23707831ff6d181544　を写経していきたい。

（１）Firebase CLIのインストール

npm install -g firebase-tools

firebase login

私の場合は、以前、ログインしたことがあったため、

“Already logged in as xxxxxxxxxxxx@gmail.com"

と表示された。

（２）IonicプロジェクトにFirebaseを導入（参考：AngularのプロジェクトにFirebaseを導入する）

npm install firebase angularfire2 --save

src/app/environment.ts の作成

src/app/app.module.ts

（変更前）

（変更後）

 

src/pages/home/home.ts

（変更前）

（変更後）

 

src/pages/home/home.html

（変更後）

（３）FirebaseでDatabaseのルールの設定変更（一時的）
（挙動をチェックしたら、すぐに、ルールはもとに戻しておいた方が安全です。）

これを以下のように変更してから、「公開」をクリック。

 

Database > データ　で、以下のように入力。

すると、すぐに、以下のように表示される。

この時点でのソースコード

https://bitbucket.org/adash333/firebase-chat/src/b38fc950eee0205d7851cbd1bc8d61b7a8263a99/src/?at=master

 

 

＜Ionic3でお勧めの本＞