總覽

Google Cloud 開發人員通常會使用多個 Google Cloud 產品與服務，處理日常業務。這些產品可讓開發人員在雲端開發、測試、部署及管理應用程式。開發人員能夠透過 Gemini 的互動式對話、程式碼編寫輔助及嵌入式整合功能，提升使用 Google Cloud 產品的效率。

注意：Duet AI 已更名為 Gemini，這是我們的新一代模型，本研究室的內容也已據此更新。參考研究室指示時，在使用者介面或說明文件中若有任何內容提及 Duet AI，請視為 Gemini。 注意：Gemini 仍處於早期技術階段，因此可能會輸出看似合理卻與事實不符的內容。使用輸出內容前，請先確認內容是否屬實。如要瞭解詳情，請參閱 Gemini 版 Google Cloud 和負責任的 AI 技術。

目標

在本實驗室中，您將使用 Gemini 執行下列工作：

• 在 Cloud Shell 編輯器中，使用 Gemini Code Assist 建構網頁應用程式。
• 將應用程式部署至 Cloud Run。
• 提示 Gemini 說明應用程式中的錯誤並提供修正方式。
• 在 Gemini 的協助下，開發應用程式整合測試。
• 使用 Gemini Cloud Assist 和 BigQuery，瞭解如何將資料載入資料表，以及如何生成查詢並取得說明。
• 使用 Gemini Cloud Assist 和 Spanner 查詢交易資料。
• 在 Gemini Cloud Assist 的協助下，瞭解如何查看應用程式記錄。

設定

每個實驗室都會提供新的 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 資源。gcloud 是 Google Cloud 的指令列工具，已預先安裝於 Cloud Shell，並支援 Tab 鍵完成功能。

1. 在控制台的右上方，點按「啟用 Cloud Shell」按鈕 。

2. 點按「繼續」。
   請稍候片刻，等待系統完成佈建作業並連線至環境。連線建立後，即代表您已通過驗證，且專案已設為「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 注意：如需 gcloud 的完整說明，請參閱 gcloud CLI 總覽指南。

工作 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. 為 Gemini 啟用 Cloud AI Companion API：

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

5. 為您的 Google Cloud Qwiklabs 使用者帳戶授予必要的 IAM 角色，以便使用 Gemini：

   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 取得協助。

點選「Check my progress」確認目標已達成。 設定環境和帳戶。

工作 2：建構網頁應用程式

本實驗室使用的是 Cymbal Superstore 雜貨網頁應用程式。您會在本實驗室的子工作中，運用 Gemini 開發和部署此應用程式的新功能。在這項工作中，您將建構此應用程式的前端和後端元件。

設定環境

在 Cloud Shell 執行下列指令及接下來的兩個子工作。

1. 透過下列指令，執行 Docker 憑證輔助程式：

   gcloud auth configure-docker

2. 如果系統詢問您是否繼續執行，請輸入 Y。

3. 下載 cymbal-superstore 應用程式程式碼：

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

建構後端

我們會在網頁應用程式後端導入 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. 在「Explorer」的資料夾清單中，選取「cymbal-superstore」。

   d. 展開「frontend」資料夾，並選取「.env.production」檔案。

   e. 在這個檔案中，貼上剛才複製的 Cloud Run 後端服務端點網址，取代 REACT_APP_INVENTORY_API_URL 的值。

2. 點選「開啟終端機」，然後在 Cloud Shell 執行下列指令，以便建構前端：

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

3. 執行下列指令，將前端網頁應用程式上傳至 Cloud Storage：

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

查看網頁應用程式

1. 在瀏覽器開啟分頁，並前往下列網址：

   http://{{{project_0.startup_script.frontend_ip|frontend IP address}}} 注意：如果彈出式視窗顯示外部 IP 不支援安全連線，請點按「繼續造訪網站」。

   網頁應用程式會顯示 Cymbal Superstore 的首頁。

2. 點按「New Arrivals」。

   您會看到模擬前端頁面和預留位置產品。這是正常情況，因為您將在本實驗室的子工作中，導入後端 Inventory API 程式碼來提供新產品頁面。

點選「Check my progress」確認目標已達成。 建構網頁應用程式。

工作 3：修改網頁應用程式後端

接著請使用 Gemini 新增功能至網頁應用程式後端。

在這項工作中，您將提示 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. 在「更多動作」選單中，選取「Gemini: Generate code」。

6. 將滑鼠游標懸停在生成的程式碼上，並點按 Gemini 工具列中的「接受」。

   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)」。

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 對話視窗。

   

3. 在「Ask Gemini」提示詞欄位輸入下列提示詞，然後點選「傳送」圖示 ：

   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 also provides a solution to fix the error.

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

   如要修正這個錯誤，必須改為只用一個不等式篩選條件。

4. 如要移除 backend/index.ts 檔案的 quantity 篩選條件，請在 /newproducts 處理常式中刪除下列程式碼：

   .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 終端機中，按下 Control+C 結束應用程式。

工作 6：測試前端

重新建立及重新部署後端

按照前述步驟重新建立更新後的後端服務容器映像檔、將映像檔推送至儲存庫，並將後端服務重新部署至 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

測試網頁應用程式

1. 在瀏覽器開啟分頁，並前往下列網址：

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

   網頁應用程式會顯示 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 對話視窗。

   

3. 請輸入下列提示詞並點按「傳送」圖示 ()，以提示 Gemini 協助您編寫 GET 端點 /newproducts 的測試：

   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 程式碼區塊即可，不必複製範例中的匯入陳述式。

執行測試

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「Explorer」窗格中依序展開 和 cymbal_sales 資料集，並選取「cymbalsalestable」資料表。

   注意事項：本實驗室已預先佈建資料集與資料表。資料表中的資料為 CSV 格式，且儲存於 Cloud Storage 的 bucket。

3. 在 Google Cloud 控制台頂端選單，依序點選「開啟 Gemini」圖示 和「Start Chatting」，以便開啟 Gemini Cloud Assist 對話視窗。

4. 在 Gemini 提示詞欄位中輸入以下文字，然後點按「傳送」圖示 ()：

   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 bucket 路徑。這個指令也會使用資料表結構定義自動偵測選項。

6. 在 BigQuery UI 中，點選「重新整理」圖示 。

   查看資料表的結構定義。

7. 點選「查詢」。

8. 將預設查詢改為以下內容：

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

9. 點選「執行」執行查詢。

   在「結果」分頁中，查看從資料表擷取資料的查詢結果。資料表包含 Cymbal Superstore 網頁應用程式的每週產品銷售匯總資料範例。

在 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. 點選「執行」執行查詢。

   查詢結果會顯示在頁面底部的「結果」分頁中。

點選「Check my progress」確認目標已達成。 搭配使用 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 執行的庫存後端記錄。

1. 在 Google Cloud 控制台頂端選單列，點選「Gemini Cloud Assist 對話」圖示 ，以便開啟 Cloud Assist 對話視窗。

2. 在 Gemini 提示詞欄位中輸入以下提示詞，然後點按「傳送」圖示 ()：

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

3. 按照 Gemini 回覆中的指示操作，即可查看 Cloud Run 服務 inventory 的記錄。

恭喜！

在本實驗室中，您已學會如何：

• 在 Gemini 的協助下，使用 Google Cloud 產品建構、測試及部署應用程式。
• 提示 Gemini Code Assist 說明應用程式中的錯誤並提供修正方式。
• 將資料載入 BigQuery 資料表，並在 Gemini Cloud Assist 的協助下生成查詢並取得說明。
• 搭配使用 Gemini Cloud Assist 與 Spanner。
• 在 Gemini Cloud Assist 的協助下查看應用程式記錄。

關閉研究室

如果您已完成研究室，請按一下「End Lab」(關閉研究室)。Qwiklabs 會移除您已用的資源，並清除使用帳戶。

您可以為研究室的使用體驗評分。請選取合適的星級評等並提供意見，然後按一下「Submit」(提交)。

星級評等代表您的滿意程度：

• 1 星 = 非常不滿意
• 2 星 = 不滿意
• 3 星 = 普通
• 4 星 = 滿意
• 5 星 = 非常滿意

如果不想提供意見回饋，您可以直接關閉對話方塊。

如有任何想法、建議或指教，請透過「Support」(支援) 分頁提交。

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