2020.07.14「Node-REDで可視化してみた」

Transcript

1. Node-REDでDBを可視化してみた KMiura

2. 自己紹介 • 三浦 耕生（こうき） • 名古屋のゲーム会社 のサーバーエンジニア

3. SORACOMから小包が • SORACOMのブログ投稿キャンペーン に応募したらノベルティが届いた • 思ってたよりも早く着いた（ありがとうご ざいます！）

4. とりあえず動かしてみた • SORACOMコンソールから受け取り確認を 入れてデバイス登録すると開通する • これでSORACOM Harvestから温湿度を とってみる 1時間おきに点滅→

5. もう少しなにかしたいな • IBM Cloud Functionsでデータを取ってCloudantにためてみる • SORACOM FuncではIBM Cloud Functionsと連携できない（知っ

   てた • SORACOM BeamでRest API経由でデータを送信してみることに

6. 続きを書いてみた https://qrgo.page.link/KoPoB

7. 今回はその続編

8. データの可視化 • せっかくDBにためてるならデータを可視化したい • とりあえずNode-RED使うか • Dashboard使う ここまでがテンプレ

9. しかし、罠が… Dashboardを使うときには今動かしているデバイスの データを一定間隔で取得してグラフにプロットする DBのデータを可視化するにはあまり使えない…

10. 完

11. さすがに初参加の方に失礼

12. 他の手段はないのか?? • どうやらChartjsをNode-REDで使えるっぽい • 予めグラフに使う値を定義して出力させるっぽい https://github.com/masalinas/node-red-contrib-chartjs

13. フロー • Cloudantのデータに全文検索かけて直近 の100件に絞り込み • Chartjsノードに渡せる形に成形

14. 完成 • トリガーを実行することでプロットが 行われる • 配列の立て方もシンプルでグラフの カスタムが自由にできそう

15. なんとグラフを出力出来る • PNGとPDF • でもPDFは出力されず…

16. 複数のグラフを表示する • iframeで自力で組み込むしかない • 安定のBootstrap

17. DEMO

18. まとめ • リアルタイムでモニタリング • Dashboard • DBから持ってくる • Chartjs •

    Node-REDを使えばパーツ単位でUIを管理できる Node-RED最高！

19. 次回予告 • Raspberry Piでこのご時世に使い たいもの作ってみる • 絶賛準備中

20. END