Firebase Realtime Databaseを使用する準備(備忘録）

4401 ワード
Firebase 備忘録 JavaScript FirebaseRealtimeDatabase Webアプリケーション JavaScript テキストリンク

1. 概要

FirebaseのRealtime databaseを設定する手順です。
こちらが公式のページです。基本的にはこのサイトの通りに進めれば設定などできました。己への備忘録として記事を書きました。
https://firebase.google.com/docs/database/web/start?hl=ja

2020/8/29に設定したものです。

CLIで行う方法がありますが、今回はFIrebaseのコンソール画面から設定していきます。

1-1.プロジェクトを作る

Firebaseのコンソール画面に入り、プロジェクトを作成します。

Realtime Databaseの項目をクリック。

「データベースを作成」をクリック。

次に「ロックモード」と「テストモード」の選択画面が現れます。ロックモードでは認証されたサーバーのみアクセス可能のようです。詳しくはFirebase Realtime Database ルールについてを参照。

今回はプロトタイプイング用として自分のみ利用しますので「テストモード」にします。

1-2. プロジェクトの設定

「Realtime Database のルールを構成する」
現状はテストモードで作成している記述がされていています。詳細なルールを決めたいときに書くようです。

1-3. Realtime Database JavaScript SDK を初期化する

Firebase を JavaScript プロジェクトに追加する

の使用可能なライブラリから、適切なものを選択します。今回はCDNを利用しました。
次のタグをhtmlファイルに記述します。

<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-database.js"></script>

次にfirebaseにアクセスするための設定（スぺニット)をコピーします。
ウェブアプリ用の設定スニペットを入手するには、

  1. Firebase にログインし、プロジェクトを開きます。

  2. [概要] ページで [アプリを追加] をクリックします。

  3. [ウェブアプリに Firebase を追加] を選択します。

  4. スニペットをコピーしてアプリケーション HTML に追加します。

const firebaseConfig = {
    apiKey: "API key",
    authDomain: "~.firebaseapp.com",
    databaseURL: "https://~.firebaseio.com",
    projectId: "~",
    storageBucket: "~.appspot.com",
    messagingSenderId: "~",
    appId: "~"
  };

この実装ではページのソースコードを見られると認証キーが全てばれてしまうので、Hosting等を行うようです。
こちらを参照。

2. データベースへの書き込み

Webページの特定のボタンを押すと書き込みを行うコードです。
タイムスタンプを記録しています。

document.querySelector('button').addEventListener('click', () => {
        db.ref('timestamp/').set({
            timestamp: Date.now()
        });
    });

3. データベースからの読み出し

const ref = db.ref('timestamp/');

    ref.on('value', (snapshot) => {
        console.log(snapshot.val());
    });

参考

Firebase ウェブでのデータの読み取りと書き込み