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

Para crear una extensión de Looker nueva, 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 extensión

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

Cómo configurar Looker para una extensión

Para ejecutarse, cada extensión de Looker requiere un proyecto de LookML que incluya un archivo de modelo y un archivo de manifiesto.

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 otorgarles permisos a los usuarios 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.

4. 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. 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 aparezca en los derechos.

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

5. 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 de tu extensión y lo hayas conectado a Git, estará todo listo para generar los archivos de plantillas de la extensión.

Genera los archivos de plantilla de la extensión

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

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

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 otro y, luego, selecciona el lenguaje y el framework que quieres usar para crear 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:

   

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 ahora se ejecuta y entrega el código JavaScript de forma local en http://localhost:8080/bundle.js.

6. En el directorio de la 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 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 de Importación de proyectos locales. De lo contrario, el validador de LookML mostrará una advertencia en el siguiente paso de este procedimiento.

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

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

10. Selecciona tu extensión en la sección Aplicaciones para ver el resultado de la extensión.

Cómo clonar 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.

1. En tu línea de comandos local, usa 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 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
   

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

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 y, luego, en Confirmar cambios y Envía y, luego, haz clic en Implementar en producción.

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

   yarn develop
   

   La extensión ahora se ejecuta 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 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.

9. Selecciona tu extensión en la sección Applications para ver su salida.

Cómo modificar la extensión

Una vez que crees la extensión básica, podrás modificarla o agregarle código modificando el archivo JavaScript o TypeScript correspondiente.

El directorio src en el directorio de tu 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, puedes cambiar 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 funciones, es posible que debas modificar los derechos otorgados a tu extensión en el parámetro application del archivo de manifiesto de tu proyecto.