ishikawa_pro's memorandum

若手webエンジニアの備忘録です.

Swift Node.js Docker AWS etc...色々やります。

vironでNature Remoのダッシュボードを作った

こんにちは。
最近は、iPad Airが届いたので、どう使おうか色々模索しながら遊んでいます!
このブログもiPad Airで書いてみてます!

今日はネタ記事です。
僕の部屋では、Nature Remoを使ってエアコンの操作やお掃除ロボの定時起動などをしています。
Natrure Remoは、デバイス自身が温度と湿度と照度のセンサーを備えていて、公開されているREST API 経由でその値を取得できるので、それを使って今回は遊んでみました。

やったこと

今回は、vironというswagger定義とサーバーサイドのコードを書けば、デザインは自動で作ってくれるマネージメントコンソールアプリのOSSを使って、Nature Remoのデバイス管理と1日の温度などをグラフ化してみました。
github.com

使った技術

vironは、いくつかのフロントへ返すレスポンスさえ規則に従っておけば、基本的には何の言語やフレームワークを使っても構わないので、軽くサーバーで使った言語やライブラリなどを紹介しておきます。

言語

  • TypeScript

今年から書き始めたから勉強も兼ねて。

フレームワーク

  • Express.js

使い慣れてるので。

DB

Herokuにデプロイしたかったから。

ORM

  • TypeORM

github.com
昔は業務でSequelizeを使ってたので(最近はmongoDB+mongoose)、Sequelizeにするか迷いましたが、TypeORMがいいらしいとの噂を耳にしたので、今回は使ったことのないTypeORMにしてみました。

デプロイ先

  • Heroku

サーバー代を払いたくなかったから。

その他

  • openapi-generator

Nature Remoのapiはopenapiの定義書が公開されています。
これをopenapi-generatorという、定義書からサーバーやapi clientを自動生成してくれるライブラリへ食わせてapi clinetは自動生成しました。
https://swagger.nature.global

vironは、node-vironlibというvironのサーバーを立ち上げるために必要になる色々なミドルウェアやcontrollerなどをnode.jsで実装してヘルパーライブラリとして提供していますが、d.tsを提供していないのと、今回そこまでしっかり実装するほどの内容でもなかったので、使わずに全て自前で実装しました。

機能

作った機能を紹介します。
まあ、とりあえずなんでもグラフ化すればカッコよく見えるだろうと思って、Nature Remoから取れる温度、湿度、照度を定期的にNature Remoのapiから取得してPostgreSQLに溜め込んで、その日1日分をグラフ化しました。
f:id:ishikawa_pro:20201024222148j:plain
上3つのカードコンポーネントは、現在の温度、湿度、照度を表示してます。

工夫した点は、10分おきにNature RemoのAPIを叩いてDBに保存しているのですが、HerokuのPostgreSQLの無料枠はrow数に制限があり、10分おきに行を追加していたらすぐに無料枠を失ってしまうので、1日のデータは1行にして、時間毎のセンサーデータはjson型にして1つのカラムに蓄積するようにしました笑
これでグラフ表示する時も今日の日付のデータを1つ引いて来ればいいので簡単です笑

あとは、とりあえず登録してあるNature Remoデバイスと、それらが管理している家電一覧などを表示できるようにしました。

f:id:ishikawa_pro:20201024224005j:plainf:id:ishikawa_pro:20201024223959j:plain
バイスなどの管理画面

このくらいの機能は、apiを叩いてちょっとレスポンスを整形して返してあげれば良いので実装は非常に簡単です。

まとめ

今回は、Nature Remoとvironを使って簡単なダッシュボードみたいなものを作ってみました。
Nature Remoのapiには、家電の操作系のエンドポイントも用意してありそうだったので、vironからエアコンの制御とかもできるようにすると、より管理画面らしくなって面白いかもしれないです。
TypeORMを使ってみた感想は、書き方がActive Record風な書き方や、SequelizeのようなData Mapperのような使い方が用意されていたり、スキーママイグレーションもできるようになっていたので結構リッチな感じでした。
今回作ったサーバーアプリケーションは、一応GitHubに上げておくので、cloneするなりforkするなりして、煮るなり焼くなりしてください。
github.com