Azure IoT Hub からのセンサーデータを WebApp から監視する

#Azure IoT Hub からのセンサーデータを WebApp から監視する
IoT によるデータ活用は以前よりトレンドとなっているが、クラウドのサービスを使用することでより簡単に IoT データを扱うプラットフォームが構築できるようになってきている。この記事では、Azure IoT Hub から リアルタイムセンサーデータを Azure WebApp に送信し、それを Web 上で監視するようなアプリケーションを作成してみる。
参考記事:Web アプリで Azure IoT Hub からのリアルタイム センサー データを視覚化する
https://docs.microsoft.com/ja-jp/azure/iot-hub/iot-hub-live-data-visualization-in-web-apps

今回実施する作業は大きく分けて以下の通り
1. IoT デバイスから Azure IoT Hub へデータを送信する準備をする
2. IoT Hub が 受け取ったデータを WebApp へ受け渡す

##IoT デバイスから Azure IoT Hub へデータを送信する準備をする  
1. まずは Azure Portal から Iot Hub サービスをデプロイする
→Devices を登録すると、そのデバイスID から接続文字列を獲得することができる。これはどこかにメモっておく。

2. Raspberry Pi Web シミュレーターを準備する
Microsoft が公開している以下 Docs にシュミレーターの扱い方がよくまとまっている(以外と丁寧だった)  
https://docs.microsoft.com/ja-jp/azure/iot-hub/iot-hub-raspberry-pi-web-simulator-get-started  
このガイドにしたがって、上記で取得した接続文字列をシュミレーターの文字列に入力し、Run を実行する  
->実際にはこれだけでOK! これで Azure IoT Hub にセンサーデータが送信されています。

###Tips
- 実際に送信されたデータは、Visual Studio Code を使用するとかなり楽に確認することが可能。  
https://docs.microsoft.com/ja-jp/azure/iot-hub/iot-hub-vscode-iot-toolkit-cloud-device-messaging

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/53f40c55-d3f9-8402-e654-42661e4a70be.png)

##IoT Hub が 受け取ったデータを WebApp へ受け渡す
Microsoft が公開している Documents で基本的にはできるが、いくつか Tips があったので忘備録として纏めておく。
参考記事:Web アプリで Azure IoT Hub からのリアルタイム センサー データを視覚化する
https://docs.microsoft.com/ja-jp/azure/iot-hub/iot-hub-live-data-visualization-in-web-apps

ちなみに成功すると、以下の様な感じで送信されてきたデータがぐにゃぐにゃの線で表示されます。なかなかGood!

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/a818256a-fb58-5972-6f72-a2803834cdfa.png)

###Tips
- コマンドラインから Strings を入力するのに抵抗のある人は、VS Code で、launch.json の該当箇所を変更する方法でも良いみたいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/e4fd688e-490d-546c-5378-79b6eb7a2dfc.png)

- Microsoft の Docs では Azure CLI を使用して、Git から Azure WebApp にデプロイする方法でしたが、Azure WebApp の Deployment Center から GitHub でデプロイするオプションを選択することで、より簡単にアプリをデプロイすることが可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149921/5ca10021-ebc9-5d38-961d-5e8790f9e84f.png)

→この方法だとデプロイするまでは簡単だが、Docs に記載されている Azure CLI の以下3つの設定は明示的に Portal から設定する必要があります。

```
az webapp config appsettings set -n <your web app name> -g <your resource group name> --settings EventHubConsumerGroup=<your consumer group> IotHubConnectionString=<your IoT hub connection string>
az webapp config set -n <your web app name> -g <your resource group name> --web-sockets-enabled true
az webapp update -n <your web app name> -g <your resource group name> --https-only true
```
実際にはそこまで大変ではないですが、CLI から色々設定した方が楽！という人は CLI が良いと思います。今回は勉強も兼ねて portal ページに値を入力しました。


##参考 URL まとめ

Web アプリで Azure IoT Hub からのリアルタイム センサー データを視覚化する
https://docs.microsoft.com/ja-jp/azure/iot-hub/iot-hub-live-data-visualization-in-web-apps

Raspberry Pi オンライン シミュレーターの Azure IoT Hub への接続 (Node.js)
https://docs.microsoft.com/ja-jp/azure/iot-hub/iot-hub-raspberry-pi-web-simulator-get-started

Azure portal で App Service アプリを構成する
https://docs.microsoft.com/ja-jp/azure/iot-hub/iot-hub-raspberry-pi-web-simulator-get-started

Visual Studio Code 用 Azure IoT Tools を使用してデバイスと IoT Hub の間のメッセージを送受信する
https://docs.microsoft.com/ja-jp/azure/iot-hub/iot-hub-vscode-iot-toolkit-cloud-device-messaging