Como criar uma extensão do Looker

Nesta página, descrevemos como gerar e configurar um modelo básico de extensão do Looker para adicionar funcionalidades.

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

• Configure um projeto do LookML que inclua um arquivo de modelo e um arquivo de manifesto do projeto e que esteja conectado ao Git
• Gerar os arquivos de modelo de extensão

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 executada.

1. Crie um projeto em branco para a 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 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. Se o parâmetro include: "/views/*.view.lkml" não for alterado, o validador do LookML vai gerar erros.

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

   O arquivo de manifesto do projeto vai estar inicialmente vazio, 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 à extensão. 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 o restante do conteúdo do arquivo será copiado posteriormente 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 da extensão e conectá-lo ao Git, você estará pronto para gerar os arquivos de modelo da extensão.

Como gerar os arquivos de modelo de extensão

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

• Como usar o utilitário create-looker-extension
• Como clonar um repositório Git 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 necessários. Em seguida, você pode usar isso como ponto de partida e adicionar código e funcionalidade adicionais para concluir sua 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. Navegue até o diretório que foi 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 e depois em Confirmar alterações e Envie por push e depois clique 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 sua 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 da 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 Save Changes para salvar o arquivo de manifesto do projeto.

6. No canto superior direito do ambiente de desenvolvimento integrado do LookML, clique em Validar LookML, depois em Confirmar alterações e enviar e, por fim, 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 o código. No exemplo anterior, para o "Hello World" do React e do JavaScript, modelo, o arquivo se chamará HelloWorld.js. Modificar ou adicionar código a esse arquivo vai modificar ou adicionar à função da extensão.

Veja 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ê pode mudar a saída de texto da extensão alterando o texto na linha:

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

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