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

2018年3月7日

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

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

（環境）

VisualStudioCode

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

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

（１）ngIfで自分のコメントを表示させる。

src/app/class/chat.ts

（変更前）

（変更後）

 

src/pages/home/home.ts

（変更後）

（２）ngIfで自分のuidを判別し、自分のコメントとして表示させる

src/pages/home/home.html

（変更前）

（変更後）（さらに、一度、サーバ停止してから、再度、ionic serveした）

（３）submitイベントで新しいコメントを追加する

addComment関数を定義する

src/pages/home/home.ts

（変更前）

（変更後）

（４）submitイベントをHTMLに追加する

src/pages/home/home.html

（変更後）

（５）日付の表示（参考：AngularのPipeを使って、日付を変換する）

Angularでは、moment.jsを用いるのが簡単らしい。

今回は、Ionicなので、こちらのdocumentationを参考にやってみる。

https://ionicframework.com/docs/api/components/datetime/DateTime/

src/pages/home/chat.ts

（変更前）

（変更後）

home.html

（変更前）

（変更後）

とりあえず、いつも、そのときの時刻が表示されてしまっているが、まあ、とりあえず、先へ進む。

この時点でのコードは以下へ。

https://bitbucket.org/adash333/firebase-chat/src/0acba63997903a6306285a1b98a9e6fbb61b0310/src/pages/home/?at=master

 

引き続き、Firebaseの環境構築を写経していきたい。

 

＜Ionic3でお勧めの本＞