Nel Webinar 4D – Come collegare Tableau con 4D, William Taylor (Technical Account Manager, 4D US) ha fornito una panoramica dello strumento Tableau e di come può essere utilizzato per visualizzare i dati 4D. In questo post del blog, approfondiremo i dettagli tecnici per farvi capire meglio come funziona. Questo vi permetterà di creare, ad esempio, una visualizzazione che mostri il totale più alto delle fatture con nient’altro che 4D REST e Tableau!

SUGGERIMENTO: fatturare con 4D e Tableau

Che cos’è Tableau?

Tableau è uno strumento di visualizzazione dei dati utilizzato per la business intelligence. Aiuta a semplificare i dati grezzi in un formato facilmente comprensibile. Il compito principale di Tableau è quello di collegare ed estrarre i dati memorizzati in vari luoghi. Può prelevare i dati da qualsiasi piattaforma e può estrarre i dati da qualsiasi database… anche da un database 4D. I dati estratti possono poi essere collegati a Tableau Desktop. È qui che un analista di dati lavora con i dati e sviluppa visualizzazioni.

Per importare i dati da un’API esistente direttamente in Tableau e creare dashboard in modo molto semplice, è necessario utilizzare un Web Data Connector.

Tutto questo verrà trattato in questo post, ma prima iniziamo con i prerequisiti!

I prerequisiti

In questo blog post, ci occuperemo di:

1. Configurare 4D REST e impostare l’API
2. Ottenere e impostare il Web Data Connector SDK
3. Creare un connettore dati web
4. Connettersi a Tableau
5. Creare un dashboard

Configurare 4D REST e impostare l’API

Esempio di applicazione: In questo blog post, utilizzeremo l’applicazione Invoice, già disponibile su GitHub. Sentitevi liberi di scaricare o clonare il repository.

Per accedere ai dati del database 4D tramite REST, dobbiamo configurare il nostro database 4D. Vi ricordate come si fa, vero?

Spuntare l’opzione “Expose as REST server” (Esponi come server REST) nella pagina “Web/REST resource” (nel nostro caso, l’applicazione Invoice ) e assicurarsi che le tabelle dell’origine dei dati (cioè, da cui si desidera prelevare i dati) siano esposte in REST suona familiare? Se non vi ricorda nulla, date un’occhiata a questo post del blog per tutti i dettagli.

Per verificare che l’API sia impostata correttamente e che i dati possano essere letti in 4D utilizzando le richieste REST, aprite un browser web e inserite “/rest” dopo ADDRESS: PORT. Tutte le richieste REST di 4D iniziano con /rest.

Ad esempio, verifichiamo di ottenere tutte le entità della classe di dati [FATTURE]:

Non dimenticate di abilitare CORS!

Per evitare restrizioni CORS (risorse di origini diverse che non possono interagire tra loro), assicurarsi di consentire CORS in 4D. È possibile farlo dall’interfaccia utente grazie a una nuova impostazione nella scheda Impostazioni > Web > Opzioni (II). È possibile aggiungere i nomi di dominio consentiti (127.0.0.1:8888 nel nostro caso – lo si vedrà più avanti) e i metodi disponibili. Al successivo avvio del server, i domini e i metodi verranno utilizzati automaticamente. Questo post del blog è disponibile per spiegare ulteriormente i dettagli e mostrare come fare.

Ora che i nostri dati sono pronti e CORS è abilitato, passiamo alla parte di Tableau!

Connettore dati web (wdc)

Che cos’è un WDC?

Tableau non ha un’interfaccia 4D nativa, ma dobbiamo accedere ai dati in qualche modo. Quindi come possiamo collegarli al 4D?

È qui che entra in gioco il Web Data Connector(WDC) di Tableau. Il WDC è un’applicazione che gira in un server web del nodo. Si può considerare come un livello middleware che si colloca tra Tableau e 4D. Tableau chiama il WDC e il codice JavaScript in esso contenuto richiede dati da fonti di dati come 4D.

Configurazione del WDC

In pratica, dobbiamo configurare un file HTML che richiama codice JavaScript che:

• si connette ai dati web tramite l’API REST,
• converte i dati 4D ricevuti in formato JSON,
• passa i dati a Tableau.

La buona notizia è che Tableau fornisce un pacchetto software gratuito (con esempi) che possiamo utilizzare per iniziare! Il connettore è anche molto ben documentato, quindi date un’occhiata a questa pagina per maggiori informazioni sui diversi passaggi che seguono.

• Assicurarsi di avere installato le seguenti dipendenze: git, node e npm.
• Ottenere l’SDK WDC scaricandolo o clonandolo: git clone https://github.com/tableau/webdataconnector.git
• Nel prompt dei comandi, passare alla directory in cui si è scaricato il repository: cd webdataconnector
• Installare le dipendenze con npm: npm install –production
• Avviare il server web di prova: npm start
• Aprire un browser e navigare su http://127.0.0.1:8888/Simulator/index.html
• Viene visualizzato il simulatore WDC:

Congratulazioni! L’ambiente è stato configurato correttamente. Creiamo ora il nostro connettore per collegarci a 4D e caricare i dati dell’applicazione Fattura.

Nota: Tableau è molto ben documentato. Tutti i passaggi seguenti per creare il proprio WDC sono stati presi da questa pagina. Consultatela per maggiori dettagli tecnici.

Creare un connettore per collegare Tableau e 4D

Come abbiamo detto in precedenza, per consentire alle nostre API REST di essere utilizzate da Tableau, dobbiamo creare un WDC. Ciò significa creare due cose:

1. Una pagina HTML che rimanda al nostro codice JavaScript e alla libreria WDC. La pagina contiene anche un semplice elemento pulsante che illustra come gli utenti possono interagire con il connettore prima di ottenere i dati.
2. Un file JavaScript in cui definire lo schema e ottenere i dati 4D da passare a Tableau.

Creare la pagina HTML (l’interfaccia utente)

Nella cartella webdataconnector che abbiamo clonato da GitHub, creare un’altra cartella denominata Invoices. Nella cartella Invoices, creare una pagina invoices.html e copiare-incollare il codice seguente:

<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 pagina HTML è abbastanza semplice da capire. Richiama:

1. Bootstrap per abbellire e formattare la pagina,
2. jQuery per ottenere i dati JSON,
3. la libreria principale(tableauwdc-2.3.latest.js) dell’API WDC,
4. il file JavaScript che creeremo successivamente, dove avverrà la nostra logica (invoices.js).
5. Infine, un semplice pulsante“Get Data from 4D!“che consentirà agli utenti di interagire con il connettore.

Creare il file JS (la logica)

Copiare la struttura del file in invoices.js. Qui, siamo interessati a due funzioni:

• getSchema – dove si definisce come mappare i dati in una o più tabelle.

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 – dove si ottengono i dati 4D e li si passa a Tableau. La funzione jQuery $.getJSON ottiene i dati dal nostro database 4D e utilizza un gestore di successo per memorizzare i dati restituiti in un parametro di risposta (resp). Quindi si itera semplicemente sugli elementi dell’oggetto JSON e si memorizzano i dati nell’array 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(); 
 });
};

• Infine, aggiungiamo l’ascoltatore di eventi che risponde al clic sul pulsante creato nel file HTML.

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

Ora che il nostro codice è pronto, proviamolo!

Testare il connettore

Aprire il simulatore(aprire un browser e navigare su http://127.0.0.1:8888/Simulator/index.html) e introdurre il percorso del file HTML nell’URL del connettore:

Caricare il connettore e fare clic sul pulsante Ottieni dati da 4D!

Facendo clic sul pulsante Fetch Table Data si dovrebbero vedere i dati di 4D in una tabella di Tableau:

Bravi, ce l’avete fatta! Ora è il momento di testare il connettore in Tableau Public.

Nota: se avete sbagliato uno o due passaggi, non preoccupatevi! Ho messo insieme tutti i file necessari per voi. Quindi scaricate l’HDI, mettete la cartella fatture allo stesso livello del file README.md nella cartella webdataconnector e proseguite da lì!

Utilizzare WDC in Tableau Public

Tableau Public è la versione gratuita di Tableau Desktop che consente di visualizzare e comprendere i dati in pochi minuti. La versione gratuita non dispone di tutti i connettori nativi, ma tutto ciò di cui abbiamo bisogno è il Web Data Connector, che è disponibile!

Scaricate lo strumento, avviatelo e..:

1. Fare clic su Connettore dati Web
2. Caricare il Web Data Connector appena creato utilizzando l’URL: http://127.0.0.1:8888/invoices/invoices.html
3. Fare clic sul pulsante Ottieni dati da 4D:

Quindi, fare clic sul pulsante Aggiorna ora. Questa azione attiverà la funzione getData che abbiamo aggiunto in precedenza.

Fare ora clic sul Foglio 1 (mostrato nell’immagine sottostante). È qui che verranno creati i grafici.

Ad esempio, si vuole una rappresentazione visiva della fattura più alta.

Trascinate il Numero di fattura (dalla sezione Dimensioni a sinistra) nella sezione Colonne in alto. Quindi trascinare il Totale fattura (dalla sezione Misure a sinistra) nella sezione Righe in alto. Ora guardate come avviene la magia:

Voilà! La fattura più alta è quella con l’ID INV00042 e l’importo totale di 2.284.

Lo strumento Tableau è incredibilmente ricco e potente e la documentazione è ben scritta. Dategli un’occhiata e provatelo se volete andare oltre. In un prossimo post vedremo come ospitare il nostro Tableau Web Data Connector su GitHub.