Agent Platform을 사용하여 Flutter 앱과 LangChain 에이전트 통합

Create an Agent Search data store

내 진행 상황 확인하기

/ 20

Create an Agent Search app

내 진행 상황 확인하기

/ 20

Create a Backend app

내 진행 상황 확인하기

/ 20

Deploy the LangChain agent

내 진행 상황 확인하기

/ 20

Develop and test the Flutter chat app

내 진행 상황 확인하기

/ 20

이 실습에는 학습을 지원하는 AI 도구가 통합되어 있을 수 있습니다.

개요

이 실습에서는 LangChain AI 에이전트를 Flutter 앱과 통합합니다. Flutter가 클라이언트 앱 프레임워크로 사용되고, Gemini Enterprise Agent Platform의 Agent Search가 벡터 데이터베이스로 사용되고, Gemini Enterprise Agent Platform의 Agent Runtime이 LangChain 에이전트를 빌드하고 배포하는 데 사용됩니다. 이 에이전트는 고성능 대규모 언어 모델(LLM) 제품군인 Gemini를 사용하여 텍스트 및 이미지 프롬프트에 대한 AI 응답을 생성합니다.

실습에는 code-server를 사용하여 VSCode가 IDE로 사전 프로비저닝되어 있으며 Flutter 앱을 실행하는 데 필요한 Flutter 및 Dart 확장 프로그램이 함께 제공됩니다. 또한 실습에는 브라우저를 사용하여 액세스하는 웹 애플리케이션으로 Flutter 앱을 제공하는 데 사용하는 도구인 fwr도 포함됩니다.

이 실습은 앱 빌드에 참여한 경험은 있으나 클라우드 애플리케이션 개발이 익숙하지 않은 다양한 수준의 개발자를 대상으로 합니다. Python에 대한 경험이 있고 Flutter 프레임워크에 익숙하면 도움이 됩니다. 이 실습의 작업을 수행하기 위해 Flutter를 알아야 할 필요는 없지만, Flutter 앱 코드의 일부를 검토하고 앱의 기능을 테스트하게 됩니다.

목표

이번 실습에서는 다음 작업을 수행합니다.

Google Cloud 콘솔에서 AI 애플리케이션을 사용하여 검색 데이터 스토어 및 검색 앱 만들기
Gemini Enterprise Agent Platform Workbench를 사용하여 LangChain 에이전트 배포
Agent Search 및 LangChain 에이전트와 통합되는 Python 앱 사용
Cloud Run에 앱 배포 및 Flutter 앱의 백엔드로 사용
프런트엔드 채팅 애플리케이션으로 사용할 Flutter 앱 만들기

다음은 이 실습에서 사용되는 여러 구성요소의 개요입니다.

설정

각 실습에서는 정해진 기간 동안 새 Google Cloud 프로젝트와 리소스 집합이 무료로 제공됩니다.

시크릿 창을 사용하여 Google Skills에 로그인합니다.
실습 사용 가능 시간(예: 1:15:00)을 참고하여 해당 시간 내에 완료합니다.
일시중지 기능은 없습니다. 필요한 경우 다시 시작할 수 있지만 처음부터 시작해야 합니다.
준비가 되면 실습 시작을 클릭합니다.
실습 사용자 인증 정보(사용자 이름 및 비밀번호)를 기록해 두세요. Google Cloud Console에 로그인합니다.
Google Console 열기를 클릭합니다.
다른 계정 사용을 클릭한 다음, 안내 메시지에 이 실습에 대한 사용자 인증 정보를 복사하여 붙여넣습니다.
다른 사용자 인증 정보를 사용하는 경우 오류가 발생하거나 요금이 부과됩니다.
약관에 동의하고 리소스 복구 페이지를 건너뜁니다.

작업 1. 검색 데이터 스토어 및 검색 앱 만들기

이 작업에서는 Google Cloud 콘솔에서 AI 애플리케이션을 사용하여 검색 데이터 스토어와 검색 앱을 만들어 Flutter 앱의 검색 기능을 구현합니다.

검색 데이터 스토어 만들기

Cloud 콘솔에서 모든 제품 보기를 클릭합니다. 모든 제품 페이지에서 인공지능 섹션으로 스크롤한 다음 AI 애플리케이션을 클릭합니다.
계속 및 API 활성화를 클릭합니다.
왼쪽 창에서 데이터 스토어를 클릭하고 데이터 스토어 페이지에서 데이터 스토어 만들기를 클릭합니다.

이 페이지에서 검색 결과에 사용할 데이터 소스를 구성합니다. 실습에는 Google Merchandise Store의 상품 데이터가 있는 .csv 파일이 포함된 Cloud Storage 버킷이 사전 프로비저닝되어 있습니다.
데이터 소스로 Cloud Storage를 선택하기 위해 Cloud Storage에서 선택을 클릭합니다.
가져오는 데이터의 종류로 정형 데이터 가져오기에서 CSV(FAQ 데이터용)를 선택합니다.
가져올 폴더 또는 파일 선택 섹션으로 스크롤하고 파일을 클릭합니다.
CSV 파일에 Cloud Storage URL을 제공하기 위해 탐색을 클릭합니다.
Cloud Storage 버킷()의 콘텐츠를 보기 위해 아이콘을 클릭합니다.
goog_merch.csv 파일을 선택한 다음 선택을 클릭합니다.

폴더의 gs:// URI가 채워집니다.
계속을 클릭합니다.
데이터 스토어 이름으로 goog-merch-ds를 입력하고 계속을 클릭합니다.
선택한 가격 책정 모델을 기본값으로 두고 만들기를 클릭합니다.

데이터 스토어가 생성되고 CSV 파일에서 데이터 수집이 시작됩니다.
데이터 스토어 페이지에서 새로 만든 데이터 스토어의 이름을 클릭합니다.
새로고침을 클릭합니다.

문서 탭에 가져온 문서의 목록이 표시됩니다.
문서와 연결된 데이터를 보기 위해 문서 보기를 클릭합니다.

목표를 확인하려면 내 진행 상황 확인하기를 클릭합니다. Agent Search 데이터 스토어를 만듭니다.

검색 앱 만들기

검색 데이터 스토어를 사용하려면 AI Applications의 검색 앱에 연결합니다.

Cloud 콘솔에서 AI 애플리케이션을 클릭한 다음 앱을 클릭합니다.
새 앱 만들기를 클릭합니다.
앱 만들기 페이지에서 빌드할 앱 유형에 대해 검색 및 어시스턴트 탭의 커스텀 검색(일반)에서 만들기를 클릭합니다.
검색 앱 구성 페이지에서 다음 설정으로 웹사이트 검색 앱을 구성하고 나머지 설정은 기본값으로 둡니다.

속성 값(입력 또는 선택)

Enterprise 버전 기능 사용 중지

앱 이름 gms-search-app

회사 또는 조직의 외부 이름 gms-company

앱 위치 global(전역)
계속을 클릭합니다.
기존 데이터 스토어 목록이 표시됩니다. 이전 하위 작업에서 만든 goog_merch_ds 데이터 스토어를 선택하고 계속을 클릭합니다.
선택한 요금제를 기본값으로 두고 만들기를 클릭합니다.

검색 앱이 생성되고 데이터 스토어가 앱에 연결됩니다.
검색 앱을 테스트하기 위해 AI 애플리케이션 탐색 메뉴에서 미리보기를 클릭합니다.
검색창에 dino를 입력하고 Enter 키를 누릅니다.

데이터 스토어로 가져온 문서에서 관련 검색 결과 목록이 표시됩니다.

참고: 검색 미리보기가 아직 준비되지 않음이라는 오류가 표시되면 잠시 후에 다시 시도해 주세요. 기다리지 않고 실습의 다음 작업으로 넘어갈 수도 있습니다.

속성	값(입력 또는 선택)
Enterprise 버전 기능	사용 중지
앱 이름	gms-search-app
회사 또는 조직의 외부 이름	gms-company
앱 위치	global(전역)

목표를 확인하려면 내 진행 상황 확인하기를 클릭합니다. Agent Search 앱을 만듭니다.

작업 2. 백엔드 빌드 및 배포하기

Flutter 앱의 백엔드는 Google Cloud에서 Cloud Run 서비스로 실행됩니다. 백엔드 서비스는 이전 작업에서 만든 검색 앱과 통합되어 상품 매장 데이터에서 검색 응답을 생성합니다.

이후 작업에서는 또한 Flutter 앱의 쿼리에 대한 응답으로 생성형 AI 콘텐츠를 위해 Gemini에 액세스할 수 있도록 백엔드 앱을 LangChain 에이전트와 통합합니다.

이 작업에서는 백엔드 Python 앱을 빌드하고 Cloud Run에 배포합니다.

백엔드 앱 구성 및 검토하기

이 실습에서는 VSCode 기반 IDE가 사전 프로비저닝되어 있습니다. IDE에 액세스하려면 실습의 사용자 인증 정보 패널에서 IDE 서비스 URL을 복사하여 새 시크릿 모드 브라우저 창이나 탭에 붙여 넣습니다.

참고: IDE 서비스 URL은 이 실습에 대해 사전 프로비저닝된 Cloud Run 서비스의 엔드포인트로, 요청을 code-server VM으로 프록시합니다. IDE는 code-server를 사용하여 빌드되었고, Flutter, Dart, Vim 확장 프로그램을 포함합니다.
IDE에서 터미널을 엽니다. IDE 탐색 메뉴()에서 터미널 > 새 터미널을 클릭합니다.
참고: IDE 터미널 창에서 아래 단계의 명령어를 실행합니다.
백엔드 앱의 초기 버전과 관련 파일은 실습을 위해 사전 프로비저닝되어 있습니다. Cloud Storage의 보관 파일에서 백엔드 앱 폴더의 초기 버전과 해당 콘텐츠를 복사합니다.
gcloud storage cp gs://cloud-training/OCBL453/photo-discovery/ag-web.zip ~ && unzip ~/ag-web -d ~ && rm ~/ag-web.zip 참고: 메시지가 표시되면 허용을 클릭하여 클립보드의 텍스트와 이미지를 붙여넣고 Enter 키를 누릅니다.
IDE 터미널 창에서 다음을 실행하여 폴더의 내용을 나열합니다.
ls ~/ag-web/app
ag-web/app 폴더에는 백엔드 앱을 빌드하고 Cloud Run에 배포하는 데 필요한 애플리케이션 소스 코드와 기타 파일이 포함되어 있습니다.
앱의 PROJECT_ID 및 LOCATION 구성을 설정합니다.
sed -i 's/GCP_PROJECT_ID/{{{project_0.project_id|set at lab start}}}/' ~/ag-web/app/app.py sed -i 's/GCP_REGION/{{{project_0.default_region|set at lab start}}}/' ~/ag-web/app/app.py
이전에 만든 검색 데이터 스토어를 사용하도록 백엔드 앱을 구성합니다.
sed -i 's/SEARCH_DATASTORE_ID/{YOUR_SEARCH_DATASTORE_ID}/' ~/ag-web/app/app.py
명령어에서 {YOUR_SEARCH_DATASTORE_ID} 문자열을 검색 데이터 스토어 ID의 값으로 바꿉니다. sed 명령어의 중괄호를 삭제해야 합니다.
참고: 검색 데이터 스토어 ID의 값을 가져오려면 Cloud 콘솔에서 AI 애플리케이션 > 데이터 스토어로 이동한 다음, 이전에 만든 검색 데이터 스토어의 이름을 클릭합니다. 검색엔진 ID와 동일한 데이터 스토어 ID의 값을 복사합니다.
IDE에서 코드를 보기 위해 IDE 탐색 메뉴에서 아이콘을 클릭한 다음 폴더 열기를 클릭합니다.
목록에서 IDE-DEV/ag-web/ 폴더를 선택한 다음 확인을 클릭합니다.
코드 작성자를 신뢰하려면 예, 작성자를 신뢰합니다를 클릭합니다.
탐색기 창에서 app 폴더를 펼친 다음 app.py를 클릭하여 편집기에서 파일을 엽니다.

백엔드 앱 코드는 다음 작업을 실행합니다.
- discoveryengine.googleapis.com API용 SearchServiceClient를 초기화합니다.
- search_gms() 함수는 API의 datastores 엔드포인트를 사용하여 검색 요청을 시작합니다. 앞서 만든 데이터 스토어 ID가 URL에 사용됩니다.
- 이 함수는 사용자가 제공한 검색어를 사용하여 데이터 스토어의 콘텐츠에서 검색을 실행하고 JSON 응답으로 결과 형식을 지정합니다.
- 앱은 flask를 사용하여 호출을 개별 함수로 라우팅합니다. / 엔드포인트는 앱이 성공적으로 로드되었는지 확인하는 데 사용되는 기본 페이지이며, /ask_gms 엔드포인트는 Agent Search를 사용하는 search_gms() 함수를 호출합니다.

앱을 빌드하여 Cloud Run에 배포하기

배포 스크립트를 사용하여 백엔드 앱을 빌드하고 Cloud Run에 배포할 수 있습니다.

IDE에서 터미널 창을 열고 백엔드 앱 폴더로 변경합니다.
cd ~/ag-web/app
gcloud CLI에서 Google Cloud에 인증합니다.
gcloud auth login
계속하려면 Y를 입력합니다.
로그인 과정을 시작하기 위해 Control(Windows 및 Linux의 경우) 또는 Command(macOS의 경우) 키를 누르고 터미널의 링크를 클릭합니다.
외부 웹사이트를 열지 확인하라는 메시지가 표시되면 열기를 클릭합니다.
실습 학습자 이메일 주소를 클릭합니다.
계속 진행할지 묻는 메시지가 표시되면 계속을 클릭합니다.
Google Cloud SDK에서 Google 계정에 액세스하고 약관에 동의하도록 허용하려면 허용을 클릭합니다.

인증 코드가 브라우저 탭에 표시됩니다.
복사를 클릭합니다.
IDE 터미널 창으로 돌아와서 승인 코드 입력이라고 표시된 곳에 코드를 붙여넣고 Enter를 입력합니다.

그러면 Google Cloud에 로그인됩니다.
deploy.sh 스크립트를 실행 파일로 만든 다음 스크립트를 실행하여 지정된 Cloud Run 리전에 앱을 배포합니다.
chmod a+x deploy.sh; ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}
앱을 빌드하고 Cloud Run에 배포하면 스크립트 출력 끝부분에 앱의 엔드포인트 URL이 표시됩니다. 이 URL은 스크립트에서 gcloud run deploy 명령어를 실행하여 생성되었습니다.
참고: 이 명령어는 실행하는 데 시간이 걸리므로 완료될 때까지 기다렸다가 다음 작업을 진행하세요.

백엔드 앱 테스트하기

앱의 Cloud Run 엔드포인트에 액세스하여 앱 기능을 테스트합니다.

이전 단계에서 생성된 앱의 엔드포인트 URL을 복사하고 새 브라우저 탭에서 해당 URL로 이동합니다.
앱이 로드되면 홈페이지에 Welcome to the ag-web backend app(ag-web 백엔드 앱에 오신 것을 환영합니다)이라는 메시지가 표시됩니다.
브라우저 URL 표시줄에서 아래 경로를 URL 끝에 추가합니다.
/ask_gms?query=dino
앱이 이전에 만든 검색 데이터 스토어의 결과로 응답하는지 확인합니다.

목표를 확인하려면 내 진행 상황 확인하기를 클릭합니다. 백엔드 앱 만들기

작업 3. LangChain 에이전트 만들기

AI 에이전트는 추론 및 조정에 대규모 언어 모델(LLM)의 기능을 활용하는 애플리케이션이며, 목표를 달성하기 위해 외부 도구와 함께 사용됩니다. Gemini Enterprise Agent Platform은 신뢰할 수 있는 데이터 소스에 연결하여 AI 에이전트를 빌드하는 데 도움이 되는 Google의 제품 및 도구 묶음입니다.

Gemini Enterprise Agent Platform의 에이전트 런타임은 Agent Platform에서 추론 에이전트를 빌드하고 배포하는 데 도움이 됩니다. LangChain은 챗봇 및 RAG 시스템을 빌드하는 데 자주 사용되는 OSS 도구입니다.

Agent Platform을 통해 개발자는 함수 호출을 사용하여 LLM(Gemini)의 출력을 Python 함수에 매핑할 수 있습니다. Agent Platform SDK를 사용하여 프레임워크별 LangChain 템플릿으로 에이전트를 개발하고 배포할 수 있습니다.

이 작업에서는 Jupyter 노트북과 함께 Agent Platform Workbench를 사용하여 Python 함수를 기반으로 LangChain 에이전트를 빌드하고 배포합니다. 이 에이전트는 이 실습의 다음 작업에서 생성형 AI 백엔드 애플리케이션에 사용됩니다.

Agent Platform Workbench 인스턴스 만들기

Agent Platform Workbench는 전체 데이터 과학 및 머신러닝 워크플로를 위한 Jupyter 노트북 기반의 개발 환경입니다. 워크벤치 인스턴스의 Jupyter 노트북 내에서 Agent Platform 및 기타 Google Cloud 서비스와 상호작용할 수 있습니다. 예를 들어 BigQuery 및 Cloud Storage 통합을 사용하여 Jupyter 노트북 내에서 데이터에 액세스하고 탐색할 수 있습니다.

Agent Platform Workbench Notebooks는 Google Cloud에서 ML 모델을 개발하고 배포하기 위한 유연하고 확장 가능한 솔루션을 제공합니다.

Workbench 인스턴스를 만들려면 Cloud 콘솔에서 탐색 메뉴()를 클릭하고 Agent Platform > Notebooks를 선택합니다.
Notebooks 탐색 메뉴에서 Workbench를 클릭합니다.
인스턴스 탭에서 인스턴스가 선택되어 있는지 확인한 다음 새로 만들기를 클릭합니다.
새 인스턴스 페이지의 이름에 my-instance를 입력합니다.
나머지 설정은 기본값으로 두고 만들기를 클릭합니다.

새 인스턴스가 인스턴스 섹션에서 가동됩니다. 인스턴스가 생성될 때까지 기다렸다가 다음 단계로 진행합니다.
참고: 사용할 준비가 되면 인스턴스 옆에 녹색 체크표시가 나타납니다.
인스턴스가 준비되면 JupyterLab 열기를 클릭합니다.
Python 3 Jupyter 노트북을 실행하기 위해 Python 3 노트북을 클릭합니다.

노트북 파일 복사하기

이 실습을 위해 LangChain 에이전트를 빌드하고 배포하는 노트북이 사전 프로비저닝되어 있습니다.

노트북을 JupyterLab 인스턴스에 복사하기 위해 이 코드를 새 노트북의 첫 번째 셀에 복사합니다.
!gcloud storage cp gs://cloud-training/OCBL453/photo-discovery/ag-web/ag_setup_re.ipynb .
셀을 선택하고 셀 메뉴에서 실행을 클릭하여 실행합니다.

이 명령어는 Cloud Storage에서 JupyterLab 인스턴스로 노트북을 복사합니다. 명령어가 완료되면 노트북 파일이 최상위 루트 폴더에 나열됩니다.
노트북을 열기 위해 폴더 목록에서 노트북 파일을 더블클릭합니다. 노트북의 콘텐츠로 별도의 탭이 생성됩니다.

Reasoning Engine 에이전트 빌드 및 배포하기

노트북에 있는 모든 코드 셀을 처음부터 순서대로 실행합니다. 셀을 실행하기 위해 셀의 아무 곳이나 클릭하여 선택한 다음, 셀 메뉴 또는 노트북 상단 메뉴에서 실행을 클릭합니다.
참고: 셀에서 명령어를 실행할 때는 명령어가 완료될 때까지 기다렸다가 다음 셀로 이동합니다. 명령어 실행이 완료되면 셀 번호 입력란의 별표(*)가 셀 번호로 바뀝니다. 참고: 셀을 실행하기 전에 아래의 메모에서 셀별 안내 또는 수행할 단계를 확인하세요. 이러한 안내는 CELL INSTR 프리픽스로 표시됩니다.
a. [CELL INSTR] 현재 런타임 다시 시작

메시지가 표시되면 커널 다시 시작 대화상자에서 확인을 클릭합니다.

b. [CELL INSTR] Google Cloud 프로젝트 정보 설정 및 Agent Platform 초기화

이 셀을 실행하여 Agent Platform을 초기화하기 전에 실습 PROJECT_ID, LOCATION, STAGING_BUCKET의 구성 값을 업데이트합니다.
PROJECT_ID = "{{{project_0.project_id|set at lab start}}}" LOCATION = "{{{project_0.default_region|set at lab start}}}" STAGING_BUCKET = "gs://{{{project_0.startup_script.lab_bucket_name}}}"
샘플 구성 설정으로 업데이트된 셀은 다음과 같습니다.

c. [CELL INSTR] 에이전트 정의

이 셀을 실행하기 전에 GEMINI_MODEL_ID의 값을 이 노트북에서 사용하는 최신 모델 ID로 바꿉니다.
참고: 노트북 메뉴 바에서 실행을 클릭하여 셀을 실행할 수도 있습니다.
Deploy the Agent to the Agent Runtime 셀을 실행한 후 명령어가 완료될 때까지 기다렸다가 LangChain 에이전트를 배포합니다. 그런 다음 에이전트 ID를 복사합니다.

다음 작업에서 이 ID를 사용하여 백엔드 앱을 구성하고 다시 배포합니다.
참고: 이 셀이 완료되는 데 최대 10분이 걸릴 수 있습니다. 에이전트가 배포되었음을 나타내는 최종 출력이 표시될 때까지 기다렸다가 다음 단계로 진행합니다.
다음 두 개의 셀을 실행하고 출력을 관찰하여 LangChain 에이전트가 성공적으로 작동하는지 테스트합니다.

LangChain 에이전트가 쿼리 입력을 기반으로 Wikipedia 또는 Agent Search 데이터 스토어를 호출했습니다.

목표를 확인하려면 내 진행 상황 확인하기를 클릭합니다. LangChain 에이전트를 배포합니다.

작업 4. 백엔드 앱 개선하기

이제 이전 작업에서 배포한 LangChain 에이전트를 호출하도록 백엔드 앱을 개선해 보겠습니다.

백업 앱의 초기 버전은 Agent Search에서 직접 결과를 가져오기만 했습니다. 업데이트된 버전에서는 앱이 Gemini의 출력과 에이전트의 도구를 사용하여 입력 프롬프트를 기반으로 Agent Search 또는 Wikipedia에서 응답을 생성하는 에이전트도 호출합니다.

이 작업에서는 백엔드 앱 코드를 업데이트하여 요청 쿼리로 LangChain 에이전트를 호출하고 에이전트의 응답을 반환하는 추가 진입점을 추가합니다.

백엔드 앱 업데이트하기

IDE 터미널 창에서 다음 명령어를 실행하여 새 진입점 코드로 app.py 파일을 추가합니다.
cat << EOF >> ~/ag-web/app/app.py # # Agent Engine # import vertexai from vertexai import agent_engines from google.cloud import resourcemanager_v3 def get_project_number(project_id): client = resourcemanager_v3.ProjectsClient() # Construct the resource name for the project name = f"projects/{project_id}" # Get project metadata project = client.get_project(name=name) # The 'name' field in the response is in the format 'projects/123456789' project_number = project.name.split('/')[-1] return project_number PROJECT_NUM = get_project_number(PROJECT_ID) LANGCHAIN_AGENT = "LANGCHAIN_AGENT_ID" remote_agent = vertexai.agent_engines.get(f"projects/{PROJECT_NUM}/locations/{LOCATION}/reasoningEngines/{LANGCHAIN_AGENT}") # Endpoint for the Flask app to call the Agent @app.route("/ask_gemini", methods=["GET"]) def ask_gemini(): query = request.args.get("query") log.info("[ask_gemini] query: " + query) retries = 0 resp = None while retries < MAX_RETRIES: try: retries += 1 resp = remote_agent.query(input=query) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Empty response.") break except Exception as e: log.error("[ask_gemini] error: " + str(e)) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Too many retries.") return "No response received from Reasoning Engine." else: return resp["output"] EOF
이전에 만든 LangChain 에이전트를 사용하도록 백엔드 앱을 구성합니다.

아래 명령어에서 {YOUR_LANGCHAIN_AGENT_ID} 문자열을 이전 작업의 노트북 셀에서 복사한 에이전트 ID 값으로 바꾸고 IDE 터미널 창에서 아래 명령어를 실행합니다.

sed 명령어의 중괄호를 삭제해야 합니다.
sed -i 's/LANGCHAIN_AGENT_ID/{YOUR_LANGCHAIN_AGENT_ID}/' ~/ag-web/app/app.py
IDE에서 코드를 보기 위해 IDE 탐색 메뉴에서 아이콘을 클릭하고 IDE-DEV/ag-web/app/app.py 파일을 선택합니다.

고급 버전의 백엔드 앱에서는 다음과 같은 기능이 제공됩니다.
- 이전 작업에서 만든 에이전트의 LANGCHAIN_AGENT_ID를 사용하여 Agent Runtime에서 remote_agent의 핸들이 검색됩니다.
- ask_gemini() 함수를 정의하는 새 /ask_gemini 엔드포인트가 정의됩니다.
- 이 함수는 요청에서 사용자가 제공한 query 매개변수를 LangChain 에이전트(remote_agent)에 전달하고 에이전트의 응답을 반환합니다.

백엔드 앱을 빌드하고 Cloud Run에 다시 배포하기

백엔드 앱 폴더로 변경합니다.
cd ~/ag-web/app
스크립트를 실행하여 지정된 Cloud Run 리전에 앱을 다시 배포합니다.
./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

백엔드 앱 테스트하기

앱의 Cloud Run 엔드포인트에 액세스하여 앱 기능을 테스트합니다.

이전 단계에서 생성된 앱의 엔드포인트 URL을 복사하고 새 브라우저 탭에서 해당 URL로 이동합니다.
앱이 로드되면 홈페이지에 Welcome to the ag-web backend app(ag-web 백엔드 앱에 오신 것을 환영합니다)이라는 메시지가 표시됩니다.
브라우저 URL 표시줄에서 아래 경로를 URL 끝에 추가합니다.
/ask_gemini?query=where can I buy the chrome dino pin
앱은 앞서 만든 Agent Search 데이터 스토어에서 결과를 가져온 에이전트의 결과로 응답합니다.
Chrome Dino Enamel Pin is a product sold at Google Merch Shop. The price is 7.00 USD. You can buy the product at their web site: https://shop.merch.google/product/chrome-dino-enamel-pin-ggoegcbb203299/.
브라우저 URL 표시줄에서 경로를 다음과 같이 바꿉니다.
/ask_gemini?query=what is fallingwater. 답변을 일반 텍스트로 작성합니다.
앱은 노트북에서 구성한 Wikipedia API에서 응답을 가져온 에이전트의 결과로 응답합니다.
Fallingwater was designed by architect Frank Lloyd Wright in 1935. It is located in southwest Pennsylvania, about 70 miles southeast of Pittsburgh. The house is famous because it was built partly over a waterfall. 참고: 실제 응답은 위에 표시된 응답과 다를 수 있습니다.

작업 5. Flutter 프런트엔드 앱 만들기

Flutter는 오픈소스 멀티 플랫폼 앱 개발 프레임워크입니다. 이를 사용하면 Android, iOS, 웹, macOS, Windows, Linux에서 실행되는 하나의 코드베이스를 작성할 수 있습니다. Flutter 앱은 Dart 프로그래밍 언어로 개발됩니다.

이 실습에서는 Flutter 앱을 웹 애플리케이션으로 배포하고 브라우저를 사용하여 액세스할 수 있도록 웹을 대상 플랫폼으로 사용합니다.

이 작업에서는 Flutter를 사용하여 간단한 채팅 애플리케이션을 만들고, 코드를 업데이트하고, 앱을 웹 애플리케이션으로 빌드하고 실행합니다.

Flutter 앱 만들기

IDE 터미널에서 홈 디렉터리로 이동하고 다음을 실행합니다.
cd ~; flutter create chat_app
flutter create 명령어는 실행 가능한 새 Flutter 프로젝트에 필요한 모든 파일, 폴더, 구성을 만듭니다.
IDE에서 기본 채팅 앱 코드를 보려면 IDE-DEV/chat_app 폴더로 이동합니다.
IDE에서 폴더 탐색창의 콘텐츠를 새로고침하기 위해 새로고침을 클릭해야 할 수 있습니다.
폴더의 파일 작성자를 신뢰하는지 묻는 메시지가 나타나면 예, 작성자를 신뢰합니다를 클릭합니다.

Flutter 앱 코드 검토하기

chat_app 폴더의 내용을 간략하게 살펴보겠습니다.

폴더/파일	설명
chat_app	Flutter 앱을 구성하는 하위 폴더와 파일이 포함된 프로젝트 루트 폴더입니다.
android/ios/linux/macos/web/windows	지원되는 각 플랫폼에서 Flutter 앱을 실행하는 데 필요한 플랫폼별 파일이 포함되어 있습니다.
lib	기능과 사용자 인터페이스를 포함하는 핵심 애플리케이션 Dart 파일이 포함되어 있습니다.
테스트	앱의 위젯을 테스트하는 데 사용되는 Dart 테스트가 포함되어 있습니다.
pubspec.yaml	앱 종속 항목, Flutter 버전, 기타 구성 설정이 포함되어 있습니다.
analysis_options.yaml	앱의 정적 분석을 위한 구성 설정이 포함되어 있습니다.

Flutter 앱의 진입점 파일인 main.dart를 검토하겠습니다.

탐색기 메뉴에서 IDE-DEV/chat_app/lib/main.dart 파일을 클릭하여 엽니다.

Flutter 앱의 애플리케이션 진입점입니다. 초기화 작업을 수행한 후, 이 파일의 코드는 Material 구성요소를 사용하여 앱의 UI를 빌드하고 앱의 제목, 테마, 기타 구성을 설정합니다.
참고: Material 앱은 MaterialApp 위젯으로 시작합니다. 이 위젯은 앱의 다양한 화면으로의 라우팅을 관리하는 Navigator를 비롯한 여러 유용한 위젯을 앱의 루트에 빌드합니다.
Flutter는 앱을 빌드하는 데 사용되는 선언적 클래스인 위젯의 개념을 사용합니다. Flutter에서는 위젯을 구성하여 더 복잡한 위젯을 빌드하고, 이를 통해 위젯 트리를 형성하여 레이아웃을 만듭니다. Flutter에서 UI를 빌드하는 방법을 자세히 알아보려면 문서를 확인하세요.

이 파일에는 앱의 위젯을 빌드하는 다음과 같은 클래스가 포함되어 있습니다.
- 채팅 애플리케이션의 루트 위젯인 MyApp 클래스
- _MyHomePageState 클래스를 사용하여 앱의 기본 페이지를 만드는 MyHomePage 클래스
- 앱의 UI를 빌드하고 UI 상태 업데이트를 담당하는 _MyHomePageState 클래스
다음 하위 작업에서 채팅 앱을 빌드할 때 이들 클래스의 기본 생성 코드를 바꿉니다.

Flutter 앱 코드 업데이트하기

먼저 앱 제목을 업데이트합니다. MyApp 클래스의 14번째 줄에서 title 속성의 값을 변경합니다.
title: 'Gemini Chat App',
_MyHomePageState 클래스의 58번째 줄에서 int _counter = 0; 줄과 _incrementCounter() 함수를 삭제하고 다음 속성을 추가합니다.
final TextEditingController _controller = TextEditingController(); final List<Map<String, String>> _messages = []; String _cloudRunHost = '';
이 속성은 텍스트 프롬프트에 대한 사용자 입력을 수락하고, 표시를 위해 사용자 입력과 백엔드 앱 응답을 저장하고, 백엔드 앱 Cloud Run 서비스의 호스트 이름을 저장하는 데 사용됩니다.
클래스에 initState() 메서드를 추가합니다.
@override void initState() { super.initState(); _loadConfig(); }
이 메서드는 State 객체가 생성될 때 초기화 함수를 수행합니다. 채팅 앱에서 다음으로 구현할 _loadConfig() 메서드를 호출하여 파일 콘텐츠를 로드합니다.
클래스에 _loadConfig() 메서드를 추가합니다.
Future<void> _loadConfig() async { final configString = await rootBundle.loadString('assets/config.json'); final config = json.decode(configString); setState(() { _cloudRunHost = config['cloudRunHost']; }); }
이 메서드는 JSON 객체에 Cloud Run 백엔드 앱 호스트 이름의 값을 저장하는 채팅 앱의 구성 파일 내용을 검색합니다. 이 파일은 실습 후반부에서 만듭니다. 이 메서드는 이전에 만든 내부 _cloudRunHost 속성에 값을 저장하고 위젯 UI를 빌드합니다.
클래스에 _sendMessage() 메서드를 추가합니다.
Future<void> _sendMessage() async { if (_controller.text.isEmpty) { return; } final message = _controller.text; _controller.clear(); setState(() { _messages.add({'sender': 'user', 'text': message}); }); if (_cloudRunHost.isEmpty || _cloudRunHost == 'YOUR_CLOUD_RUN_ENDPOINT_URL') { setState(() { _messages.add({ 'sender': 'bot', 'text': 'Please configure the Cloud Run endpoint in assets/config.json' }); }); return; } try { var endpoint_query = Uri.https(_cloudRunHost, '/ask_gemini', {'query': message}); final response = await http.get(endpoint_query); if (response.statusCode == 200) { var responseText = utf8.decode(response.bodyBytes); responseText = responseText.replaceAll(RegExp(r'\*'), ''); setState(() { _messages.add({'sender': 'bot', 'text': responseText}); }); } else { setState(() { _messages.add({ 'sender': 'bot', 'text': 'Error: ${response.statusCode}' }); }); } } catch (e) { setState(() { _messages.add({'sender': 'bot', 'text': 'Error: $e'}); }); } }
이 메서드는 사용자가 입력한 프롬프트 텍스트를 검색하여 채팅 패널에 표시된 메시지 목록에 추가합니다. 입력 프롬프트와 함께 Cloud Run 백엔드 서비스 엔드포인트 URL에 HTTP GET 요청을 보내고 서비스의 응답을 표시합니다.

코드가 쿼리 매개변수에 프롬프트 텍스트를 포함하는 Cloud Run 백엔드 호스트 엔드포인트의 URL을 구성합니다. 그러면 엔드포인트로 HTTP GET 요청이 전송됩니다. 응답이 상태 코드 200과 함께 수신되면 디코딩 후 채팅 화면에 표시하기 위해 메시지 목록에 추가됩니다. 응답이 성공적이지 않거나 예외가 발생하면 상태 코드 또는 예외 메시지가 메시지 목록에 추가되고 표시됩니다.
채팅 앱 UI 빌드를 위해 _MyHomePageState 클래스에서 기존 build 메서드를 아래 코드로 바꿉니다.
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Gemini Chat App'), ), body: Column( children: [ Expanded( child: ListView.builder( padding: const EdgeInsets.all(8.0), itemCount: _messages.length, itemBuilder: (context, index) { final message = _messages[index]; final isUserMessage = message['sender'] == 'user'; return Align( alignment: isUserMessage ? Alignment.centerRight : Alignment.centerLeft, child: Container( margin: const EdgeInsets.symmetric(vertical: 4.0), padding: const EdgeInsets.all(12.0), decoration: BoxDecoration( color: isUserMessage ? Colors.blue[100] : Colors.grey[200], borderRadius: BorderRadius.circular(8.0), ), child: Text(message['text']!), ), ); }, ), ), Padding( padding: const EdgeInsets.all(8.0), child: Row( children: [ Expanded( child: TextField( controller: _controller, decoration: const InputDecoration( hintText: 'Enter a message', ), onSubmitted: (text) => _sendMessage(), ), ), IconButton( icon: const Icon(Icons.send), onPressed: _sendMessage, ), ], ), ), ], ), ); }
build 메서드는 채팅 앱의 UI를 설명합니다. 이 메서드는 구성과 현재 상태로 위젯 트리를 만들고, Flutter 프레임워크는 이를 화면에 렌더링합니다. 이 채팅 앱 UI에서 코드는 채팅 메시지를 열로 나열하여 표시하며 사용자 프롬프트를 위한 텍스트 입력란과 보내기 버튼도 함께 제공합니다. 사용자가 입력한 메시지(프롬프트)는 파란색 상자에서 렌더링되고 앱(봇)의 응답 또는 오류 메시지는 회색 상자에서 렌더링됩니다.

사용자가 채팅 앱에서 Send를 클릭하거나 프롬프트 입력 후 텍스트 입력란에서 Enter 키를 누르면 _sendMessage() 콜백 메서드가 호출됩니다.

가져오기 추가하기

추가된 코드는 Dart와 Flutter SDK의 특정 라이브러리나 패키지에 종속됩니다.

이러한 패키지를 가져오려면 main.dart 파일 시작 부분의 기존 import 문 아래에 다음 import 문을 추가합니다.
import 'package:http/http.dart' as http; import 'dart:convert'; import 'package:flutter/services.dart' show rootBundle;
- http.dart 패키지에는 HTTP 리소스를 쉽게 사용할 수 있게 하는 일련의 고수준 함수와 클래스가 포함되어 있습니다.
- dart:convert 라이브러리에는 JSON 직렬화, UTF-8 인코딩/디코딩 등의 일반적인 데이터 변환을 처리하는 함수가 있습니다.
- rootBundle 속성은 Flutter 앱과 함께 패키징된 기본 애셋 번들에 대한 액세스를 제공하는 전역 정적 객체입니다.
앱의 변경사항을 저장하려면 IDE 탐색 메뉴에서 파일 > 저장을 클릭합니다.

종속 항목 업데이트하기

pubspec.yaml 파일은 Flutter 앱의 프로젝트 메타데이터, 패키지 종속 항목, 애셋을 지정합니다.

IDE의 탐색기 창에서 pubspec.yaml 파일을 선택하여 수정합니다. 이 파일은 chat_app 폴더에 있습니다.
dependencies 섹션에서 cupertino_icons 글꼴 라이브러리 아래에 http 패키지 종속 항목을 추가합니다.
http: ^1.6.0 공백 들여쓰기가 제대로 유지되는지 확인합니다.
pubspec.yaml 파일에서 flutter 섹션으로 스크롤하고 63번째 줄의 주석 처리를 삭제합니다. assets 아래에 assets 폴더를 추가합니다. 이때 공백 들여쓰기를 유지합니다.
assets: - assets/

앱의 config.json 파일을 저장하는 애셋 폴더가 구성됩니다.
IDE 탐색 메뉴에서 파일 > 저장을 클릭하여 pubspec.yaml 파일의 변경사항을 저장합니다.

Cloud Run 백엔드와 Flutter 앱 통합하기

Flutter 앱은 이 실습에서 앞서 배포한 Reasoning Engine 에이전트와 통합됩니다. 통합은 Cloud Run에 빌드하고 배포한 백엔드 앱의 엔드포인트에 Flutter 앱을 연결하여 이루어집니다.

_sendMessage() 메서드에서 assets/config.json이라는 파일에 _cloudRunHost 속성이 비어 있는지 또는 구성되어 있지 않은지 확인하는 코드를 보셨을 것입니다. 이 하위 작업에서는 Flutter 앱에 이 파일을 추가합니다.

먼저 백엔드 앱의 Cloud Run 엔드포인트 호스트 이름을 가져와 값을 환경 변수에 저장합니다.

IDE 터미널 창에서 다음을 실행합니다.
BACKEND_APP_HOST=$(gcloud run services describe ag-web --region {{{project_0.default_region|set at lab start}}} --format 'value(status.url)' | cut -d'/' -f3); echo $BACKEND_APP_HOST
Flutter 채팅 앱 홈 디렉터리에 /assets 디렉터리를 만듭니다.
mkdir ~/chat_app/assets
/assets 디렉터리에 config.json 파일을 만듭니다.
cat <<EOF > ~/chat_app/assets/config.json { "cloudRunHost": "$BACKEND_APP_HOST" } EOF
변경사항을 확인하기 위해 IDE 탐색기 메뉴에서 콘텐츠를 새로고침하고 IDE-DEV/chat_app/assets/config.json 파일을 클릭하여 엽니다. cloudRunHost 구성 항목 값이 Cloud Run 백엔드 앱 호스트 이름의 값으로 업데이트되었는지 확인합니다.
참고: 이 값은 이전 단계에서 설정한 'BACKEND_APP_HOST' 환경 변수의 값과 일치해야 합니다.

Flutter 앱 배포하기

Flutter 앱 구성이 완료되었으므로 이제 앱을 빌드하고 배포할 수 있습니다. 이 실습에서는 앱을 웹 애플리케이션으로 실행하기 위해 Flutter 웹용 개발 서버인 fwr를 사용합니다.

현재 위치가 Flutter 앱 폴더인지 확인합니다. IDE 터미널 창에서 다음을 실행합니다.
cd ~/chat_app
다음을 실행하여 앱 프로젝트 종속 항목을 가져옵니다.
flutter pub get
다음을 실행하여 프로젝트를 빌드하고 웹 서버를 시작합니다.
fwr
서버가 시작되어 Flutter 앱을 제공할 때까지 기다립니다. 시작되면 다음과 비슷한 명령어의 출력이 표시됩니다.

작업 6. Flutter 앱 테스트하기

Flutter 앱의 기능을 테스트해 보겠습니다.

앱 테스트하기

Flutter 앱에 액세스하기 위해 실습 사용자 인증 정보 패널에서 라이브 서버 URL을 복사하여 시크릿 모드 브라우저 창의 새 탭에서 엽니다.

채팅 앱이 로드될 때까지 몇 초간 기다립니다.
하단의 메시지에 다음을 입력합니다.
What is fallingwater? 답변을 일반 텍스트로 작성합니다.
몇 초 후 앱에 백엔드 에이전트의 응답이 표시됩니다.
앱과 에이전트 테스트를 위해 메시지에 다음을 입력합니다.
Where can I buy the Chrome dino pin?
몇 초 후 앱에 백엔드 에이전트의 응답이 표시됩니다.

채팅 앱은 백엔드 앱의 /ask_gemini Cloud Run 엔드포인트를 호출하고, 백엔드 앱은 Gemini를 사용하여 Agent Search 데이터 스토어의 응답을 반환하는 LangChain 에이전트를 호출합니다.
Flutter 앱이 모바일 레이아웃에 맞춰지는지 확인하려면 브라우저 창의 크기를 휴대기기의 크기에 맞게 조정하세요.

이는 Flutter 앱이 화면 또는 창 크기에 따라 변경사항에 맞게 반응한다는 것을 의미합니다. Flutter에는 앱이 기기 구성에 따라 변경사항에 반응하고 적응하도록 도와주는 위젯과 패키지가 있습니다.

목표를 확인하려면 내 진행 상황 확인하기를 클릭합니다. Flutter 채팅 앱을 개발하고 테스트합니다.

실습 종료하기

실습을 완료하면 실습 종료를 클릭합니다. Google Skills에서 사용된 리소스를 자동으로 삭제하고 계정을 지웁니다.

실습 경험을 평가할 수 있습니다. 해당하는 별표 수를 선택하고 의견을 입력한 후 제출을 클릭합니다.

별점의 의미는 다음과 같습니다.

별표 1개 = 매우 불만족
별표 2개 = 불만족
별표 3개 = 중간
별표 4개 = 만족
별표 5개 = 매우 만족

의견을 제공하고 싶지 않다면 대화상자를 닫으면 됩니다.

의견이나 제안 또는 수정할 사항이 있다면 지원 탭을 사용하세요.

수고하셨습니다

이 실습에서 학습한 내용은 다음과 같습니다.

Google Cloud 콘솔에서 AI 애플리케이션을 사용하여 검색 데이터 스토어 및 검색 앱 만들기
Agent Platform Workbench를 사용하여 LangChain 에이전트 배포
Agent Search 및 LangChain 에이전트와 통합되는 Python 앱 빌드
Cloud Run에 앱 배포 및 Flutter 앱의 백엔드로 사용
Flutter 채팅 앱 개발 및 Gemini와 상호작용을 위해 백엔드 서비스와 통합

체크포인트

개요

목표

설정