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

2018年3月5日

前回、angularfire2が2018年版になってから、"Create"がうまくいかないので、あきらめて、Angular5+Firebaseによるチャットの構築のサイトが（途中までの解説が）あったので、Ionic3での写経にtryしてみる。

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

（環境）

VisualStudioCode

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

（１）firebase-chat プロジェクトの作成

ionic start firebase-chat blank

// 何か聞かれたら、適宜、Enterを押していく

 

cd firebase-chat
ionic serve

（２）ビューの作成（参考：Angularでビュー（チャット画面）を作る）

src/pages/home/home.html

 

（変更前）

（変更後）

 

src/pages/home/home.scss

 

思いっきりずれていてかなり微妙だが、気にせず次へ進もうと思います。

（３）チャットコメントの実装（参考：AngularのngForでチャットコメントを実装する）

src/pages/home/home.ts

（変更前）

（変更後）

src/pages/home/home.html

（変更前）

（変更後）

書き込むと、自動反映される。

（４）ngForでコメントを繰り返し表示させる

home.ts

（変更前）

（変更後）

https://bitbucket.org/adash333/firebase-chat/src/96762678ddbf782c6102bafcec313ead2f17395d/src/pages/home/home.ts?at=master&fileviewer=file-view-default

この直前に、新たに、chat.ts を作成している。

home/chat.ts

https://bitbucket.org/adash333/firebase-chat/src/96762678ddbf782c6102bafcec313ead2f17395d/src/pages/home/chat.ts?at=master&fileviewer=file-view-default

home.html

（変更前）

（変更後）

https://bitbucket.org/adash333/firebase-chat/src/96762678ddbf782c6102bafcec313ead2f17395d/src/pages/home/home.html?fileviewer=file-view-default

 

次は、引き続き、

https://qiita.com/Yamamoto0525/items/a6995da3ffbb4985c5e2

を写経していきたい。

 

＜Ionic3でお勧めの本＞