Como criar uma extensão do Looker

Esta página descreve como gerar e configurar um modelo básico de extensão do Looker, ao qual você pode adicionar funcionalidades.

Para criar uma nova extensão do Looker, você precisa realizar as seguintes tarefas:

Os procedimentos a seguir mostram como criar os elementos anteriores.

Como configurar o Looker para uma extensão

Cada extensão do Looker exige um projeto do LookML que inclui um arquivo modelo e um arquivo de manifesto para ser executado.

  1. Crie um projeto em branco para sua extensão.

  2. No novo projeto, crie um arquivo de modelo usando o + na parte de cima do navegador de arquivos no ambiente de desenvolvimento integrado do Looker.

  3. O novo arquivo de modelo é gerado com um parâmetro connection e um parâmetro include:

    Substitua connection_name no parâmetro connection pelo nome de uma conexão de banco de dados válida na sua instância. A extensão exige um arquivo de modelo válido porque os dados de permissões do Looker são acessados pelo modelo do LookML. Para gerenciar o acesso à extensão, associe-a a um modelo do LookML válido e conceda permissões aos usuários para acessar esse modelo. Quando terminar de editar o arquivo de modelo, clique em Salvar alterações.

    Como a extensão não exige um arquivo de visualização, exclua o parâmetro include: "/views/*.view.lkml" ou adicione um caractere # no início da linha para torná-la um comentário. Deixar o parâmetro include: "/views/*.view.lkml" como está vai fazer com que o validador do LookML gere erros.

  4. Crie um arquivo de manifesto do projeto usando + na parte de cima do navegador de arquivos no ambiente de desenvolvimento integrado do Looker.

    O arquivo de manifesto do projeto vai estar vazio inicialmente, mas mais adiante neste procedimento você vai copiar o conteúdo gerado para o arquivo de manifesto do projeto, que vai incluir o parâmetro application. O parâmetro application atribui um rótulo à extensão, informa ao Looker onde encontrar o JavaScript da extensão e fornece uma lista de direitos para ela. Os direitos definem os recursos do Looker que a extensão pode acessar. A extensão não poderá acessar um recurso do Looker, a menos que ele esteja listado nos direitos.

    No entanto, você pode deixar o arquivo de manifesto como está por enquanto, já que vai copiar o restante do conteúdo do arquivo mais tarde neste processo.

  5. Configure uma conexão do Git para o novo projeto.

    Para acessar a página Configurar Git, clique no botão Configurar Git no canto superior direito do ambiente de desenvolvimento integrado do Looker ou use a página Configuração do projeto, conforme descrito na página de documentação Como configurar e testar uma conexão do Git.

Depois de configurar o projeto para sua extensão e conectá-lo ao Git, você estará pronto para gerar os arquivos de modelo de extensão.

Como gerar os arquivos de modelo da extensão

Há duas maneiras de gerar arquivos de código de modelo de extensão:

Ambos os processos exigem o Yarn. Portanto, verifique se ele está instalado.

Como usar create-looker-extension para criar um modelo de extensão

O utilitário create-looker-extension cria uma extensão básica do Looker que inclui todos os arquivos e dependências de extensão necessários. Você pode usar isso como ponto de partida e adicionar mais código e funcionalidades para concluir a extensão.

Para gerar o modelo de extensão:

  1. Execute o utilitário create-looker-extension, substituindo <extension_name> pelo nome da extensão:

    yarn create looker-extension <extension_name>

  2. Confirme o nome da extensão ou informe um nome diferente e selecione a linguagem e o framework que você quer usar para criar a extensão:

    O utilitário create-looker-extension vai usar o framework especificado para preencher um modelo básico e colocar todos os arquivos gerados em um novo diretório que usa o nome da extensão:

  3. Acesse o diretório criado para sua extensão:

    cd <extension_name>

  4. Instale as dependências da extensão:

    yarn install

  5. Inicie o servidor de desenvolvimento:

    yarn develop

    A extensão agora está em execução e exibindo o JavaScript localmente em http://localhost:8080/bundle.js.

  6. No diretório da extensão, está o arquivo manifest.lkml. Copie o conteúdo desse arquivo.

  7. No projeto do LookML, cole o conteúdo de manifest.lkml no arquivo de manifesto do projeto:

    Clique em Save Changes para salvar o arquivo de manifesto do projeto.

  8. No IDE do LookML, clique em Validar LookML, depois em Fazer commit de alterações e enviar e, por fim, em Implantar na produção.

  9. Atualize o Looker usando a função de atualização do navegador.

    Na seção Aplicativos do menu principal do Looker, você vai encontrar o nome da nova extensão.

  10. Selecione sua extensão na seção Aplicativos para conferir a saída dela.

Como clonar um repositório Git para criar um modelo de extensão

O Looker mantém um repositório do Git com vários modelos de extensão em https://github.com/looker-open-source/extension-examples. Se quiser usar um dos exemplos, navegue até o repositório correspondente e siga as instruções mostradas a seguir.

Este procedimento requer o Yarn, portanto, verifique se você tem o Yarn instalado.

  1. Na linha de comando local, use o seguinte comando para clonar o repositório Git:

    git clone git@github.com:looker-open-source/extension-examples.git

  2. Navegue até o diretório que contém o modelo que você quer instalar no sistema. Neste exemplo, vamos usar a extensão "Hello World" do React e do JavaScript:

    cd extension-examples/react/javascript/helloworld-js

  3. Instale as dependências da extensão:

    yarn install

    Talvez seja necessário atualizar a versão do Node ou usar um gerenciador de versões do Node para mudar a versão do Node.

  4. No diretório de extensão, está o arquivo manifest.lkml. Copie o conteúdo desse arquivo.

  5. No projeto do LookML, cole o conteúdo de manifest.lkml no arquivo de manifesto do projeto:

    Clique em Salvar mudanças para salvar o arquivo de manifesto do projeto.

  6. No canto superior direito do LookML IDE, clique em Validar LookML e depois em Confirmar alterações e Envie por push e depois clique em Implantar na produção.

  7. No terminal, inicie o servidor de desenvolvimento:

    yarn develop

    A extensão agora está em execução e exibindo o JavaScript em um servidor de desenvolvimento local especificado no parâmetro url do arquivo de manifesto: http://localhost:8080/bundle.js.

  8. Atualize o Looker usando a função de atualização do navegador.

    Na seção Aplicativos do menu principal do Looker, você vai encontrar o nome da sua nova extensão, que é determinado pelo parâmetro label no arquivo de manifesto do projeto.

  9. Selecione sua extensão na seção Applications para ver a saída dela.

Como modificar a extensão

Depois de criar a extensão básica, você poderá modificar ou adicionar código a ela modificando o arquivo JavaScript ou TypeScript apropriado.

O diretório src no diretório de extensão contém o arquivo de origem em que você pode adicionar código. No exemplo anterior, o arquivo do modelo "Hello World" do React e do JavaScript é chamado de HelloWorld.js. Modificar ou adicionar código a esse arquivo vai modificar ou adicionar à função da extensão.

Confira a seguir a saída do arquivo HelloWorld.js do React e do JavaScript:


import React, { useEffect, useState, useContext } from 'react'
import { Space, ComponentsProvider, Text } from '@looker/components'
import { ExtensionContext } from '@looker/extension-sdk-react'

export const HelloWorld = () => {
  const { core40SDK } = useContext(ExtensionContext)
  const [message, setMessage] = useState()

  useEffect(() => {
    const initialize = async () => {
      try {
        const value = await core40SDK.ok(core40SDK.me())
        setMessage(`Hello, ${value.display_name}`)
      } catch (error) {
        setMessage('Error occured getting information about me!')
        console.error(error)
      }
    }
    initialize()
  }, [])

  return (
    <>
      <ComponentsProvider>
        <Space p="xxxxxlarge" width="100%" height="50vh" around>
          <Text p="xxxxxlarge" fontSize="xxxxxlarge">
            {message}
          </Text>
        </Space>
      </ComponentsProvider>
    </>
  )
}

No exemplo anterior, você poderia alterar a saída de texto da extensão alterando o texto na linha:

setMessage(`Hello, ${value.display_name}`).

Ao adicionar funcionalidades, talvez seja necessário modificar os direitos concedidos à extensão no parâmetro application do arquivo de manifesto do projeto.