[发明专利]一种实时预览生成智能设备控制面板的方法及系统

说明书

本申请公开了一种实时预览生成智能设备控制面板的方法，包括：制定语义化的DSL描述Web端至React Native端的组件样式、组件控制功能以及组件联动逻辑的映射关系；实时传输所述Web端至所述React Native端DSL描述信息；所述React Native端生成能够实时解析所述DSL描述信息的控制面板；所述React Native端在实时预览开发完毕后打包并最终输出上线。本申请则提供了一种实时预览生成智能设备控制面板的能力，从而生成一个无需技术人员介入的智能设备控制面板。帮助B端客户甚至C端消费者能够自行搭建出自己心目中最终想要达成的一个智能设备控制面板。

技术领域

本申请涉及智能家居领域，具体而言，涉及一种实时预览生成智能设备控制面板的方法。

背景技术

目前，智能设备基本上都是通过手机app进行控制，以下本申请统称为“控制面板”，而一个控制面板的生成需要经过非常繁琐的流程：B端客户输出UI及逻辑需求至项目经理、项目经理针对需求输出简单原型图、UI针对原型图绘制视觉稿、项目经理协同UI和App开发进行需求评审、App开发进行开发工作、B端客户验收控制面板。以上就是一个控制面板的形成过程，如果在以上流程中出现沟通不畅的情况，针对上面的流程甚至还会出现更多回归阶段的事情。

发明内容

本申请的主要目的在于提供一种实时预览生成智能设备控制面板的方法，包括：

制定语义化的DSL描述Web端至React Native端的组件样式、组件控制功能以及组件联动逻辑的映射关系；

实时传输所述Web端至所述React Native端DSL描述信息；

所述React Native端生成能够实时解析所述DSL描述信息的控制面板；

所述React Native端在实时预览开发完毕后打包并最终输出上线。

可选地，实时传输所述Web端至所述React Native端DSL描述信息包括：

基于WebSocket双工通信协议，Web客户端和RN客户端分别向服务端发起获取token的请求；

获取完毕后根据所述token以及WebSocket地址并连接上Websocket；

搭建所述服务端、所述Web客户端及所述RN客户端三方的桥梁。

可选地，所述React Native端实现能够实时解析所述DSL描述信息的控制面板包括：

所述Web客户端在实时编辑页面样式或功能后生成DSL后传输至所述服务端；

所述服务端将所述DSL转发给当前处于连接状态的RN客户端；

在RN客户端接受到DSL后，实时解析并渲染成最终展现在APP中。

可选地，所述React Native端在实时预览开发完毕后打包并最终输出上线包括：

在Web端完成编辑后，将最后一次存储下来的DSL描述文件，通过ReactNative官方提供的打包脚本最终输出一个可在线上运行的jsbundle文件。

根据本申请的另一方面，还提供了一种实时预览生成智能设备控制面板的系统，包括：

定制模块，用于制定语义化的DSL描述Web端至React Native端的组件样式、组件控制功能以及组件联动逻辑的映射关系；

传输模块，用于实时传输所述Web端至所述React Native端DSL描述信息；

生成模块，用于所述React Native端生成能够实时解析所述DSL描述信息的控制面板；