IoT Central デバイス プログラミング サンプル（.NET nanoFramework編）

Microsoft Build 2022でお話しした内容に関するサンプルプログラムの解説をします。

Azure IoT Central用デバイスとしてM5ATOMLite + .NET nanoFrameworkを用いたサンプルプログラムになります。
デバイスから温湿度データを送信し、IoT Centralアプリケーション上でグラフ表示を行います。また、アプリケーションからデバイスのLEDをオンオフできるようにします。

# ハードウェア
・M5ATOM Lite
・ENVIII UNIT（SHT30温湿度センサー）

# ソフトウェア
・VisualStudio2022
・.NET nanoFramework Extension
・ファームウェア　ESP32_PICO 1.8.0.313
・Azure IoT Central
・.NET SDK 6

# 追加NuGetパッケージ
・nanoFramework.Hardware.Esp32
・nanoFramework.Iot.Device.Sht3x
・nanoFramework.System.Device.WiFi
・nanoFramework.AtomLite
・nanoFramework.Azure.Devices.Client

# 準備
## デバイスにファームウェアを書き込む
・あらかじめ.NET SDKをインストールしてください。
・ターミナルから次のコマンドを入力して書き込みプログラムをインストールします。

```
> dotnet tool install -g nanoff
```

・次のコマンドでファームウェアを書き込みます。
```
>  nanoff --target ESP32_PICO --serialport COMxx --update --baud 115200
```

・書き込みが終了したら一度デバイスをPCから外します。

・デバイスがIoT Centralに接続するためにルートCA証明書が必要になります。今回はデバイスに証明書をアップロードして登録します。

・まず次の[ページ](https://docs.microsoft.com/ja-jp/azure/security/fundamentals/tls-certificate-changes)から「Baltimore CyberTrust Root」をダウンロードしておきます。
![00.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/47ac260d-b068-432c-bba8-a8f562ff2b14.png)

・[ここ](https://github.com/linyixian/Build2022_IoTCentral_Sample)からソースプログラムをダウンロードして、VisualStudioで開きます。

・次にPCにデバイスを接続してから、DeviceExplolerウインドウに切り替えて、上部のEdit Network Configurationボタンをクリックします。
![02.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/857355e0-ba44-8fd0-6915-66f07695bf4e.png)

・Generalタブに切り替えて、Browseボタンをクリックします。
![03.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/a41de44d-6b59-09a0-2ec1-968cb4f27a35.png)

・ファイルダイアログで先ほどダウンロードした証明書ファイルを選択して開くボタンをクリックすると、デバイスに証明書がアップロードされます。
![04.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/12e59ee3-cd57-587a-92b7-b5855723107f.png)

# IoT Centralアプリケーション
## IoTCentralアプリケーション作成

・[IoTCentralポータルサイト](https://apps.azureiotcentral.com/)にアクセスします。

![01.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/6b1f5d53-d839-0cea-2ddd-0d6183cb9501.png)

・画面左の「マイアプリ」をクリックします。（サインインを求めるダイアログが出た場合はサインインを行います。）
![02.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/633dd0ee-f759-a78b-883f-6c74c0245537.png)
・画面左上の「＋新しいアプリケーション」をクリックします。
![03.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/28c5e426-62d2-4520-d804-6e1cdd3fcacb.png)
・カスタム アプリ タイルにある「アプリの作成」ボタンをクリックします。
![04.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/e9b4942e-4fc2-0648-af13-bfab64998a14.png)
・アプリケーション名、URLを入力します。料金プランは「無料」を選択します。次に「作成」ボタンをクリックします。
・アプリケーションの作成が終わると画面はダッシュボードに切り替わります。

## デバイステンプレートの作成

![06.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/439b7d52-9351-d99f-bc03-2df22d4c967e.png)
・画面左側にある「デバイステンプレート」をクリックします。
![07.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/11aefc9f-86d8-8c0e-44a6-888822748272.png)
・画面左上の「＋新規」ボタンをクリックします。
![08.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/843e8be4-4e09-22b9-d795-e9896a062836.png)
・カスタムデバイステンプレートの作成内のIoTデバイスをクリックしてから、「次へ：カスタマイズ」ボタンをクリックします。
![10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/b68b7619-9738-463f-c9d7-7818bdba6e7b.png)
・デバイステンプレート名を入力し、「次：レビュー」ボタンをクリックします。
![12.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/2a30999a-74c1-9251-aa54-ac2ba5116f07.png)
・デバイステンプレートの確認画面に切り替わります。「作成」ボタンをクリックすると空のデバイステンプレートが作成されます。

## カスタムモデルの作成（テレメトリ・コマンドの設定）

![13.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/2dd7ca6a-655c-ef18-296d-df2dba5a9df6.png)
・モデルの作成の「カスタムモデル」をクリックします。
![14.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/cab79e81-47ec-85f4-87a7-dc114d4f9efb.png)
・「＋機能の追加」をクリックします。
![15.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/9c0ccdf3-982a-763c-7ff6-ff0bd8badb85.png)
・機能の追加ではデバイスから受け取るデータの設定を行います。「temperature」、「humidity」の2つのデータを受け取るように設定しました。「temperature」と「humidity」はセマンティックの種類と単位も設定します。機能の種類は「Telemetry]を選んでください。後「ledon」、「ledoff」を追加します。機能の種類は「Command」を選択してください。入力が完了したら「保存」をクリックします。

## ビューの編集（グラフなどダッシュボードの設定）

![16.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/10426707-bbc5-199e-fe14-06d7086a23fe.png)
・「ビュー」をクリックしてから「デバイスの視覚化」をクリックします。
![17.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/f97589a8-daa2-ddba-7905-ba12757ed4ee.png)
・タイルの追加から「折れ線グラフ」をドラッグして配置します。配置したタイルの右下をドラッグして横に1つ分広げます。タイルの右上にあるギアボタンをクリックして設定を行います。
![18.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/dc757b7a-13e9-c4b6-5618-24722baa78bb.png)
・表示範囲を「過去12時間」、間隔を「30分」に変更します。テレメトリの下にある「＋追加」をクリックして「temperature」、「humidity」を追加します。最後に「更新」ボタンをクリックします。
![19.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/4f2d2ac2-c20e-1e61-c9c2-a8094b2955f1.png)
・最後の既知の値タイルをドラッグして、折れ線グラフタイルの右側に配置します。ギアボタンをクリックして設定を行います。
![20.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/edcea0fe-6d95-547b-ea1e-420f5a783bf3.png)
・テレメトリの下にある「＋機能」をクリックして「temperature」、「humidity」を追加します。最後に「更新」ボタンをクリックします。
![21.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/c8d4db77-fd79-36a1-9ef7-2f185174568c.png)
・ここまででデバイステンプレートの設定が終わったので、保存を押します。そのあと戻るをクリックします。

## デバイステンプレートの公開

![22.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/0e7f0824-0606-fe8c-5b08-d2a61ece7cc8.png)
・設定が終わったデバイステンプレートは公開することで利用することができるようになります。「公開」をクリックします。変更があった場合には公開することで変更が反映されるので忘れずに公開しましょう。
![23.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/0cf82461-bf2d-1ea1-04ad-05fddd56944b.png)
・「公開」ボタンをクリックします。

## デバイスの作成

![24.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/6e049fae-5825-cc26-e4b2-b07a801e404c.png)
・デバイステンプレートが出来上がったらそれを元にデバイスを登録します。画面左側のデバイスをクリックします。右側に表示されたデバイステンプレートを選択します。画面上部の「＋新規」ボタンをクリックします。
![25.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/12e90df3-a5d9-f3d4-f842-4f1a7f9ca109.png)
・デバイス名は自由に付けられます。問題なければ自動で入るデバイステンプレート名+デバイスIDのままで大丈夫です。デバイスIDも自由に付けることができますが、一意にする必要があります。「作成」ボタンをクリックしてデバイスを作成します。
![26.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/b5f342db-9f47-a46d-a2cf-8a2aa7fcca3b.png)
・登録したデバイス名をクリックします。
![27.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/2e96f7b0-1688-7c77-481f-54de23a184df.png)
・デバイスから届くデータを表示する画面になりますが、現時点ではまだデバイスの接続は出来ていないので表示されません。接続に必要な情報を表示するために画面上部の「接続」をクリックします。
![28.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/5ef0c182-53db-c8c0-fb00-d48461ce5e5f.png)
・デバイス側に設定する3つの項目（IDスコープ、デバイスID、主キー）をメモします。メモができたら「閉じる」ボタンをクリックします。

ここまでがIoTCentralポータルで行う作業になります。

# プログラムの修正
・Program.csをソリューションエクスプローラーで開いて修正します。

```
public class Program
    {

        const string ssid = "your SSID";
        const string password = "your Password";
        
        const string dspAddress = "global.azure-devices-provisioning.net";
        
        const string idscope = "xxxxxxxxx";
        const string registrationid = "xxxxxxxx";
        const string saskey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

　　　　　　　　　　　　・
　　　　　　　　　　　　・
　　　　　　　　　　　　・
```

・SSID、Passwordはご自分の環境に合わせて修正してください。
・ID Scope、RegistrationID、SAS Keyは先ほどメモをしたデバイス接続の内容に合わせて修正します。registrationidはデバイスIDに、saskeyは主キ―になります。

・プログラムを実行するとセンサーからの温湿度データがIoT Centralに送信されます。
![01.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/7877ddee-d29d-dbb9-d3f3-34c892bbfd93.png)
・IoT Centralアプリケーションでデバイスを表示するとアップロードしたデータをグラフ表示します。
![03.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/51de189e-d99a-a2cc-d048-43fd650bdfca.png)
・IoT Centralアプリケーションでデバイスを選択してコマンドタブに切り替えます。「ledon」、「ledoff」の実行ボタンをクリックするとデバイスのLEDをオンオフすることができます。
![02.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62606/b35ca612-b53e-6807-dc96-7492aea390de.png)