Cómo incorporar Looker con el Embed SDK

Cómo incorporar Looker con el Embed SDK

Acerca de este codelab

Última actualización: jul 28, 2023

Escrito por Jeremy Chang

1. Antes de comenzar

En este codelab, usaremos el SDK de Looker Embed 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

• Ten una instancia de Looker en ejecución
• Tener un panel de Looker que quieras incorporar en tu página web o aplicación 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 incorporado de Looker con el SDK de Embed

Requisitos

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

Nota: También puedes incorporar contenido de Looker sin el SDK de Looker Embed.

2. Preparaciones

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" />

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

Debes incluir el dominio de incorporación en la lista de entidades permitidas de 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 Lista de dominios incorporados en la lista de entidades permitidas, ingresa el dominio del incorporaciones. 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.

Nota: Puedes usar el comodín * en tu dominio. Por ejemplo, la entrada https://*.mycompany.com incluye https://analytics.mycompany.com y https://data.mycompany.com en la lista de entidades permitidas.

3. Construir 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')

Debes incluir el número de puerto en el dominio de la instancia de Looker si es necesario para llegar a la instancia de Looker desde clientes de navegador, p.ej., instance_name.looker.com:1919

Cómo crear el compilador de incorporaciones

Luego, determina el ID del panel de Looker que quieres 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 incorporaciones. Este método devolverá el compilador de incorporaciones.

LookerEmbedSDK.createDashboardWithId(12345)

Configura y compila el compilador de incorporaciones

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 de método createDashboardWithId() de la muestra de código anterior.

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

Cada método del compilador de incorporaciones muestra el mismo compilador, por lo que encadenamos las llamadas de los métodos. Analicemos 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 de borde de marco 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.

Nota: Consulta el archivo embed_builder.ts para conocer otros métodos definidos en el compilador de incorporaciones.

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 SDK de Embed.

4. Envía y recibe mensajes de incorporación

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

Recepción de 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 configurar un objeto de escucha de eventos en el evento dashboard:run:complete que proviene del iframe cuando se compila el iframe. El evento nos indicará cuando termine de cargarse el panel. Consulta la referencia del evento para escuchar otros eventos.

Acciones de envío

Continuemos con el código anterior. Para enviar acciones al iframe, llamamos al método connect() del compilador de incorporaciones 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.

Nota: El archivodashboard_client.ts también proporciona métodos auxiliares que llamarán al método send() con la acción deseada.

Debes llamar al método connect() para enviar acciones Y escuchar eventos. Si tu página web solo escucha eventos, debes llamar al método connect() para inicializar el mecanismo de envío y recepción de mensajes.

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')
  .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 incorporado de Looker.

5. Información adicional

¡Felicitaciones! Ahora puedes usar el SDK de Embed 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:

• Incorpora el repositorio del SDK para obtener más información sobre cómo incorporar Looker, en especial si quieres incorporar contenido de Looker con SSO.
• Referencia de eventos para todos los eventos disponibles y sus propiedades
• Referencia de acciones para todas las acciones disponibles y sus propiedades
• Prácticas recomendadas de seguridad para incorporar tu contenido de Looker