Esta página foi traduzida pela API Cloud Translation.

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:

Configurar 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

As extensões do Looker exigem um projeto do LookML que inclua um arquivo de modelo e um arquivo de manifesto para serem executadas.

Crie um projeto em branco para a extensão.
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.
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 à sua extensão, você precisa 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 Salvar alterações.

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 torná-la um comentário. Deixar o parâmetro include: "/views/*.view.lkml" como está fará com que o validador do LookML gere erros.
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 vazio no início, 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 a extensão. Os direitos definem os recursos do Looker que a extensão pode acessar. A extensão não vai conseguir 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.
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 Looker IDE ou use a página Project Configuration, 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 da 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 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:

Execute o utilitário create-looker-extension, substituindo <extension_name> pelo nome da extensão:
```
yarn create looker-extension <extension_name>
```
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:
Acesse o diretório criado para sua extensão:
```
cd <extension_name>
```
Instale as dependências da extensão:
```
yarn install
```
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.
No diretório de extensão, está o arquivo manifest.lkml. Copie o conteúdo desse arquivo.
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.

Observação: o conteúdo do arquivo manifest.lkml gerado inclui o parâmetro project_name do LookML. O parâmetro project_name é usado pelo recurso de importação de projetos locais. Consulte a página de documentação Como importar arquivos de outros projetos para saber mais sobre a importação de projetos.
No IDE do LookML, clique em Validar LookML, depois em Fazer commit de alterações e enviar e, em seguida, em Implantar para produção.
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.
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 você quiser usar um dos exemplos, navegue até o repositório desse exemplo e siga as instruções mostradas a seguir.

Este procedimento requer o Yarn. Portanto, verifique se ele está instalado.

Na linha de comando local, use o comando abaixo para clonar o repositório Git:
```
git clone git@github.com:looker-open-source/extension-examples.git
```
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
```
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.
No diretório de extensão, está o arquivo manifest.lkml. Copie o conteúdo desse arquivo.
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.
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.
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.
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, que é determinado pelo parâmetro label no arquivo de manifesto do projeto.
Selecione sua extensão na seção Aplicativos para conferir a saída dela.

Como modificar a extensão

Depois de criar a extensão básica, você pode 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 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 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 funcionalidades, talvez seja necessário modificar os direitos concedidos à extensão no parâmetro application do arquivo de manifesto do projeto.