GSP1330

總覽

Gemini 是 AI 輔助協作工具，可助開發團隊更快速有效率地建構、部署及操作應用程式。

在本實驗室中，您將瞭解 Gemini for Developers 如何協助偵錯程式碼，以及生成單元測試，例如測試程式碼中的邊界條件。

本課程的實驗室將從應用程式開發人員的角度，介紹典型的軟體開發生命週期 (SDLC)。SDLC 的其他方面 (需求、安全性、監控等) 將在別的課程中介紹。

目標

本實驗室的重點為運用 Gemini for Developers 完成下列事項：

• 在 Gemini for Developers 的協助下，找出並解決執行階段錯誤。
• 生成函式的單元測試。

課程內容

Cymbal Superstore 是蓬勃發展的線上購物平台，希望透過持續改良功能來保有市場競爭力。「New Products」(新品) 就是他們開發的新功能之一，可讓使用者輕鬆發掘商店最新上架的商品。

新的 newproducts 端點已部署至測試環境，但結果並非是業主想要的。您需要做出一些修改，並對新程式碼偵錯。新程式碼將新增至原始程式碼集，以便讓實驗室內容專注於 Gemini for Developers 提供的協助。您也需要為後端服務開發一些單元測試。

設定和需求

瞭解以下事項後，再點選「Start Lab」按鈕

請詳閱以下操作說明。實驗室活動會計時，且中途無法暫停。點選「Start Lab」後就會開始計時，顯示可使用 Google Cloud 資源的時間。

您將在真正的雲端環境完成實作實驗室活動，而不是模擬或示範環境。為此，我們會提供新的暫時憑證，供您在實驗室活動期間登入及存取 Google Cloud。

為了順利完成這個實驗室，請先確認：

• 可以使用標準的網際網路瀏覽器 (Chrome 瀏覽器為佳)。

注意事項：請使用無痕模式 (建議選項) 或私密瀏覽視窗執行此實驗室，這可以防止個人帳戶和學員帳戶之間的衝突，避免個人帳戶產生額外費用。

• 是時候完成實驗室活動了！別忘了，活動一旦開始將無法暫停。

注意事項：務必使用實驗室專用的學員帳戶。如果使用其他 Google Cloud 帳戶，可能會產生額外費用。

如何開始研究室及登入 Google Cloud 控制台

1. 點選「Start Lab」按鈕。如果實驗室會產生費用，畫面上會出現選擇付款方式的對話方塊。左側的「Lab Details」窗格會顯示下列項目：

   • 「Open Google Cloud console」按鈕
   • 剩餘時間
   • 必須在這個研究室中使用的臨時憑證
   • 完成這個實驗室所需的其他資訊 (如有)

2. 點選「Open Google Cloud console」；如果使用 Chrome 瀏覽器，也能按一下滑鼠右鍵，選取「在無痕視窗中開啟連結」。

   接著，實驗室會啟動相關資源，並開啟另一個分頁，顯示「登入」頁面。

   提示：您可以在不同的視窗中並排開啟分頁。

   注意：如果頁面中顯示「選擇帳戶」對話方塊，請點選「使用其他帳戶」。

3. 如有必要，請將下方的 Username 貼到「登入」對話方塊。

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

   您也可以在「Lab Details」窗格找到 Username。

4. 點選「下一步」。

5. 複製下方的 Password，並貼到「歡迎使用」對話方塊。

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

   您也可以在「Lab Details」窗格找到 Password。

6. 點選「下一步」。

   重要事項：請務必使用實驗室提供的憑證，而非自己的 Google Cloud 帳戶憑證。 注意：如果使用自己的 Google Cloud 帳戶來進行這個實驗室，可能會產生額外費用。

7. 按過後續的所有頁面：

   • 接受條款及細則。
   • 由於這是臨時帳戶，請勿新增救援選項或雙重驗證機制。
   • 請勿申請免費試用。

Google Cloud 控制台稍後會在這個分頁開啟。

注意：如要使用 Google Cloud 產品和服務，請點選「導覽選單」，或在「搜尋」欄位輸入服務或產品名稱。

啟動 Cloud Shell

Cloud Shell 是搭載多項開發工具的虛擬機器，提供永久的 5 GB 主目錄，而且在 Google Cloud 中運作。Cloud Shell 提供指令列存取權，方便您使用 Google Cloud 資源。

1. 點按 Google Cloud 控制台頂端的「啟用 Cloud Shell」圖示 。

2. 系統顯示視窗時，請按照下列步驟操作：

   • 繼續操作 Cloud Shell 視窗。
   • 授權 Cloud Shell 使用您的憑證發出 Google Cloud API 呼叫。

連線建立完成即代表已通過驗證，而且專案已設為您的 Project_ID：。輸出內容中有一行文字，宣告本工作階段的 Project_ID：

Your Cloud Platform project in this session is set to {{{project_0.project_id | "PROJECT_ID"}}}

gcloud 是 Google Cloud 的指令列工具，已預先安裝於 Cloud Shell，並支援 Tab 鍵自動完成功能。

3. (選用) 您可以執行下列指令來列出使用中的帳戶：

gcloud auth list

4. 點按「授權」。

輸出內容：

ACTIVE: * ACCOUNT: {{{user_0.username | "ACCOUNT"}}} To set the active account, run: $ gcloud config set account `ACCOUNT`

5. (選用) 您可以使用下列指令來列出專案 ID：

gcloud config list project

輸出內容：

[core] project = {{{project_0.project_id | "PROJECT_ID"}}} 注意：如需 gcloud 的完整說明，請前往 Google Cloud 參閱 gcloud CLI 總覽指南。

工作 1：調查、生成及測試程式碼

設定環境變數

1. 在 Cloud Shell 執行下列指令，設定必要的環境變數。

export PROJECT_ID=$(gcloud config get-value project) export REGION={{{project_0.default_region|Lab Region}}} export ZONE={{{project_0.startup_script.lab_zone|Lab Zone}}}

2. 從 Cloud Storage bucket 將必要檔案複製到 Cloud Shell。

gsutil -m cp -r gs://duet-appdev/cymbal-superstore .

調查程式碼

Gemini 不僅能解釋您不熟悉的程式碼片段，還能建立程式碼註解，方便您在日後的維護週期快速瞭解內容。

3. 點選 Cloud Shell 視窗右上方的「開啟編輯器」選項，打開編輯器。

Visual Studio Code 編輯器會隨即開啟。您可以使用 Cloud Shell 選單列中的選項，在新視窗查看編輯器。

4. 依序前往「File」>「Open Folder...」。

5. 選取 cymbal-superstore 目錄，然後點按「OK」。

選取的資料夾現在應該會顯示於 Visual Studio Code 編輯器的「Explorer」部分。

6. 開啟 backend 資料夾中的 index.ts 檔案。

7. 點按檔案右上角「Gemini」圖示 旁的箭頭。

8. 點選「Select Gemini Code Assist Project」，選取要用於 Gemini 的專案。從清單中選取 專案 ID。

9. 如果編輯器底部出現提示，指出所選專案未啟用 Gemini Code Assist，請點按提示中的「Enable API」按鈕來啟用 API。

生成程式碼

10. 在 index.ts 檔案中，捲動至第 102 行，您會看到以下文字：/newproducts endpoint code goes here。 將這行程式碼換成下方的註解。

{{{project_0.startup_script.prompt_1 | "Comment 1"}}} {{{project_0.startup_script.prompt_2 | "Comment 2"}}}

11. 選取新加入的註解，然後點選冒出的黃色燈泡圖示。在清單中點按「Gemini: Generate code」。

12. Gemini 會顯示一些建議的程式碼。查看建議的程式碼，然後點按「接受」或按下 Tab 鍵，即可採用。程式碼應如下圖所示。

注意：

1. Gemini 知道「有現貨」的意思。這個詞組的意思常見，相當容易理解，因此 Gemini 在這裡使用此詞組。如果您的需求較不常見，可能需要提供範例。
2. 使用名為 quantity 的資料屬性，Gemini 就能將該屬性與「有現貨」的概念建立關聯。如果使用簡寫、縮寫或其他非標準用語為變數、屬性和方法命名，不僅其他人難以維護程式碼，Gemini 的建議也會比較籠統。
3. 雖然未明確說明，但 Gemini 建議的程式碼會檢查資料庫是否正在執行，確保與檔案中的其他端點一致。

測試程式碼

13. 使用 Cloud Shell 視窗工具列的「開啟終端機」按鈕，切換回 Cloud Shell 視窗。在 Cloud Shell 終端機執行下列指令：

cd ~/cymbal-superstore/backend npm run start

輸出內容應與下圖類似：

14. 在 Cloud Shell 視窗的工具列中點選「+」，在 Cloud Shell 開啟另一個終端機，並在 localhost 上呼叫端點。

curl localhost:8000/newproducts

在第 1 個終端機中查看輸出內容，發現作業已取消且發生錯誤。

輸出內容應與下圖類似：

點選「Check my progress」，確認目標已達成。 生成並測試程式碼。

工作 2：使用 Gemini Chat 進行調查

1. 在編輯器開啟 index.ts 檔案。

2. 如螢幕截圖所示，開啟 Gemini Chat，並在提示詞中輸入錯誤訊息。

{{{project_0.startup_script.prompt_2_1 | "Error message to be entered in the prompt"}}}

輸出內容應與下圖類似：

注意：Gemini 每次生成的回覆可能都會有差異，因此不一定與以上範例結果相符。

3. 請檢查程式碼，解決現有問題。以下指令是您判斷的錯誤來源：

const query = firestore const products = await firestore .collection("inventory") .where("timestamp", ">", new Date(Date.now() - 604800000)) .where("quantity", ">", 0); .where("timestamp", ">=", sevenDaysAgo) .where("quantity", ">", 0) .get();

Gemini 的回覆提供兩種選項，您可以將篩選器修改為等式篩選器，或是刪除其中一個不等式篩選器。

首先，我們從 Firestore 呼叫中移除數量篩選器來解決錯誤。

4. 如要移除數量不等式篩選條件，請從 index.ts 檔案中移除下列程式碼片段。

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

移除這段程式碼，即可讓函式正常運作。數量為 0 的產品無法從 API 回應中篩除，因此不符合業務需求，會導致測試失敗。我們必須小心，避免插入缺貨中的商品。此時，您可以採取幾種適當做法。有些方法可能比其他方法更有效，因此我們需要 Gemini 的協助。

5. 在 Gemini 對話中提出以下問題，並確認 index.ts 檔案已開啟。

{{{project_0.startup_script.prompt_2_2 | "Question to the Gemini Chat"}}}

輸出內容應與下圖類似：

如果重設對話後，Gemini 仍反覆建議您新增兩個 WHERE 子句，以下是取得不同答案的技巧。

{{{project_0.startup_script.prompt_2_3 | "Different question approach to the Gemini Chat"}}}

Gemini 通常會提供替代方案供您嘗試。您可能需要重設對話並修改提示詞幾次，才能取得 Firestore 以外的選項。

注意：Gemini 有時會固執地只提供隨機 (且無效) 的 Firestore 選項。在這種情況下，學習者只能接受建議並繼續學習。

輸出內容應與下圖類似：

6. 在 index.ts 檔案中加入程式碼片段，修改現有程式碼。

if (p.quantity > 0) { productsArray.push(p); }

修改後，程式碼應如下所示。

測試程式碼並套用上述變更。

7. 開啟 Cloud Shell 終端機，然後貼上下列指令。

cd ~/cymbal-superstore/backend npm run start

8. 開啟第二個終端機分頁，然後呼叫端點 localhost。

curl localhost:8000/newproducts

輸出內容應與下圖類似：

9. 我們來試試另一種使用內嵌註解的方法，並移除上方新增的條件。最終程式碼會與下圖類似。

10. 在 productsArray.push(p) 行之前，加入下列註解。按下 Ctrl+Enter 鍵，即可生成程式碼。如果傳回 if (p.quantity > 0)，請接受程式碼。

{{{project_0.startup_script.prompt_2_4 | "Comment message"}}}

將篩選器註解排除後，內容應如下所示：

點選「Check my progress」，確認目標已達成。 使用 Gemini Chat 進行調查。

注意：由於修正這個錯誤的方法有很多種，Gemini 可能會提供多項建議。這時，您必須評估各種選項。如上所示，這也可能會導致修補部分語法。

工作 3：執行測試

1. 前往 Cloud Shell 終端機並執行下列指令。

cd cymbal-superstore/backend npm run test

輸出內容應與下圖類似：

2. 開啟 backend 資料夾中的 index.test.ts 檔案。這個檔案包含幾個簡易測試，以 supertest 工具開發而成，並採用 Jest 測試框架。查看現有測試，並請 Gemini 說明任何不清楚的地方。

工作 4：在 Gemini 的協助下開發測試

在這項工作中，您將透過 Gemini 的協助，於後端編寫新品 API 的測試。

開發測試

1. 開啟 backend 資料夾中的 index.test.ts 檔案。在檔案底部新增下列註解。

{{{project_0.startup_script.prompt_3_1 | "Comment message 1 in index.test.ts"}}} {{{project_0.startup_script.prompt_3_2 | "Comment message 2 in index.test.ts"}}}

2. 選取新加入的註解，然後點選冒出的黃色燈泡圖示。在清單中點按「Gemini: Generate code」。按下 Tab 鍵即可接受建議。

這是生成程式碼的範例。您也可以貼上下方的程式碼。

describe('GET /newproducts', () => { it('should return a 200 status code', async () => { const response = await request(app) .get('/newproducts'); {{{project_0.startup_script.prompt_3_3 | "Generated code line from Gemini"}}}; }); it('should return a list of new products with length 8', async () => { const response = await request(app) .get('/newproducts'); expect(response.body.length).toBe(8); }); });

執行測試

3. 在 Cloud Shell 終端機執行下列指令。

cd ~/cymbal-superstore/backend npm run test

輸出內容應與下圖類似：

4. 在終端機輸出內容中捲動結果，找出失敗的測試。

注意：您應該會看到這項回應，表示測試失敗。值 10 是新產品的數量，其中包括存貨為 0 的產品。新業務需求規定，應篩選掉缺貨中的商品，但測試結果顯示有問題。

點選「Check my progress」，確認目標已達成。 編寫新品 API 的測試。

修正錯誤

5. 開啟 backend 資料夾中的 index.ts 檔案，移除上一個工作新增的篩選器註解。更新後的程式碼應如下所示。

//do not insert products that are out of stock if (p.quantity > 0) productsArray.push(p);

6. 從 Cloud Shell 終端機重新執行測試。

cd ~/cymbal-superstore/backend npm run test

輸出內容應與下圖類似：

工作 5：邊界條件測試

邊界條件測試並不簡單。這是因為必須考慮到不應發生，但可能在執行期間出現的意外情況，例如空白清單或餘額為負數。在這個情境中，我們來看看 Gemini 能否提供協助。

1. 如要取得最通用的回覆，請關閉所有開啟的檔案。點選對話上方的「新對話」圖示 (+) ，重設 Gemini Chat，然後輸入下列提示詞：

{{{project_0.startup_script.prompt_4_1 | "Prompt for boundary conditions"}}}

輸出內容應與下圖類似：

沒問題，我很樂意協助您建立邊界條件測試！ 邊界值分析是軟體測試的重要環節。 其中包含測試輸入網域的「邊緣」或「邊界」。 這些地方通常潛藏著錯誤。 為了提供最完善的協助，我需要更多資訊。例如： - 您使用哪種程式設計語言？ - 您是否能提供要測試的程式碼 (或程式碼片段)？ - 輸入內容及預期的有效範圍為何？

2. 開啟 backend 資料夾中的 index.ts 檔案，為 Gemini 提供一些背景資訊。請 Gemini 提供 /newproducts 端點的邊界測試相關資訊。開啟 Gemini 的對話視窗，輸入以下內容：

{{{project_0.startup_script.prompt_4_2 | "Prompt for boundary tests for the /newproducts endpoint"}}}

輸出內容應與下圖類似：

注意：這些建議部分是根據程式碼本身 (過去 7 天新增且有現貨) 生成，部分是根據 Gemini 認為這類程式碼通常有的一般邊界條件生成。這項功能非常實用，能協助您建立穩固的邊界條件。

3. 如要將這些內容轉為實際測試，請開啟 index.test.ts 檔案。複製下方的註解，並加到檔案結尾。

{{{project_0.startup_script.prompt_4_3 | "Comment message in index.test.ts file"}}}

輸出內容應與下圖類似：

4. 在 index.test.ts 檔案中，於上述註解後方新增下列程式碼。

describe('GET /newproducts', () => { it('should not return products that are out of stock', async () => { const response = await request(app) .get('/newproducts'); response.body.forEach((product: any) => { expect(product.quantity).toBeGreaterThan(0); }); }); });

5. 在 Cloud Shell 終端機中重新執行測試。您應該會看到如下的輸出內容。

輸出內容應與下圖類似：

點選「Check my progress」，確認目標已達成。 邊界條件測試。

恭喜！

完成本實驗室後，您將能熟練運用 Gemini for Developers，提升程式碼偵錯能力，並簡化單元測試的生成作業，特別是評估程式碼中的邊界條件時。

使用手冊上次更新日期：2025 年 10 月 17 日

實驗室上次測試日期：2025 年 10 月 17 日

Copyright 2025 Google LLC 保留所有權利。Google 和 Google 標誌是 Google LLC 的商標，其他公司和產品名稱則有可能是其關聯公司的商標。