因为远程办公导致缺乏运动，所以我组织了一场在线接力赛的故事

1 年 ago
雅, 悟
3 minutes

这篇文章是关于什么的？

因为我们在一个有趣的跑步团队中进行在线接力赛，所以我尝试制作了一个用于记录和统计的接力赛应用程序。总体上，这是我使用Amplify+React制作的作品（并没有涉及到深入的设计洞察之类的东西，汗）。

为了防止在远程办公的情况下运动不足，组织了在线接力赛的事件经过。

由于我们公司主要采用远程办公，如果不注意的话，一天的步数很容易变成两位数！因此，我们决定组织在线跑步团，并每两个月举办一次在线接力赛。（自去年11月开始）

大概参加者的人数在20至30人之间。我们会组成4人一队的团队，通常情况下每个人会跑5公里。

这是一个IT技术博客吗？

我真的很厉害。现在我们慢慢转向技术的讨论了。
最初，我们使用电子表格进行记录和排名计算，但这太麻烦了。
总之，我就是不想在工作之外碰电子表格！

所以，我决定利用Amplify+React来构建一个简易的记录和统计系统。

系统概念图

跑步圈子本身作为Discord某个服务器中的一个频道来运营，跑步者的记录是通过私信向我报告的。
用图来表示的话，可以看作是“社群”这个部分。

目前的情况是，我会统一进行系统输入并进行记录汇总。然后，我会手工制作表彰状，并在Zoom会议中进行表彰仪式和庆祝活动。

arch.png

可能未来会有一个构想，即让跑步者在网络应用程序中（通过智能手机以渐进式网络应用的形式展开）输入记录，并自动生成颁奖仪式的文件。不过由于这个需求并不是非常迫切，所以可能只会止步于构想的阶段。

系统的详细说明 de

系统内部的说明将由AWS官方教程等相关资料提供，但在这里，我想简单记录两点类似感想的内容。详细情况稍后会提及。

    1. 強化CLI需要经验（当然了）

 

    1. 所以，建议先做教程，然后用”amplify delete”删除云资源，再重新做一遍。

 

    1. 对GraphQL了解太少了

 

    没有实际使用过，只是知道它的存在，但一旦需要使用，就会感到一头雾水！做不知道的事情确实很有趣，但这次为了赶上接力赛时间，代码相当”糟糕”了。

无论如何，试试触摸Amplify吧！

https://docs.amplify.aws/start的公式教程入口

我认为最好使用英文版而不是日文版来完成教程。
除了React之外，还有Vue、Angular、Android、iOS、Flutter等。
每个教程似乎在内容上都有一些不同，但总体而言，我们在构建一个Todo应用并集成认证功能（Cognito）时，这些内容是共通的。
接下来，我们将以React作为例子来进行下一步的讲解。

使用AmplifyCLI时的困难点（也许只有我？）

前提条件

在这个页面上，安装所需的东西，并执行“amplify configure”。如果不熟悉AWS，这可能会很困难。

需要创建具有管理员权限的IAM用户，并需要提供ACCESS_KEY等信息。（现有IAM也可使用）
总之，创建了一个具有相当高权限的IAM用户，所以请务必妥善管理好ACCESS_KEY等信息。

这里是一次设置后，再次以后可以省略。

建立完整的全栈项目

如果你有使用过React，那么我认为没有什么难点。
如果没有特别要求的话，我认为你可以继续使用默认设置进行”amplify init”命令。

在此时，将在AWS上创建IAM角色和S3存储桶（部署存储桶）。由于Amplify命令是基于CloudFormation的封装，所以要了解生成了什么，请查看CloudFormation的堆栈。（每次查看堆栈可以更深入地理解和了解操作的工作原理）

将API和数据库连接到应用程序中

这里对我个人来说是最困惑的地方。
作为预先准备，我认为在设计API时即使是草草快速完成也是好的。
高亮？现在要编辑模式吗？？这是被问到的地方。
虽然这个可以推迟处理也没问题，但在将其推送（部署）到云端之前，有必要在心理上事先准备好，这很重要。

% amplify add api
? Select from one of the below mentioned services: GraphQL
? Here is the GraphQL API that we will create. Select a setting to edit or continue Name: reactamplified3
? Provide API name: myapi
? Here is the GraphQL API that we will create. Select a setting to edit or continue Authorization modes: API key (de
fault, expiration time: 7 days from now)
? Choose the default authorization type for the API API key
? Enter a description for the API key: demo
? After how many days from now the API key should expire (1-365): 7
? Configure additional auth types? No
? Here is the GraphQL API that we will create. Select a setting to edit or continue Continue
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)

⚠️  WARNING: your GraphQL API currently allows public create, read, update, and delete access to all models via an API Key. To configure PRODUCTION-READY authorization rules, review: https://docs.amplify.aws/cli/graphql/authorization-rules

GraphQL schema compiled successfully.

Edit your schema at /Users/akiraabe/Documents/practice/amplify/react-amplified3/amplify/backend/api/myapi/schema.graphql or place .graphql files in a directory at /Users/akiraabe/Documents/practice/amplify/react-amplified3/amplify/backend/api/myapi/schema
? Do you want to edit the schema now? (Y/n)
Screen Shot 2021-12-20 at 11.22.32.png

顺便提一下，在驿传应用的情况下，模式已做以下更改。

# This "input" configures a global authorization rule to enable public access to
# all models in this schema. Learn more about authorization rules here: https://docs.amplify.aws/cli/graphql/authorization-rules
input AMPLIFY { globalAuthRule: AuthRule = { allow: public } } # FOR TESTING ONLY!

type Record @model {
  id: ID!
  name: String!
  discordId: Int!
  time: Int!
  turn: Int!
  team: String!
  result: String!
  description: String
}

请按照教程继续进行。

如果你遇到困难的话，我建议你可以去Discord的用户群里问问，可能会有帮助。（抱歉回答比较草率）

我太不了解GraphQL了。

因此，我选择了GraphQL，因为教程已经不再使用REST，而是使用GraphQL作为标准。然而，我对如何使用GraphQL一无所知，完全摸不着头脑。

暂且，我会通过Amplify自动生成的”queries.js”来查看listRecords。

export const listRecords = /* GraphQL */ `
  query ListRecords(
    $filter: ModelRecordFilterInput
    $limit: Int
    $nextToken: String
  ) {
    listRecords(filter: $filter, limit: $limit, nextToken: $nextToken) {
      items {
        id
        name
        discordId
        time
        turn
        team
        result
        description
        createdAt
        updatedAt
      }
      nextToken
    }
  }
`;

似乎是使用过滤器来指定搜索条件。那么该如何实现类似SQL的操作呢！？加油明年的自己！！
至今为止，虽然代码很糟糕，但我优先考虑了接力赛的举办，编写了根据举办次数（time）进行筛选并按照跑步顺序和团队顺序进行排序的处理。（部分代码摘录）

function AllRecordsBoard() {
  const [records, setRecords] = useState([]);

  useEffect(() => {
    fetchRecords();
  }, []);

  async function fetchRecords() {
    console.log("fetchRecords is invoked");
    let filter = {
      or: [{ time: { eq: TIME } }],
    };

    const apiData = await API.graphql({
      query: listRecords,
      variables: { filter: filter },
    });

    apiData.data.listRecords.items.sort((a, b) => {
      if (a.turn + a.team > b.turn + b.team) {
        return 1;
      } else {
        return -1;
      }
    });

    console.log(apiData);

    setRecords(apiData.data.listRecords.items);
  }

  return (
  // 以下略

总结（综合感受）

目前还很难想象在生产环境中使用由Amplify创建的东西，但是通过自定义AWS资源来扩展后端等自定义功能，不断进化着。
来源：https://aws.amazon.com/jp/blogs/news/extend-amplify-backend-with-custom-aws-resource-using-aws-cdk-or-cloudformation/

数年前，我很尴尬地没有想过要在生产环境中使用ECS（容器编排），但现在已经普遍使用了。
所以，也许几年后Amplify也会成为常用工具。我会继续关注，并且即使不能在工作中使用，也打算作为兴趣尝试各种用途。

赠品

虽然整个接力传递应用的源代码令人感到羞耻，但我还是会把它上传。

✖
广告
将在 10 秒后关闭
bannerAds