Cómo incorporar Looker con el Embed SDK

Cómo incorporar Looker con el SDK de incorporación

Acerca de este codelab

subjectÚltima actualización: jul 28, 2023
account_circleEscrito por Jeremy Chang

1. Antes de comenzar

En este codelab, usaremos el SDK de incorporación de Looker para incorporar un panel de Looker en tu página web. Llamarás a una serie de métodos del SDK que crearán automáticamente un iframe, incorporarán tu contenido de Looker en él y configurarán las comunicaciones entre tu iframe y tu página web.

Requisitos previos

  • Tener una instancia de Looker en ejecución
  • Tienes un panel de Looker que quieres incorporar en tu aplicación web o página web
  • Familiarízate con las promesas de JavaScript y JavaScript.

Qué aprenderás

  • Cómo incorporar de forma privada tu contenido de Looker con el SDK de Embed
  • Cómo enviar y recibir mensajes (acciones y eventos) con tu contenido de Looker incorporado con el SDK de incorporación

Requisitos

  • Acceder al código HTML y JavaScript de tu código de frontend
  • Acceso a la configuración de incorporación del administrador en tu instancia de Looker

2. Preparación

Debes preparar tu instancia de HTML y Looker antes de poder incorporarla con el SDK de Embed.

Agrega el elemento de contenedor del iframe incorporado

Dentro del código HTML de tu página web, crea un elemento div y define un atributo id en él.

<div id="looker-embed" />

Incluye en la lista de entidades permitidas el dominio de la incorporación en la instancia de Looker

Debes incluir en la lista de entidades permitidas el dominio de la incorporación en tu instancia de Looker.

Determinar el dominio de la página web que aloja tu contenido incorporado de Looker Supongamos que la URL de la página web es https://mywebsite.com/with/embed y, luego, el dominio de la página web es https://mywebsite.com.

Navega a la página Incorporar en la sección Administrador de tu instancia de Looker. https://your_instance.looker.com/admin/embed

En el campo Embedded Domain Allowlist, ingresa el dominio de la incorporación. Después de escribirlo, presiona la tecla Tab para que el dominio aparezca en un cuadro. No incluyas una barra diagonal /.

Selecciona el botón Actualizar.

3. Compila la incorporación

Ahora, crearemos y configuraremos el compilador de incorporaciones del SDK para “compilar” tu contenido incorporado de Looker.

Inicializa el SDK

Primero, importa y, luego, inicializa el SDK con el dominio de tu instancia de Looker.

// Import the Embed SDK as LookerEmbedSDK

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

Crea el compilador de incorporaciones

A continuación, determina el ID del panel de Looker que deseas incorporar. Si tu panel está en instance_name.looker.com/dashboard/12345, entonces el ID de tu panel es 12345.

Llama al método createDashboardWithId() del SDK con el ID del panel para crear un compilador de incorporación. Este método devolverá el compilador de incorporaciones.

LookerEmbedSDK.createDashboardWithId(12345)

Configura y compila el compilador de incorporación

Ahora, configuremos el compilador de incorporaciones antes de indicarle que compile el iframe incorporado. Agrega la siguiente muestra de código directamente después de la llamada al método createDashboardWithId() de la muestra de código anterior.

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

Cada método del compilador de incorporación muestra el compilador de incorporación, por lo que encadenamos las llamadas al método. Veamos cada método:

  1. El método appendTo() determina el elemento superior del iframe. Pasamos el ID del elemento HTML que definimos anteriormente en el paso de preparación.
  2. El método withFrameBorder() establece el atributo frame-border en el iframe. Este es uno de los varios métodos que definen atributos HTML en el iframe.
  3. El método build() crea el iframe con los atributos HTML configurados.

Comprobación final

Con los pasos anteriores, tu código debería verse de la siguiente manera:

// Import the Embed SDK as LookerEmbedSDK

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

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

Ahora tienes el panel de Looker incorporado en tu página web con el Embed SDK.

4. Cómo enviar y recibir mensajes incorporados

Ahora, veamos cómo enviar y recibir mensajes con tu contenido incorporado de Looker con el SDK de Embed. Llamamos a los mensajes que tu aplicación envía al iframe como acciones y a los mensajes que tu aplicación recibe del iframe como eventos.

Cómo recibir eventos

Trabajemos con el código anterior. Para escuchar eventos, llamamos al método on() del compilador de incorporaciones antes de llamar al método build().

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

Aquí llamamos al método on() para establecer un objeto de escucha de eventos en el evento dashboard:run:complete que proviene del iframe cuando se compila. El evento nos indicará cuando termine de cargarse el panel. Consulta la referencia de eventos para ver otros eventos que puedes escuchar.

Acciones de envío

Continuemos con nuestro código anterior. Para enviar acciones al iframe, llamamos al método connect() del compilador de incorporación después de llamar al método build() para inicializar el envío y la recepción de mensajes con el iframe.

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

Analicemos esta muestra de código:

  1. Llamamos al método connect(), que muestra una promesa. La promesa se resuelve en un objeto insertado que representa el iframe incorporado después de que se inicializa el mecanismo de envío y recepción de mensajes.
  2. Llamamos al método send() en el objeto incorporado para enviar una acción dashboard:run. Consulta la referencia de acciones para ver otras acciones que puedes enviar.
  3. Agregamos un método catch() en caso de que haya algún error durante la inicialización.

Verificación final

Con los pasos anteriores, tu código debería verse de la siguiente manera:

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

Ahora puedes comunicarte con tu panel de Looker incorporado.

5. Información adicional

¡Felicitaciones! Ahora puedes usar el SDK de incorporación para incorporar de forma privada tu panel de Looker y enviar y recibir mensajes desde el iframe. Consulta estos recursos para obtener más información: