1小时开发Web应用！大学生用这工具逆天了！

对于初入开发行业的开发者，如在校大学生群体，或刚接触编程的群体来说，选择一款记事类、任务清单类Web应用作为自己第一次完整开发的应用案例，是常见的入门练习手段。

因为此类应用业务功能明确，需求简单，又会包含完整的数据库、前端、后端设计与开发流程。数据处理方面，包含完整增删改查业务逻辑；UI交互方面，也包含完整的增删改查业务交互与界面开发，可以说是“麻雀虽小，五脏俱全”。

此类应用虽然简单，但是对于初学者来说还是会存在不小的挑战，需要其拥有数据库、后端开发、前端开发相关技术体系的学习能力以及实施能力。据不完全统计，一个拥有上述技术基础知识概念的初级工程师在完成此类应用时，需要一周左右的时间；而一个完全从0开始学习上述技术的初学者在完成此类应用时，甚至会需要一个月左右时间，当然，其大部分时间将会花在学习以及实施代码调试阶段。

MatrixTask四象限任务管理思维导图 

本文将以一个任务清单类Web应用—“MatrixTask四象限任务管理”为例，使用SnapDevelop IDE低代码开发，阐述如何在1小时内完成应用的设计与开发，并且，通过低代码开发的过程与结果，帮助开发者学习与理解相关技术。

 可视化设计-数据库设计（5min）

 

本应用数据库采用最简单的单表设计即可支持完整的业务。

在SnapDevelop中，只需要打开实体设计器，拖入一个空白表，给表命名task，然后在右侧列名面板点击“添加”增加列即可完成数据表设计，整个过程不到5min即可完成设计。

在列的添加过程中，设计器弹窗会逐步引导用户去填写每列的必要信息，如：列名、数据类型、是否配置为主键、是否是集合、默认值配置等。当初学者完成一个列的添加后，基本能学习到给一个表新增字段需要注意哪些内容。

 

而在传统的开发中，以MySQL为例，初学者要先去学习掌握MySQL数据库相关建表知识、学习SQL语法、学习基本的数据字段类型等才能完成此表的设计。

其中，除了理论知识外，还需要掌握数据相关配套的工具的使用与调试，光表设计这块，预计最快需要1天。

 可视化设计-API设计（20min）

 在设计完task表后，在实体设计器中，点击右上角的“快速创建逻辑”即可基于task表生成基本的CRUD API，包括分页、分组查询等。

 然后，打开生成的task.sdlg文件，进入逻辑设计器界面，可以在左侧看到生成的API。我们可以参考设计器“快速创建逻辑”生成的API，灵活利用逻辑设计器给我们提供的“数据组件”、“基础组件”、“逻辑组件”等实现特定的API业务。如：我的一天、逾期任务、任务回收站、任务完成数量、任务分类统计等。

 

逻辑设计器将API的执行逻辑分解成了一个一个的组件节点，用户在设计API的过程中就能理清楚整个API实现的过程中每一步的数据处理。并且对于每个节点，用户只需要配置好输入的参数、输出结果的模型即可，无需关心中间的实现过程。

除了自动生成的，整个过程中额外设计10个API支撑整个应用业务，大约耗时20分钟左右。

而在传统的开发中，初学者开发这些API，需要去学习后端开发相关、数据库查询相关、搭建项目、手动编码开发，耗时需要一周左右。

 可视化设计-UI设计（30min）

设计完数据库、API后可以根据需求，开始前端页面UI的设计，得力于SnapDevelop UI设计器能将纯UI与数据源结合的设计理念，在拖拽完一个物料，并且配置好其样式、布局、属性后，我们还可以配置其应用的数据（来自于API）。当配置完成后，物料就同时拥有了UI交互展示与数据读取渲染的能力，相当于完成传统开发中前后端联调的工作。

以设计“我的一天”视图为例，拖拽栅格布局、卡片、列表、按钮、对话框等物料到画布，完成纯UI的设计；然后，给每个需要渲染数据的列表，右侧属性面板中配置数据源为API-GetTodayTaskList，并配置好参数以及返回值的数据适配，即可完成“我的一天”页面的设计，耗时约3-4分钟。

整个应用中，包含8个视图，其中 add/edit相关都只包含一个表单容器物料，相对比较简单，整体耗时约半小时左右。

如果采用传统开发，初学者需要掌握基本的前端网页开发技术、Vue框架技术、HTTP通信技术等，开发完前端页面后，还需要接入服务端API处理数据并调试，耗时需要一周左右。

 生成代码与运行应用（5min）

 在生成配置界面，勾选生成服务端应用与前端Web应用。

 

点击生成项目，SnapDevelop将自动基于当前的设计生成项目的Server后端和Vue前端。

 

至此，使用SnapDevelop完成了“MatrixTask任务管理”应用的开发。

右键生成的代码目录，点击运行，可看到运行效果：

与传统开发效率对比

	传统开发	SnapDevelop开发
数据设计	1天	5min
API设计与开发	1周（工作日）	20min
前端页面开发	3天	30min
后端API联调	2天	不需要联调
配置与启动服务	相关开发工具默认自带	5min
测试	1天	不需要额外测试
总计	12天	1小时

 通过对比数据，可以看出，对于此类应用，初学者使用SnapDevelop低代码进行开发是超级高效的。当然，也是得益于“MatrixTask任务管理”类应用需求较为简单，数据采样群体为初学者的因素，放大了其开发效率。但是，在设计与开发的过程中，不难看出，无论是数据库设计能力，还是服务端API设计能力，或是前端UI设计能力，SnapDevelop已经具备了高效可视化开发一个复杂应用的基本能力单元。

产品体验地址https://www.aipuyang.com/