IoT StudioでWebページを作ってみました

こんにちは! はくです。

IoT StudioでWebページを作って見ました。
オフィスの温度を確認、ライトをコントロールするシンプルなページです。
電球をダブルクリックしたら、ライトデバイスをon/offする、温度をリアルタイムに表示することを下記のように実現できました。

f:id:sbc_haku:20200123165009g:plain

その内容を紹介します。

環境紹介

Alibaba Cloudの中国サイトです。IoT Studioは日本サイトにはリリースしていません。

プロダクト紹介

IoT Studio(以前のLink Develop)は、Alibaba Cloudが提供するIoT開発ツールです。Webページ開発、サービス開発、モバイルアプリ開発機能を提供します。

特徴としては、ドラッグアンドコンフィグで多くの機能を開発できること、そして、Alibaba Cloud IoT Platformと連動できること。

IoT Studioを利用すれば、IoTアプリの開発工数を大幅に削減できます。 

手順

1.デバイスを定義

※デバイスの作成方は別記事を参照。


2.IoT Platformのコンソール画面でIoT Studioのプロジェクトを作成

f:id:sbc_haku:20200123172518p:plain

3.Web可視化開発のWeb Appを作成

f:id:sbc_haku:20200123172622p:plain

4.ページを作って、背景をOfficeの画像にする。デフォルトのHome-pageでも良い。

f:id:sbc_haku:20200123172842p:plain

5.文字、図形、画像を使って、電球や、温度計の枠を設置

f:id:sbc_haku:20200123173031p:plain

6.電球イメージの動作を定義する

・電球offのイメージをクリックすると、電球onのイメージを表示し、デバイスのプロパティをonにする

・電球onのイメージをクリックすると、電球offのイメージを表示し、デバイスのプロパティをoffにする

f:id:sbc_haku:20200123173420p:plain

f:id:sbc_haku:20200123173432p:plain

7.温度文字をデバイスの温度に紐付く

f:id:sbc_haku:20200123173733p:plain

8.電球イメージの配置を調整後、ページをプレビュー

f:id:sbc_haku:20200123173649p:plain

9.プレビューページで動作確認する

f:id:sbc_haku:20200123165009g:plain

・電球の切り替えは無事動作できている

・温度もリアルタイムに変わっている

・電球のon/offの通信履歴は確認できている
※IoT Platformの画面でデバイス通信結果を確認

f:id:sbc_haku:20200123174500p:plain


まとめ

即時にIoT Webページを作成し、公開できるのは非常に面白かったです。

今回は仮想デバイスを使ったが、実デバイスを利用するともっと面白いでしょうか。

IoT Studioはとても便利です、ぜひ触って見てください。