En el Webinar 4D – Cómo conectar Tableau con 4D, William Taylor (Technical Account Manager, 4D US) dio una visión general de la herramienta Tableau y de cómo se puede utilizar para visualizar sus datos 4D. En esta entrada del blog, vamos a profundizar en los detalles técnicos para darle una comprensión más profunda de cómo funciona. Esto le permitirá construir, por ejemplo, una visualización que muestre el total de la factura más alta con nada más que 4D REST y Tableau.

TIP: Facturación con 4D y Tableau

¿Qué es Tableau?

Tableau es una herramienta de visualización de datos utilizada para la inteligencia de negocios. Ayuda a simplificar los datos en bruto en un formato fácilmente comprensible. El trabajo principal de Tableau es conectar y extraer datos almacenados en varios lugares. Puede extraer datos de cualquier plataforma y puede extraer datos de cualquier base de datos … incluyendo una base de datos 4D. Los datos extraídos pueden entonces conectarse a Tableau Desktop. Aquí es donde un analista de datos trabaja con ellos y desarrolla visualizaciones.

Para importar los datos de una API existente directamente a Tableau y crear cuadros de mando muy fácilmente, tendrá que utilizar un conector de datos web.

Todo esto se tratará en esta entrada del blog, pero primero, ¡comencemos con los requisitos previos!

Requisitos previos

En esta entrada del blog, vamos a:

1. Configurar 4D REST y establecer la API
2. Obtener y configurar el SDK del Web Data Connector
3. Crear un Web Data Connector
4. Conectar con Tableau
5. Construir un dashboard

Configurar 4D REST y configurar la API

Ejemplo de aplicación: En esta entrada del blog, usaremos la aplicación Invoice que ya está disponible en GitHub. Siéntase libre de descargar o clonar el repositorio.

Para acceder a los datos de la base de datos 4D a través de REST, necesitamos configurar nuestra base de datos 4D. ¿Recuerdas cómo hacerlo, no?

¿Te suena la opción «Exponer como servidor REST» en la página «Recurso Web/REST» (en nuestro caso, la aplicación de Factura ) y asegurarte de que las tablas de origen de los datos (es decir, de donde quieres sacar los datos) están expuestas en REST? Si esto no le suena, no deje de consultar esta entrada del blog para conocer todos los detalles.

Para asegurarse de que su API está configurada correctamente y que sus datos pueden ser leídos dentro de 4D usando peticiones REST, abra un navegador web e inserte «/rest» después de ADDRESS: PORT. Todas las solicitudes URL REST de 4D comienzan con /rest.

Por ejemplo, comprobemos que obtenemos todas las entidades de la clase de datos [INVOICES]:

¡No olvide habilitar CORS!

Para evitar las restricciones CORS (recursos de diferentes orígenes que están restringidos para interactuar entre sí) asegúrese de permitir CORS en 4D. Puede hacerlo desde la UI gracias a un nuevo ajuste en la pestaña Configuración > Web > Opciones (II). Puede añadir los nombres de dominio permitidos (127.0.0.1:8888 en nuestro caso – lo verá más adelante), y los métodos disponibles. La próxima vez que se inicie el servidor, los dominios y métodos se utilizarán automáticamente. Esta entrada del blog está disponible para explicar los detalles y mostrarte cómo hacerlo.

Ahora que nuestros datos están listos y CORS está habilitado, ¡pasemos a la parte de Tableau!

Conector de datos web (wdc)

¿Qué es un WDC?

Tableau no tiene una interfaz nativa de 4D, pero necesitamos acceder a los datos de alguna manera. Entonces, ¿cómo podemos conectarlo a 4D?

Ahí es donde entra en juego el Web Data Connector(WDC) de Tableau. WDC es una aplicación que se ejecuta en un nodo servidor web. Puede pensar en él como una capa de middleware que se sitúa entre Tableau y 4D. Tableau llama al WDC y el código JavaScript que contiene solicita datos de fuentes de datos como 4D.

Configurar el WDC

Así que, básicamente, necesitamos configurar un archivo HTML que llame al código JavaScript que

• se conecta a los datos de la web a través de la API REST,
• convierte los datos recibidos de 4D en formato JSON,
• pasa los datos a Tableau.

La buena noticia es que Tableau proporciona un paquete de software gratuito (con ejemplos) que podemos utilizar para empezar. El conector también está muy bien documentado, así que eche un vistazo a esta página para obtener más información sobre los diferentes pasos que se indican a continuación.

• Asegúrate de tener instaladas las siguientes dependencias: git, node y npm.
• Consigue el SDK de WDC descargándolo o clonándolo: git clone https://github.com/tableau/webdataconnector.git
• En el símbolo del sistema, cambia al directorio donde descargaste el repositorio: cd webdataconnector
• Instala las dependencias con npm: npm install –production
• Inicia el servidor web de prueba: npm start
• Abre un navegador y navega hasta http://127.0.0.1:8888/Simulator/index.html
• Aparece el simulador de WDC:

¡Enhorabuena! Tu entorno está correctamente configurado. Ahora vamos a crear nuestro conector para conectarnos a 4D y cargar los datos de la aplicación Factura.

Nota: Tableau está muy bien documentado. Todos los pasos siguientes para crear su propio WDC fueron tomados de esta página. Compruébelo para obtener más detalles técnicos.

Crear un conector para conectar Tableau y 4D

Como dijimos antes, para que nuestra API REST sea consumida por Tableau, necesitamos crear un WDC. Esto significa crear dos cosas:

1. Una página HTML que enlaza con nuestro código JavaScript y con la biblioteca WDC. La página también contiene un elemento de botón simple que ilustra cómo los usuarios pueden interactuar con el conector antes de obtener los datos.
2. Un archivo JavaScript donde definimos el esquema y obtenemos los datos de 4D que se pasarán a Tableau.

Crear la página HTML (la interfaz de usuario)

En la carpeta webdataconnector que hemos clonado de GitHub, crea otra carpeta llamada Invoices. En la carpeta Invoices, crea una página invoices.html y copia y pega el siguiente 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>

La página HTML es bastante sencilla de entender. Llama a

1. Bootstrap para embellecer y formatear la página,
2. jQuery para obtener los datos JSON,
3. la biblioteca principal(tableauwdc-2.3.latest.js) de la API WDC,
4. el archivo JavaScript que crearemos a continuación donde ocurrirá nuestra lógica (invoices.js).
5. ¡Y por último, un simple botón«Get Data from 4D!» que permitirá a los usuarios interactuar con el conector.

Crear el archivo JS (la lógica)

Copiar la estructura del archivo en el invoices. js. Aquí, nos interesan dos funciones

• getSchema – donde defines cómo mapear los datos a una o más tablas.

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 – donde se obtienen los datos de 4D y se pasan a Tableau. La función jQuery $.getJSON obtiene los datos de nuestra base de datos 4D y utiliza un manejador de éxito para almacenar los datos devueltos en un parámetro de respuesta (resp). Luego simplemente iteramos sobre los elementos del objeto JSON y almacenamos los datos en el 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(); 
 });
};

• Por último, añadimos el escuchador de eventos que responde al clic en el botón que hemos creado en el archivo HTML.

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

Ahora que nuestro código está listo, ¡probémoslo!

Probar el conector

Abre el simulador(abre un navegador y navega a http://127.0.0.1:8888/Simulator/index.html), e introduce la ruta de tu archivo HTML en la URL del conector:

¡Cargue su conector, y haga clic en el botón Obtener datos de 4D!

Debería ver sus datos de 4D en una tabla de Tableau al hacer clic en el botón Fetch Table Data:

¡Bravo, lo ha conseguido! Ahora es el momento de probar el conector en Tableau Public.

Nota: Si te equivocaste en uno o dos pasos, ¡no te preocupes! He reunido todos los archivos necesarios para ti. Así que sigue adelante y descarga el IDH, pon la carpeta invoices en el mismo nivel que el archivo README.md en la carpeta webdataconnector y continúa a partir de ahí.

Usar WDC en Tableau Public

Tableau Public es la versión gratuita de Tableau Desktop que te permite ver y entender los datos en minutos. La versión gratuita no tiene todos los conectores nativos, pero todo lo que necesitamos es el conector de datos web y ¡está disponible!

Descargue la herramienta, enciéndala y:

1. Haz clic en Web Data Connector
2. Cargue el Web Data Connector que acabamos de crear utilizando la URL: http://127.0.0.1:8888/invoices/invoices.html
3. Haga clic en el botón Obtener datos de 4D:

A continuación, haga clic en el botón Actualizar ahora. Esta acción activará la función getData que añadimos anteriormente.

Ahora haga clic en la Hoja 1 (mostrada en la imagen de abajo). Aquí es donde creará sus gráficos.

Por ejemplo, digamos que quiero una representación visual de la factura más alta.

Arrastre el Número de factura (de la sección Dimensiones de la izquierda) a la sección Columnas de la parte superior. A continuación, arrastre el Total de la factura (de la sección Medidas de la izquierda) a la sección Filas de la parte superior. Ahora vea cómo se produce la magia:

¡Voilà! La factura más alta es la que tiene el ID INV00042 y un importe total de 2.284.

La herramienta Tableau es increíblemente rica y potente, y su documentación está bien escrita. Compruébala y pruébala si quieres ir más allá. En una próxima entrada del blog, veremos cómo alojar nuestro Tableau Web Data Connector en GitHub.