幼儿园健康上报系统演示如何用低代码平台快速搭建一套应用系统

　　幼儿园健康上报系统演示如何用低代码平台快速搭建一套应用系统

　　简介：本文基于作者虚构的《幼儿园健康报告系统》，演示了如何使用低代码平台快速搭建应用系统，并介绍和演示了一些*敏*感*词*知名的aPaaS产品， Mendix、Outsystems、Yidah、明道云等在产品设计中尝试探索低代码平台的核心精髓，让大家对低代码有更直观的认识。

　　

　　在案例开始之前，先说一下基本概念。

　　一、什么是低码

　　低代码平台是继众泰之后的另一个热门话题。事实上，低代码本身并不是什么新鲜话题，也不是最近的技术突破和创新。它已经存在了十多年或二十多年。概念。早期的大型管理软件套件都有类似拖放式的快速开发平台，这使得技术人员更容易在不编写代码的情况下快速实现某些基本功能。

　　虽然现在低代码被称为aPaaS，但它似乎是一种Pa​​aS，似乎与SaaS密切相关，但大家需要认识到，低代码开发平台并不是一个概念，仅仅因为SaaS ，但远古时期已经存在。

　　简单来说，低代码平台就是期望通过拖放配置实现一套面向业务的软件系统，并且可以无缝部署和运行的开发平台。在这个过程中，当然允许编写部分代码，但更重要的是，大量的基础编码工作可以通过低代码平台快速自动化。

　　低代码的第一个应用场景是帮助成熟的软件产品，以低成本支持个性化需求，提高开发速度，甚至扩大客户群。

　　例如，许多成熟的商业软件（包括私有化的商业软件套件和SaaS形式的产品）都希望通过构建低代码平台来加强产品扩展能力，更好更快地服务客户，并与ISV合作将产品的目标客户群扩展到更广泛的领域和行业。

　　在这种情况下，低代码平台是低成本、高效地满足个性化需求的终极解决方案。此时，低代码目标用户可能包括工程师和实施顾问。国外SAP、Oracle、SalesForce、国内用友、金蝶、北森、Salesease等都有以自有软件产品为基础核心的低代码解决方案。

　　低代码的第二个应用场景是帮助甲方企业以低成本快速搭建新的应用系统，特别是对于不懂编程的业务人员，让企业以更低的成本享受。数字技术为企业带来的好处。

　　事实上，企业中的大量应用系统都是基于流程的。对于逻辑相对简单、流程链不复杂的业务场景，寻找打包软件支持矫枉过正，外包开发独立系统成本高，那么低代码平台可能是不错的选择。此时，低代码平台的目标用户可能包括甲方企业的业务人员或IT人员。

　　国外OutSystems和Mendix，国内的明道云、氚云，都属于这种情况。需要注意的是，目前国内一些报表平台和流程引擎厂商为了跟上热情，也自称低代码平台。严格来说，这些厂商提供的产品能力只是一个完整的低代码平台所需能力的一个子集，不能算是低代码产品。

　　讲了这么多概念，我想大家对低代码的印象还是比较模糊的。接下来，我将通过一个案例，带大家体验一个低代码产品的使用。在开始之前，还有几个问题需要强调一下：

　　低代码只是应用系统构建实现层面的工具，软件产品设计中的思维和建模过程是核心，所以我们的案例会花一部分笔墨来描述设计过程，理解之后再学习应用low code 平台会简单很多。我选择明道云作为演示产品：第一，因为它更容易上手；第二，因为明道云的老板任向辉喜欢写公众号分享，我很喜欢他的文章，作为致敬，所以选择明道云。需要说明的是，本人与明道云没有任何关系，试用期间也没有添加销售。我从帮助手册中学习并操作了整个试用期。学习明道云大约花了一个小时（主要是看帮助文件），在电脑上实现案例中的功能大约花了两个小时。整体非常好用，好用。不过这也可能是因为之前做过研发，比较容易理解很多基本概念。

　　好的，接下来，让我们进入案例。

　　二、小龟鼠幼儿园低代码应用1.需求调研

　　李校长是小豚鼠幼儿园的校长。最近，她遇到了一件烦心事。根据教委统一要求，疫情期间，要求家长每天报告孩子的健康状况。学校统一管理，但教委没有提供统一的技术支持。 .

　　为了实现这个需求，幼儿园老师想尽了办法，比如使用微信群管理，或者在线文档管理，但都不是很方便，比如无法实时统计，数据容易被误操作。而如果找软件公司帮忙搭建一个小系统，要花3万到4万元。对于幼儿园来说，这是一笔不小的数目。

　　李校长的侄子小王是B端产品经理。他在闲聊中得知了李校长的问题，想了想问道：

　　小王：阿姨，你说的，说不定我可以帮忙，搭建一个软件系统，你的问题就可以很好的解决了！

　　李校长：真的，太好了，但我们没有很多预算！

　　小王：不花你一分钱，我免费帮你做，但我想先了解一下你对这个业务管理的需求和期望。

　　李校长：非常感谢！我的呼吁很简单。就是让父母每天都来检查。如果有任何健康异常，我可以第一时间收到提醒，也可以让老师跟进，看看是什么问题。另外，最好有一些实时报告，让我看到最新的健康报告。

　　小王：来吧，我明白了，这件事交给我，我帮你设计一套操作流程和配套系统，免费给你使用！

　　了解大体背景后，小王开始构思小豚鼠幼儿园儿童健康报告系统的设计。

　　李校长：太好了，期待！

　　2. 产品轮廓设计

　　小王了解了基本要求后，开始构思这套系统应该如何设计。首先梳理一下这个系统涉及的利益相关者，如下：

　　虽然业务流程本身很简单，但因为毕竟是从零开始搭建的管理系统，需要完成一些基础的数据准备工作。想了想，小王画了一张简洁的业务流程图，如下。

　　

　　可以看出家长们都希望能够签到，一些基础数据要先维护好。按照常识，维护班级信息和*敏*感*词*是必要的。签到操作是针对学生的，因此签到信息必须与学生相关联。

　　另外，要求中提到，如果打卡温度异常，需要老师跟进。我们考虑生成一个待办事项并将其分配给老师。该待办事项与异常打卡记录相关。有了以上对业务的分析和思考，我们就可以画出业务背后的ER模型图（领域模型），如下图所示。

　　

　　每个老师可以管理多个班级，每个班级只能由一名老师管理。每个班级可以有多个学生，每个学生有多个健康报告记录（签到记录），每个健康报告记录可以生成体温异常跟踪记录。

　　这些抽象的实体是我们要设计的健康报告系统的核心，因为check-in（健康报告）过程实际上只是对这些实体的数据进行增删改查。

　　3. 产品细节设计

　　接下来根据流程图，我们来思考一下系统实现的页面流程图：

　　除了这些页面级的操作要求，还有一些业务规则要求。例如，如果健康报告中的体温异常，则自动生成一个待跟进的任务，发送给学生的班主任，并推送消息给校长。

　　简而言之，我们会发现与业务运营相关的功能页面主要是ER实体（创建和编辑）的列表页面和详情页面，不同的用户对不同的页面、不同的数据有不同的权限。

　　经过整理分析，我们可以列出系统中涉及的相关页面，以及权限表如下（这里只是一个简单的说明，后面明道云会展示更全面详细的权限设计，包括数据权限管理设计方案）：

　　

　　经过上面的分析，虽然细节还没有完成，但我们对“幼儿园健康报告系统”的设计有了清晰的认识。接下来直接进入低代码平台的开发演示链接！

　　3. 低代码实现——通过工作表定义数据实体

　　首先我们来到明道云工作台，点击“添加应用”，新建一个应用“小豚鼠幼儿园”（已经在下图中）。

　　

　　接下来，我们为 ER 模型中的四个实体创建工作表。下图为创建类实体的工作表编辑页面。

　　

　　Worksheet 是明道云的概念。所谓的工作表实际上对应的是ER建模中的实体。工作表中的相关控件定义实体的字段。比如自增的“类ID”定义在类形式、字符串类型字段“类名”、枚举字段“状态”等。

　　通过表单呈现实体是一种易于理解的设计方法。实体背后的本质是所谓的“对象”和最终会转移到数据库中的表。在一些低代码平台中，管理实体是通过对象编辑器定义的。这是一个更灵活但更复杂的解决方案，我们稍后会介绍。

　　无论是表单编辑器还是对象编辑器，原理都是一样的，都是对提取的实体进行管理。对于非技术人员，表格可能更容易理解和接受。

　　在类窗体中有一个“学生”控件，它是一个关联的记录组件。因为班级和学生是一对多的关系，每个班级可以有多个学生，所以在班级的表格中，我们允许看到一个班级关联的所有学生的列表，这在B端很常见产品交互 一种设计形式。

　　实体之间所谓的一对多和多对多关系，反映了多个表之间的关联。班级和学生之间的一对多关系可以在设计器中轻松定义，如下所示：

　　

　　实现关联后，表单与表单之间建立连接，详情页（单个表单数据的展示页）的展示也会自动完美完成。例如：下图是某类数据的详情页（PC版）：

　　

　　aPaaS平台会自动完成PC版和手机版的适配，格式可调。例如，上图为PC版课程详情页，下图为手机版：

　　

　　4.低代码实现-通过视图编辑器定义数据列表展示

　　接下来我们依次完成“学生”、“健康报告”、“体温异常追踪”三个实体的表单配置。

　　在下图中，横向的“校园管理”和“校长控制台”可以理解为我们对系统配置的一级导航。四种垂直形式表示它们属于某个一级导航。每个表单右侧主区域中配置的列表视图是二级导航菜单。如下图所示，对于班级形式，定义了“All”、“Active Class”、“Graduated Class”和“My”。四个列表视图，即“校园管理”一级菜单下的四个二级菜单。

　　那么，什么是列表视图？

　　

　　工作表只是定义了实体的特定字段。如何显示实体的列表数据？例如，如何以不同的形式呈现“类”列表数据？这需要一个视图编辑器！

　　在视图编辑器中，可以定义实体对应的多条数据的表格展示，包括列表数据的默认过滤条件、默认显示字段、默认字段排序，都可以易于定制，如上图所示。

　　在大部分自研B端产品中，列表页面（即视图）是最常见的功能页面，一般来说，这类页面是硬编码的，而不是通过类似的视图编辑器实现了这样的前端组件。在成熟的软件产品中，没有列表页面的概念，由视图编辑器处理，大大简化了编码工作。

　　如下图所示，我们为“Class”表单定义了四个视图，分别是“All”、“Effective Middle Class”、“Graduated Class”和“My”。截图显示了“Intermediate Class”视图的“Effective”默认搜索条件配置，可以看到我们已经设置了这个视图的默认查询条件，即“Status”字段为“Teaching”的所有类数据.

　　

　　我们之前提到过，与“学生”记录的一对多关系是以“班级”形式建立的。在“学生”表格中，还有一个与“班级”表格的“班级ID”相关联的字段。 "字段完成一对多关系的定义。

　　但是，如果我们想在学生表单中显示班级的名称，在学生视图中显示班级的字段，我们该如何实现呢？

　　因为我们是建立一对多的关系，所以我们只定义了ID之间的关系。因此，如果要以“学生”形式显示“班级”的名称，则必须对变量引入进行特殊处理。其中，采用了一种称为“其他表字段”的设计方法。简单来说就是关联表的某个字段被引入并显示出来，如下图所示：

　　

　　下面的红框定义了ID之间的关联，上面的红框介绍了在“Student”表单和视图中显示的“Class”表的“Name”字段。

　　在其他低代码产品中，这种诉求的解决方案是不一样的。

　　严格来说，表单只是数据对象的外部表现形式。根据软件设计MVC的分层概念，数据定义和前端呈现必须分层分离。对象编辑器严格定义了数据实体本身，如果表单或视图需要做多表连接来呈现其他相关表的一些字段，这是一个需要在可视化层面解决的问题。

　　因此，在很多更复杂的低代码产品中，所有的可视化部分都是基于页面编辑器，与底层数据定义无关。因为明道云产品，为了在很大程度上降低用户的学习成本，在数据底层集成了对象编辑器，在表现层集成了表单编辑器。

　　现在，让我们解决一个难题。如果我们想在学生视图中显示学生老师的名字，我们该怎么做？通过学生，你可以找到你的班级，但谁是班级的负责老师？如何定义？

　　一种方式是在“班级”表单中添加一个字段，可以关联到老师的账号，完成老师和班级的关系映射。在明道云，我们采取了另一种伎俩。校长需要将每个班级数据的所有者更改为特定的教师帐户，如下图所示。图中的“王老师”是“老师”的独立用户角色。

　　

　　通过这个动作，实现了对班级负责教师的分配。接下来，使用前面提到的“其他表字段”功能，将这个字段值引入到其他表单对象中。

　　这样，某个班级的所有学生和学生的健康报告记录都可以追溯到主管老师，这对下一个要求的实现至关重要！

　　5. 低代码实现——通过流程编辑器定义业务流程和事件

　　回忆一下，有一个需求：如果健康报告中体温异常，会自动生成一个待跟进的任务，发送给学生班主任，并推送消息给校长。

　　如何实现这个需求？这使用了 aPaaS 平台中流程编辑器的非常核心和重要的功能。可以说流程编辑器是低代码平台的灵魂！

　　进一步准确描述上述要求：如果您添加或编辑“健康报告”表单数据，“体温是否正常”字段选择“否”，则自动状态为“待跟进”生成“温度异常跟踪”数据，并发送消息给校长和学生的老师。

　　在低代码平台下，可以使用流程编辑器来实现与上述类似的功能，自动触发执行，自动更新多表数据。我们来到流程编辑器，创建“上报体温异常触发后续任务记录”流程，如下图：

　　

　　在图中，我们设计了三个流程节点。

　　第一个触发节点：定义当“健康报告”表单添加或更新数据时，如果发现“问题正常”字段等于“否”，则执行。第二个节点：当发现体温异常时，创建一条“体温异常追踪”数据，分配给上报记录学生的老师。第三个节点：发送应用内消息给校长和老师提醒处理，效果如下：

　　

　　对于工作流创建的数据，创建者字段显示为工作流，如下图：

　　

　　流程编辑器不是一个简单的工作流引擎。我们通常理解的工作流引擎，比如审批流，只是对单个数据对象的多节点处理。真正复杂的流程编辑器BPM需要对流程中不同的数据实体进行复杂的处理，这也是很多B端业务的核心处理逻辑和流程。

　　当然，明道云的流程编辑器有很*敏*感*词*，如下图，我们不再赘述。

　　

　　截至目前，还有一个核心功能我们还没有实现。家长如何报告数据？

　　一种方式是为每位家长开设一个账号，将账号与学生关联，家长登录系统，提交表格时默认提交相关学生的“健康报告”记录。

　　另一种方法是将“健康报告”表公开，任何人都可以提交。这样做的好处是不需要一一维护父账户。缺点是系统无法识别提交者和对应的孩子。 , 需要提交者手动从学生列表中选择学生，比较麻烦。

　　如下图所示，我们已经设置了表单的公共链接。

　　

　　6. 低代码实现——通过报表编辑器定义报表和仪表板

　　至此，与业务流程相关的核心功能和数据表格已经开发完毕。接下来，我们需要配置李校长的管理工作台，也就是仪表盘。通过类似于报表引擎的功能，配置了委托人的监控仪表盘，我们将其放置在“委托人控制台”的一级导航下，如下图：

　　

　　该功能的使用与经典报表引擎类似，不再赘述。

　　7. 低代码实现-配置角色和权限

　　最后，我们设置角色和权限。我们设置了两个角色，“校长”和“老师”。

　　B端产品的权限管理包括两部分。功能权限决定了用户可以访问哪些菜单和按钮，数据权限决定了用户可以访问和操作的数据采集范围。一般通过组织树来实现。

　　下图为明道云数据权限配置管理整体图：

　　

　　可以看出，对于每个角色，设计了不同表单视图的查看和编辑权限，属于功能权限。

　　点击每个表单末尾的设置按钮，还可以定义角色对表单的数据权限，包括是否允许处理所有数据，或者是自己和下属的数据，还是数据我拥有的（记得我们有调整过类的“所有者”吗？）还是我创建的数据？

　　您甚至可以为特定字段设置更精细的权限，如上图左下角的窗口所示。

　　完成以上配置后，我们的低代码平台开发工作就完成了。明道云应用系统无需发布，配置后立即生效。所有用户都需要注册一个明道云账号才能使用配置好的系统。配置的应用程序没有单独的应用程序。访问明道云官网登录后即可使用。手机版需要下载明道云APP登录后使用。

　　最后，给大家展示一下移动版应用的截图。这些是自动生成的默认设计，未经调整。

　　

　　三、低代码平台的本质

　　通过上面的例子，相信大家对低代码平台的能力有了直观的感受。

　　软件产品设计的标准结构是MVC模型，即Model（数据）、Controller（逻辑）和View（交互界面）。低代码平台通过几个核心组件完成了MVC三层架构模型。支持，对应MVC模型，三个核心组件分别是数据模型设计器（对应Model）、流程设计器（对应Controller）、页面设计器（包括报表设计器，对应View）。

　　1. 数据模型设计师

　　数据模型设计实现了底层数据对象的定义。正如我们之前提到的，不同的低代码平台有不同的实现数据对象定义的方式。

　　实现数据模型设计器的第一种方法是通过对象编辑器实现数据定义。这种方法具有最高程度的灵活性。将底层数据模型与前端视图分离，模型聚焦底层，视图是可视化呈现。

　　国外的低代码平台Mendix和国内的华为云AppCube都采用这种方式。此外，大型商业软件的低代码平台也采用相同的设计，例如SalesForce和范向。

　　下图是Mendix的对象编辑器，在Mendix中称为Domain Model。事实上，领域模型和对象编辑都属于面向对象编程的概念。严格来说，领域模型与我们之前提到的ER模型并不完全相同。领域模型具有面向对象编程的特点，如泛化和聚合。这些概念不在 ER 模型中。

　　另外，图中显示的是Mendix的Windows客户端版本。除了 Web 版本，Mendix 还提供了更强大的 Windows 客户端。经过简单的体验，这个客户端更像是在开发一个集成编辑器IDE（程序员编写代码的软件平台）。 Mendix 本身也很强大，当然更难学。

　　

　　国外另一款知名的aPaaS产品Outsystems也采用了底层对象驱动的设计，同时也提供了windows版本的客户端。安装后，有一步一步的教程，太棒了！整套IDE风格的产品设计也非常强大，令人印象深刻！

　　

　　华为云的AppCube好像是对象编辑器的设计方法，但是因为我的试用申请没有通过，只是通过帮助文档猜测了一下，无法具体体验，如下图：

　　

　　数据模型设计的第二个实现是表单引擎。

　　对于设计师来说，只需要将底层的数据对象理解为Excel的多个独立表格，每个表格都采用采集data的形式。用户定义数据模型，只需要以采集control的形式定义数据即可。

　　比如下图就是一个适合钉钉的表单编辑器。设计思路与明道云相似。表单编辑器将底层数据设计和可视化呈现打包在一起，非技术人员更容易理解，但也失去了前后端分离的灵活性。

　　

　　2. 流程设计师

　　定义底层数据后，下一步就是定义工作流。对于商业软件产品，工作流是支撑商业运作的核心。业务运营的本质是每个工作流的执行。

　　浅层工作流是一种类似于Workflow的审批流程，是对单个数据对象的处理；深层次的工作流需要能够支持流程中多个数据实体的自动化处理。后者是低代码产品的核心功能之一。如果你没有后者的能力，除了问卷之外，基本上没有系统可以搭建。

　　过程中多个数据实体的自动处理是什么？

　　例如，在销售 CRM 系统中，当潜在客户的状态变为已验证时，它需要自动生成商机记录以进行跟踪并将商机分配给适当的销售。同时，对应的联系人记录和客户记录、商机、联系人、客户的部分字段数据来自牵头实体。

　　此业务逻辑规则需要复杂的工作流编辑器才能实现。在这个自动化流程中，添加、删除、修改和检查四个实体数据（线索、商机、客户和联系人）。

　　下图显示了 Windows 客户端版本 Mendix 中的流程编辑器。

　　

　　下图为国货钉钉一的工作流程编辑器。似乎太简单了。它只是一个审批流程编辑器。或者我还没有找到功能齐全的配置界面？

　　

　　3. 页面设计师

　　对于商业软件产品，主要功能是数据的增删改查，涉及的交互页面多为底层数据对象对应的列表页面和详情页面。此外，它还包括报告和仪表。磁盘和其他类型的页面。

　　页面设计师的设计理念清晰地体现了不同低代码平台的产品理念。总的来说，可以概括为两种。

　　1）纯前端页面编辑器

　　包括报告、列表、视图和表单，所有这些都在这个集成的页面编辑器中实现。比如Outsystems的页面编辑器，如下图：

　　

　　如你所见，这是一套复杂的前端交互组件设计器，包括类似于数据表集合Table Records的集成控件，以及表单控件Form，以及其他类型的控件集合，例如复选框。复选框、单选按钮等

　　在这组编辑器中，操作员可以定义各种类型的前端页面，例如列表页面、详细信息页面、报表和仪表板。再比如Mendix的页面编辑器，设计思路相同，如下图：

　　

　　甚至仪表板也是在同一个页面编辑器中实现的。下图展示了 Mendix 的仪表盘演示：

　　

　　低代码平台的报表设计器组件与传统报表引擎没有太大区别。它基于底层数据，实现前端的可视化输出，包括表格输出和图形输出。以上是第一个前端交互设计的产品形态。可见其功能强大且灵活，学习成本相对较高。

　　2）大大简化的页面配置器

　　The template configuration of different types of pages is mainly divided into the following categories.

　　Of course, low-code products will also provide the configuration of the integrated page, but the function is much weaker than the function mentioned above. The previous article has described the view editor of Mingdaoyun a lot, so I won't repeat it.

　　The picture below is the page editor of Yidao, which shows the editing of the homepage of a certain system. Compared with Mingdaoyun, Yidao's page editor is more complicated and has more powerful functions.

　　

　　Another example, the following picture is a suitable report editor:

　　

　　Data model designer, process designer and page designer are the core of low-code platform. If you understand the MVC layered architecture of software design, it is easy to understand the core product functions of low-code platform and different products Ideas. Of course, different low-code platforms have more powerful features with their own characteristics, and interested readers can study further.

　　四、结语

　　It can be seen that different low-code platforms have different design ideas.

　　There is a trade-off between product ease of use and product flexibility. For example, for the bottom layer of the data, should I choose form-driven design or domain-driven design?两者有很大的不同。 The latter is basically unavailable to non-technical personnel. Although the former is easy to learn and understand, its function is indeed much weaker.

　　Therefore, low-code platforms must clarify the target user group. Is it a professional development aid tool for ISVs or IT teams, or an enhanced efficiency tool for non-technical personnel? The former is more like a super plug-in package of IDE, and the latter is more like a super easy-to-use version of Excel + VBA.

　　For the B-side product manager, experiencing low-code products similar to Mingdaoyun is very beneficial to understanding software design. Whether it is forms, processes, or rights management, all core product design issues will be involved To, and can deepen understanding.

　　In addition, in case the business has a large demand and the R&D is not scheduled, you can use aPaaS to configure it in 3 hours. Who will not give you the annual CEO special award?

　　#专栏作家#

　　Yang Kun, public account: PM Yang Kun (ID: pmYangKun). Everyone is a product manager columnist, author of "Determining the B-side", 12 years of Internet R&D and product design experience, former VIPKID product director, Baidu senior product manager, and now the founder and CEO of Manku Consulting.

　　This article 原创 is published in Renren is a product manager, reprinting without permission is prohibited

　　标题图片来自Unsplash，基于CC0协议

　　奖励作者，鼓励他努力！

　　欣赏

　　一人奖励