如何透過 Embed SDK 嵌入 Looker

1. 事前準備

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

必要條件

  • 具備執行中的 Looker 執行個體
  • 取得要嵌入網頁應用程式或網頁的 Looker 資訊主頁
  • 熟悉 JavaScript 和 JavaScript 的承諾。

課程內容

  • 如何使用 Embed SDK 私密嵌入 Looker 內容
  • 如何使用 Embed SDK 收發內嵌 Looker 內容的訊息 (動作和事件)

軟硬體需求

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

2. 準備事項

您必須備妥 HTML 和 Looker 執行個體，才能嵌入 Embed SDK。

新增嵌入 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

請先匯入，然後使用 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 上設定頁框邊框屬性。這是在 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 收到的訊息呼叫為事件。

接收事件

接著使用先前的程式碼。如要監聽事件，我們會先呼叫嵌入建構工具的 on() 方法，再呼叫 build() 方法。

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

這裡會呼叫 on() 方法，以便為建立 iframe 時來自 iframe 的 dashboard:run:complete 事件設定事件監聽器。這個事件會在資訊主頁載入完成時通知我們。請查看事件參考資料，瞭解如何監聽其他事件。

傳送動作

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

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

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

  1. 我們呼叫了 connect() 方法，以傳回承諾。訊息傳送和接收機制初始化之後，承諾會解析為表示內嵌 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 收發訊息。詳情請參閱下列資源：