1 はじめに
CX事業本部製造ビジネステクノロジー部の平内（SIN）です。
IoT Application Kit は、IoTデータ表示のための、フロントエンド コンポーネントとユーティリティで構成されるオープンソース ライブラリです。
デフォルトで、AWS IoT SiteWise及び、AWS IoT TwinMaker からデータを取得できます。
https://github.com/awslabs/iot-app-kit
下記は、今回実装したWebアプリ（赤枠内）です。背景に表示されているのは、モニタリングポータルのダッシュボードです。同じ内容の折れ線グラフが表示されていることを確認できます。
本稿では、サンプルとして、最低限の実装をイメージしたため、認証や、グラフの高度な表示には触れていない事をご了承ください。
2 データ送信
表示するためのデータをSiteWiseに送信している手順です。
(1) モデル作成
モデルは、測定値として、SampleValue1と、SampleValue2だけを定義しました。
(2) アセット作成
上記モデルをもとに作成したアセットです。 ここで、生成されたアセットIDとプロパティIDをメモしておきます。
(3) データ送信
batch_put_asset_property_valueを使用して、0から100のランダムな数値を送信しているコードです。
アセットIDとプロパティIDを指定して送信しているので、アセット側でのエリアスの関連付けは、必要はありません。
import boto3
from uuid import uuid4
import random
import time
from datetime import datetime
counter = 60 # 送信回数
wait_sec = 1 # 送信間隔
asset_id = "2c78fb61-8b47-48f6-9af3-06011ae87509"
property_id_list = [
"5b6c92f0-70ca-43eb-9052-ee3297df7b68",
"8ced2253-97d0-44f9-b732-5b66a43c0e2c",
]
def put_asset_property(client, asset_id, property_id, value):
client.batch_put_asset_property_value(
entries=[
{
"entryId": str(uuid4()),
"assetId": asset_id,
"propertyId": property_id,
"propertyValues": [
{
"value": {"doubleValue": value},
"timestamp": {
"timeInSeconds": int(datetime.now().timestamp()),
"offsetInNanos": 0,
},
"quality": "GOOD",
}
],
}
]
)
def main():
client = boto3.client("iotsitewise")
for i in range(counter):
for property_id in property_id_list:
value = random.uniform(0, 100)
put_asset_property(client, asset_id, property_id, value)
print("[{}] {}".format(i, value))
time.sleep(wait_sec)
if __name__ == "__main__":
main()3 グラフ表示
IoT Application KitをReactから利用する手順です。
(1) React初期化
myappと言う名前でプロジェクトを生成しました。
% npx create-react-app --template typescript myapp
% cd myapp(2) ライブラリのインストール
ReactでSiteWiseのデータから折れ線グラフを表示するための最低限必要なライブラリは、以下になります。
% npm install @iot-app-kit/react-components
% npm install @iot-app-kit/source-iotsitewiseなお、上記だけだと、エラーとなったため
Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Cannot find module 'sass'sassもインストールしました。
% npm install sass(3) Reactコンポーネントの作成
IoT Application Kitでデータ取得のための、queryは、@aws-sdk/client-iotsitewise のインスタンスで初期化します。
折れ線グラフを表示するには、LineChartコンポーネントが用意されています。 query.timeSeriesDataで、表示するアセットの属性を指定し、viewportでは、表示期間が指定されています。
App.tsx
import "@iot-app-kit/components/styles.css";
import { initialize } from "@iot-app-kit/source-iotsitewise";
import { LineChart, WebglContext } from "@iot-app-kit/react-components";
const region = "ap-northeast-1";
const accessKeyId = "xxxxxxxxxxxxx";
const secretAccessKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
const { query } = initialize({
awsCredentials: {
accessKeyId: accessKeyId,
secretAccessKey: secretAccessKey,
},
awsRegion: region,
});
const assetId = "2c78fb61-8b47-48f6-9af3-06011ae87509";
const propertyIdList = [
"5b6c92f0-70ca-43eb-9052-ee3297df7b68",
"8ced2253-97d0-44f9-b732-5b66a43c0e2c",
];
function App() {
return (
<div style={{ height: "400px" }}>
<LineChart
queries={[
query.timeSeriesData({
assets: [
{
assetId: assetId,
properties: [
{
propertyId: propertyIdList[0],
},
{
propertyId: propertyIdList[1],
},
],
},
],
}),
]}
viewport={{
duration: "60s",
}}
/>
<WebglContext />
</div>
);
}
export default App;4 最後に
今回は、IoT Application Kitで、折れ線ブラフを表示してみました。
AWS IoT SiteWiseでは、モニタリングポータルで、簡単にデータを表示できますが、その表現力には限界があります。
よりニーズに合わせたビューが必要になった場合、IoT Application Kitは、強い味方になると思います。
18
