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 Embed SDK để nhúng một 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 để tự động tạo iframe, nhúng nội dung 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 phiên bản Looker đang chạy
  • Có một 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
  • Nắm vững JavaScript và các promise trong JavaScript.

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

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

Bạn cần có

  • Có quyền truy cập vào HTML và JavaScript của mã giao diện người dùng
  • 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

2. Chuẩn bị

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

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 một thuộc tính id trên phần tử đó.

<div id="looker-embed" />

Thêm miền của thành phần 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 thành phần nhúng vào danh sách cho phép trong phiên bản Looker của mình.

Xác định miền của trang web lưu trữ nội dung được nhúng trên Looker. Giả sử URL của trang là https://mywebsite.com/with/embed thì miền của trang đó 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 cho phép miền được nhúng, hãy nhập miền của nội dung được nhúng. Sau khi nhập, hãy nhấn phím Tab để miền xuất hiện trong một hộp. Đừng thêm dấu gạch chéo ở cuối /.

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

3. Tạo nội dung nhúng

Bây giờ, hãy tạo và định cấu hình trình tạo thành phần nhúng của SDK để "tạo" nội dung Looker được nhúng.

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.

// Import the Embed SDK as LookerEmbedSDK

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

Tạo trình tạo nội dung nhúng

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

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

LookerEmbedSDK.createDashboardWithId(12345)

Định cấu hình và tạo trình tạo thành phần nhúng

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

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

Mỗi phương thức của trình tạo nội dung nhúng đều trả về chính trình tạo nội dung nhúng, vì vậy, chúng ta sẽ 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 thức:

  1. Phương thức appendTo() xác định phần tử mẹ của iframe. Chúng ta sẽ truyền giá trị nhận dạng 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 frame-border trên iframe. Đây là một trong số các phương thức xác định 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

Vớ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 Embed SDK!

4. Gửi và nhận tin nhắn nhúng

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

Nhận sự kiện

Hãy sử dụng mã trước đó. Để theo dõi các sự kiện, chúng ta gọi phương thức on() của trình tạo thành phần 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() để đặt một 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 ta biết thời điểm trang tổng quan tải xong. Hãy xem tài liệu tham khảo về sự kiện để biết các sự kiện khác cần theo dõi.

Gửi hành động

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

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

Hãy xem qua mẫu mã này:

  1. Chúng ta gọi phương thức connect() để trả về một promise. Lệnh hứa này sẽ phân giải thành một đối tượng nhúng đại diện cho iframe được nhúng sau khi cơ chế gửi và nhận thông báo được khởi tạ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ề các thao tác để biết các thao tác khác cần gửi.
  3. Chúng ta thêm phương thức catch() trong trường hợp có lỗi xảy ra 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 được nhúng!

5. Thông tin khác

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