이 페이지는 Cloud Translation API를 통해 번역되었습니다.

소프트웨어 개발 수명 주기 전반에서 Duet AI 사용

1. 개요

Google Cloud 개발자는 일상 업무에서 일반적으로 여러 Google Cloud 제품과 서비스를 사용합니다. 이러한 제품은 개발자가 클라우드에서 애플리케이션을 개발, 테스트, 배포, 관리할 수 있게 해줍니다. 개발자는 Duet AI의 도움을 받아 Duet AI의 대화형 채팅, 코드 지원, 내장된 통합을 활용하여 Google Cloud 제품을 사용할 때 생산성을 높일 수 있습니다.

이 실습에서는 Duet AI 지원을 사용하여 'Cymbal 슈퍼스토어'를 배포합니다. 식료품 웹 앱입니다. 그런 다음 새로운 기능을 개발 및 배포하고 앱의 프런트엔드와 백엔드를 빌드합니다. 또한 앱 테스트를 작성할 때 Duet의 도움을 받을 수 있으며 Duet을 다른 Google Cloud 도구와 통합하는 방법도 확인할 수 있습니다.

목표

다음 작업을 수행하는 방법을 배우게 됩니다.

Duet AI의 도움으로 기존 웹 애플리케이션을 개선합니다.
애플리케이션을 Cloud Run에 배포합니다.
Duet AI에 프롬프트를 입력하여 애플리케이션의 오류를 설명하고 수정 사항을 제공합니다.
Duet AI의 도움을 받아 애플리케이션 테스트를 개발합니다.
Duet AI의 도움을 받아 애플리케이션 로그를 확인하세요.

기본 요건

Google Cloud Platform 계정 및 결제가 사용 설정된 프로젝트
기본 Linux 환경

2. 설정

이 섹션에서는 실습을 시작하는 데 필요한 모든 사항을 다룹니다.

프로젝트 만들기

보다 쉽게 삭제할 수 있도록 새 Google Cloud 프로젝트를 만들어 보겠습니다.

https://console.cloud.google.com으로 이동합니다.
프로젝트 선택기 드롭다운을 클릭합니다.
프로젝트 만들기 선택
컨테이너 소개와 같이 기억하기 쉬운 이름을 지정하세요.

Google Cloud 프로젝트에서 Duet AI 사용 설정

이제 Google Cloud 프로젝트에서 Duet AI API를 사용 설정합니다. 아래 단계를 따르세요.

https://console.cloud.google.com 페이지의 대시보드로 이동하여 이 실습에서 사용할 Google Cloud 프로젝트를 선택했는지 확인합니다. 오른쪽 상단에 있는 Duet AI 아이콘을 클릭합니다.

Duet AI 채팅 창이 콘솔 오른쪽에 열립니다. 아래와 같이 사용 설정 버튼을 클릭합니다. 사용 설정 버튼이 표시되지 않고 대신 Chat 인터페이스가 표시되는 경우 이미 프로젝트에 Duet AI를 사용 설정했을 수 있으므로 다음 단계로 바로 이동할 수 있습니다.

사용 설정되면 Duet AI에 한두 개의 쿼리를 요청하여 테스트할 수 있습니다. 몇 가지 샘플 쿼리가 표시되지만 'Cloud Run이란 무엇인가요?'와 같은 질문을 시도해 볼 수 있습니다.

Duet AI가 질문에 답합니다. 오른쪽 상단의 _ 아이콘을 클릭하면 Duet AI 채팅 창을 닫을 수 있습니다.

Cloud Shell IDE에서 Duet AI 사용 설정

Codelab의 나머지 부분에서는 Cloud Shell IDE를 사용합니다. Cloud Shell IDE에서 Duet AI를 사용 설정하고 구성해야 하며 단계는 아래와 같습니다.

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

편집기 또는 편집기 열기 버튼 (경우에 따라)을 클릭하고 Cloud Shell IDE가 표시될 때까지 기다립니다. '새' 기존 편집기가 아닌 다른 편집기를 사용합니다

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

다음과 같이 오른쪽 하단에 있는 Duet AI 버튼을 클릭하고 Cloud AI Companion API가 사용 설정된 올바른 Google Cloud 프로젝트를 선택합니다.

Google Cloud 프로젝트를 선택하고 승인한 후 상태 표시줄의 Cloud Code 상태 메시지에서 아래와 같이 오른쪽에 Duet AI가 사용 설정되어 있는지 확인합니다.

Duet AI를 사용할 준비가 되었습니다.

3. Duet AI 사용

이 실습의 일환으로 웹 앱을 만들어 보겠습니다. 이 실습에서는 Duet을 사용해 볼 수 있는 여러 장소를 소개합니다. 궁금한 점이 있다면 실습 중 어디에서나 Duet에게 질문해 볼 수도 있습니다.

예를 들어 Terraform을 사용하여 기본 애플리케이션을 만들고 배포합니다. Terraform이 무엇인지 모르는 경우 Duet에 문의할 수 있습니다. 각 단계의 기능에 대해 알아보고 싶다면 Duet에서 설명해 줄 수 있습니다. 실제로 코드를 열고 특정 줄에 관해 질문하고 싶으신가요? Duet을 사용해 보세요.

4. 웹 앱 빌드

이 실습에서는 'Cymbal 슈퍼스토어'를 사용하여 식료품 웹 앱입니다. 이 실습의 후속 작업에서는 Duet AI를 사용하여 이 앱에 새로운 기능을 개발하고 배포합니다. Duet AI가 기존 코드를 이해하는 데 어떻게 도움이 되는지 알아보기 전에 작업할 기존 코드가 필요하므로 지금 이 앱의 프런트엔드 및 백엔드 구성요소를 빌드해 보겠습니다.

이 프로젝트를 진행하면서 Cloud Shell과 Cloud Shell 편집기 사이를 이동하게 됩니다. 화면 상단의 버튼을 사용하면 쉽게 위치를 확인할 수 있습니다.

환경 구성

Cloud Shell에서 명령어를 실행합니다.

프로젝트 ID를 설정합니다.

gcloud config set project <Google Cloud Project ID>

Docker 사용자 인증 정보 도우미를 실행하기 위해 다음 명령어를 실행합니다.

gcloud auth configure-docker

계속 진행할지 묻는 메시지가 표시되면 Y를 입력합니다.
'Cymbal 슈퍼스토어' 다운로드 방법 Cloud Shell의 루트 디렉터리에서 다음 명령어를 실행합니다. GitHub에서 Cymbal Superstore 코드를 가져옵니다.

git clone https://github.com/GoogleCloudPlatform/cymbal-superstore

이 코드가 제대로 실행되려면 여러 API를 사용 설정해야 합니다. Cloud Shell에서 아래 명령어를 입력합니다.

gcloud services enable cloudresourcemanager.googleapis.com compute.googleapis.com artifactregistry.googleapis.com serviceusage.googleapis.com run.googleapis.com bigquery.googleapis.com

다운로드한 코드에서 Terraform 디렉터리로 변경합니다.

cd cymbal-superstore/terraform

이 실습에서는 Spanner를 사용하지 않으므로 Spanner를 설치하지 않는 Terraform 안내 버전을 사용합니다. Cloud Shell에서 아래 명령어를 입력합니다.

mv main.tf.nospanner main.tf

Terraform 명령어를 실행할 때마다 프로젝트 이름과 번호를 입력할 필요가 없도록 이 terraform 디렉터리에 terraform.tfvars라는 파일을 만듭니다. 이 파일에 아래 정보와 함께 두 줄을 추가하고 파일을 저장합니다. 이 정보는 프로젝트 대시보드에서 확인할 수 있습니다.

project_id="Your project id"
project_number=Your project number

다음 줄로 Terraform을 초기화합니다.

terraform init

마지막으로 아래 명령어를 사용하여 Terraform 리소스를 프로젝트에 배포합니다. '예'를 입력하라는 메시지가 표시될 수 있습니다. 실행할 수 있습니다 최대 10분이 소요될 수 있으므로 시간을 내어 https://github.com/GoogleCloudPlatform/cymbal-superstore/blob/main/assets/architecture.png에서 아키텍처 다이어그램을 살펴보는 것이 좋습니다. 또한 기존 코드를 살펴보고 Duet을 사용하여 Google에서 코드를 이해하는 데 도움을 받을 수도 있습니다.

terraform apply

이 명령어가 완료되면 다음과 비슷한 출력이 표시됩니다.

출력의 inventory_cr_endpoint 백엔드와 통신하도록 프런트엔드를 업데이트합니다. 이렇게 하려면 inventory_cr_endpoint 값을 복사하고 cymbal-superstore/frontend/.env.production를 연 다음 REACT_APP_INVENTORY_URL의 값을 바꿉니다.
terraform apply를 다시 실행합니다. 업데이트된 백엔드 URL을 사용하여 프런트엔드 React 앱이 Cloud Storage에 다시 배포되므로 1분 정도면 됩니다.
브라우저에서 frontend_ip을 엽니다. Cymbal Superstore 프런트엔드가 표시됩니다. 변경사항이 적용되는 데 몇 분 정도 걸릴 수 있으므로 두 번 이상 확인해야 할 수 있습니다.

Cymbal 홈페이지 왼쪽에서 신간을 클릭합니다. 제품 자리표시자가 포함된 모의 프런트엔드 페이지가 표시됩니다. 이는 이 실습의 다음 작업에서 백엔드 Inventory API 코드를 구현하여 새 제품 페이지를 제공하기 때문에 예상되는 결과입니다.

5. 웹 앱 백엔드 수정

이제 Duet AI를 사용하여 웹 앱 백엔드에 기능을 추가해 보겠습니다.

이 작업에서는 Duet AI에 코드 완성 메시지를 표시하여 앱에서 /newproducts 엔드포인트를 구현합니다. 백엔드에 엔드포인트를 만들어 Firestore에서 새 제품을 검색하고 변경사항을 배포하기 전에 이 엔드포인트를 테스트합니다.

/newproducts 엔드포인트 개발

Cloud Shell 편집기에서 cymbal-superstore/backend/index.ts 파일을 엽니다.
index.ts 파일에서 95행 주위의 DEMO TASK START 주석으로 스크롤합니다. 여기에서 이 작업에 관해 주석 처리된 줄 그룹을 확인할 수 있습니다. 주석이 달린 모든 줄을 삭제하고 다음 Duet AI 프롬프트로 바꿉니다.

// Get new products from Firestore (added < 7 days ago) and quantity > 0 (in stock)

Duet AI에 함수 코드를 생성하라는 메시지를 표시하려면 전체 주석을 선택한 후 전구 ( )를 클릭합니다.
작업 선택 메뉴에서 코드 생성을 선택합니다.
생성된 코드 위로 마우스를 가져가고 Duet AI 툴바에서 수락을 클릭합니다. Duet AI가 /newproducts 엔드포인트의 함수 코드를 채웁니다.

참고: Duet AI는 프롬프트에 대해 여러 버전의 코드를 생성할 수 있습니다. 툴바에서 목록을 스크롤하여 특정 버전을 선택할 수 있습니다.

생성된 코드는 다음과 비슷합니다.

app.get("/newproducts", async (req: Request, res: Response) => {
  const products = await firestore
    .collection("inventory")
    .where("timestamp", ">", new Date(Date.now() - 604800000))
    .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);
});

많은 줄에는 잠재적인 라이선스 문제를 경고하기 위해 밑줄이 그어져 있을 수 있습니다. 이 실습에서는 빠른 수정을 적용할 수 있지만, 나중에는 이러한 경고를 확인하세요.

생성된 코드가 이전 단계의 예와 같지 않으면 지금 교체하거나 Duet이 나중에 디버그하는 데 어떻게 도움이 되는지 확인할 수 있습니다. scripts/solutioncode-with-bug.ts . 파일에 예상 오류가 있는 코드 버전도 있습니다.
index.ts 파일을 저장합니다.

/``newproducts 엔드포인트 테스트 및 디버깅

Cloud Shell에서 cymbal-superstore/backend 디렉터리로 이동합니다. 다음 명령어를 입력합니다.

npm run start

이렇게 하면 엔드포인트가 시작됩니다.

엔드포인트 결과를 보려면 Cloud Shell의 메뉴 바에서 +를 사용하여 다른 터미널을 열고 다음 명령어를 실행합니다.

curl localhost:8000/newproducts

새 터미널에 curl: (52) Empty reply from server 오류가 표시되고 엔드포인트를 실행하는 터미널에 세부정보가 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' 포함된 긴 오류 메시지가 표시될 수 있습니다.

이 오류를 해결해 보겠습니다. 하지만 먼저 오류 메시지의 의미를 이해해야 합니다. 이를 위해 Duet에 요청합니다. Cloud Shell 편집기의 왼쪽 메뉴에서 Duet AI Chat을 열고 다음과 같이 질문합니다.

I'm querying Cloud Firestore and getting this error: 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' What does it mean?

Duet에서는 비균등 필터 중 하나를 삭제하는 등 이 문제를 해결할 수 있는 몇 가지 옵션을 제공합니다. 이 문제를 해결하려면 index.ts에서 .where("quantity", ">", 0) 줄을 삭제하여 쿼리에 필터가 하나만 포함되도록 합니다.

위의 처음 두 단계를 반복하여 서버를 다시 시작하고 제품 목록을 가져옵니다. 이제 성공적으로 작동할 것입니다. 그렇지 않은 경우 Duet을 사용하여 문제를 파악하거나 scripts/solutioncode-bug-fixed.ts의 수정된 솔루션을 사용하여 계속 진행하세요.

변경사항 배포

변경된 애플리케이션을 배포하려면 Cloud Shell의 terraform 디렉터리에서 terraform apply를 다시 실행하면 됩니다. 그러면 Terraform이 제공하는 IP 주소에서 앱을 볼 수 있습니다.

6. 테스트 작성

프로젝트에서 코드에 대한 테스트를 만드는 것은 우선순위가 지정되지 않는 중요한 작업입니다. 아시다시피 Duet이 이러한 테스트를 만드는 데 도움이 될 수 있습니다.

방금 만든 newproducts 코드의 테스트를 만들어 보겠습니다.

backend/index.test.ts를 엽니다. Duet AI 채팅을 사용하여 프롬프트가 포함된 newproducts() 함수 테스트를 생성합니다.

Help me write an Express.js test using Jest, in typescript, for the GET /newproducts handler in index.ts. Should check if the response code is 200 and the list of new products is length 8.

파일에 이미 있는 import 줄을 확인할 수 있습니다. 표시된 줄의 파일에 describe() 테스트만 복사합니다. 파일을 저장합니다.

또는 프롬프트를 개선하고 Duet에 import 문을 포함하지 말라고 지시할 수 있습니다. 그러면 필요한 코드만 가져올 수 있습니다.

테스트 결과를 보려면 Cloud Shell로 이동하여 디렉터리를 backend 폴더로 변경하고 다음 명령어를 실행합니다.

npm run test

7. 로깅

Duet AI는 프로젝트가 배포된 후에도 프로젝트를 도와줄 수 있습니다. 이 섹션에서는 Duet AI를 사용하여 로그를 살펴보겠습니다.

Cloud 콘솔로 돌아가 Duet이 실행 중인지 확인합니다. Duet에게 로그 위치를 물어봅니다. 직접 프롬프트를 입력해도 괜찮지만 그래도 괜찮은 대답이 나오지 않는다면 다음 프롬프트를 입력해 보세요.

How can I view the Cloud Run logs for the service called 'inventory'?

Duet AI가 Cloud Run 페이지로 이동하여 인벤토리 서비스를 선택한 후 해당 서비스의 로그를 검사하도록 제안합니다. 다음과 같이 표시됩니다.

항목 중 하나를 선택하고 Duet AI에게 설명을 요청합니다. 자연어로 항목 설명이 표시됩니다.

기본 메뉴의 로깅 옵션에서 열 수 있는 로그 탐색기에서도 로그 항목을 볼 수 있습니다. 로그 탐색기에서 로그 항목을 볼 때의 이점은 아래와 같이 항목을 설명하는 옵션이 기본으로 제공된다는 것입니다.

8. 축하합니다.

수고하셨습니다. Duet AI를 사용하여 전에 본 적 없는 코드를 이해했습니다. 이 코드를 개선하고 테스트를 만들었으며 Duet을 사용하여 로그 항목을 이해했습니다.

삭제

프로젝트 삭제

정리하려면 프로젝트를 삭제하기만 하면 됩니다.

탐색 메뉴에서 'IAM 및 관리
그런 다음 하위 메뉴에서 설정을 클릭하고
"프로젝트 삭제"라는 텍스트가 있는 휴지통 아이콘을 클릭합니다.
표시되는 안내를 따릅니다.

이 실습에서는 다음을 수행하는 방법을 배웠습니다.

Duet AI의 도움으로 기존 웹 애플리케이션을 개선합니다.
애플리케이션을 Cloud Run에 배포합니다.
Duet AI에 프롬프트를 입력하여 애플리케이션의 오류를 설명하고 수정 사항을 제공합니다.
Duet AI의 도움을 받아 애플리케이션 테스트를 개발합니다.
Duet AI의 도움을 받아 애플리케이션 로그를 확인하세요.