Como incorporar o Looker com o SDK de incorporação

1. Antes de começar

Neste codelab, vamos usar o SDK de incorporação do Looker para incorporar um painel do Looker na sua página da Web. Você vai chamar uma série de métodos do SDK que vão criar automaticamente um iframe, incorporar seu conteúdo do Looker nele e configurar as comunicações entre o iframe e a página da Web.

Pré-requisitos

  • Ter uma instância do Looker em execução
  • Ter um painel do Looker que você quer incorporar no seu aplicativo da Web ou página da Web
  • Conhecer JavaScript e promessas de JavaScript.

O que você vai aprender

O que é necessário

  • Acesso ao HTML e JavaScript do código do front-end
  • Acesso às configurações de incorporação de administrador na sua instância do Looker

2. Preparações

Você precisa preparar sua instância HTML e do Looker antes de incorporar com o SDK de incorporação.

Adicionar o elemento de contêiner do iframe de incorporação

No HTML da sua página da Web, crie um elemento div e defina um atributo id nele.

<div id="looker-embed" />

Coloque o domínio da incorporação na lista de permissões da instância do Looker

Você precisa adicionar o domínio da incorporação à lista de permissões na sua instância do Looker.

Determine o domínio da página da Web que hospeda seu conteúdo incorporado do Looker. Se o URL da página da Web for https://mywebsite.com/with/embed, o domínio será https://mywebsite.com.

Acesse a página Incorporar na seção Administrador da sua instância do Looker. https://your_instance.looker.com/admin/embed

No campo Lista de permissões de domínio incorporado, insira o domínio da incorporação. Depois de digitar, pressione a tecla Tab para que o domínio apareça em uma caixa. Não inclua uma barra final /.

Selecione o botão Atualizar.

3. Criar a incorporação

Agora vamos criar e configurar o criador de incorporação do SDK para "criar" seu conteúdo incorporado do Looker.

Inicialize o SDK

Primeiro, importe e inicialize o SDK com o domínio da sua instância do Looker.

// Import the Embed SDK as LookerEmbedSDK

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

Criar o criador de incorporações

Em seguida, determine o ID do painel do Looker que você quer incorporar. Se o painel estiver em instance_name.looker.com/dashboard/12345, o ID dele será 12345.

Chame o método createDashboardWithId() do SDK com o ID do painel para criar um builder de incorporação. Esse método vai retornar o criador de incorporação.

LookerEmbedSDK.createDashboardWithId(12345)

Configurar e criar o criador de incorporações

Agora, vamos configurar o criador de incorporação antes de pedir para ele criar o iframe incorporado. Adicione o exemplo de código a seguir diretamente após a chamada de método createDashboardWithId() do exemplo de código anterior.

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

Cada método do criador de incorporação retorna o próprio criador, então encadeamos as chamadas de método. Vamos analisar cada método:

  1. O método appendTo() determina o elemento pai do iframe. Transmitimos o ID do elemento HTML que definimos anteriormente na etapa de preparação.
  2. O método withFrameBorder() define o atributo frame-border no iframe. Esse é um dos vários métodos que definem atributos HTML no iframe.
  3. O método build() cria o iframe com os atributos HTML configurados.

Verificação final

Com as etapas anteriores, o código vai ficar assim:

// Import the Embed SDK as LookerEmbedSDK

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

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

Agora você tem seu painel do Looker incorporado na página da Web com o SDK de incorporação.

4. Enviar e receber mensagens incorporadas

Agora vamos ver como enviar e receber mensagens com o conteúdo incorporado do Looker usando o SDK Embed. Chamamos as mensagens que seu aplicativo envia ao iframe de ações e as mensagens que seu aplicativo recebe do iframe de eventos.

Receber eventos

Vamos trabalhar com o código anterior. Para detectar eventos, chamamos o método on() do criador de incorporações antes de chamar o método build().

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

Aqui, chamamos o método on() para definir um listener de eventos no evento dashboard:run:complete do iframe quando ele é criado. O evento nos informa quando o painel termina de carregar. Confira a referência de eventos para outros eventos a serem detectados.

Enviar ações

Vamos continuar com o código anterior. Para enviar ações ao iframe, chamamos o método connect() do criador de incorporações depois de chamar o método build() para inicializar o envio e recebimento de mensagens com o iframe.

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

Vamos analisar este exemplo de código:

  1. Chamamos o método connect(), que retorna uma promessa. A promessa é resolvida em um objeto de incorporação que representa o iframe incorporado depois que o mecanismo de envio e recebimento de mensagens é inicializado.
  2. Chamamos o método send() no objeto de incorporação para enviar uma ação dashboard:run. Confira a referência de ações para ver outras ações que podem ser enviadas.
  3. Adicionamos um método catch() caso haja erros durante a inicialização.

Verificação final

Com as etapas anteriores, seu código vai ficar assim:

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

Agora você pode se comunicar com seu painel incorporado do Looker.

5. Informações adicionais

Parabéns! Agora você pode usar o SDK de incorporação para incorporar seu painel do Looker de forma privada e enviar e receber mensagens do iframe. Confira estes recursos para mais informações: