IoT Application KitとCloudscapeを使ったWebアプリを作ってみました。

IoT Application Kitとは​

IoT Application Kitとは

IoT Application Kit is a development library for creating web applications to visualize industrial data.

SiteWiseやTwinMakerをデータソースとして、独自ダッシュボードを作成するためのReactコンポーネントが提供されています。

Cloudscapeとは​

Cloudscapeとは

An open source design system for the cloud Cloudscape offers user interface guidelines, front-end components, design resources, and development tools for building intuitive, engaging, and inclusive user experiences at scale.

AWSが提供するUIコンポーネント集です。

IoT Application KitのexampleではMaterial-UIが、aws-iot-app-kit-bottling-line-demo ではCloudscapeの前身のAWS-UIが使用されていますが、Cloudscapeを使った形式で挑戦してみました。

↓はIoT Application Kitのexampleの画面

Amplifyを使うと、AWSと連携したWebアプリをとても簡単に作成できます。 AWSのバックエンドをほとんど意識せず、フロントエンドのコーディングに集中できるのがとても嬉しいです。

Amplifyの提供するライブラリーの中にPubSubがありますので、認証機能と合わせて試してみました。

DocusaurusはOSSで公開されている静的サイトジェネレーターです。開発元はMetaです。 GitHub Pages、GitHub Actionsと組み合わせることで、ほんとに簡単にサイトが構築できましたので手順をご紹介します。

Dockerはサーバー側のDockerデーモンとクライアント側のDocker CLIで構成されています。Windows上でDocker環境を構築する場合は、Docker Desktopなどを使用しますが、裏側でWSL2上のDockerデーモンをWindowsのDocker CLIから操作しています。

Docker CLIのバイナリは個別には公開されていないと思いますが、GitHubに公開されているソースから自前でビルドしてみました。