Creazione di un'estensione Looker

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

Per creare una nuova estensione Looker sono necessarie le seguenti attività:

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

Configurazione di Looker per un'estensione

Ognuna delle estensioni Looker richiede un progetto LookML che includa un file modello e un file manifest da eseguire.

  1. Crea un progetto vuoto per l'estensione.

  2. Nel nuovo progetto, crea un file modello utilizzando il + nella parte superiore del browser dei 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 al database valida per l'istanza. L'estensione richiede un file modello valido, perché i dati delle autorizzazioni Looker sono accessibili tramite il modello LookML. Per gestire l'accesso all'estensione, devi associarla a un modello LookML valido e concedere agli utenti le autorizzazioni per accedervi. Al termine della modifica del 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 renderla un commento. Se il parametro include: "/views/*.view.lkml" rimane invariato, lo strumento di convalida LookML genererà errori.

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

    Inizialmente il file manifest del progetto sarà vuoto, ma in seguito in questa procedura copierai i contenuti generati nel file manifest del progetto che includerà il parametro application. Il parametro application assegna all'estensione un'etichetta, indica a Looker dove trovare l'estensione JavaScript e fornisce un elenco di diritti per l'estensione. I diritti definiscono le risorse Looker a cui può accedere l'estensione. L'estensione non potrà accedere a una risorsa di Looker se non è presente nei diritti.

    Per il momento puoi lasciare il file manifest così com'è, dato che copierai il resto dei contenuti del file in un secondo momento durante la procedura.

  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 oppure utilizzando la pagina Configurazione progetto come descritto nella pagina della documentazione Configurazione e test di una connessione Git.

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

Generazione dei file modello di estensione

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

Entrambi i processi richiedono Gomitolo, quindi assicurati che il Filato sia installato.

Utilizzo di 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 usarla come punto di partenza per aggiungere ulteriori codice 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 dell'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. Vai alla directory che è stata creata per l'estensione:

    cd <extension_name>
    
  4. Installa le dipendenze delle estensioni:

    yarn install
    
  5. Avvia il server di sviluppo:

    yarn develop
    

    L'estensione viene ora eseguita e pubblica il codice JavaScript localmente su 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 tuo progetto.

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

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

    Nel menu Sfoglia di Looker vedrai il nome della nuova estensione:

  10. Per visualizzare l'output dell'estensione, seleziona l'estensione dal menu Sfoglia.

Se l'amministratore ha attivato la funzionalità Labs Navigazione avanzata, le estensioni sono elencate nella sezione Applicazioni del nuovo pannello di navigazione avanzata sulla 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 presenti, vai al repository di quell'esempio e segui le istruzioni riportate di seguito.

Questa procedura richiede Gomitolo, quindi assicurati che il Filato sia installato.

  1. Per clonare il repository Git, utilizza la seguente riga di comando locale:

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

    cd extension-examples/react/javascript/helloworld-js
    
  3. Installa le dipendenze delle estensioni:

    yarn install
    

    Per cambiare la versione del nodo, potresti dover aggiornare la versione del nodo o utilizzare un gestore della versione 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 tuo progetto.

  6. Nell'angolo in alto a destra dell'IDE LookML, fai clic su Convalida LookML, quindi su Esegui il commit delle modifiche ed esegui 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 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 Sfoglia di Looker vedrai il nome della nuova estensione, determinato dal parametro label nel file manifest del progetto:

  9. Per visualizzare l'output dell'estensione, seleziona l'estensione dal menu Sfoglia.

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

Modifica dell'estensione

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

La directory src sotto la directory dell'estensione contiene il file di origine a cui puoi aggiungere il codice. Nell'esempio precedente, per il modello "React and JavaScript "Hello World", il file è denominato HelloWorld.js. La modifica o l'aggiunta di codice a tale file comporta il cambiamento o l'aggiunta alla funzione dell'estensione.

Di seguito è riportato l'output del 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 cambiando 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.