NoodlでCloudMQTTを利用する方法

# 目的
Noodlの外部MQTTブローカーとしてCloudMQTTを利用する方法を備忘録として残しておこうと思います。

## 今回作ったサンプルプロジェクト
入力された文字の情報をCloudMQTTに送り、CloudMQTTからNoodlに情報が返ってくるというものです。
MQTTに繋げる意味あるのかって感じですが、本記事の目的はCloudMQTTの利用方法の備忘録なので...笑
![project_cloudmqtt.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/b4cef04a-59b5-a826-5040-809c2c8631fe.gif)

## CloudMQTTの利用方法
１. [CloudMQTT](https://www.cloudmqtt.com/)にアクセスし、`Get a managed IoT broker today`をクリック。
<img width="800" alt="スクリーンショット 2019-11-04 21.51.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/1339165a-bf5d-69d1-3ce6-9135fd263d12.png">
２. フリープランの`Get Now`をクリック。
<img width="800" alt="スクリーンショット 2019-11-04 21.52.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/35529c87-9843-1c06-bd8a-41bbd149fb25.png">
３.CloudMQTTにログイン。
４.ログイン後の画面右上にある`Create New Instance`をクリック。
５.Nameにインスタンス名を入力し、`Select Region`をクリック。（今回はインスタンス名をtestとしました）
<img width="800" alt="スクリーンショット 2019-11-04 22.15.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/762592b8-14ef-100a-dc2f-913548d7f838.png">
６.AWSのデータセンターを選択します（今回はUS-East-1を選択しました）
<img width="800" alt="スクリーンショット 2019-11-04 22.18.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/d07cab78-59e9-1631-b581-07632c90b36b.png">
７.入力情報を確認したら`Create instance`をクリック。
８.インスタンスが作成され、AWS上にMQTTブローカーを立てることができました！
<img width="800" alt="スクリーンショット 2019-11-04 22.25.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/2fe6a6f3-1203-6850-0bae-6eda23fbc7ff.png">
９.作成したインスタンスをクリックすると、サーバー名、ユーザー名、パスワード、各ポート番号などが表示されます。これらの情報をNoodl側で使うので、この画面を開いたままNoodlへ移ります。
<img width="800" alt="スクリーンショット 2019-11-04 22.27.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/bdaf6d47-5d93-32de-8d71-e5b85f9fd303.png">


## NoodlでClowdMQTTを利用する方法
１.Noodlでプロジェクトを開いた後、Project settingsを開きます。
<img width="419" alt="スクリーンショット 2019-11-04 22.47.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/4ddf29b4-8c13-9219-90ec-ebb4afc0ec82.png">
２.MQTT欄のExternal Brokerにチェックを入れると、Broker URLの入力欄が出現します。
　Broker URLはCloudMQTTの情報を元に以下のように入力します。
　wss://【User】:【パスワード】@tailor.cloudmqtt.com:【Websockets Port (TLS only)】
<img width="499" alt="スクリーンショット 2019-11-04 22.51.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/a44692a2-9482-6189-da82-4ab1c1ac5511.png">
３.Send Messegeノードを作成し、Topicに`/test`と入力します。
　（最初に/を必ず入れれば、どんな名前でもOKです）
　左下にある`+Port`をクリックし、Payloadに`moji`というポートを作成しました。
　（ポートも好きな名前でOKです）
　Send On Changeにチェックを入れます。
　（データが変更される度に、mqttブローカーへデータを送るということです）
<img width="1669" alt="スクリーンショット 2019-11-04 23.13.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/cddd3a9e-ddb3-6b88-a954-1e061cd6970e.png">
４.Text Inputノード（Text）からSend Messegeノード（moji）へ繋ぎます。
<img width="589" alt="スクリーンショット 2019-11-04 23.11.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/e8bd2fe1-ec08-4b9d-abcd-318316ee7799.png">
５.Receive Messegeノードを作成し、Topicに`/test`と入力します。
　（Send Messegeノードで決めたTopic名と同じでないと、データを受け取れません）
　左下にある`+Port`をクリックし、Payloadに`moji`というポートを作成します。
　（Send Messegeノードで作成したポート名と同じ名前出ないと、データを受け取れません）
<img width="1680" alt="スクリーンショット 2019-11-04 23.15.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/4f05daac-eae4-b223-c3c9-cb806fc23f00.png">
６.Receive Messegeノード（moji）からTextノード（Text）へ繋ぎます。
<img width="564" alt="スクリーンショット 2019-11-04 23.22.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/cbba78ea-247f-757d-023b-aceb73650de3.png">
７.プレビュー画面に文字を入力してみて、その通りに文字が表示されれば成功です！
<img width="1680" alt="スクリーンショット 2019-11-04 23.33.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/34f23e37-8fb5-2c6d-79a1-d3798b705f71.png">


## 送受信されたデータの確認方法
CloudMQTTのWEBSOCKET UIをクリックすると以下のような画面が出ます。
この画面で、送受信されたデータを確認することができます。
<img width="1680" alt="スクリーンショット 2019-11-04 23.32.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/0b49d31e-8f09-4d8e-14f0-e0c2cc276223.png">
データが送受信されるとこんな感じ↓
文字が入力される度にデータが送られているのが分かります。
<img width="1680" alt="スクリーンショット 2019-11-04 23.31.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526082/ee11d2d1-f900-3b42-22d7-52890c326abd.png">

## おわりに
今回はNoodlの外部MQTTブローカーとしてCloudMQTTを使用しました。
他にも、外部ブローカーには[shiftr.io](https://shiftr.io/)などがあります。
以下の記事が参考になると思いますので、気になった方はそちらもチェックしてみてください〜
・[MQTTブローカ"Shiftr.io" 入門](https://qiita.com/kmaepu/items/644b0bf2c3f438e71aa6)
・[デザイン思考のプロトタイピングツール"Noodl"でノンコーディングIoT！](https://qiita.com/kmaepu/items/2a0fcb8e5e00bd303c62)