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

E6c980b93d086e757643971b318a40a9?s=47 maepu
November 28, 2019

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

2019/11/28 enebular deveroper Meetupに登壇した際のスライドです。

E6c980b93d086e757643971b318a40a9?s=128

maepu

November 28, 2019
Tweet

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 にリンク張っておきます。