Gemini Code Assist를 사용한 테스트 소개

1. 소개

이 실습에서는 Google Cloud의 AI 기반 공동작업자인 Gemini Code Assist를 사용하여 기존 Python 웹 애플리케이션에 테스트를 추가하고 테스트에서 노출된 해당 애플리케이션의 오류를 찾아 수정합니다. 그런 다음 Code Assist를 사용하여 새 기능에 대한 테스트를 만들고 이러한 테스트를 통과하고 앱을 확장하는 코드를 생성합니다.

실습할 내용…

  • Cloud Shell 편집기를 사용하여 기존 웹 애플리케이션용 코드를 다운로드합니다.
  • Cloud Shell 편집기에서 Gemini Code Assist Chat을 사용하여 Google Cloud에 대한 일반적인 질문을 합니다.
  • Cloud Shell 편집기에서 Gemini Code Assist 인라인 코드 지원을 사용하여 애플리케이션 테스트를 생성하고, 테스트를 실행하고, 오류를 찾아 수정한 다음 애플리케이션의 기능을 확장합니다.

학습할 내용…

  • 테스트 생성 및 코드 생성과 같은 여러 개발자 작업에 Gemini Code Assist를 사용하는 방법
  • 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. Cloud용 Gemini 콘솔 창이 콘솔 오른쪽에 열립니다. 아래에 표시된 경우 사용 설정 버튼을 클릭합니다. 사용 설정 버튼이 표시되지 않고 대신 채팅 인터페이스가 표시된다면 이미 프로젝트에 Cloud용 Gemini를 사용 설정한 것이므로 다음 단계로 바로 이동할 수 있습니다.

GeminiApiEnable.png

  1. 사용 설정되면 Gemini에 1~2개의 쿼리를 요청하여 테스트할 수 있습니다. 몇 가지 샘플 쿼리가 표시되지만 Cloud Run이란 무엇인가요?와 같은 쿼리를 사용해 볼 수 있습니다.

GeminiChatWindow.png

Code Assist에서 질문에 대한 답변을 제공해 드립니다. 오른쪽 상단에 있는 f68286b2b2ea5c0a.png 아이콘을 클릭하면 Code Assist 채팅 창을 닫을 수 있습니다.

Cloud Shell 편집기에서 Gemini 사용 설정

Gemini Code Assist는 사용 가능하며 많이 사용되는 여러 IDE에서 유사하게 동작합니다. 이 Codelab에서는 웹브라우저에서 완전히 실행되는 Google Cloud Shell 편집기를 사용합니다. Cloud Shell 편집기에서 Gemini를 사용 설정하고 구성해야 하며 단계는 아래와 같습니다.

  1. 아래 표시된 아이콘을 통해 Cloud Shell을 실행합니다. Cloud Shell 인스턴스를 시작하는 데 1~2분 정도 걸릴 수 있습니다.

72dc3df7b007fcde.png

  1. 편집기 또는 편집기 열기 버튼을 클릭하고 Cloud Shell 편집기가 나타날 때까지 기다립니다. 새 편집기 사용해 보기 버튼이 표시되면 클릭합니다.

CloudShellEditor.png

  1. 그림과 같이 하단 상태 표시줄에서 Cloud Code - 로그인 버튼을 클릭합니다. 안내에 따라 플러그인을 승인합니다. 상태 표시줄에 'Cloud Code - 프로젝트 없음'이 표시되면 이를 선택한 다음 작업하려는 프로젝트 목록에서 특정 Google Cloud 프로젝트를 선택합니다.

CloudCodeSignIn.png

  1. 오른쪽 하단의 상태 표시줄에 Gemini 아이콘이 표시되지 않으면 Cloud Code에서 아이콘을 사용 설정해야 합니다. 그 전에 Cloud Code Extension → Settings(설정)로 이동한 다음 아래와 같이 Duet AI: Enable 텍스트를 입력하여 IDE에서 Gemini(이전 명칭: 개발자용 Duet AI)가 사용 설정되어 있는지 확인합니다. 체크박스가 선택되어 있는지 확인합니다. 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 Code Assist를 사용할 수 있습니다.

3. 애플리케이션 다운로드 및 검토

터미널 창에서 명령어를 실행하여 시작 코드로 저장소를 클론한 다음 새 디렉터리로 변경합니다. 터미널 창이 더 이상 열려 있지 않으면 터미널 또는 터미널 열기 버튼을 클릭하여 복원합니다.

git clone https://github.com/GoogleCloudPlatform/testing-with-duet-ai-codelab.git
cd testing-with-duet-ai-codelab

편집기에서 main.py를 열고 편집기의 왼쪽에 있는 Gemini 채팅 아이콘을 클릭하여 Gemini Chat 창을 엽니다. 이 Gemini Chat 창은 IDE 내에 있으며 IDE의 코드를 토론 컨텍스트로 제공합니다. Explain this 프롬프트를 입력하고 답변을 확인합니다.

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에서 이 목적으로만 설정한 프록시 서버로 탭이 열립니다. 실제로 로컬에서 실행하는 것과 효과는 동일합니다.

지금 바꿔 보세요. 25를 입력하고 Convert!를 누릅니다.

e1b9d5832f6d0058.png

맞습니다. 25는 로마 숫자로 XXV입니다. 여기서 작업을 완료해야 합니다.

숫자를 몇 개 더 확인해 보세요. 25개는 작동했는데 24개는요?

37982e385e17baac.png

모든 것이 괜찮다고 생각했기 때문일 수 있습니다. XXIIII의 24 변환이 올바른 값일까요? XXIV라고 해야 하지 않나요?

XXIIII가 옳다고 주장하는 경우도 있겠지만, 일반적으로 사람들이 기대하는 것은 아닙니다. 하지만 실제로 잘못된 것은 아니므로 (많은 시계는 로마 숫자 IIII로 4를 표시함) 향후 개선을 위해 이 문제를 남깁니다.

음수를 입력해 보세요. 0건이라고요? 이러한 숫자를 로마 숫자로 나타낼 수 있는 방법은 없습니다. 사용자에게 아무 것도 표시되지 않는 것으로 보입니다. 이는 해결해야 할 오류로 보입니다.

테스트를 통해 오류를 찾고 제거할 수 있으며 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의 기본 모델은 수시로 업데이트되므로 답변이 항상 동일하지는 않습니다. 다른 코드 세트가 표시되면 이제 여기에 표시된 코드를 복사하여 이 Codelab에 표시된 샘플을 계속 사용할지 아니면 Gemini Code Assist에서 제공하는 대체 답변을 사용해 볼 수 있습니다. 시간이 있다면 두 방법을 모두 시도해도 됩니다. Gemini Code Assist는 필요에 맞게 사용할 수 있는 코딩 어시스턴트입니다.

Gemini 채팅 창 오른쪽 상단에 있는 이중 방향 화살표를 클릭하여 단위 테스트 코드가 포함된 새 파일을 만들거나 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는 테스트 코드가 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가 차례로 실행되었습니다. 12023 테스트 사례만 통과되었습니다.

이 코드를 처음 사용해 볼 때 24XXIIII로 변환되었음을 확인했습니다. 이는 정확히 틀린 것은 아니지만 IIIIIV로 변환되는 일반적인 형식은 아닙니다. 모든 실패한 테스트는 유사한 사례에 대한 것이었습니다. 이 문제가 처음 언급되었을 때 실험실에서는 "하지만 실제로 잘못된 것이 아니므로 (많은 시계에서 4가 로마 숫자 IIII로 표시됨) 이 문제는 향후 개선을 위해 남겨둡니다."라고 말했습니다.

테스트 사례를 예상하여 변경하고 코드에 제공된 '잘못된' 답변을 수락하거나 '향후 개선사항'이 적용될 때가 되었음을 수락할 수 있습니다. 따라서 다음 단계는 Gemini Code Assist 도움말을 통해 코드를 수정하여 테스트에서 기대하는 더 허용 가능한 답변을 제공하는 것입니다.

6. 코드 향상

24에 관한 XXIIII와 같은 응답은 더 일반적인 XXIV 대신 '그렇지 않은' 것으로 간주되어 향후 개선을 위해 연기되었습니다. 그 미래가 지금이야. '정답이 아닌' 답변은 여전히 성가십니다.

로마 숫자의 반복 숫자에 대한 첫 번째 규칙은 다음과 같습니다. 4개의 동일한 자릿수가 연속으로 존재하는 경우 1개의 숫자 뒤에 있는 다음 높은 자릿수로 대체해야 합니다. 따라서 XXIIIIXXIV로 대체해야 합니다. 마찬가지로 XXXXXL로, CCCCCD로 변경해야 합니다.

number_to_roman에서 반환되기 직전에 Gemini Code Assist에 다음과 같이 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로 대체되며, 이 ID는 프로젝트 이름과 동일할 수 있습니다. 그런 다음 gcloud run deploy 명령어를 다시 실행합니다.

  • 이 명령어는 특정 API가 필요하지만 아직 사용 설정되지 않았다는 메시지를 표시합니다. 사용 설정하려면 y 를 입력합니다.
  • 지역을 선택하라는 메시지가 표시되면 편한 지역을 선택하세요. us-central1에 해당하는 번호를 입력해도 괜찮습니다.
  • 메시지가 표시되면 Y를 입력하여 계속 진행합니다.
  • 이 Cloud Run 서비스의 unauthenticated 호출을 허용하려고 합니다. Cloud Run에서 사용하는 인증 옵션은 서비스를 호출하는 프로그램에서 사용하기에 적합합니다. 웹사이트이므로 인증을 사용하지 않습니다.

Google Cloud가 컨테이너를 빌드 및 배포하고, 이 컨테이너로 트래픽을 라우팅하고, 액세스 정책을 설정한 후 홈페이지 링크를 표시합니다.

94ba7d8d63a44afd.png

이 링크로 이동하여 애플리케이션에 액세스할 수 있습니다.

a2e51666dfd33a9f.png

숫자를 입력하고 Enter 키를 누르면

5021535ac991a95c.png

무엇을!?!

사용 중인 머신에서 작동했습니다. 완료되지 않은 이유는 무엇인가요?

알아보세요. Gemini Code Assist에 물어보기 위해

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

4b24321251d6eddf.png

Gemini Code Assist가 이와 유사한 로그 파일을 읽을 수 있다는 것을 알게 되었습니다. Gemini Code Assist에 직접 로그를 확인하는 방법을 질문해 보겠습니다.

92d1855be73ef1d.png

메시지가 표시되면 안내를 따라 SSH 키를 생성합니다. 아래와 같이 오류의 빨간색 !! 표시가 있는 줄을 찾습니다.

9bed4f9ed82de21c.png

그 다음 여기로 이어지는 호출 스택에 관한 여러 줄의 세부정보가 나오고 다음과 같은 내용이 있습니다.

47fc93be845f4e3f.png

calendar.py 파일을 보면 바로 number_to_roman 함수를 볼 수 있습니다. 그리고 여러분은 컴퓨터에서 작동했기 때문에 맞습니다. Cloud Run에서는 무엇이 다를까요?

답은 까다롭습니다. number_to_roman 함수가 정의된 calendar.py 파일과 마찬가지로 calendar라는 표준 모듈이 Python3에 포함되어 있습니다. Python은 로컬 머신에서 캘린더라는 모듈을 찾으면 애플리케이션 디렉터리를 먼저 검색했습니다. Cloud Run에서 사용하는 Python은 먼저 표준 모듈을 찾아 가져왔지만 number_to_roman 함수를 찾지 못했습니다.

환경에서 이러한 종류의 차이는 항상 발생할 수 있습니다. 다행히 애플리케이션을 컨테이너화하면 애플리케이션 내부에 환경이 포함되어 있으므로 실행할 때마다 동일한 동작을 예상할 수 있습니다. Cloud Run에 있는 것과 동일한 컨테이너화된 애플리케이션을 로컬에서 실행했다면 동일한 문제가 발생했을 것입니다.

이 문제를 해결합니다. 로컬 캘린더 모듈의 이름을 표준 모듈 이름이 아닌 다른 이름으로 변경해야 합니다. calendar.py 파일 이름을 my_calendar.py로 바꾼 다음 main.pycalendar-unittest.pyimport calendar 줄을 import my_calendar로 변경합니다. 마지막으로

roman = calendar.number_to_roman(number)

to

roman = my_calendar.number_to_roman(number)

로컬에서 사용해 보고 테스트를 실행한 후 다시 배포하세요.

gcloud run deploy

이제 제대로 작동합니다.

ed288801c6825eb1.png

로마 숫자 변환 도구가 필요한 사용자는 누구나 이 URL을 사용할 수 있습니다.

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

로마 숫자로 변환해야 하는 사람들에게 URL을 전달할 수 있습니다.

9. 개업을 축하합니다.

수고하셨습니다. Gemini Code Assist를 사용하여 애플리케이션에 테스트를 추가하고 애플리케이션의 오류를 수정하고 향상된 기능을 추가하는 작업을 성공적으로 마쳤습니다.

빌드한 애플리케이션의 사용을 마치면 Cloud 콘솔 대시보드에서 해당 애플리케이션을 삭제하여 향후 더 이상 요금이 청구되지 않도록 할 수 있습니다.

참조 문서…