Introdução à criação de uma extensão do Looker

Nesta página, descrevemos como gerar e configurar um modelo de extensão básico do Looker em que você pode adicionar funcionalidades.

Para criar uma nova extensão do Looker, é necessário realizar as seguintes tarefas:

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

Os procedimentos a seguir mostram como criar os elementos acima.

Como configurar o Looker para uma extensão

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

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

2. No seu novo projeto, crie um arquivo de modelo usando o + na parte superior 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 instância. A extensão requer um arquivo de modelo válido porque os dados de permissões do Looker são acessados por meio do modelo LookML. Para gerenciar o acesso à extensão, é preciso associá-la a um modelo LookML válido e conceder permissões aos usuários de acesso a esse modelo. Quando terminar de editar o arquivo do modelo, clique em Salvar alterações.

   Como sua extensão não requer um arquivo de visualização, exclua o parâmetro include: "/views/*.view.lkml" ou adicione um caractere # no início da linha para que ela seja um comentário. Se o parâmetro include: "/views/*.view.lkml" não for alterado, o validador LookML vai gerar erros.

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

   Inicialmente, o arquivo de manifesto do projeto estará vazio. No entanto, mais adiante neste procedimento, você copiará o conteúdo gerado para o arquivo de manifesto do projeto que incluirá o parâmetro application. O parâmetro application dá à extensão um rótulo, informa ao Looker onde encontrar a extensão JavaScript e fornece uma lista de direitos para a 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 o recurso esteja listado nos direitos.

   Você pode deixar o arquivo de manifesto como está por enquanto, já que o restante do conteúdo do arquivo será copiado posteriormente nesse processo.

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

   Acesse a página Configure Git clicando no botão Configure Git no canto superior direito do Looker IDE ou usando a página Project Configuration conforme descrito na página de documentação Como configurar e testar uma conexão Git.

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

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 modelos de extensão

Ambos os processos exigem Yarn, então verifique se o Yarn 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. Você pode usar isso como ponto de partida e adicionar outras funcionalidades e códigos para concluir sua extensão.

Para gerar o modelo de extensão, faça o seguinte:

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

   yarn create looker-extension <extension_name>
   

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

   

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

   

3. Navegue até 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. O diretório manifest.lkml está no diretório de extensão. Copie o conteúdo deste arquivo.

7. No projeto 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 ambiente de desenvolvimento integrado do LookML, clique em Validar LookML e em Commit Changes & Push. Em seguida, clique em Deploy to Production.

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

   No menu Procurar do Looker, você verá o nome da sua nova extensão:

   

10. Selecione a extensão no menu Procurar para ver a saída dela.

Se o administrador tiver ativado o recurso do Labs Navegação aprimorada, as extensões serão listadas na seção Aplicativos do novo painel de navegação à esquerda.

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

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

Esse procedimento requer o Yarn (em inglês), então verifique se o Yarn está instalado.

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

   git clone [e-mail]: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, usaremos a extensão React e JavaScript "Hello World":

   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 alterar a versão do Node.

4. O diretório manifest.lkml está no diretório de extensão. Copie o conteúdo deste arquivo.

5. No projeto 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 Validate LookML e em Commit Changes & Push. Em seguida, clique em Deploy to Production.

7. No seu 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.

   No menu Procurar do Looker, você verá o nome da sua nova extensão, que é determinada pelo parâmetro label no arquivo de manifesto do seu projeto:

   

9. Selecione a extensão no menu Procurar para ver a saída dela.

Se o administrador tiver ativado o recurso do Labs Navegação aprimorada, as extensões serão listadas na seção Aplicativos do novo painel de navegação à esquerda.

Como modificar a extensão

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

O diretório src, que está no diretório da extensão, contém o arquivo de origem em que você pode adicionar código. No exemplo acima, para o modelo React e JavaScript "Hello World", o arquivo é chamado de HelloWorld.js. Quando você modifica ou adiciona código a esse arquivo, isso é modificado ou adicionado à função da extensão.

Veja abaixo 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 acima, é possível mudar a saída do texto da extensão alterando o texto na linha setMessage('Hello, ${me.display_name}').

Lembre-se de que, ao adicionar funcionalidades, talvez você precise modificar os direitos concedidos à extensão no parâmetro application no arquivo de manifesto do projeto.