Tableau y 4D: Despliegue de su WDC en Github Pages

En la entrada del blog Cómo conectar Tableau con 4D, aprendió a crear un conector de datos web (WDC) para solicitar datos de 4D y visualizarlos en Tableau Public.

Ahora es el momento de alojar nuestro WDC. Dado que sólo utiliza archivos HTML y JavaScript, Github Pages es la mejor opción para almacenarlos. Esto permite que otros puedan probar tu conector directamente en su software de Tableau. En esta entrada del blog, te mostraré cómo proceder.

Bonificación: También le mostraré cómo depurar su WDC en Tableau Public usando Chrome. ¡Empecemos!

Antes de empezar, asegúrese de haber leído la entrada anterior del blog. Vamos a retomarlo desde el final.

Crear la página de GitHub

• Crea un nuevo repositorio en GitHub utilizando la convención de nomenclatura<nombre de usuario>.github.io (donde nombre de usuario es tu nombre de usuario en GitHub o el nombre de tu organización en GitHub). Este paso es crucial para que el WDC funcione.
• Clona el repositorio en tu máquina local.
• En la carpeta del proyecto, añade los archivosinvoices.html y invoices.js, confirma y empuja los cambios al repositorio de GitHub.
• Al navegar a https://username.github.io/invoices.html, debería aparecer la página web alojada:

Nota: Estoy asumiendo que estás familiarizado con GitHub y que puedes clonar, confirmar, tirar y empujar con facilidad. Si no es así, no te preocupes, tenemos una serie de publicaciones en el blog para ayudarte a empezar.

Inicie la página de Github desde Tableau Public

Ahora que su WDC está en línea, abra una conexión a él en Tableau Public.

En el cuadro de diálogo del WDC, introduzca la URL del WDC (https://username.github.io/invoices.html) como se muestra en la imagen siguiente:

Pero primero… Usar 4D sobre HTTPs

Nuestra página de GitHub se carga a través de HTTPS, pero nuestra API se sirve a través de HTTP … lo que dará lugar a un error de contenido mixto:

La solución es utilizar 4D a través de HTTPS. Para hacerlo, necesita usar el puerto 443 mientras marca la casilla Habilitar HTTPS (como se muestra en la imagen de abajo), tener un certificado válido instalado, y exponer su API para que pueda ser accedida a través de Internet.

Para esta entrada del blog, he utilizado un certificado autofirmado. Usted puede ver este video del 4D Summit 2020 para una mejor comprensión de la gestión de los certificados.

También, como dije antes, necesitarás exponer tu aplicación REST que se ejecuta localmente a Internet, lo que significa que necesitarás una dirección IP pública a la que se pueda acceder desde cualquier lugar de Internet (y no la mencionada en el archivo invoice.js, que es una privada a la que sólo se puede acceder dentro de una red de área local (LAN)).

Para obtener la IP pública (y con fines de demostración), he utilizado una herramienta de túnel llamada ngrok que hace que mi servidor web alojado localmente parezca estar alojado en un subdominio de ngrok.com:

Una vez que el certificado está listo y colocado en la raíz de su proyecto, HTTPS está habilitado, y usted está armado con una dirección IP pública, introduzca su URL de GitHub Pages en Tableau Public.

Esto hace que aparezca la tabla que ahora se puede utilizar para las visualizaciones:

¡Felicidades! Su WDC se ha desplegado con éxito, se ha accedido a él y está listo para visualizar sus datos 4D.

Bonificación: Depure su WDC en Tableau

A veces, cuando se crea un WDC, puede funcionar sin problemas en el simulador(http://127.0.0.1:8888/Simulator/index.html) pero no es capaz de cargar los datos en Tableau Public. Al pulsar el botón Actualizar ahora, aparece la pantalla de carga, pero los datos nunca aparecen:

¿Qué hacer? ¿Cómo saber exactamente qué ha fallado?

Tableau le ofrece la posibilidad de utilizar el navegador Chrome y las Chrome DevTools para depurar su WDC mientras se ejecuta en Tableau Public. Estos son los pasos a seguir:

• Descargue Chrome para Windows chrome-win.zip o chrome-mac.zip para macOS.
• Abra el símbolo del sistema e inicie Tableau con la opción de depuración remota.
  Para macOS abra /Applications/Tableau\ Public.app –args –remote-debugging-port=9000
  Para Windows, navegue hasta el directorio de Tableau cd C:\Program Files\Tableau\Tableau \bin\ y luego introduzca tableau.exe –remote-debugging-port=9000
• En Tableau, introduzca la URL del WDC que desea depurar y pulse Intro. Una vez cargada la página de destino de su WDC, deberá esperar antes de interactuar con la página para poder iniciar el depurador de Chrome y establecer puntos de interrupción.
• Inicie Chrome y establezca la URL en http://localhost:9000
• En el navegador Chrome, selecciona el WDC que quieres depurar de esta página:

• Una vez que el depurador de Chrome esté conectado, no dudes en buscar cualquier error o establecer tus puntos de interrupción en el código JavaScript de tu WDC.

Si está interesado en saber más sobre la depuración del WDC dentro de Tableau, consulte esta página de la documentación oficial. ¡Feliz depuración!

Y si tiene alguna pregunta, no dude en unirse a la discusión en el foro de 4D.