Ionic4(beta)でFirebase利用（AngularFire2@5.0.0-rc.11）

2018年7月28日

作成後のソースコードは以下へ。（src/environments/environment.ts には、ご自身のfirebaseのAPIキーその他をコピペしてください。）

https://github.com/adash333/ionic4-routing

Ionic4.0.0-beta.0を試している。前回は、ルーティングを行った。

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

とにかく、Ionic4からは、Angular無しでもIonicが動くということで、Ionic+Angularの組み合わせで使っていく場合、View以外の部分は、かなり、Angularそのものを利用することになるらしい。

Ionic3のときは、"ionic g provider xxx"　としていたが、Ionic4からはAngularに合わせて、"ionic g service xxx"になるらしい。

https://beta.ionicframework.com/docs/cli/generate

（開発環境）

（実装する環境）
typings@2.1.1
typescript@2.9.2

firebase@5.3.0
angularfire2@5.0.0-rc.11

（０）すること

Ionic4からFirebaseへのデータの保存を実装する。

以下のサイトを写経する。

https://grokonez.com/frontend/angular/how-to-integrate-angular-6-firebase-tutorial-angularfire2-v5

なお、アプリは、こちらの続きとする。C:/ionic4/ionic4-routing/ にアプリが作成されているものとする。

（１）Firebaseの設定

Firebase consoleにログインして、プロジェクトを作成する。

https://console.firebase.google.com

プロジェクト作成直後の画面で、「WEBアプリにFirebaseを追加」をクリック

var config = {  } の中身をテキストファイルにコピーしておく。

Database > ルール　を、以下のようにしておく。
（セキュリティの都合上、あとでルールはデフォルトの設定に戻しておく。）

（２）AngularFire2のインストール

npm install -g typings
npm install -g typescript

npm install angularfire2 firebase --save

（３）Firebaseの設定を、src/environments/environment.ts　に記載

上の方でテキストファイルに保存しておいたfirebaeseの値を、以下のようにコピペ。

src/environments/environment.ts

(変更前)

(変更後)

（４）src/app/app.module.ts の編集

(変更前)

(変更後)

（５）TaskService　（Ionic3まではTaskProvider）の作成

ターミナルに以下を入力。

ionic g service task

src/app/task.service.ts

すると、上記のように、src/app/　フォルダ直下に、task.service.ts （と、task.service.spec.ts） ファイルが作成される。（Ionic3のときとはだいぶ異なる。。。）

上記を以下のように変更

src/app/task.service.ts　(変更後)

→　結局、この後、TaskServiceは使いませんでした。。。

（６）src/app/home/home.page.html　

(変更前)

(変更後)

（７）src/app/home/home.page.ts

(変更前)

(変更後)

これで、タスクを記載してSubmitボタンをクリックすると、タスクがどんどん記載されていく。

（謎）
src/app/home/home.module.ts は今回は触らなかったが、Lazy Loadingのためだけに存在しているのだろうか。。。

src/app/home/home.page.ts に、あらかじめ、constructor () {} の記載が無かったので、結構とまどった。

（８）ソースコード

src/environments/environment.ts には、ご自身のfirebaseのAPIキーその他をコピペしてください。

https://github.com/adash333/ionic4-routing

次は、以下のサイトを写経したい。

https://grokonez.com/frontend/angular/angular-6-firebase-tutorial-crud-operations-angularfire2-v5