低代码平台的发展历程可以追溯到20世纪80年代的第四代编程语言,2000年VPL可视化编程语言的诞生,以及2014年Forrester提出低代码/零代码概念。随着技术的不断成熟,低代码平台正在逐步被企业用户和资本市场所接受。
低代码平台的优点
低代码平台的优点包括降低成本、提升效率、打破业务壁垒、提高产品灵活性以及加速数字化转型。与全代码、低代码、无代码相比,低代码平台兼顾了灵活性和易用性。
核心能力
我认为低代码平台的核心竞争力主要体现在四个关键方面:
-
直观的可视化开发体验
低代码平台为业务人员提供了直观的可视化开发工具,通过简单的拖拽操作,用户可以快速构建页面,并配置数据源和数据模型,定义工作流程,无需编写代码即可生成前端交互语言,并转换成后端可执行的代码。
-
强大的数据模型驱动功能
平台支持灵活的数据模型定义,用户可以自定义字段,建立表与表之间的关联关系,并设置数据模型规则和索引。此外,平台还提供标准的数据操作接口,实现数据的增删改查等功能,让应用能够操作该数据模型。
-
出色的扩展性
低代码平台需为开发者提供了扩展机制,支持使用熟悉的语言进行扩展,无论是前端还是后端开发者。平台还支持通过流程图进行业务逻辑扩展,以及与第三方系统的API集成,
-
全面的工程化能力
低代码平台具备完善的工程化能力,包括本地开发调试、版本控制、自动化构建发布、监控等一站式能力,以确保软件交付的敏捷性和可靠性。
这些核心能力共同构成了低代码平台的核心竞争力,使其能够满足企业快速构建应用的需求,推动数字化转型进程。
未来发展
通用性:低代码平台将逐渐具备开发通用场景的能力,能够支持各种类型的应用,如网站、游戏、3D场景、电商、企业应用、个人应用等。
便捷性:低代码平台将继续朝着降低代码量的方向发展,最终实现零代码编程。这代表着开发者不需要编写任何代码,就可以通过低代码平台实现应用程序的搭建。
智能化程度提升:随着人工智能和机器学习技术的不断发展,低代码平台将集成更多智能化功能,例如代码智能提示、自动化测试、异常检测等,从而进一步提升开发效率。
开放性增强:低代码平台将加大开放性,与更多的外部系统、服务、组件等集成,实现真正的业务流程闭环。同时,低代码平台也会提供更开放的接口,方便开发者进行二次开发。
组件化和模块化:为了提高复用性,低代码平台将加强组件化和模块化,开发者可以自由组合组件、模块,实现更灵活的业务需求。
协作性优化:低代码平台将支持更好的协作功能,如多人在线编辑、实时同步、版本控制等,提高团队协作效率。 安全性和稳定性提升:随着低代码平台在各个行业的广泛应用,安全性、稳定性将成为重点,低代码平台将不断优化这些方面,确保业务安全可靠运行。
垂直化发展:低代码平台将更加关注垂直行业,推出更多面向不同行业的低代码解决方案,更好地满足行业定制化需求。
移动化、社交化、智能化:低代码平台将更多地集成移动、社交、智能等功能,使应用更加丰富多彩,更符合用户使用习惯。
支持物联网(IoT)应用开发:随着物联网设备的普及,低代码平台将支持物联网应用开发,以满足智能家居、智能制造等场景的需求。
人工智能:随着chatGPT的大火,大模型势必在未来为各行各业带来革命性的变革,低代码平台要拥抱大模型,以满足智能应用的场景需求。
低代码架构和开发简介
定位
面向应用设计的基础平台,基于一站式大数据能力,帮助客户通过数据驱动的低代码码化软件装配模式,构建数用一体化的应用系统,提高软件开发效率、降低成本,加速数字化转型。
帮助企业拆掉传统代码开发的制肘,使用功能全面的低代码平台,降低开发成本、提高软件研发效率,提升开发协作效率、降低软件开发门槛,解决企业面临的需求模糊、紧急、多变等不确定问题,提高软件开发的效能。
平台架构
其中应用支撑平台里的红色框起来的部分即为应用设计器。需要实现应用设计设计器工具(包含应用设计器、页面设计器、表单设计器、流程设计器、svg设计器等设计器)和应用集成服务。
开发工具和平台的关系
整体运行流程如下:
● 通过应用设计工具设计应用:包含且不限于页面设计、菜单设计、 权限配置、基础配置、流程设计、数据源配置、模型管理等
● 应用的导出:抽离各个设计和配置为json化,实现应用的json化集,导出为.zip应用模型文件保存到后端。
● 应用运行环境(基座)加载应用:基座提供各个应用的运行环境,通过解析各个应用的json文件,实例化应用。
应用模型构成
一个应用应包含数据源(交互接口)、界面、数据管理和权限控制。其中交互界面为前端主要负责。
以下部分主要围绕前端为主
基座部分实现
RBAC
前端的权限管理主要分为页面的权限(路由权限)定义谁可以访问某一个页面、按钮权限等。
应用管理
管理各个应用的发布、版本等。
应用的发布和版本管理可以通过字段isPublic、version来管理:
//app.json
{
...
isPublic: true/false;
version: 1.0.0;
...
}
应用实例化
应用加载的核心就是各种json数据的加载即:
应用设计实现
定位
企业级应用软件设计平台,是基于一站式大数据能力以及低代码、无码化的软件开发平台,通过数据驱动的软件装配模式,构建数用一体化的应用系统,提高软件开发效率、降低成本,加速数字化转型。
根界面
启动人机系统时的初始界面可以动态配置,包含登录界面和主页,不包含具体的页面(通过页面设计器设计出来的页面)
读取应用参数达到应用配置化的能力
子界面
依附于某主界面的窗体,其包含构成同主窗体。子窗体集成其依附的主窗体属性,并随其关闭。
主要是页面设计器设计出来的页面
应用设计器核心流程
核心流程难点解析:
交互接口设计
订阅应用的数据源
管理对象设计
对象类型存储服务接口、对象模型、库表接口的初始化等
交互界面设计
如应用包括工作流则需要表单设计器、流程设计器、业务型页面则需要页面设计器、电网接线图则需要svg设计器等
交互界面设计类型包括:
● 表单界面
● web界面
● 流程图界面
● 电网接线图
● 数据源定义界面
处理逻辑设计
当交互界面设计完成需要进行页面之间的跳转、组件之间的交互绑定、数据源绑定等
权限设计
应用权限管理旨在建立应用系统的访问用户的身份授权的管理机制,以降低由于对应用及数据的未经授权的访问带来的风险。在应用权限管理的过程中,会将用户根据角色进行分类,并赋予不同角色不同的应用菜单权限。
系统角色
系统角色是指系统中的虚拟角色,它们不是真实存在的,而是用来描述系统中的一些抽象概念,比如系统管理员、系统用户等
● 系统角色
分类:租户、用户、客户
应用角色
应用角色是指在应用系统中实际存在的角色,比如管理员、普通用户等,它们是真实存在的,可以对系统进行操作。
应用角色分类:应用管理员、技术负责人、项目经理、普通员工等
系统角色和应用角色区别
应用角色和系统角色的区别为:应用角色只能配置角色中包含的成员,而系统角色中不仅能配置角色中包含的成员,还能配置角色对应应用系统菜单的权限。
应用导出(发布)
发布应用到运行系统,导出应用模型。
应用发布前需进行应用调试,保证应用功能完整、业务流程执行正确、菜单权限授权准确,以上条件条件满足后即可发布应用,且应用发布后无法再进行编辑。
应用描述文件分类
暂分类为:应用、菜单、页面、svg、表单、流程、组件、数据源等。
每个描述文件会有对应的解析器(或引擎\加载器)去解释执行
应用导入
应用导入到基座,基座可以解析应用描述,创建相应的应用。
应用规范
一个应用创建完成后,应避免以下问题:
● 应用内容过于单薄:如只有一张表单、一个仪表板等,无法作为一个完善的系统
● 缺乏示例数据:导致大屏或者页面展示效果不佳,应用内容传达不够直观
● 应用结果不完善:存在未绑定页面的次菜单,空分组/空表单/空仪表板等无价值内容
● 应用名称/描述无意义:如“测试”、“临时配置”等
● ...
界面设计器
技术架构
人机界面设计方案
人机界面由一系列组件构成,相互关联的组件形成页面,页面组成应用的整体人机界面。
页面设计整体功能分区
在页面构建模块中,可以在统一的入口中用拖拉拽的方式快速地进行应用菜单结构和页面布局的配置
整个模块大致分为4个区域:
● 功能区:页面插入、界面风格设计
● 资源区:对想要插入页面中的资源的选择、管理,包括已经制作好的数据大屏、系统预制的插件等
● 画布区:组件拖拉拽操作,画布式界面
● 属性区:样式、数据、交互核心三元组,每个元素可以通过三元组的配置维度完成原型设计
在功能区中,提供丰富的基础组件和拓展组件:
基础组件
常用的软件或许功能不同、风格各异,但是拆解下来,也都是由图表、列表、详情、表单、按钮等这几类基本元素组成。
组合组件
各种基础组件组合而成的组件,可以完成某一项功能的组合组件如:列表的增删改查组件。
拓展组件
在基础组件、组合组件不能满足要求的时候可选择拓展组件,如客户的定制化要求。
二开流程
1. 定义一个规范的二开项目
2. 在此项目中进行业务开发
3. 开发完打包成js脚本
4. 基座中上传js脚本
5. 基座执行注册组件
6. 使用组件
对于每个组件细节的编辑是在画布区选中组件之后在属性区中的三要素中
可以编辑样式、数据以及交互方式。在不同的组件中,展示内容并不相同,选项卡中的信息会随着配置对象的改变而改变
组件化设计目标
达到功能模块化、封装标准化、数据模型化、部署动态化、界面用户化
从而以更有效的方式进行开发、部署和维护,允许应用开发人员更快速、更灵活地创建和管理应用程序。
整体开发流程
以页面为核心的构建模式,通过前端元素串起来资产数据、逻辑、业务流、权限等多个应用的构建要素
页面开发的整体流程是:
● 数据对象:数据源的配置
● 导航菜单的配置:你的应用有哪些菜单
● 页面开发:定布局、拉页面、插入组件并进行细节设计件→设置页面基本信息
● 配置业务流:页面开发完成需要配置业务流、逻辑等
● 分配权限:页面的使用权限,也就是谁可以使用这个页面等
● 其他的页面配置
这样,一个应用页面也就完成了。
应用设计器是一个单独的应用,整个应用的加载和配置基于一套规范的schemas.json文件,不管是页面设计,菜单设计等都是在编辑json。
下面按照区域划分分析各部分功能的实现
功能区实现
描述文件或描述信息即为json文件
这一部分主要是应用的基础信息设置如应用程序的名称、预览、保存、发布、主题、设置等操作
● 名称:应用的名称,通过修改应用的描述文件的name 字段
● 预览:可以对当前设计的应用进行预览,预览调用基座应用程序,将应用程序的描述文件发送给基座,基座解析描述文件加载应用
● 保存:调用后端接口将应用的描述文件保存到后端
● 发布:先保存到后端,然后调用后端接口将应用发布出去,在基座的应用列表可以看到已经发布的应用
● 主题:修改应用的主题色,通过修改应用的描述文件的primary-color 字段,并支持更细粒度的主题定制:
● 设置:这部分主要对应用进行更细粒度的设置,包含且不限于:
○ 基础设置:应用名称、应用描述、应用logo、应用宽度、应用高度等
○ 角色管理:定义谁可以访问应用
○ 菜单管理:定义菜单的访问权限
○ 实体管理:数据源管理、视频源管理
○ 登录管理:对登录界面进行配置
○ 导航管理:对页面的导航进行配置
资源区实现
资源区分为导航视图、资源管理、资源
导航视图
这部分主要维护应用的菜单信息,通过列表展示,点击列表项,中间画布区可以展示对应的菜单页面,可以对菜单页面进行设计
菜单描述文件
// 待完善
export const menu = [
{
id: '',
name: '',
url: '',
auth: '',
...
}
]
资源管理
这部分主要维护应用的页面信息,通过树展示,点击树列表,中间画布区可以展示对应的页面,可以对菜单页面进行设计,页面下维护每个页面包含的组件,点击组件可以选中画布区的组件:
├── 应用名称
│ ├── 页面1
│ ├── 页面2
│ ├── 组件1
│ ├── 组件2
功能
新增目录:对页面进行划分
新增页面:分为基础页面和弹窗页面
基础页面:正常展示的页面
弹窗页面:通过点击某一个按钮显示的弹窗页面
搜索:树的模糊搜索
重命名:应用、页面、组件重命名
复制:在当前层级复制页面、复制组件
回收站:对不要的页面或者组件进行收集,以便后面需要用到
页面配置:点击页面或者画布区域对页面进行基础配置和样式配置如:页面名称、类型、页面网格、背景配置、四周间距等自定义页面配置
资源
这部分主要包含封装过的基础组件、公共组件、布局组件、模板定义组件等
功能
● 基础组件:如可配置动作的button按钮
● 公共组件:人员选择器、部门选择器、设备选择器、表单、列表等
● 布局组件:快速的定义一些常见的布局组件,加快页面的布局速度如单列、多列布局、标签切换、折叠面板、卡片、步骤条等。通过页面布局,可以对页面内容进行规划,将主次内容进行归纳和区分。
● 模板组件:快速地定义一些模板组件,加快页面的开发速度
● 插件组件:包含定制化的组件
画布区实现
主要的页面编辑操作都发生在这里。进行软件的组装和细节的编辑。
功能
● 组件的拖拽
● 组件配置
● 组件嵌套
属性区实现
右侧是属性配置区,针对某个组件或者功能单元的细节配置都集中在右侧属性,根据组件的不同,属性区中展示的能力也不完全一样。
核心包括样式、数据、交互,也就是组件三要素。样式也就是组件的外在展示形式,数据指的组件绑定数据的情况,交互主要用来配置和组件相关的逻辑控制。
样式
这部分主要是组件暴露出来的自定义样式
如组件的宽高、在画布中的位置、背景颜色、自定义CSS等信息,通常每个组件的样式信息都不一样
需实现右边属性配置编辑,中间画布中对应的组件同步更新
数据
组件数据来源如默认值(静态数据)、http、websocket等方式来获取数据
每个组件需描述输入数据的接口,对获取到的数据进行数据转换,达到该组件的要求的接口类型
● 静态数据配置:
● http配置:
● websocket配置:
● ...
交互
交互分为组件内、组件间、页面间。其中页面间分为路由跳转、下一级页面、上一级页面
新增交互
组件名称:当前选中的组件,不可修改
添加事件:每个组件的事件是不一样的,如输入框可以添加内容改变事件、时间选择器的时间改变事件等
添加动作:
组件内:直接调用组件暴露出来的方法或者属性即可
组件间:先选择需要改变的组件集,针对每个组件选择该组件的对应方法或者属性
路由跳转:可以动态获取当前页面的ID
更加复杂的交互可以手写交互逻辑:
事件的执行
对于手写交互逻辑需要执行这段手写的字符串,可以选择new Function 方式来执行,这个ctx即为组件实例或者获取当前页面所有组件的实例,通过这个实例可以调用抛出来的方法
总结
以上为低代码平台和界面设计的简要流程,如果需要落地还需要进行更为详细的设计。欢迎交流讨论。