GSP1337

概览

在本实验中，您将学习如何在 Google AI Studio 中快速开发应用原型。此外还将探索预构建的 AI 应用，学习如何使用模板创建自己的应用，如何使用和优化文本提示，以及如何管理和分享您的作品。在本实验中，您将扮演黑客马拉松大赛中的解决方案开发者角色，目标是在规定时间内快速构建并分享数个概念验证 AI 应用。

学习内容

在本实验中，您将学习如何完成以下操作：

• 探索 Google 预构建的应用。
• 使用模板构建应用，并在代码助理的帮助下修改应用。
• 通过单个文本提示，构建数据驱动型应用。
• 保存、下载和查看应用原型。

设置和要求

点击“开始实验”按钮前的注意事项

请阅读以下说明。实验是计时的，并且您无法暂停实验。计时器在您点击开始实验后即开始计时，显示 Google Cloud 资源可供您使用多长时间。

此实操实验可让您在真实的云环境中开展实验活动，免受模拟或演示环境的局限。为此，我们会向您提供新的临时凭据，您可以在该实验的规定时间内通过此凭据登录和访问 Google Cloud。

为完成此实验，您需要：

• 能够使用标准的互联网浏览器（建议使用 Chrome 浏览器）。

注意：请使用无痕模式（推荐）或无痕浏览器窗口运行此实验。这可以避免您的个人账号与学生账号之间发生冲突，这种冲突可能导致您的个人账号产生额外费用。

• 完成实验的时间 - 请注意，实验开始后无法暂停。

注意：请仅使用学生账号完成本实验。如果您使用其他 Google Cloud 账号，则可能会向该账号收取费用。

打开 Google AI Studio

1. 点击开始实验。实验面板将显示此实验的临时凭证。

   • 注意：如果实验需要付费，系统会提示您选择支付方式。

2. 在无痕式窗口中打开 Google AI Studio。系统会显示 Google 登录页面。

   • 提示：为了方便操作，请将实验和 AI Studio 这两个标签页分别放在不同的窗口中，并排显示。

3. 复制下面的用户名，将其粘贴到电子邮件字段，然后点击下一步。

   {{{user_0.username | "Username"}}}

4. 复制下面的密码，将其粘贴到输入密码字段中，然后点击下一步。

   {{{user_0.password | "Password"}}}

5. 接受屏幕上显示的任何条款及条件，然后继续操作。

您现在已使用临时学生账号登录 Google AI Studio。

任务 1. 探索预构建的应用

作为黑客马拉松大赛中的开发者，您的首要任务是迅速审视全局，看看有哪些构建块和示例能助您一臂之力。首先，您将探索一个预构建的聊天机器人应用。

1. 在左侧导航菜单中，点击“Build”（构建）选项上方的 Enable saving（启用保存），然后选择您的用户名。

2. 点击 Build（构建）。

3. 依次点击 Gallery > All apps（应用库 > 所有应用）标签页，然后滚动浏览预构建的应用模板库。

4. 找到 ChatterBots 应用，然后点击它。

注意：如果您看到“Failed to store recent Application”（无法存储最近的应用）这一出错提示，即表明您尚未授予对 Google 云端硬盘的访问权限。若要解决此问题，请前往左侧边栏中的 History（历史记录）部分，启用 Google 云端硬盘访问权限。点击 Allow Drive access（允许访问云端硬盘），系统会打开一个新的弹出式窗口。在该弹出式窗口中，选择您的学员账号（例如 student-XX-YYYY@qwiklabs.net），然后授予所有必要的权限以继续操作。

5. 点击 Allow（允许），授予对 Microphone（麦克风）的访问权限。

6. 应用将在 IDE 视图中打开。花点时间熟悉一下界面：左侧是代码助理，中间是代码编辑器/文件查看器，右侧则是运行中的聊天机器人的实时预览。

7. 预览应用，探索 ChatterBot 预设，并根据您定义的特征创建自己的 ChatterBot。

8. 查看生成的代码。在代码编辑器中，点击 Show file tree view（显示文件树状视图）按钮以查看代码结构。点击 App.tsx 等文件可查看主应用代码，点击 components 文件夹中的文件可查看特定界面元素的构建方式。

探索预构建的应用

任务 2. 基于模板生成应用原型并加以修改

接下来，您决定为黑客马拉松项目开发一个简单的抽认卡实用程序。您将通过模板生成一个实用程序，然后使用代码助理快速更改其外观，以契合项目的品牌风格。

生成应用

1. 点击 Back to start（回到起始位置），然后点击左上角的 Google AI Studio 徽标返回首页。

2. 在左侧导航菜单中，依次点击 Build > Start（构建 > 开始）。

3. 找到并点击 Flash UI 模板以生成应用。

在代码助理的帮助下修改应用

1. 在右侧的 Preview（预览）窗格中，试着操作默认的抽认卡，了解它们的功能。

2. 在输入字段中输入 Large Language Models（大语言模型），然后点击箭头即可生成一组与特定主题相关的抽认卡。

3. 现在，请将注意力集中到左下角的代码助理输入字段。输入以下命令以更改应用样式和逻辑：

将抽认卡的背景色改为浅绿色，并调整其翻转逻辑，确保每次只能翻开一张卡片。

4. 点击 Send prompt（发送提示）。观察助理如何在编辑器中修改应用代码。

注意：如果您看到“Remix”（改换风格）按钮，请点击该按钮，然后点击“Apply”（应用）并确认。

5. 代码更新完毕后，在 Preview（预览）窗格中测试这两项更改。确认抽认卡为浅绿色，并且一次只能翻开一张卡片。

6. 接下来，您将添加另一项功能。在代码助理输入字段中，输入以下新命令：

创建一个“再加 5 张”按钮，生成 5 张不重复的新抽认卡。

7. 点击 Send prompt（发送提示），然后您会看到助理在界面中添加了一个新按钮，并修改了代码以融入新的逻辑。

8. 最后，在 Preview（预览）窗格中测试新功能。依次点击新增的 Surprise Me > add 5 more（随机 > 再加 5 张）按钮，确认您的抽认卡组中又添加了 5 张不重复的抽认卡。

9. 点击应用名称 Flash UI 旁边的铅笔图标，将应用重命名为 Flashcard Maker，将说明保留为默认值，然后点击 Save（保存）。

点击 Check my progress（检查我的进度），验证是否已完成目标。

基于模板生成应用原型并加以修改

任务 3. 使用文本提示构建应用

现在，我们来参加黑客马拉松的压轴活动：从头开始构建核心功能。您将通过简明的英文描述构建一个旅行行程规划工具，并明确指示模型创建可以清晰呈现结构化数据的界面。

1. 返回到 Build（构建）页面库。

2. 在页面顶部的主文本提示栏中，输入以下详细请求：

开发一款为目标城市定制 3 日游行程的应用。应用中必须提供一个用于输入城市名称的字段。输出内容应是一个结构清晰的计划，包含日期、时间和活动，以整洁的格式呈现。

3. 点击 Build（构建），然后等待代码助理生成完整的应用。

4. 应用显示后，在 Preview（预览）窗格中测试其功能。在城市输入字段中，输入 Rome（罗马），然后按 Enter 键。

5. 观察输出内容。应用应显示一份精心规划的罗马 3 日游行程，这表明 AI 已根据您的文本提示，成功创建了数据驱动的界面。

6. 点击面板顶部应用名称旁边的铅笔图标，将应用重命名为 AI Travel Itinerary Generator，将说明保留为默认值，然后点击 Save（保存）。

7. （可选）尽情发挥您的创意，使用代码助理修改应用的任何部分！

点击 Check my progress（检查我的进度），验证是否已完成目标。

使用文本提示构建应用

任务 4. 保存、下载和查看应用

旅游行程规划工具的原型已正常运行！黑客马拉松的最后一步是下载当前成果，并将项目分享给团队成员。

您的应用现已保存到“Build”（构建）页面的“Your apps”（您的应用）部分。

1. 点击同一工具栏中的 Download（下载）图标。系统会将包含该应用完整源代码的 ZIP 文件下载到您的计算机上。

   • 注意：您可以使用此代码在自己的编辑器中继续进行本地开发。

2. 了解如何发布应用。点击同一工具栏中的 Deploy App（部署应用）按钮。

   • 注意：在本实验中，我们不会完成完整的部署流程，但此步骤会向您展示在 Google Cloud 上发布应用的集成路径。

查看应用原型

1. 前往首页，然后点击左上角的 Google AI Studio 徽标。

2. 在左侧导航菜单中，点击 Build（构建）。

3. 依次点击 Your apps > Created by you（您的应用 > 您创建的应用）标签页，查看您修改和构建的应用原型。您应该会看到两个应用：Flashcard Maker 和 AI Travel Itinerary Generator。

恭喜！

恭喜！您已成功使用 Google AI Studio 从头开始快速探索、调整和创建功能性应用原型。您学习了如何利用预构建的模板、使用自然语言修改代码，以及如何通过单个文本提示生成完整的数据驱动型应用。现在，您已经做好充分准备，可以将自己的 AI 赋能创意付诸实践了。

Google Cloud 培训和认证

…可帮助您充分利用 Google Cloud 技术。我们的课程会讲解各项技能与最佳实践，可帮助您迅速上手使用并继续学习更深入的知识。我们提供从基础到高级的全方位培训，并有点播、直播和虚拟三种方式选择，让您可以按照自己的日程安排学习时间。各项认证可以帮助您核实并证明您在 Google Cloud 技术方面的技能与专业知识。

上次更新手册的时间：2026 年 3 月 12 日

上次测试实验的时间：2026 年 3 月 12 日

版权所有 2026 Google LLC 保留所有权利。Google 和 Google 徽标是 Google LLC 的商标。其他所有公司名和产品名可能是其各自相关公司的商标。