NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)

NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第1张图片
「关注」并「星标」我们,
每天接收关于亚马逊云科技的最新资讯!

为了敏捷适应业务快速发展对数字化系统的需求,提高企业数字化转型速度,减少对专业技术和人才技能的依赖,全球范围内,NoCode 开发已经进入了快速增长期。

Gartner 曾表示,到 2024 年,低代码和无代码工具将占到企业内部所有应用开发的 65%;同时 Forrester 也预计,到 2024 年,低代码应用工具将发展成为一个规模达到 210 亿美元的市场。

在这样的趋势下,亚马逊云科技推出了 Amazon Honeycode 这项新服务。使用该服务,任何人无需编码即可构建移动和 Web 应用程序。在 NoCode 实战系列上篇,我们介绍了基于 Amazon Honeycode 开发一个任务跟踪管理应用的过程中,该如何确定所要实现的功能,建立数据模型和数据表,以及如何将表链接在一起。错过的小伙伴儿可以点击下方图片回看哦~

NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第2张图片
点击图片,阅读《NoCode 实战 | 零代码应用开发,
轻松搞定任务跟踪管理难题(上)》

作为下篇,今天的内容我们将以此为基础
通过 Amazon Honeycode 五步迭代法
介绍如何使用 App Builder
为任务追踪系统创建移动和 Web App!

小Tip
本文是 NoCode 专栏的第三篇(共八篇),敬请期待我们接下来的内容哟~

App 功能定义

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

NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第3张图片

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

NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第4张图片

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

● 任务追踪(员工版)App
● 任务追踪(主管版)App

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

NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第5张图片

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

创建员工版App

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

NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第6张图片

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

NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第7张图片
NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第8张图片

查看员工版App

点击右上角的“View app”;

Web App

NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第9张图片

移动 App:

NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第10张图片NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第11张图片NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第12张图片

创建主管版App

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

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

NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第13张图片

2、选择“Source:”为Tasks,重命名“List screen name:”为“任务信息”,还可通过点击“x”按钮删除不想看到的列,单击并拖动对列进行重新排序;

NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第14张图片

3、单击“Next”以查看“Task: detail screen”,重命名 “Detail screen name”为 “任务项描述”,并通过单击每行旁边的铅笔按钮,使“截止日期”,“状态”,“优先级”,“执行人”行可编辑

NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第15张图片

4、单击“Next”,查看“Tasks: form screen”,将其重命名为“新增任务项”,然后单击“Done”;

NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第16张图片

5、重命名“App name:”为“任务追踪(主管版)”;

NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第17张图片

6、然后点击“+Add screens”,以此类推增加项目信息和团队信息两个“screen”;

NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第18张图片

7、单击“Done”。

NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第19张图片

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

1、链接产生三个界面(screen)需要调整描述:

image.png

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

NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第20张图片

查看主管版App

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

NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第21张图片NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第22张图片NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第23张图片
点击图片查看大图

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

NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第24张图片NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第25张图片
点击图片查看大图

添加告警和提醒

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

NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第26张图片

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

NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第27张图片
NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第28张图片

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

朋友们,看完了以上详细的步骤
让我们看看下面这个视频
一起再次回顾下操作步骤吧!

虽然这是一个轻量级任务追踪与管理系统,但实际的情况是麻雀虽小五脏俱全。如果采用传统的开发方式,需要雇用全栈工程师进行耗时的定制开发,或者购买昂贵且适配性有限的商业产品。现在借助 Amazon Honeycode 这样的 NoCode 平台,这样的任务追踪与管理系统,很快就可以上手制作,而且都是在 UI 界面上进行操作,直观易用。

上下两篇以轻量级任务追踪与管理系统为例,详实地介绍了如何使用 Amazon Honeycode 设计和实现一个 NoCode 应用。这里也推荐大家尝试采用类似方法,来变革过去难用低效的工具和系统。

本文作者介绍

NoCode 实战 | 零代码应用开发,轻松搞定任务跟踪管理难题(下)_第29张图片

黄帅
亚马逊云科技专业服务部
架构现代化咨询顾问

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

你可能感兴趣的