obniz/AzureIoTCentralハンズオン

obnizで取得したデータをIotCentralへ表示してみます


![スクリーンショット 2021-07-31 12.13.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/cb602705-e987-1105-30a9-194ec8a41285.png)

### アジェンダ

【obnizパート】

- obnizOSを入れよう
- node.jsでデータを出してみよう

【IoT Centralパート】

- azure iot centralにデータを入れてみよう
- ダッシュボードで可視化してみよう


【もくもくパート】

- カスタマイズしよう


### 全体構成

![Untitled Diagram (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/7a916706-b6f1-553d-0abf-3932671c2265.png)


この記事ではESP32＋センサとして[Algyan6周年基板](https://algyan.connpass.com/event/193890/)を使用していきます。



### obnizOSを入れよう

obnizOSを使う方は、こちらの記事を参考にEsp32にbnizOSを入れましょう
https://qiita.com/wicket/items/b93c6dd009f76fe5dff0


obnizBoardを使う方はこちらの手順でWiFi設定が必要です。
https://obniz.com/ja/doc/reference/board-1y/quick-start/

### node.jsでデータを出してみよう

repl.itを使っていきます（ローカルに環境を作れる人はそれでも大丈夫です）
https://replit.com/
![スクリーンショット 2021-07-30 17.01.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/86f33471-fb89-c73c-692c-7275705e063a.png)

サインイン or サインアップし、新規replで登録します
![スクリーンショット 2021-07-30 17.02.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/7681f0cd-75b4-7fe3-9b72-d196e0f8e611.png)



エディタがでてくるので、こちらで書いていきます。
![スクリーンショット 2021-07-30 17.03.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/f9cfd325-c537-0a07-a497-03b360d3047c.png)


左側のpackagesを選び、obnizで検索してaddします

![スクリーンショット 2021-07-30 17.03.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/e955e7e0-3dc9-68e9-36c7-f657ec17737c.png)


コマンドが走り、Filesに戻るとpackage.jsonとpackage-lock.jsonができています。
![スクリーンショット 2021-07-30 17.11.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/7410a922-0ffb-f2cb-4845-a2a161d3c36b.png)


obnizのプログラムを書いていきます。

```javascript
const Obniz = require("obniz");
const obniz = new Obniz("7877-4454");

obniz.onconnect = async ()=>{
    console.log("obniz connected");
    
    // algyan6周年基板参加者用
    let button = obniz.wired("Button",{signal:35});
    button.onchange = async (pressed)=>{
      const state = pressed ? "none" : "push" ; 
      console.log(`switch changed to ${state}`);
    }


    // obnizBoard参加者用
    // obniz.switch.onchange = async (state) => {
    //   //state = none / push / left / right
    //   console.log(`switch changed to ${state}`);
    // };

};

```

中央の上部のrunボタンを押して実行し、スイッチを押して見ます。
これでobnizが使えることがわかりました！


![スクリーンショット 2021-07-31 12.04.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/966e5186-c8b6-e668-81d3-305dbb7d7f66.png)



### azure iot centralにデータを入れてみよう


[azureにログイン](https://portal.azure.com/#home)し、IoT Centralと検索してメニューに行きます。
![スクリーンショット 2021-07-30 17.33.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/c8f9da4d-631e-289a-5c1e-e9de2a3490f5.png)



新規ボタンを押してアプリを作成していきます。
※アカウントの種類によっては(？)、クレジットカード登録が必要です

項目をこちらのように適当に入れます。

![スクリーンショット 2021-07-30 17.34.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/e7802531-8ff8-9639-1dea-02c91ad07297.png)


デプロイ完了まで待ちましょう。
デプロイが終わったらリソースに移動します。

![スクリーンショット 2021-07-30 17.35.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/7d054fd3-bf0c-2e9c-e2d6-fa2cdb3ccfef.png)



この画面ではやることがないので、そのままIoTCentralアプリケーションURLをクリックします。

![スクリーンショット 2021-07-30 17.37.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/ef692f24-62a9-8de0-162d-44d02b323782.png)


IoT Centralの画面までたどり着きました

![スクリーンショット 2021-07-30 17.43.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/818bb412-ad08-edea-ee4b-fcad20c6e1eb.png)


まず最初はデバイステンプレートを作成します。
デバイステンプレート＞新規をクリックしていきます
![スクリーンショット 2021-07-30 19.02.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/5ae01c8d-c42a-58b5-3fa7-aea7d2ccaeff.png)


カスタムデバイステンプレートより、obnizDeviceを追加します

![スクリーンショット 2021-07-30 19.02.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/44d3d108-c311-267f-c088-ca6e3ffcb49c.png)
![スクリーンショット 2021-07-30 19.03.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/e7a998e0-aadc-b37e-2836-03c0607f3e04.png)


obnizDeviceが出来上がりました

![スクリーンショット 2021-07-30 19.04.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/099f627c-e0c3-2019-4962-0f06a7db5455.png)


カスタムモデルで機能を追加します

switch / Telemetry / state 

![スクリーンショット 2021-07-30 19.04.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/cdfb25b3-a76c-9b56-307f-1e141a3ee6c9.png)

展開ボタンを押したときのパラメーターも忘れずに登録します
![スクリーンショット 2021-07-30 19.18.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/ad81265e-1469-49ee-10bb-5273a34aeca7.png)


保存し、その後公開します。保存と公開の2段階あるので気をつけてください

![スクリーンショット 2021-07-30 19.06.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/49015fb1-cb41-6a1f-8c00-384ddc208042.png)

デバイスメニューでテンプレートが出てくるので、そこにデバイスを追加します
デバイス＞新規よりデバイスを追加します。

![スクリーンショット 2021-07-30 19.07.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/470ec229-1de0-2121-1203-fdb913d087aa.png)

デバイスIDを控えます（①）※ここでコピーしないとめんどくさい
デバイス名は自由ですが、わかりやすいようにobnizIDにしました

![スクリーンショット 2021-07-30 19.08.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/fa03d5f7-40df-60c2-64de-294d66dd36ee.png)

デバイスができました。
![スクリーンショット 2021-07-30 19.08.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/c9e3b94f-4137-a32b-3ebc-b5224c44a130.png)


管理＞デバイス接続にてIDスコープを控えます（②）
![スクリーンショット 2021-07-30 18.21.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/d026f04c-8164-a8a6-3181-4d01bdc925c4.png)



SAS-IoT-Devicesをクリックし、主キーを控えます（③）

![スクリーンショット 2021-07-30 18.24.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/c6adc033-bf73-4f6a-7b47-e4eacc83f848.png)


これで必要な情報は揃ったのでプログラムを書いていきます。


repl.itでpackagesで`azure-iotcentral-device-client`を追加します。

ちょっと長いので一呼吸おいてお茶でも入れてきましょう🍵

![スクリーンショット 2021-07-30 18.27.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/4eee939d-bdf4-7c93-fd48-ea3e2b44f42b.png)



プログラムを書きます

```javascript
const Obniz = require("obniz");

const iotCentral = require('azure-iotcentral-device-client');


const deviceId = '2l5m66k9lsm'; //①

const scopeId = '0ne00354744'; //②

const sasKey = '5EulYy/0jjBeSM/7sDI9h5iQ9TzBwZXd7C+5qvPjqpj/xPAvo+7UGZ9D9/L8PwOtr4DaUUk6ppLblCTbbdupKg==';//③


(async () => {

  const iotc = new iotCentral.IoTCClient(deviceId, scopeId, 'symm_key', sasKey);
  
  console.log("Connecting to IoT Central...");
  await iotc.connect();
  console.log("Connected");
  
  const obniz = new Obniz("7877-4454");
  
  obniz.onconnect = async () => {
    console.log("obniz connected");

    // algyan6周年基板参加者用
    let button = obniz.wired("Button", {signal: 35});
    button.onchange = async (pressed) => {
      const state = pressed ? "none" : "push";
      console.log(`switch changed to ${state}`);
      await iotc.sendTelemetry({
        "switch": state,
      });
    }
    
    // obnizBoard参加者用
    // obniz.switch.onchange = async (state) => {
    //   //state = none / push / left / right
    //   console.log(`switch changed to ${state}`);
    //   await iotc.sendTelemetry({
    //     "switch": state,
    //   });
    // };
    
  };
})();
```


送るとデバイス＞生データにデータが溜まっていることがわかります。

![スクリーンショット 2021-07-30 19.28.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/15f912eb-b640-4ee1-14d6-ed002d6cba28.png)


### ダッシュボードで可視化してみよう

それではこれを可視化していきましょう

ダッシュボードへ行きます


![スクリーンショット 2021-07-30 17.43.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/e5684255-5045-da59-53a0-f3a1fcd2037d.png)


編集を押して、「最後の既知の値」を選んで下部のタイルの追加を押すと、右側に新しい枠が出てきます。

![スクリーンショット 2021-07-30 19.28.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/c0fc76df-2c13-c350-84e4-dc51c22f8c1c.png)


設定ボタンを押してプロパティを設定します。


![スクリーンショット 2021-07-30 19.28.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/84eb488b-f6c7-cb3d-f0a2-514c0e0feeaf.png)


保存後、プログラムを実行させて、表示させてみましょう。
30秒に1度更新？ぐらいです。


ダッシュボードをきれいにしたり、
状態の履歴にしてみたり、
状態グラフにしてみたりしてみましょう
![スクリーンショット 2021-07-30 19.32.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227015/bec417c8-3558-c5bf-cbbe-65748bb3e76c.png)


＜モクモク＞

- stateだけだと悲しいので、数字も追加してみましょう。
    - algyan6周年基板の人は照度が取れます

```javascript
   obniz.ad34.start( async (voltage)=>{
      console.log(`voltage changed to ${voltage}`);
      await iotc.sendTelemetry({
        "illuminance": voltage,
      });
    });
```

- かっこいいダッシュボードを作ってみましょう
- 分析を使ってみましょう
- ルールをついかしてみましょう
- コマンドを使ってブザーを鳴らしたり、ディスプレイに文字を表示したりしてみましょう