如何透過 Embed SDK 嵌入 Looker

1. 事前準備

在本程式碼研究室中，我們將使用 Looker 嵌入 SDK，在網頁中嵌入 Looker 資訊主頁。您將呼叫一系列 SDK 方法，自動建立 iframe、在其中嵌入 Looker 內容，並設定 iframe 與網頁之間的通訊。

必要條件

  • 擁有正在執行的 Looker 執行個體
  • 擁有要嵌入網頁應用程式或網頁的 Looker 資訊主頁
  • 熟悉 JavaScript 和 JavaScript Promise。

課程內容

  • 如何使用 Embed SDK 私下嵌入 Looker 內容
  • 如何使用 Embed SDK，透過內嵌 Looker 內容傳送及接收訊息 (動作和事件)

軟硬體需求

  • 可存取前端程式碼的 HTML 和 JavaScript
  • Looker 執行個體的管理員嵌入設定存取權

2. 準備工作

如要使用 Embed SDK 嵌入，請先準備好 HTML 和 Looker 執行個體。

新增嵌入 iframe 的容器元素

在網頁的 HTML 中，建立 div 元素，並定義該元素的 id 屬性。

<div id="looker-embed" />

在 Looker 執行個體中，將嵌入內容的網域加入許可清單

您需要在 Looker 執行個體中，將嵌入內容的網域加入許可清單。

找出網頁的網域，該網頁會代管您嵌入的 Looker 內容。假設網頁網址為 https://mywebsite.com/with/embed，則網頁網域為 https://mywebsite.com。

前往 Looker 執行個體「管理」部分的「嵌入」頁面。https://your_instance.looker.com/admin/embed

在「嵌入網域許可清單」欄位中，輸入嵌入的網域。輸入完畢後，按下 Tab 鍵，網域就會顯示在方塊中。請勿加入結尾斜線 /。

選取「更新」按鈕。

3. 建構嵌入內容

現在來建立及設定 SDK 的嵌入建構工具，以「建構」嵌入的 Looker 內容。

初始化 SDK

請先匯入 SDK，然後使用 Looker 執行個體的網域初始化 SDK。

// Import the Embed SDK as LookerEmbedSDK

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

建立嵌入內容建構工具

接著，找出要嵌入的 Looker 資訊主頁 ID。如果資訊主頁位於 instance_name.looker.com/dashboard/12345，則資訊主頁的 ID 為 12345。

使用資訊主頁 ID 呼叫 SDK createDashboardWithId() 方法，建立嵌入建構工具。這個方法會傳回嵌入建構工具。

LookerEmbedSDK.createDashboardWithId(12345)

設定及建構嵌入式建構工具

現在，請先設定嵌入產生器，再指示產生嵌入的 iframe。在先前程式碼範例的 createDashboardWithId() 方法呼叫後，直接加入下列程式碼範例。

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

嵌入內容建構工具的每個方法都會傳回嵌入內容建構工具本身，因此我們將方法呼叫鏈結在一起。接著來看看每種方法：

  1. appendTo() 方法會決定 iframe 的父項元素。我們傳入先前在「準備」步驟中定義的 HTML 元素 ID。
  2. withFrameBorder() 方法會設定 iframe 的 frame-border 屬性。這是定義 iframe 上 HTML 屬性的其中一種方法。
  3. build() 方法會使用設定的 HTML 屬性建立 iframe

最後檢查

完成上述步驟後，程式碼應如下所示：

// Import the Embed SDK as LookerEmbedSDK

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

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

現在，您已使用 Embed SDK 將 Looker 資訊主頁嵌入網頁中！

4. 收發嵌入訊息

現在，讓我們看看如何使用 Embed SDK，透過嵌入的 Looker 內容傳送及接收訊息。我們將應用程式傳送至 iframe 的訊息稱為「動作」，而應用程式從 iframe 接收的訊息則稱為「事件」。

接收事件

我們將沿用先前的程式碼。如要監聽事件，請在呼叫 build() 方法前，呼叫嵌入建構工具的 on() 方法。

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

這裡會呼叫 on() 方法，在建構 iframe 時，於來自 iframe 的 dashboard:run:complete 事件上設定事件監聽器。這個事件會告知我們資訊主頁何時載入完成。如要監聽其他事件，請參閱事件參考資料。

傳送動作

我們繼續使用先前的程式碼。如要將動作傳送至 iframe，請在呼叫 build() 方法，透過 iframe 初始化訊息傳送和接收後，呼叫嵌入建構工具的 connect() 方法。

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

讓我們逐步瞭解這個程式碼範例：

  1. 我們呼叫 connect() 方法，該方法會傳回 Promise。初始化訊息傳送和接收機制後，這個 Promise 會解析為代表內嵌 iframe 的嵌入物件。
  2. 我們對嵌入物件呼叫 send() 方法，傳送 dashboard:run 動作。如要傳送其他動作，請參閱動作參考資料。
  3. 我們新增 catch() 方法，以防初始化期間發生任何錯誤。

最後檢查

完成上述步驟後，您的程式碼應如下所示：

// 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!')

您現在可以與內嵌的 Looker 資訊主頁通訊了！

5. 其他資訊

恭喜！您現在可以使用 Embed SDK 私下嵌入 Looker 資訊主頁，並透過 iframe 收發訊息。如需更多資訊，請參閱下列資源：