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

本申请公开了一种实时预览生成智能设备控制面板的方法，包括：制定语义化的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描述信息的控制面板；r>所述ReactN本文档来自技高网...

【技术保护点】
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