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

Cómo compilar 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 podrás agregar funcionalidad.

Para crear una nueva 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
Cómo generar los archivos de plantilla de extensiones

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 incluye 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 del 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 mediante el 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 hayas terminado de editar el archivo del modelo, haz clic en Guardar cambios.

Como 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 que sea 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 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 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 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 se indique en los derechos.

Por el momento, puedes dejar el archivo de manifiesto tal como está, ya que copiarás el resto del contenido más tarde.
Configura una conexión Git para tu proyecto nuevo.

Para acceder a la página Configure Git, haga clic en el botón Configure Git en la esquina superior derecha del IDE de Looker, o bien use la página Project Configuration, 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 de tu extensión y lo hayas conectado a Git, podrás generar los archivos de plantilla de extensiones.

Cómo generar los archivos de plantilla de extensiones

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 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 todas las dependencias y los archivos de extensión necesarios. 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:

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 un nombre 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 usa el nombre de la extensión:
Navega al directorio que se creó para la extensión:
```
cd <extension_name>
```
Instala las dependencias de la extensión:
```
yarn install
```
Inicia el servidor de desarrollo:
```
yarn develop
```
La extensión ya se está ejecutando y entrega JavaScript de forma local en http://localhost:8080/bundle.js.
En el directorio de la 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 Guardar cambios 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 Local Project Import Labs. De lo contrario, el validador de LookML mostrará una advertencia en el paso siguiente de este procedimiento.
En el IDE de LookML, haz clic en Validar LookML y, luego, en Confirmar cambios y enviar. Luego, haz clic en Implementar en producción.
Vuelve a cargar Looker con la función de recarga del navegador.

En el menú Explorar de Looker, verá el nombre de su nueva extensión:
Selecciona tu extensión en el menú Explorar para ver el resultado de la extensión.

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

Clona 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, navega al repositorio y sigue las instrucciones que se indican a continuación.

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

En su línea de comandos local, use 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 la versión de Node o usar un administrador de versiones de Node para cambiar la versión.
En el directorio de la 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 Guardar cambios para guardar el archivo de manifiesto de tu proyecto.
En la esquina superior derecha del IDE de LookML, haga clic en Validar LookML y, luego, en Confirmar cambios y enviar. Por último, haga clic en Implementar en producción.
En la terminal, inicia el servidor de desarrollo:
```
yarn develop
```
La extensión ahora 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 del navegador.

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

Si el administrador habilitó la función de Labs de la Navegación mejorada, aparecerán las extensiones en la sección Aplicaciones del nuevo panel de navegación 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 de JavaScript o TypeScript apropiado.

El directorio src del directorio de la extensión contiene el archivo fuente en el que puedes agregar el 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á el código 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 línea para cambiar el resultado de texto de la extensión:

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

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