Im 4D Webinar – Wie Sie Tableau mit 4D verbinden, gab William Taylor (Technical Account Manager, 4D US) einen Überblick über das Tableau Tool und wie es zur Visualisierung Ihrer 4D Daten eingesetzt werden kann. In diesem Blogbeitrag gehen wir auf die technischen Details ein, um Ihnen ein tieferes Verständnis der Funktionsweise zu vermitteln. So können Sie z.B. mit 4D REST und Tableau eine Visualisierung der höchsten Rechnungssumme erstellen!

TIPP: Rechnungen mit 4D und Tableau

Was ist Tableau?

Tableau ist ein Datenvisualisierungstool, das für Business Intelligence verwendet wird. Es hilft bei der Vereinfachung von Rohdaten in ein leicht verständliches Format. Die Hauptaufgabe von Tableau ist das Verbinden und Extrahieren von Daten, die an verschiedenen Orten gespeichert sind. Es kann Daten von jeder Plattform abrufen und Daten aus jeder Datenbank extrahieren … einschließlich einer 4D-Datenbank. Die extrahierten Daten können dann mit Tableau Desktop verbunden werden. Dort arbeitet ein Datenanalyst mit ihnen und entwickelt Visualisierungen.

Um Ihre Daten aus einer bestehenden API direkt in Tableau zu importieren und sehr einfach Dashboards zu erstellen, müssen Sie einen Web Data Connector verwenden.

All dies wird in diesem Blogbeitrag behandelt, aber zuerst wollen wir mit den Voraussetzungen beginnen!

Voraussetzungen

In diesem Blog-Beitrag gehen wir wie folgt vor

1. 4D REST konfigurieren und die API einrichten
2. Das Web Data Connector SDK abrufen und einrichten
3. Einen Web Data Connector erstellen
4. Verbindung zu Tableau herstellen
5. Ein Dashboard erstellen

4D REST konfigurieren und die API einrichten

Anwendungsbeispiel: In diesem Blogpost verwenden wir die Anwendung Invoice, die bereits auf GitHub verfügbar ist. Sie können das Repository gerne herunterladen oder klonen.

Um über REST auf Daten aus der 4D Datenbank zugreifen zu können, müssen wir unsere 4D Datenbank konfigurieren. Sie wissen doch noch, wie man das macht, oder?

Kommt es Ihnen bekannt vor, wenn Sie auf der Seite „Web/REST-Ressource“ (in unserem Fall die Anwendung “ Rechnung“ ) die Option „Als REST-Server bereitstellen“ aktivieren und sicherstellen, dass die Datenquellentabellen (d. h. die Tabellen, aus denen Sie Daten abrufen möchten) in REST bereitgestellt werden? Wenn Ihnen das nicht bekannt vorkommt, sollten Sie sich diesen Blog-Beitrag ansehen, um alle Details zu erfahren.

Um sicherzustellen, dass Ihre API korrekt eingerichtet ist und Ihre Daten in 4D mit REST-Anfragen gelesen werden können, öffnen Sie einen Webbrowser und geben Sie „/rest“ nach ADDRESS: PORT. Alle 4D REST URL-Anfragen beginnen mit /rest.

Lassen Sie uns zum Beispiel überprüfen, ob wir alle Entitäten der Datenklasse [INVOICES] erhalten:

Vergessen Sie nicht, CORS zu aktivieren!

Um CORS-Beschränkungen zu vermeiden (Ressourcen unterschiedlicher Herkunft, die nicht miteinander interagieren dürfen), müssen Sie CORS in 4D zulassen. Dies ist von der Benutzeroberfläche aus möglich, dank einer neuen Einstellung auf der Registerkarte Einstellungen > Web > Optionen (II). Sie können zulässige Domänennamen (in unserem Fall 127.0.0.1:8888 – das werden Sie später sehen) und verfügbare Methoden hinzufügen. Wenn der Server das nächste Mal gestartet wird, werden die Domänen und Methoden automatisch verwendet. In diesem Blog-Beitrag werden die Details näher erläutert und die Vorgehensweise gezeigt.

Nun, da unsere Daten bereit sind und CORS aktiviert ist, können wir zum Tableau-Teil übergehen!

Web Data Connector (wdc)

Was ist ein WDC?

Tableau hat keine native 4D Schnittstelle, aber wir müssen irgendwie auf die Daten zugreifen. Wie können wir sie also mit 4D verbinden?

An dieser Stelle kommt der Web Data Connector(WDC) von Tableau ins Spiel. WDC ist eine Anwendung, die auf einem Node-Web-Server läuft. Man kann ihn sich als eine Middleware-Schicht vorstellen, die zwischen Tableau und 4D sitzt. Tableau ruft den WDC auf und der darin enthaltene JavaScript-Code fordert Daten aus Datenquellen wie 4D an.

Einrichten des WDC

Im Grunde müssen wir also eine HTML-Datei einrichten, die JavaScript-Code aufruft, der:

• eine Verbindung zu Webdaten über die REST-API herstellt,
• die empfangenen 4D Daten in das JSON Format konvertiert,
• die Daten an Tableau weitergibt.

Die gute Nachricht ist, dass Tableau ein kostenloses Softwarepaket (mit Beispielen) zur Verfügung stellt, das wir für den Einstieg verwenden können! Der Konnektor ist auch sehr gut dokumentiert, also werfen Sie einen Blick auf diese Seite, um mehr Informationen über die verschiedenen Schritte zu erhalten.

• Stellen Sie sicher, dass Sie die folgenden Abhängigkeiten installiert haben: git, node und npm.
• Holen Sie sich das WDC SDK, indem Sie es entweder herunterladen oder klonen: git clone https://github.com/tableau/webdataconnector.git
• Wechseln Sie in der Eingabeaufforderung in das Verzeichnis, in das Sie das Repository heruntergeladen haben: cd webdataconnector
• Installieren Sie die Abhängigkeiten mit npm: npm install –production
• Starten Sie den Test-Webserver: npm start
• Öffnen Sie einen Browser und navigieren Sie zu http://127.0.0.1:8888/Simulator/index.html.
• Der WDC-Simulator wird angezeigt:

Herzlichen Glückwunsch! Ihre Umgebung ist nun richtig eingerichtet. Lassen Sie uns nun unseren Connector erstellen, um eine Verbindung zu 4D herzustellen und die Daten der Invoice Anwendung zu laden.

Hinweis: Tableau ist sehr gut dokumentiert. Alle folgenden Schritte zur Erstellung Ihres eigenen WDC wurden von dieser Seite übernommen. Dort finden Sie weitere technische Details.

Erstellen Sie einen Connector zur Verbindung von Tableau und 4D

Wie bereits erwähnt, müssen wir einen WDC erstellen, damit unsere REST API von Tableau genutzt werden kann. Das bedeutet, dass wir zwei Dinge erstellen müssen:

1. Eine HTML-Seite, die auf unseren JavaScript-Code und auf die WDC-Bibliothek verweist. Die Seite enthält auch ein einfaches Schaltflächenelement, das veranschaulicht, wie Benutzer mit dem Connector interagieren können, bevor sie Daten erhalten.
2. Eine JavaScript-Datei, in der wir das Schema definieren und die 4D-Daten erhalten, die an Tableau übergeben werden sollen.

Erstellen Sie die HTML-Seite (die Benutzeroberfläche)

Erstellen Sie im Ordner webdataconnector, den wir von GitHub geklont haben, einen weiteren Ordner namens Invoices. Erstellen Sie im Ordner Invoices eine Seite invoices.html und fügen Sie den folgenden Code mit Copy-Paste ein:

<html>
  <head> 
     <meta http-equiv="Cache-Control" content="no-store" /> 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" crossorigin="anonymous"></script> 
     <script src="https://connectors.tableau.com/libs/tableauwdc-2.3.latest.js" type="text/javascript"></script> 
     <script src="invoices.js" type="text/javascript"></script> 
 </head> 
 <body> 
  <div class="container container-table"> 
   <div class="row vertical-center-row"> 
    <div class="text-center col-md-4 col-md-offset-4"> 
     <button type="button" id="submitButton" class="btn btn-success" style="margin: 10px;">Get Data from 4D!</button> 
    </div> 
  </div> 
 </div> 
</body> 
</html>

Die HTML-Seite ist recht einfach zu verstehen. Sie ruft auf:

1. Bootstrap zur Verschönerung und Formatierung der Seite,
2. jQuery, um die JSON-Daten abzurufen,
3. die Hauptbibliothek(tableauwdc-2.3.latest.js) der WDC-API,
4. die JavaScript-Datei, die wir als nächstes erstellen werden, in der unsere Logik abläuft (invoices.js).
5. Und schließlich eine einfache Schaltfläche„Get Data from 4D!„die es den Benutzern ermöglicht, mit dem Connector zu interagieren.

Erstellen Sie die JS-Datei (die Logik)

Kopieren Sie die Dateistruktur in die Datei invoices.js. Hier sind wir an zwei Funktionen interessiert:

• getSchema – hier legen Sie fest, wie die Daten auf eine oder mehrere Tabellen abgebildet werden sollen.

myConnector.getSchema = function (schemaCallback) { 
 var cols = [ { 
  id: "invoiceNum", 
  alias: "The Invoice Number", 
  dataType: tableau.dataTypeEnum.string 
 }, { 
  id: "total", 
  alias: "The Invoice Amount", 
  dataType: tableau.dataTypeEnum.int 
 }]; 
var tableSchema = { id: "invoices", alias: "List of Invoices", columns: cols }; 
schemaCallback([tableSchema]); };

• getData – hier erhalten Sie Ihre 4D-Daten und übergeben sie an Tableau. Die jQuery-Funktion $.getJSON holt die Daten aus unserer 4D-Datenbank und verwendet einen Success-Handler, um die zurückgegebenen Daten in einem Antwortparameter (resp) zu speichern. Dann iterieren wir einfach über die Elemente im JSON-Objekt und speichern die Daten im tableData-Array:

myConnector.getData = function(table, doneCallback) { 
$.getJSON("http://192.168.223.26:80/rest/INVOICES", function(resp) {
 var result = resp.__ENTITIES, tableData = []; 
  for (var i = 0, len = result.length; i < len; i++) { 
   tableData.push({ 
    "invoiceNum": result[i].Invoice_Number, 
    "total": result[i].Total
     }); 
   } 
table.appendRows(tableData); 
doneCallback(); 
 });
};

• Schließlich fügen wir den Ereignis-Listener hinzu, der auf den Klick auf die Schaltfläche reagiert, die wir in der HTML-Datei erstellt haben.

$(document).ready(function () { 
  $("#submitButton").click(function () { 
   tableau.connectionName = "Invoices"; 
   tableau.submit(); 
 }); 
});

Jetzt, wo unser Code fertig ist, können wir ihn testen!

Testen Sie den Connector

Öffnen Sie den Simulator(öffnen Sie einen Browser und navigieren Sie zu http://127.0.0.1:8888/Simulator/index.html), und fügen Sie den Pfad zu Ihrer HTML-Datei in die URL des Konnektors ein:

Laden Sie Ihren Konnektor, und klicken Sie auf die Schaltfläche Get Data from 4D!

Sie sollten Ihre 4D Daten in einer Tableau Tabelle sehen, wenn Sie auf die Schaltfläche Fetch Table Data klicken:

Bravo, Sie haben es geschafft! Nun ist es an der Zeit, den Connector in Tableau Public zu testen.

Hinweis: Wenn Sie einen oder zwei Schritte verpatzt haben, kein Problem! Ich habe alle notwendigen Dateien für Sie zusammengestellt. Laden Sie also den HDI herunter, legen Sie den Ordner invoices auf der gleichen Ebene wie die Datei README.md im Ordner webdataconnector ab und machen Sie von dort aus weiter!

WDC in Tableau Public verwenden

Tableau Public ist die kostenlose Version von Tableau Desktop, mit der Sie Daten in wenigen Minuten sehen und verstehen können. Die kostenlose Version verfügt nicht über alle nativen Konnektoren, aber alles, was wir brauchen, ist der Web Data Connector und der ist verfügbar!

Laden Sie das Toolherunter, starten Sie es, und:

1. Klicken Sie auf Web Data Connector
2. Laden Sie den Web Data Connector, den wir gerade erstellt haben, mit der URL: http://127.0.0.1:8888/invoices/invoices.html
3. Klicken Sie auf die Schaltfläche Get Data from 4D:

Klicken Sie anschließend auf die Schaltfläche Jetzt aktualisieren. Diese Aktion wird die Funktion getData auslösen, die wir zuvor hinzugefügt haben.

Klicken Sie nun auf Blatt 1 (siehe Abbildung unten). Hier werden Sie Ihre Diagramme erstellen.

Nehmen wir zum Beispiel an, ich möchte eine visuelle Darstellung der höchsten Rechnung.

Ziehen Sie die Rechnungsnummer (aus dem Abschnitt Dimensionen auf der linken Seite) in den Abschnitt Spalten oben auf dem Blatt. Ziehen Sie dann die Rechnungssumme (aus dem Abschnitt Maße auf der linken Seite) in den oberen Abschnitt Zeilen. Und nun sehen Sie, wie die Magie geschieht:

Voilà! Die höchste Rechnung ist diejenige mit der ID INV00042 und einem Gesamtbetrag von 2.284.

Das Tableau-Tool ist unglaublich reichhaltig und leistungsstark, und die Dokumentation ist gut geschrieben. Schauen Sie es sich an und probieren Sie es aus, wenn Sie noch weiter gehen wollen. In einem der nächsten Blogposts werden wir sehen, wie wir unseren Tableau Web Data Connector auf GitHub hosten können.