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 base di Looker, a cui puoi poi aggiungere funzionalità.

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

Configura 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 seguenti procedure mostrano come creare gli elementi precedenti.

Configurare Looker per un'estensione

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

Crea un progetto vuoto per la tua estensione.
Nel nuovo progetto, crea un file 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 nella tua istanza. L'estensione richiede un file del modello valido perché i dati delle autorizzazioni di Looker vengono accessibili tramite il modello LookML. Per gestire l'accesso alla tua estensione, devi associarla a un modello LookML valido e concedere agli utenti le autorizzazioni per accedere a quel modello. Al termine della modifica del file modello, fai clic su Salva modifiche.

Poiché l'estensione non richiede un file di visualizzazione, elimina il parametro include: "/views/*.view.lkml" o aggiungi il carattere # all'inizio della riga per trasformarla in un commento. Se lasci il parametro include: "/views/*.view.lkml" così com'è, 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.

Il file manifest del progetto inizialmente 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 fornisce all'estensione un'etichetta, indica a Looker dove trovare il 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 potrà accedere a una risorsa Looker a meno che non sia elencata negli entitlement.

Per ora puoi lasciare il file manifest così com'è, perché copierai il resto dei contenuti del file in un secondo momento di questa 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 di 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 modello dell'estensione

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

Utilizzo dell'utilità create-looker-extension
Clonazione di un repository Git del modello di estensione

Entrambi i processi richiedono Yarn, quindi assicurati di averlo installato.

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 e le dipendenze necessari. Puoi quindi 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 della tua estensione:
```
yarn create looker-extension <extension_name>
```
Conferma il nome dell'estensione o fornisci un nome diverso, poi 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:
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 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 tuo 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 Importare file da altri progetti.
Nell'IDE LookML, fai clic su Valida 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.

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, vai al repository dell'esempio e segui le istruzioni mostrate 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 che vuoi 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
```
Potrebbe essere necessario aggiornare la versione di Node o utilizzare un gestore delle versioni di Node per modificare la versione di Node.
Nella directory dell'estensione si trova il file manifest.lkml. Copia i contenuti di questo file.
Nel tuo 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 Valida 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 è 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 aggiungere 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. Se modifichi o aggiungi codice a questo file, la funzionalità dell'estensione verrà modificata o ampliata.

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à, potresti dover modificare i diritti concessi alla tua estensione nel parametro application nel file manifest del progetto.