Tableau et 4D : Déployez votre WDC sur des pages Github

Dans l’article du blog intitulé  » Comment connecter Tableau à 4D « , vous avez appris à créer un connecteur de données Web (WDC) pour demander des données à 4D et les visualiser dans Tableau Public.

Il est maintenant temps d’héberger notre WDC ! Comme il n’utilise que des fichiers HTML et JavaScript, les pages Github sont la meilleure option pour les stocker. Cela permet aux autres de tester votre connecteur directement dans leur logiciel Tableau. Dans cet article de blog, je vais vous montrer comment procéder.

Bonus : je vous montrerai également comment déboguer votre WDC dans Tableau Public en utilisant Chrome. C’est parti !

Avant de commencer, assurez-vous d’avoir lu l’article précédent. Reprenons depuis la fin.

Créer la page GitHub

• Créez un nouveau dépôt sur GitHub en utilisant la convention de nom<nom d’utilisateur>.github.io (où nom d’utilisateur est votre nom d’utilisateur GitHub ou le nom de votre organisation sur GitHub). Cette étape est cruciale pour le fonctionnement du WDC.
• Clonez le référentiel sur votre machine locale.
• Dans le dossier du projet, ajoutez les fichiersinvoices.html et invoices.js, commitez et poussez les changements vers le dépôt GitHub.
• Lorsque vous naviguez sur https://username.github.io/invoices.html, la page Web hébergée doit s’afficher :

Note: Je suppose que vous êtes familier avec GitHub et que vous pouvez cloner, commiter, tirer et pousser facilement ! Si ce n’est pas le cas, ne vous inquiétez pas, nous avons une série d’articles de blog pour vous aider à démarrer.

Lancer la page Github depuis Tableau Public

Maintenant que votre WDC est en ligne, ouvrez une connexion à celui-ci dans Tableau Public.

Dans la boîte de dialogue WDC, entrez l’URL du WDC (https://username.github.io/invoices.html) comme indiqué dans l’image ci-dessous :

Mais d’abord … Utiliser 4D sur HTTPs

Notre page GitHub est chargée sur HTTPS, mais notre API est servie sur HTTP … ce qui entraînera une erreur de contenu mixte :

La solution consiste à utiliser 4D via HTTPS. Pour ce faire, vous devez utiliser le port 443 en cochant la case Activer HTTPS ( comme indiqué dans l’image ci-dessous), installer un certificat valide et exposer votre API afin qu’elle soit accessible via Internet.

Pour les besoins de cet article, j’ai utilisé un certificat auto-signé. Vous pouvez regarder cette vidéo du 4D Summit 2020 pour mieux comprendre la gestion des certificats.

De plus, comme je l’ai déjà dit, vous devrez exposer votre application REST locale à Internet, ce qui signifie que vous aurez besoin d’une adresse IP publique accessible de n’importe où sur Internet (et non celle mentionnée dans le fichier invoice.js, qui est une adresse privée accessible uniquement sur un réseau local).

Pour obtenir l’IP publique (et à des fins de démonstration), j’ai utilisé un outil de tunneling appelé ngrok qui fait en sorte que mon serveur web hébergé localement semble être hébergé sur un sous-domaine de ngrok.com :

Une fois que le certificat est prêt et placé à la racine de votre projet, que HTTPS est activé et que vous êtes armé d’une adresse IP publique, entrez l’URL de vos pages GitHub dans Tableau Public.

Cela fait apparaître le tableau qui peut maintenant être utilisé pour les visualisations :

Félicitations ! Votre WDC est déployé et accessible avec succès, et vous êtes prêt à visualiser vos données 4D !

Bonus : Déboguez votre WDC dans Tableau

Parfois, lorsque vous créez un WDC, il fonctionne sans problème dans le simulateur(http://127.0.0.1:8888/Simulator/index.html) mais ne parvient pas à charger les données dans Tableau Public. Lorsque vous cliquez sur le bouton Mettre à jour maintenant, l’écran de chargement s’affiche, mais les données n’apparaissent jamais :

Que faire ? Comment savoir exactement ce qui n’a pas fonctionné ?

Tableau vous donne la possibilité d’utiliser le navigateur Chrome et les Chrome DevTools pour déboguer votre WDC pendant qu’il fonctionne dans Tableau Public. Voici les étapes à suivre :

• Téléchargez Chrome pour Windows chrome-win.zip ou chrome-mac.zip pour macOS.
• Ouvrez l’invite de commande et démarrez Tableau avec l’option de débogage à distance.
  Pour macOS, ouvrez /Applications/Tableau\ Public.app –args –remote-debugging-port=9000
  Pour Windows, naviguez jusqu’au répertoire Tableau cd C:\Program Files\Tableau\Tableau \bin\ puis entrez tableau.exe –remote-debugging-port=9000
• Dans Tableau, entrez l’URL du CDM que vous voulez déboguer et appuyez sur Entrée. Une fois que la page de destination de votre CMD est chargée, vous voudrez attendre avant d’interagir avec la page afin de pouvoir lancer le débogueur Chrome et définir des points d’arrêt.
• Lancez Chrome et définissez l’URL sur http://localhost:9000
• Dans le navigateur Chrome, sélectionnez le CDM que vous souhaitez déboguer à partir de cette page :

• Une fois que le débogueur de Chrome est connecté, n’hésitez pas à rechercher d’éventuelles erreurs ou à définir vos points d’arrêt sur le code JavaScript de votre CMD.

Si vous souhaitez en savoir plus sur le débogage du WDC dans Tableau, consultez cette page de la documentation officielle. Bon débogage !

Et si vous avez des questions, n’hésitez pas à rejoindre la discussion sur le forum 4D.