Deporty, una aplicación de eventos deportivos

Universidad de Valladolid ESCUELA DE INGENIERÍA INFORMÁTICA DE VALLADOLID Grado en Ingeniería Informática de Software Deporty Alumno: Cristian Peñas Arias Tutor/a/es: César Llamas Bello Deporty, una aplicación de eventos deportivos Cristian Peñas Arias Índice general Lista de guras iii Lista de tablas v Resumen xii 1. Descripción del proyecto 3 1.1. Introducción................................... 3 1.2. Objetivosdeltrabajo.............................. 3 1.3. Entornodeaplicación.............................. 4 1.3.1. Introducción............................... 4 1.3.2. Aplicaciones similares . . . . . . . . . . . . . . . . . . . . . . . . . . 4 2. Metodología 7 2.1. Procesodedesarrollo.............................. 7 2.2. Denición de siglas y abreviaturas . . . . . . . . . . . . . . . . . . . . . . . 7 3. Planicación 9 3.1. Estimación del esfuerzo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 3.1.1. Análisis ................................. 9 3.1.2. Diseño.................................. 10 3.1.3. Implementación............................. 11 3.1.4. Pruebas ................................. 13 3.2. Planicación temporal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 3.3. Presupuestoeconómico............................. 13 3.3.1. Hardware y software . . . . . . . . . . . . . . . . . . . . . . . . . . 14 3.3.2. Recursos humanos . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 3.3.3. Presupuesto total del desarrollo . . . . . . . . . . . . . . . . . . . . 16 4. Análisis 19 4.1. Funcionalidades................................. 19 4.2. Requisitos.................................... 22 4.3. Diagramadeclases............................... 32 4.4. Diagramas de secuencia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 i Índice general 5. Diseño 41 5.1. Diseñodedatos................................. 41 5.2. Diagramasdeclase............................... 42 5.3. Herramientas utilizadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 5.3.1. Front-End................................ 45 5.3.2. Back-End ................................ 45 5.4. Arquitectura................................... 46 5.5. Diagramas de secuencia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 6. Implementación 61 6.1. Modelo...................................... 61 6.2. Vista....................................... 64 6.3. Controlador................................... 65 6.4. Servicios..................................... 67 7. Pruebas 69 7.1. AplicaciónWeb................................. 69 7.2. BotdeTelegram ................................ 76 8. Manual de Instalación 83 9. Manual de Usuario 87 9.1. ManualdeUsuario ............................... 87 9.2. Manual del Usuario Locutor . . . . . . . . . . . . . . . . . . . . . . . . . . 91 9.3. Manual de Administración . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 10.Conclusiones y trabajo futuro 109 ii Cristian Peñas Arias Índice de guras 4.1. Diagrama de casos de uso. . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 4.2. Diagrama de clases realizado en el análisis. . . . . . . . . . . . . . . . . . . 33 4.3. Diagrama de secuencia del CU identicarse. . . . . . . . . . . . . . . . . . 34 4.4. Diagrama de secuencia presenciar partido. . . . . . . . . . . . . . . . . . . 35 4.5. Diagrama de secuencia consultar datos de un partido. . . . . . . . . . . . . 35 4.6. Diagrama de secuencia consultar reglas de un deporte de un partido que se esteespectando.................................. 36 4.7. Diagrama de secuencia del CU introducir deporte. . . . . . . . . . . . . . . 36 4.8. Diagrama de secuencia del CU modicar deporte. . . . . . . . . . . . . . . 37 4.9. Diagrama de secuencia del CU eliminar deporte. . . . . . . . . . . . . . . . 38 4.10. Diagrama de secuencia crear partido. . . . . . . . . . . . . . . . . . . . . . 39 4.11. Diagrama de secuencia cambiar resultado de un partido. . . . . . . . . . . 39 4.12. Diagrama de secuencia introducir equipo a partido. . . . . . . . . . . . . . 40 4.13. Diagrama de secuencia eliminar partido. . . . . . . . . . . . . . . . . . . . 40 5.1. Modelo entidad-relación. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 5.2. Diagrama de clases realizado en el diseño. . . . . . . . . . . . . . . . . . . 43 5.3. Estructura del Stack de programación. . . . . . . . . . . . . . . . . . . . . 47 5.4. Diagrama de dependencias entre el front-end y el back-end. . . . . . . . . . 48 5.5. Diagrama de dependencias entre paquetes del front-end. . . . . . . . . . . . 48 5.6. Diagrama de dependencias entre paquetes del back-end. . . . . . . . . . . . 49 5.7. Diagrama de secuencia del CU Identicarse Front-end. . . . . . . . . . . . 51 5.8. Diagrama de secuencia del CU Identicarse Back-end. . . . . . . . . . . . . 52 5.9. Diagrama de secuencia del CU Crear deporte Front-end. . . . . . . . . . . 54 5.10. Diagrama de secuencia del CU Crear deporte Back-end. . . . . . . . . . . . 55 5.11. Diagrama de secuencia de la subida de una imagen de un deporte Front-end. 56 5.12. Diagrama de secuencia de la subida de una imagen de un deporte Back-end. 57 5.13. Diagrama de secuencia de la consulta de datos de un deporte Front-end. . . 58 5.14. Diagrama de secuencia de la consulta de datos de un deporte Back-end. . . 59 iii Índice de guras iv Cristian Peñas Arias Índice de cuadros 2.1. Tabla de siglas y abreviaturas. . . . . . . . . . . . . . . . . . . . . . . . . . 8 3.1. Estimación de requisitos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 3.2. Estimación de casos de Uso. . . . . . . . . . . . . . . . . . . . . . . . . . . 10 3.3. Diagramadeclases................................ 10 3.4. Diagrama de actividades. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 3.5. Estimación del diagrama entidad-relación. . . . . . . . . . . . . . . . . . . 10 3.6. Diagramadeclases................................ 11 3.7. Estimación del diagrama de dependencias. . . . . . . . . . . . . . . . . . . 11 3.8. Estimación de los diagramas de secuencia. . . . . . . . . . . . . . . . . . . 11 3.9. Estimación de la formación de equipos. . . . . . . . . . . . . . . . . . . . . 12 3.10. Estimación de la implementación del backend. . . . . . . . . . . . . . . . . 12 3.11. Estimación de la implementación del frontend. . . . . . . . . . . . . . . . . 12 3.12. Estimación de la implementación del bot de telegram. . . . . . . . . . . . . 12 3.13. Estimación de la batería de pruebas. . . . . . . . . . . . . . . . . . . . . . 13 4.1. Gestióndeacceso................................. 22 4.2. Altadeusuarios. ................................ 22 4.3. Modicación de usuarios. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 4.4. Altadepartidos. ................................ 23 4.5. Modicación de un partido. . . . . . . . . . . . . . . . . . . . . . . . . . . 23 4.6. Eliminación de un partido. . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 4.7. Consta de datos de un partido. . . . . . . . . . . . . . . . . . . . . . . . . 24 4.8. Altadeundeporte................................ 24 4.9. Modicación de un deporte. . . . . . . . . . . . . . . . . . . . . . . . . . . 24 4.10. Eliminación de un deporte. . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 4.11. Consulta de datos de un deporte. . . . . . . . . . . . . . . . . . . . . . . . 25 4.12. Añadir una categoría a un deporte. . . . . . . . . . . . . . . . . . . . . . . 25 4.13. Eliminación de una categoría de un deporte. . . . . . . . . . . . . . . . . . 25 4.14. Añadir una regla a un deporte. . . . . . . . . . . . . . . . . . . . . . . . . 25 4.15. Eliminación de una regla de un deporte. . . . . . . . . . . . . . . . . . . . 26 4.16.Altadeequipos.................................. 26 4.17. Modicación de equipos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 v Resumen El presente trabajo de n de grado consiste en el desarrollo del sistema Deporty. Este desarrollo pasa por varias fases, que son: Análisis, diseño, implementación y realización de pruebas. Además cubrirá el desarrollo de los tres componentes fundamentales del proyecto: el modelo de datos, el acceso de datos y la interfaz de usuario. La nalidad principal de Deporty es permitir presenciar y retransmitir información referente a partidos de un deporte. Es una aplicación que aporta ciertas herramientas a las personas que quieren conocer los diferentes partidos de cualquier deporte que se encuentra cerca de su ubicación. Se podrán ver tanto los partidos que se están jugando en ese momento como los que se jugarán en un futuro, además proporciona a los espectadores el resultado actual de dicho partido así como los cambios en el resultado en tiempo real. Para ello se utiliza un bot de telegram que facilita dicha labor, y una aplicación web para poder introducir nuevos deportes con mayor facilidad. El trabajo se ha implementado utilizando MEAN stack y el API de Telegram. Palabras clave: Aplicación web, análisis, diseño, implementación, deporte, Bot, MEAN Stack, Node.js, Express, MongoDB, Angular, Front-end, Back-end. Abstract The present end-of-degree project consists in the development of the Deporty system: Analysis, Design, Implementation and testing are the phases of this development. It will also cover the development of the three fundamental components of the project: the model of the data, the access to the data and the user interface. The main purpose of the Deporty is to allow the presence and the retransmission in relation to the matches of a sport. It is an application that provides certain tools to people who want to know the dierent parts of any sport that is close to their location. You can see the matches that are being played at that moment as it is played or you can see the matches that will be played in the future, as well as the spectators you can see the current result of that match as well as the changes in the result in real time. for it, a telegram bot is used to facilitate this task, and a web application to introduce new sports or teams easily. The work has been implemented using the MEAN stack and the Telegram API. Keywords: Web aplication, amalysis,design, implementation, Sport, Bot, MEAN Stack, Node.js, Express, MongoDB, Angular, Front-end, Back-end. Presentación Introducción El presente documento describe el trabajo realizado en el trabajo de n de grado preparado para la obtención del título de Grado en Ingenieria. consiste en el desarrollo del sistema Deporty: Análisis, Diseño, Implementación y realización de pruebas. Además cubrirá el desarrollo de los tres componentes fundamentales del proyecto: el modelo de datos, el acceso de datos y la interfaz de usuario. El trabajo se ha implementado utilizando MEAN stack y el API de Telegram. MEAN Stack se utilizó para el desarrollo de la aplicación web y el API de Telegram junto con el back-end de MEAN Stack se utilizó para la creación del bot de Telegram. Haciendo uso de este sistema se pueden presenciar partidos y retransmitirlos de diferentes tipos de deportes. Deporty, es una aplicación que aporta ciertas herramientas a las personas que quieren conocer los diferentes partidos de cualquier deporte cuya ubicación es cercana de tal forma que a parte de seguir el partido desde la aplicación se puede seguir en directo obteniendo la ubicación del partido. Se podrán ver tanto los partidos que se están jugando en ese momento, como los que se jugarán en un futuro, además proporciona a los espectadores la posibilidad de conocer el resultado actual de dicho partido así como los hacer una suscripción al partido y poder saber los cambios en el resultado en tiempo real. Para ello se utiliza un bot de telegram que facilita dicha labor, y una aplicación web para poder introducir nuevos datos como deportes, categorías, equipos y partidos con mayor facilidad. Los locutores serán los encargados de crear y actualizar estos partidos para que sus espectadores estén informados. También podrá cambiar el estado del partido en cualquier momento para poder informar a sus espectadores de los diferentes cambios. Los espectadores a parte de buscar partidos, puede conocer todos los detalles del partido como las reglas que tiene dicho deporte, las categorías existentes e incluso la ubicación para verlo en directo. Organización de la memoria La memoria está dividida en tres partes. La primera parte comprende los capítulos 1,2,3 y 4. Corresponde con la memoria del proyecto, se denirán objetivos, se valorará el estado del arte de la tecnología, se hará una 1 RESUMEN valoración de la metodología que se va a utilizar, de la planicación del proyecto así como de sus conclusiones nales con los resultados obtenidos. La segunda parte comprende los capítulos 5,6,7,8. Corresponde con toda la parte técnica del proyecto, es decir del análisis de la aplicación, de su posterior diseño, de su implementación y de las diferentes pruebas que se han hecho para comprobar que la aplicación funciona como se espera. La tercera y ultima parte comprende los capítulos 9 y 10. En este caso se trata de una parte en la que se explican a través de diferentes manuales la instalación para poder desarrollar el proyecto y para poder desplegarlo en caso de que haya cambios importantes, y del uso de la aplicación para los diferentes usuarios denidos en el análisis. 2 Cristian Peñas Arias Capítulo 1 Descripción del proyecto Se tratará brevemente de explicar cómo se organiza la Memoria del Trabajo Fin de Grado (TFG), del posible contenido de cada uno de los capítulos y secciones, así como de contenidos mínimos exigibles y algunas recomendaciones prácticas. 1.1. Introducción El motivo de la elección de este tema para el trabajo de n de grado es que siempre he sido deportista, y siempre me ha gustado la informática, entonces decidí elegir este trabajo para poder unir esos gustos en uno. Así este trabajo no solo representa mi formación durante los años sino que me representa a mi como persona y como profesional. El propósito de este trabajo es crear facilidades a aquellas personas que les gusta ver deportes y no necesitan instalar mas aplicaciones para ello ya que con telegram instalada sera suciente. La idea es combinar un bot de Telegram dentro del back-end de una aplicación web completa, de esta forma, Deporty dispondrá de bastantes facilidades para los locutores a la hora de crear partidos a través del servicio web. Por último, se dará una visión general de los contenidos de la Memoria. 1.2. Objetivos del trabajo El objetivo de este trabajo como se dijo anteriormente es proporcionar facilidades a personas que les gusta observar partidos, independientemente del deporte y de si son profesionales ya que los partidos que no son profesionales no se pueden espectar a través de los medios. De esta forma podrán saber donde encontrar estos partidos, cuando se jugarán y el resultado en el caso de que haya empezado. Deberá dar la opción a los espectadores de suscribirse a un partido y de esta forma cuando el locutor cambie cualquier dato del partido llegará una noticación a cada uno de estos espectadores con los cambios que ha habido en el partido. De esta forma se pueden saber todos los cambios de esos partidos a distancia. 3 Capítulo 1. Descripción del proyecto Debe proporcionar una aplicación web para facilitar a los locutores la creación de los partidos ya que a través del bot sería muy complicado y podría repercutir en el número de usuarios que lo utilizarían. Debe permitir a los locutores cambiar el estado y el resultado del partido que está transmitiendo en este caso a través del bot. Esta aplicación podrá ser usada por cualquier persona que tenga instalado la aplicación de Telegram en su teléfono móvil y en un principio para personas que sepan Español ya que es el único lenguaje dentro de la aplicación. Se explicará también el alcance de la aplicación, sus restricciones y limitaciones, así como las perspectivas del trabajo. 1.3. Entorno de aplicación 1.3.1. Introducción Un deporte es una actividad reglamentada, normalmente de carácter competitivo. La Real Academia Española dene un deporte como una actividad física ejercida como juego o competición, cuya práctica supone entrenamiento y sujeción a normas. Un bot es un programa informático que efectúa tareas repetitivas a través de Internet. Los usos mas comunes para utilizar un bot son para rastrear información en la web, dar respuestas rápidas, mantener conversaciones con los usuarios y simular tráco en Internet y redes sociales. La primera versión del la api del bot de Telegram fue anunciado en el año 2015. Se incorporó en la versión 3.0 de Telegram para móviles Android. En la segunda versión del bot cuyo año de lanzamiento fue 2016 mejoraron la interfaz e incluyeron un teclado dinámico. Tambien incluyeron geolocalización y la posibilidad de hacer llamadas de callback. Hay muchos lenguajes de programación para hacer un Bot de telegram como puede ser Java, Node.js, Python, c++. 1.3.2. Aplicaciones similares Este proyecto une los deporte con sus seguidores, de tal forma que cada vez que cambie el resultado, la aplicación avisará de los cambios a los espectadores del partido. En nuestro caso, el locutor es un usuario que puede registrarse. Para entender el entorno se analizarán algunos sistemas que hacen una función parecida a la de esta aplicación. 4 Cristian Peñas Arias 1.3. Entorno de aplicación Mis marcadores Mis Marcadores es una aplicación para móviles gratuita publicada en el año 2014, en la que podrás obtener los resultados deportivos de forma rápida y precisa. Tiene varios deportes y varias ligas y torneos de todo el mundo. Mis marcadores a parte de tener una sección resumen del partido en el que detallan los eventos del partido mas importantes, también tiene otras secciones como estadísticas del partido y alineaciones. En nuestro caso solo nos interesa la sección de resumen. Idioma: Castellano. Donde encontrarlo: https://play.google.com/store/apps/details?id=eu.livesport. MisMarcadores_com También tiene aplicación web y su dirección es:También tiene aplicación web y su dirección es: https://www.mismarcadores.com/ SofaScore SofaScore es otra aplicación para móviles gratuita publicada en el año 2015, en la que podrás obtener los resultados deportivos de forma rápida y precisa. Tiene varios deportes y varias ligas y torneos de todo el mundo. También tiene sección de estadísticas, para poder ver ciertos datos de interés para los seguidores de los partidos. Se pueden seguir partidos de tal forma que si cambia el resultado te envía una noti- cación. Idioma: Castellano. Donde encontrarlo: https://play.google.com/store/apps/details?id=com.sofascore. results También tiene aplicación webm y su dirección es: https://www.sofascore.com/es/ Cristian Peñas Arias 5 Capítulo 1. Descripción del proyecto 6 Cristian Peñas Arias Capítulo 2 Metodología En este capítulo se detallarán las cuestiones metodológicas, es decir, las metodologías y herramientas que se han utilizado para plantear el trabajo. 2.1. Proceso de desarrollo Se utilizará una metodología en cascada con varias etapas: Análisis de requisitos: Aclaración de las distintas funcionalidades de la aplicación. Diseño de software: Descomposición de los distintos elementos que deberá tener la aplicación y la comunicación entre ellos. Implementación: Implementación del diseño en código. Pruebas: Comprobación de las diferentes funcionalidades de la aplicación con usuarios reales. 2.2. Denición de siglas y abreviaturas En esta sección se muestra una tabla con el signicado de varias palabras que son siglas y con su signicado. MVC Patrón modelo-vista-controlador se fundamenta en la separación del código en tres capas diferentes. HTTP Significa Hypertext Transfer Protocol significa protocolo de transferencia de hipertexto y permite la comunicación de información en la WWW. WWW Significa World Wide Web y en español red informática mundial, es un sistema de distribución de documentos en hipertexto o hipermedia interconectados y accesibles a través de Internet. TFG Significa trabajo de fin de grado. NPM Significa The Node Package Manager, en español el gestor de paquetes de node. JS Significa Javascript, es un lenguaje de programación. CU Significa caso de uso, es una descripción de los pasos o actividades que de deberán realizar para llevar a cabo un proceso. 7 Capítulo 2. Metodología UML Significa Unified Modeling Language, en español lenguaje unificado de modelado y es el lenguaje de modelado de sistemas de software más conocido. API Significa Application Programming Interface, en español interfaz de Programación de Aplicaciones. El concepto hace referencia a los procesos, funciones y método que brinda una determinada biblioteca de programación. MEAN Significa MongoDB, Express, Angular y NodeJS, es una abreviatura para referirse al conjunto de estos lenguajes y librerías. POO Significa programación orientada a objetos. HTML Significa HyperText Markup Language, en español lenguaje de marcas de hipertexto y se utiliza para el desarrollo de páginas de Internet. CSS Significa Cascading Style Sheets, en español hojas de estilo en cascada y es un lenguaje que describe la presentación de los documentos estructurados en hojas de estilo. SSH Significa Secure Shell, es un protocolo que facilita la comunicación de forma segura entre dos sistemas. Cuadro 2.1: Tabla de siglas y abreviaturas. 8 Cristian Peñas Arias Capítulo 3 Planicación En este capítulo se aboradarán las cuestiones relativas a la planicación del trabajo. 3.1. Estimación del esfuerzo Para la planicación se realizará en primer lugar una estimación del coste en horas/- persona. Se hará dividiendo los diferentes procesos entre las diferentes fases, de esta forma, podremos hacer una estimación del tiempo que nos llevara cada etapa del desarrollo de la aplicación. 3.1.1. Análisis Actividad 1.1 Requisitos Actividades Realizar los requisitos funcionales, no funcionales y de información. Encargados Analista. Fecha de inicio 18/06/2018. Fecha de fin 20/06/2018. Esfuerzo 12 Horas/Persona. Cuadro 3.1: Estimación de requisitos. Actividad 1.2 Casos de Uso Actividades 1. Diagrama de casos de uso. 2.Especificación de casos de uso Encargados Analista. Fecha de inicio 1. 21/06/2018. 2. 21/06/2018 9 Capítulo 3. Planicación 3.3.3. Presupuesto total del desarrollo Este es el presupuesto teórico del proyecto deporty. Los unicos valores que pueden variar son los recursos humanos, en función de las horas que lleve realizar todas las funcionalidades. Coste / Unidad (e) Número de Coste estimado (e) unidades 1. Recursos humanos 2745 Salario de empleados 15 146 2745 2. Hardware 610 Ordenador de trabajo 15 1 610 3. Software 0 Herramientas de desarrollo 0 1 0e (Mean stack) Herramientas de diseño 0 1 0 (Astah licencia uva) Servidor base de datos 0 1 0 (MongoDB free version) Licencia google maps 0 1 0 (free version) 4. Otros materiales 150 Consumibles informático 30 (Wadgets) Materiales de oficina 20 Suministros generales 100 (luz,agua,teléfono,wifi) Presupuesto total 3505 Para poner desplegar la aplicación necesitaremos varias herramientas que tienen varios costes. Se tendrá en cuenta el presupuesto teniendo en cuenta los costes de mantenimiento de la aplicación y los servidores durante un año. 16 Cristian Peñas Arias 3.3. Presupuesto económico Coste / Unidad (e) Número de Coste estimado (e) unidades 1. Recursos humanos 1500 Salario de empleados 15 100 1500 2. Hardware 68 Servidor VPS 5 12 60 Servidor MongoDB 0 12 0 Dominio DNS 8 1 8 Almacenamiento repositorio 7 1 84 Presupuesto del despliegue en producción 1652 Este presupuesto puede aumentar si hay mucho tráco en los servidores y necesita aumentar la capacidad de estos. Total de coste del desarrollo del proyecto, junto con el despliegue y el mantenimiento del mismo seria de 5157 e . Cristian Peñas Arias 17 Capítulo 3. Planicación 18 Cristian Peñas Arias Capítulo 4 Análisis 4.1. Funcionalidades Las diferentes funcionalidades de la aplicación son las siguientes: Para un usuario no registrado(UNR): Identicarse (UNR-CU01) Registrarse (UNR-CU02) Espectar partido (UNR-CU03) Consultar datos del deporte (UNR-CU04) Consultar equipos que participan en un deporte (UNR-CU05) Consultar reglas de un deporte (UNR-CU06) Consultar datos de un partido cercano (UNR-CU07) Para un usuario registrado con rol de administrador(URA): Crear equipo (URA-CU01) Modicar equipo (URA-CU02) Crear deporte (URA-CU03) Modicar deporte (URA-CU04) Introducir regla a deporte (URA-CU05) Modicar regla (URA-CU06) Añadir categoría a deporte (URA-CU07) 19 Capítulo 4. Análisis Modicar categoría (URA-CU08) Eliminar deporte (URA-CU09) Eliminar equipo (URA-CU10) Eliminar regla (URA-CU11) Eliminar categoría (URA-CU12) Para un usuario registrado con rol de espectador(URE): Consultar lista de deportes (URE-CU01) Consultar lista de equipos (URE-CU02) Para un usuario registrado con rol de espectador(URL): Crear partido (URL-CU01) Cambiar estado de un partido (URL-CU02) Introducir resultado del partido (URL-CU03) Introducir equipo a partido (URL-CU04) Eliminar partido (URL-CU05) Modicar datos de un partido (URL-CU06) Eliminar equipo de un partido (URL-CU07) La Figura 4.1 representa estas funcionalidades en un diagrama. 20 Cristian Peñas Arias 4.1. Funcionalidades Figura 4.1: Diagrama de casos de uso. Cristian Peñas Arias 21 Capítulo 4. Análisis 4.2. Requisitos En este apartado se describen los requisitos del sistema que se va a desarrollar: requisitos funcionales, de interfaz de usuario, de información, etc. Asimismo, se especicará si la aplicación debe ser o no multiplataforma (o multilingüe), si se establecen restricciones de uso o de otro tipo (por ejemplo heredadas del entorno organizativo en el que se integrará), etc.Para una mejor descripción de los requisitos, se usan los llamados casos de uso, basados en la identicación de actores y tareas. Funcionales Los Requisitos funcionales describen el funcionamiento del sistema y los servicios que han de proporcionar. En este apartado, se denirán este tipo de requisitos indicando las diferentes situaciones que el sistema deberá permitir. Las siguientes tablas denen los requisitos funcionales básicos que tiene que cumplir la aplicación. RF-01 Gestión de acceso Descripción El sistema deberá gestionar el acceso al sistema teniendo en cuenta la seguridad de los usuarios y del propio sistema. Estabilidad Alta. Comentarios La gestión del acceso al sistema se controla mediante cuentas de usuario con su respectivo correo electrónico y su contraseña y del control de sesiones. Cuadro 4.1: Gestión de acceso. RF-02 Alta de usuarios Descripción El sistema deberá permitir la creación de nuevos usuarios. Estabilidad Alta. Comentarios Una persona sin usuario podrá registrarse en el sistema teniendo que introducir sus datos como correo electrónico y su contraseña. Cuadro 4.2: Alta de usuarios. RF-03 Modificación de los datos de usuarios Descripción El sistema deberá permitir modificar los datos de usuario. Estabilidad Alta. 22 Cristian Peñas Arias 4.2. Requisitos Comentarios Una persona solo podrá modificar los datos de su usuario. Cuadro 4.3: Modificación de usuarios. RF-04 Alta de partidos Descripción El sistema deberá permitir la creación de partidos a los usuarios con el rol locutor. Estabilidad Alta. Comentarios Para dar de alta un partido se necesitan diferentes datos como la ubicación, el día y la hora en el que empieza y el resultado. Cuadro 4.4: Alta de partidos. RF-05 Modificación de un partido Descripción El sistema deberá permitir la modificación de partidos activos a los usuarios que estén transmitiendo el partido con el rol locutor. Estabilidad Alta. Comentarios Para modificar un partido se necesitan diferentes datos como la ubicación, el día y la hora en el que empieza y el resultado. Cuadro 4.5: Modificación de un partido. RF-06 Eliminación de un partido Descripción El sistema deberá permitir la eliminación de partidos a usuarios que estén transmitiendo el partido con el rol locutor. Estabilidad Alta. Comentarios Al eliminar el partido se eliminarán también las participaciones de los equipos y los espectadores. Cuadro 4.6: Eliminación de un partido. RF-06 Consultar datos de un partido Descripción El sistema deberá permitir consultar la información de un partido a cualquier usuario. Estabilidad Alta. Cristian Peñas Arias 23 Capítulo 4. Análisis Comentarios Ninguno. Cuadro 4.7: Consta de datos de un partido. RF-07 Alta de un deporte Descripción El sistema deberá permitir la creación de un deporte si el usuario tiene el rol de administrador. Estabilidad Alta. Comentarios Para dar de alta un deporte se necesitaran datos como nombre, numero máximo de equipos y descripción. Cuadro 4.8: Alta de un deporte. RF-08 Modificación de un deporte Descripción El sistema deberá permitir la modificación de un deporte si el usuario tiene el rol de administrador. Estabilidad Alta. Comentarios Para modificar un deporte se necesitaran datos como nombre, numero máximo de equipos y descripción. Cuadro 4.9: Modificación de un deporte. RF-09 Eliminación de un deporte Descripción El sistema deberá permitir la eliminación de un deporte si el usuario tiene el rol de administrador. Estabilidad Alta. Comentarios Se borrarán también las reglas, las categorías y los partidos. Cuadro 4.10: Eliminación de un deporte. RF-10 Consulta de datos de un deporte Descripción El sistema deberá permitir consultar los datos de cualquier deporte a cualquier usuario. Estabilidad Alta. Comentarios Ninguno. 24 Cristian Peñas Arias 4.2. Requisitos Cuadro 4.11: Consulta de datos de un deporte. RF-11 Añadir una categoría a un deporte Descripción El sistema deberá permitir añadir categorías de los diferentes deportes si el usuario tiene el rol de administrador. Estabilidad Alta. Comentarios Una categoría de un deporte describe las diferentes clasificaciones en las que se puede dividir un deporte. Cuadro 4.12: Añadir una categoría a un deporte. RF-11 Eliminación de una categoría de un deporte Descripción El sistema deberá permitir eliminar categorías de los diferentes deportes si el usuario tiene el rol de administrador. Estabilidad Alta. Comentarios Ninguno. Cuadro 4.13: Eliminación de una categoría de un deporte. RF-12 Añadir una reglas a un deporte Descripción El sistema deberá permitir añadir reglas a cualquier deporte si el usuario tiene el rol de administrador. Estabilidad Alta. Comentarios Una regla de un deporte describe que tipo de acciones están permitidas y cuales no, así como más tipos de información. Cuadro 4.14: Añadir una regla a un deporte. RF-13 Eliminación de una reglas de un deporte Descripción El sistema deberá permitir eliminar una regla de cualquier deporte si el usuario tiene el rol de administrador. Estabilidad Alta. Comentarios Ninguno Cristian Peñas Arias 25 Capítulo 4. Análisis IRQ-04 Equipo Descripción El sistema deberá almacenar, gestionar la información de los equipos dentro del sistema, incluidos los partidos en los que participan. Estabilidad Alta. Datos Nombre, tag o siglas, imagen y descripción. Cuadro 4.37: Equipo. IRQ-05 Estado del partido Descripción El sistema deberá almacenar, gestionar la información del estado de los partidos dentro del sistema. Estabilidad Alta. Datos Los diferentes estados son: Sin empezar, en curso, anulado y terminado. Cuadro 4.38: Estado del partido. IRQ-06 Deporte Descripción El sistema deberá almacenar, gestionar la información del estado de los deportes dentro del sistema, incluidas sus reglas y sus diferentes categorías. Estabilidad Alta. Datos Nombre, número máximo de equipos, imagen y descripción. Cuadro 4.39: Deporte. 4.3. Diagrama de clases En este apartado se describen las clases que se deberán utilizar independientemente del lenguaje que utilizaremos en la implementación. En la siguiente gura, podemos ver el diagrama de clases realizado en el análisis: 32 Cristian Peñas Arias 4.3. Diagrama de clases Figura 4.2: Diagrama de clases realizado en el análisis. User representa los datos de acceso al sistema de cada usuario. Un usuario podrá obtener estas credenciales de forma única una vez registrado en el sistema. Game representa es la mas importante ya que en esta aplicación se basa en partidos, esta relacionada con el usuario ya que hay un usuario que se encarga de transmitir el partido que sera el broadcaster y ademas se vuelve a relacionar con el para indicar que un partido puede tener cero o muchos espectadores. También se relaciona con la categoría ya que un partido es de una categoría especíca. Sport también es una de las mas importantes ya que cada partido tiene un deporte asociado a través de su categoría. Representa los datos de un deporte en el sistema así como el número máximo de equipos que permite ese partido. Category representa la categoría de un deporte y si es profesional o no. Esta relacionado con Sport dado que una categoría siempre pertenece a un deporte. Rule representa una regla especíca de un deporte, por eso esta relacionada con un deporte y además, un deporte puede tener varias reglas. Team representa los datos de un equipo en el sistema. Esta relacionado con un deporte, para que esos equipos solo puedan participar en partidos que tengan una categoría para ese deporte. Cristian Peñas Arias 33 Capítulo 4. Análisis StatusGame representa el estado en el que esta un partido en ese momento. RolUsuario representa el rol de un usuario dentro de la aplicación. Cada tipo de usuario puede acceder a diferentes funcionalidades dependiendo del valor de esta entidad. Date representa el día y la hora. Location representa la latitud y la longitud, es decir coordenadas. 4.4. Diagramas de secuencia En este apartado se describen las secuencias de algunos de los casos de uso: Cualquier usuario Como indica la Figura 4.3 cualquier usuario puede identicarse y hasta que no introduzca un email y una contraseña que correspondan con un usuario no podrán realizar mas acciones. Figura 4.3: Diagrama de secuencia del CU identificarse. 34 Cristian Peñas Arias 4.4. Diagramas de secuencia Cualquier usuario puede presenciar un partido. Figura 4.4: Diagrama de secuencia presenciar partido. Cualquier usuario puede consultar los datos del partido que esta presenciando. Antes el usuario debe de haber presenciado un partido. Figura 4.5: Diagrama de secuencia consultar datos de un partido. Cualquier usuario puede consultar las reglas de un deporte de un partido que estén presenciando. Antes el usuario debe de haber presenciado un partido. Cristian Peñas Arias 35 Capítulo 4. Análisis Figura 4.6: Diagrama de secuencia consultar reglas de un deporte de un partido que se este espectando. Usuario administrador Es necesario haberse registrado en el sistema y ademas tener el rol de administrador para poder introducir el deporte. Figura 4.7: Diagrama de secuencia del CU introducir deporte. Es necesario haberse registrado en el sistema y ademas tener el rol de administrador 36 Cristian Peñas Arias 4.4. Diagramas de secuencia para poder modicar el deporte. Figura 4.8: Diagrama de secuencia del CU modificar deporte. Es necesario haberse registrado en el sistema y ademas tener el rol de administrador para poder eliminar el deporte. Cuando se elimina el deporte primero se deben eliminar las categorías y las reglas asociadas a ese deporte para no dejar inconsistencia de datos. Cristian Peñas Arias 37 Capítulo 4. Análisis Figura 4.9: Diagrama de secuencia del CU eliminar deporte. Usuario Locutor Es necesario haberse registrado en el sistema y tener el rol locutor para poder crear un partido. 38 Cristian Peñas Arias 4.4. Diagramas de secuencia Figura 4.10: Diagrama de secuencia crear partido. Para cambiar el resultado de un partido es necesario tener un partido activo. Figura 4.11: Diagrama de secuencia cambiar resultado de un partido. Para introducir un equipo a un partido es necesario tener un partido activo. Cristian Peñas Arias 39 Capítulo 4. Análisis Figura 4.12: Diagrama de secuencia introducir equipo a partido. Para eliminar un partido es necesario tener un partido activo ya que será este el que borraremos. Figura 4.13: Diagrama de secuencia eliminar partido. 40 Cristian Peñas Arias Capítulo 5 Diseño 5.1. Diseño de datos En primer lugar podemos ver el modelo de datos que se usará para diseñar la base de datos como podemos ver en la Figura 5.1 User representa los datos de acceso al sistema de cada usuario, un usuario podrá obtener estas credenciales de forma única una vez registrado en el sistema, con los cuales podrá abrir sesión en la aplicación web de Deporty y navegar en el sistema. IdAuthorized representa los datos que asocian a un usuario de la aplicación web con el usuario de Telegram y ademas es el encargado de permitir que el bot pueda mandar mensajes desde la aplicación web si el usuario lo ha autorizado. Se relaciona con los datos del usuario y solo habrá un registro de IdAuthorized por cada usuario como mucho. Game representa es la mas importante ya que en esta aplicación se basa en partidos, esta relacionada con el usuario ya que hay un usuario que se encarga de transmitir el partido que sera el broadcaster . También se relaciona con la categoría ya que un partido es de una categoría especíca. Spectacle representa la expectación por parte de un usuario de Telegram a través de su id con un partido para poder ver los cambios desde Telegram cuando los datos del partido cambien. Sport también es una de las mas importantes ya que cada partido tiene un deporte asociado a través de su categoría. Representa los datos de un deporte en el sistema así como el número máximo de equipos que permite ese partido. Category representa la categoría de un deporte y si es profesional o no. Esta relacionado con Sport dado que una categoría siempre pertenece a un deporte. Rule representa una regla especíca de un deporte, por eso esta relacionada con un deporte. Team representa los datos de un equipo en el sistema. Esta relacionado con un deporte, para que esos equipos solo puedan participar en partidos que tengan una categoría para ese deporte. Participation representa una participación de un equipo a un partido, incluyendo el número de la participación del equipo para que en caso de ser importante se pueda conocer 41 Capítulo 5. Diseño Figura 5.4: Diagrama de dependencias entre el front-end y el back-end. Desde el paquete services del back-end se comunica con el front-end a traves del paquete routes. El paquete service tiene clases que su única función es conocer la ruta del back-end a la que quiere conectarse y lógicamente hacer esta conexión. El paquete routes del back-end tiene clases que lo único que hacen es abrir una ruta de conexión y enviar esa petición al controlador para que se pueda procesar dicha petición. Figura 5.5: Diagrama de dependencias entre paquetes del front-end. Como podemos ver en la gura 5.5, el front-end tiene varios paquetes, pero solo uno 48 Cristian Peñas Arias 5.4. Arquitectura de ellos usa el resto que es el paquete de componentes. En este paquete estarán los controladores de los CU, utilizará los modelos que necesiten para ello y se encargarán también de actualizar la vista de forma dinámica cuando llegue la respuesta del back-end a través del paquete de servicios. Podemos ver como en el front-end están las capas de presentación que son las vistas que hay en el paquete views, y la capa de negocio, que tiene el modelo y los controladores. La capa de servicios es una capa separada de las otras mencionadas anteriormente. Figura 5.6: Diagrama de dependencias entre paquetes del back-end. Como podemos ver en la gura 5.6, el back-end esta compuesto por varios paquetes, como ya se explicó anteriormente el paquete de rutas es el encargado de enviar las peticiones recibidas a los controladores y ademas puede utilizar middlewares en el proceso. Los controladores en este caso son los gestores encargados de obtener los datos a partir de las entities de la capa Models y si es necesario hacer operaciones con ellos y devolver una respuesta para que el front-end pueda conocer si ha habido un error, si se ha producido todo correctamente o para recibir los datos que se precisaban en la petición. El back-end exceptuando los middlewares y el paquete de servicios se correspondería con la capa de acceso a datos. Con esta arquitectura hemos conseguido separar la aplicación en varias capas cuya responsabilidad está bien denida. La capa de presentación será la encargada de recibir las peticiones del usuario así como mostrar los datos para que pueda verlos. La capa de negocio será la encarga de presentar la información a las vista, interactuar con el back-end de la aplicación mediante servicios y capturar eventos que puedan ser gestionados dentro del ujo de la aplicación sin necesidad de contactar con el back-end. Cristian Peñas Arias 49 Capítulo 5. Diseño 5.5. Diagramas de secuencia En esta sección se mostrarán algunos de los diagramas de secuencia de algunos casos de uso. Se mostrará en caso de ser necesario el diagrama del CU primero el front-end y despues se mostrará el diagrama de seciencia del back-end. CU Identicarse 50 Cristian Peñas Arias 5.5. Diagramas de secuencia Figura 5.7: Diagrama de secuencia del CU Identificarse Front-end. Cristian Peñas Arias 51 Capítulo 5. Diseño Figura 5.8: Diagrama de secuencia del CU Identificarse Back-end. 52 Cristian Peñas Arias 5.5. Diagramas de secuencia El localstorage utilizado en el front-end se utiliza para guardar objetos como en una sesión del usuario aunque, los objetos a diferencia de los objetos de sesión, no tienen fecha de espiración, ya que los datos persisten solo en la ventana en la que se creó y no se eliminan cuando se cierra dicha sesión. En el back-end se utilizan diferentes frameworks y librerias como bcrypt, que se encarga tanto de cifrar una contraseña como de compararla con un string para comprobar que son la misma. JWT se encarga de crear el token al iniciar sesión. Este token sirve para convertir los datos en este caso del usuario en una cadena de caracteres. La utilizaremos para que cada vez que se haga una acción se necesitará de este token para autenticar el usuario y permitirle o denegarle la acción. Cristian Peñas Arias 53 Capítulo 5. Diseño CU Crear deporte Figura 5.9: Diagrama de secuencia del CU Crear deporte Front-end. Como vemos en el front-end es practicamente igual que identicarse, solo que no usa las bibliotecas que este usaba. De la vista vamos al componente que se encarga de realizar las operaciones, en este caso necesitamos el token para que la acción pueda ser realizada y la cogemos del localStorage previamente almacenado en el inicio de sesión. Despues contactaremos con el back-end mediante el servicio en este caso Sport.service . El router sirve para poder cambiar la vista a partir del url que le demos, en nuestro caso iremos a editar deporte. 54 Cristian Peñas Arias 5.5. Diagramas de secuencia Figura 5.10: Diagrama de secuencia del CU Crear deporte Back-end. En el back-end tambien es parecido ya que siempre es igual el ujo. De la ruta del reporte que es donde llega nuestra petición del front-end pasaremos al controlador en este caso del deporte. Este a partir de la request obtendrá los datos necesarios para crear el deporte. Una vez creado se enviará una respuesta al front en caso de que no haya deporte se devolverá un error y sino se devolverá el deporte que se ha guardado. En caso de que haya que subir una imagen esta se subirá mediante otro servicio y otro caso de uso que es subir imagen. Cristian Peñas Arias 55 Capítulo 5. Diseño Subir imagen de un deporte Figura 5.11: Diagrama de secuencia de la subida de una imagen de un deporte Front-end. En este caso el front-end tiene que enviar el archivo al back-end mediante una petición XMLHttp. Primero tenemos que crear un formulario e introducir el archivo así como su nombre de archivo 56 Cristian Peñas Arias 5.5. Diagramas de secuencia Figura 5.12: Diagrama de secuencia de la subida de una imagen de un deporte Back-end. En el back-end como es habitual, primero llega a ruta del deporte que es donde recibe dicha petición, este utiliza el método del controlador que sea necesario. El controlador obtiene los parámetros de la petición en este caso solo obtendrá el chero y el identicador del deporte. Comprueba que es una extensión valida antes de asignar esa imagen al deporte. Para nalizar devuelve una respuesta dependiendo del resultado. Cristian Peñas Arias 57 Capítulo 6. Implementación Es una clase que simplemente tiene un esquema que proporciona mongoose, en el que le introduces las diferentes variables y en algunos casos un index . El index en este caso es para que al ordenar esa variable location, se ordene teniendo en cuenta los dos parámetros. Estos index a parte de introducirlos en el código, se pueden denir en el servido de la base de datos de MongoDB, de esta forma aunque se te olvide ponerlo en los esquemas estos index seguirán existiendo. 6.2. Vista La vista, en este caso es una interfaz web que se utiliza desde un navegador. La tecnología empleada para su implementación es Angular. Se han utiliado los lenguajes HTML para la creación de las páginas, CSS para denir los diferentes estilos de las diferentes páginas y JavaScript. Ademas de estos lenguajes de programación se utilizaron varios frameworks, como Angular para la creación de las páginas y Bootstrap que junto a CSS se utilizarán para denir los estilos de página. <div class="registrar" *ngIf="registro"> <h1>Registrate </h1> <div *ngIf="alertRegister"> <div class="errorRegister alert alert -info"> {{alertRegister}} </div> </div> <form \#registerForm="ngForm" (submit)="onSubmitRegister ()" class="formIdentificar"> <p> <label >Nombre:</label > <input type="text" \#name="ngModel" name="name" [( ngModel)]="user_register.name" class="form-control " required/> </p> <span *ngIf="!name.valid && name.touched"> El nombre es obligatorio </span> <p> <label >Correo electr\'o nico:</label > <input type="email" \#email="ngModel" name="email" [( ngModel)]="user_register.email" class="formcontrol" required/> <span *ngIf="!email.valid && email.touched"> El email es obligatorio 64 Cristian Peñas Arias 6.3. Controlador </span> </p> <p> <label >Contrase\~n a:</label > <input type="password" \#password="ngModel" name=" password" [(ngModel)]="user_register.password" class="form -control" required/> <span *ngIf="!password.valid && password.touched"> La contrase\~n a es obligatorio </span> </p> <input type="submit" value="Registrarse" class="btn btn -primary"/> </form> <span class="changeView btn btn-warning" (click)=" changeViewToLogin()"> Identificarse </span> </div> Este es un ejemplo del div de registrarse en la aplicación, como podemos observar hay código que no se corresponde con código típico HTML, como "*ngIf" y "ngModel" , este código lo proporciona angular y se utiliza en el primer caso para poner una condición en la que se muestre esa parte de la página, en el segundo caso es para convertir un formulario en un modelo de nuestro componente, para denir que propiedades del formulario se asocian a que atributos de nuestro modelo. 6.3. Controlador El controlador esta compuesto por un conjunto de clases que se encargan de comunicar el modelo que está en el back-end, para poder obtener, insertar o modicar datos y ademas es responsable de enviar estos datos a la vista y mantenerla actualizada. En la capa controlador hay varias clases, los componentes o controladores que se encargan de obtener los datos que le envía el usuario a través de la vista y ademas se encargará de contactar con los servicios para poder comunicarse con el back-end y poder recibir los datos necesarios para llevar a cabo la acción deseada. El componente se declara de la siguiente manera: @Component({ Cristian Peñas Arias 65 Capítulo 6. Implementación selector: 'user -edit', templateUrl: '../views/user-edit.html ', providers: [UserService] }) El atributo selector se utiliza para denir el nombre del componente, de esta forma si utilizamos el siguiente código : <user-edit > </user -edit> en cualquier página HTML se importará el componente, es decir se verá en esa página HTML en la que se ha importado la página user-edit.html y se cargará su respectiva clase del componente. Este componente tiene ademas una clase. Esta clase tiene sus atributos y un constructor donde se inicializarán si es necesario dichos atributos. También tienen métodos que se corresponde generalmente con acciones de la vista. Un ejemplo de clase puede ser este: export class UserEditComponent implements OnInit{ public titulo: string; public user: User; public telegramData: TelegramData; public identity; public tokenGenerated; public token; public alertMessage; public url:string; public filesToUpload: Array <File >; constructor( private _userService:UserService ){ this.titulo='Actualizar mis datos '; this.tokenGenerated=false; this.identity = this._userService.getIdentity(); this.token = this._userService.getToken(); this.user = this.identity; this.telegramData= new TelegramData('',null ,'',null,' null '); this.url = GLOBAL.url; } 66 Cristian Peñas Arias 6.4. Servicios La variable _userService es el que se encargará de comunicarse con el back-end a través de sus métodos. Como por ejemplo: this._userService.updateUser(this.user).subscribe( response=>{ //Codigo } }, error=>{ //Codigo } ); Para obtener la respuesta del back-end es necesario que se subscriba, de tal forma que cuando envie una respuesta le mandará una función de callback con los datos obtenido o si ha habido un error. 6.4. Servicios La capa de servicios se encargará de comunicar el back-end entre otras cosas. Un servicio se crea de la siguiente forma: @Injectable() export class GameService{ public url:string; constructor(private _http: Http){ this.url = GLOBAL.url; } Necesita una url para comunicarse con el back-end, la parte de la url que no siempre es la misma para todas las peticiones la obtiene de una clase llamada GLOBAL . Para comunicarse con un servicio tiene que crear una petición HTTP como si de una página web se tratase, de tal forma que tiene que crear las cabeceras y las opciones de la petición. Una vez hecho con el método HTTP necesario (POST,GET,PUT,DELETE) enviará la petición al back-end como podemos ver en el siguiente código. getGames(token ,id){ let headers = new Headers({ 'Content -Type ':'application/json ', 'Authorization ':token Cristian Peñas Arias 67 Capítulo 6. Implementación }); let options = new RequestOptions({headers:headers}); return this._http.get(this.url+'partido -usuario/'+id, options).map(res=>res.json()); } 68 Cristian Peñas Arias Capítulo 7 Pruebas En este capítulo se mostrarán todas las pruebas realizadas como comprobación de la aplicación va correctamente. Estas pruebas son de caja negra, es decir a través de la página depory.com a través de la aplicación web y del Bot. Estas pruebas consisten en elegir ciertos casos para probar la aplicación deniendo el resultado que se espera y compararlo con el resultado que se obtiene. 7.1. Aplicación Web Registro de la aplicación Prueba realizada. Resultado esperado. Resultado obtenido. Válido. P1.1 Registro con todos los datos. El usuario se habrá creado. El usuario se ha creado. X P1.2 Registro sin un dato. El usuario no puede darle al botón de registrarse. El usuario no puede darle al botón de registrarse. X P1.3 Registro con un formato de email incorrecto. El sistema mostrará un mensaje de error. El sistema mostró un mensaje de error. X Cuadro 7.1: Pruebas realizadas en el registro. Inicio de sesión Prueba realizada. Resultado esperado. Resultado obtenido. Válido. P2.1 Iniciar sesión con los datos correctos. El usuario habrá iniciado sesión en el sistema. El usuario ha iniciado sesión en el sistema. X P2.2 Iniciar sesión sin un dato. El usuario no puede iniciar sesión y muestra un error. El usuario no ha podido iniciar sesión y el sistema ha mostrado un error. X 69 Capítulo 7. Pruebas P2.3 Iniciar sesión con un usuario y contraseña incorrecta. El usuario no puede iniciar sesión y muestra un error. El usuario no ha podido iniciar sesión y el sistema ha mostrado un error. X Cuadro 7.2: Pruebas realizadas en el inicio de sesión. Editar datos personales Prueba realizada. Resultado esperado. Resultado obtenido. Válido. P3.1 Modificar datos. El sistema actualizará los datos. se actualizaron los datos. X P3.2 Generar un token de un id de Telegram que no autoriza mensajes desde la aplicación. No se enviará el mensaje. No se envió el mensaje. X P3.3 Generar un token de un id de Telegram que autoriza mensajes desde la aplicación. Se enviará el token. Se envió el token. X P3.4 Introducir el token correctamente generado desde la misma cuenta. Se vincularán la cuenta de la aplicación web al id de Telegram. Se vinculó la cuenta de la aplicación web al id de Telegram. X P3.5 Introducir el token correctamente generado desde otra cuenta o con el token incorrecto. No se vincularán la cuenta de la aplicación web al id de Telegram y se mostrará un error. No se vinculó la cuenta de la aplicación web al id de Telegram y se mostró el error. X Cuadro 7.3: Pruebas realizadas en la edición de datos personales. Ver lista de deportes Prueba realizada. Resultado esperado. Resultado obtenido. Válido. P4.1 Entrar en la lista de deportes. El sistema mostrará los 8 primeros deportes ordenados alfabéticamente. El sistema mostró los 8 primeros deportes ordenados alfabéticamente. X P4.2 Pulsar el botón siguiente para ver los 8 siguientes deportes si hay mas. El sistema mostrara la siguiente página de deportes. El sistema mostró la siguiente página de deportes. X 70 Cristian Peñas Arias 7.1. Aplicación Web P4.3 Pulsar el botón siguiente para ver los 8 siguientes deportes si no hay mas deportes. El sistema se quedará en la página actual. El sistema se quedó en la página actual. X P4.4 Pulsar el botón anterior para ver los 8 anteriores deportes si no es la primera página. El sistema se mostrará los 8 deportes de la página anterior. El sistema mostró los deportes de la página anterior. X P4.5 Pulsar el botón anterior para ver los 8 anteriores deportes estando en la primera página. El sistema se quedará en la página actual. El sistema se quedó en la página actual. X P4.6 Mostrar botones editar y borrar. Si el usuario es administrador aparecerán estos dos botones en cada deporte al entrar en la lista. Si el usuario es administrador aparecen los dos botones en cada deporte. X P4.7 Borrar deporte El sistema pedirá confirmación en forma de dos botones, uno para confirmar y otro para cancelar. El sistema pide confirmación en forma de dos botones. X P4.8 Confirmar eliminación deporte. Al confirmar la eliminación, se eliminará definitivamente el deporte así como todas sus reglas y categorías. Al confirmar la eliminación se eliminó definitivamente el deporte y sus reglas y categorías. X Cuadro 7.4: Pruebas realizadas en la lista de deportes. Ver detalle deporte Prueba realizada. Resultado esperado. Resultado obtenido. Válido. P5.1 Entrar en el detalle de un deporte con un usuario con rol administrador. El sistema mostrará el detalle y permitirá añadir reglas y categorías. El sistema mostró el detalle y permitió añadir reglas y categorías. X P5.2 Entrar en el detalle de un deporte con un usuario con un rol diferente a administrador. El sistema mostrará el detalle del deporte. El sistema mostró el detalle del deporte. X P5.3 Añadir una regla con el campo rellenado. Se podrá pulsar el botón añadir y al pulsarlo se añadirá la regla. Se puede pulsar el botón añadir y además al pulsarlo añade la regla al deporte. X P5.4 Añadir una regla con el campo vacío. No se podrá pulsar el botón añadir. No se puede pulsar el botón añadir. X Cristian Peñas Arias 71 Capítulo 7. Pruebas Añadir una categoría con los campos rellenados. Se podrá pulsar el botón añadir y al pulsarlo se añadirá la categoría. Se puede pulsar el botón añadir y además al pulsarlo añade la categoría al deporte. X P5.5 Añadir una categoría con el campo nombre vacío. No se podrá pulsar el botón añadir. No se puede pulsar el botón añadir. X P5.6 Borrar una regla/categoría. Al borrar una regla/categoría se mostrarán dos botones de confirmación, uno para cancelar y otro para eliminar definitivamente. Al borrar una regla/categoría se mostraron dos botones de confirmación, uno para cancelar y otro para eliminar definitivamente. X P5.7 Confirmar eliminación regla/categoría. Al confirmar la eliminación se eliminará definitivamente la regla/categoría. Al confirmar la eliminación se eliminó definitivamente la regla/categoría. X P5.8 Editar regla/categoría. Al pulsar editar en la regla/categoría se podrá editar los valores de dicha regla/categoría. Al pulsar editar se pueden modificar los valores de dicha regla/categoría. X Cuadro 7.5: Pruebas en el detalle del deporte. Crear/Editar deporte Prueba realizada. Resultado esperado. Resultado obtenido. Válido. P6.1 Crear/Editar un deporte con todos los datos. Dejará crear/editar los datos. Deja actualizar los datos y al pulsar crear/editar deporte se crea/actualiza. X P6.2 Crear/Editar un deporte con un campo sin rellenar. No dejará crear/editar los datos. No deja actualizar los datos. X P6.3 Introducir un archivo sin extension gif,jpg o png como imagen. No se actualizará la imagen al pulsar editar deporte. No se actualizó la imagen. X P6.4 Introducir un archivo con extension gif,jpg o png como imagen. Se actualizará la imagen al pulsar editar deporte. Se actualizó la imagen. X Cuadro 7.6: Pruebas en la edición/creación del deporte. 72 Cristian Peñas Arias 7.1. Aplicación Web Ver lista de equipos Prueba realizada. Resultado esperado. Resultado obtenido. Válido. P7.1 Entrar en la lista de equipos. El sistema mostrará los 8 primeros equipos ordenados alfabéticamente. El sistema mostró los 8 primeros equipos ordenados alfabéticamente. X P7.2 Pulsar el botón siguiente para ver los 8 siguientes equipos si hay mas. El sistema mostrara la siguiente página de equipos. El sistema mostró la siguiente página de equipos. X P7.3 Pulsar el botón siguiente para ver los 8 siguientes equipos si no hay más equipos. El sistema se quedará en la página actual. El sistema se quedó en la página actual. X P7.4 Pulsar el botón anterior para ver los 8 anteriores equipos si no es la primera página. El sistema mostrará los 8 equipos de la página anterior. El sistema mostró los equipos de la página anterior. X P7.5 Pulsar el botón anterior para ver los 8 anteriores equipos estando en la primera página. El sistema se quedará en la página actual. El sistema se quedó en la página actual. X P7.6 Mostrar botones editar y borrar. Si el usuario es administrador aparecerán estos dos botones en cada equipo al entrar en la lista. Si el usuario es administrador aparecen los dos botones en cada equipo. X P7.7 Borrar equipo. El sistema pedirá confirmación en forma de dos botones, uno para confirmar y otro para cancelar. El sistema pide confirmación en forma de dos botones. X P7.8 Confirmar eliminación equipo. Al confirmar la eliminación, se eliminará definitivamente el equipo. Al confirmar la eliminación se eliminó definitivamente el equipo. X P7.9 Pulsar la imagen de un equipo. Al pulsar la imagen de un equipo se mostrará la página de detalle del equipo. Al pulsar la imagen de un equipo se mostró la página de detalle del equipo. X Cuadro 7.7: Pruebas realizadas en la lista de equipos. Crear/Editar equipo Prueba realizada. Resultado esperado. Resultado obtenido. Válido. Cristian Peñas Arias 73 Capítulo 7. Pruebas P20.4 Introducir /reglas- PartidoQueSigo + número válido. El sistema las reglas del deporte del partido que esta siguiendo. El sistema mostró las reglas del deporte del partido. X P20.5 Introducir /reglas- PartidoQueSigo + número inválido. El sistema mostrará un mensaje de error de que no se pueden escribir un número mas grande que los partidos que se están siguiendo. El sistema mostró el mensaje de error. X P20.6 Introducir /reglas- PartidoQueSigo+otros caracteres. El bot no responderá dado que no se trata de ningún comando. El bot no respondió. X Cuadro 7.20: Pruebas realizadas al consultar las reglas de un partido. Empezar un partido Prueba realizada. Resultado esperado. Resultado obtenido. Válido. P21.1 Introducir /empezarPartido con un partido con estado sin empezar. El sistema mostrará un mensaje de que se ha actualizado el partido al estado en curso y enviará mensaje a los seguidores del partido. Se mostraron los mensajes esperados. X P21.2 Introducir /empezarPartido con un partido con estado en curso. El sistema mostrará un mensaje de error de que no tiene ningún partido en estado sin empezar. El sistema mostró el mensaje de error. X P21.3 Introducir /empezarPartido+otros caracteres. El bot no responderá dado que no se trata de ningún comando. El bot respondió. X P21.3 Introducir /empezarPartido+otros caracteres. El bot no responderá dado que no se trata de ningún comando. El bot no respondió. X Cuadro 7.21: Pruebas realizadas al empezar un partido. Cambio de resultado de un partido Prueba realizada. Resultado esperado. Resultado obtenido. Válido. 80 Cristian Peñas Arias 7.2. Bot de Telegram P22.1 Introducir /cambiarResultado +resultado con un partido en estado en curso. El sistema mostrará un mensaje de que se ha actualizado el resultado y enviará mensaje a los seguidores del partido. Se mostraron los mensajes esperados. X P22.2 Introducir /cambiarResultado +resultado con un partido con estado sin empezar. El sistema mostrará un mensaje de error de que no tiene ningún partido en estado en curso. El sistema mostró el mensaje de error. X P22.3 Introducir /cambiarResultado+otros caracteres. El bot no responderá dado que no se trata de ningún comando. El bot no respondió. X Cuadro 7.22: Pruebas realizadas al cambiar el resultado de un partido. Consulta de espectadores de un partido Prueba realizada. Resultado esperado. Resultado obtenido. Válido. P23.1 Introducir /espectadoresPartido con un partido en estado en curso o sin empezar. El sistema mostrará el número de espectadores que tiene el partido. Se mostraron los espectadores del partido. X P23.2 Introducir /espectadoresPartido sin un partido en estado en curso o sin empezar. El sistema mostrará un mensaje de error de que no tiene ningún partido en curso. El sistema mostró el mensaje de error. X P23.3 Introducir /espectadoresPartido+otros caracteres. El bot no responderá dado que no se trata de ningún comando. El bot respondió. X P23.3 Introducir /espectadoresPartido+otros caracteres. El bot no responderá dado que no se trata de ningún comando. El bot no respondió. X Cuadro 7.23: Pruebas realizadas al consultar los espectadores de tu partido. Terminar un partido Prueba realizada. Resultado esperado. Resultado obtenido. Válido. Cristian Peñas Arias 81 Capítulo 7. Pruebas P24.1 Introducir /terminarPartido con un partido en estado en curso. El sistema mostrará un mensaje de se ha terminado el partido y se lo comunicará a todos los seguidores del partido. Se mostraron los mensajes esperados. X P24.2 Introducir /terminarPartido sin un partido en estado en curso. El sistema mostrará un mensaje de error de que no tiene ningún partido en curso. El sistema mostró el mensaje de error. X P24.3 Introducir /terminarPartido+otros caracteres. El bot no responderá dado que no se trata de ningún comando. El bot respondió. X P24.3 Introducir /terminarPartido+otros caracteres. El bot no responderá dado que no se trata de ningún comando. El bot no respondió. X Cuadro 7.24: Pruebas realizadas al terminar un partido. Anular un partido Prueba realizada. Resultado esperado. Resultado obtenido. Válido. P25.1 Introducir /anular- Partido con un partido en estado en curso. El sistema mostrará un mensaje de se ha anulado el partido y se lo comunicará a todos los seguidores del partido. Se mostraron los mensajes esperados. X P25.2 Introducir /anular- Partido sin un partido en estado en curso. El sistema mostrará un mensaje de error de que no tiene ningún partido en curso. El sistema mostró el mensaje de error. X P25.3 Introducir /anular- Partido+otros caracteres. El bot no responderá dado que no se trata de ningún comando. El bot respondió. X P25.3 Introducir /anular- Partido+otros caracteres. El bot no responderá dado que no se trata de ningún comando. El bot no respondió. X Cuadro 7.25: Pruebas realizadas al anular un partido. 82 Cristian Peñas Arias Capítulo 8 Manual de Instalación Este capítulo se explicarán los prerrequisitos técnicos, sistema operativo, etc, necesarios para instalar la aplicación desarrollada en este trabajo de n de grado. Los requisitos no son muy altos, un sistema de 1 GB de memoria debería ser suciente para arrancar el sistema. El sistema operativo es independiente, lo único que tiene que ser capaz de instalar npm para poder gestionar y arrancar el equipo. En este caso se utilizó un servidor de Ubuntu 18.04 x64.// Una vez tenemos un servidor lo único que hay que hacer es una conexión ssh a nuestro servidor, o entrar en la consola directamente si el proveedor del servidor lo proporciona. En caso de hacer la conexión se debera hacer de la siguiente forma: ssh usuario@ip Pedirá una contraseña, y una vez se haya comprobado se realizará la conexión ssh. Una vez dentro hay que utilizar una serie de comandos para preparar el servidor. Primero habrá que bajar un gestor de paquetes (No es necesario pero es recomendable). apt − get update apt − get i n st a ll aptitude aptitude update Ahora, con este nuevo gestor de paquete se instalará git. Git se utiliza para tener un repositorio y poder trabajar de una forma más cómoda con un control de versiones. aptitude i n st a ll git Para poder controlar las versiones de una manera mas sencilla se instalara nvm por si alguna version de node no es compatible con nuestro programa o cualquier otro framework que necesite ser instalado. aptitude i n st al l build − essential libssl − dev 83 Capítulo 8. Manual de Instalación curl − o − https :// raw . githubusercontent .com/ creationix /nvm/v0 .33.11/ i ns t al l . sh | bash source ~/. prof ile El primer comando son dependencias de nvm y el último es para corregir un bug que en el que no se listan bien las versiones./ Para listar las versiones disponibles de angular bastará con utilizar el siguiente comando: nvm ls − remote Se recomienda siempre que se instale una versión que tenga escrito al lado (Latest LTS). Signica que es la ultima versión que tiene soporte y que es de larga duración. Para instalar una versión de Node.js tendremos que utilizar el comando nvm in st a ll version Ahora instalaremos un servidor web llamado nginx. nvm in st a ll nginx Para comprobar que esta instalado solo se tiene que coger la dirección Ip y ponerla en el navegador. Si esta instalado tendrá que salir la página de bienvenida de nginx. Ahora se creara una carpeta donde se descargará nuestra aplicación. En nuestro caso la crearemos en el directorio home. cd /home mkdir deporty − produccion Una vez creado, solo tendremos que bajar nuestra aplicación. Para ello utilizaremos Git. Solamente hay que utilizar el comando: git clone url − del − repositorio Ahora hay que crear las carpetas de los archivos que se subirán en nuestra web. cd /home/deporty − produccion/deporty mkdir − p uploads/users mkdir − p uploads/sports mkdir − p uploads/teams En esas carpetas es donde se guardarán nuestras imágenes de los usuarios,deportes y equipos. 84 Cristian Peñas Arias Ahora instalaremos todas las dependencias del proyecto, estas vienen en un archivo llamado package.json utilizando el comando: npm update La aplicación ya esta lista para el despliegue utilizando el comando npm start Si vamos a nuestra Ip y el puerto 3977 deberá funcionar correctamente. Aunque esto funciona, es recomendable hacer una serie de pasos para que simplemente entrando en la Ip salga la aplicación es decir que este en el puerto 80. Es decir lo que haremos sera redirigir los datos que lleguen al puerto 80 hacia el puerto 3977 utilizando el comando: iptables − t nat − A PREROUTING − i eth0 − p tcp −− dport 80 − j REDIRECT −− to − port 3977 Para que al cerrar la conexión ssh no se cierre el servidor tendremos que instalar un software que nos permite tener procesos de Node.js en producción. npm i ns t al l pm2 − g Para arrancar la aplicación se tendrá que usar el comando pm2 start index . js Y un vez completado este comando nuestra aplicación estará funcionando aunque cerremos la consola con la conexión ssh. Para que esta aplicación funcione es necesario introducir la ip del servidor en el servidor de MongoDB, ya que nuestra aplicación utiliza un servidor de base de datos diferente y tiene que hacer una conexión. Para hacer que la base de datos acepte nuestras peticiones sera necesario entrar en la administración e introducir la dirección en la WhiteList para que no rechace dichas peticiones. Cristian Peñas Arias 85 Capítulo 8. Manual de Instalación 86 Cristian Peñas Arias Capítulo 9 Manual de Usuario Este capítulo nal se dedica a desarrollar el manual del usuario nal, así como del usuario administrador y del usuario locutor. 9.1. Manual de Usuario Para usar el bot de Telegram deberemos utilizar el buscador de telegram. Tendrás que buscar el bot introduciendo '@EventosDeportivosBot'. Saldrá una pestaña de esta forma: Al hacer click en el nombre se abrirá una conversación. Para buscar un partido cercano solo tendremos que escribir el comando: /partidosCercanos. Saldrá un botón para que envíes tu ubicación. 87 Capítulo 9. Manual de Usuario El botón aparecerá justo debajo del chat tal y como se indica en la siguiente foto: Una vez conrmado, el bot buscará y listará cada partido que haya cerca de tu ubicación y los enumerará. En caso de que no haya ningún partido el bot también te informará. // 88 Cristian Peñas Arias 9.1. Manual de Usuario En esta foto de ejemplo solo hay un partido, y esa es la información que da del partido. // Para poder presenciar uno de eso partidos tendrás que poner el comando /presenciar- Partido y el número del partido que quieras presenciar. Ejemplo: /presenciarPartido 1. El bot responderá si se ha podido presenciar el partido o no, en caso de que no dirá la causa. // Para poder ver los partidos que estas presenciando solo tienes que escribir el comando /partidosQueSigo, el bot listará los partidos de la misma manera que con el comando /partidosCercanos. Para dejar de seguir un partido tendrás primero que usar el comando /partidosQue- Sigo, y una vez obtengas la lista de partidos utilizar el comando /dejarDeSeguirPartido y el número del partido. Ejemplo /dejarDeSeguirPartido 1. Cristian Peñas Arias 89 Capítulo 9. Manual de Usuario /desautorizaToken. Cuando tengamos nuestro id de Telegram iremos al campo Id Telegram, introduciremos nuestro id y pulsaremos el botón, 'Generar token'. Ahora se mostrará un campo que se llama 'Token generadoén el que tendrás que introducir los caracteres que te envía el bot. Estos son personales de cada usuario, es decir el token que te genera a ti no puede ser introducido por ningún otro usuario de la aplicación y ademas este token caduca a los 5 minutos. Envío del token : Si introducimos el token que nos ha enviado en el campo 'Token generado'y pulsamos el botón 'Conrmar token'si este es correcto para este usuario y no esta caducado se enlazarán las cuentas. Una vez tengamos el id de Telegram asociado a nuestra cuenta aparecerá encima del menú mis datos nuestro id de Telegram asociado. 96 Cristian Peñas Arias 9.2. Manual del Usuario Locutor Una vez tengamos las cuentas asociadas podemos entrar en el menú 'Mis partidos'. Si no tenemos ningún partido que no haya terminado nos saldrá el botón de Áñadir Partido'. Si pulsamos el botón, nos llevará a una página para introducir todos los datos necesarios para la creación del partido del partido. El mapa es de Google Maps, por lo que es interactivo y al pulsar en cualquier punto del mapa pondrá un punto que es donde tendrá lugar el encuentro. Cristian Peñas Arias 97 Capítulo 9. Manual de Usuario Al pulsar el deporte del partido automáticamente saldrán todas las categorías existentes en la aplicación para ese deporte. Una vez introducidos todos los datos, podremos pulsar el botón 'Crear nuevo partido'. Si todo ha ido bien iremos a la página de 'Mis partidos'y se podrá ver que hay un partido sin equipos. Para introducir equipos al partido lo único que tienes que hacer es hacer click en el partido para entrar en su detalle. 98 Cristian Peñas Arias 9.2. Manual del Usuario Locutor Para introducir un equipo a un partido deberás pulsar el botón añadir en la sección de participantes. Saldrá otra sección con todos los deportes que hay en ese deporte. Solo tendrás que pulsar añadir en cada la del equipo que quieres que participe. Cuando se añade un equipo a un partido, este deja de estar en la lista de equipos disponibles y pasa a la lista de participantes. No se pueden meter mas equipos de los que permite el deporte en el partido, si esto llega a ocurrir dará error. Cristian Peñas Arias 99 Capítulo 9. Manual de Usuario Para eliminar un equipo de un partido se deberá pulsar el botón borrar. Si es pulsado saldrá una conrmación en forma de dos botones, uno para eliminar denitivamente y otro para cancelar. Una vez introducidos los equipos al partido se mostrarán en la página de 'Mis partidos'. Para eliminar el partido de la misma forma que en el caso anterior pedirá una conrmación de su eliminación. Si queremos editar el partido solo tenemos que pulsar el botón editar y nos llevará a una página exactamente igual que la de la creación. Una vez creado el partido ya esta listo para que cualquier persona pueda seguirlo y cada acción que haya en el partido serán informados automáticamente. Para hacer que el partido que estas narrando empiece solo tienes que escribir el comando /empezarPartido. Si todo va bien el bot responderá te informará si se ha producido el cambio y si se ha producido informará a los seguidores del partido. 100 Cristian Peñas Arias 9.2. Manual del Usuario Locutor Para cambiar el resultado de un partido solo tienes que utilizar el comando /cambiarResultado y el resultado. Ejemplo /cambiarResultado 1-0. Para nalizar un partido solo tienes que utilizar el comando /terminarPartido. Ya no podrás modicar el resultado una vez se termine el partido. Solo se podrá terminar el partido si estaba en el estado Én curso'. Para anular un partido solo tienes que utilizar el comando /anularPartido. Ya no podrás modicar el resultado una vez se anule el partido. Solo se podrá anular el partido si estaba en el estado Én curso'. Cristian Peñas Arias 101 Capítulo 9. Manual de Usuario Para ver los seguidores que tiene tu partido podrás utilizar el comando /espectadores- Partido. Este es el único comando que no enviará a los usuarios un mensaje. 9.3. Manual de Administración Para poder editar los datos de los deportes y equipos deberás entrar en la aplicación web de deporty depory.com . Aparecerá la pantalla principal como la que podemos observar en la siguiente imagen. Solo tendrás que introducir tu correo electrónico y tu contraseña para acceder a tu usuario. Esta es la página principal de la aplicación web. Como se puede ver tiene varios menús. 102 Cristian Peñas Arias 9.3. Manual de Administración Para modicar tus datos solo tienes que ir al menú 'Mis datos'y se mostrará la página donde podrás modicar tus datos de usuario. Al pulsar el botón de Áctualizar mis datos', se mostrará un mensaje. Para ver todos los deportes y sus características se deberá pulsar el botón que tiene una pelota de fútbol como icono. Aparecerá una página como esta: Cristian Peñas Arias 103 Capítulo 9. Manual de Usuario Los deportes estarán listados de ocho en ocho y al pulsar siguiente o anterior irás a una página u otra. Para introducir un deporte nuevo en el sistema deberás pulsar el botón Áñadir deporte'. Se mostrará la siguiente página: Una vez introducido todos los datos deberás pulsar el botón 'Crear nuevo deporte'. Una vez introducido el deporte se mostrará la pantalla de editar deporte. Desde la lista de deportes, hay un botón borrar. Al pulsarlo sobre un deporte pedirá una conrmación a través de dos botones. 104 Cristian Peñas Arias 9.3. Manual de Administración Si pulsamos en eliminar se borrará de forma denitiva el deporte. Si pulsamos el botón borrar en otro deporte se cancelará la preparación del borrado del anterior deporte, volviendo a los botones habituales de Éditar deporte'y 'Borrar deporte'. Al hacer click sobre la imagen del deporte iremos a la página del detalle del deporte que es la siguiente: En esta página se podrán añadir reglas y categorías. Para añadir una regla deberemos pulsar el botón añadir que se sitúa debajo del cuadro de reglas y saldrá un campo para poder introducirla. Cristian Peñas Arias 105 Bibliografía [8] Real academia española , [Online]. Disponible: http://dle.rae.es/srv/fetch?id=CFEFwiY. Ultimo acceso 18 Septiembre 2018. Información sobre la denición de lo que es considerado un deporte. [9] SofaScore , [Online]. Disponible: https://www.sofascore.com/es/. Ultimo acceso 3 Septiembre 2018. Página web de SofaScore donde se puede ver la funcionalidad de la aplicación. [10] Stratebi , [Online]. http://www.stratebi.es/todobi/Oct13/MongoDB_UpRun- ning.pdf. Último acceso 15 Agosto 2018. Información acerca de qué es MongoDB y que ventajas presenta frente a las bases de datos SQL. [11] Telegram Messenger LLP , [Online]. Disponible: https://core.telegram.org/bots/api. Último acceso 20 Septiembre 2018. Información sobre el Api de Telegram en el que se encontrarán todos los métodos y clases existentes. [12] TJ Holowaychuk, StrongLoop y otros , [Online]. Disponible: https://expressjs.com/es/4x/api.html. Ultimo acceso 1 Septiembre 2018. Información sobre el Api de Express con todos los métodos y como usarlo, también ofrece una guía en español para entender como funciona este framework. [13] Wikipedia , [Online]. Disponible: https://es.wikipedia.org/wiki/MEAN. Ultimo acceso 1 Septiembre 2018. Información sobre qué es MEAN Stack,acerca de su historia, cuales son sus componentes y las funciones de cada uno de ellos. [14] Wikipedia , [Online]. Disponible: https://es.wikipedia.org/wiki/Telegram_Bot_- API. Ultimo acceso 18 Septiembre 2018. Información sobre la denición de lo que es un bot de Telegram, de su historia, de su gestión y el impacto que ha tenido. 112 Cristian Peñas Arias Contenido del CD Se entrega un CD con el código del desarrollo de este trabajo de n de grado, cuyo nombre de la carpeta es deporty. En ella tendremos el Back-end y el Front-end listo para el desarrollo. El Back-end es la carpeta client-dev. El resto a excepción de la carpeta Client que se utiliza para el despliegue de la aplicación es el Back-end. También se adjunta el archivo astah con el análisis y el diseño de la aplicación y la memoria de dicho trabajo. 113