enebularとUIFlowを連携して爆速IoTプロトタイピング！

Transcript

1. enebular と UIFlow を 連携して 爆速IoTプロトタイピング enebular developer Meetup 2019/11/28

   まえぷー

2. 自己紹介 ・まえぷー ・職：組込みソフトエンジニア ・趣味でIoT電子工作 ・Noodlもくもく会主催 ＠kmaepu ＠kmaepu

3. IoTLTにて、 「最近、難しいLT多くて初心者ネタ少ない」 とのコメントがありました。 このLTネタはIoT初心者向けなのでご了承ください。

4. UIFlowとは ・ M5Stackが提供しているビジュアルプログラミングツール ・ ビジュアルプログラミング言語BlocklyまたはPythonでコーディング ・ WebブラウザまたはローカルPCの環境で動作 ・ M5Stack、M5Stick-Cに対応 https://m5stack.github.io/UIFlow_doc/ja/

5. None

6. MQTTとHttpが使えそう！！

7. 今回は技術レベルを下げたデモ！ ・ Http → 気温表示 ・ MQTT → IoTLチカ

8. デモ Http編 My 天気の子 ver. M5Stack

9. Httpを利用するシチュエーション M5Stack http request HTTP エンドポイント 気象データ 取得 でプログラム作成 現在気温を返す

10. HTTPの基本構成 ～UIFlow

11. None

12. デモ MQTT編 LEDテープチカチカ

13. MQTTを利用するシチュエーション M5Stack でプログラム作成 MQTT MQTT ON/OFFボタン を押す MQTTブローカ LEDテープ チカチカ

14. デモ

15. MQTTの基本構成 ～UIFlow 初期設定 データ受信

16. ボタン押す 対応したデータが MQTTで送信される

17. ついでに... スマホから操作できるようにしてみました！ 「UI」と言えば、「Noodl」ですね。

18. まとめ ・ビジュアルプログラミングツールで動くものが爆速で作れる！ ・enebularは面倒な環境構築の手間いらず！ ・UIFLowはプログラミング初心者の方でも手を付けやすそう！ 【苦労した事】 ・UIFLowで作成したプロジェクトの読み込みができない時がある ・UIFlowのWebエディタと実機とのコネクション途切れる時があった

19. 最後に 本日の詳細な内容をQiitaが開催しているアドベントカレン ダーのenebular 12/7にアップします。 UIFlowとeneblarで使用したソースコードは公開予定。Qiita にリンク張っておきます。