在軟體開發生命週期中使用 Duet AI

1. 總覽

Google Cloud 開發人員通常會使用多個 Google Cloud 產品與服務，處理日常業務。這些產品可讓開發人員在雲端開發、測試、部署及管理應用程式。有了 Duet AI 的協助，開發人員只要運用 Duet AI 的互動式對話、程式碼輔助功能和嵌入式整合服務，使用 Google Cloud 產品時就能提高工作效率。

本研究室使用 Duet AI 輔助功能部署「Cymbal Superstore」gocery 網頁應用程式接著，您將開發及部署新功能，建構應用程式的前端和後端。您也會取得 Duet 協助，協助您撰寫應用程式測試，以及瞭解 Duet 如何與其他 Google Cloud 工具整合。

目標

學習重點：

  • 運用 Duet AI 強化現有網頁應用程式。
  • 將應用程式部署至 Cloud Run。
  • 提示 Duet AI 解釋應用程式錯誤，並提供修正方法。
  • 在 Duet AI 的幫助下，開發應用程式測試。
  • 在 Duet AI 的協助下查看應用程式記錄檔。

必要條件

  • Google Cloud Platform 帳戶和已啟用計費功能的專案
  • 基本 Linux 體驗

2. 設定

本節說明開始使用這個研究室所需的一切資源。

建立專案

為了輕鬆清除所用資源，我們要建立新的 Google Cloud 專案。

在 Google Cloud 專案中啟用 Duet AI

我們現在會在 Google Cloud 專案中啟用 Duet AI API。步驟如下：

  1. 前往 https://console.cloud.google.com 的資訊主頁，確認您已選取要在這個研究室中使用的 Google Cloud 專案。按一下右上方的 Duet AI 圖示。

a4d8a7253b056abb.png

  1. Duet AI 即時通訊視窗會在控制台右側開啟。按一下「啟用」按鈕，如下所示。如果系統未顯示「啟用」按鈕，而是看到 Chat 介面，可能是因為專案已啟用 Duet AI，您可以直接進行下一個步驟。

58296b10f18b7a37.png

  1. 啟用這項功能後，就能詢問一、兩個查詢來測試 Duet AI。畫面上顯示了幾項查詢範例，但您可以嘗試「什麼是 Cloud Run？」

8953fb4afeeddb1a.png

Duet AI 會回覆問題。您可以點選右上角的 _ 圖示，關閉 Duet AI 即時通訊視窗。

在 Cloud Shell IDE 中啟用 Duet AI

程式碼研究室其餘部分將使用 Cloud Shell IDE。您必須在 Cloud Shell IDE 中啟用及設定 Duet AI，步驟如下：

  1. 透過下方顯示的圖示啟動 Cloud Shell。Cloud Shell 執行個體可能需要一到兩分鐘才會啟動。

3b59c357d06c5ab1.png

  1. 按一下「編輯器」或「開啟編輯器」按鈕 (視情況而定)，然後等待 Cloud Shell IDE 出現。您將使用「new」而不是舊版編輯器

a54576c01be31a97.png

  1. 按一下底部狀態列中的「Cloud Code - 登入」按鈕 (如圖所示)。按照指示授權外掛程式。如果看到「Cloud Code - no project」在狀態列中選取該 Google Cloud 專案，然後從您打算處理的專案清單中選取特定 Google Cloud 專案。

9b77ab79e8c135e6.png

  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

在這個研究室中，您將建立網頁應用程式。研究室中指出了許多可以試用 Duet 的地方。不過，如果你想問 Duet，也可以在研究室中花時間詢問 Duet。

例如，您將使用 Terraform 建立及部署基本應用程式。如果您不知道什麼是 Terraform，可以詢問 Duet。如果你想瞭解每個步驟的作用，Duet 可以提供相關說明。想要實際開啟程式碼並查詢特定幾行內容嗎？歡迎試用 Duet。

4. 建構網頁應用程式

本研究室使用「Cymbal Superstore」gocery 網頁應用程式在本研究室的後續工作中，您將使用 Duet AI 在這個應用程式中開發及部署新功能。在瞭解如何運用 Duet AI 理解現有程式碼之前，您需要使用一些現有程式碼才能處理，因此現在要建構這個應用程式的前端和後端元件。

處理這項專案時，您將在 Cloud Shell 和 Cloud Shell 編輯器之間移動。方法很簡單，只要使用螢幕上方的按鈕即可：

750038c738f1f405.png

設定環境

在 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 資源部署至專案。系統可能會提示您輸入「是」可用性高這項作業最多可能需要 10 分鐘才能完成，建議您花點時間前往 https://github.com/GoogleCloudPlatform/cymbal-superstore/blob/main/assets/architecture.png 查看架構圖。您也可以查看現有程式碼，並使用 Duet 協助我們瞭解。
terraform apply

指令成功完成之後，畫面會顯示類似以下的輸出內容：

9c9d2378167312eb.png

  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 首頁左側的「新上架」。您會看到模擬前端頁面和預留位置產品。這是正常情況，因為您將實作後端 Inventory API 程式碼，並在這個研究室的下一個工作中提供新產品頁面。

f4d7579f73ee8ed2.png

5. 修改網頁應用程式後端

現在使用 Duet AI，在網頁應用程式後端新增功能。

在這項工作中，您會提示 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 不含任何匯入陳述式，建議您只取得所需的程式碼。

  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 解釋。您應以自然語言顯示項目說明。

您也可以透過主選單的「Logging」選項開啟「記錄檔探索工具」中的記錄項目。透過「記錄檔探索工具」查看記錄項目的好處是，您可以選擇說明內建項目，如下所示：

2574adab06524ad4.png

8. 恭喜！

恭喜！您已成功使用 Duet AI，幫助您瞭解前所未有的程式碼。您已強化這個程式碼、為其建立了測試，並使用 Duet 協助解讀記錄項目。

清除所用資源

刪除專案

如要清除所用資源，只需刪除專案即可。

  • 在導覽選單中，選取「IAM &」(身分與存取權管理與)管理員
  • 接著點選子選單中的「設定」
  • 按一下顯示文字「Delete Project」的垃圾桶圖示
  • 按照提示操作

在本研究室中，我們已經瞭解如何：

  • 運用 Duet AI 強化現有網頁應用程式。
  • 將應用程式部署至 Cloud Run。
  • 提示 Duet AI 解釋應用程式錯誤，並提供修正方法。
  • 在 Duet AI 的幫助下，開發應用程式測試。
  • 在 Duet AI 的協助下查看應用程式記錄檔。