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

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

Sobre este codelab

Último jul. 28, 2023 atualizado

Escrito por Jeremy Chang

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 de SDK que vão criar automaticamente um iframe, incorporar o conteúdo do Looker a ele 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 para incorporar ao seu aplicativo da Web ou página da Web
• Familiarize-se com as promessas de JavaScript e 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 usando 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

Observação:também é possível incorporar conteúdo do Looker sem o SDK de incorporação 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

Você precisa autorizar o domínio da incorporação na 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 e o domínio dela seja https://mywebsite.com.

Acesse a página Incorporar na seção Administrador da 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.

Observação: você pode usar o caractere curinga * no seu domínio. Por exemplo, a entrada https://*.mycompany.com coloca https://analytics.mycompany.com e https://data.mycompany.com na lista de permissões.

3. Criar a incorporação

Agora vamos criar e configurar o builder 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')

Inclua o número da porta no domínio da instância do Looker se ele for necessário para acessá-la de clientes do navegador, por exemplo, instance_name.looker.com:1919

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

LookerEmbedSDK.createDashboardWithId(12345)

Configurar e criar o builder de incorporação

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

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

Cada método do builder de incorporação retorna o próprio builder de incorporação, então 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.

Observação:confira o arquivo embed_builder.ts para ver outros métodos definidos no builder de incorporação.

Verificação final

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

// Import the Embed SDK as LookerEmbedSDK

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

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

Agora o painel do Looker está incorporado à sua página da Web com o SDK de incorporação.

4. Enviar e receber mensagens incorporadas

Agora vamos conferir como enviar e receber mensagens com seu conteúdo incorporado do Looker usando o SDK de incorporação. Chamamos as mensagens que seu aplicativo envia para o iframe como ações e chamamos as mensagens que seu aplicativo recebe do iframe como eventos.

Receber eventos

Vamos trabalhar com o código anterior. Para detectar eventos, chamamos o método on() do builder 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 proveniente do iframe quando o iframe é criado. O evento nos informa quando o painel termina 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 builder de incorporação depois de chamar o método build() para inicializar o envio e o 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 para um objeto incorporado que representa o iframe incorporado após a inicialização do mecanismo de envio e recebimento de mensagens.
2. Chamamos o método send() no objeto incorporado 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.

Observação:o arquivodashboard_client.ts também fornece métodos auxiliares que chamarão o método send() com a ação desejada.

Chame o método connect() para enviar ações E detectar eventos. Se a página da Web detectar apenas eventos, ainda será preciso chamar o método connect() para inicializar o mecanismo de envio e recebimento de mensagens.

Verificação final

Com as etapas anteriores, o 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:

• Repositório do SDK de incorporação para mais informações sobre como incorporar o Looker, principalmente se você quiser Incorporar SSO para o conteúdo do Looker.
• Referência de eventos para todos os eventos disponíveis e suas propriedades
• Referência de ações para todas as ações disponíveis e as respectivas propriedades
• Práticas recomendadas de segurança para incorporar o conteúdo do Looker