Como criar uma extensão do Looker

Nesta página, descrevemos 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:

• Configurar um projeto do LookML que inclui um arquivo de modelo e um arquivo de manifesto do projeto 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 inclui um arquivo de 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 superior do navegador de arquivos no ambiente de desenvolvimento integrado do Looker.

3. O novo arquivo de modelo é gerado com os parâmetros connection e 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 à sua extensão, é preciso associá-la a um modelo LookML válido e conceder aos usuários permissões para acessar esse modelo. Quando terminar de editar o arquivo de modelo, clique em Save Changes.

   Como sua 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 que seja um comentário. Deixar o parâmetro include: "/views/*.view.lkml" como está fará com que o validador de LookML gere 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 no arquivo de manifesto do projeto que incluirá o parâmetro application. O parâmetro application fornece à 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 só poderá acessar um recurso do Looker se ele estiver listado nos direitos.

   Você pode deixar o arquivo de manifesto por enquanto, já que copiará o restante do conteúdo do arquivo para ele posteriormente neste processo.

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

   Para acessar a página Configure Git, clique no botão Configure Git no canto superior direito do Looker IDE ou use 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ê estará pronto para gerar os arquivos de modelo de 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

Os dois processos exigem o Yarn, portanto, 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 códigos e funcionalidades 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 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 o framework 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 usa 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 veiculando o JavaScript localmente em http://localhost:8080/bundle.js.

6. O diretório manifest.lkml está no diretório da 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.

   Observação: o conteúdo do arquivo manifest.lkml gerado inclui o parâmetro project_name do LookML. O parâmetro project_name exige que o recurso de Importação de projetos local do Labs esteja ativado. Caso contrário, o validador LookML retornará um aviso na próxima etapa deste procedimento.

8. No IDE do LookML, clique em Validate LookML, Commit Changes & Push e 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 sua extensão no menu Procurar para ver a saída dela.

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

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ão em https://github.com/looker-open-source/extension-examples. Se você quiser usar um dos exemplos, navegue até o repositório desse exemplo e siga as instruções abaixo.

Esse procedimento requer o Yarn, portanto, verifique se o Yarn está instalado.

1. Na linha de comando local, use o seguinte comando 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 "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ão de Node para alterá-la.

4. O diretório manifest.lkml está no diretório da 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. Depois, 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 veiculando 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 nova extensão, que é determinada pelo parâmetro label no arquivo de manifesto do projeto:

   

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

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

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 da extensão contém o arquivo de origem em que você pode adicionar código. No exemplo acima, para o modelo "Hello World" do React e do JavaScript, o arquivo é chamado de HelloWorld.js. Modificar ou adicionar código a esse arquivo modifica ou acrescenta funções à extensão.

Veja abaixo uma 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, você pode alterar o texto da extensão alterando o texto na linha:

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

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