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

Last updated at 2018-11-30Posted at 2018-11-30

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;