EnOceanで受信したデータをReactを使って可視化したいと思います。
まず、EnOceanのセンサー値をFirebaseにアップするところまでを下記URLを参考にして進めて下さい。

完成動画

EnOcean x Reactでセンサー値を可視化する pic.twitter.com/2NdOKGKEc3
— がおまる@スマートスピーカーアプリ開発入門発売中！ (@gaomar) 2018年11月14日

1. Reactのcreate-react-appをインストール

Reactの開発が簡単にできるツールをインストールします。

$ npm install -g create-react-app

1-1. プロジェクトを作成する

コマンドを使ってプロジェクトを作成します。お好きなプロジェクト名を入力してください。

$ create-react-app toiletmanager

1-2. サーバーを開始する

作成されたプロジェクト名のフォルダへ移動してから下記コマンドを実行します。
サーバーが起動して http://localhost:3000 にアクセスするとReactアプリを確認することができます。

$ cd toiletmanager
$ npm start

2. ReactプロジェクトをFirebaseに対応させる

EnOceanでアップされたセンサーの状態をReactから取得してみたいと思います。
まず、ReactのプロジェクトにFirebaseが使えるようにモジュールをインストールします。

2-1. Firebaseのnpmをインストールする

Firebaseを使うためのモジュールをインストールします。

$ npm install firebase --save

2-2. srcフォルダにFirebase関連のファイルを作成する

srcの直下にfirebaseフォルダを作成してからconfig.jsファイルを新規で作成します。

apiKeyやプロジェクトIDなどはFirebaseから取得してきます。
Firebaseの左上のメニューにあるギアアイコンをクリックしてプロジェクトの設定をクリックします。
ウェブアプリにFirebaseを追加をクリックしてください。

ポップアップが表示されるので、そこにかかれているキー名を対象箇所にコピペしてください。

firebase/config.js

export const firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "toiletmanager-xxxxx.firebaseapp.com",
    databaseURL: "https://toiletmanager-xxxxx.firebaseio.com",
    projectId: "toiletmanager-xxxxx",
    storageBucket: "toiletmanager-xxxxx.appspot.com",
    messagingSenderId: "xxxxxxxxxxxxxxxx"
};

2-3. index.jsファイルを作成する

Firebaseにアクセスするために接続周りの設定を行います。

firebase/index.js

import firebase from 'firebase';
import { firebaseConfig } from './config.js';

export const firebaseApp = firebase.initializeApp(firebaseConfig);
export const firebaseDb = firebaseApp.database();

3. App.jsファイルを編集する

編集する前に可視化でわかりやすくするための画像ファイルをいらすとや様からダウンロードしてきます。
今回はこちらの画像を使いました。

3-1. App.jsの編集

ダウンロードしたいらすとや様の画像ファイルをsrcフォルダ直下に保存してApp.jsを編集します。

App.js

import React, { Component } from 'react';
import open from './text_room_kushitsu.png';  // open画像
import close from './text_room_shiyouchu.png'; // close画像
import './App.css';
import { firebaseDb } from './firebase/index.js' // firebaseの設定ファイルを読み込み

const db = firebaseDb.ref('toilet/word'); // Firebaseのtoilet/word.jsonの値を取得

class App extends Component {
  constructor(props) {
    super(props);

    // サイトのタイトル変更
    document.title = "トイレセンサー"

    this.state = {
      toilet: ""
    }

    // Firebaseリアルタイム監視
    db.on('value', (snapshot) => {
      this.setState({
        toilet: snapshot.val()
      });
    });
  }

  render() {
    return (
      <div className="App">
      {
        this.state.toilet === '使用中'
        ? <img src={close} alt="close" width="50%"/>
        : <img src={open} alt="open"  width="50%"/>
      }          
      </div>
    );
  }
}

export default App;

3-2. 実行する

実行コマンドをたたいて、プログラムを実行します。

$ npm start

実行するとこのような画面になります。

3-3. ビルドする

公開するためにファイルをビルドします。

$ npm run build

ビルドするとbuildフォルダにファイルが出力されます。

4. Amazon S3にアップロードする

作成したファイルをAmazon S3にアップロードします。バケットを適当に作ってそこにアップロードしましょう。

ファイルのアクセス許可もしておきます。
staticフォルダとindex.htmlファイルを選択して公開ボタンをクリックします。

アプリにアクセスするURLを知るためにStatic website hostingを有効にします。

インデックスドキュメントにindex.htmlと入力します。エンドポイントURLにアクセスすると作ったアプリを見ることが出来ます。

5. httpsに対応する

昨今セキュリティ強化に伴いブラウザのURLがhttpsに対応していないと諸々使えなくなってきました。
こちらの記事を参考にして公開設定をおこないましょう。

まとめ

Reactを使えば手軽にEnOceanのセンサー値を可視化することができました。
AmazonS3とCloudFrontでさらに簡単に静的サイトを公開することもできました。是非EnOceanを使って様々なセンサー値を可視化してみては如何でしょうか？

システム化のご検討やご相談は弊社までお問い合わせください。
https://i-enter.co.jp/contact/

EnOceanのセンサー値をReactで可視化する