检查点
Enable relevant APIs and set IAM roles.
/ 20
Create and start a Cloud Workstation.
/ 20
Deploy your app to Cloud Run.
/ 60
運用 Gemini 開發應用程式
總覽
在本研究室中,您將使用 Google Cloud 的 AI 技術輔助協作工具「Gemini」,探索、建立、修改、測試及部署範例應用程式。
在以下工作中,您會透過 Cloud Workstations 建立採用 Code OSS 做為 IDE 的開發環境。接著,在 Cloud Code 中藉助 Gemini Code Assist 瞭解程式碼,並建構採用兩種 API 方法的範例庫存應用程式。最後,您會按照 Gemini 生成的步驟,將應用程式部署到 Cloud Run。
本研究室適合不熟悉雲端應用程式建構作業的開發人員 (資歷不限),協助他們瞭解如何將 VS Code 或 Code OSS 做為 IDE,並掌握 Python 和 Flask 架構。
目標
本研究室將說明如何執行下列工作:
- 使用 Cloud Workstations 建立雲端式應用程式開發環境。
- 按照情境向 Gemini 提問,探索各種可用於部署應用程式的 Google 服務。
- 透過提示要求 Gemini 提供範本,在 Cloud Run 開發基礎應用程式。
- 使用 Gemini 說明並生成程式碼,藉此建立、探索及修改應用程式。
- 在本機執行並測試應用程式,然後根據 Gemini 生成的步驟,將應用程式部署到 Google Cloud。
設定
在每個研究室中,您都能在固定時間內免付費建立新的 Google Cloud 專案,並使用一組資源。
-
請透過無痕式視窗登入 Qwiklabs。
-
請記下研究室的存取時間 (例如
1:15:00
),並確保自己能在時間限制內完成作業。
研究室不提供暫停功能。如有需要,您可以重新開始,但原先的進度恕無法保留。 -
準備就緒後,請按一下「Start lab」。
-
請記下研究室憑證 (使用者名稱和密碼),這組資訊將用於登入 Google Cloud 控制台。
-
按一下「Open Google Console」。
-
按一下「Use another account」,然後複製這個研究室的憑證,並貼入提示訊息。
如果使用其他憑證,系統會顯示錯誤或向您收取費用。 -
接受條款,然後略過資源復原頁面。
啟用 Cloud Shell
Cloud Shell 是含有多項開發工具的虛擬機器,提供永久的 5 GB 主目錄,並在 Google Cloud 中運作。Cloud Shell 可讓您透過指令列存取 Google Cloud 資源。gcloud
是 Google Cloud 的指令列工具,已預先安裝於 Cloud Shell,並支援 Tab 鍵完成功能。
-
在控制台的右上方,點按「啟用 Cloud Shell」按鈕 。
-
點按「繼續」。
請稍候片刻,等待系統完成佈建作業並連線至環境。連線建立後,即代表您已通過驗證,且專案已設為「PROJECT_ID」。
指令範例
- 列出目前使用的帳戶名稱:
輸出內容
輸出內容範例
- 列出專案 ID:
輸出內容
輸出內容範例
工作 1:設定環境和帳戶
-
使用研究室憑證登入 Google Cloud 控制台,然後開啟 Cloud Shell 終端機視窗。
-
執行下列指令,在 Cloud Shell 設定專案 ID 和區域環境變數:
PROJECT_ID=$(gcloud config get-value project) REGION={{{project_0.default_region|set at lab start}}} echo "PROJECT_ID=${PROJECT_ID}" echo "REGION=${REGION}" -
請執行以下指令,將已登入的 Google 使用者帳戶儲存於環境變數:
USER=$(gcloud config get-value account 2> /dev/null) echo "USER=${USER}" -
為使用 Gemini,請啟用 Cloud AI Companion API:
gcloud services enable cloudaicompanion.googleapis.com --project ${PROJECT_ID} -
如要使用 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 取得協助。
點按「Check my progress」,確認目標已達成。
工作 2:建立雲端工作站
本研究室透過 Cloud Workstations IDE 的 Cloud Code 外掛程式,在 Gemini 的協助下開發應用程式。Cloud Workstations 是全代管的整合式開發環境,與 Gemini 原生整合。
在這項工作中,您將設定及佈建雲端工作站環境,然後啟用 Cloud Code 外掛程式,即可運用 Gemini。
查看工作站叢集
本研究室已預先建立名為 my-cluster
的工作站叢集,用於設定及建立工作站。
-
在 Google Cloud 控制台的「導覽選單」() 中,依序選取「更多產品」>「工具」>「Cloud Workstations」。
-
在導覽窗格中,點按「管理叢集」。
-
檢查叢集的狀態。如果叢集狀態為
Reconciling
或Updating
,請隔一段時間再重新整理,待狀態變為Ready
後,即可進行下一個步驟。
建立工作站設定
請務必先在 Cloud Workstations 中完成工作站設定,再建立工作站。
-
在導覽窗格中,依序點按「工作站設定」和「建立工作站設定」。
-
指定下列值:
屬性 值 名稱 my-config 工作站叢集 選取「my-cluster」 -
點按「建立」。
-
點按「更新」。
-
建立設定後,請查看「狀態」部分。如果設定狀態為
Reconciling
或Updating
,請隔一段時間再重新整理,待狀態變為Ready
後,即可進行下一個步驟。
建立工作站
-
在導覽窗格中,依序點按「工作站」和「建立工作站」。
-
指定下列值:
屬性 值 名稱 my-workstation 設定 選取「my-config」 -
點按「建立」。
工作站建立後會列在「我的工作站」下方,並顯示
Stopped
狀態。 -
點按「啟動」,即可啟動工作站。
工作站啟動後,狀態會變更為
Starting
。待狀態變為Running
時,即表示工作站可以使用。工作站會在幾分鐘內完全啟動。
啟動 IDE
為了確保正常運作,部分擴充功能需要啟用瀏覽器中的第三方 Cookie。
-
如要在 Chrome 啟用第三方 Cookie,請點按 Chrome 選單中的「設定」。
-
在搜尋列輸入「第三方 Cookie」。
-
點按「第三方 Cookie」設定,然後選取「允許第三方 Cookie」。
注意:本研究室活動結束後,如要還原瀏覽器目前的設定,請記下原本的第三方 Cookie 設定。
-
在 Google Cloud 控制台的「工作站」頁面中點按「啟動」,即可啟動工作站的 Code OSS IDE。
IDE 會在新的瀏覽器分頁中開啟。
點按「Check my progress」,確認目標已達成。
工作 3:更新 Cloud Code 擴充功能以啟用 Gemini
在這項工作中,您將啟用 Cloud Code 中的 Gemini,並用於工作站 IDE。
連結至 Google Cloud
請按照以下步驟,將工作站連結至 Google Cloud:
-
在視窗底部點按狀態列上的「Cloud Code - Sign In」。
-
如果系統提示您登入,請點按「Proceed to sign in」。
終端機會顯示連結。
-
按下 Control 鍵 (Windows 和 Linux)/Command 鍵 (MacOS),並點按終端機中的連結,即可啟動 Cloud Cloud 登入流程。
-
如果系統向您確認是否要開啟外部網站,請點按「開啟」。
-
點按學生電子郵件地址。
-
系統提示您繼續操作時,請點按「繼續」。
-
如要讓 Google Cloud SDK 存取您的 Google 帳戶,請詳閱並同意相關條款,然後點按「允許」。
瀏覽器分頁會顯示您的驗證碼。
注意:系統可能會發出警示,顯示您已執行 gcloud 驗證登入指令。這是正常程序。IDE 會代替您執行這項指令。 -
點按「複製」。
-
返回 IDE,在終端機中顯示「輸入授權碼」的位置貼上驗證碼。
-
如果系統要求您允許從剪貼簿複製,請點按「允許」。
-
點按「輸入」,然後等候狀態列顯示「Cloud Code - No Project」。
您已連結到 Google Cloud。
在 Cloud Code 啟用 Gemini
請按照以下步驟,在 Cloud Code 中為工作站 IDE 啟用 Gemini:
-
點按工作站 IDE 中的選單圖示 ,然後依序前往「檔案」>「偏好設定」>「設定」。
-
在「設定」對話方塊的「使用者」分頁中,依序選取「擴充功能」>「Google Cloud Code」。
-
在「搜尋設定」中輸入
Gemini
。 -
在 Qwiklabs 研究室憑證面板中,點按「複製」來複製專案 ID。
-
在 Cloud Code 設定頁面中,依序前往「Cloudcode」>「Gemini: Project」,然後貼上 Google Cloud 專案 ID。
注意:這項設定也可能位於「Cloudcode」>「Duet AI: Project」。 -
請依序前往「Cloud Code」>「Gemini: Enable」,確認 Gemini 已啟用。
注意:這項設定也可能位於「Cloudcode」>「Duet AI: Enable」。 -
點按 IDE 狀態列中的「Cloud Code - No Project」。
-
依序點按「選取 Google Cloud 專案」和您的專案 ID。
專案 ID 已顯示在狀態列中。現在可以使用 Gemini 了。
工作 4:與 Gemini 對話
Gemini 會協助您選擇符合應用程式架構需求的 Google Cloud 服務。如果您想在本機 IDE 中開發並測試應用程式,然後再部署至 Google Cloud,與 Gemini 對話即可獲得相關協助。
在這項工作中,您在「Gemini」窗格輸入提示後,即可查看 Gemini 的回覆。
提示是指透過問題或陳述來說明所需協助。在提示中加入 Google Cloud 分析的現有程式碼背景資訊,可得到更實用或完整的回覆。對於如何撰寫提示或生成有效回覆,請參閱這篇文章,進一步瞭解在 Google Cloud 撰寫優質 Gemini 提示的做法。
輸入提示給 Gemini
請按照以下步驟,透過提示要求 Gemini 提供 Google Cloud 服務資訊:
-
在 IDE 活動列中點按「Gemini」圖示 ,開啟 Gemini 對話窗格。
-
如果嘗試開啟 Gemini 對話窗格時發生錯誤,請重新整理瀏覽器視窗。
-
在「Gemini」窗格中輸入以下提示,然後點按「傳送」圖示 :
I am new to Google Cloud and I want to use the Cloud Code extension. Give me some examples of Google services that I can use to build and deploy a sample app. Gemini 會在回覆中提供 Google Cloud 服務清單和說明。
在本例中,假設 Gemini 建議您使用 Cloud Run 和 Cloud Functions 建構及部署範例應用程式。這時您可以向 Gemini 提問,進一步瞭解這兩項 Google Cloud 服務。
-
如要透過提示進一步提問,請在「Gemini」窗格中輸入以下文字,然後點按「傳送」:
What is the difference between Cloud Run and Cloud Functions? Gemini 會在回覆中說明這兩項 Google Cloud 服務的主要差異。
-
如要重設對話記錄,請點按「Gemini」窗格中的「重設對話」圖示 。
注意:對話記錄狀態只會保存在記憶體中,轉換至其他工作區或關閉 IDE 後,系統並不會保留這類資料。我們不會將提示或回覆內容做為 Gemini 模型的訓練資料。詳情請參閱 Google Cloud 專用 Gemini 如何使用您的資料。
工作 5:開發 Python 應用程式
接下來,您將使用 Cloud Run 建立及部署基礎 Python 應用程式。由於您不曾使用 Cloud Run 和 Cloud Code,在建立應用程式的各個步驟中將需要協助。
在這項工作中,您將傳送提示給 Gemini,讓 Gemini 幫助您在 Cloud Run 中 建構一個 Hello World Python 應用程式。
取得 Gemini 的協助
-
若想在「Gemini」窗格中詢問如何使用 Cloud Code 建立 Cloud Run 應用程式,請輸入以下提示並點按「傳送」圖示 :
How do I create a new Cloud Run app in Cloud Code using the command palette? What languages are supported? -
Gemini 會在回覆中提供應用程式建立步驟,以及 Cloud Run 應用程式支援的語言。
注意:VS Code 的指令區塊面板會顯示指令清單,包含 Cloud Code 適用的指令。
按照 Gemini 提供的步驟建立 Python 應用程式
-
點按選單 ,然後依序前往「查看」>「指令區塊面板」。
-
輸入
Cloud Code New
,然後選取「Cloud Code: New Application」。 -
選取「Cloud Run 應用程式」。
-
選取「Python (Flask): Cloud Run」。
-
將應用程式和頂層資料夾名稱更新為
/home/user/hello-world
,然後點按「確定」。Cloud Code 會下載範本,並在 IDE 的資料夾中建立應用程式檔案。
使用 Gemini 探索應用程式
在 Cloud Run 中建立了 Hello World
應用程式後,接著可以使用 Gemini 說明部署至 IDE 的檔案和程式碼片段。
-
如果找不到檔案,您可以在 IDE 活動列中點按「Explorer」圖示 。
-
在 Explorer 窗格中選取「Dockerfile」。
-
選取 Dockerfile 的全部內容,然後依序點按燈泡圖示 ,以及「更多動作」選單中的「Explain this」。
Gemini 會生成一段自然語言敘述,說明
Dockerfile
的內容和函式。您也可以選取部分檔案內容,然後依序點按燈泡圖示 和「Explain this」。 -
選取開頭為「ENTRYPOINT」的程式碼行,然後依序選取燈泡圖示 和「Explain this」。
Gemini 會針對 ENTRYPOINT 操作說明提供詳細回覆。您會瞭解到,若按照該說明操作,Docker 就會在容器啟動時執行 app.py 檔案。
-
如要查看
app.py
檔案內容,請依序點按活動列中的「Explorer」圖示 和app.py
。 -
在
hello()
函式定義中,選取包含K_SERVICE
和K_REVISION
環境變數的程式碼行。依序點按燈泡圖示 和「Explain this」。Gemini 會在回覆中詳細介紹這兩個 Cloud Run 環境變數,並說明如何在應用程式程式碼使用這些變數。
在本機執行應用程式
您可以使用 Cloud Run 模擬器在本機的 IDE 中執行應用程式。以本研究室的例子來說,「本機」是指工作站機器。
-
在 IDE 的活動列中,依序點按「Cloud Code」圖示 和「Cloud Run」。
注意:請先使用 Cloud Run 模擬器執行應用程式。這樣一來,您就不必提早啟用 Cloud Run API。 -
在 Cloud Run 活動列中,依序點按「Run App on Local Cloud Run Emulator」圖示 和「執行」。
IDE 中的「Output」分頁會顯示建構進度。
-
如果畫面頂端的提示顯示「Enable minikube gcp-auth addon to access Google APIs」,請選取「是」。
等候建構及部署作業完成。
-
將滑鼠游標懸停在 localhost 網址的 Hello World 服務連結上,然後點按「Follow link」。
瀏覽器會開啟新分頁來說明服務正在執行。
工作 6:強化 Python 應用程式
現在來為應用程式新增資料和功能,以便用於庫存資料管理。
在這項工作中,您需要先將庫存資料加入應用程式。
使用 Gemini 生成範例資料
-
在 IDE 的活動列中,點按「Explorer」圖示 。
-
點按「New file」圖示 ,然後建立名為
inventory.py
的檔案。 -
開啟「Gemini」窗格,輸入以下提示並點按「傳送」﹐Gemini 即可生成範例資料:
Create a variable called inventory which is a list of 3 JSON objects. Each JSON object has 2 attributes: productid and onhandqty. Both attributes are strings. Gemini 就會生成包含 3 個 JSON 物件的
inventory
JSON 陣列。 -
如要將範例 JSON 資料插入 inventory.py 檔案,請點按 Gemini 回覆中的「Insert in current file」圖示 。該檔案內容與下方相似:
inventory = [ { "productid": "P001", "onhandqty": "10" }, { "productid": "P002", "onhandqty": "20" }, { "productid": "P003", "onhandqty": "30" } ] -
依序點按 IDE 選單 中的「檔案」>「儲存」,即可將
inventory.py
檔案儲存至home/user/hello-world
資料夾。您將在後續子工作中用到這個範例庫存資料。
將 GET 的 /inventory 清單 API 方法新增至應用程式
現在您要在可以處理庫存資料的 app.py
檔案中導入 API 方法。您將使用 Gemini 的程式碼生成功能,完成這項子工作。
-
在「Explorer」的資料夾和檔案清單中,選取
app.py
檔案即可開啟。 -
修改 flask import 陳述式,新增
inventory.py
檔案和jsonify
程式庫:from flask import Flask, render_template, jsonify from inventory import inventory -
在
app.py
檔案中,將游標置於 app 指派陳述式下方:app = Flask(__name__) -
在
app.py
檔案中輸入以下註解,要求 Gemini 生成第一個 API 方法的程式碼:# Generate an app route to display a list of inventory items in the JSON format from the inventory.py file. # Use the GET method. -
選取註解行及下方的空白行。
-
點按燈泡圖示 ,然後選取「更多動作」選單中的「Generate code」。
Gemini 會生成 GET 作業函式,從
inventory.py
檔案中傳回產品清單。該函式內容會與下方相似:@app.route('/inventory', methods=['GET']) def inventory_list(): """Return a list of inventory items in JSON format.""" return jsonify(inventory) 注意:如要進一步瞭解 jsonify(inventory)
函式,可標出該程式碼,然後傳送提示要求 Gemini 說明。 -
如要接受生成的程式碼,請將滑鼠游標懸停在回覆的任何部分,然後點按「接受」。
重要事項:Gemini 可生成多個程式碼片段,可能與上方顯示的程式碼不同。 -
如果您在生成的程式碼中,發現 app.route 和 return 陳述式與上方顯示的程式碼不同,請將生成的程式碼片段替換為上述片段。這樣應能確保研究室正常運作。
將 GET 的 /inventory/ 方法新增至應用程式
接下來,您要新增另一項 API 方法,傳回特定庫存產品的資料 (本例依據 productID)。如果找不到 productID,API 會傳回標準 HTTP 狀態碼 404。
-
請新增幾個空白行。
-
在
app.py
檔案中輸入以下註解,要求 Gemini 生成第二個 API 方法的程式碼:# Generate an App route to get a product from the list of inventory items given the productID. # Use the GET method. # If there is an invalid productID, return a 404 error with an error message in the JSON. -
選取這 3 行註解和之後的空白行,點按燈泡圖示 ,然後在「更多動作」選單中,選取「Generate code」。
Gemini 生成的 GET 作業函式會根據要求提供的 productID,從庫存檔案中傳回產品清單。如果找不到指定產品,函式會傳回 404 狀態碼。
@app.route('/inventory/<productid>', methods=['GET']) def inventory_item(productid): """Return a single inventory item in JSON format.""" for item in inventory: if item['productid'] == productid: return jsonify(item) return jsonify({'error': 'Product not found'}), 404 -
請針對 Gemini 在回覆中生成的程式碼,將滑鼠游標懸停在任何部分。如要接受該程式碼,請點按工具列中的「接受」。
-
如果生成的程式碼與上方顯示的程式碼不同,請將生成的程式碼片段替換為上述片段。
在本機重新建構及重新部署應用程式
您可以使用 Cloud Run 模擬器,在本機的 IDE 中執行應用程式。以本研究室的例子來說,「本機」是指工作站機器。
-
在 IDE 的活動列中,點按「Cloud Code」圖示 。
-
在 Cloud Run 活動列中,點按「Run App on Local Cloud Run Emulator」圖示 。
-
如果畫面頂端的提示顯示「Enable minikube gcp-auth addon to access Google APIs」,請選取「是」。
等候建構及部署作業完成。
-
將滑鼠游標懸停在 localhost 網址的 Hello World 服務連結上,然後點按「Follow link」。
瀏覽器會開啟新分頁來說明服務正在執行。
測試 API 方法
-
請按照先前工作中的步驟,在本機執行應用程式。
-
點按連結即可在獨立的瀏覽器分頁中看到應用程式執行中的訊息,之後請將
/inventory
附加到該分頁中的網址,然後輸入「Enter」。API 會以 JSON 格式的回覆,傳回
inventory.py
檔案的產品清單。 -
將
/{PRODUCTID}
附加到結尾為/inventory
的網址,{PRODUCTID}
是庫存產品 ID。 -
輸入「Enter」。
API 會透過 JSON 格式的回覆,傳回特定產品的資料。
-
將產品 ID 替換成
XXXXX
,然後輸入「Enter」。XXXXX 是無效的產品 ID,因此 API 會傳回 JSON 格式的錯誤回覆,指出找不到產品。
工作 7:將應用程式部署至 Cloud Run
您現在可以將應用程式部署至 Google Cloud 的 Cloud Run。
-
在活動列主選單 中,依序點按「查看」>「指令區塊面板」。
-
在指令區塊面板欄位中,輸入「Cloud Code Deploy」,然後從清單中選取「Cloud Code: Deploy to Cloud Run」。
-
點按「啟用 API」,即可啟用專案的 Cloud Run API。
-
在「服務設定」頁面的「區域」部分,選取「
」。 -
其他設定維持不變,然後點按「部署」。
Cloud Code 會建立映像檔並推送至儲存庫,然後將服務部署到 Cloud Run。這項作業會在幾分鐘內完成。
注意:如要查看詳細部署記錄,請點按「Show Detailed Logs」。 -
如要查看執行中的服務,請開啟「部署至 Cloud Run」對話方塊中顯示的網址。
-
如要測試服務,請將
/inventory
和/inventory/{PRODUCTID}
路徑附加到網址,然後檢查回覆結果。在 Cloud Shell 中執行以下指令,即可取得 Cloud Run 服務庫存頁面網址:
export SVC_URL=$(gcloud run services describe hello-world \ --region {{{project_0.default_region|set at lab start}}} \ --platform managed \ --format='value(status.url)') echo ${SVC_URL}/inventory
點按「Check my progress」,確認目標已達成。
將應用程式部署至
關閉研究室
如果您已完成研究室,請按一下「End Lab」(關閉研究室)。Qwiklabs 會移除您已用的資源,並清除使用帳戶。
您可以為研究室的使用體驗評分。請選取合適的星級評等並提供意見,然後按一下「Submit」(提交)。
星級評等代表您的滿意程度:
- 1 星 = 非常不滿意
- 2 星 = 不滿意
- 3 星 = 普通
- 4 星 = 滿意
- 5 星 = 非常滿意
如果不想提供意見回饋,您可以直接關閉對話方塊。
如有任何想法、建議或指教,請透過「Support」(支援) 分頁提交。
恭喜!
在本研究室中,您學習到如何:
- 按照情境向 Gemini 提問,探索各種可用於部署應用程式的 Google 服務。
- 透過提示要求 Gemini 提供範本,在 Cloud Run 開發基礎應用程式。
- 使用 Gemini 說明並生成程式碼,藉此建立、探索及修改應用程式。
- 在本機執行並測試應用程式,然後根據 Gemini 生成的步驟,將應用程式部署到 Google Cloud。
後續步驟/瞭解詳情
- Gemini 版 Google Cloud 總覽
- 在 Gemini 版 Google Cloud 的協助下開發 Python 應用程式
- 在 Gemini 版 Google Cloud 的協助下開發 Node.js 應用程式
Copyright 2024 Google LLC 保留所有權利。Google 和 Google 標誌是 Google LLC 的商標,其他公司和產品名稱則有可能是其關聯公司的商標。