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 e configurar a comunicação 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 para incorporar ao seu aplicativo da Web ou página da Web
  • Conheça o JavaScript e as promessas de JavaScript.

O que você vai aprender

  • Como incorporar de forma privada seu conteúdo do Looker com o SDK de incorporação.
  • Como enviar e receber mensagens (ações e eventos) com seu conteúdo incorporado do Looker com o SDK de incorporação

O que é necessário

  • Acesso ao HTML e JavaScript do código de front-end
  • Acesso às configurações de incorporação do 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 incorporado

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

<div id="looker-embed" />

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

É necessário incluir o domínio da incorporação na lista de permissões da sua instância do Looker.

Determine o domínio da página da Web que hospeda o conteúdo incorporado do Looker. Digamos que o URL da página da Web seja https://mywebsite.com/with/embed. O domínio da página da Web é https://mywebsite.com.

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

No campo Lista de permissões do domínio incorporado, digite o domínio da incorporação. Depois de digitá-lo, 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.

Inicializar 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 builder de incorporação

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 builder de incorporação

Agora, vamos configurar o criador de incorporação antes de criar o iframe incorporado. Adicione o exemplo de código abaixo diretamente após a chamada do 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 de incorporação. Por isso, encadeamos as chamadas de método. Vamos analisar cada método:

  1. O método appendTo() determina o elemento pai do iframe. Passamos o ID do elemento HTML definido 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 o painel do Looker incorporado à sua 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 seu conteúdo incorporado do Looker usando o SDK de incorporação. Chamamos as mensagens que seu app envia para o iframe de ações e as mensagens que seu app 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ção 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 vindo do iframe quando ele é criado. O evento vai informar quando o painel terminar de carregar. Confira a referência de eventos para outros eventos que você pode ouvir.

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ção 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 examinar 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 incorporado para enviar uma ação dashboard:run. Consulte a referência de ações para conferir 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 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 é possível se comunicar com o 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: