Tableau und 4D: Stellen Sie Ihr WDC auf Github Pages bereit

Im Blogbeitrag Wie man Tableau mit 4D verbindet haben Sie gelernt, wie man einen Web Data Connector (WDC) erstellt, um Daten von 4D abzufragen und in Tableau Public zu visualisieren.

Jetzt ist es an der Zeit, unseren WDC zu hosten! Da er nur HTML- und JavaScript-Dateien verwendet, ist Github Pages die beste Option, um sie zu speichern. Dies ermöglicht es anderen, Ihren Connector direkt in ihrer Tableau-Software zu testen. In diesem Blogbeitrag zeige ich Ihnen, wie Sie vorgehen müssen.

Bonus: Ich zeige Ihnen auch, wie Sie Ihr WDC in Tableau Public mit Chrome debuggen können. Los geht’s!

Bevor wir beginnen, sollten Sie den vorherigen Blogbeitrag gelesen haben. Lassen Sie uns am Ende weitermachen.

Erstellen Sie die GitHub-Seite

• Erstellen Sie ein neues Repository auf GitHub unter Verwendung der Namenskonvention<Benutzername>.github.io (wobei Benutzername Ihr GitHub-Benutzername oder der Name Ihrer Organisation auf GitHub ist). Dieser Schritt ist wichtig, damit das WDC funktioniert.
• Klonen Sie das Repository auf Ihren lokalen Rechner.
• Fügen Sie im Projektordner die Dateien „invoices.html“ und „invoices.js “ hinzu, übertragen Sie sie und schieben Sie die Änderungen in das GitHub-Repository.
• Wenn Sie zu https://username.github.io/invoices.html navigieren, sollte die gehostete Webseite angezeigt werden:

Hinweis: Ich gehe davon aus, dass Sie mit GitHub vertraut sind und Klonen, Commit, Pull und Push problemlos durchführen können! Falls nicht, keine Sorge, wir haben eine Reihe von Blogbeiträgen, die Ihnen den Einstieg erleichtern.

Starten Sie die Github-Seite von Tableau Public aus

Jetzt, wo Ihr WDC online ist, öffnen Sie eine Verbindung zu ihm in Tableau Public.

Geben Sie im WDC-Dialogfeld die URL des WDC (https://username.github.io/invoices.html) ein, wie in der Abbildung unten gezeigt:

But First … 4D über HTTPs verwenden

Unsere GitHub-Seite wird über HTTPS geladen, aber unsere API wird über HTTP bedient … was zu einem Fehler bei gemischten Inhalten führt:

Die Lösung ist die Verwendung von 4D über HTTPS. Dazu müssen Sie den Port 443 verwenden und das Kästchen HTTPS aktivieren (wie in der Abbildung unten gezeigt), ein gültiges Zertifikat installiert haben und Ihre API offenlegen, damit sie über das Internet zugänglich ist.

Für diesen Blog-Beitrag habe ich ein selbstsigniertes Zertifikat verwendet. Zum besseren Verständnis der Zertifikatsverwaltung können Sie sich dieses Video vom 4D Summit 2020 ansehen.

Das bedeutet, dass Sie eine öffentliche IP-Adresse benötigen, auf die von überall im Internet zugegriffen werden kann (und nicht die in der Datei invoice.js erwähnte, die eine private Adresse ist, auf die nur innerhalb eines lokalen Netzwerks (LAN) zugegriffen werden kann).

Um die öffentliche IP-Adresse zu erhalten (und zu Demonstrationszwecken), habe ich ein Tunneling-Tool namens ngrok verwendet, das meinen lokal gehosteten Webserver so aussehen lässt, als würde er auf einer Subdomain von ngrok.com gehostet:

Sobald das Zertifikat fertig und im Stammverzeichnis Ihres Projekts platziert ist, HTTPS aktiviert ist und Sie über eine öffentliche IP-Adresse verfügen, geben Sie die URL Ihrer GitHub-Seiten in Tableau Public ein.

Daraufhin wird die Tabelle angezeigt, die nun für Visualisierungen verwendet werden kann:

Herzlichen Glückwunsch! Ihr WDC wurde erfolgreich bereitgestellt, der Zugriff ist erfolgt, und Sie können Ihre 4D-Daten visualisieren!

Bonus: Debuggen Sie Ihr WDC in Tableau

Wenn Sie ein WDC erstellen, kann es manchmal ohne Probleme im Simulator(http://127.0.0.1:8888/Simulator/index.html) funktionieren, aber es ist nicht in der Lage, Daten in Tableau Public zu laden. Wenn Sie auf die Schaltfläche Jetzt aktualisieren klicken, wird der Ladebildschirm angezeigt, aber die Daten werden nicht angezeigt:

Was ist zu tun? Wie kann man herausfinden, was genau schief gelaufen ist?

Tableau bietet Ihnen die Möglichkeit, den Chrome-Browser und die Chrome DevTools zu verwenden, um Ihr WDC zu debuggen, während es in Tableau Public ausgeführt wird. Hier sind die Schritte, die Sie befolgen müssen:

• Laden Sie Chrome für Windows chrome-win.zip oder chrome-mac.zip für macOS herunter.
• Öffnen Sie die Eingabeaufforderung und starten Sie Tableau mit der Option „Remote Debugging“.
  Für macOS öffnen Sie /Applications/Tableau\ Public.app –args –remote-debugging-port=9000
  Für Windows navigieren Sie zum Tableau-Verzeichnis cd C:\Programme\Tableau\Tableau \bin\ dann geben Sie tableau.exe –remote-debugging-port=9000
• Geben Sie in Tableau die URL des WDCs ein, das Sie debuggen möchten, und drücken Sie die Eingabetaste. Nachdem Ihre WDC-Landing Page geladen ist, sollten Sie warten, bevor Sie mit der Seite interagieren, damit Sie den Chrome-Debugger starten und Haltepunkte setzen können.
• Starten Sie Chrome und setzen Sie die URL auf http://localhost:9000.
• Wählen Sie im Chrome-Browser das WDC aus, das Sie auf dieser Seite debuggen möchten:

• Sobald der Chrome-Debugger verbunden ist, können Sie nach Fehlern suchen oder Haltepunkte für den JavaScript-Code Ihres WDC setzen.

Wenn Sie mehr über das Debuggen von WDC in Tableau wissen möchten, lesen Sie diese Seite der offiziellen Dokumentation. Viel Spaß beim Debuggen!

Und wenn Sie Fragen haben, können Sie sich gerne an der Diskussion im 4D Forum beteiligen.