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

Traduit automatiquement de Deepl

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 :

blank

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 :

blank

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.

blank

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 :

blank

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 :

blank

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 :

blank

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 :

blank

  • 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.

Avatar
- Responsable du marketing produit - Intissar a rejoint 4D en 2017 en tant que responsable du marketing produit. Elle travaille en étroite collaboration avec les équipes de produits, de marketing, d'ingénierie et de support technique pour mettre en évidence le " pourquoi ", le " comment " et le " quoi " des nouvelles fonctionnalités et des mises à jour auprès de différents publics. Cette proximité lui permet d'élaborer des cadres de messages et de rédiger des contenus approfondis et des échantillons de code pour le blog et le site Web de 4D.Après avoir obtenu un diplôme d'ingénieur en informatique à l'université VINCI, Intissar a travaillé dans plusieurs startups en tant qu'ingénieur logiciel. Son expérience pratique comprend la spécification, la conception et le développement de logiciels, la formation et l'assistance aux utilisateurs, ainsi que la gestion d'équipe.