Comment intégrer Looker avec le SDK Embed

Comment intégrer Looker avec le SDK Embed

À propos de cet atelier de programmation

Dernière mise à jour : juil. 28, 2023

Rédigé par Jeremy Chang

1. Avant de commencer

Dans cet atelier de programmation, nous allons utiliser le SDK Embed de Looker pour intégrer un tableau de bord Looker dans votre page Web. Vous allez appeler une série de méthodes SDK qui créeront automatiquement un iFrame, y intégreront votre contenu Looker et établiront les communications entre votre iFrame et votre page Web.

Prérequis

• disposer d'une instance Looker en cours d'exécution ;
• disposer d'un tableau de bord Looker à intégrer dans votre application Web ou votre page Web ;
• Familiarisez-vous avec les promesses JavaScript et JavaScript.

Points abordés

• Intégrer en mode privé votre contenu Looker avec le SDK Embed
• Envoyer et recevoir des messages (actions et événements) avec votre contenu Looker intégré à l'aide du SDK Embed

Prérequis

• Accès au code HTML et JavaScript de votre code d'interface
• Accès aux paramètres d'intégration administrateur dans votre instance Looker

Remarque:Vous pouvez également intégrer du contenu Looker sans le SDK d'intégration de Looker.

2. Préparations

Vous devez préparer votre code HTML et votre instance Looker avant de pouvoir l'intégrer avec le SDK Embed.

Ajouter l'élément conteneur de l'iFrame d'intégration

Dans le code HTML de votre page Web, créez un élément div et définissez-y un attribut id.

<div id="looker-embed" />

Ajouter le domaine de l'élément intégré à la liste d'autorisation dans l'instance Looker

Vous devez ajouter le domaine d'intégration à la liste d'autorisation de votre instance Looker.

Déterminez le domaine de la page Web qui héberge votre contenu Looker intégré. Imaginons que l'URL de la page Web est https://mywebsite.com/with/embed et que le domaine de la page Web soit https://mywebsite.com.

Accédez à la page Intégrer dans la section Administration de votre instance Looker. https://your_instance.looker.com/admin/embed

Dans le champ Embedded Domain Allowlist (Liste d'autorisation de domaine intégré), saisissez le domaine de l'élément intégré. Après l'avoir saisi, appuyez sur la touche Tabulation pour que le domaine s'affiche dans une zone. N'incluez pas de barre oblique finale /.

Sélectionnez le bouton Update (Mettre à jour).

Remarque:Vous pouvez utiliser le caractère générique * dans votre domaine. Par exemple, l'entrée https://*.mycompany.com ajoute https://analytics.mycompany.com et https://data.mycompany.com à la liste d'autorisation.

3. Créer l'élément intégré

À présent, créons et configurons le compilateur d'intégrations du SDK votre contenu Looker intégré.

Initialiser le SDK

Commencez par importer, puis initialiser le SDK avec le domaine de votre instance Looker.

// Import the Embed SDK as LookerEmbedSDK

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

Vous devez inclure le numéro de port dans le domaine de l'instance Looker s'il est nécessaire pour atteindre l'instance Looker depuis un navigateur client, par exemple instance_name.looker.com:1919

Créer l'outil de création d'éléments intégrés

Ensuite, déterminez l'ID du tableau de bord Looker que vous souhaitez intégrer. Si votre tableau de bord est associé à l'adresse instance_name.looker.com/dashboard/12345, son ID est 12345.

Appelez la méthode createDashboardWithId() du SDK avec l'ID du tableau de bord pour créer un compilateur d'éléments intégrés. Cette méthode renvoie le compilateur d'éléments intégrés.

LookerEmbedSDK.createDashboardWithId(12345)

Configurer et créer le compilateur d'éléments intégrés

À présent, configurons le compilateur d'intégrations avant de lui demander de créer l'iFrame intégré. Ajoutez l'exemple de code suivant directement après l'appel de méthode createDashboardWithId() de l'exemple de code précédent.

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

Chaque méthode du compilateur d'éléments intégrés renvoie celui-ci. Nous associons donc les appels de méthode. Examinons chacune de ces méthodes:

1. La méthode appendTo() détermine l'élément parent de l'iFrame. Nous transmettons l'ID de l'élément HTML que nous avons défini précédemment à l'étape de préparation.
2. La méthode withFrameBorder() définit l'attribut frame-border sur l'iFrame. Il s'agit de l'une des méthodes permettant de définir des attributs HTML sur l'iFrame.
3. La méthode build() crée l'iFrame avec les attributs HTML configurés.

Remarque:Consultez le fichier embed_builder.ts pour connaître les autres méthodes définies dans le compilateur d'éléments intégrés.

Dernière vérification

Avec les étapes précédentes, votre code devrait se présenter comme suit:

// Import the Embed SDK as LookerEmbedSDK

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

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

Votre tableau de bord Looker est désormais intégré à votre page Web grâce au SDK Embed.

4. Envoyer et recevoir des messages intégrés

Voyons maintenant comment envoyer et recevoir des messages avec votre contenu Looker intégré à l'aide du SDK Embed. Nous appelons les messages que votre application envoie à l'iFrame en tant qu'actions et ceux que votre application reçoit à partir de l'iFrame en tant qu'événements.

Recevoir des événements

Reprenons notre code précédent. Pour écouter des événements, nous appelons la méthode on() du compilateur d'éléments intégrés avant d'appeler la méthode build().

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

Ici, nous appelons la méthode on() pour définir un écouteur d'événements sur l'événement dashboard:run:complete provenant de l'iFrame lorsque celui-ci est créé. L'événement nous indiquera quand le chargement du tableau de bord sera terminé. Consultez la référence de l'événement pour découvrir d'autres événements à écouter.

Envoyer des actions

Continuons avec le code précédent. Pour envoyer des actions vers l'iFrame, nous appelons la méthode connect() du compilateur d'éléments intégrés après avoir appelé la méthode build() pour initialiser l'envoi et la réception des messages avec l'iFrame.

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

Examinons cet exemple de code:

1. Nous appelons la méthode connect(), qui renvoie une promesse. Une fois le mécanisme d'envoi et de réception des messages initialisé, la promesse renvoie un objet d'intégration représentant l'iFrame incorporé.
2. Nous appelons la méthode send() sur l'objet intégré pour envoyer une action dashboard:run. Consultez la documentation de référence sur les actions pour connaître les autres actions à envoyer.
3. Nous ajoutons une méthode catch() au cas où des erreurs se produiraient lors de l'initialisation.

Remarque:Le fichierdashboard_client.ts fournit également des méthodes d'assistance qui appelleront la méthode send() avec l'action souhaitée.

Vous devez appeler la méthode connect() pour envoyer des actions ET pour écouter des événements. Si votre page Web n'écoute que les événements, vous devez tout de même appeler la méthode connect() pour initialiser le mécanisme d'envoi et de réception des messages.

Dernière vérification

Avec les étapes précédentes, votre code devrait maintenant se présenter comme suit:

// 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!')

Vous pouvez désormais communiquer avec votre tableau de bord Looker intégré !

5. Informations complémentaires

Félicitations ! Vous pouvez désormais utiliser le SDK Embed pour intégrer de manière privée votre tableau de bord Looker, et envoyer ou recevoir des messages depuis l'iFrame. Pour en savoir plus, consultez les ressources suivantes:

• Dépôt du SDK Embed pour en savoir plus sur l'intégration de Looker, en particulier si vous souhaitez utiliser l'authentification unique pour intégrer du contenu Looker.
• Documentation de référence sur les événements pour tous les événements disponibles et leurs propriétés
• Documentation de référence sur les actions pour toutes les actions disponibles et leurs propriétés
• Bonnes pratiques de sécurité pour l'intégration de votre contenu Looker