Firebase Realtime Database のデータ保存、取得、ストリーミング受信実験( ESP32 , M5Stack )

記事公開日:2018年9月1日

こんばんは。

今回は Firebase の Realtime Database だけに絞って使い方を説明します。

以前、こちらの記事で紹介しましたが、その時は、Google Cloud Platform の Cloud Functions と紐づけた連携でしたので、とても小難しく、取っ付きにくいものでした。

しかし、ここでは、Google Cloud Platform を介さずに Firebase の Realtime Database 単独で使う方法を説明していこうと思います。

Firebase Realtime database を使えば、スマホと Wi-Fiマイコンモジュールの ESP32 や M5Stack で以下の動画のようなとってもヤバイことができます。

いかがでしょうか。

Blynkアプリを使わずにここまで出来るので、これはちょっとスゴイですよ。

Android スマホと iOS iPad でも双方向リアルタイム通信できています。
M5Stack のボタン操作は連続操作できませんが、これだけできれば十分ですね。

では、これを実現させるための方法をこれから段階的に紹介してみたいと思います。

今回は第1弾として、Firebase Realtime database と HTTP通信でデータの読み込み、書き込みを行う方法と、ESP32 や M5Stack などの Wi-Fi マイコンと連携させる方法を紹介します。
スマホ側ブラウザの HTML 及び JavaScript は次回の記事で紹介します。
Arduino – ESP32 のライブラリは、WiFi と WiFiClientSecure ライブラリだけを使うため、しくみを比較的理解し易いかと思います。

なお、何度も述べておりますが、私は素人アマチュアです。
誤りや勘違いがあるかもしれません。
もし何かお気づきの点があれば、コメント投稿等でご連絡いただけると助かります。

スポンサーリンク

このブログの維持運営にご支援いただけると助かります。
支援方法はこちらの記事をご覧ください。
(管理人:mgo-tec)

 

    【目次】

  1. これからの IoT は Firebase の時代?
  2. Google アカウントを作成しておく
  3. Firebase にサインインして、プロジェクトを作成
  4. Realtime Database の作成
  5. Realtime Database にルールを設定して、アクセス制限をかける
  6. 従来のデータベースシークレットを発行する
  7. ブラウザのURL 入力欄にURL を入力して、Realtime Database の値を取得してみる
  8. Firebase Realtime Database から EventSource / Server-Sent Eventsによるストリーミングデータ取得
  9. ESP32 および M5Stack による、Firebase Realtime database からのストリーミングデータ取得
  10. Firebase Realtime database への書き込みリクエスト
  11. ESP32 および M5Stack で Firebase Realtime database に書き込む
  12. 編集後記
HTML やJavaScript でプログラミングして、スマホやパソコンなどのブラウザで Firebase Realtime database を操作することができるようになりました。
以下の記事も参照してください。

Firebase Realtime Database をスマホで操作およびストリーミング受信する実験

 

1.これからの IoT は Firebase の時代?

Firebase の Realtime Database は、インターネットに接続されたパソコンやスマホ、マイコン等と、Firebase データベースサーバーを介して、リアルタイムにデータのやり取りができるクラウドサービスです。

普通のデータベースサービスと異なるところは、スマホやマイコンと一度接続確立できさえすれば、データベースのデータが更新されると、自動でリアルタイムにスマホやマイコンに更新データを送ってくれるところです。

こちらからアクションを起こして、サーバーのデータを取りに行く必要がありません。
接続できていれば、データベースが更新される度にいつでもスマホやマイコンのデータも更新できるということです。

無料の SPARK プランであれば、同時に100個までのデバイスを接続できるようです。
Google の世界一強力なサーバーのおかげで、タイムラグも少ないリアルタイム通信が可能になると思います。

これができるということは、インターネットにつながっていれば、地球の裏側からでもリアルタイム通信が可能ということです。

以前紹介したこちらの記事では、Blynk というスマホアプリを使えばそのような双方向リアルタイム通信が可能でしたが、そういうアプリを使わなくても、ブラウザでスマホと通信が可能なのです。
そして、Blynk では不可能だった日本語漢字データのやり取りも可能です。

最近の Google サイドでは、Firebase にかなりの力を入れているという情報もありましたので、これからのマイコン電子工作 IoT では、Firebase 全盛の時代が来るのではないかと個人的に思っています。

では、これから使い方を順番に説明していきます。

2.Google アカウントを作成しておく

Google 傘下のため、Google アカウントをまず作成しておいてください。
G-mailアカウントを作成しておけば、Firebase の使い勝手がよくなります。

3.Firebase にサインインして、プロジェクトを作成

Google アカウントを作成したら、まず、以下の Firebase サイトを開いて下さい。

https://firebase.google.com/

すると、下図の様な画面が出るので、「サインイン」をクリックしてください。

firebase_realtime_database01.jpg


すると、事前に作って置いた Google の Gmail アカウント選択画面が出るので、ご自分のアカウントをクリック。

firebase_realtime_database02.jpg


すると、下図の画面になります。
そうしたら、下図の様に「コンソールへ移動」をクリックします。

firebase_realtime_database03.jpg


すると、下図の画面に変わりますので、初めて使う場合は「プロジェクトを追加」をクリックします。

firebase_realtime_database04.jpg


すると、下図の画面が出るので、プロジェクト名を好きな名前で入力します。
すると、下の欄のプロジェクトIDが自動で番号を割り振って作成されます。
そうしたら、「地域/ロケーション」を編集します。

firebase_realtime_database05.jpg


今のところ、ロケーションは2種類しかないので、とりあえず
us-central
にしておきます。
そして、下図の様にそれぞれチェックを入れておき、「プロジェクトを作成」をクリックします。

firebase_realtime_database06.jpg


すると、下図の様な画面になったら、ご自分の G-mail に
「Welcome to Firebase!」
という文章のメールが届くと思います。
「次へ」をクリックして進みます。

firebase_realtime_database07.jpg


すると、下図の画面になります。
これが、Firebase console 画面です。
最初の登録は、「Sparkプラン」となっていると思います。
これは無料のプランで、100ノードまで同時接続可能なので、個人で使う分には十分だと思います。

firebase_realtime_database08.jpg


では、次の項では Realtime database を作成していきます。


スポンサーリンク


「Firebase Realtime Database のデータ保存、取得、ストリーミング受信実験( ESP32 , M5Stack )」への10件のフィードバック

  1. 突然のコメントにて失礼します。
    Firebase Realtime Databaseの内容でもないので申し訳ないのですが、
    ESP32でキーマトリクス回路を作りたいと思い、
    ESP32DEVkitCに74HC138のデマルチプレクサをつないで
    作ったのですが、ちとうまくいかないところがありまして、
    もしESP32でデマルチプレクサかマルチプレクサを使われた経験が
    ございましたら、伺いたいことがございます。
    いかがでしょうか。
    ※Arduinoではうまくいったキーマトリクス回路を
    そのままESP32に流用しようとしています。

    1. Yosukeさん

      コメント投稿ありがとうございます。
      ただ、残念ながら、デマルチプレクサとかマルチプレクサは使ったことがありません。
      それとはかなり異なるかも知れませんが、ESP8266でSPI通信で、I/Oエキスパンダを使って、GPIOを増設したことがあります。
      以下の記事です。
      ESP-WROOM-02 ( ESP8266 )の GPIO を増設して キャラクタディスプレイ 8bitモード制御してみた
      GPIO 増設した ESP-WROOM-02 ( ESP8266 )で、8bitモードのグラフィックディスプレイ を制御してみた
      視認性クッキリ! 大き目ドットの OLED WS0010 で日本語漢字フォント電光掲示板風スクロール&スマホ操作
      大き目ドットの有機EL, WS0010 で Yahoo ニュース リアルタイム 電光掲示板を作ってみた

      とりあえず、この程度です。
      お役に立てず、すみません。
      m(_ _)m

  2. mgo-tecさん

    ご返信いただきまして誠ありがとうございます。
    リンクして頂いたページを中心に、
    SPI通信を勉強してみようと思います。

    すみませんが、もう1点伺いたいことがございます。
    Arduino(ATmega328p)に74HC138をつなげば、
    キーマトリクス回路を正常に組めています。
    そこで、ESP32と74HC138の間にATmega328pを噛ませて、
    ESP32 – ATmega328p – 74HC138 – ボタン達のようにつなぎ、
    ESP32とATmega328pで何らかの通信をする方法を
    素人考えで考えてみたのですが、
    SPI通信などを利用して、ATmega328pからESP32に値を送る
    ようなことは可能でしょうか?

    お忙しいところ恐れ入りますが、何かご存知でしたら、
    ご返信いただければ助かります。

    1. Yosukeさん

      多分、ESP32 と Arduino で SPI データ通信は可能だと思いますが、そのデバイス間ではシリアル通信しかやったことがありませんので、アドバイスできません。
      私が個人的に思うには、Arduino を噛ませないでも、ESP32 だけで十分可能ではないかと思います。
      ESP32 のクロックの方が高速ですし・・・。
      ということで、あまりお役に立てず、申し訳ございません。

  3. mgo-tecさん

    ご返信頂きましてありがとうございます。
    EPS32にマルチプレクサやデマルチプレクサをつなぎますと、
    押していないボタンが押されたような反応になってしまう等、
    笑ってしまうほど意図しない挙動になってしまい、
    Arduinoで出来ていたことがこんなにできないのかと困っておりました。
    ただ、やはり安価にBluetooth通信が出来るの機能は捨てがたいので、
    アドバイス頂いた通り、EPS32のみでもう少し試行錯誤を
    続けてみようと思います。

    EPS32ユーザーの方とお話できただけでも嬉しかったです。
    本当にありがとうございました。

  4. 質問です!!
    M5Stackを使っています。
    Wi-Fi、サーバーとの接続共に良好ですが、「400 Bad request」が返ってきてしまいます。
    これってfirebaseのデータベースのシークレットが既に廃止されてるからなんでしょうか?
    Firebase Admin SDKを使用しないといけませんか?

    1. さっさ さん
      記事をご覧いただき、ありがとうございます。

      今、直ぐに検証できない状態ですので、もう少々お待ちくださいませ・・・。

      1. 返信ありがとうございます。
        いつも参考にしています。
        めちゃめちゃ助かってます!

        1. さっさ さん

          お待たせしました。
          当方のM5Stackで確認したところ、特に問題有りませんでした。

          久々にFirebaseコンソールを開きましたが、従来のデータベースシークレットはまだ存在しています。
          赤文字で「データベースのシークレットは廃止された」と表示されておりますが、「レガシーの Firebase トークン生成ツールを使用する」と表示されているので、問題ありません。

          因みに、このページの7項目

          7.ブラウザのURL 入力欄にURL を入力して、Realtime Database の値を取得してみる

          を参照して、ブラウザのURL欄にデータベースシークレット入りのURLを入力してみてください。
          エラーが出ていなければ、問題無く使用できるはずです。

          あと、気になったのは、Arduinoスケッチのhostのところのアドレスには「https://」は不要ですのでご注意ください。
          以上、再度確認してみてくださいませ。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください