Sigfox IoT Agency Platformで簡単ダッシュボード

>※IoT Agency Platfromは2020年12月31日をもってサービス終了予定となります。
※[GitHubリポジトリ](https://github.com/IoT-Makers/sigfox-platform.git)は引き続きご利用いただけます。

Sigfoxから[IoT Agency Platform](https://try.iotagency.sigfox.com)というIoTプラットフォームがβ版ですがリリースされています。
https://try.iotagency.sigfox.com

このプラットフォームを使えば、Sigfox Callbackと連携したダッシュボードが簡単に作成できるだけではなく、Sigfox Web APIやWebhook、MQTTなどとの接続も可能になるようです。
デモアプリケーションや教育用として手軽にお使いいただけると思います。

#ユーザ登録/Login
下記URLIoT Agency Platformのユーザ登録およびログインができます。ユーザ登録もメールアドレスとパスワードだけで良いのでクレジットカードの登録や、個人情報の入力も少なく始められます。。
![screencapture-try-iotagency-sigfox-2019-01-20-21_20_01.png](https://qiita-image-store.s3.amazonaws.com/0/172313/bc31e6ed-d8ba-6f17-97bf-3b4889beaf88.png)

Loginに成功すると下図の画面となります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/e17d2209-3bb4-cc2b-0575-ec64d4f43ecc.png)

#Connector作成（Sigfox API Credentialの登録）
まずは、SigfoxクラウドAPIをIoT Agency PlatformからリスエストできるようにConnectorを作成します。
左メニューから**Connectors**メニューを選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172313/8f6b7f6c-9ef0-448f-3253-bec489187c96.png)
その後、画面右上の**[+]**ボタンをクリックし、表示される"Add new connector"ダイアログに必要事項を入力してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172313/1ab6bd02-1606-b01e-e20e-0a05d29b7044.png)

|項目|入力例|
|:---|:-----|
|Name|お好きな名前（例:MySigfox）|
|Type|Sigfox API|
|Login|Sigfox API Login user|
|Password|Sigfox API password|
>Login,Passwordに関しては、[SigfoxクラウドAPI](https://qiita.com/ghibi/items/b9cb1d26ccff26a427a3)を参考に事前にAPI Credentialを作成しておいてください。
Connectorが作成されると、下図のように作成したConnectorがリスト表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172313/c203e86b-4c5d-4968-7417-b9d493771434.png)

#API作成（Callback設定）
次に、Sigfoxデバイスと接続できるように[Sigfox Backend Cloud](https://backend.sigfox.com/)でCallbackを設定します。
左メニューから**API**メニューを選択してください。
![screencapture-try-iotagency-sigfox-2019-01-20-21_32_37.png](https://qiita-image-store.s3.amazonaws.com/0/172313/3b3c32be-5db2-2cd9-66a8-8d728f1301bf.png)
この画面には、Callback内容が表示されるので、その内容をSigfox Backend Cloudに設定するだけで自動的に接続されます。Callbackを作成する前にアクセストークンが必要になります。

##Developer Access Tokenを作成
**Developer Access Token**の下に「Manage Tokens」をクリックして、Tokenを作成します。[Create New]ボタンをクリックしてください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/cdcf0297-5aaa-1091-6842-0d9d14e47fad.png)
64文字のTokenが作成されます。このTokenがSigfox Backend Cloudとの連携に必要なTokenとなります。

##Callback設定
ここから実際にCallbackを作成する手順となります。
**AUTO CREATE CALLBACKS**のSelect one device typeリストから、Callback連携したいデバイスタイプを選択し、**[+]Create callbacks**ボタンをクリックすると、Sigfoxクラウド側に新規Callbackが自動で作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172313/e29b61aa-7a49-026e-2d4a-89bca65e1022.png)
>作成されたCallbackが必要なくなった場合は、Sigfoxクラウド側で手動削除してください。Callbackについてはじめてのかたは[こちら](https://qiita.com/ghibi/items/53259381a30363538a6d)を見てください。


##Device Messageの確認
その後、DeviceからMessageを送信すると、Devices画面に自動的にDeviceが登録されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/fa164d9d-83a6-67fc-5552-af8314ff3c20.png)

Messages画面にも送信されたメッセージが表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/e28a10a0-86f2-8120-5b6f-de27a72edc80.png)

#Parserを作成
メッセージのペイロードは、16進表記の数字文字の羅列にしか過ぎないので、ダッシュボード表示のために、ペイロードをパースします。
左メニューから**Parsers**メニューを選択して、新たなパーサーを作成します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/b855111a-b56c-4f9b-0033-a3d0fdc4e97e.png)
今回は、Sigfox Shield for Arduino（UnaShield）用のサンプルスケッチ**"basic-demo"**のペイロードをパースするサンプルを記載します。basic-demoサンプルは[こちら](https://github.com/kccs-iot/sigfox-shield-arduino)から入手してください。

```basic-demo.js
var payload,
    counter,
    temperature,
    battery,
    parsedData = [],
    obj = {};

// If byte #1 of the payload is temperature (hex to decimal)
counter = parseInt(payload.slice(2, 4) + payload.slice(0, 2), 16);

v = new DataView(new ArrayBuffer(4));
v.setUint32(0, parseInt(payload.slice(4, 12), 16));
temperature = v.getFloat32(0).toFixed(2);

v = new DataView(new ArrayBuffer(4));
v.setUint32(0, parseInt(payload.slice(12, 20), 16));
battery = v.getFloat32(0).toFixed(2);

// Store objects in parsedData array
obj = {};
obj.key = 'counter';
obj.value = counter;
obj.type = 'number';
obj.unit = '-';
parsedData.push(obj);
obj = {};
obj.key = 'temperature';
obj.value = temperature;
obj.type = 'number';
obj.unit = '°Ca';
parsedData.push(obj);
obj = {};
obj.key = 'battery';
obj.value = battery;
obj.type = 'number';
obj.unit = 'V';
parsedData.push(obj);

//console.log(parseData);
return parsedData;
```
このParserを使うことにより、Sigfox Shield for Arduinoから送られたメッセージ送信回数、温度、バッテリー電圧をIoT Agency Platform上で使用することが可能になります。
[Add Parser]ボタンをクリックすると、Parserが作成されます。
>このParserは既に登録済みで誰でもお使いいただけます。Parser name:"KCCS basic-demo"で探してみてください。

##ParserをDeviceに紐づける
作成したParserをDeviceに紐づけることにより、Deviceから送信されたメッセージのペイロードを、先ほどのParserスクリプトでパースすることができるようになります。
Deviceメニューの該当デバイスの編集ボダン（青色のペンボタン）をクリックし、右側に表示されたInformationのParser項目に、先ほど作成したParser名を選択し、Updateボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172313/5bc5864c-bbb6-00ba-57a0-1bc9dfc238ba.png)

#Dashuboardの作成
左メニューの(+)ボタンをクリックすると、新たにDashboardが作成されます。次に、作成したDashboardを選択し、[Add widget]ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/b7d0e620-bbd5-4d79-e5f8-8df40542289f.png)
Widgetの設定は、作成したいグラフ内容にあわせて自由に設定してください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/0be24dbe-a8a3-e888-91b8-40d3ec940296.png)
この例では、Device ID #7B0DE2の温度(temperature)を線グラフとして作成します。
[Add widget]ボタンをクリックすると、下図のような線グラフが表示されます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/1a85a542-a49c-384a-f7e2-3bb6c9b2a788.png)

[Next > IoT Agency PlatformをHeroku上にデプロイする](https://qiita.com/ghibi/items/c7ad87580309c6708138)

[Sigfox Japan KCCS](https://qiita.com/organizations/sigfox)