Desarrollo de una herramienta de ayuda a la predicción de los resultados de los partidos de fútbol

Desarrollo de una herramienta de ayuda a la predicción de los resultados de los partidos de fútbol Development of a tool to help predict the results of football matches Trabajo de Fin de Grado Curso 2022-2023 Autores Alejandro José Laprea (GIS) Alberto López García (GIS) Félix Rodolfo Díaz Lorente (GII) Director Antonio Sarasa Cabezuelo Grados Ingeniería del Software e Ingeniería Informática Facultad de Informática Universidad Complutense de Madrid Resumen El presente trabajo consiste en la especificación, diseño e implementación de una aplicación web que permita ayudar al usuario a predecir partidos de fútbol de las tres ligas europeas más importantes (Premier League, LaLiga y Serie A). La aplicación mostrará de manera organizada todos los partidos (jugados y por jugar), los resultados de dichos partidos, estadísticas de cada equipo a lo largo de la temporada junto con la tabla de posiciones actual; además de todo lo anterior, la aplicación contiene una Inteligencia Artificial entrenada con los datos históricos de las temporadas anteriores y la actual que buscará predecir el resultado de todos los partidos de la siguiente jornada, presentando al usuario con las probabilidades de victoria del equipo en casa, del equipo visitante y también en el caso de empate. La aplicación también proporciona un juego de quinielas en el que el jugador ganará puntos si acierta los resultados de los partidos; compitiendo junto a otros jugadores que también estén registrados en la página mediante un ranking por temporada de cada liga mencionada anteriormente. Por último, la aplicación proporciona la infraestructura necesaria para llevar a cabo la gestión de partidos, equipos, ligas y usuarios. En concreto, permite la creación, modificación y eliminación tanto de partidos, equipos y usuarios de la página, siendo funciones únicamente accesibles mediante el rol de administrador. Palabras clave predicción, IA, fútbol, deporte, apuesta, nodeJS, python, ligas, quinielas, estadísticas, redes neuronales, web, javascript 2 Summary The present work consists of the specification, design and implementation of a web application to help the user to predict football matches of the three most important European leagues (Premier League, LaLiga and Serie A). The application will display in an organized manner all the matches (played and to be played), the results of those matches, statistics of each team throughout the season along with the current standings; in addition to all the above, the application contains an Artificial Intelligence trained with historical data from previous and current seasons that will seek to predict the outcome of all the matches of the next match day, presenting the user with the probabilities of victory of the home team, the away team and also in the case of a draw. The application also provides a betting game in which the player will earn points by guessing the results of the matches; competing with other players who are also registered on the site through a seasonal ranking of each league mentioned above. Finally, the application provides the necessary infrastructure to carry out the management of matches, teams, leagues and users. Specifically, it allows the creation, modification and deletion of matches, teams and users of the page, being functions only accessible through the role of administrator. Key Words prediction, AI, football, sport, betting, nodeJS, python, leagues, betting pools, statistics, neural networks, web, javascript, web, javascript 3 índice de Contenidos Resumen 2 Summary 3 índice de Contenidos 4 Índice de Ilustraciones 7 Índice de Tablas 11 Capítulo 1 - Introducción 12 1.1 Motivación 12 1.2 Objetivos 13 1.3 Plan de trabajo 14 1.4 Estructura de la memoria 15 Chapter 1 - Introduction 18 1.1 Motivation 18 1.2 Objectives 19 1.3 Work Plan 20 1.4 Memory Structure 21 Capítulo 2 – Estado del arte 24 Capítulo 3 – Tecnología empleada 26 3.1 Herramientas Front-end 26 3.1.1 Bootstrap 4 [5] 26 3.1.2 JQuery [6] 26 3.2 Herramientas Back-end 26 3.2.1 Python [7] 26 3.2.2 MySQL [8] 27 3.2.3 Node.js [9] 27 3.2.4 Express [10] 27 3.2.5 Javascript [11] 28 3.3 Otras herramientas 28 3.3.1 XAMPP [12] 28 3.3.2 Visual Studio Code [13] 28 3.3.3 GitHub [14] 28 3.3.4 Docker [15] 29 3.3.5 Morgan [16] 29 3.3.6 Thunderclient [17] 30 Capítulo 4 – Casos de uso 31 4 4.1 Actores 31 4.2 Diagramas de casos de uso 31 4.3 Especificación de requisitos 32 4.3.1 Cuentas de usuario 33 4.3.2 Gestión de la liga 37 4.3.3 Servicios de quinielas 40 4.3.4 Servicios de administración 47 4.3.5 Consultas de información 51 4.3.6 Gestionar lista de favoritos 53 Capítulo 5 – Arquitectura 57 5.1 Arquitectura del sistema 57 5.2 Patrones Arquitectónicos 58 5.2.1 Model-View-Controller 58 5.3 Patrones de diseño 59 5.3.1 Chain of responsibility [37] 59 5.3.2 Middleware [38] 60 5.3.3 Singleton [39] 61 5.4 Vistas 62 5.4.1 Template View 62 5.4.2 Single Step View [40] 63 Capítulo 6 – Modelo de datos 64 6.1 Modelo Entidad-Relación 64 6.2 Implementación de la base de datos 66 6.2.1 Tablas sobre usuarios 66 6.2.2 Tablas sobre información 67 6.2.1 Tablas sobre predicción 69 Capítulo 7 – Diseño 70 7.1 Diseño de la interfaz visual 70 7.2 Funcionalidad de la aplicación 71 7.2.1 Funcionalidad de Cuentas de usuario 71 7.2.2 Funcionalidad de Gestión de la liga 74 7.2.3 Funcionalidad de Servicios de quinielas 78 7.2.4 Funcionalidad de Servicios de administración 80 7.2.5 Funcionalidad de Consulta de información 82 7.2.6 Funcionalidad de Gestionar lista de favoritos 83 Capítulo 8 – Modelos de predicción 85 8.1 Tipo de aprendizaje 85 8.2 Datos de entrada 85 8.3 Modelos utilizados 88 8.3.1 Regresión lineal [18][19] 89 8.3.2 Bosque aleatorio (regressor) [20][21] 90 5 8.3.3 Naive Bayes gaussiano [22] 91 8.3.4 Máquina de vector de soporte [23][24] 91 8.3.5 Red neuronal [25] 92 8.3.6 Poisson [26] 99 8.3.7 Combinaciones entre modelos 99 8.4 Bibliotecas utilizadas 100 8.5 Resultados de la predicción 101 Capítulo 9 – Conclusiones y trabajo futuro 105 9.1 Conclusiones 105 9.2 Trabajo futuro 106 Chapter 9 – Conclusions and future work 108 9.1 Conclusions 108 9.2 Future work 109 Capítulo 10 – Trabajo realizado por cada miembro 111 10.1 Alejandro Laprea 111 10.2 Alberto López 113 10.3 Felix Rodolfo 115 Bibliografía 119 Apéndices 122 Apéndice A - Manual de usuario 122 Apéndice B - Código 137 6 Índice de Ilustraciones Ilustración 1. Diagramas de casos de uso Ilustración 2. Diagrama entidad-relación Ilustración 3. Implementación de la BD Ilustración 4. Arquitectura Ilustración 5. Modelo-Vista-Controlador Ilustración 6. Diagrama de clases del patrón Chain of responsibility Ilustración 7. Diagrama de clases del patrón Middleware Ilustración 8. Diagrama de clases del patrón Singleton Ilustración 9. Diagrama de clases template view Ilustración 10. Diagrama Single Step View Ilustración 11. Diagrama entidad-relación Ilustración 12. Implementación de la BD Ilustración 13. Vista de menú principal Ilustración 14. Vista de Ajustes de usuario Ilustración 15. Código del método logUser Ilustración 16. Validación de usuario Ilustración 17. Autenticación de usuario registrado Ilustración 18. Middleware de autenticación en las rutas de usuario Ilustración 19. Vista estadísticas de la liga Ilustración 20. Método para leer todos los partidos Ilustración 21. Método para leer todos los equipos Ilustración 22. Imagen parcial del modelo leer equipos Ilustración 23. código de la vista Mostrar partidos 7 Ilustración 24. Comparativa de la vista en dispositivos SM y XL Ilustración 25. Vista principal de la funcionalidad de quinielas Ilustración 26. Código para mostrar la clasificación de jugadores Ilustración 27. Vista principal de la funcionalidad de administración Ilustración 28. Método que recibe la petición de modificar liga Ilustración 29. Método modificar liga Ilustración 30. Middleware que controla acceso a las funcionalidades de administración Ilustración 31. Ejemplo búsqueda de equipos por nombre Ilustración 32. Vista de Mostrar favoritos Ilustración 33. Vista de Mostrar favoritos Ilustración 34. Vista de Mostrar favoritos Ilustración 35. Método que responde a la petición de añadir favorito Ilustración 36. Metodo añadir favorito en la BD Ilustración 37. Gráficas relación variable resultado Ilustración 38. Coeficiente de cada variable en el modelo Ilustración 39. Rama del primer árbol de decisión generado Ilustración 40. Código de la red neuronal Ilustración 41. Grafo simplificado red neuronal Ilustración 42. Parte del grafo completo red neuronal Ilustración 43. Gráficas epoch_loss y epoch_accuracy Ilustración 44. Histogramas de pesos y bias de las conexiones neuronales Ilustración 45. Visualización porcentajes de acierto Ilustración 46. Visualización de los equipos mejor y peor predichos Ilustración 47. Visualización de las estadísticas de predicción Ilustración 48. Vista de Estadísticas 8 Ilustración 49. Barra de navegación Ilustración 50. Vista de Clasificación de la liga Ilustración 51. Vista de Predicciones Ilustración 52. Filtro de Partidos Ilustración 53. Información detallada de los predictores Ilustración 54. Vista de login Ilustración 55. Vista de Sign Up Ilustración 56. Opción de cambiar contraseña Ilustración 57. Opción de cambiar nombre de usuario Ilustración 58. Opción de cambiar idioma Ilustración 59. Opción de borrar perfil Ilustración 60. Vista de hacer apuesta Ilustración 61. Puntuación de una quiniela Ilustración 62. Vista de clasificación de usuarios Ilustración 63. Ver un equipo favorito Ilustración 64. Información de equipos favoritos Ilustración 65. Acceso a la vista de administrador Ilustración 66. Vista de administración Ilustración 67. Vista de usuarios (Administración) Ilustración 68. Vista de ligas (Administración) Ilustración 69. Vista de creación de liga (Administración) Ilustración 70. Vista de ver equipos (Administración) Ilustración 71. Agregar un equipo de la Serie A (Administración) Ilustración 72. Vista de lista de partidos (Administración) Ilustración 73. Vista de crear partido nuevo (Administración) 9 ●Capítulo 3 - Tecnología implementada: Este capítulo está dedicado a explicar las tecnologías implementadas en el trabajo. ●Capítulo 4 - Casos de uso: Este capítulo está dedicado a la descripción de la especificación de requisitos y los actores que participan en ellos. ●Capítulo 5 - Arquitectura: Este capítulo está dedicado a la descripción de la arquitectura utilizada para la implementación del trabajo propuesto ●Capítulo 6 - Modelo de datos: Este capítulo está dedicado a la descripción del modelo de datos usado en el trabajo para realizar la persistencia de la información de la aplicación. ●Capítulo 7 - Diseño: Este capítulo está dedicado a la descripción de las principales funcionalidades implementadas junto con el diseño utilizado en ellas. ●Capítulo 8 - Modelos de predicción: Este capítulo está dedicado a la explicación del proceso del desarrollo de la inteligencia artificial aplicada a la aplicación web. ●Capítulo 9 - Conclusiones y trabajo futuro: Este capítulo está dedicado a las conclusiones del trabajo realizado seguido de el posible trabajo futuro a realizar. Por último, en este capítulo también se explica el trabajo realizado por cada integrante del grupo de trabajo. ●Capítulo 10 - Trabajo realizado por cada miembro del grupo: Este capítulo está dedicado a la descripción del trabajo realizado por cada miembro del grupo para el cumplimiento de todos los requisitos del trabajo. 16 ●Bibliografía: Esta sección contiene toda la bibliografía utilizada para la realización del trabajo. 17 Chapter 1 - Introduction 1.1 Motivation Football is the biggest sport in Spain and the world, not only because of its entertainment and passion, but also because of the amount of money it generates. In addition to the money raised in the stadiums, television contracts and transfers, we must add all the money produced by sports bets. There are a number of different types of sports bets, such as Win and Tie (also known as 1x2), first goalscorer, half-time and final, double chance and parlay bets. Most of the above types of betting share one thing in common, a significant responsibility and risk. Fortunately, football is not a simple game of chance and we can try to predict with a higher level of certainty than randomness the results of football matches through statistics, historical data from past seasons, the team's form, etc. improving with each of these parameters, the odds of success. Now, making a prediction can be a very time-consuming and effort-consuming task because it can require an exhaustive search of data on different sites that can be difficult to find. It may also turn out that a person does not have the necessary knowledge to connect such data to make their own prediction and be more accurate. To solve these problems, this project proposes the development of a web application that offers the functionalities to help make football predictions. Containing data and statistics of both current and past leagues in an organized and readable way and at the same time, a system that shows the user a possible prediction of each match as an addition to his prediction, that is because the final result of a match is defined by a massive amount of parameters that it is almost impossible to take them all into account. For this purpose, we intend to implement an Artificial Intelligence that will be trained by parameters related to the previously mentioned data. Finally, a free betting game will be created for users to test their predictions before they start betting in the real world. 18 1.2 Objectives The aim of this project is the development of a web application that allows the user to make predictions on their own with the help of the historical data presented by our application along with a system that allows them to give tips on how the match could end with a moderately high level of certainty as well as a free betting game for all users. These objectives can be broken down in a more specific way: ●To develop a web application that allows the user to see the historical data of all the matches of the most important leagues, being able to perform organized and quick searches by applying different filters. ○Implement a functionality that allows users to filter by seasons, teams, leagues, matchdays, upcoming matches, and already played matches. ○Implement a functionality that allows users to create a list of favorite teams, making it easy to filter by the teams they are interested in. ●Develop a web application that allows users to view a possible prediction of any upcoming match with a moderately high level of accuracy. ●Develop a web application that allows users to test their predictions in a betting game. ○Implement a functionality that allows all registered users to compete against each other, creating a score system along with a global ranking of these scores. ●Implement other functionalities to assist the website administrator. ○Implement a functionality that allows the administrator to manually create, edit, and delete matches, leagues, users, and teams. 19 1.3 Work Plan In order to meet the objectives listed above, a series of iterations have been followed. Below, each of these iterations and their duration are explained below: Iteration 1: Website creation and user account implementation. In this iteration, the necessary code was developed for the creation of the website, along with the implementation of functionalities related to the creation of user accounts and differentiation between administrator and registered user roles. The database part related to user accounts was also designed. Start date: 09/26/2022 End date: 10/14/2022 Iteration 2: Implementation of administration services. In this second iteration, the database was designed and the functionalities of the administrators were implemented so that they can make modifications, creations, and deletions of matches, leagues, teams, and users. Start date: 10/17/2022 End date: 11/11/2022 Iteration 3: Implementation of the league management services. In this iteration, the historical data of the three leagues (Premier League, LaLiga, and Serie A) were collected using an API from a website called Understat. This data was imported to our database and the view of the team statistics, the current table view, and a view with upcoming matches were created. Start date: 11/14/2022 End date: 12/19/2022 20 Iteration 4: Implementation of information queries. In this iteration, all the necessary filters were implemented so that the user can perform quick and organized searches through the application to obtain the data they need. These filters include team, matchday, league, and season filters. Start date: 01/23/2023 End date: 02/10/2023 Iteration 5: Implementation of favorite teams list management. In this iteration, all the functionalities related to the management of a registered user's favorite teams were implemented, allowing the user to add, delete, and display the teams marked as favorites, as well as the option to filter matches by those teams. Start date: 02/13/2023 End date: 03/03/2023 Iteration 6: Implementation of betting pool services. In this last iteration, the betting pool game was implemented, which allows a registered user to create, delete, and modify the current week's pool. The results of previous pools were also displayed, and the ranking by points of the betting games of all the registered users who have participated was implemented. Start date: 03/06/2023 End date: 03/31/2023 1.4 Memory Structure The following is a brief description of the chapters that make up the project: ●Chapter 1 - Introduction: This chapter is dedicated to the motivation and objectives of the project, along with the project plan and structure. 21 ●Chapter 2 - State of the art: This chapter is dedicated to the description of applications that offer similar functionalities to those of this project. ●Chapter 3 - Implemented technology: This chapter explains the technologies implemented in the project. ●Chapter 4 - Use cases: This chapter describes the requirements specification and the actors involved in them. ●Chapter 5 - Architecture: This chapter describes the architecture used for the implementation of the proposed project. ●Chapter 6 - Data model: This chapter is dedicated to the description of the data model used in the work to make the persistence of the application information. ●Chapter 7 - Design: This chapter describes the main implemented functionalities together with the design used in them. ●Chapter 8 - Prediction models: This chapter is dedicated to the explanation of the development process of artificial intelligence applied to the web application. ●Chapter 9 - Conclusions and future work: This chapter is dedicated to the conclusions of the project, followed by possible future work to be done. Finally, in this chapter, the work done by each member of the project group is also explained. ●Chapter 10 - Work done by each member: This chapter describes all of the work done by each member of the group to fulfill all the requirements of the project. 22 ●Bibliography: This section contains all the references used in the project. 23 Capítulo 2 – Estado del arte Este capítulo está dedicado a la descripción de diferentes aplicaciones que disponen de funcionalidades parecidas a las de este trabajo. ●Understat [2]: es una aplicación web dedicada a los goles esperados (xG) de varias ligas europeas de fútbol, entre ellas tenemos la Premier League, La Liga, Serie A, Ligue 1, Bundesliga y la RFPL (liga rusa) de los últimos cinco años. Contiene una gran cantidad de datos sobre las ligas, los equipos, partidos y los jugadores de cada equipo; centrándose sobre todo en los goles esperados que han calculado entrenando una red neuronal con más de 100.000 disparos usando más de 10 parámetros por cada uno. Esta es la aplicación que se utilizó en el proyecto para exportar los datos relevantes para luego importarlos en la base de datos. A pesar de que contenga entrenada una red neuronal y una cantidad de datos muy grande, no realizan predicciones sobre los partidos futuros, únicamente calculan los goles esperados de cada partido jugado. ●Premier League [3]: la página web oficial de la Premier League contiene una variada cantidad de funcionalidades como noticias, juegos, videos y comunidades, funcionalidades que no tienen relación con las del trabajo, por lo que la principal relación de la página con la aplicación es en la funcionalidad principal de la pagina que es mostrar las estadísticas oficiales de todos los partidos y equipos desde que empezó la liga en el año 1992. Entre las estadísticas que podemos encontrar en dicha página , se encuentran la tabla de la liga y los partidos y resultados en tiempo real, los partidos próximos de cada equipo junto con datos mucho más específicos como lo pueden ser las porterías a cero, tacleadas junto a su porcentaje de éxito, pases, etc. ●ExpectedScore [4]: es una aplicación web dedicada al uso de goles esperados tanto para partidos ya jugados como partidos próximos de muchas ligas del mundo. Es una aplicación de pago, por lo que para la obtención de las estadísticas de la mayoría de ligas no está disponible, las únicas gratuitas son 24 partidos de: equipos nacionales (únicamente el mundial), copas europeas (Champions League y Europa League), Premier League, LaLiga, Bundesliga, Serie A y Ligue 1. A diferencia de understat, esta página busca predecir partidos mediante el uso de varias estadísticas de goles esperados como lo pueden ser los goles esperados cada 90 minutos y los goles esperados en contra cada 90 minutos entre muchas otras. Además, la aplicación puede mostrar todas estas estadísticas de goles esperados en forma de gráfico para una comprensión más sencilla 25 Ilustración 1. Diagramas de casos de uso 4.3 Especificación de requisitos En esta sección se explicarán los casos de uso definidos para los actores, agrupándolos en varios módulos funcionales: 1. Cuentas de usuario - Registrar usuario - Login - Logout - Modificar cuenta - Dar de baja cuenta 2. Gestión de la liga - Mostrar estadísticas de los equipos de la liga - Mostrar tabla y resultados de partidos - Mostrar partidos próximos de la liga 3. Servicios de quinielas - Crear quiniela semana actual - Modificar quiniela semana actual - Eliminar quiniela semana actual - Resultados de última quiniela - Ranking de quinielas personales - Buscar quinielas 4. Servicios de administración - Creación liga - Modificar liga - Eliminar liga 5. Consultas de información - Buscar partidos - Buscar equipos - Buscar una liga 6. Gestionar lista de favoritos - Añadir equipo a lista de favoritos - Eliminar equipo de lista de favoritos - Mostrar lista de equipos favoritos 32 4.3.1 Cuentas de usuario Requisito Registrar usuario Identificador 1.1 Prioridad Alta Precondición NA Descripción Creación de una cuenta en la aplicación Entrada Nombre de usuario, Contraseña Salida NA Secuencia Normal 1. El usuario accede a la web, muestra la pantalla principal y hace click en “registrarse” 2. El sistema muestra una pantalla en la que se le pide al usuario que rellene toda la información necesaria para registrarse 3. El usuario rellena todos los campos y hace click en “Crear cuenta” 4. El sistema valida la información y se devuelve a la pantalla principal Postcondición Cuenta del usuario creada Excepciones Paso 3: se muestra un mensaje de error si la contraseña del usuario no cumple con los requisitos Comentarios NA Actores Usuario no registrado Tabla 1. Registrar usuario Requisito Login Identificador 1.2 Prioridad Alta 33 Precondición El usuario ha de estar registrado Descripción Inicio de sesión de un usuario registrado Entrada Nombre de usuario, contraseña Salida NA Secuencia Normal 1. El usuario accede a la web, muestra la pantalla principal y hace click en “login” 2. El sistema muestra una pantalla en la que se le pide al usuario que rellene toda la información necesaria para iniciar sesión 3. El usuario rellena todos los campos y hace click en “Login” 4. El sistema valida la información y se devuelve a la pantalla principal Postcondición Inicio de sesion del usuario Excepciones Paso 4: No se ha podido realizar el inicio de sesión debido a una contraseña o usuario incorrecto Comentarios NA Actores Usuario no registrado Tabla 2. Login Requisito Logout Identificador 1.3 Prioridad Alta Precondición El usuario ha de haber iniciado sesión Descripción Cierre de sesión de un usuario registrado Entrada NA Salida NA 34 Secuencia Normal 1. El usuario accede a la web, muestra la pantalla principal y hace click en “logout” 2. El sistema cierra la sesión y vuelve a la pantalla principal Postcondición Cierre de sesion del usuario Excepciones NA Comentarios NA Actores Usuario registrado Tabla 3. Logout Requisito Modificar cuenta Identificador 1.4 Prioridad Media Precondición El usuario ha de haber iniciado sesión como administrador Descripción Permite al administrador modificar la cuenta de cualquier usuario en la aplicación Entrada Usuario, permisos de admin Salida Lista de usuarios Secuencia Normal 1. El usuario accede a la web, muestra la pantalla principal y hace click en “Admin” 2. El usuario hace click en el botón de “Users” 3. El usuario selecciona el botón de modificar del usuario que quiera modificar 4. El sistema muestra una pantalla que pide introducir los datos a añadir 5. El usuario introduce los datos 6. El usuario hace click en “Modify” 35 7. El sistema redirecciona al usuario a la lista de “Users” Postcondición Modificación exitosa del usuario seleccionado Excepciones Paso 6: el usuario hace click en cancelar Comentarios NA Actores Usuario administrador Tabla 4. Modificar cuenta Requisito Dar de baja cuenta Identificador 1.5 Prioridad Media Precondición El usuario ha de haber iniciado sesión como administrador Descripción Permite al administrador dar de baja la cuenta de cualquier usuario en la aplicación Entrada Usuario Salida Lista de usuarios Secuencia Normal 1. El usuario accede a la web, muestra la pantalla principal y hace click en “Admin” 2. El usuario hace click en el botón de “Users” 3. El usuario selecciona el botón de modificar del usuario que quiera eliminar 4. El usuario hace click en el botón de “Delete User” 5. El sistema le pregunta al usuario si de verdad desea eliminar al usuario 6. El usuario hace click en “Delete” 36 7. El sistema redirecciona al usuario a la lista de “Users” Postcondición Modificación exitosa del usuario seleccionado Excepciones Paso 5: el usuario hace click en cancelar Comentarios NA Actores Usuario administrador Tabla 5. Dar de baja cuenta 4.3.2 Gestión de la liga Requisito Mostrar estadísticas de los equipos de la liga Identificador 2.1 Prioridad Alta Precondición NA Descripción Muestra al usuario todas las estadísticas de todos los equipos de la liga seleccionada hasta el momento para ayudar a la predicción del usuario Entrada Liga escogida / NA Salida Tabla de todos los equipos de la liga seleccionada con sus estadísticas hasta el momento ( núm. goles concedidos en casa y fuera, núm. goles marcados en casa y fuera, núm. partidos ganados en casa y fuera, núm. partidos empatados en casa y fuera, núm. partidos perdidos en casa y fuera) Secuencia Normal 1. El usuario accede a la web, muestra la pantalla principal y hace click en la pestaña de “Teams” 2. Si lo desea el usuario puede escoger la liga en el dropdown de “Select League”, por defecto la liga seleccionada será el de la Premier League 37 Postcondición NA Excepciones NA Comentarios El usuario además podrá ordenar la tabla por cada atributo de la misma en orden descendente Actores Usuario registrado, Usuario no registrado Tabla 6. Mostrar estadísticas de los equipos de la liga Requisito Mostrar tabla y resultados de partidos de la liga Identificador 2.2 Prioridad Alta Precondición NA Descripción Muestra al usuario la tabla en dicho momento de la liga seleccionada Entrada Liga escogida / NA Salida Tabla de la liga seleccionada con todos sus datos (puntos, partidos ganados, perdidos, empatados y goles marcados y concedidos) y una vista de los resultados de la liga seleccionada ordenados por fecha descendente. Secuencia Normal 1. El usuario accede a la web, muestra la pantalla principal y hace click en la pestaña de “Table” 2. Si lo desea el usuario puede escoger la liga en el dropdown de “Select League”, por defecto la liga seleccionada será el de la Premier League 3. El usuario hace click en la pestaña de “Fixtures” 4. El usuario hace click en el botón de “Results” que lo lleva a la página de los 38 resultados de los últimos partidos 5. Si lo desea, el usuario puede usar un dropdown donde puede escoger entre todos los equipos de la liga seleccionada y ver únicamente los partidos de dicho equipo Postcondición NA Excepciones NA Comentarios El usuario además podrá ordenar la tabla por cada atributo de la misma en orden descendente Actores Usuario registrado, Usuario no registrado Tabla 7. Mostrar tabla de la liga Requisito Mostrar partidos próximos de la liga Identificador 2.3 Prioridad Alta Precondición NA Descripción Muestra al usuario los siguientes partidos que serán jugados de la liga y equipo seleccionados Entrada Liga escogida, Equipo seleccionado / NA Salida Vista de los partidos por jugar de la liga seleccionada ordenados por fecha ascendente, muestra además, las probabilidades de que cada equipo gane, pierda o empate cada partido junto a la hora de inicio del mismo. Secuencia Normal 1. El usuario accede a la web, muestra la pantalla principal y hace click en la pestaña de “Fixtures” 2. El usuario hace click en el botón de “Upcoming fixtures” que lo lleva a la página de los partidos por jugar 39 3. Si lo desea, el usuario puede escoger la liga en el dropdown de “Select League”, por defecto la liga seleccionada será el de la Premier League 4. Si lo desea, el usuario puede usar un dropdown donde puede escoger entre todos los equipos de la liga seleccionada y ver únicamente los partidos de dicho equipo Postcondición NA Excepciones NA Comentarios NA Actores Usuario registrado, Usuario no registrado Tabla 8. Mostrar partidos próximos de la liga 4.3.3 Servicios de quinielas Requisito Creación de quiniela semana actual Identificador 3.1 Prioridad Alta Precondición El usuario ha de haber iniciado sesión. La jornada de liga correspondiente todavía no ha empezado. Descripción Permite al usuario registrado crear su quiniela para la próxima jornada de la liga seleccionada y así ganar puntos Entrada Liga escogida / NA, resultados predecidos por el usuario para cada partido de la próxima jornada Salida NA Secuencia Normal 1. El usuario accede a la web, muestra la pantalla principal, hace click en la pestaña de “Log in” e inicia sesión 40 2. El usuario hace click en la pestaña de “Pools” 3. Si lo desea el usuario puede escoger la liga en el dropdown de “Select League”, por defecto la liga seleccionada será el de la Premier League 4. El usuario selecciona el botón de “Create Pool” 5. Se le mostrará al usuario una vista donde tendrá que rellenar los resultados que todos los partidos de la próxima jornada, también podrá ver la quiniela generada por la IA y comparar ambos resultados; cuando el usuario acabe presiona el botón de “Finalize Pool” y se le redireccionará a la vista de “Home” Postcondición Quiniela creada Excepciones Paso 4: No se ha podido realizar la creación de la quiniela debido a que no se rellenaron todos los partidos o se escribieron resultados con caracteres erróneos Comentarios NA Actores Usuario registrado Tabla 9. Creación de quinielas Requisito Modificar quiniela semana actual Identificador 3.2 Prioridad Alta Precondición El usuario ha de haber iniciado sesión y ha de haber creado una quiniela para la jornada actual Descripción Permite al usuario registrado modificar su quiniela para la próxima jornada de la liga seleccionada 41 usuario administrador Descripción Permite al administrador crear una liga nueva Entrada liga (Premier League, La Liga, Serie A) Salida Vista de la liga recién agregada Secuencia Normal 1. El usuario accede a la web, muestra la pantalla principal y toca la pestaña de “Admin” 2. El usuario selecciona el botón de “Leagues” 3. El usuario selecciona el botón de “Create new League” 4. El sistema muestra una pantalla que pide introducir la liga que desee que acabe para crear una nueva. 5. El usuario introduce el dato 6. El usuario hace click en “Create new league” 7. El sistema redirecciona al usuario a la pestaña de admin de “Leagues” Postcondición La nueva liga ha sido añadida y la antigua no ya se puede modificar Excepciones Paso 6: el usuario hace click en cancelar Comentarios Cuando se crea una nueva liga, la anterior automáticamente queda almacenada y no puede modificarse Actores Usuario administrador Tabla 15. Creación liga Requisito Modificar liga Identificador 4.2 48 Prioridad Alta Precondición El usuario ha de haber iniciado sesión como usuario administrador Descripción Permite al administrador modificar una liga existente actual, ya sea creando/modificando/eliminando un equipo o partido de la liga seleccionada, también puede modificar la jornada actual en la que se encuentra la liga Entrada Datos de la opción que se va a modificar/crear Salida Vista de la liga recién modificada Secuencia Normal 1. El usuario accede a la web, muestra la pantalla principal y toca la pestaña de “Admin” 2. El usuario selecciona el botón de “Leagues” 3. El usuario selecciona el botón de “Modify League” / “Check Teams” / “Fixtures” de su liga buscada 4. Si el usuario ha seleccionado cualquier opción menos “Modify League”, se le mostrará una vista donde puede ver los equipos/partidos de la liga y seleccionar el botón de “Create Team/Fixture” o el botón de “Modify Team/Fixture” 5. El sistema muestra una pantalla que pide introducir los datos a añadir. 6. El usuario introduce los datos 7. El usuario hace click en “Modify” / ”Create” / ”Delete” 8. El sistema redirecciona al usuario a la pestaña de admin de “Leagues” Postcondición La liga ha sido modificada exitosamente Excepciones Paso 7: el usuario hace click en cancelar 49 Comentarios NA Actores Usuario administrador Tabla 16. Modificar liga Requisito Eliminar liga Identificador 4.3 Prioridad Alta Precondición El usuario ha de haber iniciado sesión como usuario administrador Descripción Permite al administrador eliminar una liga existente Entrada Liga seleccionada Salida Vista de las ligas disponibles Secuencia Normal 1. El usuario accede a la web, muestra la pantalla principal y toca la pestaña de “Admin” 2. El usuario selecciona el botón de “Leagues” 3. El sistema muestra una vista con una lista de todas las ligas presentes en el sistema 4. El usuario selecciona el botón de “Modify League” de su liga buscada 5. El usuario selecciona el botón de “Delete League” 6. El sistema le pregunta al usuario si de verdad desea eliminar la liga 7. El usuario hace click en “Delete” 8. El sistema redirecciona al usuario a la pestaña de admin de “Leagues” Postcondición La liga ha sido eliminada 50 Excepciones Paso 6: el usuario hace click en cancelar Comentarios NA Actores Usuario administrador Tabla 17. Eliminar liga 4.3.5 Consultas de información Requisito Buscador partidos Identificador 5.1 Prioridad Baja Precondición NA Descripción Permite al usuario filtrar los partidos por fecha y equipo o por jornada. Entrada Fecha seleccionada y/o equipos seleccionados, lista de partidos, jornada Salida Lista de partidos jugados por los equipos seleccionados con las opciones escogidas Secuencia Normal 1. El usuario accede a la web, muestra la pantalla principal y selecciona la pestaña “Fixtures” 2. Si lo desea el usuario puede escoger la liga en el dropdown de “Select League”, por defecto la liga seleccionada será el de la Premier League 3. El usuario selecciona del dropdown “Select team” el equipo de los partidos que desee ver, también puede seleccionar el calendario y seleccionar la fecha en las que se jugaron/jugaran los partidos buscados 4. Se le mostrará una vista al usuario con todos los partidos filtrados a partir de las opciones escogidas anteriormente 51 5. El usuario selecciona del dropdown “Game Week” el número de la jornada que desee ver 6. Se le mostrará al usuario una vista con todos los partidos de dicha jornada, eliminando cualquier filtro anterior Postcondición NA Excepciones Fecha invalida, equipos seleccionados no existentes. Comentarios NA Actores Usuario registrado, Usuario no registrado Tabla 18. Buscar partidos Requisito Buscador equipos Identificador 5.2 Prioridad Baja Precondición NA Descripción Permite al usuario buscar equipos por texto Entrada Lista de equipos, texto introducido en el buscador Salida Lista de equipos cuyo nombre coincida con el texto introducido en el buscador. Secuencia Normal 1. El usuario accede a la web, muestra la lista de equipos, y hace click en el campo búsqueda. 2. El usuario introduce el nombre a buscar. 3. El usuario pulsa enter o el botón buscar Postcondición NA Excepciones Caracteres inválidos. 52 Comentarios NA Actores Usuario registrado, Usuario no registrado Tabla 19. Buscar equipos Requisito Buscar una liga Identificador 5.3 Prioridad Media Precondición NA Descripción Permite al usuario buscar una liga Entrada Liga seleccionada / NA, Jornada seleccionada Salida Lista de todos los partidos de la jornada y liga seleccionadas Secuencia Normal 1. El usuario accede a la web y selecciona el dropdown de “League Year” 2. Si lo desea el usuario puede escoger la liga en el dropdown de “Select League”, por defecto la liga seleccionada será el de la Premier League 3. El usuario ahora puede entrar a cualquier pestaña y ver los datos de la liga seleccionada Postcondición NA Excepciones NA Comentarios NA Actores Usuario registrado, Usuario no registrado Tabla 20. Buscar una liga 4.3.6 Gestionar lista de favoritos 53 Requisito Creación equipos favoritos Identificador 6.1 Prioridad Baja Precondición El usuario ha de haber iniciado sesión Descripción Permite al usuario añadir equipos a favoritos para poder encontrarlos de forma más rápida. Entrada Equipo escogido para favorito Salida Adición del equipo a la sección de favoritos del usuario Secuencia Normal 1. El usuario accede a la web, y pulsa el botón “Team Stats” para mostrar la lista de todos los equipos. 2. El usuario busca el equipo deseado y pulsa en el botón “favorito” que se encuentra a la derecha del equipo deseado 3. El equipo se habrá añadido a los favoritos del usuario y este podrá acceder a su información de forma más rápida desde la página de favoritos Postcondición El equipo ha sido añadido a favoritos Excepciones Equipo seleccionado no existente Comentarios NA Actores Usuario registrado Tabla 21. Creación equipos favoritos Requisito Mostrar equipos favoritos Identificador 6.2 Prioridad Baja Precondición El usuario ha de haber iniciado sesión 54 Descripción Se muestran partidos filtrados por equipos favoritos Entrada Lista de equipos favoritos Salida Vista de la lista de los equipos favoritos junto a su información Secuencia Normal 1. El usuario accede a la web, pulsa en su icono de usuario donde se abrirá un dropdown 2. En el dropdown selecciona “favoritos” y se mostrará una página con la lista de los equipos favoritos del usuario 3. El usuario puede ver sus equipos favoritos junto a su información Postcondición NA Excepciones NA Comentarios NA Actores Usuario registrado Tabla 22. Mostrar equipos favoritos Requisito Eliminar equipo favorito Identificador 6.3 Prioridad Baja Precondición El usuario ha de haber iniciado sesión Descripción Se elimina un equipo de los equipos favoritos del usuario Entrada Lista de equipos favoritos, equipo escogido para eliminar Salida Lista de equipos favoritos tras la eliminación Secuencia Normal 1. El usuario accede a la web, pulsa en su icono de usuario donde se abrirá un dropdown 55 2. en el dropdown selecciona pulsa “favoritos” y se mostrará una página con la lista de los equipos favoritos del usuario 3. El usuario pulsa el botón edit de la parte inferior. 3. El usuario pulsa el botón “delete” que se encuentra a la derecha del equipo que se desea eliminar Postcondición El equipo ha sido eliminado de los favoritos Excepciones NA Comentarios NA Actores Usuario registrado Tabla 23. Eliminar equipo favorito 56 Capítulo 5 – Arquitectura Este capítulo está dedicado a la descripción de la arquitectura utilizada para la implementación del trabajo propuesto. 5.1 Arquitectura del sistema La aplicación sigue un modelo cliente-servidor [35], donde los dispositivos cliente hacen solicitudes usando el protocolo HTTP a un equipo servidor, que se encarga de procesar las peticiones y devolver una respuesta a los dispositivos cliente. Ilustración 4. Arquitectura Al tratarse de una aplicación web, se pone a disposición de los usuarios una interfaz mediante un sitio web desde el que pueden enviar las peticiones y recibir las respuestas del servidor central. 57 Capítulo 6 – Modelo de datos En este capítulo se explica el modelo de datos usado para realizar la persistencia de la información de la aplicación. 6.1 Modelo Entidad-Relación Para el diseño de la base de datos de la aplicación web, se ha descrito una base de datos con un modelo entidad-relación que refleja las entidades que se deben gestionar por la web. Para la aplicación web, se han creado tres tipos de datos: datos de usuario, datos de información y datos de predicción. Los datos de usuario contienen toda la información relacionada con las cuentas de usuario, los equipos favoritos de los usuarios y las predicciones de usuarios. Para crear una cuenta de usuario, es necesario un nombre de usuario, una contraseña y un rol de usuario (administrador o usuario registrado). Para los equipos favoritos de cada usuario simplemente se debe guardar el equipo favorito junto al nombre del usuario. Para las predicciones de usuario se almacenarán por jornadas, es decir, una fila contendrá la liga, jornada, usuario, los resultados que predice el usuario por cada partido y los puntos obtenidos en la jornada. Los datos de información contiene toda la información relacionada con los partidos, equipos y ligas. Para almacenar una liga, se debe guardar cada una de las ligas (temporada, competición, si la liga aún no ha acabado y la jornada actual de dicha liga). Además, se necesita almacenar las tablas de las ligas con todas las estadísticas de cada equipo en dicha liga junto con la temporada en la que se disputó la competición. Para los partidos, se debe guardar cada partido con su id, temporada, liga, jornada, equipos a jugar, el resultado del partido y si el partido ha sido gestionado por la aplicación web. Los datos de predicción contienen toda la información relacionada con las predicciones realizadas por la Inteligencia Artificial. Para almacenar las predicciones de la IA, se debe guardar el resultado a predecir para cada partido usando su identificador junto a las predicciones tanto del equipo que juega en casa como del equipo que juega fuera de casa. Por último, también se necesitará saber qué método de predicción se ha utilizado para la predicción de dicho partido ya que se utilizan varios modelos de predicción en la aplicación; para esto, se debe almacenar en otra tabla, cada método de predicción a utilizar junto a su identificador.A continuación, se muestra el diagrama 64 entidad-relación del modelo que se acaba de describir: Ilustración 11. Diagrama entidad-relación 65 6.2 Implementación de la base de datos Ilustración 12. Implementación de la BD A continuación, se describen todas las tablas de la Base de Datos: 6.2.1 Tablas sobre usuarios ●Tabla “users”: incluye todos los datos que se necesitan para las cuentas de usuario, incluyendo sus puntuaciones en las quinielas. Sus campos son: ○“username”: nombre e identificador de usuario. ○“password”: contraseña encriptada de usuario. ○“pointsEPL”: puntos de la “Premier League” en el juego de quinielas. ○“pointsLaLiga”: puntos de “La Liga” en el juego de quinielas. ○“pointsSerieA”: puntos de la “Serie A” en el juego de quinielas. 66 ○“rol”: rol del usuario en la aplicación (puede ser admin o usuario registrado) ○“visibility”: booleano que representa la visibilidad de datos del usuario hacia los demás usuarios de la web. ○“lang”: idioma en el que la aplicación se le presentará al usuario. ●Tabla “userspredictions”: incluye todas las predicciones de quinielas de un usuario en concreto en una jornada. Sus campos son: ○“league”: identificador de la liga de la predicción (“EPL”, “LaLiga”, “SerieA”). ○“user”: identificador del usuario que va a realizar la predicción. ○“year”: temporada de la predicción. ○“gameweek”: jornada de la predicción. ○“points”: puntos totales ganados en la predicción. ○parsed_gameweek: booleano que representa si la quiniela de la jornada ha sido parseada en la aplicación. ○“game1_home”: predicción de la cantidad de goles del primer partido del equipo jugando en casa. ○“game1_away”: predicción de la cantidad de goles del primer partido del equipo jugando fuera de casa. El resto de gameX_home y away son iguales a los anteriores pero con los demás partidos de la jornada. ●Tabla “favorites”: tabla que incluye los equipos favoritos de un usuario en concreto. Sus campos son: ○“user”: identificador del usuario. ○“team”: identificador del equipo favorito. 6.2.2 Tablas sobre información ●Tabla “leaguetables”: tabla que incluye todos las estadísticas de un equipo y temporada en concreto como los goles, partidos ganados perdidos, etc. Sus campos son: ○“year”: identificador de la temporada. ○“team”: identificador del equipo. ○“league”: identificador de la liga (“EPL”, “LaLiga”, “SerieA”) ○“form”: forma de los últimos cinco partidos del equipo (Ej: WWDLW). 67 ○“matches”: número de partidos jugados por el equipo. ○“points”: número de puntos ganados por el equipo. ○“home_scored”: número de goles marcados en casa por el equipo. ○“away_scored”: número de goles marcados fuera de casa por el equipo. ○“home_conceded”: número de goles concedidos en casa por el equipo. ○“away_conceded”: número de goles concedidos fuera de casa por el equipo. ○“home_wins”: número de victorias en casa del equipo. ○“away_wins”: número de victorias fuera de casa del equipo. ○“home_losses”: número de derrotas en casa del equipo. ○“away_losses”: número de derrotas fuera de casa del equipo. ○“home_draws”: número de empates en casa del equipo. ○“away_draws”: número de empates fuera de casa del equipo. ●Tabla “match”: tabla que incluye toda la información sobre un partido en concreto. Sus campos son: ○“id”: identificador del partido. ○“matchday”: fecha del partido (incluye año, mes, día y hora). ○“season”: identificador de la temporada en la que se juega el partido. ○“league_day”: numero de jornada del partido. ○“home”: identificador del equipo en casa. ○“away”: identificador del equipo fuera de casa. ○“goals_home”: goles del equipo en casa. ○“goals_away”: goles del equipo fuera de casa. ○“result”: letra que identifica qué equipo ganó (“h” si gano el equipo en casa, “a” si gano el equipo fuera de casa y “d” si empataron). ○“league”: identificador de la liga en la que se juega el partido. ○“match_parsed”: booleano que representa si el partido ha sido parseado en la aplicación. ○XG_home: flotante que representa los goles esperados del equipo de casa (es un atributo que utilizan las predicciones de Poisson) ○XG_away: flotante que representa los goles esperados del equipo fuera de casa (es un atributo que utilizan las predicciones de Poisson) 68 ●Tabla “seasondata”: tabla auxiliar e informativa sobre una liga que contiene información sobre ella como su nombre y su jornada actual. Sus campos son: ○“season”: identificador de la temporada de la liga. ○“league”: identificador de la liga (“EPL”, “LaLiga”, “SerieA”) ○“current_league”: booleano que representa si dicha liga es la liga por la que se está compitiendo actualmente o si es una liga antigua. ○“current_gameweek”: número de la jornada actual de la liga. ●Tabla “team”: es una tabla que contiene toda la información sobre un equipo en concreto. Sus campos son: ○“id”: identificador del equipo. ○“name”: nombre del equipo. ○“abbreviation”: abreviación del equipo. ○“league”: identificador de la liga (“EPL”, “LaLiga”, “SerieA”). 6.2.1 Tablas sobre predicción ●Tabla “predictions”: tabla que incluye las predicciones creadas por la IA sobre un partido y predictor en concreto. Sus campos son: ○“match”: identificador del partido. ○“home_prediction”: número de goles predecidos para el equipo jugando en casa. ○“away_prediction”: número de goles predecidos para el equipo jugando fuera de casa. ○“predictor”: identificador del predictor utilizado para la predicción. ○“probabilities”: probabilidad de que gane el equipo en casa, fuera de casa o que sea un empate (estas probabilidades solo aparecen para el predictor de Poisson). ●Tabla “predictors”: es una tabla que contiene la información de un predictor de la aplicación. Sus campos son: ○“id”: identificador del predictor. ○“name”: nombre del predictor. 69 Capítulo 7 – Diseño Este capítulo está enteramente dedicado a detallar como es el diseño de las funcionalidades desarrolladas durante la elaboración de la aplicación web. 7.1 Diseño de la interfaz visual Para la interfaz gráfica se ha optado por el uso de Bootstrap 4 (en concreto la versión 4.3.1). Este framework de css, tiene una serie de componentes habituales de web tales como botones, navbars, formularios, tarjetas… con estilos predefinidos que lucen muy bien combinados, sin necesidad de grandes conocimientos de diseño gráfico. En cuanto a la distribución de la información dentro de las páginas se ha optado por una maquetación lo más sencilla posible que consta de dos elementos. El primero, una navbar con menús que facilita la navegación entre distintas vistas de la aplicación además de facilitar el acceso a la información deseada por el usuario. El segundo, es un contenedor centrado en la pantalla, donde se muestra la información relevante para una vista concreta. Ilustración 13. Vista de menú principal Además Bootstrap tiene una serie de clases que hacen que sus elementos sean completamente responsive, por lo que se verá bien en cualquier tamaño de pantalla, sin requerir que configuremos ningún tipo de media query para ello. También se ha usado css propio para el ajuste fino de ciertos elementos, introducir glassmorfismo (elementos translúcidos que imitan la apariencia del vidrio) además de para incluir ciertas animaciones, para dar más vistosidad al conjunto. 70 7.2 Funcionalidad de la aplicación 7.2.1 Funcionalidad de Cuentas de usuario Ilustración 14. Vista de Ajustes de usuario Este módulo implementa las funcionalidades de control de las sesiones de usuario, login, logout y signup. Además da la posibilidad de a los usuarios registrados de personalizar la información personal, cambiar sus contraseñas y elegir el idioma que quieren emplear en la aplicación. Ilustración 15. Código del método logUser 71 La lógica de esta funcionalidad ha sido implementada en dos módulos uno para su controlador y otro para su modelo. En la Ilustración 15 el método logUser comprueba si el usuario existe en la base de datos Ilustración 16. Validación de usuario En validarPassword, Ilustración 16, se comprueba si la contraseña y el nombre de usuario coinciden con alguno de los existentes. Para ello se busca el usuario por nombre en la base de datos y si existe se compara los hashes de la contraseña guardada y la contraseña introducida. Tenemos que distinguir dos tipos de usuario distintos, los usuarios no registrados y los usuarios registrados. cada uno de ellos con sus privilegios de acceso. El acceso de los usuarios a las distintas funcionalidades se hace mediante el uso de middlewares. Se 72 comprueba si tiene la variable de sesión que se crea cuando el usuario está logueado en el sistema. Los usuarios no registrados que intenten acceder a rutas reservadas para usuarios registrados serán redireccionados automáticamente a la ruta de login para que puedan autenticarse. Ilustración 17. Autenticación de usuario registrado En el fichero de rutas (Ilustración 18) se puede ver el punto a partir del cual se controla si el usuario ha iniciado sesión. Todas las rutas antes del middleware auth son de libre acceso mientras que el resto requieren de autenticación. Ilustración 18. Middleware de autenticación en las rutas de usuario 73 7.2.4 Funcionalidad de Servicios de administración Ilustración 27. Vista principal de la funcionalidad de administración Esta característica permite a los administradores, realizar usando una interfaz gráfica las funciones de control de ligas y usuarios. La funcionalidad está contenida dentro de un único módulo, el controlador de administración. Este controlador extiende las funcionalidades de los controladores de usuarios y estadísticas y no tiene su propio modelo. Ilustración 28. Método que recibe la petición de modificar liga 80 En la ilustración 28 podemos ver cómo este método llama al controlador de estadísticas que llamará al modelo para realizar la modificación Ilustración 29. Método modificar liga Las funcionalidades de administración están protegidas por su propio middleware que se asegura de que ningún usuario sin permisos de administración puede acceder a estas funcionalidades. Ilustración 30. Middleware que controla acceso a las funcionalidades de administración Este middleware comprueba si el usuario tiene el rol de administrador y si no lo tiene lo redirecciona a la página de login. 81 7.2.5 Funcionalidad de Consulta de información Ilustración 31. Ejemplo búsqueda de equipos por nombre Esta funcionalidad filtra resultados de otras funcionalidades para quedarse con un subconjunto de los datos. Fue mayoritariamente implementada del lado del cliente ya que el número de elementos con el que tienen que trabajar no es muy elevado y no justifica tener que hacer una nueva llamada al servidor. En la Ilustración 31 se puede ver como se ha filtrado por nombre la lista de equipos de una liga. Ilustración 32. Ejemplo búsqueda de equipos por nombre Se ha empleado jQuery para seleccionar todos los elementos de la clase team-name. Para aquellos elementos cuyo texto no coincide con la expresión regular de la búsqueda, se busca la fila de la tabla a la que pertenecen y se oculta dicha fila usando la clase d-none definida por Bootstrap. Esta función se emplea tanto en la tabla de estadísticas como en la de la clasificación de la liga. 82 7.2.6 Funcionalidad de Gestionar lista de favoritos Ilustración 33. Vista de Mostrar favoritos Esta funcionalidad permite al usuario escoger uno o varios equipos favoritos, con lo que puede tener acceso a su información de forma rápida a estadísticas y partidos pasados y futuros del equipo. Se ha implementado integrada con los módulos controlador y modelo de la funcionalidad Cuentas de usuario y sus vista forma parte del perfil de usuario. Ilustración 34. Vista de Mostrar favoritos 83 En la ilustración 29 se puede ver como desde la vista de estadísticas se llama a las funciones añadir o eliminar favoritos. Ilustración 35. Método que responde a la petición de añadir favorito Una vez recibida la petición se envía una respuesta vacía con estado 200 si se ha añadido con éxito o con estado 400 si ha habido algún error tal y como se puede ver en la ilustración 31. Ilustración 36. Metodo añadir favorito en la BD El éxito o el fracaso va asociado a si se ha conseguido añadir el equipo a favoritos con la función de la ilustración 32. 84 Capítulo 8 – Modelos de predicción Este capítulo está dedicado a explicar cómo se realizan las predicciones en la aplicación. 8.1 Tipo de aprendizaje Uno de los objetivos de la aplicación es la predicción de los resultados de los partidos de fútbol. Para ello se utilizarán métodos de predicción basados en el análisis de datos. Se dispone de los datos históricos de otros partidos realizados previamente cuyo resultado ya se conoce, por lo que se usarán principalmente modelos de aprendizaje supervisado. Estos modelos son capaces de aprender la relación entre las condiciones de entrada del partido y el resultado del mismo sobre un conjunto de ejemplos proporcionado, para luego usando esa relación en los partidos a predecir, poder obtener una predicción del resultado. 8.2 Datos de entrada El aprendizaje supervisado requiere de un conjunto de ejemplos de entrada para poder entrenarse y aprender de los mismos. En el proyecto este conjunto estará conformado por partidos de fútbol que ya han sido jugados. Por cada ejemplo se tendrán que proporcionar tanto el resultado como las condiciones del mismo para que el modelo pueda establecer una relación entre ambos. Es importante elegir cuidadosamente qué datos se han de calcular e introducir en el modelo para que pueda realizar predicciones de forma correcta. De esta forma se han intentado incluir todos los datos que puedan aportar información, excluyendo datos que no tengan una relación clara con los resultados que puedan confundir al modelo. Para el conjunto de ejemplos utilizado, los datos de entrada calculados y escogidos hacen referencia a las estadísticas de los equipos participantes en los partidos jugados, que son unos de los factores más importantes a la hora de decidir el resultado del mismo. De esta forma se intenta abarcar tanto la habilidad general e histórica del equipo, recolectando datos acumulados calculados teniendo en cuenta todos los partidos jugados, así como la condición reciente del equipo, recolectando datos que únicamente hacen referencia a los últimos partidos jugados. También se separan las estadísticas de cada equipo en estadísticas en casa, y fuera de casa, puesto que la ubicación del equipo es uno de los factores más importantes, tal y como se ha visto al analizar el porcentaje de victorias y derrotas de varios partidos en la propia aplicación. A continuación, se listan y explican todas las variables de entrada utilizadas para la predicción. Todas estas variables corresponden a las estadísticas de los equipos a la 85 hora de realizar el partido, y no a las estadísticas actuales de los mismos. Para ambos equipos enfrentados en el partido usamos las mismas variables, por lo que se explican únicamente las variables del equipo que juega en casa. ●home -> Id del equipo jugando en casa ●away -> Id del equipo jugando fuera ●hometeamAverageHomeScore -> Promedio de goles marcados en casa ●hometeamHomeDifference -> Diferencia de goles marcados y goles recibidos en casa ●hometeamHomeWinDifference -> Diferencia de partidos ganados y perdidos en casa ●hometeamHomeWinRate -> Porcentaje de partidos ganados en casa ●hometeamHomeDrawRate -> Porcentaje de partidos empatados en casa ●hometeamHomeLoseRate -> Porcentaje de partidos perdidos en casa ●hometeamAverageAwayScore -> Promedio de goles marcados fuera de casa ●hometeamAwayDifference -> Diferencia de goles marcados y goles recibidos fuera de casa ●hometeamAwayWinDifference -> Diferencia de partidos ganados y perdidos fuera de casa ●hometeamAwayWinRate -> Porcentaje de partidos ganados fuera de casa ●hometeamAwayDrawRate -> Porcentaje de partidos empatados fuera de casa ●hometeamAwayLoseRate -> Porcentaje de partidos perdidos fuera de casa ●hometeamHomeStreak -> Número de partidos ganados en casa de forma consecutiva ●hometeamAwayStreak -> Número de partidos ganados fuera de casa de forma consecutiva ●hometeamStreak -> Número de partidos ganados de forma consecutiva 86 ●hometeamLastGamesForm -> De entre los últimos diez partidos, la diferencia entre victorias y derrotas. ●awayteamAverageHomeScore ●awayteamHomeDifference ●awayteamAverageAwayScore ●awayteamAwayDifference ●awayteamHomeWinDifference ●awayteamHomeWinRate ●awayteamHomeDrawRate ●awayteamHomeLoseRate ●awayteamAwayWinDifference ●awayteamAwayWinRate ●awayteamAwayDrawRate ●awayteamAwayLoseRate ●awayteamAwayStreak ●awayteamHomeStreak ●awayteamStreak ●awayteamLastGamesForm Para generar estas estadísticas se hace uso de todos los partidos previamente realizados, que están almacenados en la base de datos, es decir, todos los partidos desde 2018. Sin embargo no se usan todos los partidos para entrenar los modelos, y se excluyen los primeros 1000 partidos, puesto que al no tener disponible suficiente información previa, las estadísticas pueden quedar engañosas, y empeorar las predicciones. Dicho esto, todas las variables pueden no llegar a ser usadas en todos los modelos utilizados. Puesto que cada modelo trabaja de forma diferente, algunos datos pueden 87 perjudicar más la predicción de lo que la pueden beneficiar. Por ejemplo, en la regresión lineal se requieren datos de entrada que sean linealmente proporcionales al resultado, cualidad que no ocurre con todas las variables que se han calculado. El conjunto de datos de entrada queda conformado pues por todos los partidos realizados a excepción de los primeros 1000, y cada uno con las variables anteriormente mencionadas. Sin embargo no se puede introducir este conjunto de datos directamente en el modelo, y será necesario hacer una preparación previa. Primero hay que separar los datos en dos particiones, la partición de datos de entrenamiento que ocupará el 85% de los datos, y la partición de datos de testeo, que ocupará el 15% de los datos. La partición de entrenamiento será la que finalmente se usará para entrenar el modelo, mientras que la de testeo se utilizará para predecir esos partidos, y comparar el resultado real con la predicción, obteniendo así el porcentaje de aciertos del modelo. Tras realizar esta separación, los datos se deberán de escalar o normalizar antes de introducirlos en el modelo correspondiente. Esto conseguirá que todas las variables de entrada estén en el mismo orden de magnitud, garantizando así que todas las variables de entrada se le otorgan una relevancia similar. Un ejemplo de esto se puede observar comparando dos de las variables usadas: “hometeamHomeDifference” y “hometeamHomeWinRate”. La primera, que hace referencia a la diferencia entre goles marcados y recibidos, puede ser un número entero que puede alcanzar valores mayores de 100. Por otro lado la segunda variable al ser un porcentaje, y sólo tomará valores entre 0 y 1. Para realizar la normalización se dispone de varios scalers proporcionados en la biblioteca sklearn. Una vez realizados estos procesos, se podrán introducir los datos en los respectivos modelos para generar las predicciones. 8.3 Modelos utilizados En la aplicación se utilizan varios modelos de aprendizaje supervisado para intentar predecir los resultados de los partidos. Los usuarios podrán escoger el modelo que prefieran para predecir los partidos. Los modelos utilizados se pueden dividir principalmente en regresores y clasificadores. Ambos tipos de modelos tienen ventajas y desventajas en el proyecto por lo que se ha decidido usar modelos que abarquen ambos tipos. Los clasificadores son modelos, que asignan una clase o categoría a cada elemento del conjunto de datos. En la aplicación las categorías serían el número de goles marcados en el partido. Este tipo de modelo se adapta peor a las predicciones 88 que se quieren realizar, puesto que solo se tendrán en cuenta las clases que aparecen en el conjunto de entrenamiento. Es decir, si en el conjunto de entrenamiento no hay ningún partido en el que se hayan marcado 5 goles, no existirá la clase 5 goles en el modelo, y por tanto no se considerará 5 goles como una solución posible, aunque en la realidad sí lo sea. Por otro lado, los regresores pueden predecir valores numéricos continuos. Es decir, a diferencia del clasificador se pueden predecir valores que no aparecen en el conjunto de entrenamiento. La predicción en los regresores, es un número real, que tendrá que ser redondeado para obtener un valor discreto que represente el número de goles marcados. Esto puede perder información relevante puesto que un partido cuyos goles predecidos sean 2,4 y 2,6, dará como resultado 2 y 3, cuando lo más razonable sería predecir el empate. A simple vista los modelos de regresión podrían parecer una mejor opción. Sin embargo los goles marcados en un partido suelen estar en un rango muy acotado, de entre 0 a 7, y los resultados son relativamente repetitivos, por lo que usar también clasificadores que asignen el número de goles como categorías podría llegar a ser positivo para la aplicación. 8.3.1 Regresión lineal [18][19] La regresión lineal múltiple es un tipo de regresor que dado un conjunto de ejemplos encuentra una función de relación lineal entre cada una de las variables de entrada y la salida obtenida. Estas funciones se aplican y suman luego en los casos que se quieren predecir, de forma que se obtiene una función del tipo [ Y = X0 + X1*V1 + X2*V2 + E ], donde Y es el resultado que se quiere predecir, Xn es la relación lineal entre la variable de entrada n y el resultado, y E es el error de la variable dependiente que no se puede explicar por las variables independientes. Al usar este modelo hay que ser especialmente cuidadoso al elegir las variables de entrada, puesto que hay ciertas condiciones a la hora de poder usarlas, como que la relación entre las variables de entrada y resultado sea lineal. Para comprobar qué las variables cumplen en la medida de lo posible estas condiciones, se han representado en una gráfica en función del resultado, y observado si cumplen con las características necesarias. 89 Ilustración 42. Parte del grafo completo red neuronal En la ilustración 42 se pueden observar gráficos que muestran la evolución del error y la precisión a lo largo de las iteraciones. En la gráfica epoch_loss se puede observar una disminución del error a lo largo de las iteraciones. Esto es indicativo de que la red neuronal está aprendiendo de forma correcta. En la otra gráfica sin embargo se puede observar un aumento de la precisión únicamente en el conjunto de datos de entrenamiento y en las primeras iteraciones, lo cual puede estar indicando la presencia de sobreaprendizaje. Esto podría significar que el modelo está “memorizando” casos aislados en vez de aprender a predecir casos generales. Para mejorar este aspecto se han intentado varios métodos, entre los cuales está incluir capas dropout con una tasa de drop considerablemente alta, y aunque se ha conseguido mejorar un poco los resultados, desgraciadamente no se ha logrado solucionar el problema por completo como se puede observar en el resultado de la gráfica. 96 Ilustración 43. Gráficas epoch_loss y epoch_accuracy Por último, se pueden observar los diferentes histogramas que muestran la evolución de los pesos y los bias asignados a las neuronas de cada capa de la red neuronal. Se pondrá más atención sobre los histogramas de la derecha que son los correspondientes a los pesos. En la primera capa se puede ver una fila de montañas bastante estrecha. Esto se puede deber a que la primera capa tiene una sola neurona al ser la de entrada. En la siguiente se puede observar una fila de montañas mucho más ancha, lo cual puede ser indicativo de que la red neuronal está intentando identificar patrones nuevos. En la siguiente capa se puede ver que la fila de montañas se ha estrechado un poco. Esto se podría interpretar como que ha conseguido encontrar algunos patrones y está aprendiendo, aunque todavía tiene dificultades. En la siguiente capa se puede ver un cambio drástico. La gráfica pasa a formar tres filas de montañas más estrechas. Esto se interpreta como que la red ha conseguido aprender las características y patrones más generales de los datos, y ha pasado a intentar aprender las características más concretas. Esto nuevamente también puede ser indicativo de un sobreajuste. Finalmente en la última capa encontramos montañas menos organizadas que en el resto de capas. Esto significa que los pesos de cada conexión difieren entre sí. Esto se puede deber a las capas de dropout introducidas, que obligan a la red a aprender de nuevo algunos de los patrones, lo que estaría dando como resultado una distribución más variada de los pesos de las conexiones. Analizando estos histogramas pensamos que la red neuronal tiene un funcionamiento correcto y esperable. 97 98 Ilustración 44. Histogramas de pesos y bias de las conexiones neuronales 8.3.6 Poisson [26] Poisson es el último de los modelos usados para predecir datos, y es el único que no se basa en el análisis de datos. Poisson es un modelo estadístico en el que en una fórmula previamente definida se introducen como variables las estadísticas de los equipos, para obtener el resultado predecido. Para obtener las probabilidades de ganar para cada equipo, se utiliza Poisson para averiguar la probabilidad de que un equipo marque x goles en el partido, la fórmula es la siguiente: P(x) = (e^-λ*λ^x) / x ! donde x es el número de goles (se usa la fórmula desde 0 hasta 8 goles) y λson los goles esperados del equipo de casa o el de fuera de casa dependiendo de cual se está calculando. Para obtener los goles esperados (xG) se utilizan las variables “homeAttack”, “homeDefense”, “awayAttack” y “awayDefense”, generados a partir de varios de los datos de la BBDD. Se ha decidido usar también este modelo porque se piensa que está muy estudiado y es bastante conocido. Adicionalmente se quiere lograr que los usuarios puedan comparar un modelo estadístico con el resto de modelos basados en el análisis de datos e incluso usarlo si sienten que es más fiable o certero. Este modelo también genera las probabilidades que tiene cada equipo de ganar, perder, o empatar un partido, lo cual lo hace muy interesante de incluir, puesto que el resto de modelos no tienen esta característica. 8.3.7 Combinaciones entre modelos Por último se realizan combinaciones usando varios de los modelos anteriormente vistos. En concreto se han realizado tres combinaciones de diferente tipo y naturaleza. 99 [27] La primera de las combinaciones se realiza usando “VotingRegressor”. Este regresor consiste en entrenar varios modelos de regresión, y a la hora de predecir un resultado predecirlo con cada uno de los modelos para luego calcular la media de los resultados obtenidos y así obtener un resultado definitivo. En esta primera combinación se usan únicamente un Bosque aleatorio y la regresión lineal como los modelos del “VotingRegressor”. [28] Para la siguiente combinación se usa “VotingClassifier”. Este clasificador consiste en lo mismo que “VotingRegressor” pero usando clasificadores. Para esta combinación se utiliza un clasificador de Bosque aleatorio, el modelo de naive bayes gaussiano, y por último la regresión logística. En esta última combinación sin embargo se otorgan diferentes prioridades a cada uno de los clasificadores, siendo el de bosque aleatorio al que más peso le otorgamos. Esto causará que al calcular el promedio de los resultados, se le dé más peso a los resultados del bosque aleatorio frente a los de los otros dos modelos. [29] Finalmente la última combinación se trata de un “StackingClassifier”. Este método de combinar modelos de clasificación difiere bastante de los anteriores puesto que en este caso se calcularán los resultados de la predicción utilizando un modelo, y los resultados de la misma serán los nuevos datos de entrada para el siguiente modelo, y así sucesivamente hasta usar todos los modelos y obtener el resultado final. En este caso se ha utilizado nuevamente un clasificador de Bosque aleatorio, el modelo de naive bayes gaussiano, y la regresión logística. 8.4 Bibliotecas utilizadas Se han utilizado varias bibliotecas a la hora de preparar los datos, crear, entrenar y visualizar los modelos. ●Sklearn [30]: sklearn o scikit-learn es una biblioteca de software libre con gran cantidad de funcionalidades orientada a machine learning. Tiene gran cantidad de modelos de aprendizaje supervisado, aprendizaje no supervisado, además de herramientas para preparar datos de entrada, y muchas otras cosas. En el proyecto todos los modelos utilizados excepto la red neuronal y poisson, provienen de esta biblioteca. También se utiliza la biblioteca para separar los datos en train-test y finalmente para escalar o normalizar los datos se usan la gran cantidad de scalers que proporciona la biblioteca. 100 ●TensorFlow [31]: tensorflow es una biblioteca de software libre orientada a machine learning creada por Google. En la aplicación se utiliza esta biblioteca a la hora de crear la red neuronal. Esta biblioteca permite definir capas de diferentes tipos y de diferentes niveles para la red neuronal, y proporciona una gran variedad de herramientas para comprobar el funcionamiento de la red, e intentar mejorarla reduciendo el sobreajuste, modificando la tasa de aprendizaje, etc. usando tensorboard se podrá visualizar gráficamente la red neuronal entrenada, y se ponen a disposición diferentes tipos de gráficas que ayudarán a comprender cómo funciona la red neuronal entrenada. ●Graphviz [32]: graphviz es una biblioteca que proporciona herramientas para visualizar gráficos de diferentes tipos. En la aplicación se utilizama para visualizar algunos de los modelos entrenados, como por ejemplo los árboles del bosque aleatorio. ●Matplotlib [33]: matplotlib es una biblioteca orientada a la visualización de gráficos. Esta biblioteca se centra en la visualización de datos, pudiendo crear gráficos como histogramas, diagramas de dispersión, etc. de forma sencilla. En la aplicación se ha utilizado para crear gráficos y analizar los datos de entrada, y ver la relación de cada uno de ellos con la variable de salida. ●Xgboost [34]: xgboost es una biblioteca de software libre orientada a machine learning. Se usa uno de los clasificadores proporcionados por esta biblioteca como estimador final en el “StackingClassifier”. 8.5 Resultados de la predicción El resultado de las predicciones realizadas, será el resultado en goles que se espera que vaya a tener el partido. Para esto hay que realizar dos predicciones en cuestión, usando los mismos datos de entrada. Por un lado habrá que predecir los goles que marcará el equipo que juega en casa, y por otro lado cuantos marcará el equipo que juega fuera de casa. Por tanto cada modelo se debe entrenar dos veces, y realizar las predicciones dos veces para obtener el resultado final. Los resultados obtenidos se pueden medir con la biblioteca sklearn.metrics, aunque esto no resulta demasiado interesante en la aplicación. El funcionamiento de las quinielas otorga puntos por acertar el ganador de un partido, y puntos extra si aciertas la cantidad exacta de goles marcados. Esto quiere decir que el punto importante de la predicción es ver si se ha acertado quién va a ganar o perder, y no tanto si se ha acertado el número de goles 101 que marca alguno de los equipos. Para ello se ha creado un algoritmo que usando el conjunto de testeo compara los resultados reales, con los predecidos, para ver qué porcentaje de partidos se acierta, y obtener otros parámetros que también podrían llegar a resultar interesantes. Este proceso se realiza para todos los modelos, y esta información es totalmente accesible por los usuarios en la página de predictores de la aplicación web. Las métricas que se calculan y muestran son: ●Número y porcentaje de partidos acertados: Se da el número exacto, y el porcentaje que esto supone sobre el total de partidos predichos cuyo resultado se ha acertado. Es decir se muestra cuántas veces se acierta quién va a ganar, o si se va a quedar empate. ●Número y porcentaje de partidos acertados exactamente: En este caso, se da el número exacto y porcentaje de partidos cuyo resultado se ha acertado exactamente, es decir, que se han acertado los goles que se van a marcar en el partido. Ilustración 45. Visualización porcentajes de acierto ●Equipo mejor predicho: Se muestra el equipo cuyos partidos han obtenido los mejores resultados usando las dos métricas anteriores. ●Equipo peor predicho: Se muestra el equipo cuyos partidos han obtenido los peores resultados usando las dos métricas anteriores. Ilustración 46. Visualización de los equipos mejor y peor predichos 102 ●Estadísticas predicciones: Se muestra el porcentaje de predicciones que predicen que gana el equipo en casa, que gana el equipo de fuera, y que quedan empate Ilustración 47. Visualización de las estadísticas de predicción En general, observando los resultados de los modelos, se puede observar que los resultados rondan entre el 45% y el 55% de aciertos, y entre el 10% y 15% de aciertos exactos. Se ha intentado incrementar el ratio de aciertos mediante diferentes técnicas, como por ejemplo, probando diferentes valores en los parámetros, e intentando encontrar los óptimos con validación cruzada, realizar combinaciones entre modelos, excluir datos de entrada que no considerábamos útiles, etc. Sin embargo, no se ha conseguido superar la barrera del 60% de aciertos en ningún momento. Debido a que todos los modelos dan resultados similares, no se piensa que los modelos en sí sean la razón del problema. A la conclusión a la que se ha llegado es que esta limitación está causada por los datos de entrada. Por una parte, se usa sólo información de partidos desde 2018, lo cual apenas supone 5 años de datos. En caso de tener más partidos a disposición los modelos podrían aprender más patrones, y de forma más robusta. Por otro lado, se opina que hay muchos factores que están siendo omitidos y a los que no se tiene acceso que son muy importantes a la hora de predecir un partido de fútbol. Entre estos pueden estar la condición de los jugadores, cantidad de jugadores lesionados, el estado del estadio donde se juega, el árbitro del partido, la hora a la que se juega, la temperatura, etc. Otra cosa que se ha podido observar, es que los modelos aprenden muy bien los patrones de equipos que suelen ganar mucho, o perder mucho, puesto que en general acierta gran porcentaje de los partidos donde participan estos equipos. Por otro lado 103 tiene más problemas a la hora de predecir partidos donde participan equipos promedios, que no tienen una clara tendencia a ganar o perder. Por último un modelo que ha sorprendido ha sido el de Naive Bayes. En los resultados de este modelo se puede observar cómo se obtiene una de las mejores tasas de acierto a pesar de obtener una de las peores tasas de acierto exactas. Observando las predicciones se puede ver que acierta los resultados, pero exagerando los goles marcados en el proceso. Uno de los ejemplos es que acierta el resultado del partido del Real Sociedad contra el Real Madrid, pero da como resultado 7-2 cuando el resultado real fue de 2-0. Esto podría estar ocurriendo debido al principal problema de naive bayes, que consiste en la suposición de que todos los datos de entrada son independientes entre sí, y que siguen una distribución gaussiana para cada clase, lo cual no es necesariamente cierto en este caso. Dicho todo esto, se está satisfecho con los resultados de las predicciones. Uno de los objetivos de la aplicación era dar al usuario la libertad de poder elegir qué predicción quiere usar, y para ello se le proporciona toda la información necesaria para que pueda decidir qué modelo prefiere usar, y cuál se adapta mejor al partido que está intentando predecir. Esto consigue que el usuario confíe más en la aplicación y tenga más seguridad a la hora de usar los diferentes modelos y predicciones. 104 Capítulo 9 – Conclusiones y trabajo futuro 9.1 Conclusiones En este TFG se ha desarrollado una aplicación web destinada a mostrar información de los partidos de fútbol de las diferentes ligas, con la posibilidad de generar predicciones basadas en diferentes modelos estadísticos y modelos basados en análisis de datos (machine learning). La aplicación permite visualizar estadísticas detalladas de cada equipo y partido de forma que los usuarios puedan contrastar y comparar esta información. Uno de los objetivos principales era crear un sistema de quinielas, mediante el que los usuarios puedan intentar adivinar los resultados de futuros partidos, pudiendo competir entre amigos o con desconocidos de forma divertida y emocionante. También se han implementado otras funcionalidades que complementan las funcionalidades principales de la aplicación. Entre estas se puede destacar la implementación de favoritos, sistema mediante el cual los usuarios podrán añadir equipos a favoritos para poder visualizar información más detallada sobre el mismo, a la vez que podrá acceder de forma más fácil y rápidamente a la información de los mismos. El uso de técnicas machine learning para generar predicciones proporciona una experiencia más interactiva e interesante al usuario, mientras que permite a los desarrolladores probar y mejorar los modelos en un entorno práctico, pudiendo recibir feedback de los usuarios. Otro de los puntos fuertes de la aplicación es la existencia de varios modelos que los usuarios pueden elegir a la hora de realizar las predicciones. Se ha querido ser totalmente transparentes con la eficacia y el funcionamiento de los modelos en la aplicación, por lo que se pone a total disposición de los usuarios toda la información disponible en referencia a los mismos. Se ha diseñado la aplicación con el objetivo de crear una interfaz intuitiva y agradable para que los usuarios puedan usar y navegar por la aplicación de forma sencilla. La implementación de la aplicación permite una gran escalabilidad a la hora de añadir modelos de predicción. Con añadir el script del nuevo modelo, e insertar un ítem con el 105 actual no contenían dicho atributo que es necesario para que el usuario pueda filtrar partidos por jornadas). ○setUserPoints.js: es una script que revisa todas las quinielas que no han sido parseadas de todos los partidos ya jugados y calcula y actualiza los puntos que ha ganado cada usuario en todas las ligas. ●Creación de la navbar junto a sus funcionalidades como el cambio de temporada, liga y cambio entre vistas. ●Creación de la vista Inicio/Home y sus funcionalidades. ●Creación de la vista Fixtures/Partidos, cargando sus datos junto a las funcionalidades como los filtros por resultados, próximos partidos, jornadas y equipos. ●Creación de la vista Team Stats/Estadísticas y Table/Tabla, cargando sus datos. ●Creación de la vista Pools/Quinielas junto a todos sus derivados como crear quiniela, modificar quiniela, resultados de quiniela y clasificación mundial junto a todas las funcionalidades de las mismas como crear una quiniela, modificar una quiniela activa y borrar una quiniela activa. ●Creación de la vista administración y de todas las vistas derivadas de la lista de ligas como lo son ver/crear equipos, ver/modificar partidos y modificar liga junto a todas las funcionalidades de las mismas como crear, eliminar y modificar equipos; crear, eliminar y modificar liga; crear, eliminar y modificar partidos. ●Creación de todo el CSS y estilo de las vistas mencionadas anteriormente y creado también presets para botones que se utilizan en toda la página como lo puede ser el botón de ir hacia atrás, varios botones de acción primarios y secundarios. Además de esto, también se agregó el fondo de la página y el estilo de la navbar. ●Creados y modificados todos los model de la página, ficheros que contienen las consultas MySQL necesarias para el funcionamiento adecuado de la aplicación. 112 ●Creados y modificados todos los controller y los index de la página, ficheros que contienen toda la lógica de la aplicación y las rutas para navegar a través de la página respectivamente. 10.2 Alberto López ●Diseño de la base de la estructura de la base de datos empleando diagramas entidad-relación. ●Conexión con la API de Understat empleando la librería de python. ●Crear script que lee los partidos jugados de una temporada en Understat y actualiza la base de datos. ●Crear el script que lee los equipos de una liga y los guarda en la base de datos. ●Escribir código CSS para personalizar elementos de bootstrap con los colores elegidos para la aplicación. ●Escribir el script que actualiza la tabla de la liga basada en los datos de partidos obtenidos de Understat. ●Crear los scripts para poblar la base de datos con información real sobre las tres principales ligas europeas. ●Implementación del sistema que permite mostrar las vistas en distintos idiomas empleando el módulo Internationalization (I18n) de Nodejs. ●Traducción de las vistas al Castellano y Chino simplificado. ●Incluir un middleware que compruebe las preferencias de lenguaje de cada usuario y haga el setup del módulo I18n en consecuencia. ●Implementar las variables de sesión para guardar información necesaria para los usuarios conectados. ●Implementación de la lógica necesaria para que las sesiones se guarden en la base de datos y se puedan recuperar en caso de que el servidor de node se reinicie. ●Implementación de rutas de acceso a elementos estáticos. Aunque las vistas son dinámicas. Tenemos ciertos archivos como por ejemplo los scripts de JS que se 113 emplean en el lado cliente o las hojas de CSS que si son servidas de forma estática por el servidor. ●Refactoring de la aplicación. Modificar la estructura original con un único módulo para el modelo y otro para el controlador a una estructura, multimodulo donde cada funcionalidad tiene distintos modelos y controladores que es más mantenible y extensible. ●Implementación del sistema de encriptación de contraseñas. Empleando el módulo Bcrypt para calcular un hash de la contraseña de usuario que será posteriormente guardada en la base de datos. ●Modificar los métodos logout y borrado de cuenta para que destruya la sesión del usuario actual evitando que este siga logueado. ●Diseñar e implementar la página de login y signup. ●Añadir un middleware para el control de acceso de los usuarios registrados. ●Crear un middleware que lance un error 404 cuando ningúna ruta coincide con la petición del usuario. ●Diseño e implementación de las distintas vistas del perfil de usuarios. ●Escribir el middleware para control de acceso de los usuarios a funcionalidades de administración. ●Añadir los métodos del controlador y los modelos que se encargan de las estadísticas (el controlador stats.controller y los modelos match.model, league.model, team.model). ●Escribir el algoritmo para hacer la búsqueda por nombre de equipo en la vista de clasificación de la liga y en la vista de estadísticas relacionadas con la liga actual. ●Diseño e implementación de la página de mostrar próximos partidos y partidos anteriores. ●Mover los scripts de JS dentro del archivo HTML a sus propios archivos facilitando así la reutilización de código. 114 ●Implementación de un sistema de log para guardar información de cuando se han llevado a cabo las últimas predicciones. ●Escribir los archivos de configuración de Docker (Docker-compose y Dockerfile) junto con los scripts que los contenedores necesitan para poblar la base de datos, y el archivo de requisitos de python. ●Investigación sobre cómo debuggear aplicaciones NodeJS alojadas dentro de un controlador de Docker. ●Centralizar las configuraciones del servidor dentro de un módulo de configuración. ●Investigación sobre los modelos de análisis de datos, incluyendo las bibliotecas necesarias, y los parámetros importantes para cada uno de ellos. ●Pruebas y validación del funcionamiento de las distintas funcionalidades añadidas a la aplicación. 10.3 Felix Rodolfo ●Creación de la funcionalidad de añadir equipos a favoritos desde las tablas de estadísticas de los equipos, incluyendo los corazones y las animaciones de los mismos ●Creación del algoritmo para ordenar las tablas de estadísticas pulsando cualquiera de los campos que se quieran ordenar ●Creación del dropdown del usuario que aparece una vez el usuario ha iniciado sesión. ●Creación de la vista de favoritos, incluyendo todas las funcionalidades del mismo, que incluyen: ○Visualización de los equipos favoritos del usuario, junto con todas las estadísticas. ○Visualización de los partidos jugados y por jugar de cada equipo y sus resultados en un desplegable 115 ○Visualización de las estadísticas de los partidos del equipo, incluyendo datos como porcentaje de partidos ganados, número de partidos jugados, equipo contra el que mejor ha jugado… ○Filtros que permiten filtrar los partidos jugados por el equipo, incluyendo un filtro por fecha, equipo enfrentado, y resultado del partido. Las estadísticas de los partidos mencionados anteriormente se adaptarán a los filtros activos, de forma que si se selecciona como oponente el equipo X, el porcentaje de victorias y derrotas será solo contra ese equipo. ○Eliminación de equipos favoritos, pulsando sobre el corazón ○Todas las animaciones presentes en la vista que se han realizado con css. ●Creación de la vista de predictores, incluyendo todas las funcionalidades presentes en ella: ○Visualización del listado de los modelos de predicción existentes en la aplicación. ○Visualización de la predicción de los partidos futuros, y un conjunto de partidos de “test” que ya han sido jugados, junto con la predicción, el resultado real, e indicando si se ha acertado la predicción. ○Visualización de las estadísticas de las predicciones, y las diferentes métricas calculadas en el conjunto de test, como podría ser porcentaje de acierto, equipo mejor predicho, etc. ○Filtros para filtrar los partidos a predecir y los partidos del conjunto de test. Las estadísticas y métricas se actualizan respecto a los filtros utilizados de forma que solo se muestran las estadísticas calculadas con los partidos resultantes tras aplicar los filtros. ○Todas las animaciones presentes en la vista que se han realizado con css. ●Creación de usuarios administradores ●Creación de la vista de userList solo accesible por administradores que incluye las siguientes funcionalidades: 116 ○Visualización del listado de usuarios administradores y no administradores ○Posibilidad de eliminar usuarios no administradores, incluyendo un modal de aviso ○Posibilidad de convertir un usuario no administrador en administrador ○Todas las animaciones presentes en la vista que se han realizado con css. ●Creación de la vista de configuración del perfil, que incluye las siguientes funcionalidades: ○Establecer la visibilidad de la cuenta a visible/oculta para determinar si el resto de los usuarios pueden ver y acceder a los favoritos del usuario en cuestión ○Cambiar el nombre de usuario a uno que cumpla los requisitos ○Cambiar la contraseña, que cumpla los requisitos. ●Generación y selección de los datos de entrada necesarios para el entrenamiento de los modelos predictivos. Análisis de su viabilidad en los modelos de predicción utilizando gráficas que muestran la relación entre la variable de entrada y el resultado. ●Preparación de los datos para introducir en los modelos, separándolos en particiones, y reescalandolos o normalizandolos. ●Investigación sobre los modelos de análisis de datos, incluyendo las bibliotecas necesarias, y los parámetros importantes para cada uno de ellos. ●Creación de todos los modelos de predicción basados en análisis de datos, incluyendo una red neuronal, regresión lineal, regresión logística, modelo de naive bayes, máquina de vectores de soporte. ●Selección de los mejores valores de los parámetros de los modelos mediante prueba y error, y en ocasiones validación cruzada. ●Conectado los predictores con la aplicación principal, guardandolas en la base de datos 117 ●Añadido las predicciones a varias vistas, entre ellas fixtures, predictors, y quinielas ●Añadido dropdown para seleccionar uno de los modelos predictivos, y que todas las predicciones mostradas en la aplicación se correspondan con aquellas realizadas por el predictor correspondiente. ●Creación del estilo y CSS de todas las vistas mencionadas anteriormente ●Creación de todas las animaciones presentes en la aplicación mediante CSS. ●Creados y modificados todos los model de la página, ficheros que contienen las consultas MySQL necesarias para el funcionamiento adecuado de la aplicación. ●Creados y modificados todos los controller y los index de la página, ficheros que contienen toda la lógica de la aplicación y las rutas para navegar a través de la página respectivamente. ●Creación de la BBDD y modificada a lo largo de todo el trabajo para el cumplimiento de diferentes requisitos. 118 Bibliografía [1] Bwin (n.d.): Bwin. Disponible en: https://sports.bwin.es/es/sports/f%C3%BAtbol-4. [2] Understat (2017): Understat. Disponible en: https://understat.com/. [3] Premier League (2023): Premier League. Disponible en: https://www.premierleague.com/. [4] Expected Score, Expected Score. Disponible en: https://expectedscore.com/. [5] Bootstrap (2023): Bootstrap 4. Disponible: https://getbootstrap.com/docs/4.0/getting-started/introduction/. [6] jQuery Team (2023): JQuery Disponible en: https://api.jquery.com/. [7] Python Software Foundation License (2023): Python Disponible en: https://www.python.org/. [8] Oracle (2023): MySQL Disponible en: https://www.mysql.com/. [9] Joyent, Node.js Disponible en: https://nodejs.org/en/about. [10] Express (2017): Express. Fast, unopinionated, minimalist web framework for Node.js. Disponible en: https://expressjs.com/. [11] Fundación Mozilla (2023): JavaScript Disponible en: https://developer.mozilla.org/es/docs/Web/JavaScript. [12] Apache Friends (2023), XAMPP Disponible en: https://www.apachefriends.org/index.html. [13] Visual Studio Code (n.d.): Visual Studio Code. Disponible en: https://code.visualstudio.com/. [14] GitHub, Inc. (2023): GitHub. Disponible en: https://github.com/. [15] Docker, Inc (2023): Docker. Disponible en: https://www.docker.com/. [16] Douglas Wilson (2020): Morgan. Disponible en: https://www.npmjs.com/package/morgan. [17] Ranga Vadhineni (2022): ThunderClient. Disponible en: https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client. 119 [18] Scikit-learn (2023): LinearRegression. Disponible en: https://scikit-learn.org/stable/modules/generated/sklearn.linear_model.LinearRegressio n.html]. [19] Mirko Stojiljković (n.d.), Linear Regression in Python. Disponible en: https://realpython.com/linear-regression-in-python/. [20] Scikit-learn (2023): Random Forest Regressor. Disponible en: https://scikit-learn.org/stable/modules/generated/sklearn.ensemble.RandomForestRegr essor.html. [21] Nima Beheshti (2022): Random Forest Regression. Disponible en: https://towardsdatascience.com/random-forest-regression-5f605132d19d. [22] Scikit-learn (2023): Naive Bayes. Disponible en: https://scikit-learn.org/stable/modules/naive_bayes.html. [23] Scikit-learn (2023): Support Vector Machines. Disponible en: https://scikit-learn.org/stable/modules/svm.html. [24] Scikit-learn (2023): Support Vector Regression Tutorial for Machine Learning. Disponible en: https://www.analyticsvidhya.com/blog/2020/03/support-vector-regression-tutorial-formachine-learning/. [25] Google Brain Team (n.d.): A Neural Network Playground. Disponible en: https://playground.tensorflow.org/#activation=relu®ularization=L1&batchSize=10& dataset=circle®Dataset=reg-plane&learningRate=0.03®ularizationRate=0&nois e=15&networkShape=8,8,8&seed=0.94587&showTestData=false&discretize=false&p ercTrainData=80&x=true&y=true&xTimesY=true&xSquared=true&ySquared=true&cos X=false&sinX=true&cosY=false&sinY=true&collectStats=false&problem=regression&in itZero=false&hideText=false] [26] Matteo Ebejer (15-05-2023). Poisson Distribution in Sports Betting – A Step by Step Guide. Disponible en: https://www.thepunterspage.com/poisson-distribution-betting/. [27] Scikit-learn (2023): Voting Regressor. Disponible en: https://scikit-learn.org/stable/modules/generated/sklearn.ensemble.VotingRegressor.ht ml. 120 [28] Scikit-learn (2023): Voting Classifier. Disponible en: https://scikit-learn.org/stable/modules/generated/sklearn.ensemble.VotingClassifier.htm l. [29] Scikit-learn (2023): Stacking Classifier. Disponible en: https://scikit-learn.org/stable/modules/generated/sklearn.ensemble.StackingClassifier.ht ml. [30] Scikit-learn (2023): Scikit-learn Disponible en: https://scikit-learn.org/stable/. [31] Google Brain Team (n.d.): TensorFlow. Disponible en: https://www.tensorflow.org/. [32] AT&T Labs Research (2023): Graphviz. Disponible en: https://graphviz.org/. [33] The Matplotlib development team (2023): Matplotlib. Disponible en: https://matplotlib.org/. [34] xgboost Developers (2022): XGBoost Documentation. Disponible en: https://xgboost.readthedocs.io/en/stable/. [35] Oluwatosin, Haroon Shakirat. “Client-Server Model.” IOSR Journal of Computer Engineering 16 (2014): 57-71. [36] Codecademy Team (n.d.): MVC: Model, View, Controller. https://www.codecademy.com/article/mvc. [37] Refactoring Guru (n.d.): Chain of Responsibility. Disponible en: https://refactoring.guru/design-patterns/chain-of-responsibility. [38] Fernando Doglio (20 de Marzo de 2023): A guide to Node.js design patterns. Disponible en: https://blog.logrocket.com/guide-node-js-design-patterns/. [39] Gamma, E. Helm, R. Johnson, R. y Vlissides, J. (1994): Design Patterns: Elements of Reusable Object-Oriented Software. Addison-Wesley Professional. [40] Fowler, M. (2011): Patterns of Enterprise Application Architecture. Addison-Wesley Professional. 121 Entre las ventajas de los usuarios registrados se encuentra la posibilidad de apostar en quinielas. Cada semana podrá rellenar una quiniela por cada liga. Puede apoyarse en las predicciones del modelo que más le guste o hacerlo sin ninguna ayuda si así lo desea. Ilustración 60. Vista de hacer apuesta Una vez finalizada la jornada se le dará una serie de puntos dependiendo de su desempeño. Ilustración 61. Puntuación de una quiniela 128 En la vista de clasificación se puede ver un ranking con los mejores jugadores. Ilustración 62. Vista de clasificación de usuarios Otra funcionalidad exclusiva es la posibilidad de añadir equipos a la lista de favoritos. Haciendo clic sobre los corazones que tienen las vistas de estadísticas y clasificación de la liga el equipo seleccionado se añadirá a la lista de favoritos o se quitará si ya estaba en ella. Ilustración 63. Ver un equipo favorito 129 Una vez se tenga algún equipo añadido a favorito podrá accederse a la vista de favoritos para ver de forma rápida las estadísticas de este equipo así como partidos pasados y futuros. Incluye un filtro de partidos, para buscar partidos por fecha, resultado y equipo rival. Que es igual al de la Ilustración 52. Además de otro panel con información adicional. Ilustración 64. Información de equipos favoritos Por último, quedan las funcionalidades exclusivas para un usuario registrado con rol de administrador, para acceder a la vista de administrador, primero se debe registrar un usuario con dicho rol como por ejemplo el usuario Espeon, con contraseña 123456. Luego se debe hacer clic sobre el nombre del usuario y seleccionar la opción de Administración y aparecerá la vista de administración: 130 Ilustración 65. Acceso a la vista de administrador Ilustración 66. Vista de administración Una vez en esta vista se puede seleccionar si se desean modificar ligas o usuarios. Si se presiona el botón de usuarios, se pasará a la vista de administración de usuarios, donde se podrá ver todos los usuarios registrados en la web separados en dos categorías: usuarios normales y usuarios administradores. El usuario administrador podrá entonces eliminar a cualquier usuario de la aplicación, buscarlo mediante una barra de búsqueda o convertirlo/eliminarlo de administrador dependiendo en qué lista se encuentre el usuario buscado. 131 Ilustración 67. Vista de usuarios (Administración) Si en lugar de presionar el boton de usuarios en la vista de administrador, se presiona el botón de ligas, pasará entonces a la vista de administración de ligas, donde se podrá crear nuevas ligas y ver un listado de todas las ligas disponibles en la aplicación junto a una serie de botones para cada liga: ver equipos, partidos y modificar liga, esta ultima opcion solo aparece disponible para aquellas ligas que aun siga en curso y no hayan acabado (una liga se considera acabada cuando el administrador crea una nueva liga de una liga que ya esté en curso). 132 Ilustración 68. Vista de ligas (Administración) ●Creación de ligas: en la selección de ligas, únicamente se puede seleccionar la Premier League, La Liga y la Serie A, una vez creada una liga, la anterior se considerará terminada y la nueva no tendrá ningún equipo ni partido inicialmente. Ilustración 69. Vista de creación de liga (Administración) 133 ●Ver equipos: en esta vista aparecerá la lista de equipos de la liga seleccionada, si es una liga nueva aparecerá vacía y el administrador podrá ir agregando equipos de una lista predefinida que contiene a todos los equipos que han jugado la liga desde el 2018. Si el usuario agrega un equipo que no debió, podrá eliminarlo mediante el botón de eliminar Ilustración 70. Vista de ver equipos (Administración) 134 Ilustración 71. Agregar un equipo de la Serie A (Administración) ●Partidos: en esta vista aparecerá un listado de la totalidad de partidos de la liga seleccionada, además, tiene un botón de crear un partido nuevo y modificar uno de los partidos existentes. Ilustración 72. Vista de lista de partidos (Administración) 135 Ilustración 73. Vista de crear partido nuevo (Administración) Ilustración 74. Vista de modificar partido (Administración) 136 ●Modificar liga: el único valor que se puede modificar es la jornada actual, además de ello, se puede eliminar la liga seleccionada, eliminando todos los partidos relacionados con la liga junto con la relación de todos los equipos con dicha liga. Ilustración 75. Vista de modificar liga (Administración) Apéndice B - Código Se ha depositado el código en el siguiente enlace: https://drive.google.com/drive/folders/1D2BYDCuJ3g5DT2QMVZsnnsesWfYRqXhp?us p=sharing 137