Compila una extensión de Looker

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

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

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

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

Configura Looker para una extensión

Cada extensión de Looker requiere un proyecto de LookML que incluya un archivo de modelo y un archivo de manifiesto para ejecutarse.

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

Reemplaza connection_name en el parámetro connection por el nombre de una conexión de base de datos válida en 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 de LookML. Para administrar el acceso a tu extensión, debes asociarla con un modelo de LookML válido y otorgar a los usuarios permisos para acceder a ese modelo. Cuando termines de editar el archivo del modelo, haz clic en Guardar cambios.

Dado que tu extensión no requiere un archivo de vista, borra el parámetro include: "/views/*.view.lkml" o agrega un carácter # al principio de la línea para convertirla en un comentario. Si dejas el parámetro include: "/views/*.view.lkml" como está, el validador de LookML generará errores.
Crea un archivo de manifiesto del proyecto con el + en la parte superior del navegador de archivos en el IDE de Looker.

Inicialmente, el archivo de manifiesto del proyecto estará vacío, pero, más adelante en este procedimiento, copiarás el contenido generado en el archivo de manifiesto de tu proyecto que incluirá el parámetro application. El parámetro application le otorga una etiqueta a la extensión, le indica a Looker dónde encontrar la extensión de JavaScript y proporciona una lista de derechos para la extensión. Las autorizaciones 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 se incluya en los derechos.

Sin embargo, puedes dejar el archivo de manifiesto tal como está por ahora, ya que copiarás el resto del contenido del archivo más adelante en este proceso.
Configura una conexión de Git para tu proyecto nuevo.

Para acceder a la página Configure Git, haz clic en el botón Configure Git en la esquina superior derecha del IDE de Looker o usa la página Project Configuration, como se describe en la página de documentación Configura y prueba una conexión de Git.

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

Genera los archivos de plantilla de la extensión

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

Cómo usar la utilidad create-looker-extension
Clona un repositorio de Git de plantillas de extensión

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

Usa `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 dependencias de extensión necesarios. Luego, puedes usar esto como punto de partida y agregar código y funcionalidad adicionales para completar tu extensión.

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

Ejecuta la utilidad create-looker-extension y reemplaza <extension_name> por el nombre de tu extensión:
```
yarn create looker-extension <extension_name>
```
Confirma el nombre de la extensión o proporciona uno diferente y, luego, selecciona el lenguaje y el framework que deseas usar para compilar la extensión:

Luego, la utilidad create-looker-extension usará el framework que especificaste para propagar una plantilla base y colocar todos los archivos generados en un directorio nuevo que use el nombre de la extensión:
Navega al directorio que se creó 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 ejecuta y entrega el código 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 Save Changes para guardar el archivo de manifiesto de tu proyecto.

Nota: El contenido del archivo manifest.lkml generado incluye el parámetro project_name de LookML. El parámetro project_name requiere que esté habilitada la función de labs Importación de proyectos locales. De lo contrario, el validador de LookML mostrará una advertencia en el siguiente paso de este procedimiento.
En el IDE de LookML, haz clic en Validar LookML y, luego, en Confirmar cambios y Envía y, luego, haz clic 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 la nueva extensión.
Selecciona tu extensión en la sección Applications para ver su salida.

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

Looker mantiene un repositorio de Git con varias plantillas de extensión en https://github.com/looker-open-source/extension-examples. Si quieres usar uno de los ejemplos que aparecen allí, navega al repositorio de ese ejemplo y sigue las instrucciones que se muestran a continuación.

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

En tu 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
```
Navega al directorio que contiene la plantilla que quieres 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
```
Es posible que debas actualizar tu versión de Node o usar un Node Version Manager 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 Save Changes para guardar el archivo de manifiesto de tu proyecto.
En la esquina superior derecha del IDE de LookML, haz clic en Validar LookML y, luego, en Confirmar cambios y Envía y, luego, haz clic en Implementar en producción.
En la terminal, inicia el servidor de desarrollo:
```
yarn develop
```
La extensión está ejecutando y entregando 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 Applications del menú principal de Looker, verás el nombre de la nueva extensión, que está determinado por 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.

Modifica la extensión

Una vez que hayas creado la extensión básica, puedes modificar o agregarle código modificando el archivo de JavaScript o TypeScript adecuado.

El directorio src en el directorio de la extensión contiene el archivo fuente en el que puedes agregar código. En el ejemplo anterior, para la implementación “Hello World” de React y JavaScript plantilla, el archivo se llama HelloWorld.js. Si modificas o agregas código a ese archivo, se modificará o agregará la función de la extensión.

A continuación, se muestra el resultado 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, podrías modificar el resultado de texto de la extensión cambiando el texto de la línea:

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

Ten en cuenta que, a medida que agregues funcionalidad, es posible que debas modificar los derechos otorgados a tu extensión en el parámetro application del archivo de manifiesto del proyecto.