在整个软件开发生命周期中使用 Duet AI

1. 概览

Google Cloud 开发者的日常工作中通常会用到多个不同的 Google Cloud 产品和服务。这些产品使他们能够在云端开发、测试、部署和管理应用。在 Duet AI 的协助下，开发者可借助 Duet AI 的交互式聊天、代码助理和嵌入式集成功能，在使用 Google Cloud 产品时提高工作效率。

本实验使用 Duet AI 协助部署“Cymbal Superstore”便利店 Web 应用。然后，您将开发和部署新功能，并构建应用的前端和后端。您还可以让 Duet 协助您编写应用测试，并了解 Duet 如何与其他 Google Cloud 工具集成。

目标

您将了解如何：

  • 借助 Duet AI 增强现有 Web 应用。
  • 将应用部署到 Cloud Run。
  • 提示 Duet AI 解释应用中的错误并提供修正方法。
  • 借助 Duet AI 为应用开发测试。
  • 借助 Duet AI 查看应用日志。

前提条件

  • Google Cloud Platform 账号和启用了结算功能的项目
  • 基本 Linux 体验

2. 设置

本部分涵盖了开始此实验所需执行的所有操作。

创建项目

为了更轻松地进行清理，我们来创建一个新的 Google Cloud 项目。

  • 前往 https://console.cloud.google.com。
  • 点击项目选择器下拉菜单
  • 选择“Create Project”
  • 取一个容易记住的名称，比如“intro-to-containers”

在 Google Cloud 项目中启用 Duet AI

我们现在将在 Google Cloud 项目中启用 Duet AI API。请按下面给出的步骤操作：

  1. 前往 https://console.cloud.google.com 并前往信息中心，确保您已选择计划用于本实验的 Google Cloud 项目。点击显示在右上角的 Duet AI 图标。

a4d8a7253b056abb.png

  1. Duet AI 聊天窗口会在控制台右侧打开。点击“启用”按钮，如下所示。如果您没有看到“启用”按钮，而是看到聊天界面，可能是因为您已经为项目启用了 Duet AI，可以直接执行下一步。

58296b10f18b7a37

  1. 启用 Duet AI 后，您可以向其发出一两句查询来测试一下。下面列出了几个示例查询，不过您可以尝试诸如“什么是 Cloud Run？”之类的问题。

8953fb4afeeddb1a

Duet AI 会回答您的问题。您可以点击右上角的 _ 图标关闭 Duet AI 聊天窗口。

在 Cloud Shell IDE 中启用 Duet AI

在此 Codelab 的其余部分，我们将使用 Cloud Shell IDE。我们需要在 Cloud Shell IDE 中启用和配置 Duet AI，相关步骤如下所示：

  1. 通过如下所示的图标启动 Cloud Shell。启动 Cloud Shell 实例可能需要一两分钟的时间。

3b59c357d06c5ab1

  1. 点击“编辑器”或“打开编辑器”按钮（视具体情况而定），然后等待 Cloud Shell IDE 出现。您将使用“新”而不是旧版编辑器

a54576c01be31a97.png

  1. 如图所示，点击底部状态栏中的“Cloud Code - Sign in”（Cloud Code - 登录）按钮。按照说明对插件进行授权。如果您看到“Cloud Code - 无项目”在状态栏中，选择相应项目，然后从您计划使用的项目列表中选择特定的 Google Cloud 项目。

9b77ab79e8c135e6

  1. 如图所示，点击右下角的 Duet AI 按钮，然后选择已启用 Cloud AI Companion API 的正确 Google Cloud 项目。

afa42f64a331ad70.png

  1. 选择并授权您的 Google Cloud 项目后，请确保您能够在状态栏的 Cloud Code 状态消息中看到该信息，并且在右侧状态栏中看到 Duet AI，如下所示：

11656bd6a7ddfea4.png

Duet AI 现已可供使用！

3. 使用 Duet AI

在本实验中，您将创建一个 Web 应用。本实验提供了许多适合使用 Duet 的地方。不过，如果您有兴趣了解一下，还可以在实验室中的任何位置花时间询问 Duet。

例如，您将使用 Terraform 创建和部署基本应用。如果您不知道 Terraform 是什么，可以询问 Duet。如果你想了解每个步骤的作用，Duet 可以为你解释。想要打开代码并询问特定行的内容？快来试试 Duet 吧！

4. 构建 Web 应用

本实验使用的是“Cymbal Superstore”便利店 Web 应用。在本实验的后续任务中，您将使用 Duet AI 在此应用中开发和部署新功能。您需要先使用一些现有代码，然后才能了解 Duet AI 如何帮助您理解现有代码。因此，您现在需要构建此应用的前端和后端组件。

处理此项目时，您将在 Cloud Shell 和 Cloud Shell 编辑器之间切换。使用屏幕顶部的按钮可轻松完成上述操作：

750038c738f1f405

配置环境

在 Cloud Shell 中执行命令。

  1. 设置项目 ID：
gcloud config set project <Google Cloud Project ID>
  1. 如需运行 Docker 凭据帮助程序，请运行以下命令：
gcloud auth configure-docker
  1. 如果系统询问您是否要继续，请输入 Y。
  2. 下载“Cymbal Superstore”应用代码，请从 Cloud Shell 中的根目录运行以下命令。它将从 GitHub 获取 Cymbal Superstore 代码。
git clone https://github.com/GoogleCloudPlatform/cymbal-superstore
  1. 您需要启用多个 API 才能使此代码正常运行。在 Cloud Shell 中，输入以下命令：
gcloud services enable cloudresourcemanager.googleapis.com compute.googleapis.com artifactregistry.googleapis.com serviceusage.googleapis.com run.googleapis.com bigquery.googleapis.com
  1. 切换到所下载代码中的 Terraform 目录：
cd cymbal-superstore/terraform
  1. 由于本实验不会使用 Spanner，因此我们将使用不安装 Spanner 的 Terraform 说明版本。在 Cloud Shell 中，输入以下命令：
mv main.tf.nospanner main.tf
  1. 为了避免每次运行 Terraform 命令时都需输入项目名称和编号，请在此 terraform 目录中创建一个名为 terraform.tfvars 的文件。将包含以下信息的两行内容添加到该文件中，然后保存文件。您可以在项目信息中心内找到这些信息。
project_id="Your project id"
project_number=Your project number
  1. 使用以下代码初始化 Terraform：
terraform init
  1. 最后，使用以下命令将 Terraform 资源部署到您的项目。系统可能会提示您输入“yes”部署容器。此过程最多可能需要 10 分钟，因此您可能需要花些时间访问 https://github.com/GoogleCloudPlatform/cymbal-superstore/blob/main/assets/architecture.png 查看架构图。您还可以查看现有代码，并使用 Duet 来帮助我们理解。
terraform apply

成功完成此命令后，您应该会看到类似于以下内容的输出：

9c9d2378167312eb

  1. 更新前端，以便与输出中的后端 inventory_cr_endpoint 进行通信。为此，请复制 inventory_cr_endpoint 的值，打开 cymbal-superstore/frontend/.env.production，然后替换 REACT_APP_INVENTORY_URL 的值。
  2. 重新运行 terraform apply。这应该只需要一分钟时间，因为它会使用更新后的后端网址将您的前端 React 应用重新部署到 Cloud Storage。
  3. 在浏览器中打开 frontend_ip。您应该会看到 Cymbal Superstore 前端。更改可能需要几分钟才能生效，因此您可能需要进行多次检查。

b864d3efe9a26eaa.png

  1. 点击 Cymbal 首页左侧的 New Arrivals（新品上架）。您应该会看到一个包含占位商品的模拟前端页面。这属于正常现象，因为在本实验的下一个任务中，您将实现后端 Inventory API 代码以投放“新产品”页面。

f4d7579f73ee8ed2.png

5. 修改 Web 应用后端

现在，我们使用 Duet AI 为 Web 应用后端添加功能。

在此任务中，您将提示 Duet AI 补全代码，以在应用中实现 /newproducts 端点。您将在后端创建一个端点，以从 Firestore 检索新产品，并在部署更改之前测试此端点。

开发 /newproducts 端点

  1. 在 Cloud Shell 编辑器中打开 cymbal-superstore/backend/index.ts 文件。
  2. 在 index.ts 文件中，滚动到 DEMO TASK START 第 95 行左右的注释，您会看到此任务被注释掉的一组代码行。移除所有注释行，并将其替换为以下 Duet AI 提示：
// Get new products from Firestore (added < 7 days ago) and quantity > 0 (in stock)
  1. 如需提示 Duet AI 生成函数代码，请选择整条注释，然后点击灯泡图标 ( Code OSS Duet AI 灯泡)。
  2. 在“更多操作”菜单中，选择“生成代码”。
  3. 将鼠标悬停在生成的代码上，然后在 Duet AI 工具栏中点击“接受”。Duet AI 会填充 /newproducts 端点的函数代码。

注意：Duet AI 可能会为您的提示生成多个版本的代码。您可以滚动浏览工具栏中的特定版本，

  1. 生成的代码应该类似于以下内容：
app.get("/newproducts", async (req: Request, res: Response) => {
  const products = await firestore
    .collection("inventory")
    .where("timestamp", ">", new Date(Date.now() - 604800000))
    .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);
});

其中许多行可能会加下划线，以提醒您存在潜在的许可问题。在本实验中，您可以应用快速修复，但今后，请查看这些警告！

  1. 如果生成的代码看起来不等同于上一步中的示例，建议您立即替换该代码，或者看看 Duet 如何帮助稍后进行调试。scripts/solutioncode-with-bug.ts . 文件中还有存在预期错误的代码版本
  2. 保存 index.ts 文件。

测试和调试 /``newproducts 端点

  1. 在 Cloud Shell 中，移至 cymbal-superstore/backend 目录。输入以下命令：
npm run start

这将启动端点。

  1. 如需查看端点的结果，请使用 Cloud Shell 菜单栏中的 + 打开另一个终端，然后执行以下命令：
curl localhost:8000/newproducts

您可能会在新终端中看到错误 curl: (52) Empty reply from server，并在运行端点的终端中看到一条包含详细信息 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' 的长错误消息。

  1. 我们来修正此错误。但首先我们需要了解错误消息的含义。为此，我们需要请 Duet。从 Cloud Shell 编辑器左侧的菜单中打开 Duet AI Chat，然后提出以下问题：
I'm querying Cloud Firestore and getting this error: 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' What does it mean?

Duet 应该会为您提供一些修复选项，包括移除其中一个不等性过滤条件。如需解决此问题，请从 index.ts 中删除 .where("quantity", ">", 0) 行，使查询中只有一个过滤条件。

  1. 重复上述前两个步骤以重启服务器并获取商品列表。现在应该可以成功了，但如果不是，请使用 Duet 找出问题（或使用 scripts/solutioncode-bug-fixed.ts 中更正后的解决方案继续）。

部署更改

如需部署更改后的应用，只需在 Cloud Shell 中从 terraform 目录重新运行 terraform apply 即可。然后，您可以通过 Terraform 提供的 IP 地址查看该应用。

6. 编写测试

为项目中的代码创建测试是一项通常未被优先处理的重要任务。您可能已经知道，Duet 可以帮助您创建这些测试。

我们来为刚刚创建的 newproducts 代码创建测试。

  1. 打开 backend/index.test.ts。使用 Duet AI 聊天工具，使用提示为 newproducts() 函数生成测试：
Help me write an Express.js test using Jest, in typescript, for the GET /newproducts handler in index.ts. Should check if the response code is 200 and the list of new products is length 8.

您会发现文件中提供了 import 行，而这行已经包含在文件中。仅将 describe() 测试复制到文件中指示的行。保存文件。

或者，您可以改进提示，让 Duet 不要包含任何 import 语句，以便只获取所需的代码。

  1. 如需查看测试结果，请前往 Cloud Shell，将目录更改为 backend 文件夹，然后运行以下命令：
npm run test

7. 日志记录

即使在部署完成后，Duet AI 也能对您的项目有所帮助。在本部分中，我们将借助 Duet AI 了解日志。

返回 Cloud 控制台，确保 Duet 正在运行。询问 Duet 在哪里查找日志。您可以随意尝试自己的提示，但如果无法给出合适的答案，则以下提示应会起作用。

How can I view the Cloud Run logs for the service called 'inventory'?

Duet AI 应建议您前往 Cloud Run 页面，选择资产清单服务，然后检查该服务的日志。您应该会看到类似如下内容：

b7c50b67e49ee71a.png

选择其中一项，让 Duet AI 进行说明。您应该会看到条目的自然语言说明。

您还可以在日志浏览器中查看日志条目，日志浏览器可以通过主菜单的“日志记录”选项打开。从日志浏览器查看日志条目的一个优点是，系统会内置用于解释条目的选项，如下所示：

2574adab06524ad4

8. 恭喜！

恭喜 - 您已成功使用 Duet AI 来帮助理解以前可能从未见过的代码。您增强了此代码，为其创建了测试，并使用 Duet 来帮助理解日志条目。

清理

删除项目

要清理，我们只需删除项目即可。

  • 在导航菜单中，选择“IAM 和”管理
  • 然后点击子菜单中的“设置”
  • 点击带有“Delete Project”字样的垃圾桶图标
  • 按照提示中的说明操作

在本实验中，我们学习了如何：

  • 借助 Duet AI 增强现有 Web 应用。
  • 将应用部署到 Cloud Run。
  • 提示 Duet AI 解释应用中的错误并提供修正方法。
  • 借助 Duet AI 为应用开发测试。
  • 借助 Duet AI 查看应用日志。