Aplicación de tecnologías .net y chart.js para el desarrollo de un tablero de indicadores clave
Revista Académica y científica VICTEC, vol. 3, núm. 5, pp. 1-131, 2022
Editorial Vicente León
Recepción: 01 Mayo 2022
Aprobación: 10 Junio 2022
Resumen: Las organizaciones diariamente toman decisiones que deben estar apoyadas en información estratégica, es por ello que se propone al tablero de indicadores clave (Dashboard) como alternativa para dar un tratamiento adecuado a los datos con la finalidad de convertirlos en información y conocimiento. El presente trabajo es de tipo descriptivo y busca difundir la forma de como la librería open source chart.js es capaz de integrarse dentro de un proyecto web desarrollado con C# .net y Scrum, los resultados indican que es viable combinar software libre y software privativo en la construcción de Dashboards Web.
Palabras clave: Inteligencia de Negocios, Analítica de Datos, Programación Web, Scrum, Cuadro de Mando Integral, Conocimiento.
Abstract: Organizations make decisions on a daily basis that must be supported by strategic information, which is why the dashboard of key indicators (Dashboard) is proposed as an alternative to give adequate treatment to data in order to convert them into information and knowledge. The present work is of a descriptive type and seeks to spread the way in which the open source chart.js library is capable of being integrated into a web project developed with C# .net and Scrum, the results indicate that it is feasible to combine free software and proprietary software in building Web Dashboards.
Keywords: Business intelligence, Data Analytics, Web programming, Scrum, Balanced Scorecard, Knowledge.
Introducción
Las tecnologías de información (TI) se han convertido en un aliado fundamental en la realización de procesos de evaluación, puesto que han brindado las herramientas necesarias para construir sistemas informáticos que faciliten estos procesos, la visualización de datos mediante gráficas estadísticas y la generación de reportes con el objetivo de proporcionar información importante para la toma de decisiones (Avenía, 2017).
Dentro del desarrollo de sistemas informáticos, un componente que permite la visualización y el monitoreo de la información, y que además realiza un diagnóstico con base a una amplia gama de métricas y evidencias, puede dar seguimiento y evaluar situaciones específicas, es el dashboard.
En gran medida, el dashboard (Martínez, 2017) ha cobrado un particular interés debido a los avances en el desarrollo de software y herramientas web de visualización que ahora son más fáciles de utilizar y menos costosas. Del mismo modo, el aumento de capacidad de procesamiento de los computadores y la producción masiva de información por parte de las instituciones.
El lenguaje de programación considerado en el desarrollo del dashboard presentado en este trabajo investigativo es C Sharp (C#), utilizado con aplicaciones de ambiente web ASP.NET que soporta diferentes modelos de programación existentes, lo que hace que el lenguaje sea muy flexible cuando se desarrolla en un entorno de back-end considerándolo como una parte apropiada de la lógica del sistema (Anderson, 2020).
Asimismo, para generar gráficas estadísticas como parte del tablero de indicadores clave o dashboard se ha seleccionado un framework open source llamado Chart.js debido a la gran cantidad de funciones y gráficos que proporciona a la hora de generar informes estadísticos, por lo cual resulta la mejor opción porque está basado en javascript y tiene una fácil escritura, pero sobre todo compatibilidad con cualquier tipo de aplicación web (Morales, 2018).
Metodología
La información utilizada para la realización de la investigación se ha obtenido de un repositorio de datos asociado al Sistema de Gestión Integrado de la Universidad Técnica de Cotopaxi dentro del cual existen registros relacionados con la actividad académica que se realiza en dicha institución de educación superior, es por ello que se ha recurrido a una investigación descriptiva y explicativa que se centra en establecer la forma de cómo utilizar la librería chart.js escrita en el lenguaje JavaScript en el lado del cliente y su integración en proyectos .Net con lenguaje C# en el lado del servidor. Por consiguiente, y tomando en cuenta lo anteriormente expuesto, es importante mencionar que en la actualidad no existen muchos proyectos que integren dichas tecnologías.
2.1. Tipos de investigación
Para el trabajo se tomó en consideración a la investigación descriptiva con la finalidad de tener un detalle característico e informativo sobre el uso de la librería chart.js con el Framework .Net en el lenguaje C#. Además, se considera importante incluir a la investigación explicativa, puesto que se busca contrastar las causas y efectos sobre lo anteriormente mencionado.
2.2. Metodología de desarrollo
Al momento de desarrollar un sistema informático es fundamental considerar a una metodología específica por lo cual se ha optado emplear Scrum, puesto a que permite realizar una planificación adecuada por los miembros del equipo dividiendo el trabajo en intervalos de tiempo de 2 a 4 semanas conocidos como Sprint, esto contribuye en la posibilidad de dividir tareas grandes y complejas en partes pequeñas y simples, mejorando el tiempo y la calidad de entrega del software.
Además, el enfoque ágil tiene como objetivo acelerar el desarrollo de entregas de software mediante la creación de prototipos a plazos cortos con la ayuda de los representantes de los usuarios finales, puesto que, su intervención genera comentarios oportunos y facilita la reestructuración o retroalimentación de la aplicación durante el desarrollo.
Resultados
Para desarrollar el dashboard utilizando el lenguaje de programación C# de la plataforma .net y la librería open source chart.js se ha considerado conveniente implementar un tablero de indicadores clave en ambiente web mediante la metodología Scrum estableciendo un conjunto de requerimientos que han sido obtenidos y codificados satisfactoriamente de acuerdo con las necesidades expresadas por la dirección de tecnologías de la información y comunicaciones de la Universidad Técnica de Cotopaxi.
3.1. Herramientas de desarrollo utilizadas
Para el análisis de requerimientos se consideró oportuno trabajar con Jira en vista de que es una forma automatizada de mantener un mejor control sobre cada una de los Sprints, Product Backlog y tareas que son realizadas durante el desarrollo del sistema. Los lenguajes de programación contemplados para el desarrollo del sistema Dashboard están impuestos directamente en el sistema académico que está en funcionamiento en la Universidad Técnica de Cotopaxi, describiendo, así, como principal a C Sharp (C#) que trabaja con el entorno para aplicaciones web ASP.NET y soporta los diferentes paradigmas de programación existentes, lo cual hace que este lenguaje sea muy flexible al momento de desarrollar en un entorno back-end, tomando en cuenta que, este, a su vez, es la parte lógica del sistema. Asimismo, el uso de JavaScript mejora la experiencia del usuario brindando páginas web más dinámicas y vistosas. Aun cuando, este lenguaje no necesita instalación, ofrece tecnologías independientes como JQuery y Ajax que permiten la manipulación e intercambio de información de manera asíncrona obteniendo una navegación ágil, rápida y dinámica entre el servidor y el cliente
3.2. Definición de requerimientos
En la tabla 1 se presentan los requerimientos definidos para el dashboard en forma de product backlog de acuerdo con la metodología ágil aplicada en el trabajo.
Product backlog del tablero de Indicadores clave desarrollado
Product backlog del tablero de Indicadores clave desarrollado
N° TAREA PRIORIDAD 1 Gráfica del número de estudiantes matriculados en las sedes, facultades, carreras y nivel Alta 2 Gráfica del número de estudiantes con matrícula repetida en las sedes de la universidad, facultades, carreras y niveles Alta 3 Gráfica del número de estudiantes con segunda matrícula en las sedes de la universidad, facultades, carreras y niveles Alta 4 Gráfica del número de estudiantes con tercera matrícula en las sedes de la universidad, facultades, carreras y niveles Alta 5 Gráfica de los estudiantes matriculados según su provincia, ciudad, parroquia de procedencia Alta 6 Reporte académico simple o general del estudiante Alta 7 Gráfica de los docentes con incumplimiento en la planificación de pase de notas Alta 8 Gráfica de docentes por tipo de dedicación Alta 9 Gráfica de docentes por categoría académica Alta 10 Gráfica según el número de materias por docente Alta 11 Gráfica de evaluación al docente Alta 12 Generar reporte Excel de docentes Alta 13 Gráfica de materias con matrículas repetidas en cada ciclo Alta 14 Gráfica de estudiantes con matrículas repetidas en las materias Alta 15 Nómina de estudiantes con matrículas repetidas en las materias Alta 16 Generar reporte Excel de la nómina de estudiantes con matrículas repetidas en las materias Alta Importar tabla
Fuente: Tablero de Indicadores claves para el desarrollo
Como se puede evidenciar el product backlog se conforma de 16 tareas las cuales han sido dividas en sprints para llevar una correcta implementación de cada una de ellas, de igual modo las revisiones del avance en el trabajo se realizaron mediante reuniones de retrospectiva obteniendo entregables satisfactorios en cada uno de los sprints. Por otro lado, para lograr la integración de chart.js con la plataforma .net se ha diseñado una arquitectura donde JSON es un intermediario que facilita el consumo de datos desde el almacén del sistema de gestión integrado.
Arquitectura del Dashboard
Fuente: Las tecnologías de información (TI)Arquitectura del Dashboard
Fuente: Las tecnologías de información (TI)
3.3. Indicadores claves obtenidos
Considerando que la Universidad Técnica de Cotopaxi dispone una gran cantidad de datos recolectados a lo largo de los años de funcionamiento se ha considerado implementar filtros que faciliten la segregación de la información como se puede ver en la figura 2.
Filtros del tablero de indicadores clave
Fuente: Investigación del objeto de estudio
Investigación del objeto de estudioURI:Filtros del tablero de indicadores clave
Fuente: Investigación del objeto de estudio
Dado a que tanto la tecnología .net como chart.js están destinadas al desarrollo de aplicaciones web no se tuvo mayores inconvenientes para integrarlas es por ello que en la figura 3 y figura 4 se presentan indicadores estadísticos generados gracias a la interacción eficiente de ambas herramientas de desarrollo.
Indicador de alumnos matriculados por sede
Fuente: Investigación del objeto de estudio
Visualización general del tablero de indicadores
Fuente: Investigación del objeto de estudio
Discusión
4. Discusión
La competitividad existente en cualquier ámbito empresarial hace que las organizaciones requieran de sistemas informáticos que contribuyan en la automatización de actividades, sin embargo, estos sistemas computacionales generan una gran cantidad de datos que en muchas ocasiones son simplemente almacenados, lo cual les resta a las instituciones la posibilidad de disponer de información eficiente capaz de apoyar la toma de decisiones. Es por ello que una vez que se ha desarrollado el Dashboard con tecnologías libres y privativas se puede establecer que dentro de las empresas o instituciones se propone considerar los siguientes niveles para una generación adecuada de conocimiento:
Niveles para la generación de conocimiento
Fuente: Investigación del objeto de estudio
En la Figura 5 se propone una pirámide en la cual intervienen distintos elementos que deben considerarse para incorporar tableros de indicadores clave dentro de las organizaciones, cabe mencionar que la parte inferior considera los sistemas de información utilizados por la parte operativa en el día a día, en la parte central se considera el mando medio quienes tienen conocimiento de sus áreas específicas por lo cual podrían contribuir en la definición de los indicadores clave y en la cúspide se encuentra la parte gerencial quienes requieren los Dashboard para apoyar la toma de decisiones.
Por otro lado, para este trabajo se consideró a la Universidad Técnica de Cotopaxi donde se tiene un sistema de gestión integrado el cual con el pasar de los años ha acumulado una gran cantidad de datos asociados a docentes, empleados, estudiantes de pregrado y posgrado pero presentaba este tipo de inconvenientes asociados a la falta de análisis de datos, por tal razón, se propuso como alternativa de solución aplicar la Inteligencia de Negocios facilitando de este modo el procesamiento de los datos existentes en el sistema integrado de gestión universitaria y convirtiéndolos en información capaz de dotar del conocimiento necesario para apoyar la toma de decisiones dentro de la universidad a través de un dashboard.
Proceso de generación de conocimiento propuesto
Fuente: Investigación del objeto de estudio
Para el desarrollo fue fundamental aplicar la metodología Scrum y a través de las diferentes implementaciones realizadas se ha establecido que la tecnología .net y la librería chart.js son capaces de trabajar coordinadamente y permiten generar herramientas de ambiente web compuestas por diferentes gráficas con filtros e interacciones intuitivas que ayudan a evidenciar en tiempo real métricas importantes para cualquier empresa, en figura 6 se presenta los componentes más sobresalientes que dispone chart.js.
Figura 7
Componentes de chart.js
Fuente: Investigación del objeto de estudio
Es importante señal que al ser .net una plataforma de Microsoft no es común que interactúe con herramientas open source como es el caso de chart.js pero al ser ambas plataformas de desarrollo de aplicaciones web durante la realización de la investigación se pudo integrarlas de forma exitosa a través de la utilización de servicios web y el formato JSON, de igual modo chart.js dispone de diferentes visualizaciones de barras, pastel, lineales, entre otras que sin duda facilitan la generación de tableros de indicadores clave destinados a monitorear la gestión realizada dentro de las empresas con la intención de detectar situaciones adversas y poder establecer soluciones tempranas.
Conclusiones
La definición de requerimientos para el desarrollo del dashboard fue realizada mediante el product backlog que fue un artefacto de software pertinente para optimizar la planificación y ejecución de actividades de desarrollo mediante la aplicación de la metodología Scrum.
El tablero de indicadores clave también conocido como dashboard proporciona información visual con la finalidad de que las personas del área estratégica de las organizaciones puedan tomar las mejores decisiones apoyándose en el conocimiento que de ahí se puede derivar.
La integración de Chart.js dentro de proyectos de software desarrollados con la plataforma .net, específicamente con el lenguaje de programación C# es posible mediante la generación de servicios web y la utilización de JSON como intermediario para la comunicación entre el lado del cliente y del servidor.
Anderson, R. (19 de 02 de 2020). ASP.NET Overview. Obtenido de https://docs.microsoft.com/en-us/aspnet/overview
Anderson, R. (19 de 02 de 2020). ASP.NET Overview. Obtenido de https://docs.microsoft.com/en-us/aspnet/overview
Fundamentos de seguridad informática
Avenía, C. (2017). Fundamentos de seguridad informática. Bogotá: AREANDINA.
Lenguaje de programación
Grande, J. (2019). Lenguaje de programación. ECURED.
GESTIÓN DE LA SEGURIDAD DE LA INFORMACIÓN.
ISO. (2013). ISO 27001 GESTIÓN DE LA SEGURIDAD DE LA INFORMACIÓN. Obtenido de https://www.normas-iso.com/iso-27001/
Metodología para el diseño de dashboards
Martínez, D. (2017). Metodología para el diseño de dashboards. Madrid: UNIR.
Los Niveles de Investigación
TECANA AMERICAN UNIVERSITY. (2020). Los Niveles de Investigación. Texas: TA University.
