1. 簡介
在本研究室中,您將使用 Gemini Code Assist (Google Cloud 中的 AI 技術輔助協作工具) 在現有 Python 網頁應用程式中加入測試,然後找出並修正測試中公開的應用程式錯誤。接著,您將使用 Code Assist 建立新功能的測試,並產生程式碼來通過這些測試,並擴充應用程式。
您將會...
- 您將使用 Cloud Shell 編輯器下載現有網頁應用程式的程式碼。
- 您將在 Cloud Shell 編輯器中使用 Gemini Code Assist Chat 解答 Google Cloud 的一般問題。
- 您將使用 Cloud Shell 編輯器中的 Gemini Code Assist 內嵌程式碼輔助功能產生應用程式測試、執行測試、找出並修正錯誤,然後擴充應用程式的功能。
課程內容...
- 如何使用 Gemini 程式碼輔助工具執行多項開發人員工作,例如產生測試及產生程式碼。
- 如何使用 Gemini Code Assist 瞭解 Google Cloud。
需求條件...
- Chrome 網路瀏覽器
- Gmail 帳戶
- 已啟用計費功能的 Cloud 專案
- 您的 Cloud 專案已啟用 Gemini Code Assist
此研究室是針對各種等級的開發人員 (包括新手) 所設計。雖然範例應用程式使用 Python 語言,但您不必熟悉 Python 程式設計,才能瞭解實際情況。我們會著重為開發人員熟悉 Gemini Code Assist 的功能。
2. 設定
您應有已啟用帳單功能的 Cloud 專案,可以用於這個研究室。現在我們會在 Google Cloud 專案中啟用 Gemini API。請遵循以下步驟:
- 請造訪 https://console.cloud.google.com,並確定您已選取要用於這個研究室的 Google Cloud 專案。按一下畫面右上方的 Gemini 圖示。
- Gemini for Cloud 控制台視窗會隨即開啟,如果如下所示,請按一下「Enable」按鈕。如果畫面上未顯示「啟用」按鈕,而是顯示即時通訊介面,表示您已為專案啟用 Gemini,可以直接進入下一個步驟。
- 啟用之後,您可以向查詢一或兩個要求測試 Gemini。系統會顯示幾個查詢範例,您可以試試看「什麼是 Cloud Run?」
Code Assist 會為您提供解答。按一下右上角的 圖示,即可關閉 Code Assist 即時通訊視窗。
在 Cloud Shell 編輯器中啟用 Gemini
Gemini 程式碼輔助功能在幾個熱門 IDE 中可用,運作方式類似。在這個程式碼研究室中,您將使用 Google Cloud Shell 編輯器,此編輯器可完全在網路瀏覽器中執行。您需要在 Cloud Shell 編輯器中啟用及設定 Gemini,步驟如下:
- 點選下方圖示來啟動 Cloud Shell。啟動 Cloud Shell 執行個體可能需要幾分鐘的時間。
- 按一下「Editor」或「Open Editor」按鈕 (視情況而定),然後等待系統顯示 Cloud Shell 編輯器。如果看到「Try the new editor」按鈕,請按一下該按鈕。
- 點選底部狀態列中的「Cloud Code - 登入」按鈕,如圖所示。按照指示授權外掛程式。如果您在狀態列中看見「Cloud Code - no project」,請選取該專案,然後從您打算使用的專案清單中選取特定的 Google Cloud 專案。
- 如果右下方的狀態列中沒有顯示 Gemini 圖示,您必須在 Cloud Code 中啟用該圖示。確認已在 IDE 中啟用 Gemini (舊稱 Duet AI for Developers) 之前,請先前往「Cloud Code Extension」→「Settings」,然後輸入「Duet AI: Enable」文字 (如下所示)。確認已勾選核取方塊。請重新載入 IDE。即可在 Cloud Code 中啟用 Gemini,而 IDE 會顯示 Gemini 狀態列。
- 按一下右下角的「Gemini」按鈕 (如圖所示),然後選取已啟用 Cloud AI Companion API 的正確 Google Cloud 專案。
- 選取 Google Cloud 專案後,請確認您在狀態列中看到 Cloud Code 狀態訊息,而且右側的狀態列也已啟用 Gemini,如下所示:
Gemini 程式碼輔助功能已可使用!
3. 下載並檢查應用程式
在終端機視窗中,執行指令以複製含有範例程式碼的存放區,然後切換至新目錄 (如果終端機視窗已無法開啟,請按一下「Terminal」(終端機) 或「Open Terminal」(開啟終端機) 按鈕來還原:
git clone https://github.com/GoogleCloudPlatform/testing-with-duet-ai-codelab.git
cd testing-with-duet-ai-codelab
在編輯器中開啟 main.py,然後按一下編輯器左側的「Gemini 即時通訊」圖示,開啟「Gemini 即時通訊」視窗。這個「Gemini Chat」視窗位於 IDE,其中提供 IDE 中的程式碼,可用於討論。輸入「說明」提示並查看答案:
你可以捲動這個即時通訊視窗來查看完整答案。說明內容表示我們可以使用終端機視窗中的 python3 main.py
指令,在本機執行這個程式。
4. 在本機執行
視需要變更為包含 cd ~/testing-with-duet-ai-codelab
的存放區目錄,然後在終端機視窗中輸入 python3 main.py
指令:
按一下連結 http://127.0.0.1:8080,開啟新的瀏覽器分頁至應用程式首頁:
應用程式是在「本機」執行。事實上,Cloud Shell 編輯器的功能也很強大。應用程式是在 Cloud Shell 中執行,而不是在您的電腦上執行。點按連結後,系統會開啟一個分頁,而不是實際本機位址 (http://127.0.0.1:8080),而是 Cloud Shell 為此設定的 Proxy 伺服器。效果與實際在本機執行效果相同。
歡迎立即試用!輸入 25,然後按下「Convert!」
沒錯,25 的羅馬數字是 XXV!您必須在這裡完成操作。
也可以再確認幾個數字25 顆星,大約 24 後的結果如何?
也許我們有一點時間覺得一切都沒有問題。 XXIIII 這個轉換是否正確?是不是 XXIV?
以 XXIIII 的案件為例,這可能不是大家預期的。但由於這並非錯誤 (請注意,許多時鐘的時鐘顯示為羅馬數字 2 號),因此這個問題日後會有所強化。
不妨試著輸入負數。零?但無法以羅馬數字表示這些數字。沒有向使用者傳回任何內容,似乎有待解決的錯誤。
測試有助於找出並消除錯誤,而 Gemini Code Assist 可協助我們撰寫及使用測試。
5. 新增測試
請返回 Gemini 即時通訊視窗,然後提問
How can I test the number_to_roman function?
請閱讀回應,其中應包括討論 unittest 模組和 pytest 模組。
您可能想讓 Gemini Code Assist 代您編寫這些測試。在編輯器中開啟實際轉換程式碼的 calendar.py,接著返回 Gemini 即時通訊視窗,然後再次提出要求
How can I test the number_to_roman function?
回應現在更具體,包含可複製或插入新檔案中的 Unittest 模組:
import unittest
import calendar
class NumberToRomanTest(unittest.TestCase):
def test_convert_1(self):
self.assertEqual(calendar.number_to_roman(1), "I")
def test_convert_4(self):
self.assertEqual(calendar.number_to_roman(4), "IV")
def test_convert_9(self):
self.assertEqual(calendar.number_to_roman(9), "IX")
def test_convert_40(self):
self.assertEqual(calendar.number_to_roman(40), "XL")
def test_convert_90(self):
self.assertEqual(calendar.number_to_roman(90), "XC")
def test_convert_400(self):
self.assertEqual(calendar.number_to_roman(400), "CD")
def test_convert_900(self):
self.assertEqual(calendar.number_to_roman(900), "CM")
def test_convert_1990(self):
self.assertEqual(calendar.number_to_roman(1990), "MCMXC")
def test_convert_2023(self):
self.assertEqual(calendar.number_to_roman(2023), "MMXXIII")
您可能會看到與上述範例不同的程式碼。Gemini Code Assist 的基礎模型會不時更新,因此答案也不一定相同。如果看到另一組程式碼,現在可以選擇要繼續處理本程式碼研究室中顯示的範例,方法是複製這裡顯示的程式碼,或是直接嘗試在 Gemini 程式碼輔助工具中提供的替代答案。如果方便的話,您也可以試試這兩種途徑。Gemini Code Assist 是程式設計助理,可讓您視需要使用。
請按一下 Gemini Chat 視窗右上角的雙指向箭頭,建立新的包含單元測試程式碼的檔案,或使用 IDE 建立新檔案,然後貼上本研究室中顯示的程式碼。在那個視窗中按下 CTRL-S 或 CMD-S 來儲存,然後呼叫儲存的檔案 calendar-unittest.py。
返回終端機並按下 CTRL-C 鍵停止先前執行的網路伺服器,並取得殼層提示。輸入指令
python3 calendar-unittest.py
執行新的測試
沒有任何輸出內容。這不符合預期。是否全都在不安靜的情況下通過?你想知道這一點。回顧含有測試程式碼的 Gemini 程式碼輔助工具,請再回來查看。程式碼下方提供瞭如何執行測試案例的詳細資訊:
請嘗試執行建議的指令:
python -m unittest discover
如果您的機器沒有將 python3
指令別名為 python
,可能會發生問題。在這種情況下,請執行以下指令:
python3 -m unittest discover
這個指令會執行,但會傳回 Ran 0 tests in 0.000s
。模組中包含多項測試。預期情況
這是指令中的最後一個字詞 discover
。從何而來?顯然地,Gemini Code Assist 預期您將測試程式碼儲存在名為 discover
或 discover.py
的檔案中,但並未指定您接下來該怎麼做。由於檔案實際上儲存在 calendar-unittest.py
中,請嘗試執行下列指令:
python3 -m unittest calendar-unittest
現在您已看到很多輸出內容,可以先看到以下的內容:
$ python3 -m unittest calendar-unittest
.F.FFFFFF
======================================================================
FAIL: test_convert_1990 (calendar-unittest.NumberToRomanTest)
----------------------------------------------------------------------
Traceback (most recent call last):
File "/home/charles_engelke/testing-with-duet-ai-codelab/calendar-unittest.py", line 28, in test_convert_1990
self.assertEqual(calendar.number_to_roman(1990), "MCMXC")
AssertionError: 'MDCCCCLXXXX' != 'MCMXC'
- MDCCCCLXXXX
+ MCMXC
第一行顯示每項通過測試的經期,而每個通過測試的時段則為 F
。大多數的測試都失敗了!接著,系統會個別列出失敗的測試,並顯示預期的輸出內容和實際輸出內容。我們不清楚這些測試的執行順序。這個值是按照測試名稱的字母順序排列,而不是測試在檔案中的顯示順序。例如,先執行 test_convert_1
,然後是 test_convert_1990
,再執行 test_convert_2023
,依此類推。只有 1
和 2023
的測試案例通過。
首次試用此程式碼時,您會發現將 24
轉換為 XXIIII
,雖然並非完全錯誤,而是將 IIII
轉換為 IV
的常見格式。所有失敗的測試都適用於類似案例。第一次提到這個問題時,研究室表示:「但事實上,許多時鐘實際上並非錯誤 (請注意,許多時鐘將 4
顯示為羅馬數字 IIII
),日後就要改善問題。」
您可以變更測試案例,預期並接受「不是真的錯誤」來回應提供的程式碼,也可以接受是「未來強化」的時間。因此下一步,使用 Gemini 程式碼輔助功能修正程式碼,根據測試結果給予更妥善的回答。
6. 強化程式碼
請回想一下,24
的 XXIIII
等回覆 (而不是較常見的 XXIV
) 遭判定為「非真正錯誤」,因此已遭移除,日後將不再適用。現在正是時候。即使所謂「不構成錯誤」的答案仍然令人煩心。
羅馬數字中的重複數字第一個規則為:只要一列中有四位數相同的數字,這些數字必須替換成其中一個數字,後面接著下一個數字。因此,應以 XXIV
取代 XXIIII
。同樣地,XXXX
應變更為 XL
,而 CCCC
應變成 CD
。
請要求 Gemini Code Assist 在 number_to_roman 傳回前,以這種方式變更 roman 變數的值:
If the final value of roman has IIII in it, that should be replaced by IV. Similarly XXXX should be replaced by XL, and CCCC should become CD. How can I make those changes?
我們建議在程式碼結尾加上一些程式碼:
請複製/貼上,或在編輯器中輸入這些程式碼,然後看看會發生什麼事:
Gemini Code Assist 新增幾行程式碼來處理第一組替換後可能發生的案例。例如,19 會轉換成 XVIIII,再轉換為 XVIV,最後轉換成正確的 XIX。
如果 Gemini Code Assist 產生了實用的建議,請按下 Tab 鍵接受建議、儲存檔案,然後再次執行網路伺服器。否則,請手動新增範例中顯示的程式碼行,然後儲存檔案。嘗試這項艱難的轉換: 1999 年:
答對了!
立即重新執行測試。他們都通過了!
網頁應用程式已準備好進入實際工作環境。
7. 部署至 Cloud Run
Cloud Run 會在網際網路上為您執行容器化應用程式。如果是以 Flash 等常見架構編寫的應用程式,gcloud run deploy
指令甚至會在部署之前為您建構該容器。執行下列指令:
gcloud run deploy
在終端機中。當系統詢問原始碼的位置時,按下 Enter 鍵即可接受系統建議的正確位置。同樣地,系統要求輸入服務名稱時,按下 Enter 鍵即可接受建議。
gcloud 無法判斷要使用的專案,因此指令可能會失敗。在這種情況下,請執行下列指令:
gcloud config set core/project <project-id>
其中
會換成您的專案 ID,可能與專案名稱相同。然後重新執行 gcloud run deploy
指令。
- 這個指令會提示您特定的 API 需要但尚未啟用。輸入 y 即可啟用這項功能。
- 系統提示您選取區域時,請選擇最適合您的地區。建議您輸入與
us-central1
對應的數字。 - 系統詢問時,請輸入 Y 繼續操作。
- 您要允許在「未經驗證」unauthenticated的情況下叫用這項 Cloud Run 服務。Cloud Run 使用的驗證選項適合呼叫服務的程式使用。這是網站,因此你無法使用驗證功能。
Google Cloud 會建立、部署容器、將流量轉送至該容器,以及設定存取權政策,然後顯示首頁的連結:
您可以前往該連結存取您的應用程式。
請輸入數字,然後按下 Enter 鍵,接著按下 Enter 鍵!
什麼!?
這對你的機器很有幫助!為什麼尚未完成這項課程?
一探究竟!問問 Gemini 程式碼輔助問題
Why am I getting an internal server error on cloud run?
顯然,Gemini 程式碼輔助功能可以讀取記錄檔,顯示類似文字。以 Gemini Code Assist 為例,說明如何自行記錄資料:
開始操作。請尋找帶有紅色 !! 錯誤指示的行,如下所示:
後面接著就要顯示這幾行呼叫堆疊的詳細資訊,如下所示:
查看您的 calendar.py 檔案時,其中會顯示 number_to_roman 函式!這一切都是透過機器運作Cloud Run 有何不同?
答案很簡單。Python3 中有一個稱為 calendar 的標準模組,就像在 calendar.py 檔案上定義 number_to_roman 函式一樣。在您的本機電腦上,Python 搜尋名為 calendar 的模組時,會先搜尋您的應用程式目錄。顯然 Cloud Run 上的 Python 會先搜尋標準模組、將其匯入,但並未找到 number_to_roman 函式。
這些環境中的這種差異一直是可能的。幸運的是,當應用程式容器化時,其環境就會承受其環境,因此在任何位置執行應用程式時,都能享有相同的行為模式。如果您在本機上執行相同的容器化應用程式 Cloud Run,也會遇到相同的問題。
修正這個問題。您需要將本機日曆模組的名稱變更為標準模組名稱以外的名稱。將 calendar.py 檔案重新命名為 my_calendar.py,然後將 main.py 和 calendar-unittest.py 中的 import calendar
行變更為 import my_calendar
。最後,變更這一行
roman = calendar.number_to_roman(number)
到
roman = my_calendar.number_to_roman(number)
在本機試用、執行測試,然後重新部署:
gcloud run deploy
現在這項功能可以正常運作:
您可以分享這個網址,所有需要羅馬數字轉換工具的使用者都能使用您的網址。
8. 選用:讓畫面更美觀
你的應用程式運作正常,任何網路使用者都能存取。但看起來有點平易近人。在告訴大家之前,何不要求 Gemini Code Assist 改善外觀?
開啟 templates/index.html
檔案。在 Gemini 即時通訊視窗中,詢問:
Make this index.html file use material design.
回應就是針對目前的檔案新增內容,這樣的結果會如下所示:
<!DOCTYPE html>
<html>
<head>
<title>Roman Numerals</title>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<h1 class="mdl-typography--title">Roman Numerals</h1>
<form action="/convert" method="post">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="number" name="number" required />
<label class="mdl-textfield__label" for="number">Enter a number:</label>
</div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Convert!
</button>
</form>
</body>
</html>
使用圖示複製建議的程式碼,然後貼上 index.html 的現有內容。在終端機中執行 python3 main.py
,點選連結即可開啟預覽視窗。這個網頁現在有點不清楚:
如有需要,您可以使用 convert.html 檔案重複上述步驟。
Gemini Code Assist 具備許多 CSS 功能,可讓您以各種方式為應用程式頁面設定樣式。這只是起步。
由於您想要共用這個應用程式,別忘了將應用程式重新部署至 Cloud Run:
gcloud run deploy
您可以傳送網址給需要轉換成羅馬數字的使用者。
9. 恭喜!
恭喜!您已成功與 Gemini Code Assist 合作,為應用程式新增測試、修正錯誤,以及新增進階功能。
用完建構作業後,您可以在 Cloud 控制台資訊主頁中刪除應用程式,以免日後產生任何費用。