Noodl×Node-REDハンズオン

Noodl×Node-RED ハンズオン 2019/11/21 Noodlもくもく会＃２メンター：まえぷー × ※NoodlロゴはNoodl Labより引用

お願い本日の様子をTwitteで呟いていただくと嬉しいです！写真撮影OKです！！！ツイートする際は次のハッシュタグでお願いします。 #Noodl #Noodlもくもく会 #eLV勉強会 #noderedjp

認識調査！ •Noodlを使ったことある方！ •Node-REDを使ったことある方！

準備の確認 •Noodl ver1.3.1 •Node-RED （enebularまたはローカル） •OpenweatherMAPの登録

本日の流れ 1. Noodlもくもく会とは 2. メンター紹介 3. NoodlとNode-REDの概要説明 4. 本日作るもの説明 5.
NoodlでUI（画面）作成～休憩～ 6. Node-REDで天気情報取得 7. NoodlとNode-RED連携 8. まとめ

１．Noodlもくもく会とは

２．メンター紹介 • まえぷー • 職：組込みソフトエンジニア • 業務内容： • 組込み機器のファームウェア開発 •
最近の活動： • IoT電子工作 • 技術書同人誌の頒布 • 出窓菜園＠kmaepu ＠kmaepu

３．Noodlとは？ • UI/UXのビジュアルプロトタイピングツール • フローベースの開発環境 • ノンコーディングでUIを作成できる • 外部連携も可能（MQTT、REST） •
無償で利用できる https://tensorx.co.jp/noodl-jp/ 公式サイトはこちら

３．Node-REDとは？ • IoT連携ツール • ハードウェア、API、データベース等の連携が容易 • フローベースの開発環境 • ラズパイやクラウド、様々な実行環境がある •
無償で利用できる https://tensorx.co.jp/noodl-jp/ 公式サイトはこちら

４．本日作るものお天気情報アプリ

５．Noodlで画面作成～ハンズオン～

６．Node-REDで天気情報取得～ハンズオン～

７．NoodlとNode-RED連携・連携方法は２種類 ① MQTT通信 ② REST （HTTP request） RESTによる連携は右の記事が参考になります！
今回はこちらを使用します https://qiita.com/kisaichi07/items/527ba7b3d4ed1dacce07

７．NoodlとNode-RED連携・MQTT通信とは - Message Queueing Telemetry Transport の略 - TCP/IPネットワークを利用した通信プロトコルの１つ
- HTTP通信よりヘッダが少ないので軽量 - 非同期のパブリッシュ（送信）/サブスクライブ（受信）型

７．NoodlとNode-RED連携 https://qiita.com/kmaepu/items/644b0bf2c3f438e71aa6 今回使用するMQTTブローカはshiftr.ioです。送信者受信者 MQTTブローカパブリッシュサブスクライブ Shiftr.ioへのリンク

７．NoodlとNode-RED連携～ハンズオン～ ×

８．まとめ・NoodlとNode-REDを利用すると、プログラムを書くことなく開発できます。・NoodlはUI作成が得意、Node-REDはサービス連携が得意。・こんなことに利用できそう - 自作ラジコンのコントローラー - スマートリモコン

イベント情報 https://node-red.connpass.com/event/153172/

イベント情報 https://elv.connpass.com/event/154629/

イベント情報 Qiitaのアドベントカンレンダー参加者募集中！！ https://qiita.com/advent-calendar/2019/noodl

おまけ・NoodlとNode-REDの入門本販売中！・基本操作～連携について説明しています。・受付に見本があります。・イベント限定で定価￥1,000 → ￥800 ・アドベントカレンダー参加確約で → ￥500
20% OFF！ 50% OFF！

本日はご参加ありがとうございました！

Noodl×Node-REDハンズオン

Noodl×Node-REDハンズオン

maepu

More Decks by maepu

Other Decks in How-to & DIY

Featured

Transcript