前言：新冠疫情卷土重来给企业的生存和发展带来新的挑战，面对内部外市场环境的不确定因素，企业亟需保持业务的连续性，如何加快创新的速度，对抗不确定性带来的风险，而低代码无疑是最佳选项。本文将从实践角度着笔，为大家详细如何通过万应低代码复刻出一个新能源汽车电商平台。

 

说明： 本文旨在展示、教学如何通过万应低代码，在短时间内快速开发电商官网，最终的复刻界面不作为商业使用。

 

 

万应低代码的通用实现过程

 

作为领先的一体化应用开发平台，万应低代码凭借着模型驱动理念，在数字化项目的构建上能够快速完成数据模型、业务模型、业务逻辑的定义，具备稳定强大的兼容和集成能力，一次设计即可多端适配。

 

 

万应低代码平台能力结构图

 

在具体项目的创建步骤上，万应低代码也能极大地简化了传统开发的流程，充分提高开发效率。

 

 

应用系统实现流程图

 

接下来，我们以某新能源汽车品牌的电商平台为例，根据订购汽车业务场景进行低代码实践流程演示。

 

 

 

一、业务需求分析

 

基于汽车预定的业务需求，我们认为用户进入卖车平台后，需要能够直观查看到汽车信息（如：车型、版本、规格、产品图片、价格等），且可根据规格的增配动态、灵活地调整价格。

 

 

 

 

 

用户在选择目标车型后，可进行用户创建、加入购物车、预定、下单、协议签署、支付等全流程操作，同时拆分定金与后续尾款，记录用户付费习惯。

 

 

 

 

二、定义业务实体

 

接下来，我们根据分析出的具体业务需求，整理出实现UE和隐藏逻辑所需的业务实体，明确多个业务模块之间的关系与细节，完成业务实体、相关字典的属性和内容定义。

 

并根据实际需要，在万应低代码预设的系统实体-用户信息（User）中，拓展的用户信息与实体。

 

 

 

用户订车相关业务实体构建参考

 

 

车型相关实体逻辑定义参考

 

 

三、设计主要业务逻辑与PaaS能力配置

 

通过分析，本电商平台的后台业务逻辑主要为预订流程，包含创建用户、创建订单、创建付款记录三个步骤，而大多用户可能数年内只会购买一辆新能源汽车，因此在本例实践中，我们倾向于将其解耦为多个可独立操作的子流程形式，通过子流程调用的方式组合成大流程。

 

 

流程构建示例

 

 

1.构建账户子业务逻辑

 

首先根据账户子业务逻辑，在万应低代码平台定义入参，主要包括：邮箱、账户、姓、名、账户类型、手机号码等。

 

 

 

账户子业务逻辑入参定义

 

业务逻辑的出参，通常是由业务逻辑本身的能力和需要使用这个业务逻辑业务方定义的。对于创建账户来说，一般都会需要返回这个新创建的用户ID。

 

 

 

账户子业务逻辑出参定义

 

在业务逻辑的编排阶段，万应低代码能够提供一目了然的可视化编排体验，但在此之前，我们需要先分析业务逻辑，得出核心逻辑，异常情形，然后考虑输入、输出信息的处理。

 

以【创建账户】这个业务逻辑为例：

 

① 核心逻辑

 

向【系统实体-用户信息】中插入一个账户，其包括姓、名、邮箱、手机号、密码、账户类型等字段。

 

② 账户去重

【用户信息】实体中已存在的相同数据（如：邮箱、手机号），应进行查询去重处理。

 

③ 账户类型判断

 

需要根据流程输入参数判别企业账户和个人账户。

 

 

 

账户子业务逻辑编排

 

在数据源层面，我们需要明确数据的加载条数，按需加载，提高系统子性能；同时明确数据源的输出字段，避免不必要的内存、CPU、宽带消耗。

 

 

2.创建车辆订单子业务逻辑

 

车辆订单的子业务逻辑的出入参设定方式与前面大致类似。

 

 

 

账户子业务逻辑出参定义

 

 

 

账户子业务逻辑出参定义

 

但在逻辑编排时，我们可以利用循环节点把一段相同的流程，注入不同的参数和变量，以此简化逻辑编排设计，本例中我们将用户选择的车辆规格信息，循环的插入到订单规格表中，循环执行。

 

 

 

 

3.创建定金支付订单子业务逻辑

 

用户创建车辆预订的订单后，需要支付定金，并与后续付款/金融机构贷款（如有）构成完整的购车付款流程，于是我们需要为首笔定金创建订单，以便后续追踪。

 

 

 

入参定义

 

 

出参定义

 

在定义好出入参之后，逻辑编排时需要特别注意安全隐患的排查，例如在客户端传入的订单总价或商品价格可能被用户篡改，因此本例中，车辆的定金金额，直接从配置表中读取，用户无法输入和修改。

 

 

 

同时应该合理利用异常处理节点，每条业务逻辑默认返回三个参数，抛出异常，能够帮助用户更好的定位错误，尤其是复杂逻辑编排，通过日志和异常信息就能快速定位到错误。另外前端用户使用系统时，也能准确、清楚地知道错误原因。

 

 

 

4.创建支付二维码子流程

 

下一步我们需要为平台提供支付能力，那么如何使用万应低代码平台的支付能力呢？在本例中通过连接器的调用微信支付和调用支付宝这两个节点来实现。

 

调用支付能力需要遵循以下步骤：

• 在微信/支付宝平台申请相应的支付能力和商户号，获取的商户号和密钥；

• 在万应低代码平台设计后台-密钥管理中，引入微信支付相关的密钥；

• 通过密钥分组和密钥键值两个实体数据源，开发一个对密钥实体管理的界面；

• 录入获取到的微信支付密钥信息；

• 配置支付信息。

 

 

 

在业务逻辑中调用微信支付连接器：

 

 

 

5.支付成功订阅流程

 

用户通过微信扫码完成支付后，将存储付款的结果记录于“支付订单实体”实体。为实现该功能，我们需要设计一个业务逻辑，并配置其事件订阅。出入参及逻辑编排就不过多赘述，大家可参考如下示例。

 

 

 

定义入参

 

 

逻辑编排

 

要注意的是在配置支付回调事件时，我们需要尽可能地保证传参的一致性，并建议为实体定义索引，这样能够大幅提高查询速度。

 

 

 

 

四、设计应用界面

 

1.页面布局

 

在进行界面设计时，首先需要分析布局，明确页面布局、弹窗及交互变化后的界面后，建立清晰的页面容器框架，合理选择容器，并将同一内容/同一业务显隐性的元素归置于同一容器内。

 

 

 

本例操作界面右侧为固定宽度，不适合采用分栏容器进行布局，我们选择两个弹性容器进行布局。弹性容器的布局能力十分强大，其水平布局、垂直布局能够让组件分行、分列展示，还能提供响应式布局功能。

 

 

 

 

2.组件的应用

 

本例中我们还用到了列表组件。

 

 

 

作为万应低代码平台最强大的组件之一，列表组件可支持数据源/数组对内容循环的、嵌套循环的渲染，可以对列表项或其子组件的边框、背景等样式，结合数据源当前行的表达式进行绑定，设计出复杂的选择项控件。

 

 

 

①万应低代码所有组件的呈现（技术上叫做渲染），都是依赖数据绑定实现的。

比如列表组件根据10行数据渲染一个完整的列表，一个文字组件显示一段文字，一个轮播容器轮播到某一项（本质上是指定变量对应的一项）。

 

②万应低代码平台组件属性绑定表达式时，都是响应式的。

表达式里任何一个子表达式（变量、数据源）改变时，都会自动、及时的反馈到组件的呈现上。表达式支持只读，需通过动作可实现数据的修改。

 

③如果多个组件绑定一个相同数据，组件之间将产生联动。

 

④变量驱动组件是支持双向绑定的

如轮播容器改变轮播项绑定的变量、翻页组件会改变当前页码、标签控件会改变当前标签的选择项等。再如所有的表单组件，都会改变表单的值（本质也是一个变量）。这种现象就是双向绑定。

 

 

 

3.选择页面数据源

 

数据源是万应低代码平台贯穿后台（或远程）数据与前端界面的管道，本质上是前后端分离开发模式的重要基础能力。

 

数据源分为实体数据源、业务逻辑数据源和大数据模型数据源。

 

 

①实体数据源

依赖后台定义的实体模型及关联关系，选择数据源时，分类和展现的结构完全和实体建模部分完全一致。让后台的实体数据可以在前端界面呈现或实现修改、删除。

 

 

②逻辑数据源

业务逻辑数据源能够把我们在后台业务逻辑模块，定义的业务逻辑，输出的数据（即出参）跟控件结合展现。

 

 

 

 

③大数据模型数据源

大数据模型数据源是一种专门用来做大数据分析的数据源，需要配合管理后台大数据->数据模型模块使用。

 

 

 

本例需要分析电商平台中哪种颜色的车型卖的最好，并得出台数和金额的折线图，应该怎么做呢？

 

1）建立订单车型颜色分析的数据模型，然后进入设计界面

 

• 车辆的销量数据、金额和台数，是记录在订单实体中，因此我们需要从左侧实体中把订单拖入到视图，由于仅分析销量，交付中心、付款信息等字段无需选择。

 

• 最终客户选择何种规格，是存储在订单规格表中的，因此我们可以做一个内连接，拖入订单规格表，建立内连接。

 

• 订单规格表里冗余了一部分车辆规格的信息，但是并没有存储规格分类字段。因此我们还需要拖入车辆规格、车辆规格这两个实体，根据关系字段建立左连接。

 

• 随后点击数据预览，可以看到模型已经帮我们把模型平面化了，展示出了我们需要的数据。

 

 

 

2）在界面中使用大数据模型数据源

 

• 引入刚才创建的大数据模型；

 

 

 

• 由于我们后台定义的大数据模型内包含车辆所有规格信息，但我们实际只需要分析颜色规格相关的销量，因此我们需要给大数据模型加上查询条件，加载数据源；

 

 

 

 

 

• 跟组件结合展示大数据模型，此处我们拖入一个折线图控件，维度选择所属规格，第一Y轴选择订单总价，第二Y轴选择对订单总价做计数

 

 

 

 

 

预览就能看到最终的折线图效果：

 

 

 

4.使用页面动作流

 

页面动作流是万应低代码平台打造前端界面逻辑，最强大的武器之一，页面动作流是一种前端业务逻辑编排的方式，它有若干动作节点构成，目前有11大类，100余个动作节点，它负责处理、加工各种复杂的数据，负责协同前端控件之间的呈现，负责调用后台和远端业务逻辑，几乎可以覆盖任意前端逻辑。

 

目前是通过事件(前端术语叫做event)来触发，每个组件都具备事件属性，页面本身也具有加载事件、加载完成事件和触发器。

 

 

 

动作流使用步骤：

1.确定需触发事件的目标组件；

2.创建动作流：考虑其功能，并定位到对应的节点；

3.排除异常情况：选择合适的条件判断和分支，优化动作流；

4.创建测试数据：测试动作流的逻辑是否正确。

 

通过事件触发动作流时还需要注意以下几点：

 

① 组件可配置一个或多个事件，事件可以触发动作流的执行；

② 页面分为页面加载事件和页面加载完成事件。页面加载事件先于页面加载完成事件执行，但是不能确保页面加载事件里的动作流，在页面加载完成事件开始执行时，都执行完毕；

③ 页面事件中的触发器支持周期性的触发指定动作流。

 

 

 

5.使用无所不在的表达式

 

表达式是一种强大的、响应式的数据加工方式。

• 强大体现在前端页面开发应用到的函数、表达式，支持通过可视化的方式实现。

• 响应式是指表达式中的任一变量、数据源，通过系统自动跟踪，可自动响应至组件属性。

 

表达式的用途有：

① 绑定组件属性

② 构建数据源查询条件

③ 绑定表达式节点的属性

④ 绑定动作的属性

 

五、项目的打包和发布

 

依照上面步骤，实现系统功能模块的功能开发后，通过万应低代码平台的打包发布功能，将应用发布到体验环境完成集成测试，发布到正式环境投入使用。

 

万应低代码平台官方提供集群运行环境：

由万应官方提供完整的运维服务，客户无需关心服务器、数据库、对象存储的运维工作，只需选择一个环境的型号就能完全部署。

 

用户自己提供云服务进行部署：

客户提供至少两台4C8G的服务器，在根据文档或在运维人员的指导下，初始化服务器的集群环境（本质上是初始化一个K8S+Docker的运行环境），将环境信息配置到万应低代码平台。这种情况下客户需要保证服务器的稳定性和安全。

 

 

具体步骤如下：

① 新建一个部署环境；

 

 

 

② 对项目进行打包，发布至体验环境完成集成测试；测试完成后，即可发布至正式环境投入使用；

 

 

 

以上就是本期万应实践的全部内容，感谢大家的观看，如果想要深入了解万应低代码和更多实践案例，欢迎联系我们，期待您的真知灼见！