Você está visualizando a documentação do Looker. Para acessar a documentação do Looker Studio, acesse https://support.google.com/looker-studio.

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 ela. 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ê poderá 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:
Navegue até 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 exige que o recurso de laboratórios Importação de projeto local esteja ativado. Caso contrário, o validador do LookML vai retornar um aviso na próxima etapa deste procedimento.
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 exige 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 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.