Creazione di un'estensione di Looker

Questa pagina descrive come generare e configurare un modello di estensione di Looker di base, a cui puoi poi 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

Ciascuna estensione di Looker richiede l'esecuzione di 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 di 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 nell'istanza. L'estensione richiede un file modello valido perché i dati delle autorizzazioni di Looker vengono visualizzati 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. 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 trasformarla in un commento. Se lasci invariato il parametro include: "/views/*.view.lkml", lo strumento di convalida di 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 in un secondo momento di 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 l'estensione può accedere. L'estensione non potrà accedere a una risorsa Looker, a meno che questa non sia elencata nei diritti.

    Per il momento puoi lasciare il file manifest così com'è, poiché 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 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 modello dell'estensione.

Generazione dei file del modello di estensione in corso...

Esistono due modi per generare i file di codice del modello di estensioni:

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

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 delle estensioni e le dipendenze necessarie. Puoi utilizzarlo come punto di partenza e aggiungere codice e funzionalità aggiuntivi 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 il linguaggio e il framework da utilizzare per creare l'estensione:

    L'utilità create-looker-extension userà quindi il framework che hai specificato per compilare 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 localmente all'indirizzo http://localhost:8080/bundle.js.

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

  7. Nel progetto LookML, incolla i contenuti di manifest.lkml nel file manifest del tuo 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 su Esegui commit delle modifiche e push e infine su Esegui il deployment in produzione.

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

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

  10. Seleziona l'estensione dalla sezione Applications (Applicazioni) per visualizzare il relativo output.

Clonare un repository Git per creare un modello di estensione

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

Questa procedura richiede Yarn, quindi assicurati di averlo installato.

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

    git clone git@github.com:looker-open-source/extension-examples.git
    
  2. Passa alla directory che contiene il modello da installare nel sistema. In questo esempio, utilizzeremo React e JavaScript "Hello World" estensione:

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

    yarn install
    

    Potresti dover aggiornare la versione di Node o utilizzare un gestore delle versioni di Node per modificarla.

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

  5. Nel progetto LookML, incolla i contenuti di manifest.lkml nel file manifest del tuo 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, poi su Esegui commit delle modifiche e push e infine 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.

    Nella sezione Applications (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, puoi modificarla o aggiungervi il codice modificando il file JavaScript o TypeScript appropriato.

La directory src nella directory delle estensioni contiene il file di origine in cui puoi aggiungere il codice. Nell'esempio precedente, per il modello "Hello World" di React e JavaScript, il file si chiama HelloWorld.js. La modifica o l'aggiunta di codice al file comporterà la modifica o l'aggiunta della funzione dell'estensione.

Di seguito è riportato l'output del file HelloWorld.js React e 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>
    </>
  )
}

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

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

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