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

Looker 대시보드 요약 확장 프로그램 Codelab

1. 시작하기 전에

이 Codelab (1)에서는 로컬에서 사용해 보고 개발할 수 있도록 Looker 대시보드 요약 확장 프로그램을 로컬에서 설정합니다. 그런 다음 (2) Looker 인스턴스의 다른 Looker 사용자가 사용할 수 있도록 확장 프로그램을 프로덕션에 배포합니다. 마지막으로 (3) 추가 단계에 따라 확장 프로그램의 기능을 미세 조정하고 개선할 수 있습니다. 선택사항이 아닌 모든 섹션은 순차적으로 작성해야 합니다.

Looker 대시보드 요약 확장 프로그램 개요

Looker 대시보드 요약 확장 프로그램은 기능적으로 Looker 대시보드의 데이터를 Vertex AI의 Gemini 모델로 전송합니다. 그러면 Gemini 모델이 대시보드 데이터의 요약과 다음 단계의 처방을 반환합니다. 확장 프로그램은 요약 및 다음 단계를 대시보드에 타일로 표시하여 대시보드 환경에 통합됩니다. 또한 이 확장 프로그램은 요약 및 다음 단계를 Slack 또는 Google Chat으로 내보낼 수 있습니다. 이 확장 프로그램은 WebSocket 백엔드 서비스와 결합된 React 프런트엔드 애플리케이션을 사용하여 Vertex AI의 Gemini 모델과 데이터를 주고받습니다.

기본 요건

노드 개발, Docker, Terraform에 대한 기본 지식
Looker LookML 프로젝트 설정에 관한 지식

학습할 내용

로컬에서 확장 프로그램을 설정하고 개발하는 방법
Looker 인스턴스의 다른 Looker 사용자가 사용할 수 있도록 확장 프로그램을 프로덕션에 배포하는 방법
확장 프로그램의 성능을 미세 조정하고 기능을 확장하는 방법(선택사항)
프로덕션에서 배포된 확장 프로그램을 관리하는 방법

필요한 항목

Looker Original 라이선스, 활성 Looker Core 무료 체험판 또는 활성 Looker Core 라이선스를 통한 Looker 인스턴스
develop 및 deploy 권한이 필요합니다.
확장 프로그램으로 사용해 보려는 대시보드를 수정할 권한
Looker 인스턴스의 Looker API 키.
결제가 사용 설정된 Google Cloud 프로젝트
프로젝트에서 사용 설정된 Cloud Run API, Vertex AI API, Artifact Registry API
gcloud CLI가 설치된 로컬 환경에 액세스 이 Codelab 단계에서는 Linux 스타일 환경을 가정합니다.

2. 로컬 개발을 위한 백엔드 설정

이 섹션에서는 사용해 보고 로컬에서 개발할 수 있도록 Websocket 백엔드 서비스를 설정합니다. 서비스에 Vertex AI에 대한 액세스 권한이 부여됩니다.

로컬 환경에 설치된 Node 버전 18 이상을 설치합니다. 다음 지침에 따라 노드를 설치합니다.
확장 프로그램의 저장소를 로컬 홈 디렉터리에 클론하고 저장소의 루트 디렉터리로 이동합니다. 이 Codelab에서는 모든 코드 샘플에서 클론된 저장소가 로컬 홈 디렉터리에 있다고 가정합니다.

cd ~
git clone git@github.com:looker-open-source/dashboard-summarization.git

클론된 저장소의 루트 디렉터리로 이동하여 .env.example 파일의 이름을 .env로 바꿉니다. 그러면 이 Codelab의 뒷부분에서 환경 변수를 설정할 수 있습니다.

cd ~/dashboard-summarization
mv .env.example .env

클론된 저장소의 웹 소켓 백엔드의 src 디렉터리로 이동합니다. 이 디렉터리에는 서버의 소스 코드가 포함되어 있습니다.

cd ~/dashboard-summarization/websocket-service/src

NPM을 사용하여 서비스의 종속 항목을 설치합니다.

npm install

파일 이름을 looker-example.ini에서 looker.ini로 바꿉니다.

mv looker-example.ini looker.ini

Looker.ini 파일 업데이트 내부:
client_id 및 client_secret를 Looker API 키의 값으로 바꿉니다.
base_url: https://<YOUR_LOOKER_URL_MINUS_PROTOCOL>:19999 형식의 Looker 인스턴스 URL
중괄호 사이의 텍스트(섹션 헤더)와 Looker 인스턴스 URL의 호스트입니다.

예를 들어 클라이언트 ID가 ABC123이고, 클라이언트 보안 비밀번호가 XYZ789이고, Looker 인스턴스의 URL이 https://mycompany.cloud.looker.com이면 looker.ini 파일은 다음과 같이 표시됩니다.

[mycompany]
base_url=https://mycompany.cloud.looker.com:19999
client_id=ABC123
client_secret=XYZ789
verify_ssl=true

Google Cloud 프로젝트 ID를 확인하고 PROJECT 환경 변수에 설정합니다. YOUR_PROJECT_ID를 프로젝트 ID로 바꿉니다.

export PROJECT="YOUR_PROJECT_ID"

Vertex AI는 여기에 나열된 여러 리전에서 Gemini 모델을 제공합니다. 로컬 백엔드가 Vertex AI의 Gemini 모델에서 데이터를 주고받는 리전을 결정합니다. REGION 환경 변수에서 리전을 설정합니다. YOUR_VERTEX_REGION을 해당 리전(예: us-central1)으로 바꿉니다.

export REGION="YOUR_VERTEX_REGION"

이제 로컬 서비스를 시작합니다.

npm start

로컬 WebSocket 백엔드 서비스는 http://localhost:5000에서 실행됩니다.

이제 로컬 환경에서 WebSocket 백엔드 서비스를 설정했습니다.

이 서비스는 프런트엔드 확장 프로그램과 Vertex AI의 Gemini 모델 간의 인터페이스 역할을 합니다. 이 서비스는 Looker에서 쿼리한 데이터를 사용하여 프런트엔드 확장 프로그램의 대시보드 및 LookML 데이터를 가져와 Vertex AI의 Gemini 모델을 프롬프트합니다. 그러면 서비스에서 Gemini의 응답을 프런트엔드 확장 프로그램에 스트리밍하여 대시보드에 표시합니다.

백엔드 서비스의 소스 코드를 변경할 수도 있습니다. 먼저 서비스 프로세스를 중지하고 코드를 변경한 다음 npm start를 다시 실행해야 합니다.

3. 로컬 개발을 위한 프런트엔드 설정

이 섹션에서는 로컬에서 사용해 보고 개발할 프런트엔드 확장 프로그램을 설정합니다.

이전 단계와 동일한 로컬 환경에서 클론된 저장소의 루트 디렉터리로 이동하여 프런트엔드 서버의 프런트엔드 종속 항목을 설치합니다.

cd ~/dashboard-summarization
npm install

로컬 프런트엔드 개발 서버 시작

npm run develop

이제 로컬 프런트엔드 서버가 http://localhost:8080/bundle.js에서 확장 프로그램의 JavaScript를 제공합니다.
웹브라우저를 열고 Looker 인스턴스에 로그인합니다.
다음 안내에 따라 빈 LookML 프로젝트를 설정합니다. 프로젝트 Dashboard-summarization의 이름을 지정합니다. 이제 현재 브라우저 탭의 Looker IDE에서 빈 LookML 프로젝트가 자동으로 열립니다.
LookML 프로젝트의 루트에 프로젝트 매니페스트 파일을 만듭니다. 파일 이름은 manifest.lkml입니다. 방법을 모르는 경우 LookML 프로젝트에 파일을 추가하는 안내를 따르세요.
새 manifest.lkml 파일의 콘텐츠를 비공개 저장소의 루트 디렉터리에 있는 manifest.lkml의 콘텐츠로 바꿉니다. 오른쪽 상단에 있는 '변경사항 저장' 버튼을 선택하여 변경사항을 파일에 저장합니다.
별도의 브라우저 탭에서 Looker 인스턴스의 데이터베이스 연결 목록으로 이동합니다. 방법을 모르는 경우 이 안내를 따르세요.
Looker 데이터베이스 연결 이름을 하나 선택합니다. 어떤 연결을 선택하든 상관없습니다. 데이터베이스 연결을 볼 권한이 없는 경우 Looker 관리자에게 연락하여 Looker 데이터베이스 연결 이름을 요청하세요.
Looker IDE에서 LookML 프로젝트를 연 상태에서 브라우저 탭으로 다시 이동합니다. LookML 프로젝트에 모델 파일을 만들고 파일 대시보드 요약 이름을 지정합니다.
Dashboard-summarization.model.lkml 파일의 콘텐츠를 아래 코드 샘플로 바꿉니다. 큰따옴표 안의 문자열을 9단계에서 선택한 데이터베이스 연결 이름으로 바꿔야 합니다. 변경사항을 파일에 저장합니다.

connection: "<YOUR_CONNECTION_NAME>"

프로젝트를 저장할 저장소를 설정합니다. 오른쪽 상단의 'Configure Git(Git 구성)' 버튼을 선택합니다. '대신 기본 저장소 설정'을 선택합니다. '저장소 만들기'를 선택합니다.
이제 LookML 프로젝트 파일을 저장할 기본 베어 저장소가 생겼습니다. '프로젝트로 돌아가기'를 선택하거나 수동으로 뒤로 이동하여 Looker IDE에서 프로젝트로 다시 이동합니다.
오른쪽 상단에서 'LookML 검사' 버튼을 선택합니다. 버튼이 'Commit changes and push(변경사항 커밋 후 푸시)'로 변경됩니다.
'변경사항 커밋 및 푸시' 버튼을 선택합니다. 원하는 메시지를 추가하고 '커밋'을 선택합니다.
Looker IDE의 오른쪽 상단에서 '프로덕션에 배포'를 선택합니다. 이제 Looker 인스턴스에 확장 프로그램이 추가되었습니다.
확장 프로그램을 추가할 Looker 대시보드로 이동합니다.
안내에 따라 대시보드에 확장 프로그램 타일을 추가합니다. 새 확장 프로그램을 대시보드에 타일로 추가합니다.
이전에 설정한 로컬 Websocket 백엔드 서비스가 실행 중인지 확인합니다.

축하합니다. 이제 대시보드에서 Looker 대시보드 요약 확장 프로그램을 사용해 볼 수 있습니다. 확장 프로그램에서 대시보드의 메타데이터를 로컬 WebSocket 백엔드 서비스로 전송하고 백엔드 서비스의 Gemini 출력을 대시보드 확장 프로그램 타일 내에 바로 표시합니다.

로컬 프런트엔드 서버가 실행되는 동안 확장 프로그램의 JavaScript 소스 코드를 변경하면 서버에서 자동으로 변경사항을 빌드하고 제공합니다. 변경사항을 보려면 확장 프로그램 또는 대시보드 페이지를 새로고침해야 합니다.

4. 백엔드를 프로덕션에 배포

이 섹션에서는 이제 Looker 인스턴스의 대시보드에서 대시보드 요약 확장 프로그램의 인스턴스를 제공하도록 Websocket 백엔드 서비스를 설정합니다. 이렇게 하면 다른 Looker 사용자가 자체 백엔드 서비스를 설정하지 않고도 자체 대시보드에서 확장 프로그램을 사용해 볼 수 있습니다. 이 단계에서는 이전에 동일한 로컬 환경에 로컬 개발을 위한 백엔드를 이미 성공적으로 배포했다고 가정합니다.

다음 단계를 위해 이 안내에 따라 로컬 환경에서 프로젝트 ID로 애플리케이션 기본 사용자 인증 정보를 설정합니다.
백엔드 서비스의 Docker 이미지를 위한 Artifact Registry 저장소를 만듭니다. YOUR_REGION을 저장소가 위치할 리전으로 바꿉니다.

gcloud artifacts repositories create dashboard-summarization-repo \
    --repository-format=docker \
    --location=YOUR_REGION \

클론된 저장소의 웹 소켓 백엔드의 src 디렉터리로 이동합니다.

cd ~/dashboard-summarization/websocket-service/src

cloudbuild.yaml 파일을 수정하고 YOUR_REGION 및 YOUR_PROJECT_ID의 모든 인스턴스를 리전 및 프로젝트 ID로 바꿉니다. 변경사항을 파일에 저장합니다.
백엔드 서비스 Docker 이미지를 빌드하고 방금 만든 Artifact Registry 저장소에 푸시하는 Cloud Build를 사용하여 빌드를 제출합니다. YOUR_REGION을 Cloud Build 서비스를 사용할 리전으로 바꿉니다.

gcloud builds submit --region=YOUR_REGION --config cloudbuild.yaml

새로 빌드된 Docker 이미지 URL은 YOUR_REGION-docker.pkg.dev/YOUR_PROJECT_ID/dashboard-summarization-repo/websocketserviceimage:latest에 있습니다. YOUR_PROJECT_ID를 프로젝트 ID로 바꿉니다. YOUR_REGION을 Artifact Registry 저장소를 만드는 데 사용한 2단계의 리전으로 바꿉니다.
클론된 저장소에서 websocket-service/terraform 디렉터리로 이동합니다.

cd ~/dashboard-summarization/websocket-service/terraform

웹소켓 백엔드 서비스를 실행할 Google Cloud Run 위치를 결정합니다. 다음 위치 중에서 선택합니다.
variables.tf 파일을 수정하고 YOUR_PROJECT_ID 및 YOUR_DOCKER_IMAGE_URL를 적절한 값으로 바꿉니다. 6단계에서 Docker 이미지 URL을 확인하세요. YOUR_REGION을 이전 8단계에서 선택한 리전으로 바꿉니다. 변경사항을 파일에 저장합니다.
terraform을 사용하여 백엔드 서비스에서 사용할 리소스를 배포합니다.

terraform init
terraform plan
terraform apply

다음 섹션을 위해 배포된 Cloud Run URL 엔드포인트를 저장합니다.

축하합니다. websocket 백엔드 서비스를 배포했으며 이제 Google Cloud Run에서 서비스가 실행됩니다. 이제 Looker 대시보드 요약 확장 프로그램의 모든 인스턴스가 백엔드 서비스와 통신할 수 있습니다. 항상 Cloud Run에서 websocket 백엔드 서비스의 인스턴스를 하나 이상 실행하는 것이 좋습니다. 백엔드 서비스의 지속성은 웹소켓 백엔드 서비스와 확장 프로그램 프런트엔드 간에 데이터 스트리밍의 무결성을 유지하고 사용자가 확장 프로그램을 사용할 때 각 사용자의 세션을 유지하는 데 도움이 됩니다.

5. 프런트엔드를 프로덕션에 배포

이 마지막 섹션에서는 Looker 인스턴스의 모든 Looker 사용자가 확장 프로그램 프런트엔드를 사용할 수 있도록 배포하는 마지막 단계를 진행합니다.

클론된 저장소의 루트 디렉터리로 이동합니다.

cd ~/dashboard-summarization

를 수정합니다.env 파일. YOUR_CLOUD_RUN_URL을 이전 섹션의 Cloud Run URL 엔드포인트로 바꿉니다. 파일 변경사항을 저장합니다. 그러면 프로덕션 확장 프로그램 프런트엔드가 Cloud Run에서 실행되는 WebSocket 백엔드 서비스로 연결됩니다.
확장 프로그램의 자바스크립트를 빌드합니다. dist 디렉터리가 bundle.js 파일과 다른 파일로 자동 생성됩니다.

npm run build

웹브라우저를 열고 Looker 인스턴스에 로그인합니다. 왼쪽 측면 탐색을 열고 하단에서 '개발 모드' 전환 버튼을 사용 설정합니다.
왼쪽 탐색 메뉴를 열고 '개발'을 선택한 다음 아래로 스크롤하여 확장 프로그램의 LookML 프로젝트인 'dashboard-summarization'을 선택합니다. 이제 LookML 프로젝트의 Looker IDE가 표시됩니다.
이전에 생성된 dist 디렉터리의 모든 파일을 '파일 브라우저'의 프로젝트 루트 디렉터리로 드래그 앤 드롭합니다. 도움이 더 필요한 경우 이 안내를 따르세요.
Looker IDE 내에서 manifest.lkml 파일을 엽니다. 파일 내에서 다음 줄을 바꿉니다.

url: "http://localhost:8080/bundle.js"

작업에 사용되는 제품:

file: "bundle.js"

YOUR_CLOUD_RUN_URL을 마지막 섹션 끝에 있는 Cloud Run URL 엔드포인트로 바꿉니다. 파일에 변경사항을 저장합니다.

오른쪽 상단에서 'LookML 유효성 검사' 버튼을 선택합니다. 버튼이 'Commit changes and push(변경사항 커밋 후 푸시)'로 변경됩니다.
'변경사항 커밋 및 푸시' 버튼을 선택합니다. 원하는 메시지를 추가하고 '커밋'을 선택합니다.
Looker IDE의 오른쪽 상단에서 '프로덕션에 배포'를 선택합니다.

축하합니다. 이제 Looker 인스턴스의 모든 Looker 사용자가 대시보드에 Looker 대시보드 요약 확장 프로그램을 추가할 수 있도록 사용 설정했습니다. 다른 Looker 사용자가 확장 프로그램을 사용하면 확장 프로그램의 모든 인스턴스가 Google Cloud Run에서 실행 중인 배포된 Websocket 백엔드 서비스를 호출합니다.

소스 코드를 변경하는 경우 다음을 수행해야 합니다.

확장 프로그램의 JavaScript 다시 빌드
LookML 프로젝트에 추가한 생성된 파일을 dist 디렉터리의 새로 생성된 파일로 바꿉니다.
LookML 프로젝트 변경사항 검증, 커밋, 프로덕션에 배포

Looker 대시보드 요약 확장 프로그램을 사용해 보세요. 확장 프로그램에 참여하여 Looker 커뮤니티의 요구사항을 더 잘 충족할 수 있도록 도와주세요. 언제든지 저장소에서 pull 요청을 만드세요.

Slack/Google Chat 내보내기를 사용 설정하고, Gemini의 요약 및 다음 단계를 미세 조정하고, Gemini 로깅을 설정하려면 다음의 선택사항 섹션을 확인하세요.

6. [선택사항] 내보내기 기능 설정

이제 관리자와 Looker 사용자가 Looker 대시보드 요약 확장 프로그램을 사용해 봤으므로 더 많은 사용자와 확장 프로그램의 통계를 공유해 보세요. 확장 프로그램에서 Google Chat 또는 Slack으로 요약 및 다음 단계를 전송하도록 사용 설정하려면 이 섹션을 따르세요. Codelab의 이 섹션을 계속 진행하려면 OAuth 설정을 잘 알고 있어야 합니다.

Google Chat 내보내기 사용 설정하기

Google Cloud 프로젝트에서 Chat API를 사용 설정합니다.
Google Workspace OAuth 설정 안내의 1단계를 따르세요. 범위의 경우 spaces.messages.create를 포함해야 합니다.
Google Workspace OAuth 설정 안내의 2단계를 따릅니다. Looker 인스턴스의 URL을 '승인된 JavaScript 출처' 아래에 URI로 추가합니다(예: https://mycompany.cloud.looker.com). 생성된 클라이언트 ID를 기록해 둡니다.
요약을 내보낼 Google Chat 스페이스의 ID를 확인합니다. 방법을 잘 모르겠다면 다음 안내를 따르세요.
를 수정합니다.env 파일. YOUR_GOOGLE_CLIENT_ID를 고객 ID로 바꿉니다. YOUR_GOOGLE_SPACE_ID를 Google Chat 스페이스 ID로 바꿉니다. 파일 변경사항을 저장합니다. 이렇게 하면 원하는 Google Chat 스페이스에 통계를 전송할 수 있도록 확장 프로그램의 프런트엔드가 구성됩니다.
확장 프로그램의 프런트엔드를 로컬에서 실행하는 경우 확장 프로그램을 다시 빌드합니다. 확장 프로그램의 프런트엔드를 배포하는 경우 확장 프로그램의 프런트엔드를 다시 배포합니다.

Slack 내보내기 사용 설정

공식 Slack 개발자 문서의 1단계와 2단계에 따라 OAuth 애플리케이션을 설정합니다. 범위의 경우 chat:write 및 channels:read를 포함해야 합니다. 생성된 클라이언트 ID와 클라이언트 보안 비밀번호를 기록해 둡니다.
요약을 내보낼 Slack 채널의 ID를 확인합니다.
.env 파일. YOUR_SLACK_CLIENT_ID를 고객 ID로 바꿉니다. YOUR_SLACK_CLIENT_SECRET을 클라이언트 보안 비밀로 바꿉니다. YOUR_SLACK_CHANNEL_ID를 채널 ID로 바꿉니다. 파일 변경사항을 저장합니다. 이렇게 하면 확장 프로그램의 프런트엔드가 원하는 Slack 채널로 통계를 전송할 수 있도록 구성됩니다.
확장 프로그램의 프런트엔드를 로컬에서 실행하는 경우 확장 프로그램을 다시 빌드합니다. 확장 프로그램의 프런트엔드를 배포하는 경우 확장 프로그램의 프런트엔드를 다시 배포합니다.

이제 확장 프로그램에서 요약을 Slack 또는 Google Chat으로 직접 내보낼 수 있습니다. 확장 프로그램은 하드코딩된 특정 Google Chat 스페이스 또는 Slack 채널에만 요약을 보낼 수 있습니다. 요약을 전송할 스페이스 및 채널 목록을 가져와 표시하도록 OAuth 범위를 추가하고 코드를 수정할 수 있습니다.

7. [선택사항] 요약 및 다음 단계 미세 조정

확장 프로그램은 Gemini 모델에 모든 대시보드 메타데이터를 표시하고 데이터를 쿼리합니다. 대시보드 자체에 메타데이터와 컨텍스트를 많이 추가하여 요약 및 안내 단계의 정확성, 세부정보, 심층성을 개선할 수 있습니다. 확장 프로그램이 포함된 각 대시보드에서 다음 단계를 시도해 보세요.

다음 안내에 따라 대시보드에 대시보드 세부정보를 추가합니다. 이렇게 하면 LLM에 대시보드의 일반적인 맥락을 알릴 수 있습니다.
이 안내에 따라 각 대시보드의 타일에 메모를 추가하세요. 이렇게 하면 대시보드의 각 개별 검색어 문맥을 LLM에 알리는 데 도움이 됩니다. 작은 맥락의 메모는 생성된 요약에 반영됩니다.

대시보드에 추가할 수 있는 정보가 많을수록 확장 프로그램의 요약과 다음 단계가 더 정확해집니다. Gemini 모델의 프롬프트에 대시보드 메타데이터를 추가하도록 코드를 수정할 수 있습니다.

8. [선택사항] Gemini 모델 로깅 설정

사용자가 확장 프로그램에 대시보드 요약을 생성하도록 지시할 때마다 확장 프로그램은 대시보드의 각 쿼리에 대해 Vertex AI를 호출하고 마지막 호출 한 번으로 모든 요약의 형식을 지정합니다. 이 섹션에 따라 확장 프로그램에서 실행하는 Vertex AI 호출을 로깅하여 Vertex AI 비용과 트래픽을 추정하고 모니터링할 수 있습니다. Websocket 백엔드 서비스를 배포한 경우에만 다음 안내를 따라야 합니다.

배포된 WebSocket 백엔드 서비스의 Cloud Run 위치를 확인합니다.
이 안내에 따라 로그를 BigQuery로 라우팅하는 로그 싱크를 설정합니다. 싱크 대상은 BigQuery여야 합니다. YOUR_CLOUD_RUN_LOCATION을 이전 단계의 Cloud Run 위치로 바꾼 다음 코드 샘플로 포함 필터를 설정합니다.

resource.type = "cloud_run_revision"
resource.labels.service_name = "websocket-service"
resource.labels.location = "YOUR_CLOUD_RUN_LOCATION"
 severity>=DEFAULT
jsonPayload.component="dashboard-summarization-logs"

9. 축하합니다.

사용해 볼 수 있도록 Looker Dashboard Summarization 확장 프로그램을 로컬에서 설정했습니다. 다른 사용자가 확장 프로그램을 사용해 볼 수 있도록 Google Cloud에 확장 프로그램을 배포했습니다. 이제 나와 다른 사용자가 대시보드에서 바로 Gemini 기반 요약과 다음 단계에 액세스할 수 있습니다.

10. 다음 단계

확장 프로그램의 코드베이스를 수정하여 조직의 요구사항에 맞게 기능을 맞춤설정합니다.
확장 프로그램 저장소에 기여하고 나와 Looker 커뮤니티를 위해 확장 프로그램을 개선합니다.
Looker 환경을 보강할 자체 확장 프로그램을 개발합니다.
확장 프로그램을 대시보드에 타일로 통합하여 대시보드 환경을 개선합니다.