Introduzione alla creazione di un'estensione Looker

Questa pagina descrive come generare e configurare un modello di estensione di base di Looker a cui aggiungere le funzionalità.

Per creare una nuova estensione Looker, devi eseguire le seguenti attività:

Le procedure che seguono mostrano come creare gli elementi riportati sopra.

Configurazione di Looker per un'estensione

Per l'esecuzione delle estensioni Looker è necessario un progetto LookML che includa un file modello e un file manifest.

  1. Crea un progetto vuoto per l'estensione.

  2. Nel nuovo progetto, crea un file modello utilizzando il dispositivo + nella parte superiore del browser di file nell'IDE di Looker.

  3. Il nuovo file modello viene generato con un parametro connection e un parametro include:

    Sostituisci connection_name nel parametro connection con il nome di una connessione di database valida sull'istanza. L'estensione richiede un file modello valido perché i dati delle autorizzazioni di Looker sono accessibili tramite il modello LookML. Per gestire l'accesso all'estensione, devi associare l'estensione a un modello LookML valido e concedere agli utenti le autorizzazioni per accedervi. Una volta terminato di modificare il file del modello, fai clic su Salva modifiche.

    Poiché l'estensione non richiede un file di visualizzazione, elimina il parametro include: "/views/*.view.lkml" o aggiungi un carattere # all'inizio della riga per trasformare la riga in un commento. Se lasci invariato il parametro include: "/views/*.view.lkml", lo strumento di convalida LookML genererà errori.

  4. Crea un file manifest del progetto utilizzando il codice + nella parte superiore del browser dei file nell'IDE di Looker.

    Il file manifest del progetto sarà inizialmente in fase vuoto, ma in seguito dovrai copiare i contenuti generati nel file manifest del progetto che includerà il parametro application. Il parametro application assegna un'etichetta all'estensione, indica a Looker dove trovare il codice JavaScript dell'estensione e fornisce un elenco di diritti per l'estensione. I diritti definiscono le risorse Looker a cui l'estensione può accedere. L'estensione non sarà in grado di accedere a una risorsa di Looker a meno che la risorsa non sia elencata nei diritti.

    Puoi lasciare invariato il file manifest, tuttavia, poiché copierai il resto dei contenuti del file al suo interno in un secondo momento.

  5. Configura una connessione Git per il nuovo progetto.

    Puoi accedere alla pagina Configura Git facendo clic sul pulsante Configura Git nell'angolo in alto a destra dell'IDE di Looker o utilizzando la pagina Configurazione del progetto come descritto nella pagina della documentazione Configurazione e test di una connessione Git.

Dopo aver configurato il progetto per l'estensione e averlo collegato a Git, puoi generare i file del modello di estensione.

Generazione dei file del modello di estensione

Esistono due modi per generare file di codice modello di estensione:

Entrambi i processi richiedono Yarn, quindi assicurati di avere installato il filato.

Utilizzare create-looker-extension per creare un modello di estensione

L'utilità create-looker-extension crea un'estensione di base di Looker che include tutti i file e le dipendenze dell'estensione necessari. Puoi utilizzarlo come punto di partenza e aggiungere codice e funzionalità supplementari per completare l'estensione.

Per generare il modello di estensione:

  1. Esegui l'utilità create-looker-extension sostituendo <extension_name> con il nome della tua estensione:

    yarn create looker-extension <extension_name>
    
  2. Conferma il nome dell'estensione o fornisci un nome diverso, quindi seleziona la lingua e il framework che vuoi utilizzare per creare l'estensione:

    L'utilità create-looker-extension utilizzerà quindi il framework specificato per completare un modello di base e inserirà tutti i file generati in una nuova directory che utilizza il nome dell'estensione:

  3. Passa alla directory creata per l'estensione:

    cd <extension_name>
    
  4. Installa le dipendenze dell'estensione:

    yarn install
    
  5. Avvia il server di sviluppo:

    yarn develop
    

    L'estensione è ora in esecuzione e pubblica il codice JavaScript in locale all'indirizzo http://localhost:8080/bundle.js.

  6. Nella directory dell'estensione è presente il file manifest.lkml. Copia il contenuto di questo file.

  7. Nel progetto LookML, incolla i contenuti di manifest.lkml nel file manifest del progetto:

    Fai clic su Salva modifiche per salvare il file manifest del progetto.

  8. Nell'IDE LookML, fai clic su Convalida LookML, quindi fai clic su Commit Changes & Push e quindi su Deploy to Production.

  9. Ricarica Looker utilizzando la funzione di ricaricamento del browser.

    Nel menu Browse (Sfoglia) di Looker puoi vedere il nome della nuova estensione:

  10. Seleziona l'estensione dal menu Sfoglia per visualizzare l'output dell'estensione.

Se l'amministratore ha abilitato la funzionalità di Navigazione avanzata Labs, le estensioni sono elencate nella sezione Applicazioni del nuovo pannello di navigazione avanzata a sinistra.

Clonazione di un repository Git per la creazione di un modello di estensione

Looker gestisce un repository Git con diversi modelli di estensione all'indirizzo https://github.com/looker-open-source/extension-examples. Se vuoi utilizzare uno degli esempi disponibili, vai al repository di tale esempio e segui le istruzioni riportate di seguito.

Questa procedura richiede Yarn, quindi assicurati di avere installato il filato.

  1. Sulla riga di comando locale, utilizza il comando seguente per clonare il repository Git:

    git clone git@github.com:looker-open-source/extension-examples.git
    
  2. Vai alla directory che contiene il modello che vuoi installare nel sistema. In questo esempio, utilizzeremo l'estensione "React and JavaScript" di Hello World.

    cd extension-examples/react/javascript/helloworld-js
    
  3. Installa le dipendenze dell'estensione:

    yarn install
    

    Per cambiare la versione del nodo, potresti dover aggiornare la versione del nodo o utilizzare un Gestore delle versioni dei nodi.

  4. Nella directory dell'estensione è presente il file manifest.lkml. Copia il contenuto di questo file.

  5. Nel progetto LookML, incolla i contenuti di manifest.lkml nel file manifest del progetto:

    Fai clic su Salva modifiche per salvare il file manifest del progetto.

  6. Nell'angolo in alto a destra dell'IDE LookML, fai clic su Validate LookML (Convalida LookML) e fai clic su Commit Changes & Push (Convalida modifiche e push), quindi fai clic su Deploy to Production (Esegui il deployment in produzione).

  7. Nel terminale, avvia il server di sviluppo:

    yarn develop
    

    L'estensione è ora in esecuzione e pubblica il codice JavaScript su un server di sviluppo locale specificato nel parametro url del file manifest: http://localhost:8080/bundle.js.

  8. Ricarica Looker utilizzando la funzione di ricaricamento del browser.

    Nel menu Browse (Sfoglia) di Looker vedrai il nome della nuova estensione, che viene determinato dal parametro label nel file manifest del progetto:

  9. Seleziona l'estensione dal menu Sfoglia per visualizzare l'output dell'estensione.

Se l'amministratore ha abilitato la funzionalità di Navigazione avanzata Labs, le estensioni sono elencate nella sezione Applicazioni del nuovo pannello di navigazione avanzata a sinistra.

Modificare l'estensione

Dopo aver creato l'estensione di base, puoi modificare il codice o aggiungervi il codice modificando il file JavaScript o TypeScript appropriato.

La directory src all'interno della directory delle estensioni contiene il file di origine in cui puoi aggiungere il codice. Nell'esempio precedente, per il modello"Reazione e JavaScript"Hello World" il file è denominato HelloWorld.js. La modifica o l'aggiunta di codice al file comporta la modifica o l'aggiunta alla funzione dell'estensione.

Di seguito è riportato l'output del file HelloWorld.js React and 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 (
    &#60;>
      &#60;ComponentsProvider>
        &#60;Space p="xxxxxlarge" width="100%" height="50vh" around>
          &#60;Text p="xxxxxlarge" fontSize="xxxxxlarge">
            {message}
          &#60;/Text>
        &#60;/Space>
      &#60;/ComponentsProvider>
    &#60;/>
  )
}

Nell'esempio precedente, potresti cambiare l'output del testo dell'estensione modificando il testo nella riga setMessage('Hello, ${me.display_name}').

Tieni presente che, man mano che aggiungi funzionalità, potresti dover modificare i diritti concessi all'estensione nel parametro application del file manifest del progetto.