9 pasos para hacer un Dashboard con Bootstrap y Angular

9-pasos-para-hacer-un-dashboard-bootstrap-angular

En el artículo 3 pasos que debes considerar antes de crear un Dashboard cubrimos los fundamentos para la implementación de prácticamente cualquier Tablero de Control, incluyendo los Cuadros de Mando también conocidos como Balanced Scorecard.

Lo siguiente será identificar e implementar las arquitecturas y tecnologías que intervienen en el proceso de creación de Dahboards con Software Libre, esto quiere decir que no tendrás que desembolsar un solo centavo por conceptos de software o licencias de uso.

En este video te mostramos un ejemplo de como se comportan estos Dashboards desarrollados con Software Libre:

Proceso para la creación de un Dashboard con Software Libre (Bootstrap y Angular) en 9 pasos

  1. Preparando el template con Bootstrap
  2. Preparando el ambiente con Angular
  3. Preparando el ambiente para el filtrado de datos y Drill Down
  4. Consumiendo los datos del Datawarehouse
  5. Implementando la librería de gráficos
  6. Conectando el Dashboard con los datos
  7. Implementando filtros y Drill Down
  8. Actualización de datos con procesos ETL
  9. Puesta en marcha

Paso 1 – Definiendo el template con Bootstrap

Al igual que una pintura, nuestro Dahboard requiere de un lienzo donde se desplieguen nuestras Gráficas, Tablas de Datos, Filtros, etc. A ese lienzo se le conoce como Template y con Bootstrap podemos crear uno desde cero o descargarlo ya listo para trabajar.

Además Bootstrap permitirá que el Dashboard se adapte automáticamente en una PC, Laptop y prácticamente en cualquier dispositivo móvil. En internet encontraremos información de sobra para aprender Bootstrap, así como templates ya listos para la creación del Dashboard, la mayoría de ellos son gratuitos.

Ejemplo de Dashboard desarrollado con Bootstrap y Angular
Ejemplo de Dashboard desarrollado con Bootstrap y Angular

 DESCARGA TEMPLATE PARA DASHBOARDS

Paso 2 – Preparando el ambiente con Angular

Para la parte interactiva y el consumo de datos utilizaremos Angular, un framework basado en Javascript desarrollado por Google que permitirá enviar valores entre indicadores al momento de hacer Filtros, Drill Down, despliegue de datos, etc.

Al igual que Bootstrap, Angular también fue pensado para que se ejecute en dispositivos móviles, por lo tanto nuestros Dashboards se desplegarán en dispositivos móviles sin ningún problema.

Angular JS

Si no conoces nada de Angular, tendrás que aprender al menos lo básico y un poquito más, tampoco es necesario que te conviertas en un experto, mientras te dejo este par de videos:

Para iniciar con Angular te comparto estos 2 videos: Instalación de Angular Creación de un proyecto en Angular

Paso 3 – Preparando el ambiente para el filtrado de datos y Drill Down

Una de las ventajas de implementar Angular es que nos permite trabajar con la Arquitectura Single Page Application o (SPA) por sus siglas en inglés. Con las SPA podemos mostrar y procesar todos los datos desde una misma página sin recargar el navegador y con una velocidad increíble, mejorando de manera importante la experiencia del usuario, tanto en escritorio como en dispositivos móviles.

Cabe señalar que no solo con Angular podemos implementar SPA, existen otros frameworks como ReactJS, VueJS, Ember, Polymer, etc. Todos estos frameworks están basados en el lenguaje de programación de Javascript por lo que pueden ser desplegados en prácticamente cualquier servidor Web.

SPA

En este video podrás ver a Angular en acción utilizando SPA: Tableros de Control para Análisis de Proyectos

Paso 4 – Consumiendo los datos del Datawarehouse

Partiendo del hecho de que ya tienes construido el Datawarehouse, entonces se tendrá que desarrollar una capa que permita la interacción con los datos entre el Dashboard y el Datawarehouse, para esto, puedes utilizar cualquier lenguaje de programación que te permita consultar Bases de Datos Relacionales o NonSQL y ponerlos disponibles en formato JSON preferentemente con algún Servicio Web.

Captura de pantalla 2018-09-11 a la(s) 11.25.45

Para esto sugerimos trabajar con Python o PHP, ambos son lenguajes de programación muy livianos, poderosos y bastante sencillos. Te dejo estos cursos que te servirán para iniciar con estos lenguajes de programación y los Servicios Web:

Curso para aprender a programar en Python desde cero

Curso para aprender a programar en PHP desde cero

Taller de desarrollo de Servicios Web

Paso 5 – Implementando la librería de gráficos

Este paso (al igual que Bootstrap) es de vital importancia, por que además de ser el que se encargará de mostrar la información de forma visual, también estará a cargo de la interacción entre el usuario y los datos, de hecho, la librería de gráficos es un factor de peso para el éxito o fracaso de tu proyecto.

Afortunadamente contamos con una gran variedad de opciones gratuitas para resolver el tema, yo solo recomiendo 3:

Fusion Charts
High Charts
Google Charts

Las 3 librerías las puedes utilizar sin ningún tipo de restricción, excepto Fusion Charts que tiene una leyenda muy pequeña al pié del gráfico, si quieres quitarla hay que pagar por ello (nada grave) además tienen mucho tiempo en el mercado y cuentan con funcionalidad como Drill Down, diferentes tipos de gráficos, son muy interactivas y fáciles de implementar entre otros beneficios.

Al final, puedes utilizar la librería que mejor te acomode, nosotros hemos utilizado las 3 mencionadas anteriormente sin ningún problema.

Paso 6 – Conectando el Dashboard con los datos

Es recomendable que todos los datos que se vayan a mostrar en el Datawarehouse se obtengan mediante un Servicio Web en formato JSON, además de que prácticamente todas las librerías de gráficos y de tablas de datos procesan este formato, al utilizar un Servicio Web generamos una capa intermedia entre el Dashboard y el Datawarehouse permitiendo independencia en plataformas y mejora al momento de realizar algún mantenimiento como cambio en la librería de gráficos, ajustes a las consultas, mejoras en el Datawarehouse, etc.

Paso 7 – Implementando filtros y Drill Down

Para implementar Drill Down y Filtros entre componentes es necesario trabajar con Tecnologías de tipo Single Page Application (SPA), es por eso que utilizamos Angular, pero puedes utilizar cualquier framework que lo permita como Ember, VUE y ReactJS.

Este tipo de frameworks permiten generar bloques de código conocidos como Componentes, los cuales funcionan de manera independiente para que después puedan ser integrados en una sola página que sería el lienzo de nuestro Dashboard.

Cada componente despliega un indicador el cual puede ser un gráfico, tabla de datos e incluso un Cubo OLAP. Para el paso de valores entre componentes se utilizan Observables, estos están todo el tiempo a la espera de recibir un valor proveniente de algún click en un gráfico o el valor de algún filtro y de esta manera hacer el Drilldown sin tener que recargar todo el sitio web.

Cabe señalar que la ventaja de utilizar Frameworks que permiten trabajar con estas tecnologías es que ya lo hacen manera nativa mejorando de forma importante el rendimiento y la implementación de dicha funcionalidad.

Paso 8 – Actualización de datos con procesos ETL

Previamente comentamos que para el desarrollo de los procesos ETL es recomendable utilizar Pentaho Data Integration también conocida como Kettle. Para la actualización del Datawarahouse necesitamos ejecutar estos procesos en algún momento del día o según se requiera, para esto utilizamos tareas programadas en Windows o Cronjobs en Unix/Linux.

Sin embargo, es importante desarrollar en ambos casos un archivo que sería el encargado de lanzar el proceso, para el caso de las Transformaciones se utiliza Kitchen y para el caso de los Jobs se utiliza Spoon. Si te resultan desconocidos estos términos te compartimos estos videos que te pueden ayudar a profundizar más sobre los procesos ETL y Pentaho Data Integration (Kettle)

Pentaho

Paso 9 – Puesta en marcha

Como punto final podemos resumir que nuestra aplicación se integra por 4 bloques, los cuales pueden trabajar de manera independiente o en un solo servidor, a continuación describo los requermientos técnicos para cada componente:

1. El Frontend
Este bloque es el encargado de presentar los datos al usuario y aquí es donde interviene Bootstrap y Angular, ambas tecnologías no requieren más que un Servidor Web para funcionar, por ende puedes utilizar Apache, NginX, IIS o lo que mejor te acomode.

2. El Middleware
Este bloque funciona como intermediario entre el Frontend y el Datawarehouse, previamente mencionamos que se recomienda desarrollar un Servicio Web ya sea con PHP o con Python.

Si decides utilizar PHP lo puedes ejecutar en prácticamente cualquier hosting, incluso puede ser el mismo del punto 1. Para el caso de Python, también podemos encontrar bastantes hospedajes económicos pero aún así es más popular PHP.

3. El Datawarehouse
Lo puedes montar sin ningún problema en cualquier servidor de base de datos relacional, no requieres de nada en especial, para esto nosotros sugerimos MySQL o MariaDB, ambos funcionan de una manera ágil y muchos hostings también ya lo traen preinstalado.

De igual forma puedes aprovechar para esto el servidor el bloque 1 y 2.

3. Los procesos ETL
Probablemente este sea el bloque con menos requerimientos pero de los menos comunes en hostings comerciales y al igual que los tres bloques anteriores, todo puede quedar instalado en el mismo server, siempre que tenga Pentaho Data Integration (Kettle) y el JDK instalado.

Naturalmente aquí se ejecutarán los scripts de las transformaciones y jobs que se encargarán de poblar el Datawarehouse.

En resumen, la infraestructura tecnológica que necesitas para poder poner en marcha esta solución de Dashboards es la siguiente:

  • Servidor Web Apache o NgineX
  • Servidor de base de datos MySQL o MariaDB
  • Otras tecnologías: Java o PHP como lenguaje de scripting y el JDK de Java
  • *** Todo esto lo puedes tener a costos muy bajos en un VPS o en un servidor local ***

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *