Em 4D Webinar – Como ligar o Tableau com 4D, William Taylor (Technical Account Manager, 4D US) deu uma visão geral da ferramenta Tableau e de como ela poderia ser usada para visualizar os seus dados 4D. Neste post do blogue, vamos investigar os detalhes técnicos para lhe dar uma compreensão mais profunda de como funciona. Isto permitir-lhe-á construir, por exemplo, um visual mostrando o total de facturas mais elevado com nada mais do que REST 4D e Tableau!

DICA: Facturação com 4D e Tableau

O que é o Tableau?

OTableau é uma ferramenta de visualização de dados utilizada para inteligência empresarial. Ajuda a simplificar os dados em bruto para um formato facilmente compreensível. A principal tarefa do Tableau é ligar e extrair dados armazenados em vários locais. Pode extrair dados de qualquer plataforma e pode extrair dados de qualquer base de dados … incluindo uma base de dados 4D. Os dados extraídos podem então ser ligados ao Tableau Desktop. É aqui que um analista de dados trabalha com ele e desenvolve visualizações.

Para importar os seus dados de uma API existente directamente para o Tableau e criar painéis de controlo muito facilmente, terá de utilizar um Web Data Connector.

Tudo isto será abordado neste post do blogue, mas primeiro, vamos começar com os pré-requisitos!

Pré-requisitos

Neste post do blogue, vamos fazê-lo:

1. Configurar o 4D REST e configurar o API
2. Obter e configurar o Conector de Dados da Web SDK
3. Criar um Conector de Dados Web
4. Ligar ao Tableau
5. Construir um painel de instrumentos

Configurar o 4D REST e configurar o API

Exemplo de aplicação: Neste post do blog, utilizaremos a aplicação de facturação que já está disponível no GitHub. Sinta-se à vontade para descarregar ou clonar o repositório.

A fim de aceder aos dados da base de dados 4D através do REST, precisamos de configurar a nossa base de dados 4D. Lembra-se como o fazer, não se lembra?

Verificar a opção “Expor como servidor REST” na página “Web/REST resource” (no nosso caso, a aplicação Invoice ) e certificar-se de que as tabelas de fontes de dados (ou seja, de onde quer puxar os dados) são expostas em REST soa familiar? Se isto não lhe lembrar nada, não deixe de consultar este post do blogue para obter todos os detalhes.

Para se certificar de que a sua API está configurada correctamente e de que os seus dados podem ser lidos dentro de 4D usando pedidos REST, abra um web browser, e insira “/rest” depois de ENDEREÇAR: PORT. Todos os pedidos de URL REST 4D começam com /rest.

Por exemplo, vamos verificar se recebemos todas as entidades da classe de dados [INVOICES]:

Não se esqueça de activar CORS!

Para evitar restrições CORS (recursos de diferentes origens que são restringidos de interagir uns com os outros), certifique-se de permitir CORS em 4D. Pode ser feito a partir da IU graças a uma nova configuração no separador Definições > Web > Opções (II). Pode adicionar nomes de domínio permitidos (127.0.0.1:8888 no nosso caso – verá isso mais tarde), e métodos disponíveis. Quando o servidor for iniciado a seguir, os domínios e métodos serão utilizados automaticamente. Este post no blog está disponível para explicar melhor os detalhes e mostrar-lhe como fazê-lo.

Agora que os nossos dados estão prontos e CORS está activado, passemos à parte do Tableau!

Conector de Dados Web (wdc)

O que é um WDC?

O Tableau não tem uma interface 4D nativa, mas precisamos de aceder aos dados de alguma forma. Então, como podemos ligá-lo ao 4D?

É aí que o Tableau’s Web Data Connector(WDC) entra em jogo. O WDC é uma aplicação em execução num servidor Web de nó. Pode pensar nisto como uma camada de middleware que se situa entre o Tableau e o 4D. O Tableau chama o WDC e o código JavaScript que nele se encontra solicita dados de fontes de dados como o 4D.

Configurar o WDC

Portanto, basicamente, precisamos de criar um ficheiro HTML que chame código JavaScript que:

• se ligue aos dados da web através da API REST,
• converte os dados 4D recebidos em formato JSON,
• passa os dados para o Tableau.

A boa notícia é que o Tableau fornece um pacote de software gratuito (com exemplos) que podemos usar para começar! O conector está também muito bem documentado, por isso dê uma olhada nesta página para mais informações sobre os diferentes passos abaixo.

• Certifique-se de que tem as seguintes dependências instaladas git, nodo, e npm.
• Obtenha o SDK da WDC descarregando-o ou clonando-o: git clone https://github.com/tableau/webdataconnector.git
• No prompt de comando, mude para o directório onde descarregou o repositório: cd webdataconnector
• Instalar as dependências com npm: npm instalar –produção
• Iniciar o servidor web de teste: npm start
• Abra um navegador e navegue para http://127.0.0.1:8888/Simulator/index.html
• Aparece o simulador da WDC:

Parabéns! O seu ambiente está devidamente configurado. Vamos agora criar o nosso conector para ligar ao 4D e carregar os dados da aplicação de facturação.

Nota: O quadro está muito bem documentado. Todos os passos seguintes para criar a sua própria WDC foram tomados a partir desta página. Consulte-a para mais detalhes técnicos.

Criar um conector para ligar o Tableau e o 4D

Como dissemos anteriormente, para que o nosso REST API seja consumido pela Tableau, precisamos de criar um WDC. Isto significa criar duas coisas:

1. Uma página HTML que ligue ao nosso código JavaScript e à biblioteca da WDC. A página contém também um simples elemento de botão que ilustra como os utilizadores podem interagir com o conector antes de obterem dados.
2. Um ficheiro JavaScript onde definimos o esquema e obtemos os dados 4D a serem passados para Tableau.

Criar a página HTML (a interface do utilizador)

Na pasta webdataconnector que clonámos a partir do GitHub, criamos outra pasta chamada Invoices . Na pasta Invoices, criar uma página Invoices .html e copiar-colar o seguinte código:

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

A página HTML é bastante simples de compreender. Ela chama:

1. Bootstrap para embelezar e formatar a página,
2. jQuery para obter os dados do JSON,
3. a biblioteca principal(tableauwdc-2.3.latest.js) da WDC API,
4. o ficheiro JavaScript que criaremos a seguir onde a nossa lógica acontecerá (invoices.js).
5. E finalmente, um simples botão“Obter dados de 4D!” que permitirá aos utilizadores interagir com o conector.

Criar o ficheiro JS (a lógica)

Copiar a estrutura do ficheiro para as facturas.js. Aqui, estamos interessados em duas funções:

• getSchema – onde se define como mapear os dados para uma ou mais ou tabelas.

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 – onde obtém os seus dados 4D e os passa para o Tableau. A função jQuery $.getJSON obtém os dados da nossa base de dados 4D e utiliza um manipulador de sucesso para armazenar os dados devolvidos num parâmetro de resposta (resp). Depois simplesmente iteramos sobre os elementos do objecto JSON e armazenamos os dados na matriz de dados da tabela:

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

• Finalmente, adicionamos o ouvinte do evento que responde ao clique no botão que criámos no ficheiro HTML.

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

Agora que o nosso código está pronto, vamos testá-lo!

Testar o conector

Abra o simulador(abra um navegador e navegue para http://127.0.0.1:8888/Simulator/index.html), e introduza o caminho para o seu ficheiro HTML no URL do conector:

Carregue o seu conector, e clique no botão Obter Dados de 4D!

Deverá ver os seus dados 4D a funcionar numa tabela Tableau ao clicar no botão Obter Dados da Tabela:

Bravo, conseguiste! Agora é tempo de testar o conector no Tableau Public.

Nota: Se fez asneira num ou dois degraus, não se preocupe! Reúno todos os ficheiros necessários para si. Portanto, vá em frente e descarregue o HDI, coloque a pasta de facturas ao mesmo nível que o ficheiro README.md na pasta webdataconnector e prossiga a partir daí!

Use o WDC no Tableau Public

OTableau Public é a versão gratuita do Tableau Desktop que lhe permite ver e compreender os dados em minutos. A versão gratuita não tem todos os conectores nativos, mas tudo o que precisamos é do Webdataconnector e que está disponível!

Descarregue a ferramenta, ligue-a, e:

1. Clique no Conector de Dados da Web
2. Carregar o Conector de Dados Web que acabámos de criar utilizando o URL: http://127.0.0.1:8888/invoices/invoices.html
3. Clique no botão Obter dados a partir de 4D:

A seguir, clicar no botão Update Now. Esta acção desencadeará a função getData que adicionámos anteriormente.

Agora clique na Folha 1 (mostrada na imagem abaixo). É aqui que irá criar os seus gráficos.

Por exemplo, digamos que eu quero uma representação visual da factura mais alta.

Arraste o número da factura (a partir da secção Dimensões à esquerda) para a secção Colunas no topo. Depois arraste o Total da factura (a partir da secção Medidas, à esquerda) para a secção Linhas, no topo. Agora veja a magia a acontecer:

Voilà! A factura mais alta é a que tem o ID INV00042 e um montante total de 2.284.

A ferramenta Tableau é incrivelmente rica e poderosa, e a sua documentação está bem escrita. Verifique e experimente se quiser ir ainda mais longe. Num próximo post no blog, veremos como alojar o nosso Tableau Web Data Connector no GitHub.