概览

Google Cloud 开发者的日常工作中通常会用到多个不同的 Google Cloud 产品和服务。这些产品使他们能够在云端开发、测试、部署和管理应用。有了 Gemini 的帮助，开发者在使用 Google Cloud 产品时可以结合 Gemini 的互动对话、代码辅助和嵌入式集成服务，让工作变得更高效。

注意：Duet AI 已更名为 Gemini，这是我们的新一代模型。此实验已更新，以反映此变化。在按照实验说明操作时，界面或文档中任何提到 Duet AI 的地方都应视为指的是 Gemini。 注意：作为一项尚处于早期发展阶段的技术，Gemini 可能会生成看似合理但实际上不正确的输出。我们建议您先验证 Gemini 的所有输出，然后再使用。如需了解详情，请参阅适用于 Google Cloud 的 Gemini 和 Responsible AI。

目标

在本实验中，您将使用 Gemini 执行以下任务：

• 使用 Cloud Shell 编辑器中的 Gemini Code Assist 构建一个 Web 应用。
• 将应用部署到 Cloud Run。
• 提示 Gemini 在发现应用中的错误时提供解释和修复建议。
• 借助 Gemini 为应用开发集成测试。
• 结合使用 Gemini Cloud Assist 和 BigQuery，了解如何在表中加载数据以及如何生成和解释查询。
• 结合使用 Gemini Cloud Assist 和 Spanner 来查询事务数据。
• 了解如何借助 Gemini Cloud Assist 来查看应用日志。

设置

对于每个实验，您都会免费获得一个新的 Google Cloud 项目及一组资源，它们都有固定的使用时限。

1. 点击开始实验按钮。如果该实验需要付费，系统会打开一个弹出式窗口供您选择付款方式。左侧是实验详细信息面板，其中包含以下各项：

   • 打开 Google Cloud 控制台按钮
   • 剩余时间
   • 进行该实验时必须使用的临时凭据
   • 帮助您逐步完成本实验所需的其他信息（如果需要）

2. 点击打开 Google Cloud 控制台（如果您使用的是 Chrome 浏览器，请右键点击并选择在无痕式窗口中打开链接）。

   该实验会启动资源并打开另一个标签页，显示登录页面。

   提示：将这些标签页安排在不同的窗口中，并排显示。

   注意：如果您看见选择账号对话框，请点击使用其他账号。

3. 如有必要，请复制下方的用户名，然后将其粘贴到登录对话框中。

   {{{user_0.username | "<用户名>"}}}

   您也可以在实验详细信息面板中找到用户名。

4. 点击下一步。

5. 复制下面的密码，然后将其粘贴到欢迎对话框中。

   {{{user_0.password | "<密码>"}}}

   您也可以在实验详细信息面板中找到密码。

6. 点击下一步。

   重要提示：您必须使用实验提供的凭据。请勿使用您的 Google Cloud 账号凭据。 注意：在本实验中使用您自己的 Google Cloud 账号可能会产生额外费用。

7. 继续在后续页面中点击以完成相应操作：

   • 接受条款及条件。
   • 由于这是临时账号，请勿添加账号恢复选项或双重验证。
   • 请勿注册免费试用。

片刻之后，系统会在此标签页中打开 Google Cloud 控制台。

注意：如需查看列有 Google Cloud 产品和服务的菜单，请点击左上角的导航菜单。

激活 Cloud Shell

Cloud Shell 是一种包含开发工具的虚拟机。它提供了一个 5 GB 的永久性主目录，并且在 Google Cloud 上运行。Cloud Shell 可让您通过命令行访问 Google Cloud 资源。gcloud 是 Google Cloud 的命令行工具。它会预先安装在 Cloud Shell 上，且支持 Tab 键自动补全功能。

1. 在 Google Cloud Console 的导航窗格中，点击激活 Cloud Shell ()。

2. 点击继续。
   预配和连接到环境需要一些时间。若连接成功，也就表明您已通过身份验证，且相关项目的 ID 会被设为您的 PROJECT_ID。例如：

命令示例

• 列出有效的帐号名称：

gcloud auth list

（输出）

Credentialed accounts: - <myaccount>@<mydomain>.com (active)

（输出示例）

Credentialed accounts: - google1623327_student@qwiklabs.net

• 列出项目 ID：

gcloud config list project

（输出）

[core] project = <project_ID>

（输出示例）

[core] project = qwiklabs-gcp-44776a13dea667a6

任务 1. 配置环境和账号

1. 使用您的实验凭证登录 Google Cloud 控制台，并打开 Cloud Shell 终端窗口。

2. 在 Cloud Shell 中运行以下命令，以设置项目 ID：

   PROJECT_ID=$(gcloud config get-value project) echo "PROJECT_ID=${PROJECT_ID}"

3. 将已登录的 Google 用户账号存储到环境变量中：

   USER=$(gcloud config get-value account 2> /dev/null) echo "USER=${USER}"

4. 启用 Cloud AI Companion API 以便使用 Gemini：

   gcloud services enable cloudaicompanion.googleapis.com --project ${PROJECT_ID}

5. 如需使用 Gemini，请为您的 Google Cloud Qwiklabs 用户账号授予必要的 IAM 角色：

   gcloud projects add-iam-policy-binding ${PROJECT_ID} --member user:${USER} --role=roles/cloudaicompanion.user gcloud projects add-iam-policy-binding ${PROJECT_ID} --member user:${USER} --role=roles/serviceusage.serviceUsageViewer

   添加这些角色后，用户即可开始使用 Gemini 助手。

如需验证是否已完成以下目标，请点击检查我的进度： 配置环境和账号。

任务 2. 构建 Web 应用

在本实验中，我们将使用 Cymbal Superstore 杂货店 Web 应用。在本实验的后续任务中，您将使用 Gemini 在该应用中开发并部署一项新功能。在此任务中，您需要构建该应用的前端和后端组件。

配置环境

在 Cloud Shell 中执行以下命令，然后完成接下来的两个子任务。

1. 运行以下命令，以运行 Docker 凭证帮助程序：

   gcloud auth configure-docker

2. 在系统提示继续时，输入 Y。

3. 下载 cymbal-superstore 应用代码：

   gcloud storage cp -r gs://cloud-training/OCBL435/cymbal-superstore .

构建后端

此 Web 应用的后端将实施一个 Inventory API，以供前端用来提取和更新产品。

1. 运行以下命令，以构建后端应用容器映像：

   cd ~/cymbal-superstore/backend docker build --platform linux/amd64 -t {{{project_0.startup_script.inventory_container_image_url|inventory container image url}}} .

2. 将后端容器映像推送到 Artifact Registry：

   docker push {{{project_0.startup_script.inventory_container_image_url|inventory container image url}}}

3. 运行以下命令，将后端部署为 Cloud Run 上的一项服务：

   gcloud run deploy inventory --image={{{project_0.startup_script.inventory_container_image_url|inventory container image url}}} --port=8000 --region={{{project_0.default_region|set at lab start}}} --set-env-vars=PROJECT_ID={{{project_0.project_id | Google Cloud Project ID}}} --allow-unauthenticated

4. 从 gcloud run deploy 命令的输出中复制显示的 Service URL 值。

构建前端

在 Cloud Shell 终端中执行以下命令，构建前端。

1. 更新前端代码以连接到后端的 Cloud Run 端点：

   a. 在 Cloud Shell 菜单栏中点击打开编辑器。

   b. 在编辑器的 View（查看）菜单中，点击 Toggle hidden files（切换隐藏文件）。

   c. 在探索器内的文件夹列表中，选择 cymbal-superstore。

   d. 展开 frontend 文件夹，然后选择文件 .env.production。

   e. 在该文件中，将 REACT_APP_INVENTORY_API_URL 的值替换为您之前复制的 Cloud Run 后端服务端点网址的值。

2. 点击打开终端，然后在 Cloud Shell 中运行以下命令来构建前端：

   cd ~/cymbal-superstore/frontend npm install && npm run build

3. 运行以下命令将前端 Web 应用上传到 Cloud Storage：

   gcloud storage cp -r build/* gs://{{{project_0.startup_script.frontend_bucket_name|frontend cloud storage bucket name}}}

查看 Web 应用

1. 在浏览器中打开一个标签页，然后访问以下网址：

   http://{{{project_0.startup_script.frontend_ip|frontend IP address}}} 注意：如果您看到提示外部 IP 不支持安全连接的弹出式窗口，请点击继续访问网站。

   此 Web 应用将显示 Cymbal Superstore 的首页。

2. 点击 New Arrivals（新上架）。

   您应该会看到一个包含占位商品的模拟前端页面。这是正常现象，因为在本实验的后续任务中，您将实施后端 Inventory API 代码来提供新商品页面。

如需验证是否已完成以下目标，请点击检查我的进度： 构建 Web 应用。

任务 3. 修改 Web 应用后端

接下来，我们使用 Gemini 向 Web 应用后端添加功能。

在此任务中，您需要提示 Gemini 补全代码，以便在应用中实施 /newproducts 端点。

开发 /newproducts 端点

1. 在 Cloud Shell 编辑器中，打开文件 backend/index.ts。

2. 在 index.ts 源代码文件中，滚动至第 91 行，您会看到针对 /newproducts 端点的占位注释：

   // Your code for the GET /newproducts endpoint goes here.

3. 将此占位注释替换为下面的 Gemini 提示：

   // Create a new endpoint /newproducts that uses where filters to retrieve only products that were added within the last seven days and are in stock.

4. 如需提示 Gemini 生成函数代码，请选中整条注释，然后点击灯泡图标 ()。

5. 在 More Actions（更多操作）菜单中，选择 Gemini: Generate code（Gemini：生成代码）。

6. 将光标悬停在生成的代码上，然后在 Gemini 工具栏中点击 Accept（接受）。

   Gemini 即会为 /newproducts 端点填充函数代码。

   注意：Gemini 可能会根据您的提示生成多个代码版本。您可以在工具栏中滚动浏览列表，然后选择一个特定版本。

   生成的代码应该类似于以下内容：

   app.get("/newproducts", async (req: Request, res: Response) => { const sevenDaysAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000); // 7 days ago const products = await firestore .collection("inventory") .where("timestamp", ">=", sevenDaysAgo) .where("quantity", ">", 0) .get(); const productsArray: any[] = []; products.forEach((product) => { const p: Product = { id: product.id, name: product.data().name, price: product.data().price, quantity: product.data().quantity, imgfile: product.data().imgfile, timestamp: product.data().timestamp, actualdateadded: product.data().actualdateadded, }; productsArray.push(p); }); res.send(productsArray); });

7. 如果您生成的代码与上一步中的示例不相同，请将 index.ts 中的代码替换为上一步中的代码。

   请移除 Gemini 可能添加到源文件中的任何额外或不完整的函数代码。

任务 4. 在本地测试应用

现在使用 npm 在本地测试 /newproducts 后端端点。

设置 PORT 环境变量

运行后端之前，您必须先设置 PORT 环境变量。

1. 在 Cloud Shell 编辑器菜单栏中，选择 View（查看）> Command Palette...（命令面板…）。

2. 在命令面板中，输入 user settings json，然后从列表中选择 Preferences: Open User Settings (JSON)（首选项：打开用户设置 [JSON]）。

3. 添加以下属性以更新 JSON 对象：

   "terminal.integrated.env.linux": { "PORT": "8000" } 请务必在 JSON 对象中上一个属性的末尾添加一个英文逗号 (,)。

   添加属性之后，属性对象应类似于以下内容：

   { "window.menuBarVisibility": "classic", "window.commandCenter": true, "http.proxySupport": "off", "workbench.startupEditor": "welcomePageInEmptyWorkbench", "redhat.telemetry.enabled": false, "workbench.layoutControl.enabled": false, "window.autoDetectColorScheme": true, "geminicodeassist.project": "cloudshell-gca", "terminal.integrated.defaultProfile.linux": "Google Cloud Shell", "terminal.integrated.env.linux": { "PORT": "8000" } }

运行后端服务器

1. 在 Cloud Shell 终端中，对应用进行身份验证以访问 Firestore：

   gcloud auth application-default login

2. 按照说明点击链接，对您的 Google Cloud 账号进行身份验证，并在系统要求时复制/粘贴授权代码。

3. 运行以下命令启动后端服务器：

   cd ~/cymbal-superstore/backend npm run start

   后端 Inventory API 服务器即会启动，以下文本显示时即表示它已准备就绪：

   Cymbal Superstore: Inventory API running on port: 8000

调用 /newproducts 端点

1. 在 Cloud Shell 终端菜单栏中，点击 + 打开新终端。

2. 运行以下命令调用 API 端点：

   curl localhost:8000/newproducts

   该命令将返回一条错误消息：

   curl: (52) Empty reply from server

3. 在原来的终端窗口中，查看来自后端的异常跟踪记录。

   根据跟踪记录，导致此异常的根本原因好像是：

   details: ...'The query contains range and inequality filters on multiple fields, please refer to the documentation for index selection best practices: https://cloud.google.com/firestore/docs/query-data/multiple-range-fields.',

任务 5. 借助 Gemini Code Assist 修复后端问题

寻求 Gemini Code Assist 的帮助

1. 在 Cloud Shell 编辑器中，打开 backend/index.ts 文件。

2. 在代码编辑器的菜单栏中点击 Gemini Code Assist Chat（Gemini Code Assist 对话），打开 Gemini Code Assist 对话窗口。

   

3. 在 Ask Gemini（向 Gemini 提问）提示窗格中，输入以下提示，然后点击 Send（发送） ()：

   Help me debug this Firestore client error: The query contains range and inequality filters on multiple fields

   Gemini 会在回答中提供对此错误的解释以及修复建议。以下是示例回答的一部分：

   "The query contains range and inequality filters on multiple fields" in Firestore arises when you try to use range operators (like >, >=, <, <=) or inequality operators (!=) on more than one field in a single query. Firestore's indexing limitations prevent it from efficiently handling such queries.

   Gemini 还会提供用于修复错误的解决方案。

   注意：Gemini 每次运行后生成的回答都是不同的，因此您收到的回答可能与显示的示例不一致。

   若要修复此错误，您只需使用一个不等式过滤条件。

4. 在 backend/index.ts 文件中，从 /newproducts 处理程序内删除以下代码，以移除 quantity 过滤条件：

   .where("quantity", ">", 0)

   删除此代码后，现在只存在一个用于检查时间戳的不等式过滤条件，数量为 0 的商品将不会从 API 响应中过滤掉。

5. 若要移除数量为 0 的商品，请用下面的 if 语句封装 products.forEach() 中的代码：

   if (product.data().quantity > 0) { }

   使用 if 语句封装代码后，products.forEach() 代码应类似于以下内容：

   products.forEach((product) => { if (product.data().quantity > 0) { const p: Product = { id: product.id, name: product.data().name, price: product.data().price, quantity: product.data().quantity, imgfile: product.data().imgfile, timestamp: product.data().timestamp, actualdateadded: product.data().actualdateadded, }; productsArray.push(p); } });

6. 保存 backend/index.ts 文件。

重新测试 API

1. 在终端中运行以下命令，重新启动后端 API 服务器：

   cd ~/cymbal-superstore/backend npm run start

2. 切换至另一个 bash 终端，然后再次运行 curl 命令：

   curl localhost:8000/newproducts

   后端 API 回复一个 json 数组，其中包含最近添加的商品的列表。

3. 在原始 Cloud Shell 终端中，按 Ctrl+C 退出该应用。

任务 6. 测试前端

重新构建并重新部署后端

按照前面介绍的步骤重新构建更新的后端服务容器映像，将该映像推送到 Container Registry，然后将后端服务重新部署到 Cloud Run。为方便起见，在此再介绍一遍这些步骤。

1. 在 Cloud Shell 中，打开一个新终端或使用已打开的终端。

2. 为构建后端容器映像，将它推送到代码库，并将该后端服务部署到 Cloud Run 上，请运行以下命令：

   cd ~/cymbal-superstore/backend docker build --platform linux/amd64 -t {{{project_0.startup_script.inventory_container_image_url|inventory container image url}}} . docker push {{{project_0.startup_script.inventory_container_image_url|inventory container image url}}} gcloud run deploy inventory --image={{{project_0.startup_script.inventory_container_image_url|inventory container image url}}} --port=8000 --region={{{project_0.default_region|us-central1}}} --set-env-vars=PROJECT_ID={{{project_0.project_id | Google Cloud Project ID}}} --allow-unauthenticated

测试 Web 应用

1. 在浏览器中打开一个标签页，然后访问以下网址：

   http://{{{project_0.startup_script.frontend_ip|frontend IP address}}}

   此 Web 应用将显示 Cymbal Superstore 的首页。

2. 点击 New Arrivals（新上架）。

   此页面应该会显示 /newproducts 端点（即您在上一个任务中实施的端点）响应中返回的商品。

任务 7. 借助 Gemini 开发测试

在此任务中，您将在 Gemini 的帮助下为后端中的新 Products API 编写一个测试。

开发测试

1. 在 Cloud Shell 编辑器中，打开 backend/index.test.ts 文件。

   注意：此文件中包含几个简单的测试，这些测试是使用名为 supertest 的工具以及 Jest 测试框架开发的。

2. 在代码编辑器的菜单栏中点击 Gemini Code Assist Chat（Gemini Code Assist 对话），打开 Gemini Code Assist 对话窗口。

   

3. 若要提示 Gemini 帮助您为 GET 端点 /newproducts 编写测试，请输入以下提示并点击 Send（发送）()：

   Help me write an Express.js test using Jest, in typescript, for the GET /newproducts handler in index.ts. The test should check if the response code is 200 and the list of new products is length 8.

4. Gemini 会在回答中提供生成的测试代码。将 /newproducts 端点的 describe 代码块复制并粘贴到 backend/index.test.ts 文件中。

   注意：请仅复制 describe 代码块，无需复制示例中的 import 语句。

运行测试

1. 在 Cloud Shell 终端中运行以下命令执行测试：

   cd ~/cymbal-superstore/backend npm run test

2. test 命令的输出表明所有测试都已执行并通过。

   注意： 输出中还指明，由于 Jest 环境被销毁，测试套件未能运行。您可以忽略此错误并继续执行下一个任务。

任务 8. 结合使用 Gemini 和 BigQuery

在此任务中，您要在 Gemini 的帮助下将数据上传到 BigQuery 的表中，并构建一个查询来从该表中提取数据。

将数据上传到 BigQuery

1. 在 Google Cloud 控制台的导航菜单 () 中，选择 BigQuery。

2. 在 BigQuery 探索器窗格中，依次展开 以及 cymbal_sales 数据集，然后选择表 cymbalsalestable。

   注意：本实验已预配此数据集和表。此表的数据为 CSV 格式，存储在 Cloud Storage 存储桶中。

3. 在 Google Cloud 控制台顶部菜单中点击打开 Gemini ()，然后点击开始聊天，打开 Gemini Cloud Assist 对话窗口。

4. 在 Gemini 提示窗格中，输入以下文本，然后点击 Send（发送）()：

   What bq command can be used to upload CSV data from Cloud Storage to BigQuery?

   查看 Gemini 的回答。此回答中包含 bq load 命令，运行此命令即可将 Cloud Storage 中的数据上传到 BigQuery。

5. 在 Cloud Shell 中，运行以下命令：

   bq load --source_format=CSV --autodetect cymbal_sales.cymbalsalestable gs://{{{project_0.project_id | Google Cloud Project ID}}}-cymbal-frontend/sales_bq_rawdata.csv 注意：此命令中已包含 BigQuery 数据集和表的替代后的名称，以及保存这些 CSV 数据的 Cloud Storage 存储桶的路径。命令还使用了自动检测表架构的选项。

6. 在 BigQuery 界面中，点击刷新 ()。

   查看表的架构。

7. 点击查询。

8. 用以下代码替换默认查询：

   SELECT * FROM `{{{project_0.project_id | Google Cloud Project ID}}}.cymbal_sales.cymbalsalestable` LIMIT 1000;

9. 点击运行以运行查询。

   在结果标签页中，查看包含表数据的查询返回的结果。此表中包含 Cymbal Superstore Web 应用提供的每周商品销售汇总示例数据。

借助 Gemini 生成 SQL 查询

现在使用 Gemini 帮助您生成一个关于每周总销售额的查询。

1. 如需提示 Gemini 生成用于计算下一周（即 8 月 12 日那一周）总销售额的查询，请在之前输入的查询下方的同一个查询字段中，空一行，然后点击空行左侧的 Gemini ()。

2. 在借助 Gemini 生成 SQL 对话框中，输入以下内容：

   # Get sales for total_aug_12

3. 点击生成。

4. 等待 Gemini 生成查询。然后，点击插入。

解释并运行查询

1. 选中该查询并右键点击，然后选择解释当前选择。您还可以点击左侧显示的 Gemini 魔术笔。

   Cloud Assist 对话窗口中将提供关于此 SQL 查询的解释。

2. 点击运行以运行查询。

   查询结果显示在页面底部的结果标签页中。

如需验证是否已完成以下目标，请点击检查我的进度： 结合使用 Gemini 和 BigQuery。

任务 9. 结合使用 Gemini 和 Spanner

本实验已预配 Spanner 实例和包含示例销售交易数据的数据库。

在此任务中，您将使用 Gemini 生成一个 SQL 查询，以从 transactions 数据库中提取数据。

1. 在 Google Cloud 控制台菜单中，点击数据库下的 Spanner。

2. 点击相应的链接以打开 Spanner 实例 Cymbal Superstore Transactions。

3. 如需打开数据库，请点击 transactions-db。

4. 在左侧窗格中，点击数据库下的 Spanner Studio。

5. 点击未命名的查询标签页将其选中。

6. 在“查询”框中，点击借助 Gemini 生成 SQL ()，输入 SELECT，然后点击生成。

   等待 Gemini 提供 SQL 建议。

7. 若要接受建议，请点击插入。

8. 删除 SQL 查询中的 WHERE 子句（如有）。

9. 点击运行执行查询。

   查看查询结果。

任务 10. 借助 Gemini 查看日志

您可以借助 Gemini 在 Google Cloud 上运行和管理服务。在此任务中，您需要按照 Gemini 提供的说明来查看在 Cloud Run 上运行的 inventory 后端的日志。

1. 点击 Google Cloud 控制台顶部菜单栏中的 Gemini Cloud Assist 对话 ()，打开 Cloud Assist 对话窗口。

2. 在 Gemini 提示窗格中，输入以下提示，然后点击 Send（发送）()：

   How can I view the logs for the Cloud Run service called "inventory" in the Google Cloud console?

3. 如需查看 Cloud Run 服务 inventory 的日志，请按照 Gemini 回答中的说明操作。

恭喜！

在本实验中，您学习了如何执行以下任务：

• 在 Gemini 的帮助下，使用 Google Cloud 产品构建、测试和部署应用。
• 提示 Gemini Code Assist 在发现应用中的错误时提供解释和修复建议。
• 在 Gemini Cloud Assist 的帮助下，将数据加载到 BigQuery 的表中，并生成和解释相关查询。
• 将 Gemini Cloud Assist 和 Spanner 结合使用。
• 借助 Gemini Cloud Assist 查看应用日志。

结束实验

完成实验后，请点击结束实验。Qwiklabs 会移除您使用过的资源并为您清理帐号。

系统会提示您为实验体验评分。请选择相应的评分星级，输入评论，然后点击提交。

星级的含义如下：

• 1 颗星 = 非常不满意
• 2 颗星 = 不满意
• 3 颗星 = 一般
• 4 颗星 = 满意
• 5 颗星 = 非常满意

如果您不想提供反馈，可以关闭该对话框。

如果要留言反馈、提出建议或做出更正，请使用支持标签页。

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