编辑设备 App 面板界面


编辑设备 App 面板界面

我们已经实现了设备和云平台的通信,并通过规则引擎和定时任务快速完成了一些云端功能,现在,我们希望给设备的最终用户提供一款 App,用于查看设备数据和控制设备功能。

ThingsCloud 不仅是开放的物联网设备接入平台,同时也是零代码应用开发平台,不论您是设备运营社,还是解决方案商,都可以在极短的时间内快速生成物联网应用,包括 SaaS 应用和手机 App。

在生成手机 App 之前,您需要先来设计 App 上不同设备的展示界面。

为设备绑定设备类型

要使用 App 零代码开发功能,首先我们要创建设备类型,并将设备关联到设备类型中,如下图:

设备类型

为设备类型添加功能定义

接着,我们以温湿度传感器为例,在设备类型的功能定义中,添加设备属性,如下图:

设备类型

将温度、湿度作为 设备上报 类型的属性,添加到设备类型中。如下图:

设备类型

同样的,我们再添加一个亮度调节的 云端下发 属性,和两个设备开关量状态的 设备上报 属性,如下图:

设备类型

设备类型

编辑设备 App 界面

有了功能定义中的属性定义,ThingsCloud 便可以读懂设备的功能,于是我们就可以设备类型的应用配置中,进入 App 设备界面编辑器,为该类设备编辑展示界面。

articles/2022/20230107182044_d4785c69abf8b10fc6363c983c7e5440.png

我们先添加一个数值展示类的组件,用来显示温度、湿度的实时数值。如下图:

设备App设计

设备App设计

然后我们添加一个数值控制类的组件,通过在 App 上的滑动交互来向设备下发 LED 亮度值。如下图:

设备App设计

接着我们放置一个开关量展示类的组件,关联到设备的两个风机状态属性,通过右侧的样式设置,我们可以随意修改按钮的图标样式。如下图:

设备App设计

大功告成,不用编写一行代码,设备 App 界面开发完毕。

设备App设计

以此类推,您可以为每一类设备编辑各不相同的 App 界面。