Esta página se ha traducido con Cloud Translation API.

Crear una extensión de Looker

En esta página se describe cómo generar y configurar una plantilla de extensión básica de Looker, a la que puedes añadir funciones.

Para crear una extensión de Looker, debes realizar las siguientes tareas:

Configurar un proyecto de LookML que incluya un archivo de modelo y un archivo de manifiesto del proyecto, y que esté conectado a Git
Generar los archivos de plantilla de la extensión

En los siguientes procedimientos se muestra cómo crear los elementos anteriores.

Configurar Looker para una extensión

Para ejecutar cada extensión de Looker, se necesita un proyecto de LookML que incluya un archivo de modelo y un archivo de manifiesto.

Crea un proyecto en blanco para tu extensión.
En el nuevo proyecto, cree un archivo de modelo con el icono + situado en la parte superior del navegador de archivos del IDE de Looker.
El nuevo archivo de modelo se genera con un parámetro connection y un parámetro include:

Sustituye connection_name en el parámetro connection por el nombre de una conexión de base de datos válida de tu instancia. La extensión requiere un archivo de modelo válido porque se accede a los datos de permisos de Looker a través del modelo LookML. Para gestionar el acceso a tu extensión, debes asociarla a un modelo de LookML válido y conceder permisos a los usuarios para acceder a ese modelo. Cuando hayas terminado de editar el archivo de modelo, haz clic en Guardar cambios.

Como tu extensión no necesita un archivo de vista, elimina el parámetro include: "/views/*.view.lkml" o añade el carácter # al principio de la línea para convertirla en un comentario. Si dejas el parámetro include: "/views/*.view.lkml" tal cual, el validador de LookML generará errores.
Crea un archivo de manifiesto del proyecto con el + situado en la parte superior del explorador de archivos del IDE de Looker.

El archivo de manifiesto del proyecto estará vacío al principio, pero más adelante en este procedimiento copiarás el contenido generado en el archivo de manifiesto del proyecto, que incluirá el parámetro application. El parámetro application asigna una etiqueta a la extensión, indica a Looker dónde encontrar el JavaScript de la extensión y proporciona una lista de derechos para la extensión. Los derechos definen los recursos de Looker a los que puede acceder la extensión. La extensión no podrá acceder a un recurso de Looker a menos que ese recurso figure en los derechos.

De momento, puedes dejar el archivo de manifiesto tal cual, ya que copiarás el resto del contenido del archivo más adelante en este proceso.
Configura una conexión Git para tu nuevo proyecto.

Puede acceder a la página Configurar Git haciendo clic en el botón Configurar Git, situado en la esquina superior derecha del IDE de Looker, o bien usando la página Configuración del proyecto, tal como se describe en la página de documentación Configurar y probar una conexión Git.

Una vez que hayas configurado el proyecto de tu extensión y lo hayas conectado a Git, podrás generar los archivos de plantilla de la extensión.

Generar los archivos de plantilla de la extensión

Hay dos formas de generar archivos de código de plantilla de extensión:

Usar la utilidad create-looker-extension
Clonar un repositorio de Git de plantilla de extensión

Ambos procesos requieren Yarn, así que asegúrate de que lo tienes instalado.

Usar `create-looker-extension` para crear una plantilla de extensión

La utilidad create-looker-extension crea una extensión básica de Looker que incluye todos los archivos y las dependencias necesarios. Después, puedes usarlo como punto de partida y añadir código y funciones adicionales para completar tu extensión.

Para generar la plantilla de extensión, siga estos pasos:

Ejecuta la utilidad create-looker-extension y sustituye <extension_name> por el nombre de tu extensión:
```
yarn create looker-extension <extension_name>
```
Confirma el nombre de la extensión o indica otro y, a continuación, selecciona el idioma y el framework que quieras usar para crear la extensión:

La utilidad create-looker-extension usará el framework que hayas especificado para rellenar una plantilla base y colocará todos los archivos generados en un nuevo directorio que use el nombre de la extensión:
Ve al directorio que se ha creado para tu extensión:
```
cd <extension_name>
```
Instala las dependencias de la extensión:
```
yarn install
```
Inicia el servidor de desarrollo:
```
yarn develop
```
La extensión ahora se está ejecutando y ofrece el JavaScript de forma local en http://localhost:8080/bundle.js.
En el directorio de tu extensión se encuentra el archivo manifest.lkml. Copia el contenido de este archivo.
En tu proyecto de LookML, pega el contenido de manifest.lkml en el archivo de manifiesto del proyecto:

Haz clic en Guardar cambios para guardar el archivo de manifiesto del proyecto.

Nota: El contenido del archivo manifest.lkml generado incluye el project_name parámetro de LookML. El parámetro project_name lo usa la función Importación de proyectos locales. Consulta la página de documentación sobre importar archivos de otros proyectos para obtener más información sobre cómo importar proyectos.
En el IDE de LookML, haz clic en Validar LookML, luego en Confirmar cambios y enviar y, por último, en Implementar en producción.
Vuelve a cargar Looker con la función de recarga de tu navegador.

En la sección Aplicaciones del menú principal de Looker, verás el nombre de tu nueva extensión.
Selecciona tu extensión en la sección Aplicaciones para ver el resultado de la extensión.

Clonar un repositorio de Git para crear una plantilla de extensión

Looker mantiene un repositorio de Git con varias plantillas de extensiones en https://github.com/looker-open-source/extension-examples. Si quieres usar uno de los ejemplos, ve al repositorio correspondiente y sigue las instrucciones que se indican a continuación.

Este procedimiento requiere Yarn, así que asegúrate de que lo tienes instalado.

En la línea de comandos local, usa el siguiente comando para clonar el repositorio de Git:
```
git clone git@github.com:looker-open-source/extension-examples.git
```
Desplázate hasta el directorio que contenga la plantilla que quieras instalar en tu sistema. En este ejemplo, usaremos la extensión "Hello World" de React y JavaScript:
```
cd extension-examples/react/javascript/helloworld-js
```
Instala las dependencias de la extensión:
```
yarn install
```
Puede que tengas que actualizar tu versión de Node o usar un gestor de versiones de Node para cambiarla.
En el directorio de tu extensión se encuentra el archivo manifest.lkml. Copia el contenido de este archivo.
En tu proyecto de LookML, pega el contenido de manifest.lkml en el archivo de manifiesto del proyecto:

Haz clic en Guardar cambios para guardar el archivo de manifiesto del proyecto.
En la esquina superior derecha del IDE de LookML, haz clic en Validar LookML, luego en Confirmar cambios y enviar y, por último, en Implementar en producción.
En tu terminal, inicia el servidor de desarrollo:
```
yarn develop
```
La extensión ahora se está ejecutando y sirviendo el JavaScript en un servidor de desarrollo local especificado en el parámetro url del archivo de manifiesto: http://localhost:8080/bundle.js.
Vuelve a cargar Looker con la función de recarga de tu navegador.

En la sección Aplicaciones del menú principal de Looker, verás el nombre de tu nueva extensión, que se determina mediante el parámetro label en el archivo de manifiesto de tu proyecto.
Selecciona tu extensión en la sección Aplicaciones para ver el resultado de la extensión.

Modificar la extensión

Una vez que hayas creado la extensión básica, podrás modificarla o añadirle código modificando el archivo JavaScript o TypeScript correspondiente.

El directorio src del directorio de tu extensión contiene el archivo de origen en el que puedes añadir código. En el ejemplo anterior, en la plantilla "Hello World" de React y JavaScript, el archivo se llama HelloWorld.js. Si modificas o añades código a ese archivo, se modificará o se añadirá la función de la extensión.

A continuación se muestra la salida del archivo HelloWorld.js de React y 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>
    </>
  )
}

En el ejemplo anterior, puedes cambiar el texto de salida de la extensión modificando el texto de la línea:

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

Ten en cuenta que, a medida que añadas funciones, es posible que tengas que modificar los entitlements concedidos a tu extensión en el parámetro application del archivo de manifiesto de tu proyecto.