如何使用 AWS Amplify 构建简单的 Sprint 仪表板

本文最初发表于Hashnode

简介

以上就是我使用 VueJS 构建一个简单的 Sprint 仪表板的方法，并使用 Amplify 进行后端、前端、CI/CD 以及自定义域名的设置。在这篇文章中，我想分享我使用 Amplify 的经验以及一些重要的经验教训 ;)

这是我第一次使用 Amplify 和 GraphQL，Amplify 的易用性给我留下了深刻的印象，它能够快速构建应用程序。然而，我也遇到了一些限制，我将在这篇文章中进一步讨论。

对于前端部分，我使用了Creative Tim提供的免费 VueJS 主题，并根据需要进行了修改。大部分项目设置都是使用Amplify CLI完成的，但我必须在 AWS 控制台中手动设置一些 Amplify 尚不支持的配置。

特征

身份验证和用户管理

对于身份验证，我使用了 Amplify auth API。但是，我没有使用 Amplify 的 UI 预设，而是创建了自定义 UI 组件，用于登录、忘记密码等功能。Amplify 开箱即用地支持 Cognito，配置起来非常简单。我使用 Cognito 用户池来创建和验证用户。我创建了两个用户组——用户组和管理员组。注册不对外开放，因此管理员需要为用户创建一个帐户。

管理员为用户创建帐户后，会发送一封包含临时密码的电子邮件（Cognito 邀请流程）。用户首次登录时会被要求重置密码。

我已经创建了更改登录用户密码的功能以及使用 Amplify Auth API 的未登录用户忘记密码的功能。

仪表盘、待办事项、工单、冲刺

用户登录后，他们就可以访问仪表板，其中汇总了有关当前冲刺和他/她自己的任务的数据。

他们可以在冲刺之间添加、编辑和移动工单。此外，用户还可以在当前冲刺的不同阶段（即待办、进行中、审核、测试和完成）之间移动工单。

为了存储所有这些数据，我使用了Amplify GraphQL API。使用 Amplify CLI 只需几分钟即可完成设置，并且文档中提供了如何使用不同关系建模数据结构的良好示例。一旦我们提供了 GraphQL 模式，Amplify 将自动创建所有 DynamoDB 表、索引、GSI，并且还会生成与 GraphQL 服务通信所需的所有代码（查询、修改和订阅）。这非常方便，我只需要对生成的代码进行微小修改。

这是我的 graphql 定义，它具有 1：多和多：多关系。

type User @model 
{
  id: ID!
  firstname: String
  lastname: String
  department: String
  designation: String
  verified: Boolean
}

type Sprint @model {
  id: ID!
  title: String!
  description: String
  startAt: Int!
  endAt: Int!
  isCurrent: Boolean!
  archived: Boolean!
  createdBy: User! @connection
  tickets: [SprintTickets] @connection(keyName: "bySprint", fields: ["id"])
}

type Ticket @model {
  id: ID!
  title: String!
  description: String
  points: Int
  priority: String!
  type: String!
  status: String!
  reportBy: User! @connection
  assignee: User  @connection
  sprints: [SprintTickets] @connection(keyName: "byTicket", fields: ["id"])
}

type SprintTickets
  @model(queries:null)
  @key(name: "bySprint", fields: ["sprintId", "ticketId"])
  @key(name: "byTicket", fields: ["ticketId", "sprintId"]) {
  id: ID!
  sprintId: ID!
  ticketId: ID!
  ticket: Ticket! @connection(fields: ["ticketId"])
  sprint: Sprint! @connection(fields: ["sprintId"])
}

管理员特定功能

管理员用户比普通用户拥有更多功能。他们可以创建新用户，也可以将现有用户提升为管理员。

为了限制此功能，我使用了Admin Queries API。Amplify提供了一组 HTTP API 来与 Cognito 用户池交互，例如创建用户、删除用户、获取所有用户等。可以轻松地仅允许 Cognito 池中的某些用户组访问这些 API（在我们的例子中，仅限于“管理员”用户）。

管理员还可以创建冲刺、关闭冲刺和编辑冲刺。为了限制普通用户执行这些活动，我只需使用方法提供的用户组值即可Auth.currentAuthenticatedUser()。

Lambda 触发器

Lambda 触发器是设置身份验证流程中自定义功能的绝佳方式。Amplify 提供了一些简单的配置选项。

在这个项目中，我设置了确认后触发器。当用户确认其账户后，我会将该用户添加到“用户”组中。

中心

当我们需要与同一应用程序的不同组件进行通信时，我发现这个功能非常有趣。Hub 是 Amplify 提供的一个简单的发布-订阅实现，开箱即用。

我在这个项目中使用 Hub 的例子之一是在冲刺之间移动工单时从 API 获取数据。使用通道设置调度器和监听器非常简单，无需在 Vue 中进行复杂的父子响应式通信。

调度员：

Hub.dispatch("SprintsChannel", {
  event: "ticketMoved",
  data: {},
  message: "",
});

听众：

Hub.listen("SprintsChannel", (data) => {
  if (data.payload.event == "ticketMoved") {
    this.fetchData();
    this.fetchBacklogTickets();
  }
});

持续部署

我们可以在 Amplify 控制台中轻松设置 CD 功能。在本项目中，我设置了 CD，每次我将代码推送到存储库的“master”分支时，它都会自动构建前端和后端并进行部署。

好处是我们可以轻松地为不同的环境设置不同的分支。当我们拥有生产、测试和预发布环境时，这将非常方便，这样我们就可以使用不同的分支将代码部署到不同的前端/后端。

自定义域

在本项目中，我使用了自定义域名https://dashboard.pubudu.dev。只需在 Amplify 控制台中点击几下即可完成设置。Amplify 默认提供了一个域名，但我们也可以随时添加自己的域名。

演示

您可以创建一个帐户并试用我的项目。使用以下管理员凭据登录并创建您自己的用户，然后将新创建的用户提升为管理员，以使用所有功能。

https://dashboard.pubudu.dev
用户名：pubudusj@gmail.com
密码：admin123#$

您可以在Github上找到源代码。

功能列表

登录、验证账户、忘记密码
查看仪表板、当前冲刺、积压、已过去的冲刺
创建、编辑、关闭冲刺（仅限管理员）
创建、编辑票证
在冲刺和积压工作之间移动票据
将当前冲刺的票证移动到不同的阶段。
修改自己的个人资料信息、修改密码
创建（邀请）用户（仅限管理员）
将普通用户提升为管理员（仅限管理员）

需要注意的一些要点（经验教训）

虽然在 DynamoDB 中使用单表是最佳实践，但 Amplify/GraphQL API 尚不支持。不过，它会__typename在所有表中创建一个列，这似乎预示着很快就会支持此功能（？）
Amplify 默认不支持邀请用户功能。因此，我不得不使用自定义方法adminCreateUser在管理查询中使用 Cognito 的功能。此外，用户首次登录时，其帐户将处于NEW_PASSWORD_REQUIRED尚未确认用户的状态。因此，我必须检查此状态，并向用户提供密码更改表单，以便在首次登录时更新密码。
由于 Amplify 尚未提供用户邀请功能，因此我不得不手动修改 Cognito 中的用户邀请消息。
目前，我们可以授予特定用户组访问所有管理 API 的权限。我们无法为不同的 API 指定/限制不同的用户组。
当我们的数据模型中存在多对多关系时，仅使用两个表会很麻烦。因此，最佳选择是使用第三个表来维护这种关系。我SprintTickets为此使用了 DynamoDB 表，并@model(queries:null)在定义中进行了标记，因为该表不直接用于查询。

有用的链接/资源

反馈

我希望你能试用我的项目并提供反馈。我的前端技术不太强，所以我相信肯定有更好的方法来实现这些功能。:)

继续建设...继续分享..！

文章来源：https://dev.to/aws-builders/how-i-built-a-simple-sprint-dashboard-with-aws-amplify-7fj