Desarrollo de un sistema para el procesamiento y visualización de datos de emisiones de vehículos de combustión.

DESARROLLO DE UN SISTEMA PARA EL PROCESAMIENTO Y VISUALIZACIÓN DE DATOS DE EMISIONES DE VEHÍCULOS DE COMBUSTIÓN DEVELOPMENT OF A SYSTEM FOR THE PROCESSING AND VISUALIZATION OF COMBUSTION VEHICLE EMISSIONS DATA Miguel Marzal García GRADO EN INGENIERÍA INFORMÁTICA FACULTAD DE INFORMÁTICA UNIVERSIDAD COMPLUTENSE DE MADRID TRABAJO DE FIN DE GRADO CURSO 2021-2022 DIRECTOR Antonio Sarasa Cabezuelo 1 AGRADECIMIENTOS A mi familia y mi novia por aguantarme y apoyarme durante todo este curso, y hacer posible que acabe la carrera después de tanto tiempo. 2 RESUMEN En este trabajo se recoge la especificación, diseño e implementación de un sistema de procesamiento y visualización de datos de emisiones de vehículos de combustión. Se recogen todos los componentes tanto del servicio encargado del procesamiento de datos como de la aplicación web para la visualización de los mismos. Se incluye todo lo necesario para la compresión de este trabajo. El sistema se compone de dos aplicaciones independientes, pero que necesitan una de la otra para el perfecto funcionamiento. Consiste en una aplicación web que ofrece al usuario un panel de administración en el que se podrán seleccionar y visualizar los datos de una sesión de medición de gases contaminantes, y de un servicio de Windows, que se encarga del procesado de los datos de dicha sesión. Lo datos son generados por un sensor denominado “L6” que pertenece a la empresa OPUS RSE, el cual genera los archivos binarios con datos en “crudo”, que deben procesarse para extraer la información de utilidad y mostrarla al usuario final con la mayor claridad posible. PALABRAS CLAVE Emisiones, web, servicio Windows, sql server, vehículo 3 ABSTRACT This work includes the specification, design and implementation of a system for processing and visualization of emissions data from combustion vehicles. All the components of both the service in charge of data processing and the web application for data visualization are included. Everything necessary for the compression of this work is included. The system is composed of two independent applications, but they need each other for perfect operation. It consists of a web application that offers the user an administration panel where the data of a measurement session of pollutant gases can be selected and displayed, and a Windows service, which is responsible for processing the data from that session. The data are generated by a sensor called "L6" belonging to the company OPUS RSE, which generates binary files with "raw" data, which must be processed to extract the useful information and display it to the end user as clearly as possible. KEYWORDS Emissions, web, windows service, sql server, vehicle 4 INDICE Capítulo 1. Introducción. ............................................................................................. 10 1.1 Motivación.................................................................................................... 10 1.2 Objetivos. ..................................................................................................... 11 1.3 Planificación. ................................................................................................ 11 1.3.1 Diagrama de Gantt. ................................................................................ 11 1.3.2 Toma y análisis de requisitos de la aplicación web. ................................ 11 1.3.3 Diseño e implementación de la aplicación web. ..................................... 12 1.3.4 Pruebas de la aplicación web sin servicio de Windows. .......................... 12 1.3.5 Toma y análisis de requisitos del Servicio Windows. ............................. 12 1.3.6 Diseño e implementación del Servicio Windows. ................................... 12 1.3.7 Pruebas de la aplicación web con el Servicio Windows. ......................... 12 1.4 Estructura de la memoria............................................................................... 13 Chapter 1. Introduction. .............................................................................................. 14 1.1 Motivation. ................................................................................................... 14 1.2 Objectives. .................................................................................................... 15 1.3 Planification. ................................................................................................. 15 1.3.1 Gantt diagram. ....................................................................................... 15 1.3.2 Requirements gathering and analysis of the web application.. ................ 15 1.3.3 Design and implementation of the web application. ............................... 16 1.3.4 Testing of the web application without Windows service. ...................... 16 1.3.5 Windows Service requirements gathering and analysis. .......................... 16 1.3.6 Design and implementation of the Windows Service. ............................. 16 1.3.7 Testing of the web application with the Windows Service. ..................... 16 1.4 Memory structure. ......................................................................................... 17 Capítulo 2. Estado del arte. ......................................................................................... 18 Capítulo 3. Tecnología empleada ................................................................................ 19 3.1 Microsoft Visual Studio ................................................................................ 19 3.2 ASP.NET MVC Framework ......................................................................... 19 3.3 Microsoft SQL Server ................................................................................... 19 3.4 Azure Devops Server .................................................................................... 20 3.5 Internet Information Services ........................................................................ 20 3.6 GitMind ........................................................................................................ 20 3.7 Otras tecnologías .......................................................................................... 20 5 Capítulo 4. Casos de uso. ............................................................................................ 23 4.1 Actores del sistema. ...................................................................................... 23 4.2 Módulo operador. ......................................................................................... 23 4.3 Módulo administrador. .................................................................................. 27 Capítulo 5. Arquitectura. ............................................................................................. 45 5.1 Modelo. ........................................................................................................ 46 5.2 Vista. ............................................................................................................ 47 5.3 Controlador. .................................................................................................. 47 Capítulo 6. Modelo de datos. ....................................................................................... 49 6.1 Implementación de la base de datos. ............................................................. 49 6.2 Descripción de tablas de base de datos. ......................................................... 50 Capítulo 7. Diseño. ..................................................................................................... 53 7.1 Estilo. ........................................................................................................... 53 7.2 Funcionalidad de la Web(L6WebApp). ......................................................... 53 7.2.1 Dashboard ............................................................................................. 53 7.2.2 Customers .............................................................................................. 63 7.2.3 Projects, Sites, Users, Configuration ...................................................... 70 7.3 Servicio de Windows (L6FileSystemWatcher) .............................................. 71 Capítulo 8. Evaluación. ............................................................................................... 72 8.1 Evaluación de la usabilidad de la web ........................................................... 72 8.1.1 Metodología........................................................................................... 72 8.1.2 Resultados ............................................................................................. 72 8.2 Evaluación del algoritmo de procesado de datos............................................ 74 8.2.1 Metodología........................................................................................... 74 8.2.2 Resultados ............................................................................................. 75 Capítulo 9. Conclusiones y trabajo futuro. ................................................................... 76 9.1 Conclusiones................................................................................................. 76 9.2 Trabajo futuro ............................................................................................... 76 Chapter 9. Conclusions and future work. ..................................................................... 77 9.1 Conclusions .................................................................................................. 77 9.2 Future work .................................................................................................. 77 Bibliografía ................................................................................................................. 78 Anexo I. Guía del usuario............................................................................................ 80 Anexo II. Preguntas de la evaluación de la web. .......................................................... 87 6 INDICE FIGURAS Figura 1 - Diagrama de Gantt ...................................................................................... 11 Figura 2 – Gantt diagram ............................................................................................ 15 Figura 3 - Aplicación NextGen propiedad de Opus RS Europe .................................... 18 Figura 4 - Diagrama casos de uso operador. ................................................................ 23 Figura 5 - Diagrama casos de uso administrador.......................................................... 27 Figura 6 - Arquitectura del sistema. ............................................................................. 45 Figura 7 - Esquema MVC. .......................................................................................... 46 Figura 8 - Entidad Customer. ...................................................................................... 47 Figura 9 - Clase Customer. .......................................................................................... 47 Figura 10 - Petición URL. ........................................................................................... 48 Figura 11 - Diagrama de base de datos. ....................................................................... 49 Figura 12 - Imagen de la cabecera de la web. .............................................................. 53 Figura 13 - Código HTML de la cabecera. .................................................................. 54 Figura 14 - Método Index del controlador HomeController. ........................................ 54 Figura 15 - Imagen de la web sin sesión de medición iniciada. .................................... 54 Figura 16 - Código de carga de clientes. ...................................................................... 55 Figura 17 - Método GetsMyCustomersOrAdmin del controlador CustomersController. ................................................................................................................................... 55 Figura 18 - Evento OnClick del botón Start. ................................................................ 56 Figura 19 - Método NewSession del controlador SessionsController. .......................... 56 Figura 20 - Imagen de la web con sesión de medición iniciada. ................................... 57 Figura 21 - Código establecimiento de conexión hub de SignalR................................. 57 Figura 22 - Clase MyHub. ........................................................................................... 58 Figura 23 - Parte del código de la función getAllMessages(). ...................................... 58 Figura 24 - Método GetAllMessages del controlador VDRMainsController. ............... 59 Figura 25 - Método GetMessages del controlador VDRMainsController. .................... 60 Figura 26 - Datos de emisión del vehículo principal con imagen del vehículo. ............ 61 Figura 27 - Datos de emisión del vehículo principal con gráfica. ................................. 61 Figura 28 - Datos de emisión de los vehículos anteriores al principal con imagen del vehículo. ..................................................................................................................... 61 Figura 29 - Datos de emisión de los vehículos anteriores al principal con gráfica. ....... 61 7 Figura 30 - Código html del botón “Show VDR History”. ........................................... 62 Figura 31 - Método Index del controlador VDRMainsController. ................................ 62 Figura 32 - Código Ajax de carga de la historia de vehículos registrados. .................... 62 Figura 33 - Método GetVDRMains del controlador VDRMainsController. ................. 62 Figura 34 - Código html del botón “Download VDR History”..................................... 63 Figura 35 - Método Export del controlador VDRMainsController. .............................. 63 Figura 36 - Visualización de clientes. .......................................................................... 64 Figura 37 - Código html de la tabla generada en la página de visualización de clientes. ................................................................................................................................... 64 Figura 38 - Función detailFormatter. ........................................................................... 65 Figura 39 - Función ajaxRequest. ................................................................................ 65 Figura 40 - Método GetCustomers. ............................................................................. 65 Figura 41 - Función initTable. ..................................................................................... 65 Figura 42 - Función operateFormatter. ........................................................................ 66 Figura 43 - Método Create del controlador CustomersController. ................................ 66 Figura 44 - Visualización nuevo cliente. ...................................................................... 66 Figura 45 - Código html de la vista Create (Customer). ............................................... 67 Figura 46 - Método Create del controlador CustomersController. ................................ 67 Figura 47 - Método Edit del controlador CustomersController. ................................... 68 Figura 48 - Visualización editar cliente. ...................................................................... 68 Figura 49 - Código html de la vista Edit (Customer).................................................... 68 Figura 50 - Método Edit del controlador CustomersController. ................................... 69 Figura 51 - Método Delete del controlador CustomersController. ................................ 69 Figura 52 - Visualización eliminar cliente. .................................................................. 69 Figura 53 - Código html de la vista Delete (Customer). ............................................... 70 Figura 54 - Método DeleteConfirmed del controlador CustomersController. ............... 70 Figura 55 - Esquema del servicio Windows para el procesado de ficheros. .................. 71 Figura 56 - Respuestas evaluación web 1. ................................................................... 72 Figura 57 - Respuestas evaluación web 2. ................................................................... 73 Figura 58 - Respuestas evaluación web 3. ................................................................... 73 Figura 59 - Respuestas evaluación web 4. ................................................................... 73 Figura 60 - Botellas de gas calibradas utilizadas durante los test.................................. 74 Figura 61 - Diferencia relativa entre la proporción medida y la esperada. .................... 75 Figura 62 - Login de la aplicación web. ....................................................................... 80 8 Figura 63 – Pantalla principal con rol administrador. ................................................... 81 Figura 64 – Pantalla principal con rol operador. .......................................................... 81 Figura 65 – Cliente, proyecto y localización seleccionados. ........................................ 81 Figura 66 – Pantalla principal sesión iniciada vacía. .................................................... 82 Figura 67 – Pantalla principal sesión iniciada datos vehículos con foto........................ 82 Figura 68 – Pantalla principal sesión iniciada datos vehículos con gráfica y gas seleccionado. .............................................................................................................. 83 Figura 69 – Resumen vehículos registrados en la sesión. ............................................. 83 Figura 70 – Terminar sesión. ....................................................................................... 84 Figura 71 – Sección usuarios. ...................................................................................... 84 Figura 72 – Crear usuario. ........................................................................................... 85 Figura 73 – Editar usuario. .......................................................................................... 85 Figura 74 – Eliminar usuario. ...................................................................................... 86 Figura 75 - Preguntas evaluación web 1. ..................................................................... 87 Figura 76 - Preguntas evaluación web 2. ..................................................................... 88 Figura 77 - Preguntas evaluación web 3. ..................................................................... 89 Figura 78 - Preguntas evaluación web 4. ..................................................................... 90 15 1.2 Objectives. The main objective of this work consists of the implementation of a system that allows processing the data obtained by the sensor developed after the passage of a vehicle in less than a second and its subsequent display in real time in a web application. The main objective can be broken down into the following two specific objectives: • Development of a Windows service that, from a series of files generated by the sensor, is able to translate it into emission ratios of the different gases it is able to measure. • Development of a web application that allows the administration of the start and end of measurement sessions of the sensor, allowing the creation of clients and projects for which the measurements are performed, as well as the locations in which these measurements are going to be performed. 1.3 Planification. 1.3.1 Gantt diagram. Figura 2 shows the project schedule Figura 2 – Gantt diagram 1.3.2 Requirements gathering and analysis of the web application.. In this phase the requirements gathering was carried out. This was done in conjunction with field colleagues, who are the ones who will use the system on a day-to-day basis to carry out measurement campaigns. The colleagues explained their needs for the web, and made a series of requests that they would like to have in the application, compared to the measurement software they are used to using. 16 Once the requirements were taken, they were analyzed and moved on to the design and implementation phase of the website. 1.3.3 Design and implementation of the web application. In this phase, once the requirements of the application were analyzed, the design of the application was started, as well as the way it was going to be structured and the technologies that were going to be used for the implementation. Once the design was completed and the necessary technologies were defined, the development of the application began. 1.3.4 Testing of the web application without Windows service. This phase was carried out once the web implementation had been completed. Although the Windows service had not yet been implemented, the rest of the application modules could be tested. 1.3.5 Windows Service requirements gathering and analysis. In this phase the requirements of the system in charge of processing the "raw" files generated by the sensor were taken. This was done in conjunction with the optics specialist colleague, who was in charge of the sensor design, and who performed laboratory tests with these files. The colleague explained how we would make sense of this data, describing the actions that should be performed to make sense of the data generated by the sensor. Once the requirements were taken, they were analyzed and we moved on to the development and implementation phase of the service. 1.3.6 Design and implementation of the Windows Service. Once the requirements were analyzed, what best suited our needs was a Windows service, for which a structure and technologies to be used were defined. Once the design was finished, the implementation of the service was started. 1.3.7 Testing of the web application with the Windows Service. Once the implementation of the Windows service was finished, joint tests of the web application and the Windows service could be carried out, so that it was possible to check in real time how each file was processed. 17 1.4 Memory structure. The structure of the report is briefly described below. • Chapter 1: This chapter describes the motivation for the work, the objectives and the structure of the report. • Chapter 2: In this chapter a tool similar to the one used in the paper is studied. • Chapter 3: This chapter describes the technology used. • Chapter 4: In this chapter the actors are defined and use cases are described by means of tables together with their requirements. • Chapter 5: This chapter explains the implementation of the database. • Chapter 6: This chapter explains the application architecture. • Chapter 7: This chapter will study the design and implementation of the web functionalities and the windows service. • Chapter 8: This chapter will present the statistics provided by users who have worked with the system. • Chapter 9: This chapter describes some functionalities that will be added in the future. • Annex I: Web evaluation questions.. 18 Capítulo 2. Estado del arte. En este capítulo se va a describir un sistema similar al que se va a desarrollar en este proyecto. El sistema NextGen [5], al igual que el que se va a desarrollar en este proyecto, está desarrollado para el procesamiento de datos de emisiones de vehículos de combustión y su visualización en tiempo real, pero para sensores de tecnología basada en infrarrojos y ultravioleta. En la Figura 3 se puede ver la pantalla principal de dicho sistema. Figura 3 - Aplicación NextGen propiedad de Opus RS Europe 19 Capítulo 3. Tecnología empleada En este capítulo se detallarán las tecnologías usadas para el desarrollo de este proyecto. 3.1 Microsoft Visual Studio Microsoft Visual Studio [6] es un entorno de desarrollo integrado (IDE, por sus siglas en inglés) para Windows y macOS. Es compatible con múltiples lenguajes de programación, tales como C++, C#, Visual Basic .NET, F#, Java, Python, Ruby y PHP, al igual que entornos de desarrollo web, como ASP.NET MVC, Django, etc., a lo cual hay que sumarle las nuevas capacidades en línea bajo Windows Azure en forma del editor Mónaco. Visual Studio permite a los desarrolladores crear sitios y aplicaciones web, así como servicios web en cualquier entorno compatible con la plataforma .NET (a partir de la versión .NET 2002). Así, se pueden crear aplicaciones que se comuniquen entre estaciones de trabajo, páginas web, dispositivos móviles, dispositivos embebidos y videoconsolas, entre otros. 3.2 ASP.NET MVC Framework ASP.NET MVC Framework [7] es un framework de aplicaciones web que implementa el patrón modelo-vista-controlador (MVC). Basado en ASP.NET, permite a los desarrolladores de software construir una aplicación web como una composición de tres funciones: modelo, vista y controlador. En marzo de 2009 se hizo pública la primera versión de ASP.NET MVC. El patrón de arquitectura MVC (model-view-controller) no es nuevo (data de 1979) ni es algo que haya inventado Microsoft. Existen muchos frameworks de desarrollo web populares que utilizan MVC, como por ejemplo Ruby on Rails, Spring o Apache Struts. MVC es un patrón de arquitectura que ayuda a crear una separación lógica entre el modelo (información y lógica de negocio), la vista (la lógica de presentación) y el controlador (intermediario entre la vista y el modelo). Uno de los pilares básicos de ASP.NET MVC es el concepto de enrutamiento (routing), lo que permite a las aplicaciones aceptar peticiones a URL que no se corresponden con ficheros físicos en el servidor. 3.3 Microsoft SQL Server Microsoft SQL Server [8] es un sistema de gestión de base de datos relacional, desarrollado por la empresa Microsoft. El lenguaje de desarrollo utilizado (por línea de comandos o mediante la interfaz gráfica de Management Studio [9]) es Transact-SQL [10] (TSQL), una implementación del estándar ANSI del lenguaje SQL, utilizado para manipular y recuperar datos (DML), crear tablas y definir relaciones entre ellas (DDL). 20 3.4 Azure Devops Server Herramientas de desarrollo de software de colaboración para todo el equipo Anteriormente conocido como Team Foundation Server (TFS), Azure DevOps Server [11] es un conjunto de herramientas de desarrollo de software de colaboración, hospedadas en el entorno local. Azure DevOps Server se integra con el IDE o editor existente, lo que permite a su equipo de funciones cruzadas trabajar de forma eficaz en proyectos de todos los tamaños. 3.5 Internet Information Services Internet Information Services o IIS [12] es un servidor web y un conjunto de servicios para el sistema operativo Microsoft Windows. Originalmente era parte del Option Pack para Windows NT. Luego fue integrado en otros sistemas operativos de Microsoft destinados a ofrecer servicios, como Windows 2000 o Windows Server 2003, 2016 y 2019. Windows XP Profesional incluye una versión limitada de IIS. Los servicios que ofrece son: FTP, SMTP, NNTP y HTTP/HTTPS. Este servicio convierte a un PC en un servidor web para Internet o una intranet, es decir que en los ordenadores que tienen este servicio instalado se pueden publicar páginas web tanto local como remotamente. Se basa en varios módulos que le dan capacidad para procesar distintos tipos de páginas. Por ejemplo, Microsoft incluye los de Active Server Pages (ASP) y ASP.NET. También pueden ser incluidos los de otros fabricantes, como PHP o Perl. 3.6 GitMind GitMind [13] es una aplicación gratuita de mapas mentales escrita en JavaScript.1 GitMind fue lanzado en 2019 por WANGXU TECHNOLOGY (HK) CO., LIMITED. Es compatible con mapas mentales, diagramas de flujo, Diagrama de Ishikawa, diagramas de árbol, Organigrama, Lenguaje unificado de modelado, Modelo entidad-relación, etc. Normalmente, se utiliza para la gestión de conocimientos, actas de reuniones, gestión de proyectos y otras tareas creativas. Además, GitMind puede leer e importar archivos XMind. 3.7 Otras tecnologías • C# C#[14] es un lenguaje de programación multiparadigma desarrollado y estandarizado por la empresa Microsoft como parte de su plataforma .NET, que después fue aprobado como un estándar por la ECMA (ECMA-334) e ISO (ISO/IEC 23270). C# es uno de los lenguajes de programación diseñados para la infraestructura de lenguaje común. 21 • SignalR ASP.NET SignalR[15] es una biblioteca para desarrolladores de ASP.NET que simplifica el proceso de agregar funcionalidad web en tiempo real a las aplicaciones. La funcionalidad web en tiempo real es la capacidad de hacer que el código de servidor inste contenido a los clientes conectados al instante a medida que esté disponible, en lugar de hacer que el servidor espere a que un cliente solicite nuevos datos. • JavaScript JavaScript[16] (abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos,2 basado en prototipos, imperativo, débilmente tipado y dinámico. Se utiliza principalmente del lado del cliente, implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas3 y JavaScript del lado del servidor (Server-side JavaScript o SSJS). • JQuery jQuery[17] es una biblioteca multiplataforma de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web.1 Fue presentada el 14 de enero de 2006 en el BarCamp NYC. De acuerdo a un análisis de la Web (realizado en 2017) JQuery es la biblioteca de JavaScript más utilizada, por un amplio margen • AJAX AJAX[18], acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones web asíncronas. Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible interactuar con el servidor sin necesidad de recargar la página web, mejorando la interactividad, velocidad y usabilidad en las aplicaciones. • Bootstrap Bootstrap[19] es una biblioteca multiplataforma o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como extensiones de JavaScript adicionales. A diferencia de muchos frameworks web, solo se ocupa del desarrollo front-end. • HTML HTML[20], siglas en inglés de HyperText Markup Language (‘lenguaje de marcado de hipertexto’), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición 22 de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. • CSS CSS[21] (siglas en inglés de Cascading Style Sheets), en español «Hojas de estilo en cascada», es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. • LINQ Language Integrated Query (LINQ[22], pronunciado “link”) o Consulta Integrada en el Lenguaje es un componente de la plataforma Microsoft .NET que agrega capacidades de consulta a datos de manera nativa a los lenguajes .NET, si bien existen implementaciones para Java, PHP, JavaScript y ActionScript LINQ extiende el lenguaje a través de las llamadas expresiones de consulta, que son parecidas a las sentencias SQL y pueden ser usadas para extraer y procesar convenientemente datos de arrays, clases enumerables, documentos XML, bases de datos relacionales y fuentes de terceros. Otros usos, que utilizan expresiones de consulta como plataforma general para la composición de expresiones más legibles, incluyen la construcción de manejadores de eventos. • Entity Framework Es un conjunto de API de acceso a datos para el Microsoft .NET Framework. Una entidad del Entity Framework[23] es un objeto que tiene una clave representando la clave primaria de una entidad lógica de datastore. Un modelo conceptual Entity Data Model (modelo Entidad-Relación) es mapeado a un modelo de esquema de datastore. Usando el Entity Data Model, el Framework permite que los datos sean tratados como entidades independientemente de sus representaciones del datastore subyacente. El Entity SQL es un lenguaje similar al SQL para consultar el Entity Data Model (en vez del datastore subyacente). Similarmente, las extensiones del Linq, Linqto-Entities, proporcionan consultas tipeadas en el Entity Data Model. Las consultas Entity SQL y Linq-to-Entities son convertidas internamente en un Canonical Query Tree que entonces es convertido en una consulta comprensible al datastore subyacente (ej. en SQL en el caso de una base de datos relacional). Las entidades pueden utilizar sus relaciones, y sus cambios enviados de regreso al datastore. 23 Capítulo 4. Casos de uso. En este capítulo se describirán tanto los casos de uso como los actores que se han definido para el desarrollo del sistema. En la primera parte se presentarán los actores y en la segunda, los casos de uso de cada uno de ellos. 4.1 Actores del sistema. En este apartado se describen los diferentes actores que se han definido para el uso del sistema. • Operador. Representa un usuario registrado, que previamente ha sido dado de alta por el administrador, y el cual tiene disponibles las acciones de inicia y parar una sesión, así como ver la historia de la misma. • Administrador. Representa el administrador del sistema y tiene control total en la aplicación. 4.2 Módulo operador. En esta sección, se detallan los casos de uso del operador. En la Figura 4 se puede ver el diagrama de casos de uso de dicho usuario. Figura 4 - Diagrama casos de uso operador. 24 CU-O-1 Login Versión 1.0.0 Prioridad Alta Estabilidad Alta Precondición El usuario ha sido dado de alta por el administrador Descripción Lo usuarios que ya han sido dados de alta, pueden iniciar sesión para acceder a la pantalla de administración de sesiones. Entrada Usuario y contraseña. Salida NA Secuencia normal Paso Acción 1 El usuario accede a la aplicación y se le muestra la pantalla de inicio de sesión. 2 El usuario introduce sus credenciales y pulsa el botón “Sign In”. 3 La aplicación comprueba las credenciales y permite al usuario entrar a la pantalla principal de la aplicación. Postcondición NA Excepciones Paso Acción 3 La aplicación comprueba que las credenciales son incorrectas y devuelve a la pantalla de inicio de sesión. Tabla 1 – Login. CU-O-2 Logout Versión 1.0.0 Prioridad Alta Estabilidad Alta Precondición El usuario ha sido dado de alta por el administrador y haber iniciado sesión. Descripción El usuario podrá cerrar su sesión. Entrada NA Salida NA Secuencia normal Paso Acción 1 El usuario accede a la aplicación y se le muestra la pantalla principal. 2 El usuario pulsa en “Sign Out” situado en la parte superior. 3 El sistema confirma el cierre de sesión y vuelve a la pantalla de inicio de sesión. Postcondición NA Excepciones Paso Acción Tabla 2 – Logout. 31 CU-A-6 Crear localización Versión 1.0.0 Prioridad Alta Estabilidad Alta Precondición El usuario debe haber iniciado sesión en la aplicación. Descripción El usuario podrá añadir una nueva localización. Entrada El usuario deberá introducir la descripción, un código de identificación de la localización, el país, la provincia, la localidad, la latitud y la longitud del lugar donde se vaya a realizar la medición. Salida NA Secuencia normal Paso Acción 1 En la parte superior de la pantalla principal el usuario debe pulsar en “Sites”. 2 En la siguiente ventana el usuario debe pulsar en “New site”. 3 En la siguiente ventana el usuario introducirá los datos solicitados y pulsará en “Create”. 4 El sistema valida que no existe una localización con estos datos, la registra y redirige a la página de visualización de localizaciones. Postcondición NA Excepciones Paso Acción 4 El sistema detecta que ya existe una localización con estos datos, no la registra y redirige a la página de visualización de localizaciones. Tabla 12 – Crear localización. 32 CU-A-7 Editar localización Versión 1.0.0 Prioridad Alta Estabilidad Alta Precondición El usuario debe haber iniciado sesión en la aplicación y la localización debe estar registrada en ella. Descripción El usuario podrá editar una localización existente. Entrada El usuario deberá editar los campos que desee de la localización. Salida NA Secuencia normal Paso Acción 1 En la parte superior de la pantalla principal el usuario debe pulsar en “Sites”. 2 En la siguiente ventana el usuario debe pulsar en el botón “Edit” de la fila en la que se encuentra la localización que se desea editar. 3 En la siguiente ventana el usuario modificará los datos que desea y pulsará en “Save”. 4 El sistema valida que no existe una localización con la misma descripción y código de identificación, actualiza los datos y redirige a la página de visualización de localizaciones. Postcondición NA Excepciones Paso Acción 4 El sistema detecta que ya existe una localización con esa descripción y/o código de identificación, no actualiza la localización y redirige a la página de visualización de localizaciones. Tabla 13 – Editar localización. 33 CU-A-8 Eliminar localización Versión 1.0.0 Prioridad Alta Estabilidad Alta Precondición El usuario debe haber iniciado sesión en la aplicación y la localización debe estar registrada en ella. Descripción El usuario podrá eliminar una localización existente. Entrada NA Salida NA Secuencia normal Paso Acción 1 En la parte superior de la pantalla principal el usuario debe pulsar en “Sites”. 2 En la siguiente ventana el usuario debe pulsar en el botón “Delete” de la fila en la que se encuentra la localización que se desea eliminar. 3 En la siguiente ventana, el sistema pregunta si se desea eliminar la localización y el usuario pulsará en “Delete”. 4 El sistema elimina la localización y redirige a la página de visualización de localizaciones. Postcondición NA Excepciones Paso Acción Tabla 14 – Eliminar localización. CU-A-9 Ver proyectos Versión 1.0.0 Prioridad Alta Estabilidad Alta Precondición El usuario debe haber iniciado sesión en la aplicación. Descripción El usuario podrá ver la lista de proyectos registrados en la aplicación. Entrada NA Salida NA Secuencia normal Paso Acción 1 En la parte superior de la pantalla principal el usuario debe pulsar en “Projects”. 2 La aplicación muestra una página con la lista de proyectos. Postcondición NA Excepciones Paso Acción Tabla 15 – Ver proyectos. 34 CU-A-10 Crear proyecto Versión 1.0.0 Prioridad Alta Estabilidad Alta Precondición El usuario debe haber iniciado sesión en la aplicación. Descripción El usuario podrá añadir un nuevo proyecto Entrada El usuario deberá introducir una descripción y seleccionar el cliente al que pertenece el proyecto. Salida NA Secuencia normal Paso Acción 1 En la parte superior de la pantalla principal el usuario debe pulsar en “Projects”. 2 En la siguiente ventana el usuario debe pulsar en “New project” 3 En la siguiente ventana el usuario introducirá y seleccionará los datos solicitados y pulsará en “Create”. 4 El sistema valida que no existe una un proyecto con estos datos, lo registra y redirige a la página de visualización de proyectos Postcondición NA Excepciones Paso Acción 4 El sistema detecta que ya existe un proyecto con estos datos, no lo registra y redirige a la página de visualización de proyectos. Tabla 16 – Crear proyecto. 35 CU-A-11 Editar proyecto Versión 1.0.0 Prioridad Alta Estabilidad Alta Precondición El usuario debe haber iniciado sesión en la aplicación y el proyecto debe estar registrado en ella. Descripción El usuario podrá editar la descripción un proyecto existente. Entrada El usuario deberá editar la descripción y seleccionar el cliente del proyecto. Salida NA Secuencia normal Paso Acción 1 En la parte superior de la pantalla principal el usuario debe pulsar en “Projects”. 2 En la siguiente ventana el usuario debe pulsar en el botón “Edit” de la fila en la que se encuentra el proyecto que se desea editar. 3 En la siguiente ventana el usuario modificará la descripción, seleccionará el cliente y pulsará en “Save”. 4 El sistema valida que no existe un proyecto con la misma descripción para el mismo cliente, actualiza los datos y redirige a la página de visualización de proyectos. Postcondición NA Excepciones Paso Acción 4 El sistema detecta que ya existe un proyecto con esa descripción para ese cliente, no actualiza el proyecto y redirige a la página de visualización de proyectos. Tabla 17 – Editar proyecto. 36 CU-A-12 Añadir localización a proyecto Versión 1.0.0 Prioridad Alta Estabilidad Alta Precondición El usuario debe haber iniciado sesión en la aplicación y el proyecto debe estar registrado en ella. Descripción El usuario podrá añadir localizaciones en las que se harán mediciones en un proyecto existente. Entrada El usuario deberá seleccionar la localización. Salida NA Secuencia normal Paso Acción 1 En la parte superior de la pantalla principal el usuario debe pulsar en “Projects”. 2 En la siguiente ventana el usuario debe pulsar en el botón “Edit” de la fila en la que se encuentra el proyecto al que se desea añadir la localización. 3 En la siguiente ventana el usuario seleccionará la localización deseada, seleccionará el cliente y pulsará en “Add”. 4 El sistema añade el site a ese proyecto, actualiza la ventana de datos del proyecto mostrando la nueva localización añadida. Postcondición NA Excepciones Paso Acción Tabla 17 – Añadir localización a proyecto. 37 CU-A-13 Eliminar proyecto Versión 1.0.0 Prioridad Alta Estabilidad Alta Precondición El usuario debe haber iniciado sesión en la aplicación y el proyecto debe estar registrado en ella. Descripción El usuario podrá eliminar un proyecto existente. Entrada NA Salida NA Secuencia normal Paso Acción 1 En la parte superior de la pantalla principal el usuario debe pulsar en “Projects”. 2 En la siguiente ventana el usuario debe pulsar en el botón “Delete” de la fila en la que se encuentra el proyecto que se desea eliminar. 3 En la siguiente ventana, el sistema pregunta si se desea eliminar el proyecto y el usuario pulsará en “Delete”. 4 El sistema elimina el proyecto y redirige a la página de visualización de proyectos. Postcondición NA Excepciones Paso Acción Tabla 18 – Eliminar proyecto. CU-A-14 Ver Usuarios Versión 1.0.0 Prioridad Alta Estabilidad Alta Precondición El usuario debe haber iniciado sesión en la aplicación. Descripción El usuario podrá ver la lista de usuarios registrados en la aplicación. Entrada NA Salida NA Secuencia normal Paso Acción 1 En la parte superior de la pantalla principal el usuario debe pulsar en “Users”. 2 La aplicación muestra una página con la lista de usuarios. Postcondición NA Excepciones Paso Acción Tabla 19 – Ver usuarios. 38 CU-A-15 Crear usuario Versión 1.0.0 Prioridad Alta Estabilidad Alta Precondición El usuario debe haber iniciado sesión en la aplicación. Descripción El usuario podrá añadir un nuevo usuario. Entrada El usuario deberá introducir un email, un nombre de usuario, una contraseña y seleccionar el rol que se desea asignar. Salida NA Secuencia normal Paso Acción 1 En la parte superior de la pantalla principal el usuario debe pulsar en “Users”. 2 En la siguiente ventana el usuario debe pulsar en “New user”. 3 En la siguiente ventana el usuario introducirá los datos solicitados y pulsará en “Create”. 4 El sistema valida que no existe un usuario con el mismo nombre de usuario, la registra y redirige a la página de visualización de usuarios. Postcondición NA Excepciones Paso Acción 4 El sistema detecta que ya existe un usuario con ese nombre de usuario, no la registra y redirige a la página de visualización de usuarios. Tabla 20 – Crear usuario. 39 CU-A-16 Editar usuario Versión 1.0.0 Prioridad Alta Estabilidad Alta Precondición El usuario debe haber iniciado sesión en la aplicación y el usuario debe estar registrado en ella. Descripción El usuario podrá editar un usuario existente. Entrada El usuario deberá editar los campos que desee del usuario. Salida NA Secuencia normal Paso Acción 1 En la parte superior de la pantalla principal el usuario debe pulsar en “Users”. 2 En la siguiente ventana el usuario debe pulsar en el botón “Edit” de la fila en la que se encuentra el usuario que se desea editar. 3 En la siguiente ventana el usuario modificará los datos que desea y pulsará en “Save”. 4 El sistema valida que no existe un usuario con el mismo nombre de usuario, actualiza los datos y redirige a la página de visualización de localizaciones. Postcondición NA Excepciones Paso Acción 4 El sistema detecta que ya existe un usuario con ese nombre de usuario, no actualiza la localización y redirige a la página de visualización de localizaciones. Tabla 21 – Editar usuario. 40 CU-A-17 Asignar cliente a usuario Versión 1.0.0 Prioridad Alta Estabilidad Alta Precondición El usuario debe haber iniciado sesión en la aplicación y el usuario y cliente deben estar registrado en ella. Descripción El usuario podrá asignar un cliente para el cual hará realizará las sesiones de medición. Entrada El usuario deberá seleccionar el cliente. Salida NA Secuencia normal Paso Acción 1 En la parte superior de la pantalla principal el usuario debe pulsar en “Users”. 2 En la siguiente ventana el usuario debe pulsar en el botón “Edit” de la fila en la que se encuentra el usuario al que se desea asignar el cliente. 3 En la siguiente ventana el usuario seleccionará el cliente deseado, y pulsará en “Add”. 4 El sistema asigna el cliente a ese usuario, actualiza la ventana de datos del usuario mostrando el nuevo cliente asignado. Postcondición NA Excepciones Paso Acción Comentarios Este caso de uso solo aplica a usuarios con rol operador, ya que el administrador puede ver todos los clientes. Tabla 22 – Asignar cliente a usuario. 47 Figura 8 - Entidad Customer. Figura 9 - Clase Customer. 5.2 Vista. Las vistas son los componentes que muestran la interfaz de usuario (UI) de la aplicación. Normalmente, esta interfaz de usuario se crea a partir de los datos de modelo. Para la creación de estas vistas, Visual Studio utiliza Bootstrap como framework de interfaz de usuario. 5.3 Controlador. Los controladores son los componentes que controlan la interacción del usuario, trabajan con el modelo y por último seleccionan una vista para representar la interfaz de usuario. En una aplicación de MVC, la vista solo muestra información; el controlador controla y responde a la interacción y los datos que introducen los usuarios. Este framework permite configurar el mapeo de URL’s a distintas clases del controlador. Por defecto las URL’s tipo /x/ se asocian con la clase xController. Su funcionamiento se describe en la Figura 10: 48 Figura 10 - Petición URL. La clase del controlador es la que decide que lógica ha de ejecutarse en función de la petición realizada en la URL, transformando dicha URL en llamadas a los métodos de la clase. Siguiendo lo anterior, la URL “/Sites/Index” invoca al método Index del controlador Sites, que una vez “controlada” la acción de la aplicación deberá entregar u obtener del dato al Modelo y visualizarlo en la Vista. 49 Capítulo 6. Modelo de datos. En este capítulo se describe el modelo de datos desarrollado para el sistema. Este, ha sido diseñado para almacenar los datos de las emisiones de un vehículo a lo largo de una sesión de medición, y además permite almacenar los datos relativos a dicha sesión, como son el usuario que la realiza, y el proyecto y la localización del cliente para el que se esta llevando a cabo esa sesión. 6.1 Implementación de la base de datos. En la Figura 11 se muestra el diagrama de la base de datos. Figura 11 - Diagrama de base de datos. A continuación, se van a describir cada una de las tablas de la base de datos. 50 6.2 Descripción de tablas de base de datos. 1) Tabla AspNetUsers: representa un usuario en el modelo Identity de ASP.NET de Microsoft. Cuenta con gran cantidad de campos, aunque para nuestro sistema utilizaremos los que se describen a continuación: • Id: Identificador del usuario. • Email: Correo electrónico del usuario. • PasswordHash: Hash de la contraseña del usuario. • UserName: Nombre de usuario. 2) Tabla AspNetRoles: representa un rol en el modelo Identity de ASP.NET de Microsoft. • Id: Identificador del rol. • Name: Nombre del rol. 3) Tabla AspNetUserRoles: entidad de combinación que asocia usuarios y roles. • UserId: Identificador del usuario. • RoleId: Identificador del rol. 4) Tabla Configuration: guarda la información de las variables de configuración del sistema. • Id: Identificador de la variable. • VAR_NAME: Nombre de la variable. • VAR_VALUE: Valor de la variable. 5) Tabla Configuration: guarda la información de las variables de configuración del sistema. • Id: Identificador de la variable. • VAR_NAME: Nombre de la variable. • VAR_VALUE: Valor de la variable. 6) Tabla Customer: representa un cliente. • Id: Identificador de la variable. • Description: Descripción del cliente. 7) Tabla UserCustomer: entidad de combinación que asocia usuarios y clientes. • Id: Identificador de la relación. • IdUser: Identificador del usuario. • IdCustomer: Identificador del cliente. 8) Tabla Project: guarda información de un proyecto. • Id: Identificador del proyecto. • Description: Descripción del proyecto. • IdCustomer: Identificador del cliente al que pertenece el proyecto. 51 9) Tabla Site: guarda información de las localizaciones. • Id: Identificador de la localización. • Code: Código de identificación de la localización. • Country: País de la localización. • State: Provincia de la localización. • County: Localidad de la localización. • Latitude: Latitud de la localización. • Longitude: Longitud de la localización. • Description: Descripción larga de la localización. 10) Tabla ProjectSite: entidad de combinación que asocia proyectos y localizaciones. • Id: Identificador de la relación. • IdProject: Identificador del proyecto. • IdSite: Identificador del site. 11) Tabla Session: guarda la información de una sesión de medición. • Id: Identificador de la sesión. • IdL6: Identificador del sistema en el que se realiza la sesión, será el valor de una variable de configuración. • IdUser: Identificador del usuario que inicia la sesión. • IdSite: Identificador de la localización en la que se realiza la sesión. • IdProject: Identificador del proyecto al que pertenece la sesión. • StartDatetime: Marca de tiempo de inicio de la sesión. • StopDatetime: Marca de tiempo de finalización de la sesión. 12) Tabla VDRMain: guarda la información de cada vehículo leído por el sensor. • Id: Identificador del vehículo para la base de datos. • L6VDRCode: Identificador del vehículo establecido por el sensor. • Timestamp: Marca de tiempo de la lectura del vehículo. • ImageName: Nombre de la imagen asociada a la lectura del vehículo • Speed: Velocidad del vehículo en la lectura. • Direction: Sentido del desplazamiento del vehículo con respecto del sensor. • ValidData: Flag que indica si la lectura del vehículo es válida o no. 52 13) Tabla GasMain: guarda la información de los valores de la densidad de columna de cada gas a lo largo de 32 puntos (ValuePosition) por cada lectura de vehículo. Además, se añade un punto 33 que contiene el ratio de cada gas. • Id: Identificador de cada punto. • IdVDRMain: Identificador de la lectura del vehículo. • ValuePosition: Indica la posición del 1 al 33 de cada uno de los puntos. • HCValue: Valor de la densidad de columna de HC en el punto. • NH3Value: Valor de la densidad de columna de NH3 en el punto. • NO2Value: Valor de la densidad de columna de NO2 en el punto. • COValue: Valor de la densidad de columna de CO en el punto. • NOValue: Valor de la densidad de columna de NO en el punto. • CO2Value: Valor de la densidad de columna de CO2 en el punto. • SFValue: Valor de la densidad de columna de SF (Smoke Factor u opacidad) en el punto. 53 Capítulo 7. Diseño. En este capítulo se detallan los aspectos principales en cuanto a la funcionalidad y el diseño realizado para el proyecto. 7.1 Estilo. Para esta aplicación se decidió crear un estilo sencillo y una interfaz simple e intuitiva. En cuanto a los colores de la interfaz, se decidió establecer un mínimo de colores personalizados para las zonas principales, los cuales coinciden en su mayoría con los colores corporativos de la compañía. Estos colores son el blanco y una pequeña gama de verdes y azules. Para otras partes de la aplicación se decidió utilizar los colores que se establecen en por defecto en Bootstrap, que es el Framework de estilos utilizado. 7.2 Funcionalidad de la Web(L6WebApp). En este apartado se describen las funcionalidades desarrolladas en la aplicación web, de la cual se muestran las vistas más importantes. 7.2.1 Dashboard Es la pantalla principal y la más importante de la aplicación por la cantidad de información que contiene y la lógica que se ha implementado para ella. En la parte superior se encuentra una cabecera, que es compartida por todas las páginas de la aplicación, que muestra las diferentes secciones a las que podemos acceder. Las secciones que se muestran dependerán del rol del usuario con el que se inicie la sesión, de manera que para el administrador se mostrarán todas las secciones disponibles (Figura 12) y en caso de que no tenga este rol, únicamente se mostrará la sección Home. Figura 12 - Imagen de la cabecera de la web. Cada uno de los botones de la cabecera llama a la vista Index (Figura 13) de cada uno de los controladores. 54 Figura 13 - Código HTML de la cabecera. Esta página viene como resultado de solicitar la vista Index al controlador HomeController (Figura 14). Figura 14 - Método Index del controlador HomeController. En el caso de no haber una sesión de medición iniciada, como se muestra en la Figura 15, se permite iniciar una nueva sesión de medición, previo a la selección de una serie de valores, los cuales se han ido precargando en base a diferentes eventos. Figura 15 - Imagen de la web sin sesión de medición iniciada. Los clientes se cargan dentro del evento $(document).ready(function () {…} (Figura 16) de Jquery de la página. 55 Figura 16 - Código de carga de clientes. Esta llamada realiza una petición al método GetMyCustomersOrAdmin (Figura 17) del controlador CustomersController, el cual devolverá todos los clientes si el usuario con el que se ha iniciado la aplicación es administrador o por el contrario solo mostrara los clientes que tenga asignado ese usuario. Figura 17 - Método GetsMyCustomersOrAdmin del controlador CustomersController. Una vez seleccionado el cliente, en el evento $('#customer').change(function () {…}, se cargarán los proyectos de este cliente, siguiendo la misma metodología. De igual manera, una vez se seleccione un proyecto, se cargarán los sites de dicho proyecto siguiendo la misma metodología en el evento correspondiente. Una vez seleccionados se utiliza el evento onClick de Jquery del botón de Start (Figura 18). Este evento realiza una llamada asíncrona utilizando Ajax al método NewSession del controlador SessionsController (Figura 19), que será el encargado de crear una nueva sesión y devolver los datos correspondientes de la misma, como se ve en la Figura 20. 56 Figura 18 - Evento OnClick del botón Start. Figura 19 - Método NewSession del controlador SessionsController. 63 Figura 34 - Código html del botón “Download VDR History”. Esta funcionalidad se ha implementado de manera que este botón lo que hace es hacer una petición al método Export (Figura 35) del controlador VDRMainsController, el cual, devuelve un fichero con los datos solicitados. Figura 35 - Método Export del controlador VDRMainsController. 7.2.2 Customers Para implementar esta sección se ha utilizado Scaffolding (generación de código), hace referencia a los elementos de datos dinámicos que generan automáticamente páginas web para cada tabla de una base de datos, aunque posteriormente se han editado para que mantengan el estilo de la aplicación. Las páginas que se crean automáticamente son las que permiten realizar las acciones de listar todos los registros, creación, visualización, edición y eliminación (CRUD) de cada tabla. • Visualización de clientes Pulsando en el apartado Customers de la cabecera, se realiza una petición al método Index del controlador CustomersController, que devuelve la vista con el mismo nombre. 64 Figura 36 - Visualización de clientes. La tabla mostrada en la Figura 36 pertenece al plugin Bootstrap-Table [25], el cual implementa tablas con funcionalidades ampliadas y que se integra sin problema con Bootstrap, que es el Framework de diseño utilizado. Este plugin facilita mucho la creación de este tipo de tablas al venir con funciones definidas que simplifican la carga de datos en la tabla, la visualización de detalles de cada una de las filas de la tabla y las operaciones que se pueden realizar en cada una de las filas de la tabla. El código html de la tabla es el que se puede ver en la Figura 37. Figura 37 - Código html de la tabla generada en la página de visualización de clientes. En el código podemos ver cómo podemos añadir fácilmente una toolbar en la parte superior, con el botón “New customer” para crear nuevos clientes (data-toolbar), asignarle el formato del detalle a cada fila (datadetail-formater) (Figura 38) e indicar la función que cargara los datos en la tabla (data-ajax) (Figura 39). 65 Figura 38 - Función detailFormatter. Figura 39 - Función ajaxRequest. Dentro de la función ajaxRequest se hace una petición al método GetCustomers (Figura 40) del controlador CustomersController, que nos devolverá la lista de clientes registrados. Figura 40 - Método GetCustomers. Para poder personalizar más la tabla existe la función initTable (Figura 41), que se ejecutara cuando se cargue la página, y en la que se establece el idioma y los campos de las columnas. Figura 41 - Función initTable. 66 Para establecer las operaciones que se pueden realizar con cada fila de la tabla, utilizamos la función operateFormatter (Figura 42), en la cual definimos las operaciones de editar y eliminar un registro. Figura 42 - Función operateFormatter. • Creación de un cliente Desde la página de visualización de clientes pulsamos en el botón “New customer”. Este botón realiza una petición al método Create (Figura 43) del controlador CustomerController. Este devuelve la vista que tiene el mismo nombre del método (Figura 44). Figura 43 - Método Create del controlador CustomersController. Figura 44 - Visualización nuevo cliente. En esta vista se ha desarrollado incluyendo sintaxis de Razor [26], como se ve en la Figura 45, que permite insertar código basado en servidor en la página html. En esta página se carga un formulario con el que posteriormente se creará un nuevo cliente. 67 Figura 45 - Código html de la vista Create (Customer). Este tiene el botón Create, que es el encargado de enviar el formulario al servidor, creando un nuevo cliente y redirigiendo a la pantalla de visualización de clientes (Figura 46). Figura 46 - Método Create del controlador CustomersController. 68 • Edición de un cliente Desde la página de visualización de clientes se puede acceder a editar un cliente pulsando en el botón Edit de la fila en la que se encuentra el cliente que se desea editar. Este botón realiza una petición al método Edit (Figura 47) del controlador CustomerController. Este devuelve la vista que tiene el mismo nombre del método (Figura 48). Figura 47 - Método Edit del controlador CustomersController. Figura 48 - Visualización editar cliente. De la misma forma que para la creación de un cliente, en esta página se carga un formulario con el que posteriormente se modificará el cliente (Figura 49). Figura 49 - Código html de la vista Edit (Customer). 69 Este tiene el botón Save, que es el encargado de enviar el formulario al servidor, editando los datos del cliente y redirigiendo a la pantalla de visualización de clientes (Figura 50). Figura 50 - Método Edit del controlador CustomersController. • Eliminación de un cliente Desde la página de visualización de clientes se puede acceder a eliminar un cliente pulsando en el botón Delete de la fila en la que se encuentra el cliente que se desea eliminar. Este botón realiza una petición al método Delete del controlador CustomerController (Figura 51). Este devuelve la vista que tiene el mismo nombre del método (Figura 52). Figura 51 - Método Delete del controlador CustomersController. Figura 52 - Visualización eliminar cliente. De la misma forma que para la creación de un cliente, en esta página se carga un formulario con el que posteriormente se eliminará el cliente (Figura 53). 70 Figura 53 - Código html de la vista Delete (Customer). Este tiene el botón Delete, que es el encargado de enviar el formulario al servidor, eliminando el cliente y redirigiendo a la pantalla de visualización de clientes (Figura 54). Figura 54 - Método DeleteConfirmed del controlador CustomersController. 7.2.3 Projects, Sites, Users, Configuration El resto de secciones de la aplicación comparten la estructura de la sección Customer. Todas ellas tienen una vista de visualización de registros, de creación de un nuevo, edición de un registro y de eliminación de un registro existente. Para cada una de ellas se han modificado los métodos para adaptarlos a sus modelos correspondientes. 71 7.3 Servicio de Windows (L6FileSystemWatcher) Esta parte del sistema se trata de un Servicio de Windows, creado con la plantilla que ofrece Visual Studio para crear Servicios de Windows de .Net Framework con lenguaje de programación C#. El algoritmo desarrollado se divide en dos procesos, un proceso que genera una LUT (Tablas de consulta) para cada uno de los gases medidos en base a la información meteorológica (P,T) registrada mediante un sensor externo (que se utilizará como referencia para el cálculo de la concentración de cada uno de los gases) y un segundo proceso, que, tomando como argumento de entrada las LUT calculadas en el primer proceso y los datos en crudo que salen del módulo HW de control e interfaz realiza el cálculo de las concentraciones correspondientes a cada uno de los gases a lo largo del 0.5 s que dura la medida. Éste último módulo realiza 32 cálculos de concentración para cada uno de los 6 gases que se analizan en menos de un segundo. Como parte de la propiedad intelectual de la empresa, no se puede mostrar el código del algoritmo, pero en la Figura 55 se muestra el funcionamiento del servicio: Figura 55 - Esquema del servicio Windows para el procesado de ficheros. 72 Capítulo 8. Evaluación. En este capítulo se analizarán los resultados obtenidos de una evaluación de la usabilidad de la web, y además se explicará cómo se ha verificado la bondad del algoritmo para el cálculo de emisiones. 8.1 Evaluación de la usabilidad de la web 8.1.1 Metodología Para realizar la evaluación, se ha utilizado la herramienta de Google Forms[27]. La evaluación ha sido realizada por los tres compañeros que realizan el trabajo de campo en las campañas de medición. Estos usuarios estaban muy familiarizados con el mundo de la tecnología. El tipo de preguntas realizadas han sido de respuesta sí/no o preguntas subjetivas acerca de las diferentes características principales de la aplicación, cambios que realizarían o funciones que desearían tener en el futuro. Las preguntas propuestas se pueden consultar en el ANEXO I. Preguntas de la evaluación de la web. Para realizar la evaluación, los usuarios estuvieron trabajando con la herramienta durante un mes y se les facilitó un enlace al cuestionario. 8.1.2 Resultados Los resultados obtenidos en el formulario fueron muy favorables, ya que ninguno de los usuarios que realizó la evaluación, ha encontrado alguna dificultad para realizar las labores para la cual está desarrollada la aplicación. Los resultados de algunas de las preguntas se muestran en las Figura 56, Figura 57 y Figura 58. Figura 56 - Respuestas evaluación web 1. 79 [24]. Chart.js. https://www.chartjs.org/ .Recuperado el 16 de Mayo de 2022. [25]. Bootstrap-Table. https://bootstrap-table.com/ .Recuperado el 16 de Mayo de 2022. [26]. Sintaxis Razor. https://docs.microsoft.com/es-es/aspnet/webpages/overview/getting-started/introducing-razor-syntax-c .Recuperado el 16 de Mayo de 2022. [27]. Google Forms. https://es.wikipedia.org/wiki/Formularios_de_Google . Recuperado el 16 de Mayo de 2022. 80 Anexo I. Guía del usuario. Una vez se haya desplegado la aplicación y se haya creado la base de datos en el servidor, se podrá acceder a la aplicación web desde un navegador, introduciendo la url configurada para ello. El servicio Windows estará configurado para que se inicie al encenderse el servidor. Una vez hemos accedido a la aplicación en el navegador, podremos hacer Login siempre que se disponga de una cuenta. En caso contrario, el administrador deberá suministrarnos un usuario y una contraseña. Introducimos el nombre de usuario y contraseña, pulsamos en “Sign In” (Figura 62). Figura 62 - Login de la aplicación web. La aplicación nos redirige a la página principal de manera que podremos visualizar todas las secciones si tenemos el rol de administrador (Figura 63) o únicamente la sección de la pantalla principal (Figura 64). 81 Figura 63 – Pantalla principal con rol administrador. Figura 64 – Pantalla principal con rol operador. Para iniciar una sesión de medición se seleccionará un cliente, un proyecto y una localización, y de esta manera se nos habilitará el botón Start (Figura 65) para poder iniciar la sesión. Figura 65 – Cliente, proyecto y localización seleccionados. 82 Pulsamos en el botón Start, y veremos como la página muestra los datos de la sesión. Inicialmente se mostrará sin datos de vehículos (Figura 66), pero a medida que se registren se irán mostrando en el orden correspondiente, por defecto, mostrándose la foto del vehículo (Figura 67). Figura 66 – Pantalla principal sesión iniciada vacía. Figura 67 – Pantalla principal sesión iniciada datos vehículos con foto. El pulsar sobre el botón Chart, podremos visualizar la gráfica de dispersión de los gases emitidos por el vehículo, pudiendo quitar o añadir gases a la gráfica pulsando sobre el color de cada gas (Figura 68). 83 Figura 68 – Pantalla principal sesión iniciada datos vehículos con gráfica y gas seleccionado. Podemos ver una tabla resumen de los vehículos registrados durante la sesión pulsando en el botón Show VDR History (Figura 69). Figura 69 – Resumen vehículos registrados en la sesión. También podemos descargarnos esta información pulsando sobre el botón Download VDR History. 84 Para terminar una sesión pulsaremos en el botón Stop de la pantalla principal (Figura 70). Figura 70 – Terminar sesión. Para ver los usuarios registrados en el sistema pulsaremos sobre Users, en la barra de la parte superior. Desde esta ventana podremos tanto ver los usuarios existentes, como añadir, editar o eliminar un usuario (Figura 71). Figura 71 – Sección usuarios. Para añadir un usuario pulsaremos sobre New user de la Figura 71. Esto nos redirigirá a otra página en la que se nos solicitarán los campos necesarios para dar de alta al usuario, que habrá que rellenar. Después de rellenar los campos pulsaremos sobre Create, se creará el usuario, y se nos redirigirá a la ventana de visualización de usuarios (Figura 72). 85 Figura 72 – Crear usuario. Para editar los datos de un usuario existente, pulsaremos sobre el botón Edit de la fila de la tabla de la Figura 71 en la que se encuentra el usuario que se desea modificar. El sistema nos redirige a la página de edición del usuario, donde editaremos los campos deseados y pulsaremos sobre Save, actualizando los datos de dicho usuario y redirigiéndonos a la ventana de visualización de usuarios. Además, en esta ventana se podrá añadir o eliminar clientes de un usuario, que solo será necesario cuando el usuario tenga rol operador (Figura 73). Figura 73 – Editar usuario. Para eliminar un usuario pulsaremos sobre el botón Delete de la fila de la tabla de la Figura 71 en la que se encuentra el usuario que se desea eliminar. Seguidamente el sistema nos pedirá confirmar que queremos eliminar el usuario. Pulsaremos en Delete, y el sistema eliminará el usuario y nos redirigirá a la ventana de visualización de usuarios (Figura 74). 86 Figura 74 – Eliminar usuario. Las secciones Clientes, Proyectos, Localizaciones y Configuración, siguen la misma estructura de páginas que la sección de Usuarios, explicada anteriormente, de manera que, para visualizar, añadir, editar y eliminar registros de dichas secciones, se realizar de forma prácticamente igual, a diferencia de los campos a rellenar, que será específico de cada una de ellas. 87 Anexo II. Preguntas de la evaluación de la web. A continuación, se muestran las preguntas propuestas para realizar la evaluación de usabilidad de la aplicación web. Figura 75 - Preguntas evaluación web 1. 88 Figura 76 - Preguntas evaluación web 2.