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

Transcript

1. 1.

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

   まえぷー
2. 2.

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

3. 3.

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

4. 4.

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

5. 5.

   None
6. 6.

   MQTTとHttpが使えそう！！

7. 7.

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

8. 8.

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

9. 9.

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

10. 10.

    HTTPの基本構成 ～UIFlow

11. 11.

    None
12. 12.

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

13. 13.

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

14. 14.

    デモ

15. 15.

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

16. 16.

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

17. 17.

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

18. 18.

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

19. 19.

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