作ったTodo アプリではサーバー側をgoで作成していたが、Firebaseにはサーバーを置くような機能はないので、Firebase Realtime Database でどうにかしたい。(できるのかもわからない)

Database を作成

todo プロジェクトから Database を選択し、データベースを作成する。ロックモードで作成した。

Firebase JavaScript クライアント SDK を追加

ここを参考に以下のindex.html を作成。API_KEY とかは、Firebase のダッシュボードの Authentication から移動した先の「ウェブ設定」ボタンを押したところに記載されているので、自身のキーに置き換えること。

<html>
    <head>
       <title>Firebase Database Test</title>
   </head>
    <body>
        <div id="name"></div>
        <div id="email"></div>

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

        <script>
           var config = {
               apiKey: "<API_KEY>",
               authDomain: "<PROJECT_ID>.firebaseapp.com",
               databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
               projectId: "<PROJECT_ID>",
               storageBucket: "<BUCKET>.appspot.com",
               messagingSenderId: "<SENDER_ID>",
           };

           firebase.initializeApp(config);
       </script>
    </body>
</html>

Firebase Database にアクセス

以下のように index.html を修正。ただ、このままだとアクセスできないので先ほどロックモードで作成したデータベースを公開モードに修正する必要がある。公開モードにするには、Firebase Database のダッシュボードから「ルール」を選択し、.read と .write の設定を true にする。Firebase Database には Could Firestore と Realtime Database があり、デフォルトでは Could Firestore になっているので、Realtime Database に変更してから「ルール」の設定を行うこと。

<html>
    <head>
       <title>Firebase Database Test</title>
   </head>
    <body>
        <div id="name"></div>

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

        <script>
           var config = {
               apiKey: "<API_KEY>",
               authDomain: "<PROJECT_ID>.firebaseapp.com",
               databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
               projectId: "<PROJECT_ID>",
               storageBucket: "<BUCKET>.appspot.com",
               messagingSenderId: "<SENDER_ID>",
           };

           firebase.initializeApp(config);

           var database = firebase.database();

           database.ref('users/1').set({
               username: "bamchoh"
           });
           
           var username = "Anonymouse";
           database.ref('users/1').once('value').then(function(snapshot) {
               username = (snapshot.val() && snapshot.val().username);
               document.getElementById("name").innerHTML = username;
           });
           
           document.getElementById("name").innerHTML = username;
       </script>
    </body>
</html>

index.html をブラウザで開くと、bamchoh と表示される。

React で firebase

database へのアクセスはできるようになったので、React でアクセスできるようにする。まずは npm パッケージのインストール。

npm install --save firebase

次に src/index.js を修正。コンポーネント側で Firebase の処理を行うことにする。

import React from 'react'
import ReactDOM from 'react-dom'

import App from './components/App'

ReactDOM.render(
  <App />,
  document.getElementById("root")
)

src/components/App.js を作成。React16.8 で入った Hooks を使用していることに注意。関数内にべた書きになっているのをもうちょっとどうにかしたい。

import * as React from 'react';
const { useState, useEffect } = React;
import firebase from "firebase/app";
import 'firebase/database';

export default () => {
  const [username, setState] = useState('Now loading...');

  const config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    projectId: "<PROJECT_ID>",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };

  if (!firebase.apps.length) {
    firebase.initializeApp(config);
  }

  const database = firebase.database();

  const init = () => {
    database.ref('users/1').once('value').then((snapshot) => {
      const newUsername = (snapshot.val() && snapshot.val().username);
      setState(newUsername)
    })
  }

  init()

  return (
    <>
    username: {username}
    </>
  );
};

サーバーを起動してアクセスすると。Now Loading... の後にユーザー名が表示される。Now Loading... を表示させずにユーザー名を表示させるのは今後の課題にする。

bamchoh’s diary

Firebase 入門(2) ～ Firebase Realtime Database

Database を作成

Firebase JavaScript クライアント SDK を追加

Firebase Database にアクセス

React で firebase