NoCode 热身系列：实现一个任务跟踪与管理系统（下）

 本文是NoCode专栏的第三篇，也是基于Amazon Honeycode轻量级任务追踪和管理系统设计与实现的下篇。

• 《NoCode 热身系列：你准备好了吗？》
• 《NoCode热身系列：实现一个任务跟踪与管理系统（上）》

关键字：Amazon HoneyCode, NoCode, NoCode热身系列, 低代码, Honeycode, Builder, Hello World

前文回顾

在上篇中，我们完成了任务追踪与管理系统的以下部分：

1. Honeycode入门
2. 任务追踪应用的功能目标设置
3. 数据模型的定义
4. 数据表的创建
5. 表链接的建立

根据Amazon Honeycode五步迭代应用构建法，

1. 定义要构建的应用
2. 在Tables中定义数据模型
3. 在App Builder中建立用户体验
4. 添加Automations工作流程
5. 应用测试，与团队共享，持续迭代

本文接下来会介绍如何使用App Builder为任务追踪系统创建移动和Web App。

App功能定义

同样需要使用Amazon Honeycode服务构建移动和Web App，无需编程且支持iOS和Android平台。在上篇中，我们提到任务追踪与管理系统的功能目标：

• 用于团队成员跟踪项目中各自的任务
• 用于主管跟踪与管理团队在项目中的任务
• 向团队成员发送自动提醒和告警

其中与App有关的是前两点，即利用App Builder从团队成员和主管两个不同的角度构建交互式用户体检。进一步具体从团队成员和主管两个不同角度来分析App的功能点：

• 团队成员的角度：

1. 能浏览项目中各自任务的描述信息
2. 能调整项目中各自任务的某些字段，如：截止日期、状态、执行人等

• 主管的角度：

1. 能浏览团队成员所有的任务项信息
2. 能浏览团队所有的项目信息
3. 能浏览团队的员工信息
4. 能通过任务项的链接，浏览对应的项目信息
5. 能通过项目的链接，浏览对应的任务项信息
6. 能通过人员的链接，浏览对应的任务项信息
7. 能调整任务项的某些字段，如：截止日期、状态、优先级、执行人等
8. 能调整项目的某些字段，如：启动日期、结束日期、负责人等
9. 能调整员工信息的某些字段，如：座位、电话、部门等
10. 能添加和删除项目、任务项和员工信息

因此，我们需要使用Amazon Honeycode 的App Builder制作2个不同角度的App：

• 任务追踪（员工版）App
• 任务追踪（主管版）App

Amazon Honeycode的App Builder是一种动态、灵活且易于定制的App制作工具，可将表格数据转换为功能强大的交互式移动和Web App，无需编程且支持iOS和Android平台。 App Builder提供了两种创建App的方式，一种是从零（from scratch）开始，另一种是通过设置向导（app wizard）。

为了让读者更清晰了解两者的差异，我们决定任务追踪与管理系统的员工版App采用从零开始的方法，而主管版App采用设置向导。

创建员工版App

从零开始的App制作方法，界面设计、元素形态、数据对象以及属性设置等等都要自己亲手来定义。

以下是任务追踪与管理系统员工版App的制作过程：

1. 单击Builder > App+> Build your own
2. 单击顶部的“App1”，并将其重命名为“任务追踪（员工版）”
3. 双击“Screen name”，并将其重命名为“任务追踪（员工版）”
4. 单击“ +Add objects”>“Column list”
5. 在“Insert column list”弹出窗口中，选择List source: Tasks，然后单击“Create”
6. 单击“状态”列下的“完成”文本，这会在右侧打开一个“DATA CELL PROPERTIES ”面板。 选中“Editable”复选框
7. 对“截止日期”和“执行人”列下的单元格，重复第6步

查看员工版App

点击右上角的“View app”

Web App：

移动App：

创建主管版App

主管版App的制作与员工版App有较大的不同，主要在于界面的设计，即Amazon Honeycode 的App Builder中所定义的“screen”将会有三种，包含项目信息、任务信息和团队信息。这里以任务信息为例：

1. 单击Builder > App+> 选择 App Wizard

2. 选择“Source:”为Tasks，重命名“List screen name:”为“任务信息”，还可通过点击“x”按钮删除不想看到的列，单击并拖动对列进行重新排序
   
3. 单击“Next”以查看“Task: detail screen”，重命名 “Detail screen name”为 “任务项描述”，并通过单击每行旁边的铅笔按钮，使“截止日期”，“状态”，“优先级”，“执行人”行可编辑
   
4. 单击“Next”，查看“Tasks: form screen”，将其重命名为“新增任务项”，然后单击“Done”
   
5. 重命名“App name:”为“任务追踪（主管版）”
   
6. 然后点击“+Add screens”，以此类推增加项目信息和团队信息两个“screen”。
   
7. 单击“Done”。
   

这里主管版App的架子都已经搭好了，不过仍有一些地方需要调整的：

1. 链接产生三个界面（screen）需要调整描述：

• 项目信息下的task detail，重命名为“任务项描述”
• 任务信息下的project detail，重命名为“项目描述”
• 团队信息下的task detail，，重命名为“任务项描述”

2. 清空员工信息中“人员姓名”的相关链接
   

此时主管版App完成制作。

查看主管版App

点击右上角的“View app”，以移动App为例：

然后我们为项目“皋亭”添加了一个“九华山功能开发”的任务，且任务状态为“尚未开始”，再点开“项目信息”的界面，其中“皋亭”项目的进度从 25% 变成了 12.5% ，如预期一样。

添加告警和提醒

在上篇中，我们提到任务追踪与管理系统的功能目标：

• 用于团队成员跟踪项目中各自的任务（员工版App）
• 用于主管跟踪与管理团队在项目中的任务（主管版App）
• 向团队成员发送自动提醒和告警

剩下自动提醒和告警的功能需要实现，利用Amazon Honeycode 的Automations就很容易实现，支持的触发条件包括：定时任务到期、行列变更、单元格变更等。例如：针对任务项的“截止日期”，设置“提早一天”提醒团队执行该任务的员工。

最后一步，该任务追踪与管理系统就可以交付应用测试，与团队共享，并持续迭代了。

总结

虽然这是一个轻量级任务追踪与管理系统，但实际的情况是麻雀虽小五脏俱全。如果采用传统的开发方式，需要雇用全栈工程师进行耗时的定制开发，或者购买昂贵且适配性有限的商业产品。现在借助Amazon Honeycode这样的NoCode平台，这样的任务追踪与管理系统，很快就可以上手制作，而且都是在UI界面上进行操作，直观易用。上下两篇以轻量级任务追踪与管理系统为例，详实地介绍了使用Amazon Honeycode如何设计和实现一个NoCode应用。这里也推荐大家尝试采用类似方法，来变革过去难用低效的工具和系统。

本篇作者