使用 AI 启动待办事项 Web 应用

1. 简介

概览

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

在此 Codelab 中，您将构建一个协作式待办事项应用，该应用使用 Firestore 数据库进行永久性存储，并使用 Firebase Authentication 进行用户登录。AI Studio 代理会配置所有后端服务，并编写前端和数据库互动代码。应用完善后，您只需点击一下即可将其直接部署到 Cloud Run。

您将执行的操作

  • 提示 Google AI Studio 开发协作待办事项列表 Web 应用的原型。
  • 配置并启用 Firebase 集成，以预配 Firestore 数据库并设置 Google 登录身份验证。
  • 在互动式预览沙盒中测试应用。
  • 直接从 Google AI Studio 界面将应用部署到 Cloud Run。

学习内容

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

2. 项目设置

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

Google 账号和级别信息

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

3. 在 AI Studio 构建模式下创建待办事项应用

我们来创建应用 shell，并提示 AI 代码助理构建安全层和持久层。

  1. 前往 Google AI Studio 应用面板，然后点击新应用。
  2. 在聊天提示框中，输入待办事项应用的说明：
    Build a collaborative to-do list application using Firebase as a
backend. Users must be able to securely sign in using Google Sign-In,
view their personal tasks, add new task items, toggle status as
completed, and delete tasks. The database must isolate tasks so users
can only view and modify their own records.
  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. 登录后，添加多个任务（例如“查看 Cloud Run 文档”“完成 Codelab”）。
  4. 将一些任务切换为已完成状态，并删除一个任务，以确保客户端处理程序和数据库状态正确更新。
  5. 如果您想更改样式或行为，请通过聊天窗口指示代理。例如：
    • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
    • "Show a count of remaining incomplete tasks at the footer of the task list."
  6. 等待代理更新代码库，然后检查预览浏览器以查看更新。

5. 部署到 Cloud Run

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

  1. 在 Google AI Studio 的右上角，点击发布按钮以启动部署向导。Google AI Studio 发布按钮的位置
  2. 点击开始以配置您的 Google Cloud 项目。
    • 验证目标 Google Cloud 项目下拉菜单是否与您关联到工作区的项目一致。
    • AI Studio 会自动为 Cloud Run 实例生成唯一的服务标识符。
  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 中设计、开发和部署了一个协作式全栈 Web 应用。

如需领取完成构建者实验室后获得的徽章，并寻找其他实验室以继续您的学习之旅，请前往 goo.gle/builders。

了解详情