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 を!