obnizでFirebaseと連携するメモ

Posted on 2018-09-11

obnizでFirebaseと連携するメモです。

今回の仕組み

今回はobnizスイッチの、押す・左・右の操作をFirebaseに送ってみます。

Firebaseの設定

Firebaseの設定をメモしておきます。

サイトにログインして、

WEBアプリ用の設定を控えておきます。これがそのまま使えます。

ソースコード

obnizのスイッチに関するドキュメントと、Firebaseのデータの読み書きを参考にしながら実装しました。

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@1.10.0/obniz.js" crossorigin="anonymous"></script>
  
  <script src="https://www.gstatic.com/firebasejs/5.4.2/firebase.js"></script>
  <script>
    // Initialize Firebase
    var config = {
      apiKey: "apiKey",
      authDomain: "authDomain",
      databaseURL: "databaseURL",
      projectId: "projectId",
      storageBucket: "storageBucket",
      messagingSenderId: "messagingSenderId"
    };
    firebase.initializeApp(config);
  </script>
  
</head>
<body>

  <h1>Firebase + obniz</h1>

<script>

var obniz = new Obniz("OBNIZ-DEVICE-ID");
obniz.onconnect = async function () {
  obniz.display.clear();
  obniz.display.print("switch start");
  // switch event
  obniz.switch.onchange = function(state) {
    if (state === "push") {
      obniz.display.clear();
      obniz.display.print("push");
    } else if (state === "right") {
      obniz.display.clear();
      obniz.display.print("right");
    } else if (state === "left") {
      obniz.display.clear();
      obniz.display.print("left");
    } else {
      obniz.display.clear();
      obniz.display.print("--");
    }
    // スイッチの状況 status を通知
    firebase.database().ref('obniz').set({
      state: state,
      timestamp:new Date().getTime()
    });
  }
}

</script>
</body>
</html>

変更する部分

ソースコードで変更する部分は以下です。

<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase.js"></script>
  <script>
    // Initialize Firebase
    var config = {
      apiKey: "apiKey",
      authDomain: "authDomain",
      databaseURL: "databaseURL",
      projectId: "projectId",
      storageBucket: "storageBucket",
      messagingSenderId: "messagingSenderId"
    };
    firebase.initializeApp(config);
  </script>

ここは先ほどのFirebase設定で控えていたものを反映します。

var obniz = new Obniz("OBNIZ-DEVICE-ID");

OBNIZ-DEVICE-ID については、自分の動かしたいobnizデバイスのIDを使いましょう。→lessons_obnizjs_connection - obniz

動かしてみる

ということで、動かしてみます。

まず、obnizクラウド側で起動します。

Firebaseコンソール側も /obniz のパスを見れるようにしておいます。

obnizを動かしてみましょう。

Firebaseにstateとtimestampが送られて変化してます！

Firebaseはモバイルコンテンツでもよく使われ最近はIoTとの相性もよくなってきているので、いろいろと連携が思い浮かびますね！

それでは、よき Firebase & obniz Life を！