Questa pagina è stata tradotta dall'API Cloud Translation.

Creazione di un'estensione di Looker

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

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

Configurare un progetto LookML che includa un file modello e un file manifest del progetto e che sia connesso a Git
Generare i file del modello di estensione

Le procedure riportate di seguito mostrano come creare gli elementi precedenti.

Configurare Looker per un'estensione

Per essere eseguite, le estensioni di Looker richiedono un progetto LookML che includa un file modello e un file manifest.

Crea un progetto vuoto per l'estensione.
Nel nuovo progetto, crea un file del modello utilizzando + nella parte superiore del browser dei file nell'IDE di Looker.
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 sulla tua 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 associarla a un modello LookML valido e concedere agli utenti le autorizzazioni per accedere al 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.
Crea un file manifest del progetto utilizzando + nella parte superiore del browser dei 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.
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 della 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

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

Utilizzare l'utilità create-looker-extension
Clonazione di un repository Git del modello di estensione

Entrambe le procedure richiedono Yarn, quindi assicurati di averlo installato.

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

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

Per generare il modello di estensione:

Esegui l'utilità create-looker-extension, sostituendo <extension_name> con il nome dell'estensione:
```
yarn create looker-extension <extension_name>
```
Conferma il nome dell'estensione o fornisci un nome diverso, quindi seleziona il linguaggio 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:
Vai alla directory creata per l'estensione:
```
cd <extension_name>
```
Installa le dipendenze dell'estensione:
```
yarn install
```
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.
Nella directory dell'estensione si trova il file manifest.lkml. Copia i contenuti di questo file.
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.

Nota: i contenuti del file manifest.lkml generato includono il parametro LookML project_name. Il parametro project_name viene utilizzato dalla funzionalità Importazione progetto locale. Per informazioni dettagliate sull'importazione dei progetti, consulta la pagina della documentazione Importazione di file da altri progetti.
Nell'IDE LookML, fai clic su Convalida LookML, poi su Esegui commit delle modifiche e push e infine su Esegui il deployment in produzione.
Ricarica Looker utilizzando la funzione di ricarica del browser.

Nella sezione Applicazioni del menu principale di Looker, vedrai il nome della nuova estensione.
Seleziona l'estensione dalla sezione Applicazioni per visualizzarne l'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, vai al relativo repository e segui le istruzioni riportate di seguito.

Questa procedura richiede Yarn, quindi assicurati di averlo installato.

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
```
Vai alla directory contenente il modello da installare sul sistema. In questo esempio utilizzeremo l'estensione "Hello World" di React e JavaScript:
```
cd extension-examples/react/javascript/helloworld-js
```
Installa le dipendenze dell'estensione:
```
yarn install
```
Potresti dover aggiornare la versione di Node o utilizzare un gestore delle versioni di Node per modificarla.
Nella directory dell'estensione si trova il file manifest.lkml. Copia i contenuti di questo file.
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.
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.
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.
Ricarica Looker utilizzando la funzione di ricarica del browser.

Nella sezione Applicazioni del menu principale di Looker, vedrai il nome della nuova estensione, che viene determinato dal parametro label nel file manifest del progetto.
Seleziona l'estensione dalla sezione Applicazioni per visualizzarne l'output.

Modifica dell'estensione

Una volta creata l'estensione di base, puoi modificarla o aggiungervi codice modificando il file JavaScript o TypeScript appropriato.

La directory src nella directory dell'estensione contiene il file di origine in cui puoi aggiungere 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 a questo file modifica o aggiunge la funzionalità 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.