どうも
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"});
上記のようにドキュメントを指定できる。