M5StackとBME280を使ってFirebaseと通信してみた

M5Stack

Firebaseって何なの?

って方は、Qiitaで超絶わかりやすくあげている方がいるのでそっちを参照しましょう!

FirebaseのRealtime Databaseのざっくり概要 - Qiita
個人的に作っているアプリで簡単にリアルタイムにデータが同期される機構を組み込みたく調べていたところ、Firebaseにたどり着いたのでまずはざっくり概要をまとめました。 Firebaseとは Googleが運営しているMBaas...

@seiya1121さんって方が書いています。

 

まずはFirebaseの登録をする

Firebaseの公式チャンネルからやり方が詳しく上がっているので、参照しましょう(ただし、筆者は順序どうりやってもできなかったので、その点は後程書きますね)

今回は、FirebaseのRealtime databaseを使っていくよ

 

Getting Started with Firebase on the Web – Firecasts

 

筆者がつまずいたところ

さあ、Youtubeの通りにやったし大丈夫だろう!

と思うと。。。あれ?できないし、なんで!

 

って私のようになった人に参考になればいいです!

こんな風にコードが生成されたのでは、ないでしょうか?

これだけでできると言っているのにできない?「おかしいな」と思った私は、血眼になって画面を探すと・・・

<script src=”https://www.gstatic.com/firebasejs/6.3.1/firebase-app.js”></script>

が違うことに気が付いたんです。(もしかしたら常識かもしれませんが笑)

<script src=”https://www.gstatic.com/firebasejs/6.3.1/firebase.js”></script>

が正解だったんですよね。

 

まさか「-app」がいらないなんて・・・たったそれだけで問題は解消!

 

やったー!!

 

配線方法

こちらに関しては、スイッチサイエンスさんの方でめっちゃ詳しく書いてあるので参考にしましょう!

こういった配線方法の詳細も販売元で丁寧に書いてあるんですね~関心

 

BME280 – スイッチサイエンス

 

プログラム

今回は、BME280をM5Stackにつなげました。

マイコン側のプログラム

 

今回はhtmlで取り出したので、そちらのプログラミングも書いておきます。

Xserverを使っています。最初はFirebaseでHostingしないとできないのかと思いましたが、どこでもできるらしいですね。

ほんとすごいFirebase!!

 

index.php

 

style.css

 

FIREBASE_HOSTとFIREBASE_AUTHの取得方法

 

firebase_hostの取得方法

 

firebase_authの取得方法

 

こんな風に表示されるよ

 

しかもFirebaseのRealtime databaseを利用しているから、更新を押さなくても数字が変化するのが面白いよね

 

参考ページ

 

Firebase Realtime Database のデータ保存、取得、ストリーミング受信実験( ESP32 , M5Stack ) | 3ページ目 (5ページ中) | mgo-tec電子工作
時代は Firebase です。特に Realtime database はストリーミング配信の EventSource / Server-Sent Events をサポートし、スマホのブラウザに即データを反映してくれます。ESP32 や M5Stack でもOK。更に、HTTPリクエストでデータを書き換え・・

コメント

タイトルとURLをコピーしました