Na webináři 4D – Jak propojit Tableau s 4D, William Taylor (Technical Account Manager, 4D US ) poskytl přehled o nástroji Tableau a o tom, jak jej lze využít k vizualizaci dat 4D. V tomto příspěvku na blogu pronikneme do technických detailů, abychom vám umožnili hlouběji pochopit, jak to funguje. Díky tomu budete moci vytvořit například vizualizaci zobrazující nejvyšší celkovou částku faktur pouze pomocí 4D REST a Tableau!

Co je to Tableau?

Tableau je nástroj pro vizualizaci dat, který se používá pro business intelligence. Pomáhá zjednodušit surová data do snadno pochopitelného formátu. Hlavním úkolem Tableau je propojovat a extrahovat data uložená na různých místech. Dokáže čerpat data z jakékoli platformy a dokáže extrahovat data z jakékoli databáze… včetně databáze 4D. Extrahovaná data pak lze připojit k Tableau Desktop. Zde s nimi pracuje datový analytik a vytváří vizualizace.

Chcete-li importovat data z existujícího rozhraní API přímo do aplikace Tableau a velmi snadno vytvářet ovládací panely, musíte použít webový datový konektor.

O tom všem se dočtete v tomto příspěvku na blogu, ale nejprve začněme s předpoklady!

Předpoklady

V tomto příspěvku na blogu budeme:

nakonfigurovat 4D REST a nastavit rozhraní API
Získat a nastavit sadu SDK Web Data Connector
Vytvořit webový datový konektor
Připojení k Tableau
Vytvoření řídicího panelu

Konfigurace 4D REST a nastavení API

Příklad aplikace: V tomto příspěvku použijeme aplikaci Invoice, která je již k dispozici na GitHubu. Neváhejte si repozitář stáhnout nebo naklonovat.

Abychom mohli přistupovat k datům z databáze 4D prostřednictvím REST, musíme nakonfigurovat naši databázi 4D. Pamatujete si, jak se to dělá, že?

Zní vám povědomě zaškrtnutí možnosti „Expose as REST server“ (vystavit jako server REST) na stránce „Web/REST resource“ (v našem případě aplikace Invoice ) a ujištění se, že tabulky zdroje dat (tj. odkud chcete čerpat data) jsou vystaveny v REST? Pokud vám to nic neříká, určitě se podívejte na tento příspěvek na blogu, kde najdete všechny podrobnosti.

Chcete-li se ujistit, že je vaše rozhraní API správně nastaveno a že vaše data lze v rámci 4D číst pomocí požadavků REST, otevřete webový prohlížeč a za ADRESU vložte „/rest“: PORT. Všechny požadavky 4D REST URL začínají /rest.

Ověřme si například, že získáme všechny entity datové třídy [INVOICES]:

Nezapomeňte povolit CORS!

Abyste se vyhnuli omezením CORS (zdroje různého původu, které mají zakázanou vzájemnou interakci), ujistěte se, že je CORS ve 4D povoleno. Lze to provést z uživatelského rozhraní díky novému nastavení na kartě Nastavení > Web > Možnosti (II ). Můžete přidat povolená jména domén (v našem případě 127.0.0.1:8888 – to uvidíte později) a dostupné metody. Při příštím spuštění serveru budou domény a metody použity automaticky. Tento příspěvek na blogu je k dispozici pro další vysvětlení podrobností a ukáže vám, jak na to.

Nyní, když jsou naše data připravena a CORS povoleno, přejděme k části Tableau!

Webový datový konektor (wdc)

Co je to WDC?

Tableau nemá nativní rozhraní 4D, ale potřebujeme k datům nějak přistupovat. Jak je tedy můžeme připojit k 4D?

V tomto případě přichází na řadu Web Data Connector(WDC) od společnosti Tableau. WDC je aplikace běžící v uzlu webového serveru. Můžete si ji představit jako vrstvu middlewaru, která se nachází mezi Tableau a 4D. Tableau volá WDC a kód JavaScriptu v něm požaduje data ze zdrojů dat, jako je 4D.

Nastavení WDC

V podstatě tedy musíme nastavit soubor HTML, který volá kód JavaScriptu, který:

se připojuje k webovým datům prostřednictvím rozhraní REST API,
převede přijatá data 4D do formátu JSON,
předá data do aplikace Tableau.

Dobrou zprávou je, že Tableau poskytuje bezplatný softwarový balíček (s příklady), který můžeme použít pro začátek! Konektor je také velmi dobře zdokumentován, takže se podívejte na tuto stránku, kde najdete další informace o jednotlivých krocích uvedených níže.

Ujistěte se, že máte nainstalovány následující závislosti git, node a npm.
Získejte sadu WDC SDK tak, že si ji stáhnete nebo naklonujete: git clone https://github.com/tableau/webdataconnector.git.
V příkazovém řádku přejděte do adresáře, do kterého jste stáhli repozitář: cd webdataconnector
Nainstalujte závislosti pomocí npm: npm install –production
Spusťte testovací webový server: npm start
Otevřete prohlížeč a přejděte na adresu http://127.0.0.1:8888/Simulator/index.html
Zobrazí se simulátor WDC:

Gratulujeme! Vaše prostředí je správně nastaveno. Nyní vytvoříme náš konektor pro připojení k 4D a načtení dat aplikace Faktura.

Poznámka: Tableau je velmi dobře zdokumentováno. Všechny následující kroky k vytvoření vlastního WDC byly převzaty z této stránky. Podívejte se na ni, kde najdete další technické podrobnosti.

Vytvoření konektoru pro propojení Tableau a 4D

Jak jsme si řekli dříve, aby naše rozhraní REST API mohlo být konzumováno aplikací Tableau, musíme vytvořit WDC. To znamená vytvořit dvě věci:

Stránku HTML, která odkazuje na náš kód JavaScriptu, a knihovnu WDC. Stránka také obsahuje jednoduchý prvek tlačítka, který znázorňuje, jak mohou uživatelé komunikovat s konektorem před získáním dat.
Soubor JavaScriptu, ve kterém definujeme schéma a získáme data 4D, která budou předána do Tableau.

Vytvoření stránky HTML (uživatelského rozhraní)

Ve složce webdataconnector, kterou jsme naklonovali z GitHubu, vytvořte další složku s názvem Invoices. Ve složce Invoices vytvořte stránku invoices.html a zkopírujte a vložte následující kód:

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

Stránka HTML je poměrně jednoduchá na pochopení. Volá:

Bootstrap pro zkrášlení a formátování stránky,
jQuery pro získání dat JSON,
hlavní knihovnu(tableauwdc-2.3.latest.js) rozhraní WDC API,
soubor JavaScriptu, který vytvoříme příště a v němž se bude odehrávat naše logika (invoices.js).
A nakonec jednoduché tlačítko„Get Data from 4D!„, které uživatelům umožní interakci s konektorem.

Vytvoření souboru JS (logika)

Zkopírujte strukturu souboru do souboru invoices.js. Zde nás zajímají dvě funkce:

getSchema – kde definujete způsob mapování dat do jedné nebo více nebo tabulek.

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 – kde získáte data 4D a předáte je aplikaci Tableau. Funkce jQuery $.getJSON získá data z naší databáze 4D a pomocí obsluhy úspěchu uloží vrácená data do parametru odpovědi (resp). Pak jednoduše iterujeme nad prvky v objektu JSON a data uložíme do pole 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(); 
 });
};

Nakonec přidáme posluchače událostí, který reaguje na kliknutí na tlačítko, jež jsme vytvořili v souboru HTML.

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

Nyní, když je náš kód připraven, jej otestujme!

Otestujte konektor

Otevřete simulátor(otevřete prohlížeč a přejděte na adresu http://127.0.0.1:8888/Simulator/index.html) a do adresy URL konektoru zaveďte cestu k vašemu souboru HTML:

Načtěte svůj konektor a klikněte na tlačítko Get Data from 4D!

Po kliknutí na tlačítko Fetch Table Data (Získat data z tabulky) byste měli vidět svá data ze 4D v tabulce Tableau:

Bravo, zvládli jste to! Nyní je čas konektor otestovat v aplikaci Tableau Public.

Poznámka: Pokud jste v jednom nebo dvou krocích něco pokazili, nevadí! Všechny potřebné soubory jsem dal dohromady za vás. Takže si klidně stáhněte HDI, složku s fakturami vložte na stejnou úroveň jako soubor README.md do složky webdataconnector a pokračujte dál!

Použití WDC v aplikaci Tableau Public

Tableau Public je bezplatná verze aplikace Tableau Desktop, která vám umožní zobrazit a pochopit data během několika minut. Bezplatná verze nemá všechny nativní konektory, ale stačí nám webový datový konektor a ten JE k dispozici!

Stáhněte si nástroj, spusťte jej a:

Klikněte na Web Data Connector
Načtěte Web Data Connector, který jsme právě vytvořili, pomocí adresy URL: http: //127.0.0.1:8888/invoices/invoices.html.
Klikněte na tlačítko Get Data from 4D:

Dále klikněte na tlačítko Aktualizovat nyní. Tato akce spustí funkci getData, kterou jsme přidali dříve.

Nyní klikněte na list 1 (zobrazený na obrázku níže). Zde budete vytvářet grafy.

Řekněme, že chci například vizuálně znázornit nejvyšší fakturu.

Přetáhněte číslo faktury (z části Rozměry vlevo) do části Sloupce nahoře. Poté přetáhněte fakturu Celkem (z oddílu Míry vlevo) do oddílu Řádky nahoře. Nyní sledujte, jak se děje kouzlo:

Voilà! Nejvyšší fakturou je faktura s ID INV00042 a celkovou částkou 2,284.

Nástroj Tableau je neuvěřitelně bohatý a výkonný a jeho dokumentace je dobře napsaná. Podívejte se na něj a vyzkoušejte ho, pokud chcete jít ještě dál. V příštím příspěvku na blogu se podíváme, jak hostovat náš webový datový konektor Tableau na GitHubu.

Discuss

Tags Programování, REST, Tutorial, v18 R4