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 应用。这里也推荐大家尝试采用类似方法，来变革过去难用低效的工具和系统。

本篇作者

黄帅

亚马逊云科技专业服务部 架构现代化咨询顾问。负责企业级客户的云上现代化架构设计和优化、XOps 组织以及运维现代化的转型咨询和实施。在软件研发领域有十多年架构设计、运维及团队管理经验，对 XOps、微服务治理框架、云原生平台运维现代化、大规模分布式系统的可观测性构造与混沌工程实践等有深入的研究和案例经验。