Tableau e 4D: Distribuzione del WDC alle pagine Github

Nel post Come collegare Tableau con 4D, avete imparato a creare un connettore di dati web (WDC) per richiedere dati da 4D e visualizzarli in Tableau Public.

Ora è il momento di ospitare il nostro WDC! Poiché utilizza solo file HTML e JavaScript, Github Pages è l’opzione migliore per memorizzarli. Questo permette ad altri di testare il connettore direttamente nel loro software Tableau. In questo post vi mostrerò come procedere.

Bonus: vi mostrerò anche come eseguire il debug del vostro WDC in Tableau Public utilizzando Chrome. Iniziamo!

Prima di iniziare, assicuratevi di aver già letto il post precedente. Riprendiamo dalla fine.

Creare la pagina GitHub

• Creare un nuovo repository su GitHub utilizzando la convenzione di denominazione<nomeutente>.github.io (dove nomeutente è il vostro nome utente GitHub o il nome della vostra organizzazione su GitHub). Questo passaggio è fondamentale per il funzionamento del WDC.
• Clonare il repository sul computer locale.
• Nella cartella del progetto, aggiungere i fileinvoices.html e invoices.js, eseguire il commit e inviare le modifiche al repository GitHub.
• Quando si naviga su https://username.github.io/invoices.html, dovrebbe essere visualizzata la pagina web ospitata:

Nota: presumo che abbiate familiarità con GitHub e che possiate clonare, eseguire il commit, tirare e spingere con facilità! In caso contrario, non preoccupatevi: abbiamo una serie di post sul blog per aiutarvi a iniziare.

Avviare la pagina Github da Tableau Public

Ora che il vostro WDC è online, aprite una connessione ad esso in Tableau Public.

Nella finestra di dialogo WDC, inserite l’URL del WDC (https://username.github.io/invoices.html) come mostrato nell’immagine seguente:

Ma prima … Utilizzare 4D su HTTP

La nostra pagina GitHub è caricata su HTTPS, ma la nostra API è servita su HTTP … il che porta a un errore di contenuto misto:

La soluzione è usare 4D via HTTPS. Per farlo, è necessario utilizzare la porta 443 selezionando la casella Abilita HTTPS (come mostrato nell’immagine sottostante), avere un certificato valido installato ed esporre la propria API in modo che sia accessibile via Internet.

Per questo post, ho utilizzato un certificato autofirmato. Per una migliore comprensione della gestione dei certificati, potete guardare questo video del 4D Summit 2020.

Inoltre, come ho detto prima, dovrete esporre la vostra applicazione REST in esecuzione locale a Internet, il che significa che avrete bisogno di un indirizzo IP pubblico a cui si possa accedere da qualsiasi punto di Internet (e non quello menzionato nel file invoice.js, che è un indirizzo privato a cui si può accedere solo all’interno di una rete locale (LAN)).

Per ottenere l’IP pubblico (e a scopo dimostrativo), ho usato uno strumento di tunneling chiamato ngrok che fa apparire il mio server web ospitato localmente come ospitato su un sottodominio di ngrok.com:

Una volta che il certificato è pronto e collocato nella radice del progetto, l’HTTPS è abilitato e si dispone di un indirizzo IP pubblico, si inserisce l’URL delle pagine GitHub in Tableau Public.

In questo modo viene visualizzata la tabella che ora può essere utilizzata per le visualizzazioni:

Congratulazioni! Il vostro WDC è stato distribuito con successo, vi si accede e siete pronti a visualizzare i vostri dati 4D!

Bonus: eseguire il debug del WDC in Tableau

A volte, quando si crea un WDC, questo può funzionare senza problemi nel simulatore(http://127.0.0.1:8888/Simulator/index.html) ma non è in grado di caricare i dati in Tableau Public. Quando si preme il pulsante Aggiorna ora, viene visualizzata la schermata di caricamento, ma i dati non vengono mai visualizzati:

Cosa fare? Come sapere esattamente cosa è andato storto?

Tableau consente di utilizzare il browser Chrome e i Chrome DevTools per eseguire il debug del WDC mentre è in esecuzione in Tableau Public. Ecco i passaggi da seguire:

• Scaricare Chrome per Windows chrome-win.zip o chrome-mac.zip per macOS.
• Aprite il prompt dei comandi e avviate Tableau con l’opzione di debug remoto.
  Per macOS aprire /Applications/Tableau\ Public.app –args –remote-debugging-port=9000
  Per Windows, navigare nella directory di Tableau cd C:\Program Files\Tableau\Tableau\bin\ quindi inserire tableau.exe –remote-debugging-port=9000
• In Tableau, inserire l’URL del WDC di cui si desidera eseguire il debug e premere Invio. Una volta caricata la pagina di destinazione del WDC, si dovrà attendere prima di interagire con la pagina, in modo da poter avviare il debugger di Chrome e impostare i punti di interruzione.
• Avviare Chrome e impostare l’URL su http://localhost:9000
• Nel browser Chrome, selezionare il WDC di cui si desidera eseguire il debug da questa pagina:

• Una volta che il debugger di Chrome è collegato, è possibile cercare eventuali errori o impostare i punti di interruzione nel codice JavaScript del WDC.

Se siete interessati a saperne di più sul debug del WDC all’interno di Tableau, consultate questa pagina della documentazione ufficiale. Buon debug!

E se avete domande, non esitate a partecipare alla discussione sul forum 4D.