デザイン思考のプロトタイピングツール"Noodl"でノンコーディングIoT！

6316 ワード
RaspberryPi Noodl mqtt node-red RaspberryPi テキストリンク

概要

"Noodl"というデザイン思考のプロトタイピングツールを知ったので使ってみました。
このNoodlは、フローベースでUIを作成できます。つまり、ノンコーディング！
Noodlについてはこちらを参照。
　Noodl JP

そして"Node-RED"という、クラウドやエッジの連携をフローベースで作成できるツールがあります。こちらもノンコーディング。
Node-REDについてはこちらを参照。
　Node-RED 日本ユーザ会

"Noodl"と"Node-RED"を連携して利用したら、ノンコーディングでIoTシステムが作れるのではないかと思い、挑戦してみました。

手始めにLチカするシステムを作成しました。

構成はこんな感じです。

Noodlで作成したUIのボタンを押すと、Raspberry Piに接続したLEDがチカチカします。

↓実際に動かした様子。（LEDが分かりずらいと思います。m(__)m ）

ここまで動かすために必要なソースコードをgithubで公開しています。
ご興味ある方は使っていただけると嬉しいです。

以降は、githubで公開しているソースコードの使い方について記載しています。
こちらからNoodl_NodeRED_IoTリポジトリをクローンorダウンロードしてください。

環境

Noodl：v1.3.1
Node-RED：v0.20.6
Node.js：v10.15.2
デバイス：Raspberry Pi2 、Rasbian
MQTTブローカ：shiftr.io

使い方

Noodl編

１．サンプルのプロジェクトを読み込む

Noodlを起動し、プロジェクトを読み込みます。
「Your projects」→「Add external project」を選択します。

フォルダーの選択で、入手したリポジトリの下記フォルダを選択します。

Noodl_NodeRED_IoT/Noodl project/IoT demo

プロジェクトを読み込むと次のような画面となります。

２．MQTTの設定

MQTTのブローカを用意し、接続トークンのURLをプロジェクトに設定します。

今回はMQTTブローカにshiftrを利用しました。
「shiftr」を利用する場合は、設定方法を別の記事にしたのでこちらを参照。
MQTTブローカ"Shiftr.io" 入門

エディタ画面の歯車マークからプロジェクト設定を開きます。

設定欄の下のほうにMQTT設定があります。
「Broker URL」欄に接続トークンのURLを入力します。

以上でNoodlの準備は完了です。

Node-RED編

用意したフローを読み込んで使用します。

１．サンプルフローの読み込み

サンプルのフローファイルを用意してあるので、それをNode-REDに読み込みます。

Node-REDを起動してエディタを開きます。

エディタ画面右上のリストから
「読み込み」→「クリップボード」と進み、
「読み込むファイルを選択～」からサンプルのフローファイルを選択して読み込みます。

読み込むファイルは、入手したリポジトリの下記ファイルを選択します。

Noodl_NodeRED_IoT/Node-RED flow/flows_raspberrypi.json

フローの読み込みに成功すると、フローの別のタブにサンプルフローが展開されます。

２．MQTTの設定

Noodlに設定した接続トークンのURLを”mqtt　inノード″にも設定します。

”mqtt inノード”の設定画面を開き、項目「サーバ」の入力アイコンをクリックします。

項目「サーバ」欄にMQTT接続トークンのURLを入力して完了です。
ここまで進んだらフローをデプロイします。

MQTTの設定で問題なければ、”mqtt inノード”のステータスが”接続済”となります。

３．LED接続

Raspberry Piの好きなGPIOにLEDを接続します。
”rpi-gpio outノード”の設定を開き、LEDを接続したポートを選択します。

以上でLチカするようになります。

おわりに

MQTTブローカは、次のバージョンのNoodlに実装されるようです。
外部ブローカを使用する手間が省けますね(^^)