Logo

菜单

发布于 2026-01-06 0 阅读
0

利用现代 API 构建无服务器实时应用程序：GraphQL 实时竞赛

利用现代 API 构建无服务器实时应用程序：GraphQL 实时竞赛

我参加了6月21日至25日为期五天的精彩AWS线上研讨会，每天一个半小时学习一集（共五集）。期间，我使用AWS AppSync、AWS Amplify、Amazon Location Service以及其他众多AWS服务，构建了一个功能齐全的基于F1赛车的应用程序。除了学习如何使用AWS服务构建不同用例的解决方案之外，我本人也是法拉利F1车队的铁杆粉丝……因此，参加这类研讨会对我来说乐趣加倍。我相信你也能从这次研讨会中学到一些对你的项目有所帮助的知识。

然而，就像许多线上研讨会一样，它并非总是一帆风顺 :) 这篇开发日志旨在帮助其他开发者解决我在完成本次研讨会时遇到的问题。即使您没有参加，也不用担心，您仍然可以参考本文的内容完成研讨会。正如F1评论员默里·沃克所说：“开始！开始！开始！”

本研讨会非常适合开发人员、解决方案架构师以及任何希望在 AWS 上开始使用 GraphQL 的人员。主要编程语言是 TypeScript 和 Javascript。不过，您无需具备任何高级编程知识，所有代码均已提供。

本次工作坊大约需要5个小时完成。

虚拟研讨会链接：点击此处

这将带您一步一步地完成研讨会（包括所有代码）。

旧版工作坊链接：点击此处

这原本应该是新的工作坊链接。但是，更新后的版本删除了完成工作坊所需的代码片段。

感谢@dev_007_387ddc3e7f1626418提供工作坊的可用版本。

每集视频

播放列表中的全部 5 集

我还创建了一个包含全部 5 个视频的播放列表，如果您想按顺序观看，请点击这里。

每集幻灯片及实验文件

幻灯片 1-5 和实验文件：点击此处

每位主持课程/讲座的人都准备了配套的幻灯片。您可能会发现这有助于您理解每个部分的概念。

感谢@jjmats发现更新后的研讨会中实验文件已被移除。我这里有一份副本，已经将实验文件上传到上面的 Dropbox 链接中。

第一集

几分钟内即可构建并部署您的无服务器应用程序
视频：第一集 - 演练

Brice Pellé主持了这节课。我发现很难跟上进度，因为我犯了很多错误，而且一边调试一边还要努力跟上。以下是我的一些建议，希望能帮助你更快地掌握要领。

尖端：

请选择俄亥俄州 (us-east-2) 作为您的区域。不要像我一样选择 eu-west-1 / eu-west-2（我人在伦敦，想选择一个离我更近的区域）。亚马逊定位服务仅在特定区域可用，我在 eu-west-1 区域遇到了很多问题，无法正常工作。在 us-east-2 区域则一切正常……

Cloud9 是一款优秀的 IDE 服务。强烈建议您使用它来完成本次研讨会。在第三集视频教程中，您会看到一些错误和警告提示。您可以将其关闭，以避免看到它们。操作步骤：Cloud9 -> 首选项 -> 语言 -> 提示和警告 -> 关闭

Cloud9 - 提示

在课程开始时，我们很多人在首次设置 Cloud9 时都遇到了 VPC 错误。一个简单的解决方法是创建默认 VPC。依次点击“VPC”->“操作”->“创建默认 VPC”。

默认 VPC

在教程视频（实验 1 -> 添加身份验证）57 分 55 秒处，“事件”选项中已选择“读取”和“更新”。请确保同时选择这两项，因为研讨会指南仅指示您选择“读取”。

勾选阅读和更新

第二集

开始学习并使用 GraphQL 进行 API 现代化
：视频教程第二集

Brice Pellé主持了这节课，它是第一天课程的良好延续。我觉得这节课进行得很顺利，可能是因为我在课前就尝试做了这个实验（准备工作）。这样更容易跟上他的讲解。这部分的主要建议是，感到疲倦时一定要休息。设置 DynamoDB 连接的步骤非常详细。一个拼写错误就可能导致你不得不重做整个部分才能找出问题所在。

DynamoDB 表设置

第三集

将实时定位服务集成到您的应用中，以便您可以根据用户所在位置与他们互动。
视频：第 3 集 - 操作指南

正是在这个部分，我发现 eu-west-2 服务器上没有 Amazon Location Service（哎呀，这种事谁都会遇到）。我删除了所有内容，然后重新开始（这次是在 us-east-2 服务器上）。虽然我设法调整了代码，让 eu-west-1 服务器也能正常工作，但为了代码流畅，我还是回到了头开始。这大概是我整个研讨会中最喜欢的功能了。我非常喜欢地理围栏和移动追踪功能。Marcia Villalba 的讲解非常简洁明了。请注意更新正确的 IAM 角色：

我是 -

当你第一次看到地图正常运行时：

追踪运动

来看看我在本期节目中做的这个快速屏幕分享。通过亚马逊定位服务，你可以利用地理围栏和追踪功能来追踪用户的位置。左边是一位用户，右边是另一位已登录的用户（并排显示，方便查看）。你可以实现很多不同的应用场景……（想象一下，根据用户所在的区域（例如法拉利、梅赛德斯、红牛等）来向他们展示不同的内容）：

第四集

将聊天和推送通知集成到您的应用中，通过第二屏幕提升粉丝参与度。
视频：第 4 集 - 操作指南

Derek Bingham会讲解这部分内容。请仔细阅读 Pinpoint 集成的细节。聊天功能的初始设置很简单，但添加图片和标记某人需要仔细设置。我聊天的时候有点儿太投入了 :) 我知道法拉利今年赢不了总冠军，但我们还是可以做梦的……

聊天

第五集

使用 AWS AppSync 进行实时比赛直播

视频：第五集 - 攻略

Stefano Sandrini讲解了第五节。这一部分很容易出错。慢慢来，最好观看Stefano的视频，而不是仅仅按照文字说明操作。在“将实时数据导入你的应用”这一部分，它要求你打开“parameters.json”文件（但实际上并没有parameters.json文件）。不要像我一样，以为他可能指的是function-parameters.json文件。你需要创建一个新的parameters.json文件，并将代码插入到该文件中：

{
    "stepFunctionprocessWorkflowArn": {
    "Fn::GetAtt": [
      "stepFunctionprocessWorkflow",
      "Outputs.Arn"
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

研讨会的最终成果令人惊艳，绝对值得一看你的车在赛道上飞驰的英姿：

现场比赛

概括

这次研讨会非常棒，我非常享受这次学习过程。现在我掌握的知识比开始时多了很多。我一定会将这次研讨会的内容运用到我自己的项目中。我已经学习过这个研讨会大概三次了，但我仍然需要再学习一遍，以理解代码中每个部分是如何交互的。我建议你也这样做。虽然最后一切都运行正常固然很好，但如果你不理解每个部分（代码）的运行机制，就很难将这些知识应用到你正在尝试解决的问题中。欢迎在评论区分享你的想法。如果你在学习过程中遇到任何问题，也欢迎在评论区留言，你也可以在Twitter上找到我：@markramrattan。更多信息和解决方案可以在AWS Amplify Discord上找到。

我这里有一个可以正常运行的版本，所以如果您有任何问题或者想查看某些功能，请告诉我。我可以现场演示一遍，从头开始重新编写代码，不过 AWS 团队成员已经制作了非常棒的视频教程。

清理

本次工作坊使用的许多服务都提供免费版本。但是，请务必在工作坊结束后进行清理，以免产生额外费用。

  • 要清理您的 Amplify 项目，请运行：
amplify delete
Enter fullscreen mode Exit fullscreen mode

  • 要清理您的位置资源，请前往位置服务 AWS 控制台：

    • 地图：选择GraphQlRealTimeRacing并单击“删除地图”。
    • 地理围栏集合：选择MonzaCircuit并单击“删除地理围栏集合”。

  • 如果您在本研讨会中使用了 Cloud9，请前往 Cloud9 AWS 控制台，选择您的环境，然后单击“删除”。

文章来源：https://dev.to/aws-builders/build-a-serverless-real-time-application-with-modern-apis-the-graphql-real-time-race-1b48
Django Boilerplat...
使用 React Hooks 时常...