Comment connecter Tableau avec 4D

septembre 8, 2020 10 min de lecture

Dans le webinaire 4D – Comment connecter Tableau avec 4D, William Taylor (Technical Account Manager, 4D US) a donné un aperçu de l’outil Tableau et de la manière dont il peut être utilisé pour visualiser vos données 4D. Dans ce billet de blog, nous allons entrer dans les détails techniques pour vous permettre de mieux comprendre le fonctionnement de l’outil. Cela vous permettra de construire, par exemple, un visuel montrant le total le plus élevé de factures avec rien de plus que 4D REST et Tableau !

Astuce : Facturer avec 4D et Tableau

Qu’est-ce que Tableau ?

Tableau est un outil de visualisation de données utilisé pour la business intelligence. Il permet de simplifier les données brutes dans un format facilement compréhensible. La principale fonction de Tableau est de connecter et d’extraire des données stockées à différents endroits. Il peut extraire des données de n’importe quelle plateforme et de n’importe quelle base de données… y compris une base de données 4D. Les données extraites peuvent ensuite être connectées à Tableau Desktop. C’est là qu’un analyste de données travaille avec elles et développe des visualisations.

Pour importer vos données depuis une API existante directement dans Tableau et créer des tableaux de bord très facilement, vous devrez utiliser un Web Data Connector.

Tout cela sera abordé dans cet article de blog, mais commençons par les conditions préalables !

Conditions préalables

Dans ce billet de blog, nous allons :

Configurer 4D REST et mettre en place l’API.
Obtenir et configurer le SDK Web Data Connector
Créer un connecteur de données Web
Se connecter à Tableau
Créer un tableau de bord

Configurer 4D REST et paramétrer l’API

Exemple d’application: Dans ce billet de blog, nous allons utiliser l’application Invoice qui est déjà disponible sur GitHub. N’hésitez pas à télécharger ou à cloner le référentiel.

Afin d’accéder aux données de la base de données 4D via REST, nous devons configurer notre base de données 4D. Vous vous souvenez comment faire, n’est-ce pas ?

Est-ce que cocher l’option « Expose as REST server » dans la page « Web/REST resource » (dans notre cas, l’application Invoice ) et s’assurer que les tables de la source de données (c’est-à-dire d’où vous voulez tirer les données) sont exposées en REST vous semble familier ? Si cela ne vous dit rien, consultez cet article de blog pour en savoir plus.

Pour vous assurer que votre API est correctement configurée et que vos données peuvent être lues dans 4D à l’aide de requêtes REST, ouvrez un navigateur Web et insérez « /rest » après ADDRESS : PORT. Toutes les requêtes URL REST de 4D commencent par /rest.

Par exemple, vérifions que nous obtenons toutes les entités de la classe de données [INVOICES] :

N’oubliez pas d’activer CORS !

Pour éviter les restrictions CORS (ressources d’origines différentes qui ne peuvent pas interagir entre elles), assurez-vous d’autoriser CORS dans 4D. Cela peut être fait depuis l’interface utilisateur grâce à un nouveau paramètre dans l’onglet Paramètres > Web > Options (II). Vous pouvez ajouter les noms de domaine autorisés (127.0.0.1:8888 dans notre cas – vous verrez cela plus tard), et les méthodes disponibles. Lors du prochain démarrage du serveur, les domaines et les méthodes seront utilisés automatiquement. Cet article de blog est disponible pour expliquer plus en détail les détails et vous montrer comment faire.

Maintenant que nos données sont prêtes et que CORS est activé, passons à la partie Tableau !

Web Data Connector (wdc)

Qu’est-ce qu’un WDC ?

Tableau n’a pas d’interface 4D native, mais nous devons accéder aux données d’une manière ou d’une autre. Alors comment pouvons-nous les connecter à 4D ?

C’est là que le Web Data Connector(WDC) de Tableau entre en jeu. Le WDC est une application qui s’exécute dans un serveur web nodal. Vous pouvez la considérer comme une couche intermédiaire entre Tableau et 4D. Tableau appelle le WDC et le code JavaScript qu’il contient demande des données à des sources de données comme 4D.

Configurer le WDC

En gros, nous devons mettre en place un fichier HTML qui appelle le code JavaScript qui :

se connecte aux données Web via l’API REST,
convertit les données 4D reçues au format JSON,
transmet les données à Tableau.

La bonne nouvelle est que Tableau fournit un pack logiciel gratuit (avec des exemples) que nous pouvons utiliser pour commencer ! Le connecteur est également très bien documenté, alors jetez un œil à cette page pour plus d’informations sur les différentes étapes ci-dessous.

Assurez-vous d’avoir installé les dépendances suivantes : git, node et npm.
Obtenez le WDC SDK en le téléchargeant ou en le clonant: git clone https://github.com/tableau/webdataconnector.git
Dans l’invite de commande, passez dans le répertoire où vous avez téléchargé le référentiel : cd webdataconnector
Installez les dépendances avec npm : npm install –production
Démarrez le serveur web de test : npm start
Ouvrez un navigateur et accédez à http://127.0.0.1:8888/Simulator/index.html
Le simulateur WDC apparaît :

Félicitations ! Votre environnement est correctement configuré. Créons maintenant notre connecteur pour nous connecter à 4D et charger les données de l’application Invoice.

Note: Tableau est très bien documenté. Toutes les étapes suivantes pour créer votre propre WDC sont tirées de cette page. Consultez-la pour plus de détails techniques.

Créer un connecteur pour connecter Tableau et 4D

Comme nous l’avons dit précédemment, pour que notre API REST puisse être utilisée par Tableau, nous devons créer un WDC. Cela signifie créer deux choses :

Une page HTML qui établit un lien vers notre code JavaScript et vers la bibliothèque WDC. La page contient également un élément de bouton simple qui illustre comment les utilisateurs peuvent interagir avec le connecteur avant d’obtenir des données.
Un fichier JavaScript dans lequel nous définissons le schéma et obtenons les données 4D à transmettre à Tableau.

Créer la page HTML (l’interface utilisateur)

Dans le dossier webdataconnector que nous avons cloné depuis GitHub, créez un autre dossier nommé Invoices. Dans le dossier Invoices, créez une page invoices.html et copiez-collez le code suivant :

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

La page HTML est assez simple à comprendre. Elle fait appel à :

Bootstrap pour embellir et mettre en forme la page,
jQuery pour obtenir les données JSON,
la bibliothèque principale(tableauwdc-2.3.latest.js) de l’API WDC,
le fichier JavaScript que nous allons créer ensuite et dans lequel se déroulera notre logique (factures.js).
Et enfin, un simple bouton« Get Data from 4D !« qui permettra aux utilisateurs d’interagir avec le connecteur.

Créer le fichier JS (la logique)

Copiez la structure du fichier dans le fichier invoices.js. Ici, nous nous intéressons à deux fonctions :

getSchema – où vous définissez comment mapper les données à un ou plusieurs tableaux.

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 – où vous obtenez vos données 4D et les transmettez à Tableau. La fonction jQuery $.getJSON récupère les données de notre base de données 4D et utilise un gestionnaire de succès pour stocker les données renvoyées dans un paramètre de réponse (resp). Ensuite, nous itérons simplement sur les éléments de l’objet JSON et stockons les données dans le tableau tableData:

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(); 
 });
};

Enfin, nous ajoutons l’écouteur d’événements qui répond au clic sur le bouton que nous avons créé dans le fichier HTML.

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

Maintenant que notre code est prêt, nous allons le tester !

Tester le connecteur

Ouvrez le simulateur(ouvrez un navigateur et naviguez vers http://127.0.0.1:8888/Simulator/index.html), et introduisez le chemin vers votre fichier HTML dans l’URL du connecteur :

Chargez votre connecteur, et cliquez sur le bouton Get Data from 4D!

Vous devriez voir vos données 4D dans une table Tableau en cliquant sur le bouton Fetch Table Data:

Bravo, vous avez réussi ! Il est maintenant temps de tester le connecteur dans Tableau Public.

Note: Si vous avez raté une ou deux étapes, ne vous inquiétez pas ! J’ai rassemblé tous les fichiers nécessaires pour vous. Alors allez-y, téléchargez le HDI, placez le dossier des factures au même niveau que le fichier README.md dans le dossier webdataconnector et continuez à partir de là !

Utiliser WDC dans Tableau Public

Tableau Public est la version gratuite de Tableau Desktop qui vous permet de voir et de comprendre les données en quelques minutes. La version gratuite ne dispose pas de tous les connecteurs natifs, mais tout ce dont nous avons besoin est le Web Data Connector et il EST disponible !

Téléchargez l’outil, démarrez-le et.. :

Cliquez sur Web Data Connector
Chargez le Web Data Connector que nous venons de créer en utilisant l’URL: http://127.0.0.1:8888/invoices/invoices.html
Cliquez sur le bouton Get Data from 4D:

Ensuite, cliquez sur le bouton Update Now. Cette action va déclencher la fonction getData que nous avons ajoutée précédemment.

Cliquez maintenant sur la feuille 1 (dans l’image ci-dessous). C’est ici que vous allez créer vos graphiques.

Par exemple, disons que je veux une représentation visuelle de la facture la plus élevée.

Faites glisser le numéro de facture (de la section Dimensions à gauche) dans la section Colonnes en haut. Faites ensuite glisser le total de la facture (de la section Mesures, à gauche) dans la section Rangs, en haut. Regardez maintenant la magie opérer :

Voilà ! La facture la plus élevée est celle dont l’ID est INV00042 et dont le montant total est de 2,284.

L’outil Tableau est incroyablement riche et puissant, et sa documentation est bien rédigée. Consultez-le et essayez-le si vous voulez aller plus loin. Dans un prochain article de blog, nous verrons comment héberger notre Tableau Web Data Connector sur GitHub.

Discuss