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 pagina web. Chiamerai una serie di metodi SDK che creeranno automaticamente un iframe, incorporerai al suo interno i contenuti di Looker e configureranno le comunicazioni tra l'iframe e la tua pagina web.

Prerequisiti

  • Avere un'istanza di Looker in esecuzione
  • Disporre di una dashboard di Looker da incorporare nell'applicazione web o nella pagina web.
  • Devi conoscere 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 di Looker incorporati con l'SDK Embed

Che cosa ti serve

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

2. Preparazioni

Devi preparare l'HTML e l'istanza di Looker prima di poter eseguire l'incorporamento con l'SDK di incorporamento.

Aggiungere l'elemento contenitore dell'iframe incorporato

All'interno del codice HTML della pagina web, crea un elemento div e definisci un attributo id su di esso.

<div id="looker-embed" />

Inserisci il dominio dell'incorporamento nella lista consentita nell'istanza di Looker

Devi inserire nella lista consentita il dominio dell'embed nell'istanza Looker.

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

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

Nel campo Lista consentita di domini incorporati, inserisci il dominio dell'embed. 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 incorporamenti dell'SDK per "creare" i contenuti Looker incorporati.

Inizializza l'SDK

Importa e poi inizializza l'SDK con il dominio della tua istanza Looker.

// Import the Embed SDK as LookerEmbedSDK

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

Creare il generatore di embed

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

Chiama il metodo createDashboardWithId() SDK con l'ID dashboard per creare uno strumento per la creazione di incorporamenti. Questo metodo restituisce il generatore di embed.

LookerEmbedSDK.createDashboardWithId(12345)

Configurare e creare il generatore di incorporamenti

Ora configuriamo lo strumento per la creazione degli incorporamenti prima di dirgli di creare l'iframe incorporato. Aggiungi il seguente esempio di codice direttamente dopo la chiamata al metodo createDashboardWithId() dell'esempio di codice precedente.

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

Ogni metodo dello strumento di creazione degli incorporamenti restituisce il generatore di incorporamenti stesso, quindi le chiamate al metodo vengono concatenate. Vediamo ciascun metodo:

  1. Il metodo appendTo() determina l'elemento principale dell'iframe. Passiamo l'ID dell'elemento HTML che abbiamo definito in precedenza nel passaggio della preparazione.
  2. Il metodo withFrameBorder() imposta l'attributo frame-border sull'iframe. Questo è uno dei vari 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 tua pagina web con l'SDK Embed.

4. Inviare e ricevere messaggi incorporati

Ora vediamo come inviare e ricevere messaggi con i contenuti di Looker incorporati tramite l'SDK Embed. I messaggi che l'applicazione invia all'iframe vengono chiamati come azioni e quelli che l'applicazione riceve dall'iframe viene chiamato come eventi.

Ricevere eventi

Utilizziamo il nostro codice precedente. Per ascoltare gli eventi, chiamiamo il metodo on() del generatore di embed 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 per l'evento dashboard:run:complete proveniente dall'iframe quando viene creato l'iframe. L'evento ci indica quando il caricamento della dashboard è terminato. Controlla il riferimento degli eventi per altri eventi da ascoltare.

Azioni di invio

Continuiamo con il codice precedente. Per inviare azioni all'iframe, chiamiamo il metodo connect() dello strumento di creazione degli incorporamenti dopo aver chiamato il metodo build() per inizializzare l'invio e la ricezione dei 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 embed che rappresenta l'iframe incorporato dopo l'inizializzazione del meccanismo di invio e ricezione dei messaggi.
  2. Chiamiamo il metodo send() sull'oggetto di incorporamento per inviare un'azione dashboard:run. Consulta la documentazione di riferimento sulle azioni per altre azioni da inviare.
  3. Aggiungiamo un metodo catch() nel caso in cui si verifichino errori durante l'inizializzazione.

Controllo finale

Dopo aver completato 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 di Looker incorporata.

5. Informazioni aggiuntive

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