亚马逊AWS官方博客

使用 Amazon Q Developer 构建多人 TriviaSnake 游戏!

*注:本文转载自 AWS Community,作者 Karthik Subramanian,英文原文链接

咖啡爱好者和技术迷们,大家好。接下来,请大家想象这样一个场景——你正在一边喝咖啡,一边用 Amazon Q Developer 毫不费力地创建一个网站。其实,这正是我现在所做的。

在这篇博客中,我将带大家共同参与我的冒险之旅,通过使用 React、S3、DynamoDB、Lambda、API Gateway 和 Cognito 创建一个浏览器游戏。在此过程中,我将分享 Amazon Q Developer 的 VS Code 集成如何像虚拟咖啡师一样,让开发流程如拿铁一样丝滑。

准备好了吗?让我们一起开启 Amazon Q Developer 的代码世界吧!

准备好迎接 Trivia Snake 的惊险冒险

想象一下,在经典的贪吃蛇游戏(Snake Game)基础上加上趣味问答题(Trivia Questions),这就是我的最新创意。在屏幕上控制贪吃蛇的同时,屏幕左侧会出现趣味问答题。吃掉与正确答案相对应的字母,蛇会变短并进入下一题。但注意,蛇每隔 3 秒会变长。

这个设计最棒的地方是,你可以成为专属自己的冒险旅程设计师!通过简单易用的工具,自定义问答内容。不管你是历史迷、科学爱好者,还是流行文化达人,都可以根据兴趣定制游戏内容。

更棒的是,你可以在自己的 AWS 账户上免费部署和托管这个游戏!

点击这里,感受这场冒险

架构

  • React:游戏的前端框架。
  • CloudFront:提供内容分发服务,用于加载网页。
  • API Gateway:用于创建游戏的 RESTful API,实现冒险创建、分数保存和排行榜功能,同时使用 WebSocket 实现多人联机。
  • Lambda:游戏的后端,用于实现 API 逻辑。
  • DynamoDB:用于存储游戏数据和多人游戏会话信息。
  • Amazon Cognito:用于用户认证和授权。
  • S3:用于存储前端代码和游戏资源。
  • Bedrock:托管 AI 服务,支持基于 Claude Haiku 3.5 实现创建自定义冒险的 AI 功能。

实践

从构思 Trivia Snake 游戏开始,Amazon Q Developer 就成为了我的得力助手,提供了有关如何利用 AWS 的服务实现游戏的宝贵建议。我向 Amazon Q Developer 描述我的游戏概念,它就迅速为我推荐了一套合适的架构——前端使用 React,后端使用 API Gateway 和 Lambda,DynamoDB 进行数据存储,Amazon Cognito 进行用户认证,S3 进行资源存储,CloudFront 进行内容分发。

随着开发的深入,Amazon Q Developer 在每个环节都为我提供帮助。它生成了用于 Lambda 函数、API Gateway 端点以及 DynamoDB 表的代码片段,大大节省了我的时间和精力。然而,Amazon Q Developer 的贡献不仅限于此,它还指导我使用 CloudFormation 来设置基础设施,我惊讶于它能够如此轻松地完成资源创建和权限配置。整个开发过程中,我与 Amazon Q Developer 保持持续的对话。我描述需要实现的功能,它会推荐最合适的 AWS 服务并提供代码示例。这种合作不仅让我完成了 React 的前端开发,还成功实现了 Lambda 函数和基础设施的配置。

真正让人惊艳的是,它提供了一种自动代理功能。只需在聊天中输入 “/Dev”,它就能开始执行请求。我甚至可以在发出请求后离开去冲一杯咖啡,回来时发现 90-95% 的改动已经完成。在很多情况下,我只需直接接受它的修改,就能实时看到这些改动生效,而无需额外操作。当然,有时仍然需要修复一些小问题,这也是预料之中的。令人震撼的是,AI 能够同时修改用户界面、API 层、Lambda 函数,甚至 CloudFormation 模板,从而完成复杂的功能请求。它就像我的私人编程助手一样!

示例:

下面是一个示例,Amazon Q Developer 通过同时修改 React 代码、Lambda 函数和 Cloudformation 模板成功解决了问题:

您可以通过登录并试玩来检查其准确性。

我并未止步于此。在允许用户输入自由文本的情况下,可能会出现一些不适当的内容。因此,我在“创建冒险”按钮上添加了不良词汇检测功能,确保所有被 Claude Haiku 认为不适合所有年龄段的提交都会被阻止。

我想看看我是否能完全依靠 Amazon Q Developer 的指导来实现一个我完全不了解的功能——多人模式。虽然这是整个开发过程中耗时最长的部分(总共花了两天时间),但如果没有这个得力助手帮我完成从 UI 更改到 TypeScript Lambda 代码以及 DynamoDB 表结构的完整功能集,这个过程可能需要至少一周的反复试错,更不要提过程中可能产生的挫败感。尽管我对 WebSocket 完全没有经验,但我还是成功构建了一个多人游戏。

局限性

有时它也会忘记给我提供它创建的文件。例如,在下面的例子中,我要求它将“冒险创建”逻辑移到一个独立的组件中,虽然它正确实现了这个功能,但却忘记给我文件,我不得不再次提示它才拿到文件。

还有几次,Amazon Q Developer 说它做了某些事情,但当我查看实现的代码时,发现某些逻辑缺失。这通常发生在我要求它一次做很多事情时,它就像一个超负荷的助手一样,会遗漏其中的一部分。

总结

Amazon Q Developer 让像我这样的后端开发者能够快速构建一个包含注册、登录、游戏玩法、排行榜、问卷创作、AI 和多人模式的 React 网络游戏,并用基础设施即代码进行部署,整个过程只花费了大约 10 到 12 小时!

参考链接

Github link

Game link


*前述特定亚马逊云科技生成式人工智能相关的服务仅在亚马逊云科技海外区域可用,亚马逊云科技中国仅为帮助您了解行业前沿技术和发展海外业务选择推介该服务。