Introducción a la compilación de 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 luego puedes agregar funcionalidad.

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

• Configurar un proyecto de LookML que incluya un archivo del modelo y un archivo de manifiesto del proyecto y que esté conectado a Git
• Cómo generar los archivos de plantilla de extensión

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

Configura Looker para una extensión

Las extensiones de Looker requieren un proyecto de LookML que incluya un archivo de modelo y un archivo de manifiesto para ejecutarse.

1. Crea un proyecto en blanco para tu extensión.

2. En tu proyecto nuevo, crea un archivo de modelo con el + en la parte superior del navegador de archivos en el IDE de Looker.

3. El nuevo archivo de modelo 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 permisos a los usuarios para que accedan 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 comienzo de la línea para que esta sea un comentario. Si dejas el parámetro include: "/views/*.view.lkml" como está, se generará errores en el validador de LookML.

4. Crea un archivo de manifiesto del proyecto con + en la parte superior del navegador de archivos del IDE de Looker.

   El archivo de manifiesto del proyecto estará vacío inicialmente, 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 asigna una etiqueta a la extensión, le indica a Looker dónde encontrar la extensión 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 ese recurso se incluya en las autorizaciones.

   Sin embargo, puedes dejar el archivo de manifiesto tal como está por ahora, ya que copiarás el resto del contenido en este más adelante en este proceso.

5. Configura una conexión Git para tu proyecto nuevo.

   Para acceder a la página Configurar Git, haga clic en el botón Configurar Git en la esquina superior derecha del IDE de Looker o use la página Configuración del proyecto como se describe en la página de documentación Configurar y probar una conexión de Git.

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

Genera los archivos de plantilla de extensión

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

• Usa la utilidad create-looker-extension
• Clona un repositorio de Git con una plantilla 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 de extensión y las dependencias necesarios. Luego, puede usar esto como punto de partida y agregar código y funcionalidad adicionales para completar su extensión.

Para generar la plantilla de extensión:

1. Ejecuta la utilidad create-looker-extension y reemplaza <extension_name> por el nombre de tu extensión:

   yarn create looker-extension <extension_name>
   

2. Confirma el nombre de la extensión o proporciona un nombre diferente y, luego, selecciona el lenguaje y el framework que deseas usar para compilar la extensión:

   

   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:

   

3. Navega al directorio que se creó para tu extensión:

   cd <extension_name>
   

4. Instala las dependencias de la extensión:

   yarn install
   

5. Inicia el servidor de desarrollo:

   yarn develop
   

   La extensión se está ejecutando y entrega el código JavaScript de forma local en http://localhost:8080/bundle.js.

6. En el directorio de tu extensión, se encuentra el archivo manifest.lkml. Copia el contenido de este archivo.

7. 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.

8. En el IDE de LookML, haz clic en Validar LookML, luego en Confirmar cambios y enviar y, por último, en Implementar en producción.

9. Vuelve a cargar Looker con la función de recarga de tu navegador.

   En el menú Explorar de Looker, verá el nombre de su nueva extensión:

   

10. Selecciona la extensión en el menú Examinar para ver el resultado de la extensión.

Si el administrador habilitó la función de Labs de la Navegación mejorada, las extensiones aparecerán en la sección Aplicaciones del nuevo panel de navegación izquierdo mejorado.

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 se encuentran allí, navega hasta el repositorio de ese ejemplo y sigue las instrucciones que aparecen a continuación.

Este procedimiento requiere Yarn, por lo que debes asegurarte de tener instalado Yarn.

1. En su línea de comandos local, use el siguiente comando para clonar el repositorio de Git:

   git clone [e-mail]:looker-open-source/extension-examples.git
   

2. Navega al directorio que contiene la plantilla que deseas instalar en tu sistema. En este ejemplo, usaremos la extensión de React y JavaScript "Hello World":

   cd extension-examples/react/javascript/helloworld-js
   

3. Instala las dependencias de la extensión:

   yarn install
   

   Es posible que debas actualizar tu versión de Node o usar un administrador de versiones de Node para cambiarla.

4. En el directorio de tu extensión, se encuentra el archivo manifest.lkml. Copia el contenido de este archivo.

5. 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.

6. 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.

7. En tu terminal, inicia el servidor de desarrollo:

   yarn develop
   

   La extensión se está ejecutando y entrega el código JavaScript en un servidor de desarrollo local especificado en el parámetro url del archivo de manifiesto: http://localhost:8080/bundle.js.

8. Vuelve a cargar Looker con la función de recarga de tu navegador.

   En el menú Explorar de Looker, verá el nombre de su nueva extensión, que se determina mediante el parámetro label en el archivo de manifiesto de su proyecto:

   

9. Selecciona la extensión en el menú Examinar para ver el resultado de la extensión.

Si el administrador habilitó la función de Labs de la Navegación mejorada, las extensiones aparecerán en la sección Aplicaciones del nuevo panel de navegación izquierdo mejorado.

Cómo modificar la extensión

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

El directorio src en tu directorio de extensiones contiene el archivo de origen en el que puedes agregar código. En el ejemplo anterior, para la plantilla React & JavaScript "Hello World&quot, el archivo se llama HelloWorld.js. Si modificas o agregas código a ese archivo, se modificará o agregará a 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, puedes cambiar el texto de la extensión setMessage('Hello, ${me.display_name}') para cambiar el resultado de texto de la extensión.

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