Ten en cuenta que estás viendo la documentación de Looker. Para ver la documentación de Looker Studio, visita https://support.google.com/looker-studio.

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 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 extensión

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

Configura Looker para una extensión

Cada una de las extensiones 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 + 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 la 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 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 comienzo de la línea para convertirla en un comentario. Si dejas el parámetro include: "/views/*.view.lkml" tal como está, el validador de LookML generará errores.
Crea un archivo de manifiesto del proyecto con +, en la parte superior del navegador de archivos, en el IDE de Looker.

El archivo de manifiesto del proyecto estará inicialmente vacío, 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 le asigna una etiqueta a la extensión, le indica a Looker dónde encontrar el código JavaScript de 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 esté en la lista de 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 Configurar Git, haz clic en el botón Configurar Git en la esquina superior derecha del IDE de Looker o usa la página Configuración del proyecto como se describe en la página de documentación Configura y prueba una conexión de Git.

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

Genera los archivos de plantilla de extensiones

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

Con la utilidad create-looker-extension
Clona un repositorio de Git de plantillas de extensiones

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

Para generar la plantilla de extensiones, haz lo siguiente:

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 otro y, luego, selecciona el lenguaje y el framework que quieras 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 usa 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 está ejecutando 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 de tu proyecto:

Haz clic en Save Changes (Guardar cambios) para guardar el archivo de manifiesto del 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 Importación de proyectos locales de Labs. 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, 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 extensión nueva.
Selecciona tu extensión en la sección Aplicaciones para ver el resultado de la extensión.

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 deseas usar uno de los ejemplos que se encuentran allí, navega hasta su repositorio y sigue las instrucciones que se muestran a continuación.

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

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 hasta el directorio que contiene la plantilla que deseas 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 administrador 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 de tu proyecto:

Haz clic en Save Changes (Guardar cambios) para guardar el archivo de manifiesto del proyecto.
En la esquina superior derecha del IDE de LookML, haz clic en Validate LookML, luego, haz clic en Commit Changes & Push y, luego, en Deploy to Production.
En la terminal, inicia el servidor de desarrollo:
```
yarn develop
```
La extensión ahora 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.
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 extensión nueva, determinado por el parámetro label en el archivo de manifiesto del 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 modificarla o agregarle código con la modificación del archivo JavaScript o TypeScript adecuado.

El directorio src del directorio de la extensión contiene el archivo fuente en el que puedes agregar código. En el ejemplo anterior, para la plantilla "Hello World" de React y JavaScript, 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, se podía 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.