ionic3とfirebaseでチャットの写経にtry（２）

2017年6月24日

Angular 2 (, Angular 4, ionic3)に関しては以下の本がお勧めです！

（環境）
Windows8.1

前回は、Ionic3で、chat作成の途中まで行った。

http://twosquirrel.mints.ne.jp/?p=18303

今回は、Firebaseの設定もしていきたい。引き続き以下のサイトを写経していく。

Angular+Firebaseでチャットアプリを作る
Yamamoto0525
2017年06月22日に更新
http://qiita.com/Yamamoto0525/items/a76ea4b3924eeb82b0f9

（１）Moment.jsのインストール

npm install moment --save

src/models/chat.ts

home.html

（２）src/pipes/chat-date.ts の作成。　以下のコマンドで作成すると、pipesフォルダ、

chat-dateフォルダ、chat-date.tsが自動で作成され、さらに、app.module.ts　も自動的に変更してくれる。

ionic g pipe chat-date

src/pipes/chat-date/chat-date.ts

(変更前)

(変更後)

さらに変更。（@pipe({ name: 'chat-date’,}）のところを、’chatDate’に変更）

home.html

（３）Firebaseプロジェクトの作成

https://firebase.google.com/?hl=ja

からログインして、「プロジェクトを追加」をクリック。

ここでは、ionic3-chat という名前で作成した。

「ウェブアプリに Firebase を追加」をクリックして出てきた画面を、メモ帳が何かにコピーしておく。

（４）FIrebase CLIのインストール

VisualStudioCodeのcmd.exeの画面で、

npm install -g firebase-tools

firebase login

（５）angularfire2とfirebaseをインストール

npm install firebase angularfire2 --save

src/environment.ts　の作成し、（３）でコピーしたapiKeyなどをコピペする。

参考：

https://github.com/angular/angularfire2/blob/master/docs/6-angularfire-and-ionic-cli.md

/src/app/app.module.ts

home.ts

なんだか、

Runtime Error

Cannot find module “firebase/database"

のエラーがずっと出てうまくいかず、npm firebase installもずっとエラーであったので、

npm uninstall firebase
npm install firebase
npm install firebase --save
npm install angularfire2 --save

とした。

なんだかよく分からないが、結局、firebaseとangularfire2を、npm uninstall してから、npm installして、npm install –save したら、なぜだかうまくいった。

次も同じことができるかすごく不安、、、

（６）Realtime Databaseを導入する

home.html

home.ts

FirebaseのRealtime Databaseにある「ルール」の変更

(変更前)

(変更後)

あとで、すぐに、これはもとに戻しておいた方が安全。

Realtime Databaseにitemを登録

ちょこっと変更

home.html

home.ts

ふう。かなり疲れた。私にはこんなことでも丸一日かかりました。

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

https://github.com/adash333/ionic3-chat/tree/811e0516642b45c3fb1f6d69192290e6e515cbe1

なお、src/environment.ts　をgitignoreしていなかったので、上記のfirebaseプロジェクトはいったん全部削除しました。

次は、やっと、CRUDを写経してみたい。

Angular+FirebaseRTDBでCRUD(CREATE, READ, UPDATE, DELETE)を実装する
Yamamoto0525
2017年06月20日に更新
http://qiita.com/Yamamoto0525/items/c1ec1b7ce2350b294aeb

(参考)

https://github.com/angular/angularfire2/blob/master/docs/Auth-with-Ionic3-Angular4.md

Custom Pipes in Ionic 2
BEGINNER IONIC2 VIDEO
Josh Morony · April 5, 2017
https://www.joshmorony.com/custom-pipes-in-ionic-2/