Análisis y explotación de Big Data e implementación de un dashboard para su visualización Autor: Marcos Pérez Rubio Director: Miquel Gummà Maragall Institución del Director: Foot Analytics Ponente: Marc Alier Forment Departamento del ponente: Enginyeria de Serveis i Sistemes d’informació (ESSI) Empresa donde se ha realizado el TFG: Foot Analytics Titulación: Grado en Ingeniería en Informática Centro: Facultat d’Informàtica de Barcelona (FIB) Universidad: Universitat Politècnica de Catalunya (UPC) 16 de octubre de 2017 Agradecimientos Agradezco a todas aquellas personas que se han interesado en el proyecto y me han ayudado en cualquier medida, con especial mención: A todos los integrantes de Foot Analytics, en especial Miquel Gummà, Akira Taniguchi y Jordi Mas por concederme esta oportunidad. A mi ponente Marc Alier por la ayuda proporcionada. A Daniel Balastegui por su interés y mentoría a lo largo de estos años. A mi familia por permitirme llegar hasta aquí. A mi pareja Laura por su apoyo y ánimos incalculables. 1 Índice general 1. Introducción 12 1.1. Motivación personal . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 1.2. Asignaturas útiles . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 1.3. Objetivo del Trabajo de Final de Grado . . . . . . . . . . . . . . . 13 1.4. Actores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 1.5. Organización de la memoria . . . . . . . . . . . . . . . . . . . . . . 14 2. Estado del arte 16 2.1. In-Store Analytics . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 2.2. Contexto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 2.3. Herramientas de Business Intelligence . . . . . . . . . . . . . . . . . 18 2.3.1. BIME . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 2.3.1.1. Descripción . . . . . . . . . . . . . . . . . . . . . . 18 2.3.1.2. Principales características . . . . . . . . . . . . . . 18 2.3.1.3. Modelo de negocio . . . . . . . . . . . . . . . . . . 18 2.3.2. Tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 2.3.2.1. Descripción . . . . . . . . . . . . . . . . . . . . . . 19 2.3.2.2. Características . . . . . . . . . . . . . . . . . . . . 19 2.3.2.3. Modelo de negocio . . . . . . . . . . . . . . . . . . 19 2.3.3. Quadrigram . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 2.3.3.1. Descripción . . . . . . . . . . . . . . . . . . . . . . 19 2.3.3.2. Principales características . . . . . . . . . . . . . . 20 2.3.3.3. Modelo de negocio . . . . . . . . . . . . . . . . . . 20 3. Alcance 21 3.1. Fases del proyecto . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 3.2. Metodología de trabajo . . . . . . . . . . . . . . . . . . . . . . . . . 21 3.3. Seguimiento y control de calidad . . . . . . . . . . . . . . . . . . . . 22 4. Gestión económica 23 4.1. Estimación de costes . . . . . . . . . . . . . . . . . . . . . . . . . . 23 4.1.1. Costes asociados a los recursos humanos . . . . . . . . . . . 23 4.1.2. Costes asociados al software . . . . . . . . . . . . . . . . . . 24 4.1.3. Costes asociados al hardware . . . . . . . . . . . . . . . . . 24 4.1.4. Otros costes indirectos . . . . . . . . . . . . . . . . . . . . . 25 4.1.5. Contingencia . . . . . . . . . . . . . . . . . . . . . . . . . . 25 2 4.1.6. Imprevistos . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 4.2. Presupuesto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 4.3. Retorno de la inversión . . . . . . . . . . . . . . . . . . . . . . . . . 26 5. Sostenibilidad y compromiso social 27 5.1. Estudio de impacto económico . . . . . . . . . . . . . . . . . . . . . 27 5.2. Estudio de impacto Ambiental . . . . . . . . . . . . . . . . . . . . . 27 5.3. Estudio de impacto social . . . . . . . . . . . . . . . . . . . . . . . 28 5.4. Ponderación de la matriz . . . . . . . . . . . . . . . . . . . . . . . . 28 5.5. Justificaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 6. Planificación general 30 6.1. Planificación estimada . . . . . . . . . . . . . . . . . . . . . . . . . 30 6.2. Recursos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 6.2.1. Recursos humanos . . . . . . . . . . . . . . . . . . . . . . . 30 6.2.2. Recursos materiales . . . . . . . . . . . . . . . . . . . . . . . 30 6.2.3. Recursos software . . . . . . . . . . . . . . . . . . . . . . . . 31 6.3. Consideraciones globales . . . . . . . . . . . . . . . . . . . . . . . . 31 6.4. Plan de acción y valoración de alternativas . . . . . . . . . . . . . . 32 7. Descripción de las tareas 34 7.1. Gestión del proyecto . . . . . . . . . . . . . . . . . . . . . . . . . . 34 7.2. Fase 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 7.3. Iteraciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 7.4. Fase final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 7.5. Planificación final . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 7.5.1. Fase Inicial . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 7.5.2. Sprints . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 7.6. Metodología y rigor . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 7.6.1. Variaciones en el presupuesto . . . . . . . . . . . . . . . . . 37 8. Calendario 38 9. Análisis de requisitos 42 9.1. Problema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 9.2. Requisitos funcionales . . . . . . . . . . . . . . . . . . . . . . . . . 42 9.2.1. Diagrama de casos de uso . . . . . . . . . . . . . . . . . . . 42 9.2.2. Casos de uso . . . . . . . . . . . . . . . . . . . . . . . . . . 47 9.2.2.1. Iniciar sesión . . . . . . . . . . . . . . . . . . . . . 47 9.2.2.2. Cerrar sesión . . . . . . . . . . . . . . . . . . . . . 48 9.2.2.3. Visualizar dashboards de BIME . . . . . . . . . . . 48 9.2.2.4. Visualizar el dashboard básico . . . . . . . . . . . . 49 9.2.2.5. Visualizar el dashboard estándar . . . . . . . . . . 50 9.2.2.6. Crear campaña . . . . . . . . . . . . . . . . . . . . 51 9.2.2.7. Ver campañas . . . . . . . . . . . . . . . . . . . . . 51 9.2.2.8. Editar campaña . . . . . . . . . . . . . . . . . . . . 52 9.2.2.9. Eliminar campaña . . . . . . . . . . . . . . . . . . 52 3 9.2.2.10. Ver usuarios del sistema . . . . . . . . . . . . . . . 53 9.2.2.11. Crear usuario en el sistema . . . . . . . . . . . . . 53 9.2.2.12. Modificar usuario del sistema . . . . . . . . . . . . 54 9.2.2.13. Eliminar usuario del sistema . . . . . . . . . . . . . 55 9.2.2.14. Regenerar contraseña . . . . . . . . . . . . . . . . . 55 9.2.2.15. Ver archivos del servidor FTP . . . . . . . . . . . . 56 9.2.2.16. Subir archivo al servidor FTP . . . . . . . . . . . . 56 9.2.2.17. Eliminar archivo del servidor FTP . . . . . . . . . 57 9.2.2.18. Ver usuarios de BIME . . . . . . . . . . . . . . . . 57 9.2.2.19. Modificar usuario de BIME . . . . . . . . . . . . . 58 9.2.2.20. Eliminar usuario de BIME . . . . . . . . . . . . . . 58 9.2.2.21. Ver grupos de BIME . . . . . . . . . . . . . . . . . 59 9.2.2.22. Modificar grupo de BIME . . . . . . . . . . . . . . 59 9.2.2.23. Eliminar grupo de BIME . . . . . . . . . . . . . . 60 9.2.2.24. Eliminar subscripción para un dashboard . . . . . . 61 9.2.2.25. Eliminar subscripción para una regla de seguridad . 61 9.2.2.26. Importar grupos a BIME . . . . . . . . . . . . . . 62 9.2.2.27. Exportar grupos de BIME . . . . . . . . . . . . . . 63 9.2.2.28. Ver dashboards de BIME . . . . . . . . . . . . . . 63 9.2.2.29. Ver información del dashboard de BIME . . . . . . 64 9.2.2.30. Exportar dashboards de BIME . . . . . . . . . . . 64 9.2.2.31. Ver reglas de seguridad de BIME . . . . . . . . . . 65 9.2.2.32. Modificar regla de seguridad de BIME . . . . . . . 65 9.2.2.33. Exportar reglas de seguridad de BIME . . . . . . . 66 9.3. Requisitos de calidad . . . . . . . . . . . . . . . . . . . . . . . . . . 67 9.3.1. Requisitos de apariencia . . . . . . . . . . . . . . . . . . . . 67 9.3.2. Requisitos de estilo . . . . . . . . . . . . . . . . . . . . . . . 67 9.3.3. Requisitos de facilidad de uso . . . . . . . . . . . . . . . . . 68 9.3.4. Requisitos de aprendizaje . . . . . . . . . . . . . . . . . . . 68 9.3.5. Requisitos de comprensión y cortesía . . . . . . . . . . . . . 68 9.3.6. Requisitos de velocidad y latencia . . . . . . . . . . . . . . . 69 9.3.7. Requisitos de seguridad . . . . . . . . . . . . . . . . . . . . . 69 9.3.8. Requisitos de precisión y exactitud . . . . . . . . . . . . . . 69 9.3.9. Requisitos de fiabilidad y disponibilidad . . . . . . . . . . . 70 9.3.10. Requisitos de capacidad . . . . . . . . . . . . . . . . . . . . 70 9.3.11. Requisitos de escalabilidad y extensibilidad . . . . . . . . . . 71 9.3.12. Requisitos de privacidad . . . . . . . . . . . . . . . . . . . . 71 9.3.13. Requisitos de inmunidad . . . . . . . . . . . . . . . . . . . . 72 9.3.14. Requisitos de cumplimiento . . . . . . . . . . . . . . . . . . 72 9.3.15. Requisitos de estandarización . . . . . . . . . . . . . . . . . 72 9.3.16. Requisitos de rendimiento . . . . . . . . . . . . . . . . . . . 73 10.Desarrollo de la solución 74 10.1.Aprendizaje de la herramienta BIME . . . . . . . . . . . . . . . . . 74 10.1.1. Descripción del problema . . . . . . . . . . . . . . . . . . . . 74 10.1.2. Posibles soluciones . . . . . . . . . . . . . . . . . . . . . . . 75 4 10.1.3. Criterios para escoger una solución . . . . . . . . . . . . . . 75 10.1.4. Plan para ejecutar la solución . . . . . . . . . . . . . . . . . 76 10.1.5. Diseño . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 10.1.5.1. Modelo conceptual . . . . . . . . . . . . . . . . . . 76 10.1.5.2. Entidades de BIME . . . . . . . . . . . . . . . . . 77 10.1.5.3. Diagrama de clases . . . . . . . . . . . . . . . . . . 77 10.1.5.4. Diagramas de secuencia . . . . . . . . . . . . . . . 81 10.1.5.5. Patrones utilizados . . . . . . . . . . . . . . . . . . 85 10.1.5.5.1. Facade . . . . . . . . . . . . . . . . . . . . 85 10.1.5.5.2. Proxy . . . . . . . . . . . . . . . . . . . . 85 10.1.5.5.3. Factoría . . . . . . . . . . . . . . . . . . . 85 10.1.6. Implementación . . . . . . . . . . . . . . . . . . . . . . . . . 85 10.1.6.1. Node.js como plataforma de scripting . . . . . . . . 85 10.1.6.2. Interfaz para la API de BIME . . . . . . . . . . . . 85 10.1.6.3. Funcionalidades extras . . . . . . . . . . . . . . . . 86 10.1.6.4. Librerías utilizadas . . . . . . . . . . . . . . . . . . 86 10.1.7. Pruebas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 10.2.Sistema para la generación y envío de informes . . . . . . . . . . . . 87 10.2.1. Descripción del problema . . . . . . . . . . . . . . . . . . . . 87 10.2.2. Posibles soluciones . . . . . . . . . . . . . . . . . . . . . . . 87 10.2.2.1. Impresión desde BIME . . . . . . . . . . . . . . . . 87 10.2.2.2. Impresión automatizada de BIME . . . . . . . . . . 87 10.2.2.3. Replicar la plataforma desde cero . . . . . . . . . . 87 10.2.3. Criterios para escoger una solución . . . . . . . . . . . . . . 89 10.2.4. Plan para ejecutar la solución . . . . . . . . . . . . . . . . . 89 10.2.5. Estructura de los informes . . . . . . . . . . . . . . . . . . . 89 10.2.6. Diseño . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 10.2.6.1. Diagrama de clases . . . . . . . . . . . . . . . . . . 95 10.2.6.2. Arquitectura red del sistema . . . . . . . . . . . . . 96 10.2.6.3. Diagramas de secuencia . . . . . . . . . . . . . . . 96 10.2.6.3.1. Diagrama de secuencia para enviar todos los informes de los locales de un cliente . . 96 10.2.7. Implementación . . . . . . . . . . . . . . . . . . . . . . . . . 100 10.2.7.1. Estrategias probadas . . . . . . . . . . . . . . . . . 100 10.2.7.2. Solución final . . . . . . . . . . . . . . . . . . . . . 101 10.2.8. Diagrama de la API . . . . . . . . . . . . . . . . . . . . . . 103 10.2.8.1. Librerías utilizadas . . . . . . . . . . . . . . . . . . 103 10.2.8.2. Pruebas . . . . . . . . . . . . . . . . . . . . . . . . 103 10.2.8.2.1. Test del endpoint para conseguir los clien- tes que reciben informes . . . . . . . . . . 105 10.3.Implementación de una web propia . . . . . . . . . . . . . . . . . . 105 10.3.1. Descripción del problema . . . . . . . . . . . . . . . . . . . . 105 10.3.1.1. Dashboard Estándar de BIME y estructura . . . . 108 10.3.2. Posibles soluciones . . . . . . . . . . . . . . . . . . . . . . . 108 10.3.2.1. Frameworks de desarrollo . . . . . . . . . . . . . . 108 10.3.2.2. Librerías para los gráficos . . . . . . . . . . . . . . 109 5 10.3.2.2.1. Chart.js . . . . . . . . . . . . . . . . . . . 109 10.3.2.2.2. Highcharts.js . . . . . . . . . . . . . . . . 109 10.3.2.2.3. AmCharts.js . . . . . . . . . . . . . . . . 110 10.3.3. Criterios para escoger una solución . . . . . . . . . . . . . . 110 10.3.3.1. Community Driven . . . . . . . . . . . . . . . . . . 110 10.3.3.2. Programación orientada a componentes web . . . . 111 10.3.3.3. Reactividad . . . . . . . . . . . . . . . . . . . . . . 111 10.3.3.4. Arquitectura Flux . . . . . . . . . . . . . . . . . . 111 10.3.3.5. Elección . . . . . . . . . . . . . . . . . . . . . . . . 112 10.3.3.6. Librerías para los gráficos . . . . . . . . . . . . . . 113 10.3.4. Plan para ejecutar la solución . . . . . . . . . . . . . . . . . 113 10.3.5. Diseño . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 10.3.5.1. Visión global . . . . . . . . . . . . . . . . . . . . . 115 10.3.5.2. Modelo de datos . . . . . . . . . . . . . . . . . . . 115 10.3.5.3. Diagrama de las API . . . . . . . . . . . . . . . . . 117 10.3.5.4. Arquitectura de la información . . . . . . . . . . . 119 10.3.5.5. Interfaz gráfica . . . . . . . . . . . . . . . . . . . . 119 10.3.5.5.1. Integración del dashboard de BIME . . . . 129 10.3.5.5.2. Dashboard standard . . . . . . . . . . . . 133 10.3.5.6. Diagramas de secuencia . . . . . . . . . . . . . . . 142 10.3.5.6.1. Diagrama de inicio de sesión . . . . . . . . 142 10.3.5.6.2. Diagrama de secuencia de la carga de los widgets de un dashboard . . . . . . . . . . 146 10.3.5.6.3. Diagrama de secuencia para la petición de un informe PDF . . . . . . . . . . . . . . 150 10.3.6. Implementación . . . . . . . . . . . . . . . . . . . . . . . . . 150 10.3.6.1. Frontend . . . . . . . . . . . . . . . . . . . . . . . 150 10.3.6.1.1. Vue.js . . . . . . . . . . . . . . . . . . . . 151 10.3.6.1.2. Eventos . . . . . . . . . . . . . . . . . . . 153 10.3.6.1.3. Vuex . . . . . . . . . . . . . . . . . . . . . 153 10.3.6.1.4. Vue Router . . . . . . . . . . . . . . . . . 154 10.3.6.1.5. Vue Grid Layout . . . . . . . . . . . . . . 155 10.3.6.1.6. Vue Multianalytics . . . . . . . . . . . . . 155 10.3.6.1.7. Webpack . . . . . . . . . . . . . . . . . . 155 10.3.6.1.8. Bootstrap 3 . . . . . . . . . . . . . . . . . 156 10.3.6.1.9. Glyphicon y Themify . . . . . . . . . . . . 156 10.3.6.1.10.Backend . . . . . . . . . . . . . . . . . . . 159 10.3.6.1.11.Bases de Datos . . . . . . . . . . . . . . . 159 10.3.6.2. Implementación de la Autenticación . . . . . . . . 160 10.3.6.3. Integración de la herramienta de BIME . . . . . . . 162 10.3.6.4. Integración del generador de informes . . . . . . . . 163 10.3.6.5. Implementación del módulo FTP . . . . . . . . . . 163 10.3.6.6. Implementación del gestor de campañas . . . . . . 164 10.3.6.7. Integración de BIME en la plataforma . . . . . . . 164 10.3.6.8. Implementación del dashboard . . . . . . . . . . . 165 10.3.6.8.1. Tablero . . . . . . . . . . . . . . . . . . . 165 6 10.3.6.8.2. Filtros globales . . . . . . . . . . . . . . . 165 10.3.6.8.3. Filtros personalizados . . . . . . . . . . . 165 10.3.6.8.4. Filtros locales . . . . . . . . . . . . . . . . 165 10.3.6.8.5. Sistema de colas . . . . . . . . . . . . . . 166 10.3.6.8.6. Transformacióndelosdatos:MappersyRe- ducers . . . . . . . . . . . . . . . . . . . . 166 10.3.6.9. Implementación de los widgets . . . . . . . . . . . 169 10.3.6.10.Patrones utilizados . . . . . . . . . . . . . . . . . . 169 10.3.6.10.1.Model - View - Viewmodel . . . . . . . . . 169 10.3.6.10.2.Factoría . . . . . . . . . . . . . . . . . . . 169 10.3.6.10.3.Observador . . . . . . . . . . . . . . . . . 169 10.3.6.11.PM2 . . . . . . . . . . . . . . . . . . . . . . . . . . 169 10.3.7. Pruebas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 10.3.7.1. Pruebas de login . . . . . . . . . . . . . . . . . . . 171 10.3.7.2. Pruebas de rendimiento . . . . . . . . . . . . . . . 171 10.3.7.2.1. Prueba servidor Node.js . . . . . . . . . . 174 10.3.7.2.2. Prueba del servidor proxy . . . . . . . . . 174 10.3.7.2.3. Pruebas para el servidor Spring . . . . . . 174 10.3.8. Integraciones externas . . . . . . . . . . . . . . . . . . . . . 175 10.3.8.1. Integración de Google Analytics . . . . . . . . . . . 175 10.3.8.2. Integración de MixPanel . . . . . . . . . . . . . . . 175 10.3.8.3. Integración de OpBeat . . . . . . . . . . . . . . . . 177 10.3.8.4. Integración KeyMetrics . . . . . . . . . . . . . . . 177 10.3.8.5. Integración de Jenkins . . . . . . . . . . . . . . . . 180 10.3.8.6. Integración Slack . . . . . . . . . . . . . . . . . . . 181 10.3.9. Legislación aplicable . . . . . . . . . . . . . . . . . . . . . . 181 10.3.9.1. LOPD . . . . . . . . . . . . . . . . . . . . . . . . . 181 10.3.9.2. Ley de Servicios de la Sociedad de la Información . 182 11.Conclusiones 183 11.1.Objetivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 11.2.Mejoras y lineas de trabajo futuro . . . . . . . . . . . . . . . . . . . 183 11.3.Valoración personal . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 A. Annexo 186 A.1. FootCompare BIME Dashboard . . . . . . . . . . . . . . . . . . . . 186 7 Índice de figuras 2.1. Flujo de funcionamiento del producto . . . . . . . . . . . . . . . . . 17 8.1. Diagrama hasta el final del tercer sprint . . . . . . . . . . . . . . . 39 8.2. Diagrama hasta el final del séptimo sprint . . . . . . . . . . . . . . 40 8.3. Diagrama hasta el fin del proyecto . . . . . . . . . . . . . . . . . . . 41 9.1. Diagrama de casos de uso de la gestión usuarios del sistema . . . . 43 9.2. Diagrama de casos de uso de la gestión de BIME . . . . . . . . . . 44 9.3. Diagrama de casos de uso de la gestión de campañas . . . . . . . . 45 9.4. Diagrama de casos de uso de la gestión de campañas . . . . . . . . 45 9.5. Diagrama de casos de uso de la visualización de los diferentes dash- boards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 10.1.Diagrama de relación entre entidades de BIME . . . . . . . . . . . . 78 10.2.Model conceptual de la API de BIME . . . . . . . . . . . . . . . . . 79 10.3.Ejemplo de dashboard de BIME . . . . . . . . . . . . . . . . . . . . 79 10.4.Diagrama de clases de Bimer . . . . . . . . . . . . . . . . . . . . . . 80 10.5.Diagrama para conseguir todos los grupos . . . . . . . . . . . . . . 81 10.6.Diagrama para conseguir un grupo . . . . . . . . . . . . . . . . . . 81 10.7.Diagrama para eliminar un grupo . . . . . . . . . . . . . . . . . . . 82 10.8.Diagrama para actualizar un grupo . . . . . . . . . . . . . . . . . . 82 10.9.Diagrama para importar un grupo . . . . . . . . . . . . . . . . . . . 83 10.10.Diagrama para exportar un grupo . . . . . . . . . . . . . . . . . . . 84 10.11.Impresión de un dashboard de BIME con el navegador . . . . . . . 88 10.12.Captura de pantalla de un dashboard de BIME . . . . . . . . . . . 88 10.13.Informe original . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 10.14.Informe nuevo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 10.15.Periodos comparados para 6 meses . . . . . . . . . . . . . . . . . . 93 10.16.Diagrama de clases del generador de informes . . . . . . . . . . . . 95 10.17.Arquitectura de la solución . . . . . . . . . . . . . . . . . . . . . . . 96 10.18.Proceso completo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 10.19.Función para procesar los negocios . . . . . . . . . . . . . . . . . . 97 10.20.Activación de la generación de los informes por parte del sistema . . 98 10.21.Procesamiento del os locales de un cliente . . . . . . . . . . . . . . 98 10.22.Obtención de los datos de un local . . . . . . . . . . . . . . . . . . 99 10.23.Modelado de los datos . . . . . . . . . . . . . . . . . . . . . . . . . 99 10.24.Envío de un archivo PDF . . . . . . . . . . . . . . . . . . . . . . . 100 8 10.25.Fusión y envío de todos los archivos PDF de un cliente . . . . . . . 100 10.26.Gráfico con estilos CSS aplicados . . . . . . . . . . . . . . . . . . . 101 10.27.Gráfico sin estilos CSS aplicados . . . . . . . . . . . . . . . . . . . . 102 10.28.Diagrama de la API para la generación de informes . . . . . . . . . 104 10.29.Directorio de los test de integración de la API . . . . . . . . . . . . 105 10.30.Resultado de la ejecución del test . . . . . . . . . . . . . . . . . . . 105 10.31.Petición de los datos a comprobar . . . . . . . . . . . . . . . . . . . 106 10.32.Comprobación de los datos recibidos . . . . . . . . . . . . . . . . . 107 10.33.Detección de cambios en Vue.JS . . . . . . . . . . . . . . . . . . . . 112 10.34.Relación de conceptos Flux . . . . . . . . . . . . . . . . . . . . . . 113 10.35.Visión global de la solución . . . . . . . . . . . . . . . . . . . . . . 115 10.36.Modelo de datos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 10.37.Diagrama API de Spring . . . . . . . . . . . . . . . . . . . . . . . . 117 10.38.Diagrama API de Node . . . . . . . . . . . . . . . . . . . . . . . . . 118 10.39.Arquitectura de la información de la plataforma. . . . . . . . . . . . 119 10.40.Pantalla de inicio de sesión . . . . . . . . . . . . . . . . . . . . . . . 120 10.41.Pantalla de recuperación de contraseña . . . . . . . . . . . . . . . . 121 10.42.Pantalla de inicio . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 10.43.Página con la información requerida por la la LSSI . . . . . . . . . 123 10.44.Gestión de usuarios de BIME . . . . . . . . . . . . . . . . . . . . . 124 10.45.Gestor FTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 10.46.Listado de campañas . . . . . . . . . . . . . . . . . . . . . . . . . . 126 10.47.Edición de una campaña . . . . . . . . . . . . . . . . . . . . . . . . 127 10.48.Informe PDF integrado en la plataforma . . . . . . . . . . . . . . . 128 10.49.Selección de campañas predefinidas . . . . . . . . . . . . . . . . . . 130 10.50.Selección de periodos por defecto . . . . . . . . . . . . . . . . . . . 131 10.51.Selección de periodos arbitrarios . . . . . . . . . . . . . . . . . . . . 132 10.52.Conjuntos de filtros y gráfico de rebotes, visitas y porcentaje de cap- tación. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 10.53.Filtro para seleccionar los periodos. . . . . . . . . . . . . . . . . . . 135 10.54.Tabla resumen de KPIS y gráfico comparativo de captación y con- versión. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 10.55.Internos, rebotes, visiyas y porcentajes de captura y conversión. . . 137 10.56.Distribución horaria de los internos según la duración de la visita. . 138 10.57.Distribución de los internos. . . . . . . . . . . . . . . . . . . . . . . 139 10.58.Recurrencia de los clientes. . . . . . . . . . . . . . . . . . . . . . . . 140 10.59.Nuevos clientes frente a repeticiones. . . . . . . . . . . . . . . . . . 141 10.60.Implementación del login . . . . . . . . . . . . . . . . . . . . . . . . 142 10.61.Implementación del login en el servidor . . . . . . . . . . . . . . . . 143 10.62.Implementación del login para un usuario . . . . . . . . . . . . . . . 144 10.63.Login con lógica personalizada . . . . . . . . . . . . . . . . . . . . . 145 10.64.Implementación de la función selectora de ruta según rol . . . . . . 146 10.65.Petición de los datos de un dashboard . . . . . . . . . . . . . . . . . 147 10.66.Petición del layout . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 10.67.Aplicar los filtros personalizables a una query . . . . . . . . . . . . 148 10.68.Aplicar los filtros globales a una query . . . . . . . . . . . . . . . . 149 9