Slide 1
Slide 1 text
enebular と UIFlow を
連携して
爆速IoTプロトタイピング
enebular developer Meetup
2019/11/28
まえぷー
Slide 2
Slide 2 text
自己紹介
・まえぷー
・職：組込みソフトエンジニア
・趣味でIoT電子工作
・Noodlもくもく会主催
＠kmaepu ＠kmaepu
Slide 3
Slide 3 text
IoTLTにて、
「最近、難しいLT多くて初心者ネタ少ない」
とのコメントがありました。
このLTネタはIoT初心者向けなのでご了承ください。
Slide 4
Slide 4 text
UIFlowとは
・ M5Stackが提供しているビジュアルプログラミングツール
・ ビジュアルプログラミング言語BlocklyまたはPythonでコーディング
・ WebブラウザまたはローカルPCの環境で動作
・ M5Stack、M5Stick-Cに対応
https://m5stack.github.io/UIFlow_doc/ja/
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
MQTTとHttpが使えそう！！
Slide 7
Slide 7 text
今回は技術レベルを下げたデモ！
・ Http → 気温表示
・ MQTT → IoTLチカ
Slide 8
Slide 8 text
デモ Http編
My 天気の子 ver. M5Stack
Slide 9
Slide 9 text
Httpを利用するシチュエーション
M5Stack
http request
HTTP
エンドポイント
気象データ
取得
でプログラム作成
現在気温を返す
Slide 10
Slide 10 text
HTTPの基本構成 ～UIFlow
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
デモ MQTT編
LEDテープチカチカ
Slide 13
Slide 13 text
MQTTを利用するシチュエーション
M5Stack
でプログラム作成
MQTT MQTT
ON/OFFボタン
を押す
MQTTブローカ
LEDテープ
チカチカ
Slide 14
Slide 14 text
デモ
Slide 15
Slide 15 text
MQTTの基本構成 ～UIFlow
初期設定
データ受信
Slide 16
Slide 16 text
ボタン押す
対応したデータが
MQTTで送信される
Slide 17
Slide 17 text
ついでに...
スマホから操作できるようにしてみました！
「UI」と言えば、「Noodl」ですね。
Slide 18
Slide 18 text
まとめ
・ビジュアルプログラミングツールで動くものが爆速で作れる！
・enebularは面倒な環境構築の手間いらず！
・UIFLowはプログラミング初心者の方でも手を付けやすそう！
【苦労した事】
・UIFLowで作成したプロジェクトの読み込みができない時がある
・UIFlowのWebエディタと実機とのコネクション途切れる時があった
Slide 19
Slide 19 text
最後に
本日の詳細な内容をQiitaが開催しているアドベントカレン
ダーのenebular 12/7にアップします。
UIFlowとeneblarで使用したソースコードは公開予定。Qiita
にリンク張っておきます。