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ó một trang tổng quan Looker mà bạn muốn nhúng vào ứng dụng web hoặc trang web
  • Làm quen với JavaScript và lời hứa 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) 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
  • 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. 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 được nhúng

Bên 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 trên phần tử đó.

<div id="looker-embed" />

Thêm miền của phần nhúng vào danh sách cho phép trong thực thể Looker

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

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 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. 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 để "tạo" nội dung Looker được nhúng của bạn.

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 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 nằm ở instance_name.looker.com/dashboard/12345, thì mã nhận dạng của trang tổng quan là 12345.

Gọi phương thức createDashboardWithId() của SDK bằng mã trang tổng quan để tạo 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 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 nhúng sẽ trả về chính trình tạo nhúng đó, vì vậy, chúng ta sẽ nối các lệnh gọi phương thức lại 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 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 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 cuối cùng

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 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 cùng xem mã trước đó. Để 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!')
...

Tại đây, chúng ta gọi phương thức on() để đặ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 tham khảo tài liệu tham khảo về sự kiện để nghe các sự kiện khác.

Gửi hành động

Hãy tiếp tục với mã trước đó. Để gửi thao tác đế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 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 cùng xem qua 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 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 cuối cùng

Với các bước trước, mã của bạn hiệ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')
  .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 SDK nhúng để 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: