대화형 분석으로 Looker 삽입

1. 시작하기 전에

이 Codelab에서는 Looker 대시보드를 대화형 분석 기반 채팅과 통합하여 자연어 기반의 통합 데이터 환경을 만드는 방법을 안내합니다. 최대한의 가치를 얻으려면 Looker 삽입, 대화형 분석, JavaScript, React를 숙지해야 합니다.

학습할 내용

이 Codelab을 완료하면 다음을 알게 됩니다.

Looker 삽입 참조 애플리케이션을 로컬로 설정하는 방법
Looker 구성요소 라이브러리로 채팅 React 구성요소를 빌드하는 방법
대화형 분석에 삽입된 대시보드의 필터를 컨텍스트로 전송하는 방법
대화형 분석 기반 채팅을 사용 설정하여 삽입된 대시보드의 필터를 제어하는 방법

필요한 항목

이 Codelab을 완료하려면 다음이 필요합니다.

ASC 인구통계 데이터 Looker 블록이 설치되고 SSO 삽입이 사용 설정된 Looker 인스턴스
Looker 인스턴스에 대한 API 및 개발자 액세스
Node v18, yarn, Git, gcloud가 설치된 로컬 환경
사용자 계정에 다음 IAM 역할이 설정된 클라우드 프로젝트
roles/bigquery.dataViewer BigQuery 데이터 뷰어
roles/bigquery.user BigQuery 사용자
roles/looker.instanceUser Looker 인스턴스 사용자

2. 대화형 분석 설정

자연어 질문에 답변하는 데 내장 대시보드의 채팅이 사용할 대화형 분석 데이터 에이전트를 설정해 보겠습니다.

gcloud로 인증

로컬 환경에서 사용자 계정으로 인증합니다.

gcloud auth login

gcloud에서 애플리케이션 기본 사용자 인증 정보 (ADC)와 결제 프로젝트를 설정합니다.

gcloud auth application-default login
gcloud auth application-default set-quota-project YOUR_PROJECT_ID

Conversational Analytics API 사용 설정

Cloud 프로젝트 API를 사용 설정합니다. YOUR_PROJECT_ID를 Google Cloud 프로젝트의 ID로 바꾸세요.

gcloud services enable geminidataanalytics.googleapis.com bigquery.googleapis.com cloudaicompanion.googleapis.com --project=YOUR_PROJECT_ID

데이터 에이전트 만들기

Google Colab을 엽니다.
Google Colab에서 Looker Embed Reference 저장소에서 이 노트북을 로드합니다.
노트북의 모든 단계를 실행합니다. Cloud 프로젝트 ID와 Looker 인스턴스의 URI(예: "https://my.looker.app/")가 필요합니다. 노트북이 끝나면 성공적인 결과가 표시됩니다.

이제 대화형 분석 데이터 에이전트를 사용할 수 있으며, 이 에이전트는 채팅 메시지를 수락하고, 삽입된 Looker 대시보드의 Looker Explore를 쿼리하고, 결과와 시각화를 반환할 준비가 되었습니다.

3. Looker Embed 참조 설정

로컬 환경에서 Looker 삽입 참조 애플리케이션을 설정하여 대화형 분석 채팅을 삽입된 Looker 대시보드와 통합하는 예를 사용해 보겠습니다.

저장소 클론

GitHub 저장소를 로컬 환경에 클론합니다. 아래 예시 명령어를 참고하세요.

git clone "https://github.com/looker-open-source/LookerEmbedReference.git"

클론한 LookerEmbedReference 디렉터리로 이동합니다.

cd LookerEmbedReference

로컬 프런트엔드 서버 설정 및 실행

Frontend 디렉터리에 종속 항목 설치

cd Frontend
yarn install

사용자 인증 정보가 포함된 Frontend 디렉터리 루트에 .env 파일을 설정합니다. YOUR_LOOKER_INSTANCE_URI는 후행 슬래시가 없는 Looker 인스턴스의 URI여야 합니다. 파일 콘텐츠는 다음과 같아야 합니다.

PBL_CLIENT_PORT=3001 
API_HOST=http://localhost:3000
LOOKER_HOST=YOUR_LOOKER_INSTANCE_URI
LOOKER_API_HOST=YOUR_LOOKER_INSTANCE_URI:19999
LOOKERSDK_EMBED_HOST=YOUR_LOOKER_INSTANCE_URI

다음 예시 명령어를 사용하여 파일을 만들 수 있습니다.

cat > .env <<'EOF'
PBL_CLIENT_PORT=3001 
API_HOST=http://localhost:3000
LOOKER_HOST=YOUR_LOOKER_INSTANCE_URI
LOOKER_API_HOST=YOUR_LOOKER_INSTANCE_URI:19999
LOOKERSDK_EMBED_HOST=YOUR_LOOKER_INSTANCE_URI
EOF

프런트엔드 개발 서버를 실행합니다.

yarn run dev

백엔드 서버를 로컬로 설정하고 실행

새 셸, 터미널, 콘솔 또는 탭을 엽니다. Backend-Node 디렉터리로 이동하여 종속 항목을 설치합니다. 프런트엔드 서버가 실행 중인 이전 셸/터미널을 유지해야 합니다.

cd ../Backend-Node
yarn install

사용자 인증 정보가 포함된 Backend-Node 디렉터리 루트에 .env 파일을 설정합니다.

YOUR_LOOKER_CLIENT_ID는 Looker 클라이언트 ID입니다.
YOUR_LOOKER_CLIENT_SECRET은 Looker 클라이언트 보안 비밀입니다.
YOUR_LOOKER_EMBED_SECRET는 임베드 보안 비밀입니다.
YOUR_PROJECT_ID는 Cloud 프로젝트 ID입니다.
YOUR_LOOKER_INSTANCE_URI_WITH_TRAILING_SLASH는 Looker 인스턴스 URI이며, 끝에 슬래시가 있습니다.
YOUR_LOOKER_INSTANCE_URI은 후행 슬래시가 없는 Looker 인스턴스 URI입니다.

파일 콘텐츠는 다음과 같아야 합니다.

PBL_BACKEND_PORT=3000
LOOKERSDK_API_VERSION=4.0
LOOKERSDK_BASE_URL=YOUR_LOOKER_INSTANCE_URI_WITH_TRAILING_SLASH
LOOKERSDK_CLIENT_ID=YOUR_LOOKER_CLIENT_ID
LOOKERSDK_CLIENT_SECRET=YOUR_LOOKER_CLIENT_SECRET

LOOKERSDK_EMBED_HOST=YOUR_LOOKER_INSTANCE_URI
LOOKERSDK_EMBED_SECRET=YOUR_LOOKER_EMBED_SECRET

CLOUD_AGENT_ID=looker_embed_reference_data_agent
CLOUD_PROJECT_ID=YOUR_PROJECT_ID

다음 예시 명령어를 사용하여 파일을 만들 수 있습니다. 그에 따라 모든 사용자 인증 정보를 바꿉니다.

cat > .env <<'EOF'
PBL_BACKEND_PORT=3000
LOOKERSDK_API_VERSION=4.0
LOOKERSDK_BASE_URL=YOUR_LOOKER_INSTANCE_URI_WITH_TRAILING_SLASH
LOOKERSDK_CLIENT_ID=YOUR_LOOKER_CLIENT_ID
LOOKERSDK_CLIENT_SECRET=YOUR_LOOKER_CLIENT_SECRET

LOOKERSDK_EMBED_HOST=YOUR_LOOKER_INSTANCE_URI
LOOKERSDK_EMBED_SECRET=YOUR_LOOKER_EMBED_SECRET

CLOUD_AGENT_ID=looker_embed_reference_data_agent
CLOUD_PROJECT_ID=YOUR_PROJECT_ID
EOF

백엔드 개발 서버를 실행합니다.

yarn run dev

이제 프런트엔드 개발 서버가 웹 애플리케이션의 JavaScript를 제공하며 실행됩니다. 또한 SSO 삽입 URL 요청을 처리하고 Conversational Analytics 엔드포인트에 대한 요청을 프록시하는 백엔드 개발 서버가 실행되고 있습니다.

4. 예시 사용해 보기

이제 환경에서 로컬로 실행되는 웹 애플리케이션을 사용해 보겠습니다.

대화 시작하기

선택한 브라우저에서 https://localhost:3001 주소를 엽니다.
왼쪽 기본 탐색 메뉴에서 채팅이 포함된 삽입된 대시보드 페이지로 이동합니다.
오른쪽의 채팅 구성요소가 로드되면 '안녕, 넌 누구니?'라고 입력합니다.
대답을 확인합니다.

애플리케이션이 채팅 기록을 추적하기 위해 대화형 분석 대화 객체를 자동으로 생성하고 채팅 인터페이스를 로드했습니다. 채팅 인터페이스에 질문하면 프런트엔드에서 사용자 메시지를 로컬 노드 백엔드 서버로 전송했습니다. 그런 다음 대화형 분석 채팅 엔드포인트로 요청을 프록시하고 응답을 프록시했습니다.

삽입된 대시보드 필터링

이제 삽입된 대시보드를 숙지하고 상호작용합니다.

삽입된 대시보드를 스크롤합니다. 여러 측정기준과 측정항목에 걸친 인구조사 데이터를 다룹니다.
대시보드 왼쪽 상단에서 주 및 카운티를 기준으로 대시보드를 필터링할 수 있습니다. 대시보드 필터의 필터를 Texas로 설정합니다. 그런 다음 새로 파란색으로 강조 표시된 원형 화살표 버튼을 선택하여 대시보드를 다시 실행합니다.
모든 시각화 데이터가 Texas 주에 따라 필터링됩니다.

대시보드 컨텍스트를 사용하여 질문하기

이제 대시보드를 필터링했으므로 대시보드의 데이터를 계속 살펴보겠습니다.

채팅에 '임대료가 가장 저렴한 상위 5개 카운티를 알려 줘'라고 입력합니다.
이제 대화형 분석 프롬프트에 '텍사스인 'state.state_name' 측정기준을 기준으로 필터링'이라는 단어가 추가되었습니다.
이제 응답의 쿼리와 데이터가 Texas 주를 기준으로 필터링됩니다.
또한 데이터 결과가 반환된 후 결과의 데이터에 정의된 5개 카운티로 설정된 카운티 필터를 사용하여 삽입된 대시보드가 다시 실행되었습니다.

이제 5개 카운티가 편리하게 필터링된 상태로 인구 조사 데이터를 계속 조사할 수 있습니다.

축하합니다. 대화형 분석 채팅과 통합된 간단한 삽입형 대시보드의 예를 설정하고 사용해 보았습니다.

5. 채팅 구성요소 빌드

먼저 Chat 구성요소를 살펴보고 내부적으로 어떤 일이 일어나는지 알아보겠습니다. Looker Embed SDK를 사용하여 Looker 대시보드를 삽입하는 방법을 알고 있다고 가정합니다.

Looker 구성요소 라이브러리 사용

원하는 IDE 또는 터미널에서 Frontend/src/components/EmbedChat/components/chat.js에 있는 Chat 구성요소 파일을 엽니다.
Chat 구성요소는 Looker 구성요소 라이브러리 패키지의 표준 Looker UI React 구성요소로 빌드됩니다.

사용자 메시지 보내기

채팅 인터페이스는 사용자의 프롬프트를 대화형 분석에 전송해야 합니다.

Chat 구성요소 파일 하단 근처에 있는 Chat 구성요소에는 사용자의 프롬프트용 입력 필드를 제공하는 ChatInput 하위 구성요소가 포함되어 있습니다.
제출 시 showAndSendUserPrompt 메서드는 사용자의 프롬프트를 대화형 분석 (Node 백엔드를 통해 프록시 처리됨)으로 전송합니다.

시스템 메시지 스트리밍 및 표시

사용자가 대화형 분석에 메시지를 보낸 후에는 대화형 분석의 응답을 표시해야 합니다.

Chat 구성요소 파일 하단 근처에 있는 Chat 구성요소에는 메시지 유형에 따라 대화형 분석의 메시지를 표시하는 로직이 포함된 MessageList 하위 구성요소가 포함되어 있습니다.
streamAndParseResponse 메서드는 스트리밍 JSON 응답에서 유효한 시스템 메시지를 지속적으로 파싱하여 응답을 처리합니다. 유효한 시스템 메시지가 성공적으로 파싱되면 MessageList에 표시됩니다.

이제 Looker 구성요소 라이브러리로 빌드된 Chat 구성요소가 사용자 메시지를 전송하고 응답을 다시 스트리밍하는 방법을 살펴봤습니다.

6. 대화형 분석에 대시보드 필터 전송

이제 대화형 분석이 대시보드의 컨텍스트 (필터)로 쿼리를 필터링할 수 있도록 사용자의 프롬프트에 대시보드 필터를 포함하는 방법을 알아보겠습니다.

대시보드의 필터 변경 이벤트 수신

이전에 살펴본 Chat 구성요소와 통합된 삽입된 대시보드가 포함된 애플리케이션의 페이지를 나타내는 Frontend/src/components/EmbedChat/EmbedChat.js,에서 EmbedChat 구성요소 파일을 엽니다.
EmbedChat 구성요소는 Embed SDK의 .on(...) 메서드를 사용하여 삽입된 대시보드에서 "dashboard:filters:changed" 이벤트를 수신합니다. 그러면 구성요소가 현재 필터를 필터 상태에 저장합니다.

대화형 분석에 필터 상태 전송

EmbedChat 구성요소는 필터를 Chat 구성요소에 전달하고, Chat 구성요소는 각 필터를 showAndSendUserPrompt 메서드에서 "Filter on dimension '...' being ..."와 같은 문자열로 변환하여 사용자 프롬프트에 접미사로 추가합니다.

7. 채팅에서 대시보드 필터 관리

마지막으로 Chat 구성요소를 사용해 삽입된 대시보드의 필터를 제어하는 방법을 살펴보겠습니다.

설정할 필터 결정하기

Chat 구성요소의 streamAndParseResponse 메서드는 항상 대화형 분석의 데이터 결과가 포함된 시스템 메시지를 확인합니다.
streamAndParseResponse 메서드가 데이터 결과가 포함된 시스템 메시지를 파싱할 때마다 데이터의 측정기준이 필터의 측정기준과 일치하는지 확인합니다.
이 경우 streamAndParseResponse 메서드는 데이터 열을 대시보드 필터로 변환합니다. 이번에는 메서드가 FIELD_FILTER_MAP을 다시 사용하지만 반대로 차원 이름에서 필터의 키로 변환합니다. 필터의 값은 데이터 열의 값입니다.

필터 변경 이벤트를 삽입된 대시보드로 전송

원하는 대시보드 필터를 사용하여 streamAndParseResponse 메서드는 원하는 필터로 Chat 구성요소의 setFilters 메서드를 호출합니다.
이렇게 하면 EmbedChat 구성요소의 setDashboardFilters 메서드가 호출되어 필터가 있는 "dashboard:filters:update" 이벤트와 "dashboard:run" 이벤트가 Embed SDK의 send 메서드를 사용하여 연속으로 삽입된 대시보드로 전송됩니다.
"dashboard:filters:update" 이벤트는 삽입된 대시보드의 필터를 변경하고 "dashboard:run" 이벤트는 새 필터로 대시보드의 쿼리를 다시 실행합니다.

8. 결론 및 주요 내용

대화형 분석 채팅과 통합된 Looker 대시보드의 자체 작업 예시를 설정했습니다. 내장된 Looker 대시보드와 대화형 분석을 사용하여 자연어 기반 데이터 탐색을 사용 설정하는 방법을 알아보았습니다.

Looker 구성요소 라이브러리를 사용하여 채팅 구성요소를 빌드했습니다.
데이터 탐색을 용이하게 하기 위해 삽입된 Looker 대시보드의 컨텍스트를 대화형 분석에 전달했습니다.
데이터를 탐색하는 동안 향상된 컨텍스트를 위해 삽입된 대시보드의 필터를 제어할 수 있도록 대화형 분석을 사용 설정했습니다.

다음 단계

대화형 분석의 기능에 대해 자세히 알아보세요.
자체 삽입 Looker 대시보드와 함께 작동하도록 Looker 삽입 참조 예시 앱을 업데이트합니다.
로컬에서 실행되는 Looker 삽입 참조 예시 앱에서 제공되는 다른 삽입 사용 사례를 사용해 보세요.