本日の授業では、Firebaseの導入を体験しました。

この記事ではFirebaseをNode.jsから動かしてみましょう。

GitHubからソースダウンロード

1ft-seabass/protoout-01-07-src

まず、今回の記事用のソースをダウンロードしておきましょう。

image.png

firebaseフォルダにソースファイルが置いてあります。

秘密鍵を生成し準備

2019/08/25時点の情報で進めます。サービスアカウントで秘密鍵を生成しダウンロードします。

サーバーに Firebase Admin SDK を追加する  |  Firebase

こちらを参考に、

image.png

まずプロジェクトの設定に行きます。

image.png

サービスアカウントに移動します。

image.png

下部の新しい秘密鍵の生成ボタンを押します。

image.png

このように、むやみに公開リポジトリに公開したりしないようにしようねと言われます。理解できたら、キーを生成ボタンを押します。すると、すぐに生成されてJSONファイルがダウンロードされます。この段階では、長めの文字数のファイル名.jsonになっているはずです。

image.png

ダウンロードしたJSONファイルをserviceAccountKey.jsonでリネームしてfirebaseフォルダ直下に配置します。

これで準備完了です。

Realtime DatabaseのページでdatabaseURLを確認

Realtime DatabaseのページでdatabaseURLを確認します。

image.png

Firebaseコンソールにある、Realtime Databaseの中にあるデータが確認できるページでdatabaseURLを確認します。赤枠のところです。こちらをメモしておきます。

データを set して体験する

ではいよいよ動かしていきましょう。データを set する体験をします。

cd firebase

ターミナルでfirebaseフォルダに移動して開始します。

data_set.js 確認

data_set.jsを確認します。

今回はprotoout/studioというデータ階層に、温度・湿度のダミーデータを保存する仕組みです。

var admin = require("firebase-admin");

// 1. サービスアカウント鍵を生成しserviceAccountKey.jsonでリネームしてfirebaseフォルダ直下に配置
var serviceAccount = require("./serviceAccountKey.json");

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  // 2. Realtime DatabaseのページでdatabaseURLを確認して反映
  databaseURL: "https://<databaseURL>.firebaseio.com"
});

var db = admin.database();
var ref = db.ref("protoout/studio");

var usersRef = ref.child("sensor");
usersRef.set({
    "temperature": 26,
    "humidity": 43
});

ref.on("value", function(snapshot) {
    console.log("value Changed!!!");
    console.log(snapshot.val());
}, 
function(errorObject) {
    console.log("failed: " + errorObject.code);
} );

data_set.js を修正

Realtime Databaseのページで確認したdatabaseURLを

  // 2. Realtime DatabaseのページでdatabaseURLを確認して反映
  databaseURL: "https://<databaseURL>.firebaseio.com"

に反映し保存します。

data_set.jsを動かしてみる

サービスアカウント鍵を生成しserviceAccountKey.jsonでリネームしてfirebaseフォルダ直下に配置出来ているかも確認しましょう。

確認できたら、以下のコマンドで動かしてみます。

node data_set.js

動かしてみると、

value Changed!!!
sensor: { humidity: 43, temperature: 26 }

と結果が出るはずです。

FirebaseコンソールのRealtime Databaseのページに戻ると、データツリーが変更されてデータが保存されていることが確認できます。

image.png

データを push して体験する

次はデータをpushすることで、リスト的にデータを蓄積することも体験します。

data_push.js を確認する

こちらも data_set.js ののときと同じ databaseURL の反映をします。

var admin = require("firebase-admin");

// 1. サービスアカウント鍵を生成しserviceAccountKey.jsonでリネームしてfirebaseフォルダ直下に配置
var serviceAccount = require("./serviceAccountKey.json");

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  // 2. Realtime DatabaseのページでdatabaseURLを確認して反映
  databaseURL: "https://<databaseURL>.firebaseio.com"
});

var db = admin.database();
var ref = db.ref("protoout/studio");

var usersRef = ref.child("sensorList");
usersRef.push({
    "temperature": 26,
    "humidity": 43
});

ref.on("value", function(snapshot) {
    console.log("value Changed!!!");
    console.log(snapshot.val());
}, 
function(errorObject) {
    console.log("failed: " + errorObject.code);
} );

data_push.jsを動かしてみる

確認できたら、以下のコマンドで動かしてみます。

node data_push.js

動かしてみると、結果が出たら書き込まれます。

image.png

FirebaseコンソールのRealtime Databaseのページに戻ると、データツリーではsensorListが一つ増えています。ツリー内はランダム値のツリーにデータがぶらさがっています。

image.png

もう一度実行してみるとリスト上に情報が溜まって蓄積されていきます。

データを読み出してみる

つづいてデータを読んでみましょう。

data_once.js を確認する

こちらも data_set.js ののときと同じ databaseURL の反映をします。

var admin = require("firebase-admin");

// 1. サービスアカウント鍵を生成しserviceAccountKey.jsonでリネームしてfirebaseフォルダ直下に配置
var serviceAccount = require("./serviceAccountKey.json");

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  // 2. Realtime DatabaseのページでdatabaseURLを確認して反映
  databaseURL: "https://<databaseURL>.firebaseio.com"
});

var db = admin.database();
var refSensor = db.ref("protoout/studio/sensor");
refSensor.once('value')
  .then(function(dataSnapshot) {
    console.log('refSensor');
    console.log(dataSnapshot.toJSON());
  });

data_once.jsを動かしてみる

確認できたら、以下のコマンドで動かしてみます。

node data_once.js

動かしてみると、データが取得させて返ってきます。

{ humidity: 43, temperature: 26 }

このように、Firebase Realtime Databaseは手軽にデータを蓄積できるWEBサービスです。実際にプロトタイプをするときにデータ蓄積や分析といった機能を加える助けになります。

詳しい使い方は、以下の参考文献を見つつ進めてみてください!