AWS IoTとThingsBoardでIoT向けリアルタイムダッシュボードを作る

### ThingsBoard
IoT向けのオープンソースのデバイス管理、可視化プラットフォームです。
機能はかなり多岐にわたるため、完全に使いこなすのは大変かもしれませんが、MQTT接続で、データを取得してリアルタイムで地図やグラフの描画などができます。
サイトはシズル感があり、試してみたくなります。
https://thingsboard.io/

ThingsBoard PE(Professional Edition) だと、AWS IoT Integrationが簡単にできるので、それを試してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102681/25f71ad0-875b-c4e8-729f-a7295fe039a4.png)

基本的な手順はこちらにあります。
https://thingsboard.io/docs/user-guide/integrations/aws-iot/

### AMIの起動

若干お金はかかってしまうのですが、 aws marketplace にThingsBoardのAMIがあります。
https://aws.amazon.com/marketplace/pp/B07MLRVF3Q?qid=1559900650987&sr=0-1&ref_=srh_res_product_title
ライセンス条件を確認の上で、こちらを利用していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102681/f7a1e34f-0f61-e720-5ba7-578252329d0f.png)
東京リージョンのMicroインスタンスなら 1時間0.014ドル、年間100ドルです。（EC2利用料は別）

`Accept Terms`のボタンをおし、右上の `Continue to Configuration` を押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102681/37d8e167-2475-597d-0ed7-d6d24eb00728.png)

Regionを選択後に、`Continue to Launch` を押します。
この後は、他のAMIの設定と同様にVPC, Subnet, Security Group, Key Pair などを作成して `Launch` を押します。これでEC2のインスタンスが起動し、すぐにThingsBoardが利用可能になります。

EC2のサービスで、Instancesを選択し、Public DNSをコピペし、ブラウザで表示します。


### ThingsBoard上でのアカウント作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102681/32162b4f-c0e1-28ea-64e8-9f132e874e3e.png)

MarketplaceのUsage Instruction を見ると

- Once the instance is running, enter http://instance-public-ip-or-dns into your browser. You will then see the ThingsBoard login page, you can use default sysadmin credentials: 'sysadmin@thingsboard.org' as username and the instance-id as the password. You can also access your instance via SSH using the username 'ubuntu' and your Amazon private key.

とのことなので、このID/パスワードでログイン。
このアカウントは、AWSで言うところのルートアカウントのようなものなので、実際の操作はテナントを作成し、そこにアカウントを１つ払い出して、そのアカウントで行う。

* 左側にあるメニューから、TENANTSを選択し、その後右下の Add new tenant ボタンを押す。
* ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102681/97b2ef27-b834-45ec-07fd-3f7b87f6f982.png)

  * 適当な名前でTenantを作成したら、作成されたTenantを押し、さらにManage tenant adminを押す。
* 右下にある、Add new user ボタンを押して、適当なメアドを入れる。
* User activation linkをクリックし、パスワードを設定すると完成。
* 左側のメニュー項目に、いろいろ追加されたはず。

### AWS IoT との連携
このYouTubeの説明が詳しいです。（この動画をスロー再生しながら設定を行いました。）
https://youtu.be/udkuOUrNzWk
これに従い、証明書の設定、AWS IoTのポリシーの作成およびアタッチ、ThingsBoard側でのデータの変換などを行います。この動画の後半で、テスト用のMQTTのPublishに、mosquitto_pubを使っていますが、インストールしていない人は、AWS IoT CoreのTest機能で事足ります。(後述)

### 動画の補足
途中、Converterを作成するところで、動画にあるCustomという選択肢がありません。ここは `Uplink` で進めます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102681/57820e9c-ad14-a953-e9ca-e9d047895dea.png)

Converter の実装は以下のようになりました。

``` js

// decode payload to JSON
var data = decodeToJson(payload);

// Result object with device attributes/telemetry data
var result = {};

var topic = metadata['topic'].split('/');

result.deviceName = topic[1];

if (topic[2] == 'temperature') {
    result.telemetry = {
        temperature: data.value
    };
    result.deviceType = 'thermostat';
} else if (topic[2] == 'humidity') {
    result.telemetry = {
        humidity: data.value
    };
    result.deviceType = 'humidity sensor'

}
result.attributes = {
    integrationName: metadata['integrationName']
}

/** Helper functions **/

function decodeToString(payload) {
    return String.fromCharCode.apply(String, payload);
}

function decodeToJson(payload) {
    // covert payload to string.
    var str = decodeToString(payload);

    // parse string to JSON
    var data = JSON.parse(str);
    return data;
}

return result;

```

### AWS IoT CoreからPublish
IoT CoreのメニューからTestを選択肢、Publishの項目で、TopicとMessageを記入し、Publish to topicを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102681/b95131a8-9dac-4a4b-3353-51cfe8102d0e.png)

### グラフでリアルタイム描画

Dashboardを作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102681/151b45e1-3c58-f8e8-91ac-6048d7dd8977.png)

作成したら、 Device Group →　All　→　Deviceを選択　→　Current bundleでCharts(Flot)を選択　→ Add to dashboard
先程作成したダッシュボードに追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102681/8699dce2-a0bb-9641-4b46-52409d0482b2.png)

ダッシュボードを表示します。All→ダッシュボード選択→Open Dashboard

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102681/7d75c4d0-9f80-6c77-e254-00e61eefedf5.png)

この時点ではまだデータは表示されてません。データをAWS IoTから流してみます。Valueを変えてPublishすると、グラフが変化することが確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102681/e61d8844-8a6b-7d7b-d45e-66d8f1647ca2.png)

### まとめ

ちょっとリアルタイムでIoTデータを表示させるのに、ThingsBoardも使えそうです。グラフのテンプレートが結構揃っているのでそれっぽい描画ができます。