Tableau a 4D: Nasazení WDC na stránky Githubu

V příspěvku Jak propojit Tableau se 4D jste se dozvěděli, jak vytvořit webový datový konektor (WDC) pro vyžádání dat ze 4D a jejich vizualizaci v Tableau Public.

Nyní je čas hostit náš WDC! Vzhledem k tomu, že používá pouze soubory HTML a JavaScript, je nejlepší volbou pro jejich uložení služba Github Pages. Díky tomu mohou ostatní testovat váš konektor přímo ve svém softwaru Tableau. V tomto příspěvku na blogu vám ukážu, jak postupovat.

Bonus: Ukážu vám také, jak odladit váš WDC v Tableau Public pomocí prohlížeče Chrome. Začněme!

Než začneme, ujistěte se, že jste si již přečetli předchozí příspěvek na blogu. Navážeme na něj od konce.

Vytvoření stránky GitHub

• Vytvořte nový repozitář na GitHubu pomocí jmenné konvence<uživatelské jméno>.github.io (kde uživatelské jméno je vaše uživatelské jméno na GitHubu nebo název vaší organizace na GitHubu). Tento krok je klíčový pro fungování WDC.
• Klonujte úložiště do svého místního počítače.
• Do složky projektu přidejte souboryinvoices.html a invoices.js, proveďte revizi a odešlete změny do úložiště GitHub.
• Při přechodu na stránku https://username.github.io/invoices.html by se měla zobrazit hostovaná webová stránka:

Poznámka: Předpokládám, že jste obeznámeni s úložištěm GitHub a můžete snadno klonovat, odevzdávat, tahat a odesílat! Pokud ne, nezoufejte, máme pro vás sérii blogových příspěvků, které vám pomohou začít.

Spuštění stránky Github z Tableau Public

Nyní, když je váš WDC online, otevřete k němu připojení v Tableau Public.

V dialogovém okně WDC zadejte adresu URL WDC (https://username.github.io/invoices.html ), jak je znázorněno na obrázku níže:

Nejprve však … Použití 4D přes HTTPs

Naše stránka GitHub se načítá přes HTTPS, ale naše rozhraní API je obsluhováno přes HTTP … což povede k chybě smíšeného obsahu:

Řešením je použití 4D přes HTTPS. K tomu je třeba použít port 443 a zároveň zaškrtnout políčko Povolit HTTPS (jak je znázorněno na obrázku níže), mít nainstalovaný platný certifikát a vystavit své rozhraní API tak, aby k němu bylo možné přistupovat přes internet.

Pro účely tohoto příspěvku na blogu jsem použil certifikát podepsaný vlastním podpisem. Pro lepší pochopení správy certifikátů se můžete podívat na toto video z konference 4D Summit 2020.

Také, jak jsem již řekl, budete muset vystavit svou lokálně spuštěnou aplikaci REST internetu, což znamená, že budete potřebovat veřejnou IP adresu, ke které lze přistupovat odkudkoli z internetu (a ne tu, která je uvedena v souboru invoice.js, což je soukromá adresa, ke které lze přistupovat pouze v rámci místní sítě (LAN)).

Pro získání veřejné IP adresy (a pro demonstrační účely) jsem použil tunelovací nástroj ngrok, který způsobí, že můj lokálně hostovaný webový server se bude tvářit jako hostovaný na subdoméně ngrok.com:

Jakmile je certifikát připraven a umístěn v kořenovém adresáři vašeho projektu, je povoleno HTTPS a máte k dispozici veřejnou IP adresu, zadejte adresu URL stránek GitHub v aplikaci Tableau Public.

Tím se zobrazí tabulka, kterou nyní můžete použít pro vizualizace:

Gratulujeme! Váš WDC je úspěšně nasazen, zpřístupněn a vy jste připraveni vizualizovat svá 4D data!

Bonus: Ladění wdc v Tableau

Někdy se stane, že když vytvoříte WDC, může bez problémů fungovat v simulátoru(http://127.0.0.1:8888/Simulator/index.html ), ale není schopen načíst data v Tableau Public. Když stisknete tlačítko Aktualizovat nyní, zobrazí se načítací obrazovka, ale data se nikdy nezobrazí:

Co dělat? Jak přesně zjistit, co se pokazilo?

Tableau vám dává možnost použít prohlížeč Chrome a nástroje Chrome DevTools k ladění vašeho WDC, zatímco je spuštěn v Tableau Public. Zde jsou kroky, které je třeba provést:

• Stáhněte si Chrome pro Windows chrome-win.zip nebo chrome-mac.zip pro macOS.
• Otevřete Příkazový řádek a spusťte Tableau s možností vzdáleného ladění.
  Pro macOS otevřete /Applications/Tableau\ Public.app –args –remote-debugging-port=9000
  Pro Windows přejděte do adresáře Tableau cd C:\Program Files\Tableau\Tableau \bin\ a zadejte tableau.exe –remote-debugging-port=9000
• V aplikaci Tableau zadejte adresu URL WDC, který chcete ladit, a stiskněte klávesu Enter. Po načtení vstupní stránky WDC budete chtít před interakcí se stránkou počkat, abyste mohli spustit ladicí program Chrome a nastavit body přerušení.
• Spusťte prohlížeč Chrome a nastavte adresu URL na http://localhost:9000.
• V prohlížeči Chrome vyberte WDC, které chcete na této stránce ladit:

• Jakmile je debugger Chrome připojen, neváhejte hledat případné chyby nebo nastavit body přerušení v kódu JavaScriptu vašeho WDC.

Pokud vás zajímá více informací o ladění WDC uvnitř Tableau, podívejte se na tuto stránku z oficiální dokumentace. Šťastné ladění!

A pokud máte nějaké dotazy, neváhejte se zapojit do diskuse na fóru 4D.