使用 Google AI Studio 和 Cloud SQL 构建您的第一个数据库支持的 Web 应用

1. 准备工作

如果您曾尝试与朋友或邻居一起组织周末跑步活动，就会知道其中的困难：集合地点淹没在无休止的群聊中，人们不断询问每个人的跑步配速，而新来者始终不确定谁会参加。

在此 Codelab 中，您将构建 Running Club（一个欢迎本地跑者的 Web 应用），解决这个日常问题。本地跑者可以在该应用中浏览喜爱的路线、安排周末聚会、一键回复，并与其他跑者聊天。

为什么此应用需要数据库？

社区应用需要可靠的内存（称为数据库）。跑者添加新的风景路线、回复周六晨跑活动邀请或发布有关停车的评论后，即使他们关闭手机或电脑，这些信息也不会消失。数据库可安全地存储和整理所有路线、参与者名单和会员消息，以便俱乐部中的每个人在打开应用时都能看到最新信息。

您将使用 Google AI Studio 的“构建”模式来构建此应用。您无需自行编写复杂的代码或设置技术基础设施，只需用日常语言描述您的需求即可。Google AI Studio 会生成应用，连接到真实的 Cloud SQL for PostgreSQL 数据库来记住您的数据，并在 Cloud Run 上实时发布应用，以便您的社区可以立即开始使用该应用。

构建内容

您将构建并启动 Running Club，这是一个包含以下内容的社区 Web 应用：

  • Google 登录：使用现有 Google 账号快速安全地登录。
  • 跑步者个人资料：展示跑步偏好和目标配速的会员个人资料。
  • 路线库：包含一系列喜爱的社区路线，其中会显示距离、爬坡难度和集合点。
  • 即将进行的跑步活动安排：一个活动看板，用于整理即将进行的群组跑步活动并将其与路线相关联。
  • 简单的 RSVP：只需点击一下按钮，成员即可表明“我要参加”，并查看还有哪些人会参加。
  • 开展讨论：每次跑步活动都有一个评论区，用于协调细节、提出问题和分享最新动态。

学习内容

  • 了解如何在 Google AI Studio 中使用通俗易懂的单个提示创建可运行的 Web 应用。
  • Google AI Studio 如何自动设置 Google 登录。
  • Google AI Studio 如何创建并连接真实的 Cloud SQL for PostgreSQL 数据库来记住您的数据。
  • 如何通过与 AI 对话来添加新功能并扩展数据库。
  • 如何验证您的俱乐部数据是否在每次访问时都得到安全保存。
  • 如何使用 Cloud Run 将应用实时发布到互联网。
  • 如何在 Google Cloud 控制台中查看实时应用和数据库。

所需条件

  • 新版网络浏览器，例如 Google Chrome。
  • 用于登录 Google AI Studio 的标准 Google 账号。

Cloud SQL 启动版的资格要求和限制

Google AI Studio 提供 Google Cloud 新手体验层级，帮助构建者试用生成式应用和受管理的数据库：

  • 资格要求：
    • 可供使用标准 Google 账号的个人用户使用。
    • 不符合条件的账号包括拥有现有或过往 Google Cloud 结算账号的用户，以及与 Google Workspace、Google Workspace 教育版或 Google 公益支持相关联的账号。
    • 如果您的账号不符合新手体验层级的条件，您仍然可以在 AI Studio 中选择已启用结算功能的现有 Google Cloud 项目，完成本 Codelab。
  • 资源规范：
    • 预配运行 PostgreSQL 18 的 Cloud SQL for PostgreSQL 开发者版实例。
    • 包括 0.5 个 vCPU、2 GB RAM 和 1 GB 存储空间。这应该足以让您每天进行数百次访问，持续几个月或更长时间，具体取决于活动。
    • 支持缩容至零，在没有活跃的数据库连接时自动暂停计算，以节省配额。
  • Quota：
    • 包含每月 50 个计算单位和 10 GB 存储空间的免费配额。

2. 打开 Google AI Studio 并开始创建新应用

首先，在浏览器中打开 Google AI Studio。这是您的创作工作区，您只需描述自己的需求，即可构建和测试应用。

第 1 步：登录 Google AI Studio

  1. 打开网络浏览器（例如 Google Chrome），然后前往 aistudio.google.com。
  2. 点击开始使用，然后使用您的标准 Google 账号（例如 Gmail 账号）登录。

开始使用

  1. 如果您首次访问时系统提示您阅读并接受服务条款，请按照提示操作。

第 2 步：启动新应用

  1. 在底部中央面板中，点击开始构建（或点击右侧面板中的 + 新应用）。

开始构建

3. 从简单提示和 Firebase Authentication 开始

您无需复杂的架构图即可开始使用。您只需一句话即可启动初始应用、配置 Google 登录服务并连接数据库。

输入初始提示

在 AI Studio Build 模式的提示框中，输入以下提示，然后按 Enter 键：

Build a running club web app with a Cloud SQL database
where members can post upcoming runs.

AI Studio 新应用

此链接会自动为您填充提示框。

了解工作区

提交提示后，Google AI Studio 会打开完整的应用工作区。请花点时间查看屏幕上的三个主要区域：

AI Studio 工作区

  • 聊天 / 提示框（底部）：您可以在这里继续使用简单明了的语言与 AI 聊天，以添加功能、调整设计或提出问题。
  • “文件和代码”区域（左侧）：此区域显示 AI 在后台创建的文件。您无需自行编写或修改代码，但可以通过此面板观看 AI 创建应用组件。
  • 实时预览窗口（右侧）：此窗口会实时显示您实际正在处理的应用。生成此窗口后，您可以立即点击按钮、在文本字段中输入内容，并直接在此窗口中测试应用。
  • 代码编辑器（右侧）：显示 AI 生成的实际代码。您可以根据需要进行修改，但不是必须修改。
  • 部署和分享（右上角）：您可以在此处将应用部署到互联网并与他人分享。

Google AI Studio 会自动执行哪些操作

在 AI 处理您的请求时，您可以观看它逐步构建应用：

  1. 设置 Google 登录：AI 会自动集成 Google 登录，以便跑者可以使用其 Google 账号安全登录，而无需管理用户密码或安全设置。
  2. 连接到真实数据库：AI 会设置一个托管式 Cloud SQL 数据库来存储社区的数据。如果系统提示，请点击以启用项目的数据库。

AI Studio 新应用

  1. 整理数据表 (schema.ts)：将数据库架构视为一组整理好的电子表格。AI 会自动为您的应用创建存储结构：
    • users 表：存储会员个人资料、姓名、头像和跑步配速。
    • runs表：存储已安排的活动及其标题、距离、目标配速、地点和日期。
    • comments 表：存储跑步者在每次跑步活动下留下的消息和问题。
    所有这些更改都会在代码区域中自动完成，您可以从预览切换到代码标签页，查看这些类别的组织方式。不过，您无需自行编写代码，一切都会自动完成。AI Studio 新应用（注意：您无需手动编写或修改此代码，AI 会在您要求添加新功能时为您更新此代码！）
  2. 构建可视化界面：AI 会创建您在屏幕上看到的网页，包括标题、即将进行的跑步活动列表、活动创建表单和评论部分。

验证身份验证并运行发布

生成完成后，在 Preview（预览）窗格中测试新应用：

  1. 在预览窗口中，点击会员登录（或点击发布即将进行的跑步活动按钮，系统会触发身份验证）。
  2. 使用 Firebase Auth 对话框通过您的 Google 账号进行身份验证。
  3. 登录后，您的 Google 个人资料名称和头像会显示在导航栏中，并且系统会自动管理您的配速偏好设置。
  4. 在“Post Upcoming Run”表单中，输入标题（例如 Morning 5K Shakeout）。
  5. 选择日期和时间，然后输入会议地点（例如 Central Park West Entrance）。
  6. 点击 PublishRun。AI Studio 新应用
  7. 确认新跑步活动立即显示在即将进行的跑步活动 Feed 中，并显示您的已验证个人资料名称和配速徽章（作为组织者）。AI Studio 新应用
  8. 在跑步的讨论部分中发布一条简短消息（例如 Bringing extra water bottles!），并验证该消息是否显示在评论串中。

4. 构建路线库

跑步俱乐部通常会重复使用热门的本地路线。会员无需反复输入相同的路线信息，只需将喜爱的路线保存到目录中，并在安排跑步时附加这些路线即可。

让 AI 添加路线库

在聊天提示框中，输入以下请求，然后按 Enter 键：

Add a route library where members can save favorite
running routes with atitle, distance in km, difficulty,
and start location. When scheduling a run, allow the
organizer to select a route from this library.

AI Studio 新应用

为了实现此目的，AI 会自动为路线创建一个新的存储表，并将其直接连接到跑步表。借助此连接，当组织者选择路线时，您的应用可以自动提取距离和位置详细信息。

（再次强调，您无需修改此代码，AI 会为您更新数据库结构！）

在预览版中测试新版“路线库”

AI 完成应用更新后，在实时预览窗口中试用新路线功能：

  1. 在应用导航中，点击路线库标签页。如果没有此类标签页，请检查直播预览底部 - 系统可能会要求您按保存按钮来刷新预览。如果此方法无效，请尝试在聊天窗口中与 AI 互动，询问路线库在哪里。
  2. 点击保存新路线（或添加路线），然后填写一些示例详细信息：
    • 路线标题：Riverfront Trail Loop
    • 距离：8.5 km
    • 难度：Moderate
    • 起始位置：Waterfront Pier 4
  3. 点击保存到媒体库。
  4. 现在，点击新路线卡片上的安排跑步按钮，即可使用此路线安排跑步。AI Studio 新应用
  5. 请注意，系统会自动为您填充距离、难度和位置详情！
  6. 点击发布跑步活动，并验证新的群组跑步活动是否显示在首页 Feed 中。

5. 实现回复和成员邀请

社区应用需要您的参与才能蓬勃发展！您可以让跑者查看谁会参加即将到来的跑步活动，只需点击一下即可报名，还可以与好友分享邀请链接。

让 AI 添加回复和邀请

在聊天提示框中，输入以下请求，然后按 Enter 键：

Allow registered members to RSVP ("Join Run") to any upcoming run.
Show the list of attending runners on each run card, display an
attendee counter, and add a copyable invite link.

AI 如何在幕后跟踪参会者

为了跟踪哪些跑者会参加每次跑步活动，AI 会自动在您的数据库中创建一个 rsvps 表。您可以将其视为一种数字报名表，用于将跑者的姓名与特定赛事相关联。

（您无需编写或修改此代码，AI 会自动管理数据库中的此注册表单！）

在预览版中测试回复和邀请

AI 完成应用更新后，在实时预览窗口中测试新的 RSVP 功能：

  1. 在预览窗口中，找到首页 Feed 中的即将进行的跑步活动。
  2. 点击加入跑步活动（或确认出席）按钮。
  3. 确认您的姓名和头像显示在参加跑步的跑者部分，并且参加者计数器增加 1。
  4. 点击复制邀请链接，并验证是否已生成共享链接。

AI Studio 新应用

6. 测试数据持久性和 Cloud SQL 缩减至零

在构建应用时，最重要的是确保社区的信息安全无虞。如果您刷新浏览器、关闭标签页或关闭计算机，您希望在返回时，所有已保存的路线、回复和讨论内容仍然存在。

在此步骤中，您将测试数据是否安全地保存在 Cloud SQL 数据库中，并了解当应用处于空闲状态时，Google Cloud 如何节省能源和费用。

测试刷新应用

  1. 点击 AI Studio 预览窗口中的重新加载按钮（或刷新浏览器标签页）。

AI Studio 新应用

  1. 在预览中查看您的应用：请注意，您创建的所有内容（会员个人资料、已保存的路线、已安排的跑步活动、RSVP 和评论）都还在原来的位置！
  2. 您的应用不仅在屏幕上临时存储了信息，还将其安全地存储在 Cloud SQL 数据库中。

Cloud SQL 如何节省能源和费用（“缩减至零”）

如果跑步俱乐部应用在半夜无人使用，会发生什么情况？

  • 自动休眠（“缩减至零”）：当无人访问应用或报名参加跑步活动时，数据库会自动暂停，以节省资源。
  • 即时唤醒：跑者打开应用或点击邀请链接后，数据库会立即唤醒，并提供您已保存的所有信息，以便跑者立即开始跑步。
  • 零闲置成本：由于在不活跃时会进入休眠状态，因此当应用处于静默状态时，您不会耗尽计算资源。

7. 发布并部署到 Cloud Run

现在，您的跑步俱乐部应用已在预览版中构建并经过测试，可以与您的社区分享了！您无需购买网站托管服务或配置服务器，只需点击一下，即可在互联网上发布您的应用。

将应用发布到网络上

  1. 在 Google AI Studio 的右上角，点击发布按钮。
  2. 系统会显示一个摘要窗口，用于确认详细信息：
    • 托管：托管在 Google Cloud Run 上并部署在 Google Cloud Run 上。AI Studio 新应用
    • 关联的服务：Google 登录和您的 Cloud SQL 数据库。AI Studio 新应用
  3. 点击发布以启动应用。AI Studio 新应用

打开并分享实时应用

  1. 发布完成后，Google AI Studio 会提供您的有效网址以及二维码。AI Studio 新应用
  2. 点击该链接可在新的浏览器标签页中打开实时 Web 应用，也可以使用手机摄像头扫描二维码。
  3. 在手机上试用：在手机上登录，报名参加之前在电脑上安排的某次跑步活动，然后观看参会人数实时更新 - 这得益于共享的 Cloud SQL 数据库！

8. （奖励）在 Google Cloud 控制台中检查资源

Google AI Studio 构建和部署应用时，不会将其锁定在私有的黑盒中，而是会代表您创建可用于生产用途的真实 Google Cloud 服务。您可以将 Google Cloud 控制台视为控制中心，您可以在其中查看实时应用和数据库。

第 1 步：打开 Google Cloud 控制台

  1. 在新浏览器标签页中，打开 Google Cloud 控制台。
  2. 在屏幕顶部，点击项目下拉菜单，然后选择为 AI Studio 应用创建的项目（其名称通常以 continual-run- 开头）。

第 2 步：查看 Web 应用的运行位置 (Cloud Run)

  1. 在顶部搜索栏中，输入 Cloud Run，然后从搜索结果中选择该内容。AI Studio 新应用
  2. 点击您的应用名称（例如 running-club）。AI Studio 新应用
  3. 您可以在此处探索托管您网站的引擎：
    • 指标：显示有多少人访问您网站的实用图表。
    • 日志：实时记录活动，显示访问者与应用互动时发生的情况。

第 3 步：查看数据库的实际效果 (Cloud SQL)

  1. 在顶部搜索栏中，输入 Cloud SQL，然后从搜索结果中选择该内容。
  2. 点击您的 PostgreSQL 数据库实例。AI Studio 新应用
  3. 您可以在此处查看实时数据库的详细信息，确认数据库处于有效状态，可以存储跑步俱乐部的数据。AI Studio 新应用

9. 清理资源

如果您将此应用作为练习项目构建，可以轻松将其删除。如果您打算继续与社区一起使用跑步俱乐部应用，则可以保持该应用运行！

  1. 在 Google AI Studio 中，点击左侧边栏中的我的应用。
  2. 找到 Running Club 应用。
  3. 点击删除应用（或垃圾桶图标）。这样一来，您只需一步即可关闭实时网页并移除测试数据库。AI Studio 新应用

10. 恭喜

您已使用 Google AI Studio 和 Cloud SQL 构建、自定义并发布了第一个以数据库为后端的 Web 应用！

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

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

您的成就

  • 使用简单语言构建应用：通过简单的提示创建了一个完整的社区跑步俱乐部应用。
  • 启用 Google 登录：自动设置使用 Google 账号的安全登录方式。
  • 连接了真实数据库：将存储的路线、预定的跑步活动、RSVP 和讨论安全地存储在 Cloud SQL 中。
  • 通过对话添加功能：只需与 AI 对话，即可构建路线库和 RSVP 跟踪功能。
  • 已实时发布到 Web：只需点击一下即可将应用部署到互联网，并在各种设备上进行测试。
  • 深入了解：探索 Google Cloud 如何托管您的实时 Web 应用和数据库。

后续步骤

您可以继续在 Google AI Studio 中与 AI 对话，为应用添加新功能：

  • 交互式地图：提示 AI 添加地图预览和 GPS 路线。
  • 跑步伙伴匹配：提示 AI 推荐配速目标相近的跑步伙伴。
  • 天气预报：提示 AI 在即将到来的跑步卡片上显示周末天气预报。
  • 照片分享：提示 AI 允许跑者在群组跑步后分享照片。

深入阅读