阿里云物联网平台web端,可视化开发,简单实例

时间:2024-04-05 22:04:46

Web可视化

阿里云物联网平台提供了一种可快速开发的web服务,只需要拖入一些控件,做一些配置就可以完成一个简单的物联网web应用,对单一场景,需求简单的项目非常实用。

首先进入物联网平台,打开开发者服务,选择IoT Studio,然后点击新建项目。

阿里云物联网平台web端,可视化开发,简单实例

 

点击创建空白项目,下面解决方案中的是已经做好的可以直接使用,只需要改一下配置

阿里云物联网平台web端,可视化开发,简单实例

输入项目名称

阿里云物联网平台web端,可视化开发,简单实例

创建好后进入iot studio项目中,点击设备管理中的产品,可以关联我们在我联网接入平台中创建过的设备,也可以在这里直接创建设备。

阿里云物联网平台web端,可视化开发,简单实例

点击推荐中的web可视化开发,选择新建web应用

阿里云物联网平台web端,可视化开发,简单实例

选择需要的导航布局,然后点击配置按钮,在右侧的栏目中进行基本设置

阿里云物联网平台web端,可视化开发,简单实例

然后点击最左边导航栏中的组件,根据相应需求布置好页面,如下图:

阿里云物联网平台web端,可视化开发,简单实例

阿里云物联网平台web端,可视化开发,简单实例

然后点击视图页面中的控件,左边导航栏就会显示相应控件的配置信息,可以改变控件样式,以及在交互选项中配置控件与那个设备关联

阿里云物联网平台web端,可视化开发,简单实例

在交互中选择新增交互

阿里云物联网平台web端,可视化开发,简单实例

选择控件的事件以及动作,然后点击选择链接,这里的选择是关系到控件控制和现实这边数据的地方,我这边现在事件为点击,动作为设置设备属性。然后点击配置设备

阿里云物联网平台web端,可视化开发,简单实例

然后选择相应的产品,以及设备以及对应,由于放个选择的是开关按钮,所以默认值属性只有开启关闭两种状态

阿里云物联网平台web端,可视化开发,简单实例

将所有控件配置好后就可以点击预览查看效果了

阿里云物联网平台web端,可视化开发,简单实例

然后就是保存和发布,发布后的页面需要绑定我们自己的域名才可以让其他人看到,如果是默认域名只有登录项目所在的阿里云账户才可以查看