当前位置: 首页 > 科技观察

Dooring可视化构建平台数据源设计分析

时间:2023-03-12 03:36:00 科技观察

低代码(lowcode)平台是近两年的热门话题。通过自动代码生成和可视化编程,用户只需编写少量代码即可快速搭建各种平台。满足许多技术人员和非技术人员需求的应用程序。最近笔者也在研究低代码相关的产品设计和技术方案,不断完善可视化编辑器H5-Dooring。接下来,我们将分析低代码平台和数据源设计,希望对大家有所帮助。低代码平台解决的问题低代码平台属于APaaS(ApplicationPlatformasaService),解决了内部应用协同、人力资源效率和成本的问题。随着云服务等计算机技术的发展,传统的软件服务已经无法应对数字化浪潮的压力。笔者针对企业急需解决的问题做如下总结:企业数据孤岛(应用间数据共享,互通难)企业定制化需求日益增加(不同行业赋能不同应用场景,万千“客户”千面)IT人才紧缺,沟通成本、研发成本、研发周期紧张,产品迭代和响应速度慢,所以我们迫切需要像低代码/零代码这样的解决方案来解决上述问题。当然,lowcode平台早就出现了。国外的西门子(SAP)、微软、谷歌已经有非常成熟的解决方案,国内也不在少数,但是已经形成了跨行业的通用解决方案,还有很长的路要走(比如如何解决国内各大平台的小程序建设)。基本流程如下:上面的数据源介绍了低代码的基本概念和需要解决的痛点。下面继续分析低代码的代码构成和数据源设计。低代码基本包括以下几个部分:客户端编辑器管理终端数据源页面(应用)管理模板管理组件管理资源库管理(图片、字体、自带sdk、插件等)角色管理((非必须)如图下图中:clienteditor部分主要是设计拖拽和组件渲染相关的技术基础,这部分笔者在之前的文章中也做了很多分享,比如智能网格布局拖拽-drop模式,naturallyFlow拖拽式构建模式,自由布局模式等,详见源码:H5-Dooring|智能电网拖拽式构建平台H5-Stream|自然流式排序构建平台V6.Dooring|自由布局可视化构建平台本文的重点是数据源设计,接下来我们开始分析数据源。什么是数据源?笔者的理解是数据源,这是提供一些所需数据的矩阵。建立数据库连接的所有信息都存储在数据源中,通过提供正确的数据源名称,我们可以找到对应的数据资产。图片的低代码产品包括纯静态页面和需要连接动态数据的动态页面。低代码平台的数据源主要是为动态页面(业务系统)设计的。低代码平台用户可以为页面和组件选择或创建数据源、变量、函数、自定义事件等,实现数据对接和页面交互。这样可以进一步降低数据对接的复杂度,提高研发效率。对于数据源的设计,根据实际业务需求,我们可以分为静态数据源和动态数据源。静态数据源可以由用户在低代码平台上以可视化的方式创建,比如编辑数据表等。动态数据源是指用户可以自定义请求第三方服务和组件消费的数据源是完全动态的调用,类似于我们传统开发中使用的ajax请求。基于以上概念,下面介绍一下H5-Dooring的数据源实现。数据源编辑界面:一、Dooring每个用户都有一个独立的数据源仓库,可以配置不同的数据源进行组件消费。数据源会存放在对应的用户下,用户可以允许不同的页面/组件消费数据源。如下:1.静态数据源实现静态数据源,即用户在平台创建的数据源。我们将这样的数据源存储在publicstate中供组件消费,比如redux或者vuex,存储在数据库中。具体过程如下:从代码层面来说,我们只需要将从服务端获取的静态数据源存储在客户端的全局状态中即可。对于用户创建的数据源,我们可以提供数据库的CURD操作。如下图所示:2.动态数据源动态数据源设计需要一套组件数据协议,需要约定第三方接口遵循低代码平台的数据规范返回数据,以及后者手动使用编程方式对应字段与组件数据的映射关系。具体方案和我在可视化组件中实现的第一个三方数据访问方案类似:通过这种方式,组件既可以消费静态数据,又可以动态加载第三方数据,从而实现低代码动态页面的构建。最后,H5-Dooring可视化构建平台近期也在不断推迭代,数据源的基础构建已经完成,后续会朝着更加智能化的方向发展。下面是最新的更新日志:优化编辑器加载性能为iframe容器组件添加边框等属性显示二维码bug优化页面高度适配问题,添加高度适配器优化组件交互时空链接点击消息bug更新dooring文档