Web APP 可視化の設定

note

この文書は AI によって翻訳されています。内容に不正確な点や改善すべき点がございましたら、文書下部のコメント欄または以下の Issue ページにてご報告ください。
https://github.com/Seeed-Studio/wiki-documents/issues

Web APP 可視化の設定

デバイスがHeliumネットワークに接続され、デバイスからHeliumネットワークを経由してMicrosoft Azure IoT Hubsにデータが流れるようになったので、このデータを分析し、可視化する方法を探ってみましょう。

環境準備

この手順を使用するには、事前にGitとAzure CLIをコンピュータにダウンロードして設定してください。

ここではGitのインストールと設定については説明しませんが、WindowsおよびMacOSシステム向けのAzure CLIのインストールに焦点を当てます。

Azure コマンドラインインターフェイス (CLI) は、Azure に接続し、Azure リソース上で管理コマンドを実行するためのクロスプラットフォームのコマンドラインツールです。対話型のコマンドラインプロンプトやスクリプトを使用して、ターミナルを通じてコマンドを実行できます。

対話型で使用する場合、まずWindowsのcmd.exeやLinuxまたはmacOSのBashなどのシェルを起動し、シェルプロンプトでコマンドを入力します。繰り返しのタスクを自動化するには、選択したシェルのスクリプト構文を使用してCLIコマンドをシェルスクリプトに組み立て、そのスクリプトを実行します。

インストール - Windows

Windowsの場合、Azure CLIはMSIを介してインストールされ、Windowsコマンドプロンプト（CMD）またはPowerShellを通じてCLIにアクセスできます。Windows Subsystem for Linux (WSL) にインストールする場合、Linuxディストリビューション用のパッケージが利用可能です。

現在のAzure CLIのバージョンは2.37.0です。最新リリースに関する情報はリリースノートをご覧ください。インストール済みのバージョンを確認し、更新が必要かどうかを確認するには、az versionを実行してください。

PowerShellを使用してAzure CLIをインストールすることもできます。管理者としてPowerShellを開始し、以下のコマンドを実行してください：

note

PowerShellは管理者として実行する必要があります。

管理者としてPowerShellを開始し、以下のコマンドを実行してください：

$ProgressPreference = 'SilentlyContinue'; Invoke-WebRequest -Uri https://aka.ms/installazurecliwindows -OutFile .\AzureCLI.msi; Start-Process msiexec.exe -Wait -ArgumentList '/I AzureCLI.msi /quiet'; rm .\AzureCLI.msi

これにより、Windows用の最新バージョンのAzure CLIがダウンロードおよびインストールされます。すでにバージョンがインストールされている場合、インストーラーは既存のバージョンを更新します。

特定のバージョンをインストールするには、-Uri引数をhttps://azcliprod.blob.core.windows.net/msi/azure-cli-<version>.msiに置き換え、バージョンセグメントを変更してください。利用可能なバージョンはAzure CLIリリースノートで確認できます。

note

インストールが完了したら、Azure CLIを使用するにはPowerShellを再度開く必要があります。

これで、WindowsコマンドプロンプトまたはPowerShellからazコマンドを使用してAzure CLIを実行できるようになります。

インストール - MacOS

macOSプラットフォームの場合、homebrewパッケージマネージャを使用してAzure CLIをインストールできます。Homebrewを使用すると、CLIのインストールを最新の状態に保つことが容易になります。CLIパッケージはmacOSバージョン10.9以降でテストされています。

現在のAzure CLIのバージョンは2.34.1です。最新リリースに関する情報はリリースノートをご覧ください。インストール済みのバージョンを確認し、更新が必要かどうかを確認するには、az versionを実行してください。

macOSでAzure CLIをインストールするには、brewリポジトリ情報を更新し、installコマンドを実行します：

brew update && brew install azure-cli

note

Azure CLIはHomebrewの[email protected]パッケージに依存しており、これがインストールされます。

Microsoft Azure CLI にログイン

初めて Microsoft Azure CLI をコンピュータで使用する際には、まず IoT ハブにログインする必要があります。コマンドウィンドウで az login を入力するとログインウィンドウが表示されます。この時点でログイン操作を完了してください。

CLI がデフォルトのブラウザを開ける場合、認証コードフローを開始し、デフォルトのブラウザで Azure サインインページを読み込みます。

そうでない場合は、デバイスコードフローを開始し、https://aka.ms/devicelogin にアクセスして、ターミナルに表示されるコードを入力するよう指示されます。

ブラウザでアカウントの資格情報を使用してサインインしてください。

Microsoft Azure CLI を Microsoft Azure IoT Hub に接続

コンシューマーグループは、イベントストリームへの独立したビューを提供し、アプリや Azure サービスが同じ Event Hub エンドポイントから独立してデータを消費できるようにします。このセクションでは、Web APP がデータを読み取るために使用する IoT ハブの組み込みエンドポイントにコンシューマーグループを追加します。

IoT ハブにはいくつかのデフォルトのアクセスポリシーが作成されています。その中の1つがサービスポリシーで、これは IoT ハブのエンドポイントを読み書きするための十分な権限を提供します。以下のコマンドを実行して、サービスポリシーに準拠した IoT ハブの接続文字列を取得します：

az iot hub connection-string show --hub-name ${YourIotHub} --policy-name service

ここで、環境変数 ${YourIotHub} は Azure IoT Hub の名前を示します。以下の例を参照してください。

接続文字列は以下のような形式になります：

"HostName={YourIotHubName}.azure-devices.net;SharedAccessKeyName=service;SharedAccessKey={YourSharedAccessKey}"

サービス接続文字列をメモしてください。このチュートリアルの後半で必要になります。

note

何らかの理由で Azure CLI をコンピュータにインストールできない場合は、IoT ハブパネルから直接 Azure CLI 環境で bash を実行することを検討してください。これにより、次のステップを進めることができます。

上記の az コマンドをここで直接入力して接続文字列を取得できます。

Web APP サービスフレームワークのダウンロード

使用したいセンサーの種類に応じて、対応するライブラリをダウンロードしてください。

センサータイプ	ダウンロードアドレス
Wio Terminal 内蔵光センサー	ダウンロード
Wio Terminal 内蔵 IMU センサー	ダウンロード
土壌湿度センサー	ダウンロード
VOC および eCO2 ガスセンサー (SGP30)	ダウンロード
温湿度センサー (SHT40)	ダウンロード
Vision AI モジュール	ダウンロード

お好みのエディタで Web APP ライブラリを開いてください。以下は VS Code で表示したファイル構造の例です：

以下のファイルを確認してください：

Chart-device-data.js：クライアント側スクリプトで、Web ソケットをリッスンし、各 DeviceId を追跡し、各デバイスの最新50ポイントの受信データを保存します。その後、選択されたデバイスデータをチャートオブジェクトにバインドします。
Index.html：Web ページの UI レイアウトを処理し、クライアント側ロジックに必要なスクリプトを参照します。
Event-hub-reader.js：サービス側スクリプトで、指定された接続文字列とコンシューマーグループを使用して IoT ハブの組み込みエンドポイントに接続します。受信メッセージのメタデータから DeviceId と EnqueuedTimeUtc を抽出し、server.js に登録されたコールバックメソッドを使用してメッセージを中継します。
Server.js：サービス側スクリプトで、Web ソケットと Event Hub ラッパークラスを初期化します。このクラスが Web ソケットに受信メッセージをブロードキャストするために使用するコールバックを提供します。

Web APP の環境変数を設定する

IoT ハブからデータを読み取るために、Web APP は IoT ハブの接続文字列と、読み取るべきコンシューマーグループの名前を必要とします。これらの文字列は、以下の server.js のコード行でプロセス環境から取得されます。

const iotHubConnectionString = process.env.IotHubConnectionString;
const eventHubConsumerGroup = process.env.EventHubConsumerGroup;

このステップには2つの方法がありますので、より一般的な方法から始めましょう。

最初の方法。以下のコマンドを使用して、コマンドウィンドウで環境変数を設定します。プレースホルダーの値を、IoT ハブのサービス接続文字列と、以前に作成したコンシューマーグループの名前に置き換えてください。文字列を引用符で囲まないでください。

set IotHubConnectionString = YourIoTHubConnectionString
set EventHubConsumerGroup = YourConsumerGroupName

2番目の方法では、コードを直接変更することができます。例えば、MacOS で環境変数を追加するのが面倒な場合に適しています。

エディタで server.js ファイルを開き、作成したコンシューマーグループの名前と step2 で取得した接続文字列に従ってコードを変更してください。以下の図を参考にしてください。

Web APP を実行する

以前の wiki の内容に従ってコードをアップロードしてください。デバイスが稼働してデータを送信していることを確認してください。

コマンドウィンドウで以下のコマンドを実行して、参照パッケージをダウンロードおよびインストールし、ウェブサイトを開始します。

npm install
npm start

コンソールに、Web APP が IoT ハブに正常に接続し、ポート 3000 でリスニングしていることを示す出力が表示されるはずです。

Azure IoT ハブからのデータを表示するウェブページを開く

ブラウザで http://localhost:3000 を開きます。

左上のリスト選択ボックスでデバイス ID 番号を選択します。次のデータセットが送信されるまで待機し、データ変化の折れ線グラフを観察することができます。