どうも

Zizの田中です！
今回はIonic 4とFirebaseのFirestoreの連携方法と簡単なDB操作を紹介しようと思います。 
動画で見たい方は下記をどうぞ！

前提条件

•  firebaseにプロジェクト作成済み
•  ionic4でプロジェクト作成済み

firebaseでアプリ追加

作成済みのfirebaseプロジェクトのProject Overviewを開いて、「アプリを追加」をクリック

続いてプラットフォームを追加する
</>をクリックしてWEBアプリとしてプラットフォームを選択する。

選択すると、アプリを登録する画面がでてくるのでアプリ名とを入力してアプリを登録する。
登録後に表示されるID（画像の赤枠部分）を後で使うので控えておく。（黒で隠してある部分は各アプリ
固有のID）

Ionic側と連携

Ionicプロジェクトのsrc以下app.module.tsに先ほどコピーしたIDを貼り付ける。

var firebaseConfig = {
　　　apiKey: "XXXXXXXXXX",
　　　authDomain: "XXXXXXXXXX",
　　　databaseURL: "XXXXXXXXXX",
　　　projectId: "XXXXXXXXXX",
　　　storageBucket: "XXXXXXXXXX",
　　　messagingSenderId: "XXXXXXXXXX",
　　　appId: "XXXXXXXXXX"
　　};
// InitializeFirebase
firebase.initializeApp(firebaseConfig);

このままだと,firebaseが見つかりませんとエラーがでるので下記をimportしてnpm installする

import * as firebase from 'firebase';

npm install firebase

これでfirestoreとの連携は終了

簡単なDB操作（データの追加）

DB操作を行うtsファイルにfirebaseをインポート

import * as firebase from 'firebase';

let db = firebase.firestore();
db.collection("users").add({first:"ZIZ",last:"tanaka"})

上記のソースでfirestoreのusersコレクションにfirstがZIZ,lastがtanakaのデータが追加される。

ただし、このままだと下の画像のようにfirebase側がランダムに設定するIDがドキュメントとして登録されてしまうので、ドキュメントを指定してデータ追加する方法を紹介する。

let db = firebase.firestore();
db.collection("users").doc("firstUser").set({first:"ZIZ",last:"tanaka"});

上記のようにドキュメントを指定できる。