スポンサーリンク

Ionic3でchatを写経してみる(3)

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

https://qiita.com/Yamamoto0525/items/65d5a0b36eb4dbd8079b
image_thumb[1]_thumb

(環境)
image_thumb7_thumb_thumb_thumb_thumb_thumb_thumb

VisualStudioCode

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

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

(1)Firebase CLIのインストール

npm install -g firebase-tools

image

firebase login

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

“Already logged in as xxxxxxxxxxxx@gmail.com”

と表示された。

(2)IonicプロジェクトにFirebaseを導入(参考:AngularのプロジェクトにFirebaseを導入する

npm install firebase angularfire2 --save

image

src/app/environment.ts の作成

image

src/app/app.module.ts

(変更前)
image

(変更後)
image

 

src/pages/home/home.ts

(変更前)
image

(変更後)
image

 

src/pages/home/home.html

(変更後)
image

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

image

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

image

 

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

image

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

image

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

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

 

 

<Ionic3でお勧めの本>

スポンサーリンク