从零开始搭建物联网云平台02-产品遥控器设计

从零开始搭建物联网云平台02-产品遥控器设计

很多产品中都需要一个App或小程序来控制硬件，目前2B的物联网平台通常是提供SDK让客户自行开发App。但在面向个人的物联网云平台中，这种做法会增大个人开发的难度，当然这种做法也会保留，这里不做讨论。针对这个痛点，IoTechn决定设计产品遥控器服务，通过简单的配置，即可将数据、命令和组件绑定在一起。配合上一些布局设定，让用户可以快速设计出一款产品遥控器。最后前端根据用户配置动态渲染出来。

数据库设计

首先，数据库中应该留存一个组件库，这个组件库信息无权限，完全透明，属于公用的。组件有公有属性，即所有组件的共同点，这些公有属性可以直接放在主表中。其次，不同的组件有不同的属性，比如按钮和下拉框他们肯定有不同的属性。所以需要一张组件库属性表。这样我们就可以先定好两张表：iot_controller_component_lib，iot_controller_component_lib_attr。

有了组件库之后，我们要为每个遥控器增加多个组件。所以理所当然的有一张遥控器-组件关联表（iot_controller_component）。每个组件有许多属性，这些属性的值是组件特有的，所以我们需要一张表来保存属性的值即：iot_controller_component_attr。

最后，在前文提到过，一个产品可以定义多个遥控器，所以我们还需要产品-遥控器表，即：iot_product_controller

iot_controller_component_attr 中 component_id & comoponent_lib_attr_id 是组合唯一键，表示一个组件属性由标准库属性和其关联的组件决定。

接口设计

Developer端接口主要是以CRUD为主。这里不一一列举

@HttpMethod(description = "遥控器下创建组件")
public String createComponent(
        @NotNull @HttpParam(name = "controllerId", type = HttpParamType.COMMON, description = "遥控器Id") Long controllerId,
        @NotNull @HttpParam(name = "componentLibId", type = HttpParamType.COMMON, description = "组件库Id") Long componentLibId,
        @NotNull @HttpParam(name = "styleMode", type = HttpParamType.COMMON, description = "样式模式，前端解释") Integer styleMode,
        @HttpParam(name = "style", type = HttpParamType.COMMON, description = "样式") String style,
        @HttpParam(name = "title", type = HttpParamType.COMMON, description = "标题", valueDef = "未命名组件") String title,
        @HttpParam(name = "sort", type = HttpParamType.COMMON, description = "排序", valueDef = "0") Integer sort,
        @HttpParam(name = "attrList", type = HttpParamType.COMMON, description = "属性JSON", valueDef = "[]") String attrListStr,
        @NotNull @HttpParam(name = "developerId", type = HttpParamType.DEVELOPER_ID, description = "开发者Id") Long developerId) throws ServiceException;

里面 style，是该组件的样式，遵循CSS语法。attrList为组件特殊属性，以JSON的形式传递，后端做强校验，也不会传错。

动态渲染

组件库是IoTechn这边维护，估计也不会太多。动态渲染使用的方法也比较笨，但是比较稳。

<scroll-view :style="[{height: 'calc(100%-' + (44 + statusBarHeight) + 'px)'}]">
     <view v-for="(item, index) in componentList" :key="index">
        <button v-if="item.componentIdTag === 'button'" :style="item.attr.style" @click="sendCmd()" :type="item.attr.type.value" >{{ item.attr.content ? item.attr.content.value : '' }}</button>
     </view>
</scroll-view>

通过对组件列表进行疯狂if-else，将组件特有属性附加上去的方式进行动态渲染，此处只是暂定思路，后面具体实现可能还会更变。

页面设计

P1.一个产品的多个遥控器

P2.一个遥控器的多个组件+动态渲染

P3.遥控器组件的编辑新增抽屉