一种实时预览生成智能设备控制面板的方法及系统技术方案

本申请公开了一种实时预览生成智能设备控制面板的方法，包括：制定语义化的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端至ReactNative端的组件样式、组件控制功能以及组件联动逻辑的映射关系；实时传输所述Web端至所述ReactNative端DSL描述信息；所述ReactNative端生成能够实时解析所述DSL描述信息的控制面板；所述ReactNative端在实时预览开发完毕后打包并最终输出上线。可选地，实时传输所述Web端至所述ReactNative端DSL描述信息包括：基于WebSocket双工通信协议，Web客户端和RN客户端分别向服务端发起获取token的请求；获取完毕后根据所述token以及WebSocket地址并连接上Websocket；搭建所述服务端、所述Web客户端及所述RN客户端三方的桥梁。可选地，所述ReactNative端实现能够实时解析所述DSL描述信息的控制面板包括：所述Web客户端在实时编辑页面样式或功能后生成DSL后传输至所述服务端；所述服务端将所述DSL转发给当前处于连接状态的RN客户端；在RN客户端接受到DSL后，实时解析并渲染成最终展现在APP中。可选地，所述ReactNative端在实时预览开发完毕后打包并最终输出上线包括：在Web端完成编辑后，将最后一次存储下来的DSL描述文件，通过ReactNative官方提供的打包脚本最终输出一个可在线上运行的jsbundle文件。根据本申请的另一方面，还提供了一种实时预览生成智能设备控制面板的系统，包括：定制模块，用于制定语义化的DSL描述Web端至ReactNative端的组件样式、组件控制功能以及组件联动逻辑的映射关系；传输模块，用于实时传输所述Web端至所述ReactNative端DSL描述信息；生成模块，用于所述ReactNative端生成能够实时解析所述DSL描述信息的控制面板；打包模块，用于所述ReactNative端在实时预览开发完毕后打包并最终输出上线。可选地，实时预览生成智能设备控制面板的系统还包括：组件控制模块，用于在Web端拖拽第一按钮组件并绑定第一功能`，在App端通过点击所述按钮组件触发相应的控制命令至对应的设备。可选地，实时预览生成智能设备控制面板的系统还包括：组件功能联动模块，用于在所述Web端拖拽第二按钮组件并绑定第二功能，在Web端创建所述第一按钮组件和所述第二按钮组件的规则，所述第一功能与所述第二功能根据所述规则联动。本申请还公开了一种计算机设备，包括存储器、处理器和存储在所述存储器内并能由所述处理器运行的计算机程序，所述处理器执行所述计算机程序时实现上述任一项所述的方法。本申请还公开了一种计算机可读存储介质，非易失性可读存储介质，其内存储有计算机程序，所述计算机程序在由处理器执行时实现上述任一项所述的方法。本申请还公开了一种计算机程序产品，包括计算机可读代码，当所述计算机可读代码由计算机设备执行时，导致所述计算机设备执行上述任一项所述的方法。与现有技术相比，本申请具有如下有益效果：本申请则提供了一种实时预览生成智能设备控制面板的能力，从而生成一个无需技术人员介入的智能设备控制面板。帮助B端客户甚至C端消费者能够自行搭建出自己心目中最终想要达成的一个智能设备控制面板。本专利技术针对现有的可在网页端搭建智能设备UI界面，但无法做到在实际运用的移动端实时查看搭建过程中的智能设备UI界面的缺陷，采用了定制结构化的json数据结构配合websocket双工通信协议，连接了网页端和移动端，从而使得能够在网页端更新搭建的UI界面的同时能够实时在移动端呈现并控制智能设备。附图说明构成本申请的一部分的附图用来提供对本申请的进一步理解，使得本申请的其它特征、目的和有益效果变得更明显。本申请的示意性实施例附图及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：图1是根据本申请一个实施例的实时预览生成智能设备控制面板的方法的流程示意图；图2是根据本申请一个实施例的实时预览生成智能设备控制面板的方法的流程示意图；图3是根据本申请一个实施例的计算机设备的示意图；以及图4是根据本申请一个实施例的计算机可读存储介质的示意图。具体实施方式为了使本
的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。请参照图1-2，本申请一实施例提供了一种实时预览生成智能设备控制面板的方法，其特征在于，包括：S2：制定语义化的DSL描述Web端至ReactNative端的组件样式、组件控制功能以及组件联动逻辑的映射关系；S4：实时传输所述Web端至所述ReactNative端DSL描述信息；S6：所述ReactNative端生成能够实时解析所述DSL描述信息的控制面板；S8：所述ReactNative端在实时预览开发完毕后打包并最终输出上线。针对步骤S2，本实施例制定了以下DSL用于描述组件样式、功能以及联动逻辑：本申请一实施例中，实时传输所述Web端至所述ReactNative端DSL描述信息包括本文档来自技高网...

【技术保护点】
1.一种实时预览生成智能设备控制面板的方法，其特征在于，包括：/n制定语义化的DSL描述Web端至React Native端的组件样式、组件控制功能以及组件联动逻辑的映射关系；/n实时传输所述Web端至所述React Native端DSL描述信息；/n所述React Native端生成能够实时解析所述DSL描述信息的控制面板；/n所述React Native端在实时预览开发完毕后打包并最终输出上线。/n

【技术特征摘要】
1.一种实时预览生成智能设备控制面板的方法，其特征在于，包括：
制定语义化的DSL描述Web端至ReactNative端的组件样式、组件控制功能以及组件联动逻辑的映射关系；
实时传输所述Web端至所述ReactNative端DSL描述信息；
所述ReactNative端生成能够实时解析所述DSL描述信息的控制面板；
所述ReactNative端在实时预览开发完毕后打包并最终输出上线。


2.根据权利要求1所述的实时预览生成智能设备控制面板的方法，其特征在于，实时传输所述Web端至所述ReactNative端DSL描述信息包括：
基于WebSocket双工通信协议，Web客户端和RN客户端分别向服务端发起获取token的请求；
获取完毕后根据所述token以及WebSocket地址并连接上Websocket；
搭建所述服务端、所述Web客户端及所述RN客户端三方的桥梁。


3.根据权利要求2所述的实时预览生成智能设备控制面板的方法，其特征在于，所述ReactNative端实现能够实时解析所述DSL描述信息的控制面板包括：
所述Web客户端在实时编辑页面样式或功能后生成DSL后传输至所述服务端；
所述服务端将所述DSL转发给当前处于连接状态的RN客户端；
在RN客户端接受到DSL后，实时解析并渲染成最终展现在APP中。


4.根据权利要求3所述的实时预览生成智能设备控制面板的方法，其特征在于，所述ReactNative端在实时预览开发完毕后打包并最终输出上线包括：
在Web端完成编辑后，将最后一次存储下来的DSL描述文件，通过ReactNative官方提供的打包脚本最终输出一个可在线上运行的jsbundle文件。


5.一种实...

【专利技术属性】
技术研发人员：李新新，
申请(专利权)人：杭州涂鸦信息技术有限公司，
类型：发明
国别省市：浙江;33