Creazione di un'estensione Looker

In questa pagina viene descritto come generare e configurare un modello di estensione di base di Looker, a cui puoi quindi aggiungere funzionalità.

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

Le seguenti procedure mostrano come creare gli elementi precedenti.

Configurazione di Looker per un'estensione

Per l'esecuzione, le estensioni di Looker richiedono un progetto LookML che includa un file del modello e un file manifest.

  1. Crea un progetto vuoto per l'estensione.

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

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

    Sostituisci connection_name nel parametro connection con il nome di una connessione al database valida nella tua istanza. L'estensione richiede un file del 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 accedere a quel modello. Quando hai 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 il parametro include: "/views/*.view.lkml" invariato, lo strumento di convalida LookML genererà errori.

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

    Inizialmente, il file manifest del progetto sarà vuoto, ma più avanti in questa procedura copierai 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 di Looker a cui può accedere l'estensione. L'estensione non potrà accedere a una risorsa Looker, a meno che la risorsa non sia elencata nei diritti.

    Per il momento puoi lasciare il file manifest com'è, dal momento che copierai al suo interno il resto dei contenuti 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 progetto, come descritto nella pagina della documentazione Configurare e testare una connessione Git.

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

Generazione dei file del modello di estensione

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

Entrambi i processi richiedono l'utilizzo di Yarn, quindi assicurati di aver installato Yarn.

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

L'utilità create-looker-extension crea un'estensione Looker di base che include tutti i file di estensione e le dipendenze necessari. Puoi quindi utilizzarla come punto di partenza e aggiungere ulteriori codici e funzionalità 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 specificane un altro, 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 compilare un modello di base e inserire tutti i file generati in una nuova directory che utilizza il nome dell'estensione:

  3. Vai 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 fornisce il codice JavaScript localmente all'indirizzo http://localhost:8080/bundle.js.

  6. Nella directory dell'estensione si trova il file manifest.lkml. Copia i contenuti di questo file.

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

    Fai clic su Save changes (Salva modifiche) per salvare il file manifest del progetto.

  8. Nell'IDE LookML, fai clic su Convalida LookML, poi fai clic su Esegui il commit delle modifiche e il push e infine fai clic su Esegui il deployment in produzione.

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

    Nella sezione Applicazioni del menu principale di Looker, vedrai il nome della nuova estensione.

  10. Seleziona l'estensione dalla sezione Applicazioni per visualizzarne l'output.

Clonazione di un repository Git per creare 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 riportati, vai al repository dell'esempio e segui le istruzioni mostrate di seguito.

Questa procedura richiede Yarn, quindi assicurati di aver installato Yarn.

  1. Nella 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. Accedi alla directory che contiene il modello da installare sul sistema. In questo esempio, utilizzeremo le estensioni "Hello World" di React e JavaScript:

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

    yarn install
    

    Potrebbe essere necessario aggiornare la versione del nodo o utilizzare un gestore delle versioni dei nodi per modificare la versione del nodo.

  4. Nella directory dell'estensione si trova il file manifest.lkml. Copia i contenuti di questo file.

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

    Fai clic su Save changes (Salva modifiche) per salvare il file manifest del progetto.

  6. Nell'angolo in alto a destra dell'IDE LookML, fai clic su Convalida LookML, quindi su Esegui il commit delle modifiche e il push e infine fai clic su Esegui il deployment in produzione.

  7. Nel terminale, avvia il server di sviluppo:

    yarn develop
    

    L'estensione è ora in esecuzione e gestisce 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.

    Nella sezione Applicazioni del menu principale di Looker vedrai il nome della nuova estensione, che è determinato dal parametro label nel file manifest del tuo progetto.

  9. Seleziona l'estensione dalla sezione Applicazioni per visualizzarne l'output.

Modifica dell'estensione

Una volta creata l'estensione di base, è possibile modificarla o aggiungerne il codice modificando il file JavaScript o TypeScript appropriato.

La directory src nella directory dell'estensione contiene il file di origine in cui puoi aggiungere il codice. Nell'esempio precedente, per i modelli "Hello World" di React e JavaScript, il file è denominato HelloWorld.js. La modifica o l'aggiunta di codice al file comporta la modifica o l'aggiunta di codice alla funzione dell'estensione.

Di seguito è riportato l'output dei file React e JavaScript HelloWorld.js:


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>
    </>
  )
}

Nell'esempio precedente, potresti modificare l'output di testo dell'estensione modificando il testo nella riga:

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

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