Как встроить Looker с помощью Embed SDK

1. Прежде чем начать

В этом практическом занятии мы будем использовать SDK Looker Embed для встраивания панели мониторинга Looker на вашу веб-страницу. Вы вызовете ряд методов SDK, которые автоматически создадут iframe, встроят в него контент Looker и установят связь между вашим iframe и веб-страницей.

Предварительные требования

  • Необходимо иметь запущенный экземпляр Looker.
  • У вас есть панель мониторинга Looker, которую вы хотите встроить в свое веб-приложение или веб-страницу?
  • Ознакомьтесь с JavaScript и промисами JavaScript.

Что вы узнаете

Что вам понадобится

  • Доступ к HTML и JavaScript вашему фронтенд-коду
  • Доступ к настройкам встраивания административной панели в вашем экземпляре Looker.

2. Подготовка

Перед встраиванием контента с помощью Embed SDK необходимо подготовить HTML-код и экземпляр Looker.

Добавьте элемент-контейнер для встраиваемого iframe.

В HTML-коде вашей веб-страницы создайте элемент div и задайте ему атрибут id .

<div id="looker-embed" />

Добавьте домен встраиваемого контента в список разрешенных в экземпляре Looker.

Вам необходимо добавить домен встраиваемого контента в список разрешенных в вашем экземпляре Looker.

Определите домен веб-страницы, на которой размещен встроенный контент Looker. Допустим, URL веб-страницы — https://mywebsite.com/with/embed , тогда домен веб-страницы — https://mywebsite.com .

Перейдите на страницу «Встраивание» в разделе администрирования вашего экземпляра Looker. https://your_instance.looker.com/admin/embed

В поле «Список разрешенных доменов для встраивания» введите домен встраиваемого элемента. После ввода нажмите клавишу Tab , чтобы домен отобразился в рамке. Не добавляйте косую черту / в конце.

Нажмите кнопку «Обновить» .

3. Создайте встраиваемый элемент.

Теперь давайте создадим и настроим конструктор встраивания SDK для "создания" встроенного контента Looker.

Инициализируйте SDK.

Сначала импортируйте, а затем инициализируйте SDK, указав домен вашего экземпляра Looker.

// Import the Embed SDK as LookerEmbedSDK

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

Создайте конструктор встраивания.

Далее определите идентификатор панели мониторинга Looker, которую вы хотите встроить. Если ваша панель мониторинга находится по адресу instance_name.looker.com/dashboard/12345 , то ее идентификатор — 12345 .

Для создания конструктора встраивания вызовите метод createDashboardWithId() из SDK, указав идентификатор панели мониторинга. Этот метод вернет созданный конструктор встраивания.

LookerEmbedSDK.createDashboardWithId(12345)

Настройте и соберите конструктор встраивания.

Теперь давайте настроим конструктор встраивания, прежде чем дать ему команду на создание встроенного iframe. Добавьте следующий пример кода непосредственно после вызова метода createDashboardWithId() из предыдущего примера кода.

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

Каждый метод конструктора встраивания возвращает сам конструктор, поэтому мы объединяем вызовы методов в цепочку. Давайте рассмотрим каждый метод:

  1. Метод appendTo() определяет родительский элемент iframe. Мы передаем в него идентификатор HTML-элемента, который мы определили ранее на этапе подготовки.
  2. Метод ` withFrameBorder() устанавливает атрибут `frame-border` для iframe. Это один из нескольких методов, определяющих HTML-атрибуты для iframe.
  3. Метод build() создает iframe с заданными HTML-атрибутами.

Окончательная проверка

После выполнения предыдущих шагов ваш код должен выглядеть следующим образом:

// Import the Embed SDK as LookerEmbedSDK

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

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

Теперь ваша панель управления Looker встроена в веб-страницу с помощью Embed SDK!

4. Отправка и получение встроенных сообщений.

Теперь давайте рассмотрим, как отправлять и получать сообщения с помощью встроенного контента Looker, используя Embed SDK. Сообщения, которые ваше приложение отправляет в iframe, мы называем действиями , а сообщения, которые ваше приложение получает от iframe, — событиями .

Получать события

Давайте поработаем с нашим предыдущим кодом. Чтобы прослушивать события, мы вызываем метод on() конструктора встраивания перед вызовом метода build() .

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

Здесь мы вызываем метод on() , чтобы установить обработчик события dashboard:run:complete , поступающего от iframe при его построении. Это событие сообщит нам, когда загрузка панели управления завершится. Для получения информации о других событиях, которые можно прослушивать, обратитесь к справочнику событий.

Отправить действия

Продолжим работу с предыдущим кодом. Чтобы отправлять действия в iframe, мы вызываем метод connect() конструктора встраивания после вызова метода build() для инициализации отправки и получения сообщений с iframe.

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

Давайте разберем этот пример кода:

  1. Мы вызываем метод connect() , который возвращает промис. Промис разрешается в объект embed, представляющий встроенный iframe, после инициализации механизма отправки и получения сообщений.
  2. Мы вызываем метод send() объекта embed, чтобы отправить действие 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. Для получения дополнительной информации ознакомьтесь с этими ресурсами: