Esta página foi traduzida pela API Cloud Translation.

Criar uma extensão do Looker

Esta página descreve como gerar e configurar um modelo de extensão básico do Looker, ao qual pode adicionar funcionalidades.

A criação de uma nova extensão do Looker requer que execute as seguintes tarefas:

Configure um projeto do LookML que inclua um ficheiro de modelo e um ficheiro de manifesto do projeto, e que esteja ligado ao Git
Gere os ficheiros de modelos de extensões

Os procedimentos seguintes mostram como criar os elementos anteriores.

Configurar o Looker para uma extensão

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

Crie um projeto em branco para a sua extensão.
No novo projeto, crie um ficheiro de modelo usando o + na parte superior do navegador de ficheiros no IDE do Looker.
O novo ficheiro do modelo é gerado com um parâmetro connection e um parâmetro include:

Substitua connection_name no parâmetro connection pelo nome de uma ligação à base de dados válida na sua instância. A extensão requer um ficheiro de modelo válido porque os dados de autorizações do Looker são acedidos através do modelo LookML. Para gerir o acesso à sua extensão, tem de associar a extensão a um modelo LookML válido e conceder autorizações aos utilizadores para acederem a esse modelo. Quando terminar de editar o ficheiro de modelo, clique em Guardar alterações.

Uma vez que a sua extensão não requer um ficheiro de visualização, elimine o parâmetro include: "/views/*.view.lkml" ou adicione um caráter # no início da linha para tornar a linha um comentário. Se deixar o parâmetro include: "/views/*.view.lkml" tal como está, o validador do LookML gera erros.
Crie um ficheiro de manifesto do projeto usando o + na parte superior do explorador de ficheiros no IDE do Looker.

Inicialmente, o ficheiro de manifesto do projeto está vazio, mas, mais tarde, neste procedimento, vai copiar os conteúdos gerados para o ficheiro de manifesto do projeto, que vai incluir o parâmetro application. O parâmetro application atribui uma etiqueta à extensão, indica ao Looker onde encontrar o JavaScript da extensão e fornece uma lista de autorizações para a extensão. As autorizações definem os recursos do Looker aos quais a extensão pode aceder. A extensão não vai poder aceder a um recurso do Looker, a menos que esse recurso esteja listado nas concessões.

No entanto, pode deixar o ficheiro do manifesto tal como está, uma vez que vai copiar o resto do conteúdo do ficheiro para o mesmo mais tarde neste processo.
Configure uma ligação Git para o seu novo projeto.

Pode aceder à página Configurar Git clicando no botão Configurar Git no canto superior direito do IDE do Looker ou usando a página Configuração do projeto, conforme descrito na página de documentação Configurar e testar uma ligação Git.

Depois de configurar o projeto para a extensão e associá-lo ao Git, pode gerar os ficheiros do modelo de extensão.

Gerar os ficheiros de modelos de extensões

Existem duas formas de gerar ficheiros de código de modelos de extensões:

Usar o utilitário create-looker-extension
Clonar um repositório Git de um modelo de extensão

Ambos os processos requerem o Yarn, por isso, certifique-se de que tem o Yarn instalado.

Usar o `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 ficheiros e dependências de extensão necessários. Em seguida, pode usar isto como ponto de partida e adicionar código e funcionalidades adicionais 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 sua extensão:
```
yarn create looker-extension <extension_name>
```
Confirme o nome da extensão ou indique um nome diferente e, em seguida, selecione o idioma e a estrutura que quer usar para criar a extensão:

Em seguida, o utilitário create-looker-extension usa a estrutura especificada para preencher um modelo base e coloca todos os ficheiros gerados num novo diretório que usa o nome da extensão:
Navegue para o diretório que foi criado para a sua extensão:
```
cd <extension_name>
```
Instale as dependências da extensão:
```
yarn install
```
Inicie o servidor de programação:
```
yarn develop
```
A extensão está agora em execução e a publicar o JavaScript localmente em http://localhost:8080/bundle.js.
No diretório da extensão, encontra-se o ficheiro manifest.lkml. Copie o conteúdo deste ficheiro.
No seu projeto LookML, cole o conteúdo de manifest.lkml no ficheiro de manifesto do projeto:

Clique em Guardar alterações para guardar o ficheiro de manifesto do projeto.

Nota: o conteúdo do ficheiro manifest.lkml gerado inclui o project_name parâmetro LookML. O parâmetro project_name é usado pela funcionalidade de importação de projetos locais. Consulte a página de documentação Importar ficheiros de outros projetos para ver detalhes sobre a importação de projetos.
No IDE do LookML, clique em Validar LookML, de seguida, clique em Confirmar alterações e enviar e, por fim, clique em Implementar na produção.
Atualize o Looker através da função de atualização do navegador.

Na secção Aplicações do menu principal do Looker, é apresentado o nome da nova extensão.
Selecione a extensão na secção Aplicações para ver o resultado da extensão.

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 apresentados, navegue para o repositório desse exemplo e siga as instruções apresentadas.

Este procedimento requer o Yarn, por isso, certifique-se de que tem o Yarn instalado.

Na linha de comandos local, use o seguinte comando para clonar o repositório Git:
```
git clone git@github.com:looker-open-source/extension-examples.git
```
Navegue para o diretório que contém o modelo que quer instalar no seu sistema. Neste exemplo, vamos usar a extensão "Hello World" do React e JavaScript:
```
cd extension-examples/react/javascript/helloworld-js
```
Instale as dependências da extensão:
```
yarn install
```
Pode ter de atualizar a versão do Node ou usar um gestor de versões do Node para alterar a versão do Node.
No diretório da extensão, encontra-se o ficheiro manifest.lkml. Copie o conteúdo deste ficheiro.
No seu projeto LookML, cole o conteúdo de manifest.lkml no ficheiro de manifesto do projeto:

Clique em Guardar alterações para guardar o ficheiro de manifesto do projeto.
No canto superior direito do IDE do LookML, clique em Validar LookML, de seguida, clique em Confirmar alterações e enviar e, por fim, clique em Implementar na produção.
No terminal, inicie o servidor de desenvolvimento:
```
yarn develop
```
A extensão está agora em execução e a publicar o JavaScript num servidor de desenvolvimento local especificado no parâmetro url do ficheiro de manifesto: http://localhost:8080/bundle.js.
Atualize o Looker através da função de atualização do navegador.

Na secção Aplicações do menu principal do Looker, é apresentado o nome da nova extensão, que é determinado pelo parâmetrolabel no ficheiro de manifesto do projeto.
Selecione a extensão na secção Aplicações para ver o resultado da extensão.

Modificar a extensão

Depois de criar a extensão básica, pode modificá-la ou adicionar-lhe código modificando o ficheiro JavaScript ou TypeScript adequado.

O diretório src no diretório da extensão contém o ficheiro de origem onde pode adicionar código. No exemplo anterior, para o modelo "Hello World" do React e JavaScript, o ficheiro chama-se HelloWorld.js. Modificar ou adicionar código a esse ficheiro modifica ou adiciona funções à extensão.

Segue-se o resultado do ficheiro HelloWorld.js 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, pode alterar o resultado de texto da extensão alterando o texto na linha:

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

Tenha em atenção que, à medida que adiciona funcionalidades, pode ter de modificar as autorizações concedidas à sua extensão no parâmetro application no ficheiro de manifesto do projeto.