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:
- Il metodo
appendTo()
determina l'elemento principale dell'iframe. Passiamo l'ID dell'elemento HTML che abbiamo definito in precedenza nel passaggio della preparazione. - Il metodo
withFrameBorder()
imposta l'attributo frame-border sull'iframe. Questo è uno dei vari metodi che definiscono gli attributi HTML nell'iframe. - 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:
- 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. - Chiamiamo il metodo
send()
sull'oggetto di incorporamento per inviare un'azionedashboard:run
. Consulta la documentazione di riferimento sulle azioni per altre azioni da inviare. - 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:
- Incorpora il repository SDK per ulteriori informazioni su come incorporare Looker, in particolare se vuoi incorporare tramite SSO i contenuti di Looker.
- Riferimento agli eventi per tutti gli eventi disponibili e le relative proprietà
- Riferimento delle azioni per tutte le azioni disponibili e le relative proprietà
- Best practice per la sicurezza relative all'embedding dei contenuti di Looker