利用 AI 发布基于网络的电子游戏

1. 简介

概览

如今，使用 AI 构建应用从何处着手？对于我们大多数人来说，这通常从一个简单的查询或原型开始。Google AI Studio 提供强大的构建模式（通常称为“氛围编程”），让您能够使用由 Gemini 模型驱动的代码生成功能来设计、测试和构建全栈 Web 应用。

在此 Codelab 中，您将使用 Firestore 数据库构建一款基于 Web 的回合制视频游戏，其中包含事件源（用于将游戏操作持久化为一系列事件，以便玩家查看比赛历史记录并返回到之前的回合）和用于用户登录的 Firebase Authentication。AI Studio 代理将配置所有后端服务，并编写前端、事件源逻辑和数据库互动代码。应用完善后，您只需点击一下即可将其直接部署到 Cloud Run。

作品集网站的最终版本

您将执行的操作

  • 提示 Google AI Studio 制作一款回合制多人视频游戏 Web 应用的原型。
  • 实现对可分享的短游戏代码或加入链接的支持，以便好友加入同一场比赛。
  • 通过事件源模式实现 Firestore 数据库存储，以跟踪对战历史记录并允许游戏时间旅行（撤消或重放回合）。
  • 配置并启用 Firebase 集成，以预配 Firestore 数据库并设置 Google 登录身份验证。
  • 在互动式预览沙盒中测试应用。
  • 直接从 Google AI Studio 界面将应用部署到 Cloud Run。

学习内容

  • 如何使用 Google AI Studio 的构建模式，通过自然语言快速设计全栈游戏服务原型。
  • 如何使用 Cloud Firestore 实现事件溯源架构模式来存储游戏历史记录。
  • Google AI Studio 如何自动配置 Firebase Firestore 和 Authentication 集成。
  • 如何将 AI Studio 应用作为无服务器容器部署到 Cloud Run。
  • 如何在 Firebase 控制台中检查数据库记录和安全状态。

2. 项目设置

在启动 AI Studio 之前，请验证您的账号状态和前提条件。

Google 账号和级别信息

  1. 如果您还没有 Google 账号，请创建一个 Google 账号。
    • 提示：如果可以，请在此实验中使用个人 Google 账号。群组账号、公司账号或学校账号可能会强制执行 Workspace 政策，以停用实验性功能或云集成。
  2. 查看部署的结算明细：
    • Google Cloud 新手体验层级：允许在所选区域中免费发布最多两个全栈应用，无需建立完整的 Google Cloud 结算账号。
    • 标准部署：连接到现有的付费 Google Cloud 项目，并扩大存储空间限制、CPU 资源和 API。

3. 在 AI Studio 构建模式下创建回合制电子游戏

我们来创建应用 shell，并提示 AI 代码助理构建安全性、游戏逻辑和事件源持久层。

  1. 前往 Google AI Studio 应用面板，然后点击新应用。
  2. 在聊天提示框中，输入回合制视频游戏应用的说明：
    Build a web-based, turn-based Tic-Tac-Toe game using
Firebase as a backend. Users must be able to securely sign in
using Google Sign-In, start a new game match, make moves, and play
against an AI player or another user. Any algorithm used for the
game opponent AI should use simple algorithms like min/max and the
app should not make any calls to an LLM like the Gemini API. To
support multiplayer matches, the application must generate a short
game code or share link that players can easily copy and send to a
friend to join the match. Use Firestore and an event sourcing
pattern to save a history of every move (turn) as a separate event
document in a subcollection under the game document. The
application must reconstruct the current game state by replaying
these events, and must allow users to view previous turns and opt
to restore/roll back the game to a prior turn's state.
    此链接会自动为您填充提示框。
  3. 点击构建以开始生成应用。

当 AI Studio 智能体识别出需要数据库存储和安全的用户登录时，它会触发自动 Firebase 配置流程。

  1. 大约一分钟后，工作区中会弹出一条集成卡片，提示启用 Firebase。
  2. 点击启用 Firebase 按钮以确认并接受服务条款。
  3. 代理将执行后台设置。深入了解：
    • 系统会预配一个 Firestore 数据库实例。
    • Firebase Authentication 已启用，并且 Google 登录也已启用。
    • 已建立服务账号配置（例如，创建包含 API 凭据的 src/lib/firebase.ts）。
    • 添加了包含默认安全边界（用户隔离规则）的 firestore.rules。

4. 测试和迭代

在正式发布服务之前，请在互动式预览中运行验证检查。

  1. 在 Google AI Studio 中打开预览窗格。
  2. 点击“登录”按钮以触发沙盒 Google 登录身份验证。
    • 关于修复错误的注意事项：在生成或测试期间，您可能会因安全规则不一致而偶尔遇到运行时问题、编译错误或 Firestore 权限失败。如果发生这种情况，AI Studio 会在对话中显示修复按钮，让您可以要求智能体自动诊断和修复问题。
    Google AI Studio 修复按钮位置
  3. 登录后，开始新的游戏对局，复制生成的短游戏代码或分享链接，并验证是否可以使用该代码或链接加入对局。
  4. 进行多次移动，并验证比赛记录是否正确呈现。
  5. 尝试返回到比赛的先前回合。确保棋盘或状态更新反映了游戏历史记录中的过去时间点，并验证您是否可以恢复或回滚到该状态。
  6. 如果您想更改样式或行为，请通过聊天窗口指示代理。例如：
    • "Could you style the game board interface using Tailwind CSS and add a retro pixel-art theme?"
    • "Add a 'Turn History' sidebar matching the current state replay that shows when each move was made and by whom."
  7. 等待代理更新代码库，然后检查预览浏览器以查看更新。

5. 部署到 Cloud Run

当原型完全正常运行后，将其作为公共服务部署到 Cloud Run 上。

  1. 在 Google AI Studio 的右上角，点击发布按钮以启动部署向导。Google AI Studio 发布按钮的位置
  2. 点击开始以配置您的 Google Cloud 项目。
    • 验证目标 Google Cloud 项目下拉菜单是否与您关联到工作区的项目一致。
    • AI Studio 会自动为 Cloud Run 实例生成唯一的服务标识符。
    • 您可以选择在部署配置中指定自定义 .ai.studio 网址前缀（例如 your-portfolio-name.ai.studio）。
  3. 如果您是首次部署，并且使用的是标准 Google Cloud 参数，系统可能会提示您指定组织类型并提供结算详细信息。
  4. 点击发布应用。
  5. 容器构建、容器注册和服务部署步骤在后台进行。此过程通常会在 2-4 分钟内完成。
  6. 部署完成后，复制生成的应用网址，然后在浏览器标签页中访问实时应用链接。
  7. 在浏览器中测试实时 Web 应用！

6. 在 Firebase 控制台中检查

深入了解数据架构和用户跟踪方式。

  1. 前往 Firebase 控制台。
  2. 选择您的项目（带有 AI Studio 标签或手动绑定的项目 ID）。
  3. 在左侧导航窗格中，依次选择构建 > Firestore 数据库：
    • 查看应用创建的数据库集合和文档。
    • 验证每个文档的所有者 ID 是否与有效用户的身份验证凭据相符。
  4. 在 Firestore 面板中选择安全性标签页，以查看自动生成的安全指令，这些指令会将读写权限限制为经过验证的文档所有者。
  5. 前往安全性 > 身份验证，查看在登录测试期间填充的有效用户凭据列表。

7. 清理

为避免产生任何意外的结算费用或清理工作区资源，请执行以下操作：

  1. 在 Google AI Studio 中，前往应用页面。
  2. 在网格或列表中找到您的应用。
  3. 点击回收站图标可删除应用状态并从 Cloud Run 中取消发布服务。
  4. 如果您是使用标准项目进行部署的，并且想要完全关闭所有资源，请前往 Google Cloud 控制台项目设置，然后删除底层项目。

8. 总结

恭喜！您已直接在 Google AI Studio 中设计、开发和部署了一款回合制电子游戏。

访问此链接即可申领完成 Builder 学习之旅徽章！

如需继续学习，请前往 goo.gle/builders 参加下一个实验。

了解详情