Come incorporare Looker con l'SDK Embed

1. Prima di iniziare

In questo codelab, utilizzeremo l'SDK Embed di Looker per incorporare una dashboard di Looker nella tua pagina web. Chiamerai una serie di metodi SDK che creeranno automaticamente un iframe, incorporeranno i contenuti di Looker e configureranno le comunicazioni tra l'iframe e la pagina web.

Prerequisiti

  • Avere un'istanza di Looker in esecuzione
  • Avere una dashboard Looker da incorporare nell'applicazione web o nella pagina web
  • Avere familiarità con JavaScript e le promesse JavaScript.

Cosa imparerai a fare

  • Come incorporare in privato i contenuti di Looker con l'SDK Embed
  • Come inviare e ricevere messaggi (azioni ed eventi) con i contenuti Looker incorporati utilizzando l'SDK Embed

Che cosa ti serve

  • Accesso a HTML e JavaScript del codice frontend
  • Accesso alle impostazioni di incorporamento dell'amministratore nell'istanza Looker

2. Preparativi

Prima di poter eseguire l'incorporamento con l'SDK incorporato, devi preparare l'HTML e l'istanza di Looker.

Aggiungere l'elemento contenitore dell'iframe incorporato

All'interno dell'HTML della pagina web, crea un elemento div e definisci un attributo id.

<div id="looker-embed" />

Inserire il dominio dell'incorporamento nella lista consentita dell'istanza Looker

Devi inserire il dominio dell'incorporamento nella lista consentita della tua istanza di Looker.

Determina il dominio della pagina web che ospita i contenuti Looker incorporati. Supponiamo che l'URL della pagina web sia https://mywebsite.com/with/embed, allora il dominio della pagina web è https://mywebsite.com.

Vai alla pagina Incorpora nella sezione Amministrazione dell'istanza di Looker. https://your_instance.looker.com/admin/embed

Nel campo Lista consentita di domini incorporati, inserisci il dominio dell'incorporamento. Dopo averlo digitato, premi il tasto Tab in modo che il dominio venga visualizzato in una casella. Non includere una barra finale /.

Seleziona il pulsante Aggiorna.

3. Crea l'incorporamento

Ora creiamo e configuriamo il generatore di incorporamento dell'SDK per "creare" i contenuti Looker incorporati.

Inizializza l'SDK

Innanzitutto, importa e poi inizializza l'SDK con il dominio della tua istanza di Looker.

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

Crea il generatore di incorporamenti

Poi, determina l'ID della dashboard di Looker che vuoi incorporare. Se la tua dashboard si trova all'indirizzo instance_name.looker.com/dashboard/12345, il suo ID è 12345.

Chiama il metodo createDashboardWithId() dell'SDK con l'ID dashboard per creare un generatore di incorporamenti. Questo metodo restituirà il generatore di incorporamenti.

LookerEmbedSDK.createDashboardWithId(12345)

Configura e crea il generatore di incorporamenti

Ora configuriamo il generatore di incorporamenti prima di chiedergli di creare l'iframe incorporato. Aggiungi il seguente codice di esempio subito dopo la chiamata al metodo createDashboardWithId() del codice di esempio precedente.

  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .build()

Ogni metodo del generatore di incorporamenti restituisce il generatore stesso, quindi concateniamo le chiamate ai metodi. Vediamo ogni metodo:

  1. Il metodo appendTo() determina l'elemento padre dell'iframe. Passiamo l'ID dell'elemento HTML che abbiamo definito in precedenza nel passaggio di preparazione.
  2. Il metodo withFrameBorder() imposta l'attributo frame-border sull'iframe. Questo è uno dei diversi metodi che definiscono gli attributi HTML nell'iframe.
  3. Il metodo build() crea l'iframe con gli attributi HTML configurati.

Controllo finale

Con i passaggi precedenti, il codice dovrebbe avere il seguente aspetto:

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

LookerEmbedSDK.createDashboardWithId(12345)
  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .build()

Ora la dashboard di Looker è incorporata nella pagina web con l'SDK Embed.

4. Inviare e ricevere messaggi incorporati

Ora vediamo come inviare e ricevere messaggi con i contenuti Looker incorporati con l'SDK Embed. I messaggi che la tua applicazione invia all'iframe vengono chiamati azioni, mentre i messaggi che la tua applicazione riceve dall'iframe vengono chiamati eventi.

Ricevere eventi

Lavoriamo con il codice precedente. Per ascoltare gli eventi, chiamiamo il metodo on() del generatore di incorporamento prima di chiamare il metodo build().

...
  .on('dashboard:run:complete',() => console.log(‘Embedded dashboard loaded!')
...

Qui chiamiamo il metodo on() per impostare un listener di eventi sull'evento dashboard:run:complete proveniente dall'iframe quando viene creato. L'evento ci indica quando il caricamento della dashboard è terminato. Consulta il riferimento agli eventi per altri eventi da ascoltare.

Invia azioni

Continuiamo con il codice precedente. Per inviare azioni all'iframe, chiamiamo il metodo connect() del generatore di incorporamenti dopo aver chiamato il metodo build() per inizializzare l'invio e la ricezione di messaggi con l'iframe.

...  
  .connect()
  .then((embed) => {
     embed.send(‘dashboard:run');
   })
  .catch(console.error(‘Something errored!')
...

Esaminiamo questo esempio di codice:

  1. Chiamiamo il metodo connect() che restituisce una promessa. La promessa si risolve in un oggetto di incorporamento che rappresenta l'iframe incorporato dopo l'inizializzazione del meccanismo di invio e ricezione dei messaggi.
  2. Chiamiamo il metodo send() sull'oggetto incorporato per inviare un'azione dashboard:run. Consulta il riferimento alle azioni per altre azioni da inviare.
  3. Aggiungiamo un metodo catch() in caso di errori durante l'inizializzazione.

Controllo finale

Dopo i passaggi precedenti, il codice dovrebbe avere il seguente aspetto:

// Import the Embed SDK as LookerEmbedSDK

LookerEmbedSDK.init('instance_name.looker.com')

LookerEmbedSDK.createDashboardWithId(12345)
  .appendTo(‘looker-embed')
  .withFrameBorder(‘0')
  .on('dashboard:run:complete',() => console.log(‘Embedded dashboard loaded!')
  .build()
  .connect()
  .then((embed) => {
     embed.send(‘dashboard:run');
   })
  .catch(console.error(‘Something errored!')

Ora puoi comunicare con la dashboard Looker incorporata.

5. Informazioni aggiuntive

Complimenti! Ora puoi utilizzare l'SDK Embed per incorporare privatamente la dashboard di Looker e inviare e ricevere messaggi dall'iframe. Per ulteriori informazioni, consulta queste risorse: