Nhúng Looker bằng tính năng Phân tích đàm thoại

1. Trước khi bắt đầu

Lớp học lập trình này sẽ hướng dẫn bạn cách tích hợp một trang tổng quan Looker được nhúng với tính năng trò chuyện dựa trên Phân tích đàm thoại để tạo ra một trải nghiệm dữ liệu hợp nhất dựa trên ngôn ngữ tự nhiên. Để khai thác tối đa giá trị, bạn nên làm quen với tính năng nhúng Looker, Phân tích đàm thoại, JavaScript và React.

Kiến thức bạn sẽ học được

Sau khi hoàn thành lớp học lập trình này, bạn sẽ học được:

  • Cách thiết lập ứng dụng Tham chiếu nhúng Looker cục bộ
  • Cách tạo một thành phần trò chuyện React bằng thư viện Looker Components
  • Cách gửi bộ lọc của bảng điều khiển được nhúng dưới dạng bối cảnh đến Phân tích đàm thoại
  • Cách bật chế độ trò chuyện dựa trên Conversational Analytics để kiểm soát các bộ lọc của trang tổng quan được nhúng

Bạn cần có

Để hoàn tất lớp học lập trình này, bạn cần có:

  • Một thực thể Looker đã cài đặt Khối Looker Dữ liệu nhân khẩu học ASC và đã bật tính năng nhúng SSO
  • Quyền truy cập vào API và quyền truy cập của nhà phát triển vào thực thể Looker
  • Môi trường cục bộ đã cài đặt Node v18, yarn, Git và gcloud
  • Một dự án trên đám mây có các vai trò IAM này được thiết lập cho tài khoản người dùng của bạn:
  • roles/bigquery.dataViewer Người xem dữ liệu BigQuery
  • roles/bigquery.user Người dùng BigQuery
  • roles/looker.instanceUser Người dùng thực thể Looker

2. Thiết lập tính năng Phân tích đàm thoại

Hãy thiết lập tác nhân dữ liệu Phân tích đàm thoại mà tính năng trò chuyện trên bảng điều khiển được nhúng của bạn sẽ dùng để trả lời các câu hỏi bằng ngôn ngữ tự nhiên.

Xác thực bằng gcloud

  1. Xác thực bằng tài khoản người dùng trong môi trường cục bộ:
gcloud auth login
  1. Đặt thông tin đăng nhập mặc định của ứng dụng (ADC) và dự án thanh toán trên gcloud:
gcloud auth application-default login
gcloud auth application-default set-quota-project YOUR_PROJECT_ID

Bật API Phân tích đàm thoại

  1. Bật các API dự án trên đám mây. Vui lòng thay thế YOUR_PROJECT_ID bằng mã dự án trên Google Cloud của bạn:
gcloud services enable geminidataanalytics.googleapis.com bigquery.googleapis.com cloudaicompanion.googleapis.com --project=YOUR_PROJECT_ID

Tạo tác nhân dữ liệu

  1. Mở Google Colab.
  2. Trong Google Colab, hãy tải sổ tay này từ kho lưu trữ Looker Embed Reference.
  3. Chạy tất cả các bước trong sổ tay. Bạn sẽ cần mã dự án trên đám mây và URI của thực thể Looker có dấu gạch chéo ở cuối, chẳng hạn như "https://my.looker.app/". Bạn sẽ nhận được kết quả thành công ở cuối sổ tay.

Giờ đây, bạn đã có tác nhân dữ liệu Phân tích đàm thoại và tác nhân này sẵn sàng chấp nhận tin nhắn trò chuyện, truy vấn dữ liệu khám phá Looker trong bảng điều khiển Looker được nhúng, đồng thời trả về kết quả và hình ảnh trực quan.

3. Thiết lập Looker Embed Reference

Hãy thiết lập ứng dụng Looker Embed Reference trong môi trường cục bộ để bạn có thể dùng thử ví dụ về việc tích hợp cuộc trò chuyện Phân tích đàm thoại với một trang tổng quan Looker được nhúng.

Nhân bản kho lưu trữ

  1. Nhân bản kho lưu trữ github vào môi trường cục bộ của bạn. Hãy xem ví dụ về lệnh sau đây:
git clone "https://github.com/looker-open-source/LookerEmbedReference.git"
  1. Chuyển đến thư mục LookerEmbedReference mà bạn đã sao chép:
cd LookerEmbedReference

Thiết lập và chạy máy chủ giao diện người dùng cục bộ

  1. Cài đặt các phần phụ thuộc trong thư mục Frontend
cd Frontend
yarn install
  1. Thiết lập tệp .env trong thư mục gốc Frontend bằng thông tin đăng nhập. YOUR_LOOKER_INSTANCE_URI phải là URI của thực thể Looker, không có dấu gạch chéo ở cuối. Nội dung tệp phải như sau:
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

Bạn có thể dùng lệnh ví dụ sau đây để tạo tệp:

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
  1. Chạy máy chủ phát triển giao diện người dùng:
yarn run dev

Thiết lập và chạy máy chủ phụ trợ cục bộ

  1. Mở một shell, thiết bị đầu cuối, bảng điều khiển hoặc thẻ mới. Chuyển đến thư mục Backend-Node rồi cài đặt các phần phụ thuộc. Đảm bảo giữ lại shell/Terminal trước đó khi máy chủ giao diện người dùng đang chạy.
cd ../Backend-Node
yarn install
  1. Thiết lập một tệp .env trong thư mục gốc Backend-Node bằng thông tin đăng nhập:
  • YOUR_LOOKER_CLIENT_ID là mã ứng dụng khách Looker của bạn.
  • YOUR_LOOKER_CLIENT_SECRET là khoá bí mật của ứng dụng khách Looker.
  • YOUR_LOOKER_EMBED_SECRET là khoá bí mật để nhúng của bạn.
  • YOUR_PROJECT_ID là mã dự án trên đám mây của bạn.
  • YOUR_LOOKER_INSTANCE_URI_WITH_TRAILING_SLASH là URI phiên bản Looker của bạn có dấu gạch chéo ở cuối.
  • YOUR_LOOKER_INSTANCE_URI là URI phiên bản Looker của bạn không có dấu gạch chéo theo sau.

Nội dung tệp phải như sau:

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

Bạn có thể dùng ví dụ về lệnh sau đây để tạo tệp. Thay thế tất cả thông tin đăng nhập cho phù hợp:

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
  1. Chạy máy chủ phát triển phụ trợ:
yarn run dev

Giờ đây, bạn đã có máy chủ phát triển giao diện người dùng đang chạy, phân phát JavaScript cho ứng dụng web. Bạn cũng có máy chủ phát triển phụ trợ đang chạy để xử lý các yêu cầu về URL nhúng SSO và yêu cầu proxy đến các điểm cuối của Phân tích đàm thoại.

4. Thử ví dụ

Hãy thử ứng dụng web của bạn hiện đang chạy cục bộ trong môi trường của bạn.

Bắt đầu cuộc trò chuyện

  1. Mở địa chỉ https://localhost:3001 trong trình duyệt mà bạn chọn.
  2. Chuyển đến trang Trang tổng quan được nhúng có tính năng trò chuyện trong trình đơn điều hướng chính ở bên trái.
  3. Sau khi thành phần trò chuyện ở bên phải tải xong, hãy nhập: "Xin chào, bạn là ai?"
  4. Ghi lại câu trả lời.

Ứng dụng này tự động tạo một đối tượng cuộc trò chuyện Phân tích đàm thoại để theo dõi nhật ký trò chuyện và tải giao diện trò chuyện. Khi bạn đặt câu hỏi cho giao diện trò chuyện, giao diện người dùng sẽ gửi một tin nhắn của người dùng đến máy chủ phụ trợ Node cục bộ của bạn. Sau đó, nó chuyển yêu cầu đến và phản hồi từ điểm cuối trò chuyện của Phân tích đàm thoại.

Lọc trang tổng quan được nhúng

Bây giờ, hãy làm quen với trang tổng quan được nhúng và tương tác với trang tổng quan đó.

  1. Di chuyển qua trang tổng quan được nhúng. Xin lưu ý rằng báo cáo này bao gồm dữ liệu điều tra dân số trên nhiều phương diện và chỉ số.
  2. Bạn có thể lọc trang tổng quan theo Tiểu bang và Quận ở phía trên cùng bên trái của trang tổng quan. Đặt bộ lọc trên bộ lọc trang tổng quan thành Texas. Sau đó, hãy chọn nút mũi tên hình tròn mới được đánh dấu màu xanh dương để chạy lại trang tổng quan.
  3. Lưu ý cách tất cả dữ liệu trực quan hoá được lọc theo tiểu bang Texas.

Đặt câu hỏi trong bối cảnh của trang tổng quan

Sau khi lọc trang tổng quan, hãy tiếp tục tìm hiểu dữ liệu trong trang tổng quan.

  1. Gửi câu hỏi "Tell me the top 5 counties with lowest rent" (Cho tôi biết 5 quận có giá thuê thấp nhất) trong cuộc trò chuyện.
  2. Xin lưu ý rằng câu lệnh của bạn cho Phân tích đàm thoại hiện có thêm các từ "Lọc theo phương diện 'state.state_name' là Texas".
  3. Bây giờ, hãy lưu ý rằng truy vấn và dữ liệu của phản hồi được lọc theo tiểu bang Texas.
  4. Ngoài ra, sau khi dữ liệu kết quả được trả về, trang tổng quan được nhúng của bạn đã được chạy lại với bộ lọc Quận được đặt thành 5 quận được xác định trong dữ liệu của kết quả.

Giờ đây, bạn có thể tiếp tục tìm hiểu dữ liệu điều tra dân số, với 5 quận được lọc sẵn một cách thuận tiện cho bạn.

Xin chúc mừng! Bạn đã thiết lập và dùng thử một ví dụ đơn giản về trang tổng quan được nhúng, tích hợp với một cuộc trò chuyện Phân tích đàm thoại.

5. Tạo một thành phần trò chuyện

Hãy tìm hiểu những gì đang diễn ra bên dưới bằng cách khám phá thành phần Chat trước. Chúng tôi giả định rằng bạn hiểu cách nhúng trang tổng quan Looker bằng Looker Embed SDK.

Sử dụng thư viện Thành phần của Looker

  1. Mở tệp thành phần Chat tại Frontend/src/components/EmbedChat/components/chat.js trong IDE mà bạn yêu thích hoặc trong thiết bị đầu cuối.
  2. Thành phần Chat được tạo bằng các thành phần React trong giao diện người dùng Looker tiêu chuẩn trong gói Thư viện thành phần Looker.

Gửi tin nhắn cho người dùng

Giao diện trò chuyện cần gửi câu lệnh của người dùng đến tính năng Phân tích đàm thoại.

  1. Gần cuối tệp thành phần Chat, thành phần Chat chứa thành phần phụ ChatInput. Thành phần này cung cấp trường nhập dữ liệu cho câu lệnh của người dùng.
  2. Khi gửi, phương thức showAndSendUserPrompt sẽ gửi câu lệnh của người dùng đến Phân tích đàm thoại (được uỷ quyền thông qua phần phụ trợ Node.js).

Truyền phát trực tiếp và hiển thị tin nhắn hệ thống

Sau khi người dùng nhắn tin cho Phân tích đàm thoại, chúng ta cần hiển thị câu trả lời của công cụ này.

  1. Gần cuối tệp thành phần Chat, thành phần Chat chứa thành phần phụ MessageList. Thành phần này chứa logic để hiển thị các thông báo từ Phân tích đàm thoại dựa trên loại thông báo.
  2. Phương thức streamAndParseResponse xử lý phản hồi bằng cách liên tục cố gắng phân tích cú pháp các thông báo hệ thống hợp lệ từ phản hồi JSON truyền trực tuyến. Bất cứ khi nào một thông báo hệ thống hợp lệ được phân tích cú pháp thành công, thông báo đó sẽ xuất hiện trong MessageList.

Giờ đây, bạn đã khám phá cách thành phần Chat (được tạo bằng thư viện Looker Components) gửi thông báo cho người dùng và truyền trực tuyến phản hồi.

6. Gửi bộ lọc bảng điều khiển đến Phân tích đàm thoại

Bây giờ, hãy tìm hiểu cách thêm bộ lọc trang tổng quan vào câu lệnh của người dùng để Phân tích đàm thoại có thể lọc truy vấn bằng ngữ cảnh của trang tổng quan (bộ lọc của trang tổng quan).

Theo dõi sự kiện thay đổi bộ lọc của trang tổng quan

  1. Mở tệp thành phần EmbedChat tại Frontend/src/components/EmbedChat/EmbedChat.js,. Tệp này đại diện cho trang của ứng dụng chứa trang tổng quan được nhúng, tích hợp với thành phần Chat mà bạn đã khám phá trước đó.
  2. Thành phần EmbedChat sẽ lắng nghe sự kiện "dashboard:filters:changed" từ trang tổng quan được nhúng bằng phương thức .on(...) của SDK nhúng. Sau đó, thành phần này sẽ lưu trữ các bộ lọc hiện tại trong trạng thái bộ lọc.

Gửi trạng thái bộ lọc đến tính năng Phân tích đàm thoại

  1. Thành phần EmbedChat sẽ truyền các bộ lọc vào thành phần Chat. Thành phần này sẽ chuyển đổi từng bộ lọc thành một chuỗi như "Filter on dimension '...' being ..." trong phương thức showAndSendUserPrompt để được thêm vào cuối câu lệnh của người dùng.

7. Kiểm soát bộ lọc trên trang tổng quan thông qua cuộc trò chuyện

Cuối cùng, hãy xem cách bật thành phần Chat để kiểm soát các bộ lọc của trang tổng quan được nhúng.

Xác định bộ lọc cần đặt

  1. Phương thức streamAndParseResponse của thành phần Chat luôn kiểm tra thông báo hệ thống có kết quả dữ liệu từ Phân tích đàm thoại.
  2. Bất cứ khi nào phương thức streamAndParseResponse phân tích một thông báo hệ thống có kết quả dữ liệu, phương thức này sẽ kiểm tra xem có phương diện nào trong dữ liệu tương ứng với phương diện trong bộ lọc hay không.
  3. Nếu có, phương thức streamAndParseResponse sẽ chuyển đổi các cột dữ liệu thành bộ lọc trang tổng quan. Lần này, phương thức này sẽ sử dụng lại FIELD_FILTER_MAP, nhưng theo cách ngược lại, tức là chuyển đổi từ tên phương diện sang khoá của bộ lọc. Giá trị của bộ lọc là các giá trị trong cột dữ liệu.

Gửi sự kiện thay đổi bộ lọc đến trang tổng quan được nhúng

  1. Với các bộ lọc trang tổng quan mong muốn, phương thức streamAndParseResponse sẽ gọi phương thức setFilters của thành phần Chat bằng các bộ lọc mong muốn.
  2. Thao tác này sẽ gọi phương thức setDashboardFilters của thành phần EmbedChat, phương thức này sẽ gửi 2 sự kiện, "dashboard:filters:update" cùng với các bộ lọc và "dashboard:run" đến trang tổng quan được nhúng ngay lập tức bằng phương thức send của Embed SDK.
  3. Sự kiện "dashboard:filters:update" thay đổi bộ lọc của trang tổng quan được nhúng, trong khi sự kiện "dashboard:run" chạy lại các truy vấn của trang tổng quan với bộ lọc mới.

8. Kết luận và điểm rút ra

Bạn đã thiết lập ví dụ hoạt động của riêng mình về một trang tổng quan Looker được nhúng, tích hợp với tính năng trò chuyện Phân tích đàm thoại. Bạn đã tìm hiểu cách bật tính năng khám phá dữ liệu dựa trên ngôn ngữ tự nhiên bằng trang tổng quan Looker được nhúng và tính năng Phân tích đàm thoại.

  • Bạn đã tạo một thành phần trò chuyện bằng thư viện Thành phần Looker.
  • Bạn đã truyền ngữ cảnh của bảng điều khiển Looker được nhúng cho Phân tích đàm thoại để dễ dàng khám phá dữ liệu.
  • Bạn đã bật tính năng Phân tích đàm thoại để kiểm soát các bộ lọc của trang tổng quan được nhúng nhằm tăng cường bối cảnh trong khi khám phá dữ liệu.

Bước tiếp theo

  • Tìm hiểu thêm về các chức năng của Phân tích đàm thoại.
  • Cập nhật ứng dụng ví dụ Looker Embed Reference để hoạt động với trang tổng quan Looker được nhúng của riêng bạn.
  • Hãy dùng thử các trường hợp sử dụng khác của tính năng nhúng có trong ứng dụng ví dụ Looker Embed Reference đang chạy cục bộ!