Cách nhúng Looker bằng SDK nhúng

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

Trong lớp học lập trình này, chúng ta sẽ sử dụng Looker Nhúng SDK để nhúng trang tổng quan Looker vào trang web của bạn. Bạn sẽ gọi một loạt phương thức SDK. Những phương thức này sẽ tự động tạo iframe, nhúng nội dung trên Looker vào đó và thiết lập thông tin liên lạc giữa iframe và trang web của bạn.

Điều kiện tiên quyết

  • Có một thực thể Looker đang chạy
  • Có trang tổng quan Looker mà bạn muốn nhúng vào ứng dụng web hoặc trang web của mình
  • Làm quen với các lời hứa về JavaScript và JavaScript.

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

  • Cách Nhúng riêng tư nội dung trong Looker bằng SDK nhúng
  • Cách gửi và nhận thông báo (hành động và sự kiện) với nội dung Looker được nhúng thông qua SDK nhúng

Bạn cần có

  • Quyền truy cập vào HTML và JavaScript của mã giao diện người dùng của bạn
  • Quyền truy cập vào chế độ cài đặt nhúng của quản trị viên trong phiên bản Looker của bạn

2. Công tác chuẩn bị

Bạn cần chuẩn bị phiên bản HTML và Looker trước khi có thể nhúng bằng SDK nhúng.

Thêm phần tử vùng chứa của iframe nhúng

Trong HTML của trang web, hãy tạo một phần tử div và xác định thuộc tính id cho phần tử đó.

<div id="looker-embed" />

Đưa miền của người nhúng vào danh sách cho phép trong phiên bản Looker

Bạn cần thêm miền của nhúng trong phiên bản Looker của mình vào danh sách cho phép.

Xác định miền của trang web lưu trữ nội dung Looker được nhúng của bạn. Giả sử URL của trang web là https://mywebsite.com/with/embed, thì miền của trang web là https://mywebsite.com.

Chuyển đến trang Nhúng trong mục Quản trị của phiên bản Looker. https://your_instance.looker.com/admin/embed

Trong trường Danh sách miền được nhúng, hãy nhập miền của nội dung nhúng. Sau khi nhập, hãy nhấn phím Tab để miền xuất hiện trong một hộp. Không được dấu gạch chéo ở cuối /.

Chọn nút Cập nhật.

3. Xây dựng quy trình nhúng

Bây giờ, hãy tạo và định cấu hình trình tạo nhúng của SDK để "xây dựng" nội dung mà bạn đã nhúng trên Looker.

Khởi chạy SDK

Trước tiên, hãy nhập rồi khởi chạy SDK bằng miền của phiên bản Looker của bạn.

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

Tạo trình tạo nhúng

Tiếp theo, hãy xác định mã trang tổng quan Looker mà bạn muốn nhúng. Nếu trang tổng quan của bạn nằm ở instance_name.looker.com/dashboard/12345, thì mã trang tổng quan sẽ là 12345.

Gọi phương thức SDK createDashboardWithId() bằng mã nhận dạng trang tổng quan để tạo một trình tạo nhúng. Phương thức này sẽ trả về trình tạo nhúng.

LookerEmbedSDK.createDashboardWithId(12345)

Định cấu hình và xây dựng trình tạo nhúng

Bây giờ, hãy định cấu hình trình tạo nhúng trước khi chúng ta yêu cầu tạo iframe được nhúng. Thêm mã mẫu sau đây ngay sau lệnh gọi phương thức createDashboardWithId() của mã mẫu trước đó.

  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .build()

Mỗi phương thức của trình tạo được nhúng đều trả về chính trình tạo được nhúng, vì vậy, chúng ta liên kết các lệnh gọi phương thức với nhau. Hãy cùng tìm hiểu từng phương pháp:

  1. Phương thức appendTo() xác định phần tử mẹ của iframe. Chúng ta chuyển vào mã của phần tử HTML mà chúng ta đã xác định trước đó trong bước Chuẩn bị.
  2. Phương thức withFrameBorder() đặt thuộc tính đường viền khung trên iframe. Đây là một trong số các phương pháp xác định các thuộc tính HTML trên iframe.
  3. Phương thức build() tạo iframe bằng các thuộc tính HTML đã định cấu hình

Kiểm tra lần cuối

Ở các bước trước, mã của bạn sẽ có dạng như sau:

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

LookerEmbedSDK.createDashboardWithId(12345)
  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .build()

Giờ đây, bạn đã nhúng trang tổng quan Looker vào trang web của mình bằng Nhúng SDK!

4. Gửi và nhận thư nhúng

Bây giờ, hãy xem cách gửi và nhận thông báo bằng nội dung được nhúng trong Looker thông qua SDK nhúng. Chúng tôi gọi các tin nhắn mà ứng dụng của bạn gửi tới iframe dưới dạng hành động và gọi các tin nhắn mà ứng dụng của bạn nhận được từ iframe dưới dạng sự kiện.

Nhận sự kiện

Hãy xử lý mã ở phần trước của chúng ta. Để nghe các sự kiện, chúng ta gọi phương thức on() của trình tạo nhúng trước khi gọi phương thức build().

...
  .on('dashboard:run:complete',() => console.log(‘Embedded dashboard loaded!')
...

Ở đây, chúng ta gọi phương thức on() để thiết lập trình nghe sự kiện trên sự kiện dashboard:run:complete đến từ iframe khi iframe được tạo. Sự kiện này sẽ cho chúng tôi biết thời điểm tải xong trang tổng quan. Hãy tham khảo tài liệu tham khảo về sự kiện để nghe các sự kiện khác.

Thao tác gửi

Hãy tiếp tục với mã trước đó của chúng tôi. Để gửi các hành động đến iframe, chúng ta gọi phương thức connect() của trình tạo nhúng sau khi gọi phương thức build() để khởi chạy tính năng gửi và nhận tin nhắn bằng iframe.

...  
  .connect()
  .then((embed) => {
     embed.send(‘dashboard:run');
   })
  .catch(console.error(‘Something errored!')
...

Hãy cùng tìm hiểu mã mẫu này:

  1. Chúng ta gọi phương thức connect() trả về một lời hứa (promise). Lời hứa phân giải thành một đối tượng nhúng đại diện cho iframe được nhúng sau khi khởi chạy cơ chế gửi và nhận thông báo.
  2. Chúng ta gọi phương thức send() trên đối tượng nhúng để gửi một thao tác dashboard:run. Hãy xem tài liệu tham khảo về thao tác để biết các thao tác khác mà bạn có thể gửi.
  3. Chúng ta thêm phương thức catch() phòng trường hợp có lỗi trong quá trình khởi chạy.

Kiểm tra lần cuối

Với các bước trước đó, mã của bạn bây giờ sẽ có dạng như sau:

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

LookerEmbedSDK.createDashboardWithId(12345)
  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .on('dashboard:run:complete',() => console.log(‘Embedded dashboard loaded!')
  .build()
  .connect()
  .then((embed) => {
     embed.send(‘dashboard:run');
   })
  .catch(console.error(‘Something errored!')

Giờ đây, bạn có thể giao tiếp với trang tổng quan Looker đã nhúng!

5. Thông tin khác

Xin chúc mừng! Giờ đây, bạn có thể sử dụng Nhúng SDK để nhúng trang tổng quan Looker một cách riêng tư cũng như gửi và nhận tin nhắn từ iframe. Hãy tham khảo các tài nguyên sau để biết thêm thông tin: