Gemini 程式碼輔助功能測試簡介

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。請遵循以下步驟:

  1. 請造訪 https://console.cloud.google.com,並確定您已選取要用於這個研究室的 Google Cloud 專案。按一下畫面右上方的 Gemini 圖示。

GeminiBanner.png

  1. Gemini for Cloud 控制台視窗會隨即開啟,如果如下所示,請按一下「Enable」按鈕。如果畫面上未顯示「啟用」按鈕,而是顯示即時通訊介面,表示您已為專案啟用 Gemini,可以直接進入下一個步驟。

GeminiApiEnable.png

  1. 啟用之後,您可以向查詢一或兩個要求測試 Gemini。系統會顯示幾個查詢範例,您可以試試看「什麼是 Cloud Run?」

GeminiChatWindow.png

Code Assist 會為您提供解答。按一下右上角的 f68286b2b2ea5c0a.png 圖示,即可關閉 Code Assist 即時通訊視窗。

在 Cloud Shell 編輯器中啟用 Gemini

Gemini 程式碼輔助功能在幾個熱門 IDE 中可用,運作方式類似。在這個程式碼研究室中,您將使用 Google Cloud Shell 編輯器,此編輯器可完全在網路瀏覽器中執行。您需要在 Cloud Shell 編輯器中啟用及設定 Gemini,步驟如下:

  1. 點選下方圖示來啟動 Cloud Shell。啟動 Cloud Shell 執行個體可能需要幾分鐘的時間。

72dc3df7b007fcde.png

  1. 按一下「Editor」或「Open Editor」按鈕 (視情況而定),然後等待系統顯示 Cloud Shell 編輯器。如果看到「Try the new editor」按鈕,請按一下該按鈕。

CloudShellEditor.png

  1. 點選底部狀態列中的「Cloud Code - 登入」按鈕,如圖所示。按照指示授權外掛程式。如果您在狀態列中看見「Cloud Code - no project」,請選取該專案,然後從您打算使用的專案清單中選取特定的 Google Cloud 專案。

CloudCodeSignIn.png

  1. 如果右下方的狀態列中沒有顯示 Gemini 圖示,您必須在 Cloud Code 中啟用該圖示。確認已在 IDE 中啟用 Gemini (舊稱 Duet AI for Developers) 之前,請先前往「Cloud Code Extension」→「Settings」,然後輸入「Duet AI: Enable」文字 (如下所示)。確認已勾選核取方塊。請重新載入 IDE。即可在 Cloud Code 中啟用 Gemini,而 IDE 會顯示 Gemini 狀態列。

EnableDuetAiSetting.png

  1. 按一下右下角的「Gemini」按鈕 (如圖所示),然後選取已啟用 Cloud AI Companion API 的正確 Google Cloud 專案。

GeminiSelectGoogleCloudProject.png

  1. 選取 Google Cloud 專案後,請確認您在狀態列中看到 Cloud Code 狀態訊息,而且右側的狀態列也已啟用 Gemini,如下所示:

GeminiEnabledStatusBar.png

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 中的程式碼,可用於討論。輸入「說明」提示並查看答案:

GeminiChatExplainThis.png

你可以捲動這個即時通訊視窗來查看完整答案。說明內容表示我們可以使用終端機視窗中的 python3 main.py 指令,在本機執行這個程式。

4. 在本機執行

視需要變更為包含 cd ~/testing-with-duet-ai-codelab 的存放區目錄,然後在終端機視窗中輸入 python3 main.py 指令:

3bf558e9cea15375.png

按一下連結 http://127.0.0.1:8080,開啟新的瀏覽器分頁至應用程式首頁:

fb06f382a4c03e4c.png

應用程式是在「本機」執行。事實上,Cloud Shell 編輯器的功能也很強大。應用程式是在 Cloud Shell 中執行,而不是在您的電腦上執行。點按連結後,系統會開啟一個分頁,而不是實際本機位址 (http://127.0.0.1:8080),而是 Cloud Shell 為此設定的 Proxy 伺服器。效果與實際在本機執行效果相同。

歡迎立即試用!輸入 25,然後按下「Convert!」

e1b9d5832f6d0058.png

沒錯,25 的羅馬數字是 XXV!您必須在這裡完成操作。

也可以再確認幾個數字25 顆星,大約 24 後的結果如何?

37982e385e17baac.png

也許我們有一點時間覺得一切都沒有問題。 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 程式碼輔助工具,請再回來查看。程式碼下方提供瞭如何執行測試案例的詳細資訊:

run-unittest.png

請嘗試執行建議的指令:

python -m unittest discover

如果您的機器沒有將 python3 指令別名為 python,可能會發生問題。在這種情況下,請執行以下指令:

python3 -m unittest discover

這個指令會執行,但會傳回 Ran 0 tests in 0.000s。模組中包含多項測試。預期情況

這是指令中的最後一個字詞 discover。從何而來?顯然地,Gemini Code Assist 預期您將測試程式碼儲存在名為 discoverdiscover.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,依此類推。只有 12023 的測試案例通過。

首次試用此程式碼時,您會發現將 24 轉換為 XXIIII,雖然並非完全錯誤,而是將 IIII 轉換為 IV 的常見格式。所有失敗的測試都適用於類似案例。第一次提到這個問題時,研究室表示:「但事實上,許多時鐘實際上並非錯誤 (請注意,許多時鐘將 4 顯示為羅馬數字 IIII),日後就要改善問題。」

您可以變更測試案例,預期並接受「不是真的錯誤」來回應提供的程式碼,也可以接受是「未來強化」的時間。因此下一步,使用 Gemini 程式碼輔助功能修正程式碼,根據測試結果給予更妥善的回答。

6. 強化程式碼

請回想一下,24XXIIII 等回覆 (而不是較常見的 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?

我們建議在程式碼結尾加上一些程式碼:

6437c3fa2c5fabd1.png

請複製/貼上,或在編輯器中輸入這些程式碼,然後看看會發生什麼事:

dcefa568cab82fb7.png

Gemini Code Assist 新增幾行程式碼來處理第一組替換後可能發生的案例。例如,19 會轉換成 XVIIII,再轉換為 XVIV,最後轉換成正確的 XIX。

如果 Gemini Code Assist 產生了實用的建議,請按下 Tab 鍵接受建議、儲存檔案,然後再次執行網路伺服器。否則,請手動新增範例中顯示的程式碼行,然後儲存檔案。嘗試這項艱難的轉換: 1999 年:

a206999587fdc9.png

答對了!

立即重新執行測試。他們都通過了!

網頁應用程式已準備好進入實際工作環境。

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 會建立、部署容器、將流量轉送至該容器,以及設定存取權政策,然後顯示首頁的連結:

94ba7d8d63a44afd.png

您可以前往該連結存取您的應用程式。

a2e51666dfd33a9f.png

請輸入數字,然後按下 Enter 鍵,接著按下 Enter 鍵!

5021535ac991a95c.png

什麼!?

這對你的機器很有幫助!為什麼尚未完成這項課程?

一探究竟!問問 Gemini 程式碼輔助問題

Why am I getting an internal server error on cloud run?

4b24321251d6eddf.png

顯然,Gemini 程式碼輔助功能可以讀取記錄檔,顯示類似文字。以 Gemini Code Assist 為例,說明如何自行記錄資料:

92d1855be73ef1d.png

開始操作。請尋找帶有紅色 !! 錯誤指示的行,如下所示:

9bed4f9ed82de21c.png

後面接著就要顯示這幾行呼叫堆疊的詳細資訊,如下所示:

47fc93be845f4e3f.png

查看您的 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.pycalendar-unittest.py 中的 import calendar 行變更為 import my_calendar。最後,變更這一行

roman = calendar.number_to_roman(number)

roman = my_calendar.number_to_roman(number)

在本機試用、執行測試,然後重新部署:

gcloud run deploy

現在這項功能可以正常運作:

ed288801c6825eb1.png

您可以分享這個網址,所有需要羅馬數字轉換工具的使用者都能使用您的網址。

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,點選連結即可開啟預覽視窗。這個網頁現在有點不清楚:

295643ec03fcaafc.png

如有需要,您可以使用 convert.html 檔案重複上述步驟。

Gemini Code Assist 具備許多 CSS 功能,可讓您以各種方式為應用程式頁面設定樣式。這只是起步。

由於您想要共用這個應用程式,別忘了將應用程式重新部署至 Cloud Run:

gcloud run deploy

您可以傳送網址給需要轉換成羅馬數字的使用者。

9. 恭喜!

恭喜!您已成功與 Gemini Code Assist 合作,為應用程式新增測試、修正錯誤,以及新增進階功能。

用完建構作業後,您可以在 Cloud 控制台資訊主頁中刪除應用程式,以免日後產生任何費用。

參考文件...