Full text
DESARROLLO DE UN GENERADOR AUTOMÁTICO DE PLANES DE OCIO DEVELOPMENT OF AN AUTOMATIC LEISURE PLAN GENERATOR TRABAJO FIN DE GRADO CURSO 2022-2023 AUTOR NURIA ALONSO GONZÁLEZ LUIS PECOS SÁNCHEZ DIRECTOR ANTONIO SARASA CABEZUELO GRADO EN INGENIERÍA INFORMÁTICA FACULTAD DE INFORMÁTICA UNIVERSIDAD COMPLUTENSE DE MADRID
DESARROLLO DE UN GENERADOR AUTOMÁTICO DE PLANES DE OCIO DEVELOPMENT OF AN AUTOMATIC LEISURE PLAN GENERATOR TRABAJO DE FIN DE GRADO EN INGENIERÍA INFORMÁTICA AUTOR NURIA ALONSO GONZÁLEZ LUIS PECOS SÁNCHEZ DIRECTOR ANTONIO SARASA CABEZUELO CONVOCATORIA: FEBRERO 2023 GRADO EN INGENIERÍA INFORMÁTICA FACULTAD DE INFORMÁTICA UNIVERSIDAD COMPLUTENSE DE MADRID 24 DE ENERO DE 2023
RESUMEN En este trabajo se presenta una aplicación que permite a los usuarios acceder a actividades de distinto ámbito localizadas en Madrid. También permite ver y crear planes con ellas estableciendo varios filtros (fecha, gustos o valoración), agregar contactos e interactuar con los mismos enviando recomendaciones de actividades o planes. Los datos sobre las actividades se han extraído de documentos localizados en el portal de datos abiertos del Ayuntamiento de Madrid. Entre la información extraída referente a las actividades se encuentran horarios, descripciones, imágenes, localización, medios de contacto, medios de transporte, categorías, subcategorías, tipos de audiencia, entre otros. La web se puede utilizar accediendo con una cuenta registrada o como invitado. Los invitados no tienen acceso a todas las funcionalidades de la web. Palabras clave Actividades, planes, itinerario, Madrid, html, php, javascript.
ABSTRACT This paper presents an application that allows users to access activities in different areas located in Madrid. It also allows users to view and create plans with them by setting various filters (date, tastes or rating), add contacts and interact with them by sending recommendations for activities or plans. The data on the activities have been extracted from documents located in the open data portal of the Madrid City Council. Among the information extracted about the activities are timetables, descriptions, images, location, means of contact, means of transport, categories, subcategories, types of audience, among others. The website can be used by logging in with a registered account or as a guest. Guests do not have access to all the functionalities of the website. Keywords Activities, plans, itinerary, Madrid, html, php, javascript.
ÍNDICE DE CONTENIDO Resumen ................................................................................................................................... V Abstract .................................................................................................................................. VII Índice de contenido ............................................................................................................. VIII Índice de ilustraciones ........................................................................................................... XII Índice de tablas ................................................................................................................... XVII Capítulo 1 - Introducción .........................................................................................................1 1.1 Motivación ......................................................................................................................1 1.2 Objetivos ..........................................................................................................................2 1.3 Plan de trabajo ...............................................................................................................2 1.4 Estructura de la memoria ...............................................................................................3 Capítulo 2 - Estado de la cuestión ..........................................................................................9 Capítulo 3 - Tecnología empleada ......................................................................................13 3.1 Herramientas cliente ....................................................................................................13 3.1.1 Visual Studio Code .................................................................................................13 3.1.2 Github Desktop ......................................................................................................13 3.2 Herramientas servidor ...................................................................................................13 3.2.1 MariaDB ...................................................................................................................13 3.2.2 XAMPP .....................................................................................................................14 3.2.3 Apache ...................................................................................................................14 3.2.4 MySQL .....................................................................................................................14 3.2.5 JavaScript ...............................................................................................................15
3.3 Otras herramientas .......................................................................................................15 3.3.1 Git ............................................................................................................................15 Capítulo 4 - Especificación de casos de uso .......................................................................16 4.1 Actores del sistema.......................................................................................................16 4.2 Diagramas de casos de uso ........................................................................................17 4.3 Especificación de casos de uso ..................................................................................22 Capítulo 5 - Modelo de datos ...............................................................................................57 5.1 Modelo entidad relación .............................................................................................57 5.2 Implementación base de datos ..................................................................................61 5.2.1 Tablas de usuario ...................................................................................................61 5.2.2 Tablas de planes ....................................................................................................63 5.2.3 Tablas de eventos ..................................................................................................64 5.2.4 Tablas de museos ...................................................................................................66 5.2.5 Tablas de monumentos .........................................................................................68 5.2.6 Tablas de restaurantes ...........................................................................................69 5.2.7 Tablas de contactos ..............................................................................................71 5.2.8 Tablas de tendencias ............................................................................................72 Capítulo 6 - Arquitectura de la web .....................................................................................73 Capítulo 7 - Diseño de la web ...............................................................................................75 7.1 Bootstrap 5.0..................................................................................................................75 7.2 Estilo................................................................................................................................75 7.3 Iconos ............................................................................................................................75 7.4 Colores ...........................................................................................................................76 Capítulo 8 - Funcionalidad de la web ..................................................................................77
8.1 Funcionalidad referida a la recomendación aleatoria ............................................77 8.2 Funcionalidad referida a la búsqueda de actividades y planes .............................78 8.2.1 Búsqueda con filtros ...............................................................................................78 8.2.2 Búsqueda por geolocalización .............................................................................80 8.3 Funcionalidad referida a la generación de PDF .......................................................83 8.4 Funcionalidad referida a la creación de planes .......................................................85 8.4.1 Creación manual de planes .................................................................................85 8.4.2 Generación automática de planes .....................................................................86 8.5 Funcionalidad referida a la gestión de datos (Administrador) ................................88 8.5.1 Visibilizar datos ........................................................................................................88 8.5.2 Subir datos masivos ................................................................................................90 8.5.3 Subir datos individuales .........................................................................................92 8.5.4 Actualizar datos .....................................................................................................92 8.6 Funcionalidad referida a la recuperación de contraseña .......................................93 Capítulo 9 - Conclusiones y trabajo futuro ...........................................................................95 9.1 Conclusión .....................................................................................................................95 9.2 Trabajo futuro ................................................................................................................95 9.3 Implementación de la web .........................................................................................96 Contribuciones Personales.....................................................................................................99 Bibliografía............................................................................................................................. 105 Apéndices ............................................................................................................................. 107 Página de registro ............................................................................................................ 108 Página de inicio de sesión ............................................................................................... 110 Página de actividades ..................................................................................................... 111
Página de planes ............................................................................................................. 116 Página de usuario ............................................................................................................. 120 Página de contactos ....................................................................................................... 123 Página de solicitudes ....................................................................................................... 124 Páginas de recomendaciones ........................................................................................ 125 Página de administrador ................................................................................................. 127 Plantilla de museos ........................................................................................................... 130 Plantilla de restaurantes ................................................................................................... 130 Plantilla de eventos .......................................................................................................... 131 Plantilla de monumentos ................................................................................................. 131
ÍNDICE DE ILUSTRACIONES Ilustración 1 Diagrama de Gantt ............................................................................................3 Ilustración 2 Gantt Chart ..........................................................................................................7 Ilustración 3 Página de la web Unbuendiaenmadrid ...........................................................9 Ilustración 4 Página de la web EspacioMadrid ...................................................................10 Ilustración 5 Página de ComiendoPipas ..............................................................................10 Ilustración 6 Página de la web MadridDiferente .................................................................11 Ilustración 7 Newsletter de la web MadridDiferente ...........................................................11 Ilustración 8 Página de la web MadridExperience ..............................................................12 Ilustración 9 Diagrama del caso de uso cuentas de usuario .............................................17 Ilustración 10 Diagrama del caso de uso actividades usuario para usuarios registrados18 Ilustración 11 Diagrama del caso de uso actividades ........................................................19 Ilustración 12 Diagrama del caso de uso planes para usuarios registrados .....................20 Ilustración 13 Diagrama del caso de uso planes .................................................................20 Ilustración 14 Diagrama del caso de uso contactos...........................................................21 Ilustración 15 Diagrama del caso de uso administrar datos...............................................22 Ilustración 16 Modelo Entidad-Relación de la información de la base de datos ............58 Ilustración 17 Modelo Entidad-Relación de la información de las categorías de los monumentos ...................................................................................................................59 Ilustración 18 Modelo Entidad-Relación de la información de las categorías de los museos .............................................................................................................................59 Ilustración 19 Modelo Entidad-Relación de la información de las categorías de los eventos ............................................................................................................................59
2 1.2 Objetivos El objetivo principal del trabajo es desarrollar una web que permita ayudar a los usuarios a realizar la búsqueda de planes y actividades en la ciudad de Madrid. Además, otro objetivo es optimizar la elección de actividades teniendo en cuenta los gustos del usuario. A partir de estas definiciones, se extraen los siguientes objetivos más específicos: Permitir la actualización de la base de datos de la web con datos masivos o individuales. Permitir a los usuarios registrados o sin registrar la creación de planes. Estos contendrán principalmente varias actividades, una fecha y varias descripciones. Implementar un buscador que pueda filtrar actividades indicando una valoración, diversas categorías, subcategorías o fechas. Desarrollar una función que permita la generación automática de planes en base a los gustos y preferencias del usuario. Implementar un sistema de contactos para permitir la interacción entre usuarios registrados. Estos podrán recomendar planes y actividades y ver los elementos favoritos del resto de usuarios 1.3 Plan de trabajo En la Ilustración 1 puede verse las diferentes tareas que se han llevado a cabo a lo largo del desarrollo del proyecto. La semana uno del diagrama corresponde a la semana del diecisiete al veintitrés de septiembre, semana en la que se llevaron a cabo las primeras reuniones para establecer los objetivos y alcance del proyecto. Después se realizó la especificación de requisitos y casos de uso que permitió establecer las iteraciones siguientes en las que se desarrollaron las distintas funcionalidades de la aplicación. La duración del desarrollo de cada iteración que se especificó puede observarse en el diagrama.
3 Ilustración 1 Diagrama de Gantt Finalmente, se ha redactado esta memoria final basada en el trabajo ya realizado. 1.4 Estructura de la memoria A continuación, se explican brevemente la estructura de la memoria: o Capítulo 1: En este capítulo se describen la motivación del trabajo, objetivos principales, plan de trabajo y estructura de la memoria. o Capítulo 2: En este capítulo se muestran aplicaciones web que utilizan herramientas y manejan datos similares a los del trabajo. o Capítulo 3: En este capítulo se describe la tecnología más utilizada en el trabajo. o Capítulo 4: En este capítulo se describen los actores y casos de uso. o Capítulo 5: En este capítulo se explicará el diagrama entidad relación del proyecto y la implementación de la base de datos.
4 o Capítulo 6: En este capítulo se hace una descripción de la arquitectura que se ha seguido para el desarrollo e implementación de la aplicación web. o Capítulo 7: En este capítulo se describe el diseño seguido durante la implementación de la aplicación web. o Capítulo 8: En este capítulo se va a realizar una descripción de las principales funcionalidades implementadas. o Capítulo 9: En este capítulo se describen las conclusiones del trabajo y las líneas de trabajo futuro planteadas. o Contribuciones personales: Esta sección contiene las actividades realizadas por cada uno de los participantes del proyecto. o Bibliografía: Esta sección contiene una lista con las fuentes bibliográficas que se han utilizado. o Apéndice A: Se expone una guía de utilización de la web para los usuarios con la descripción de todas las páginas y vistas principales. o Apéndice B: Se exponen las plantillas de Excel generadas para la subida de datos masivos a la aplicación.
5 Chapter 1Introduction This section explains the motivation behind the project, the objectives of the work carried out and the work plan followed during the development of the project. Motivation Tourism in Spain plays a very important role as it has become the sector that contributes most to the Spanish economy. Moreover, in 2022 Madrid has been named the fourth most attractive city for tourism. It is therefore necessary to make it easier to find plans and activities. There are many activities and places to visit all over the world (and particularly in Spain), and when you travel somewhere it is difficult to know all the possibilities it has to offer. Nowadays, in order to gather information about a place, it is necessary to visit multiple internet sites or consult books, which takes a lot of time. Websites can be found that show activities in specific areas such as restaurants or theatres. Generally these do not allow you to manage different types of activities or to create a plan for a desired period of time. One solution is to develop a web application that allows users to easily visit activities and plans. It should also allow the grouping of different activities in a plan in order to organise trips or outings around Madrid. This work attempts to solve the problems of time spent searching for activities and organising leisure plans in Madrid. To this end, the application developed manages data on four different types of activities: museums, restaurants, monuments and events offered by tourist sites in Madrid. It also allows users easy access to information thanks to data filters, recommendations from other users, the possibility of generating plans adapted to the user's preferences and the possibility of creating lists of activities and favourite plans.
6 Goals The main objective of the work is to develop a website that helps users to search for plans and activities in the city of Madrid. In addition, another objective is to optimise the choice of activities taking into account the user's tastes. From these definitions, the following more specific objectives can be extracted: To allow the updating of the web database with massive or individual data. To allow registered or unregistered users to create plans. These will mainly contain several activities, a date and several descriptions. Implement a search engine that can filter activities by indicating a rating, various categories, subcategories or date and audience in case of events. Develop a function that allows the automatic generation of plans based on the tastes and preferences of a user. Implement a contact system to allow interaction between registered users, so that they can recommend plans and activities, and see the favourite elements of other users. Work plan Illustration 1 shows the different tasks that have been carried out throughout the development of the project. Week one of the diagram corresponds to the week from the seventeenth to the twenty-third of September, the week in which the first meetings were held to establish the objectives and scope of the project. This was followed by the specification of requirements and use cases, which made it possible to establish the following iterations in which the different functionalities
7 of the application were developed. The development duration of each iteration can be seen in the diagram. Ilustración 2 Gantt Chart Finally, this final report has been written on the basis of the work already done. Structure of the memory In the following, the structure of the report is briefly explained: o Chapter 1: This chapter describes the motivation for the work, main objectives, work plan and structure of the report. o Chapter 2: This chapter shows web applications that use tools and handle data similar to those of the work. o Chapter 3: This chapter describes the technology most commonly used in the work. o Chapter 4: This chapter describes the actors and use cases.
8 o Chapter 5: This chapter will explain the entity-relationship diagram of the project and the implementation of the database. o Chapter 6: This chapter describes the architecture followed for the development and implementation of the web application. o Chapter 7: This chapter describes the design followed during the implementation of the web application. o Chapter 8: This chapter describes the main functionalities implemented. o Chapter 9: This chapter describes the conclusions of the work and the lines of future work proposed. o Personal contributions: This section contains the activities carried out by each of the project participants. o Bibliography: This section contains a list of the bibliographical sources that have been used. o Appendix A: A user's guide to the website with a description of all the main pages and views. o Appendix B: The Excel templates generated for uploading bulk data to the application are presented.
9 Capítulo 2 - Estado de la cuestión En este capítulo, se describen varias webs que tienen una funcionalidad parecida a la desarrollada en este proyecto. Unbuendiaenmadrid [1]: Es una web que ofrece información de actividades de ocio en Madrid. Se pueden encontrar un gran número de tipos de actividades distintas como se puede ver en la Ilustración 3. Además, ofrecen un gran número de filtros que permiten diferenciar entre muchas actividades. Ilustración 3 Página de la web Unbuendiaenmadrid EspacioMadrid [2]: Esta web ofrece un servicio de búsqueda de actividades. Tiene un gran número de categorías sobre las actividades y ofrece una descripción larga y detallada sobre cada actividad. Además, tiene un blog con noticias sobre actividades nuevas o destacadas. Por último, posee un apartado que proporciona planes que se desarrollan durante un tiempo establecido, pero no permite modificar el plan o crear uno nuevo.
10 Ilustración 4 Página de la web EspacioMadrid ComiendoPipas [3]: Esta web ofrece principalmente una agenda de ocio (Ilustración 5) donde se pueden ver las actividades que se ofrecen cada día y una opción para consultar una gran variedad de lugares en Madrid. No permite guardar actividades ni organizar planes con varias actividades. Ilustración 5 Página de ComiendoPipas MadridDiferente [4]: Esta web ofrece información de actividades en Madrid. Tiene un estilo muy moderno y atractivo (Ilustración 6). Además, ofrece la suscripción a una newsletter que envía información sobre actividades que van proponiéndose (Ilustración 7). También tienen noticias sobre los restaurantes destacados o planes de ocio novedosos.
11 Ilustración 6 Página de la web MadridDiferente Ilustración 7 Newsletter de la web MadridDiferente MadridExperience [5]: Es una web que ofrece experiencias en diversos puntos de España. Existen tours (Ilustración 8) en los que se realizan varias actividades, pero no se pueden modificar estos itinerarios ya que están preestablecidos.
18 Ilustración 10 Diagrama del caso de uso actividades usuario para usuarios registrados En la ilustración 11 se muestra el diagrama de casos de uso “gestión de actividades” para usuarios sin registrar.
19 Ilustración 11 Diagrama del caso de uso actividades En la ilustración 12 se muestra el diagrama de casos de uso “gestión de planes” para usuarios registrados.
20 Ilustración 12 Diagrama del caso de uso planes para usuarios registrados En la ilustración 13 se muestra el diagrama de casos de uso “gestión de actividades” para usuarios sin registrar. Ilustración 13 Diagrama del caso de uso planes
21 En la ilustración 14 se muestra el diagrama de casos de uso “gestión de contactos” para usuarios registrados. Ilustración 14 Diagrama del caso de uso contactos En la ilustración 15 se muestra el diagrama de casos de uso “administrar datos” para usuarios administradores.
22 Ilustración 15 Diagrama del caso de uso administrar datos 4.3 Especificación de casos de uso A continuación, se van a describir los casos que se han agrupado en distintos módulos funcionales: Cuentas de usuario o Iniciar sesión o Cerrar sesión o Registrar usuario o Eliminar usuario o Modificar datos de usuario
23 Gestión de actividades o Buscar una actividad o Filtrar para buscar una actividad por diferentes filtros o Buscar una actividad según la localización o Valorar actividad o Guardar una actividad en mi lista de favoritas o Eliminar una actividad de mi lista de favoritas o Recomendar una actividad a un contacto o Aceptar/Rechazar actividad recomendada o Ver lista de actividades recomendadas Gestión de planes o Generar plan de forma automática o Generar plan de forma manual o Guardar plan en lista de planes favoritos o Eliminar plan en lista de planes favoritos o Modificar plan en lista de planes favoritos o Descargar plan como PDF o Seleccionar un plan en lista de planes o Recomendar un plan a un contacto o Aceptar/Rechazar plan recomendado o Ver lista de planes recomendados Gestión de contactos o Añadir/Eliminar contacto de la aplicación. o Visitar contacto
24 o Aceptar contacto o Rechazar contacto o Ver lista de solicitudes de contactos Administrar datos o Subir datos masivos o Subir datos individuales o Modificar datos o Eliminar datos 1. Módulo de cuentas de usuario En esta sección se describen los casos de uso del módulo funcional de “Cuentas de usuario”. US-01 Iniciar sesión Versión 1.0.0 Prioridad Alta Estabilidad Precondición El usuario debe estar registrado en la base de datos Descripción Los usuarios que ya estén registrados podrán iniciar sesión para acceder a los casos de uso reservados a estos actores. Entrada Correo y contraseña. Salida NA Secuencia normal 1 El usuario accede a la aplicación y accede al apartado de usuario 2 El usuario selecciona la opción de iniciar sesión 3 El usuario introduce sus credenciales (correo y contraseña) y pulsa el botón de inicio
25 4 El sistema comprueba las credenciales 5 El usuario accede al sistema y se muestra la página principal. Postcondición La sesión se ha iniciado Excepciones 4 El inicio de sesión no se ha podido completar, las credenciales no son correctas Comentarios Tabla 1 Iniciar sesión US-02 Cerrar sesión Versión 1.0.0 Prioridad Alta Estabilidad Precondición El usuario debe estar registrado y haber iniciado sesión en el sistema. Descripción Los usuarios podrán cerrar la sesión de su perfil. Entrada ID de usuario Salida NA Secuencia normal 1 El usuario accede a la aplicación y accede al apartado de usuario 2 El usuario selecciona la opción de cerrar la sesión 3 El sistema confirma el cierre de sesión y muestra la pantalla de inicio de sesión Postcondición La sesión se ha cerrado Excepciones 3 No se cierra la sesión y se emite el mensaje “No ha sido posible cerrar la sesión actual”. Comentarios Tabla 2 Cerrar sesión
26 US-03 Registrar usuario Versión 1.0.0 Prioridad Alta Estabilidad Precondición NA Descripción Los usuarios no registrados podrán registrarse para poder acceder a los casos de uso reservados a usuarios registrados. Entrada Información del perfil (ID usuario, nombre, apellidos, correo electrónico, contraseña, gustos, avatar) Salida NA Secuencia normal 1 El usuario accede a la aplicación y accede al apartado de usuario 2 El usuario selecciona la opción de registro 3 El usuario introduce los campos obligatorios y opcionales del perfil 4 El usuario pulsa el botón de completar registro 5 El sistema valida la información 6 El sistema registra el usuario en la base de datos 7 El sistema muestra de nuevo la pantalla principal Postcondición Se ha creado la cuenta de usuario Excepciones 5 La contraseña introducida no cumple con los requisitos, mensaje informativo al usuario 5 El correo introducido no cumple con los requisitos, mensaje informativo al usuario 5 El correo introducido ya está activo en otra cuenta, mensaje informativo al usuario
27 Comentarios Tabla 3 Registrar usuario US-04 Eliminar usuario Versión 1.0.0 Prioridad Media Estabilidad Precondición El usuario tiene que estar registrado y haber iniciado sesión en el sistema. Descripción El usuario registrado eliminará su cuenta y todos sus datos permanentemente. Entrada ID de usuario Salida NA Secuencia normal 1 El usuario accede a la aplicación y accede al apartado de usuario 2 El usuario selecciona la opción de eliminar cuenta y confirma la acción 3 El sistema elimina el usuario de la base de datos 4 El sistema muestra la pantalla de login. Postcondición Se ha eliminado la cuenta de usuario Excepciones 2 El usuario selecciona la opción de cancelar. Comentarios Tabla 4 Eliminar usuario US-05 Modificar datos de usuario Versión 1.0.0 Prioridad Alta
34 Descripción Recomendar a un contacto la información relativa a la actividad. Entrada ID usuario del contacto, ID actividad Salida NA Secuencia normal 1 El usuario escoge una actividad para ver sus detalles 2 El usuario pulsa el botón de recomendar a un contacto 3 Se selecciona el contacto de la lista de contactos 4 Se confirma la acción de enviar 5 Se envía una recomendación al contacto Postcondición Se ha enviado la recomendación al contacto seleccionado Excepciones 4 Se cancela la acción de enviar 5 No se ha podido enviar la recomendación Comentarios Tabla 12 Recomendar una actividad a un contacto AC-08 Aceptar/Rechazar actividad recomendada Versión 1.0.0 Prioridad Media Estabilidad Precondición El usuario tiene que estar registrado y haber iniciado sesión. Descripción Aceptar o rechazar la recomendación de un contacto Entrada ID actividad Salida NA
35 Secuencia normal 1 El usuario accede a la pantalla de recomendaciones de contactos 2 El usuario selecciona la actividad que desea aceptar/rechazar 3 El usuario selecciona la acción que desea realizar 4 Se confirma la acción de aceptar/rechazar 5* Se guarda la actividad en la lista de favoritas 6 Se elimina la recomendación de la lista de recomendaciones Postcondición Se ha aceptado/rechazado la recomendación del contacto Excepciones 4 Se cancela la acción de aceptar/rechazar 6 No se ha podido eliminar la recomendación Comentarios *Paso 5 solo en el caso de aceptar Tabla 13 Aceptar/Rechazar actividad recomendada AC-09 Ver lista de actividades recomendadas Versión 1.0.0 Prioridad Media Estabilidad Precondición El usuario tiene que estar registrado y haber iniciado sesión. El usuario debe haber seleccionado gustos previamente. Descripción Ver recomendaciones de actividades Entrada Etiquetas clave de los gustos del usuario Salida ID actividades 1 El usuario accede a la pantalla de recomendaciones
36 Secuencia normal 2 El sistema filtra las actividades en base a los gustos especificados por el usuario en su perfil. 3 El sistema muestra una lista con las actividades. Postcondición Se han visualizado las recomendaciones en base a los gustos del usuario. Excepciones 3 No se encuentran actividades Comentarios Tabla 14 Ver lista de actividades recomendadas 3. Gestión de planes En esta sección se describen los casos de uso del módulo funcional de “Planes”. PL-01 Generar plan de forma automática Versión 1.0.0 Prioridad Alta Estabilidad Precondición Deben existir actividades en la base de datos Descripción Los usuarios podrán crear un plan de actividades aleatorio o mediante unos filtros Entrada ID de filtros Salida ID de actividades que se adapten a los filtros establecidos Secuencia normal 1 El usuario accede a la aplicación y accede al apartado de planes 2 El sistema muestra la página principal de planes 3 El usuario selecciona la opción de generar plan automáticamente
37 4 El usuario selecciona los filtros que desee y selecciona el botón para realizar el plan 5 Se muestra el plan realizado Postcondición Se ha generado un plan Excepciones 5 No ha sido posible generar el plan Comentarios Tabla 15 Generar plan de forma automática PL-02 Generar plan de forma manual Versión 1.0.0 Prioridad Alta Estabilidad Precondición Deben existir actividades en la base de datos Descripción Los usuarios podrán crear un plan de actividades manualmente Entrada ID de actividades y horarios Salida NA Secuencia normal 1 El usuario accede a la aplicación y accede al apartado de planes 2 El sistema muestra la página principal de planes 3 El usuario selecciona la opción de generar plan manualmente 3 El usuario selecciona los las actividades y horarios que desee y selecciona el botón para realizar el plan 5 Se muestra el plan realizado Postcondición Se ha generado un plan
38 Excepciones 5 No ha sido posible generar el plan Comentarios Tabla 16 Generar plan de forma manual PL-03 Guardar plan en la lista de favoritos Versión 1.0.0 Prioridad Media Estabilidad Precondición El usuario tiene que estar registrado y haber iniciado sesión. El usuario tiene que encontrarse en la pantalla de planes. Descripción El usuario registrado puede guardar un plan en su lista de favoritos Entrada ID de plan Salida NA Secuencia normal 1 El usuario escoge un plan para ver sus detalles 2 El usuario pulsa el botón de guardar en favoritos 3 El sistema guarda el plan en la lista de planes favoritos del usuario Postcondición El plan se añade a la lista de favoritos Excepciones 3 No ha sido posible guardar el plan Comentarios Tabla 17 Guardar plan en la lista de favoritos PL-04 Modificar plan de la lista de favoritos Versión 1.0.0 Prioridad Media Estabilidad
39 Precondición El usuario debe estar registrado, haber iniciado sesión en el sistema y tener algún plan marcado como favorito. El usuario tiene que encontrarse en el apartado de usuario. Descripción El usuario registrado puede modificar sus planes favoritos Entrada ID de plan, ID actividades y horarios Salida ID plan Secuencia normal 1 El usuario accede al apartado de planes favoritos 2 El usuario pulsa el botón de modificar plan 3 El sistema muestra la página de creación de planes manualmente con los datos del plan seleccionado ya rellenos 4 El usuario modifica todos los campos que desee 5 El usuario selecciona la opción de guardar plan 6 El sistema actualiza la información del plan Postcondición El plan seleccionado se modifica Excepciones 6 No es posible modificar el plan Comentarios Tabla 18 Modificar plan de la lista de favoritos PL-05 Eliminar plan en la lista de favoritos Versión 1.0.0 Prioridad Media Estabilidad Precondición El usuario debe estar registrado, haber iniciado sesión en el sistema y tener algún plan marcado como favorito. El usuario tiene que encontrarse en el apartado de usuario.
40 Descripción El usuario registrado puede eliminar sus planes favoritos de la lista de planes favoritos Entrada ID de plan Salida NA Secuencia normal 1 El usuario accede al apartado de planes favoritos 2 El usuario pulsa el botón de eliminar de favoritos 3 El plan se elimina de los planes favoritos Postcondición El plan seleccionado se elimina de planes favoritos Excepciones 3 No es posible eliminar el plan de planes favoritos Comentarios Tabla 19 Eliminar plan en la lista de favoritos PL-06 Descargar plan como PDF Versión 1.0.0 Prioridad Alta Estabilidad Precondición Se tiene que haber creado un plan antes Descripción Los usuarios podrán eliminar el plan de actividades actual Entrada Identificador de actividades del plan Salida Secuencia normal 1 El usuario accede a la aplicación y accede al apartado de planes 2 El sistema muestra el plan establecido anteriormente 3 El usuario selecciona el botón de descarga del plan
41 4 Se descarga el plan en formato PDF Postcondición NA Excepciones Comentarios Tabla 20 Descargar plan como PDF PL-07 Recomendar un plan a un contacto Versión 1.0.0 Prioridad Media Estabilidad Precondición El usuario tiene que estar registrado y haber iniciado sesión. El usuario tiene que encontrarse en la pantalla de planes. Descripción Recomendar a un contacto la información relativa al plan. Entrada ID usuario del contacto, ID plan Salida NA Secuencia normal 1 El usuario escoge un plan para ver sus detalles 2 El usuario pulsa el botón de recomendar a un contacto 3 Se selecciona el contacto de la lista de contactos 4 Se confirma la acción de enviar 5 Se envía una recomendación al contacto Postcondición Se ha enviado la recomendación al contacto seleccionado Excepciones 4 Se cancela la acción de enviar
42 5 No se ha podido enviar la recomendación Comentarios Tabla 21 Recomendar un plan a un contacto PL-08 Aceptar/Rechazar plan recomendado Versión 1.0.0 Prioridad Media Estabilidad Precondición El usuario tiene que estar registrado y haber iniciado sesión. Descripción Aceptar o rechazar la recomendación de un contacto Entrada ID plan Salida NA Secuencia normal 1 El usuario accede a la pantalla de recomendaciones de contactos 2 El usuario selecciona el plan que desea aceptar/rechazar 3 El usuario selecciona la acción que desea realizar 4 Se confirma la acción de aceptar/rechazar 5* Se guarda el plan en la lista de favoritas 6 Se elimina la recomendación de la lista de recomendaciones Postcondición Se ha aceptado/rechazado la recomendación del contacto Excepciones 4 Se cancela la acción de aceptar/rechazar 6 No se ha podido eliminar la recomendación
43 Comentarios *Paso 5 solo en el caso de aceptar Tabla 22 Aceptar/Rechazar plan recomendado PL-09 Ver lista de planes recomendados Versión 1.0.0 Prioridad Media Estabilidad Precondición El usuario tiene que estar registrado y haber iniciado sesión. El usuario debe haber seleccionado gustos previamente. Descripción Ver recomendaciones de planes Entrada Etiquetas clave de los gustos del usuario Salida ID planes Secuencia normal 1 El usuario accede a la pantalla de recomendaciones 2 El sistema filtra los planes en base a los gustos especificados por el usuario en su perfil. 3 El sistema muestra una lista con los planes. Postcondición Se han visualizado las recomendaciones en base a los gustos del usuario. Excepciones 3 No se encuentran planes Comentarios Tabla 23 Ver lista de planes recomendados PL-10 Seleccionar un plan en lista de planes Versión 1.0.0 Prioridad Media Estabilidad
50 Secuencia normal 2 El usuario selecciona el contacto que desea aceptar 3 El usuario selecciona la acción que desea realizar 4 Se confirma la acción de aceptar 5 Se guarda el contacto 6 Se elimina la solicitud de la lista de solicitudes Postcondición Se ha aceptado la solicitud del contacto Excepciones 4 Se cancela la acción de aceptar 6 No se ha podido aceptar la solicitud Comentarios Tabla 31 Aceptar contacto CO-05 Rechazar contacto Versión 1.0.0 Prioridad Media Estabilidad Precondición El usuario debe estar registrado y haber iniciado sesión en el sistema. Descripción El usuario registrado puede rechazar la solicitud de un contacto Entrada Salida NA Secuencia normal 1 El usuario accede a la pantalla de solicitudes de contactos 2 El usuario selecciona el contacto que desea rechazar
51 3 El usuario selecciona la acción que desea realizar 4 Se confirma la acción de rechazar 5 Se elimina la solicitud de la lista de solicitudes de contactos Postcondición Se ha rechazado la solicitud del contacto Excepciones 4 Se cancela la acción de rechazar 5 No se ha podido rechazar la solicitud Comentarios Tabla 32 Rechazar contacto CO-06 Ver lista de solicitudes de contactos Versión 1.0.0 Prioridad Media Estabilidad Precondición El usuario debe estar registrado y haber iniciado sesión en el sistema. Descripción El usuario registrado puede ver la lista de solicitudes de contactos Entrada Salida NA Secuencia normal 1 El usuario accede a la pantalla de contactos 2 El usuario selecciona la lista de solicitudes de contactos 3 Se muestra la lista de solicitudes de contactos Postcondición Se ha mostrado la lista de solicitudes correctamente
52 Excepciones Comentarios 3 Si no existen solicitudes, se muestra un mensaje informativo Tabla 33 Ver lista de solicitudes de contactos 5. Administrar datos En esta sección se describen los casos de uso del módulo funcional de “Datos”. DA-01 Subir datos masivos Versión 1.0.0 Prioridad Baja Estabilidad Precondición El admin tiene que haber iniciado sesión Descripción Se pueden subir datos masivamente sobre actividades a la base de datos del sistema Entrada Datos que se quieren añadir Salida Datos recién añadidos Secuencia normal 1 El usuario se encuentra en la pantalla de actividades y selecciona la opción “Administrar Datos” 2 El sistema muestra una pantalla en la que se observan varias opciones a elegir por el usuario: “Modificar Datos”, “Subir Datos” y “Eliminar Datos” 3 El usuario hace clic en “Subir Datos” 4 El sistema muestra una pantalla que pide introducir los datos a añadir 5 El usuario hace clic en “Añadir” 6 El sistema muestra un mensaje preguntando por la confirmación
53 7 El usuario hace clic en “Continuar” 8 El sistema muestra por pantalla los datos recién añadidos Postcondición Los datos han sido añadidos al sistema Excepciones 8 El usuario hace clic en “Cancelar” 9 No se pueden añadir los datos Comentarios Tabla 34 Subir datos masivos DA-02 Subir datos individuales Versión 1.0.0 Prioridad Baja Estabilidad Precondición El admin tiene que haber iniciado sesión Descripción Se pueden subir datos individualmente sobre una actividad a la base de datos del sistema Entrada Datos que se quieren añadir Salida Datos recién añadidos Secuencia normal 1 El usuario se encuentra en la pantalla de actividades y selecciona la opción “Administrar Datos” 2 El sistema muestra una pantalla en la que se observan varias opciones a elegir por el usuario: “Modificar Datos”, “Subir Datos” y “Eliminar Datos” 3 El usuario hace clic en “Subir Datos” 4 El sistema muestra una pantalla que pide introducir los datos a añadir
54 5 El usuario hace clic en “Añadir” 6 El sistema muestra un mensaje preguntando por la confirmación 7 El usuario hace clic en “Continuar” 8 El sistema muestra por pantalla los datos recién añadidos Postcondición Los datos han sido añadidos al sistema Excepciones 8 El usuario hace clic en “Cancelar” 9 No se pueden añadir los datos Comentarios Tabla 35 Subir datos individuales DA-03 Modificar datos Versión 1.0.0 Prioridad Baja Estabilidad Precondición El admin tiene que haber iniciado sesión Descripción Se pueden modificar datos sobre actividades a la base de datos del sistema Entrada Salida Datos modificados Secuencia normal 1 El usuario se encuentra en la pantalla de actividades y selecciona la opción “Administrar Datos” 2 El sistema muestra una pantalla en la que se observan varias opciones a elegir por el usuario: “Modificar Datos”, “Subir Datos” y “Eliminar Datos”
55 3 El usuario hace clic en “Modificar Datos” 4 El sistema muestra una pantalla donde se pueden modificar los datos de las actividades 5 El usuario hace clic en “Modificar” 6 El sistema muestra un mensaje preguntando por la confirmación 7 El usuario hace clic en “Continuar” 8 El sistema muestra por pantalla los datos modificados Postcondición Los datos han sido modificados en el sistema Excepciones 8 El usuario hace clic en “Cancelar” 9 No se pueden modificar los datos Comentarios Tabla 36 Modificar datos DA-04 Eliminar datos Versión 1.0.0 Prioridad Baja Estabilidad Precondición Tienen que existir los datos que se quieren eliminar y el admin tiene que haber iniciado sesión Descripción Se pueden eliminar datos de actividades de la base de datos del sistema Entrada ID de los datos que se quieren eliminar Salida NA
56 Secuencia normal 1 El usuario se encuentra en la pantalla de actividades y selecciona la opción “Administrar Datos” 2 El sistema muestra una pantalla en la que se observan varias opciones a elegir por el usuario: “Modificar Datos”, “Subir Datos” y “Eliminar Datos” 3 El usuario hace clic en “Eliminar Datos” 4 El sistema muestra una pantalla que pide introducir los datos a eliminar 5 El usuario selecciona los datos a eliminar 6 El usuario hace clic en “Eliminar” 7 El sistema muestra un mensaje preguntando por la confirmación 8 El usuario hace clic en “Continuar” 9 El sistema vuelve a la pantalla que muestra las dos opciones al usuario: “Subir Datos” y “Eliminar Datos” Postcondición Ya no existen los datos eliminados Excepciones 8 El usuario hace clic en “Cancelar” 9 No se pueden eliminar los datos. Comentarios Tabla 37 Eliminar datos
57 Capítulo 5 - Modelo de datos En este capítulo se describe el modelo utilizado para realizar la persistencia de la información. 5.1 Modelo entidad relación En la ilustración 16 se muestra el modelo entidad-relación que se diseñó con las entidades que se tienen que gestionar para manejar la información de la base de datos. En la web se trabaja principalmente con los datos correspondientes a las actividades, los planes y los usuarios. En primer lugar, están los datos referidos al usuario. Todos los usuarios poseen información como el nombre, apellidos, email, nombre de la imagen de perfil, id, nombre de usuario y la contraseña codificada. En segundo lugar, se encuentran los planes que almacenan su nombre, descripción, fecha e id. Además, se guarda los id y hora de las actividades que forman cada plan. Finalmente, las actividades se dividen en cuatro grupos ya que cada tipo de actividad posee una información diferente: Los museos incluyen información como el nombre, descripción, descripción de la disponibilidad, horario, detalles sobre el transporte para acceder, dirección de la web relacionada con el museo, código postal, dirección, latitud, longitud, id, teléfono y email de contacto. Los monumentos incluyen información como el nombre, descripción, autores, fecha de inauguración, horario, detalles sobre el transporte para acceder, dirección de la web relacionada con el museo, código postal, dirección, latitud y longitud. Los eventos incluyen información como el nombre, descripción, precio, id, información sobre si es gratuito, horario de acceso, código postal, dirección, latitud, longitud, lugar, fecha de inicio y fecha de fin. Los restaurantes incluyen información como el nombre, descripción, horario, dirección de la web relacionada con el museo, dirección, código postal, dirección, latitud, longitud, id, teléfono y email de contacto.
58 Para todos los tipos de actividades se almacena información de las categorías. Estas se encuentran en tablas diferentes ya que están clasificadas según el tipo de categoría. En el caso de los eventos se guardan datos extra sobre audiencias y de la misma forma en los restaurantes se guarda información sobre subcategorías. En todos estos se guarda el nombre y el id. Se ha realizado por separado el modelo entidadrelación de esta información como se muestra en las ilustraciones 17 para los monumentos, 18 para los museos, 19 para los eventos y 20 para los restaurantes. Adicionalmente se almacenan las valoraciones que hacen los usuarios sobre las actividades o planes en otra entidad. Finalmente, se encuentra el sistema de contactos y recomendaciones. La entidad de recomendaciones incluye los id de los usuarios que forman parte de la recomendación y el tipo de actividad o plan que se recomienda junto a su id. La entidad de contacto incluye los id de los usuarios que se tienen agregados. Ilustración 16 Modelo Entidad-Relación de la información de la base de datos
59 Ilustración 17 Modelo Entidad-Relación de la información de las categorías de los monumentos Ilustración 18 Modelo Entidad-Relación de la información de las categorías de los museos Ilustración 19 Modelo Entidad-Relación de la información de las categorías de los eventos
66 Esta tabla contiene la información relacionada con la relación entre los eventos y las categorías a las que están asociados. Está formada por los siguientes campos de información: id_evento (int): Es el identificador de un evento. id_categoria (int): Es el identificador de una categoría que está asociada a una actividad o plan. 6. Tabla relacion_audiencia_eventos: Esta tabla contiene la información relacionada con la relación entre los eventos y las audiencias a las que están asociados. Está formada por los siguientes campos de información: id_evento (int): Es el identificador de un evento. id_audiencia (int): Es el identificador de una categoría que está asociada a una actividad o plan. 5.2.4 Tablas de museos En esta sección se describen las tablas que tienen información sobre los museos y las relaciones que tienen con los usuarios y los planes: 1. Tabla museos: Esta tabla contiene la información relacionada con los museos. Está formada por los siguientes campos de información: id (int): Es el identificador de un museo. nombre (varchar): Es el nombre de un museo. descripcion (varchar): Es la descripción de un museo. codpostal (varchar): Es el código postal de la localización de un museo. desc_sitio (varchar): Es una descripción breve de la información básica de acceso a un museo. email (varchar): Es el email de un museo. direccion (varchar): Es la descripción de un museo.
67 horario (varchar): Es el horario de acceso a un museo. latitud (varchar): Es la latitud de la ubicación de un museo. longitud (varchar): Es la longitud de la ubicación de un museo. telefono (varchar): Es el teléfono asociado a un museo. transporte(varchar): Es el nombre del transporte que se utiliza para acceder a un museo. url (varchar): Es la url de la web de un museo. 2. Tabla valoraciones_museos: Esta tabla contiene la información relacionada con la relación que hay entre un museo y su valoración. Está formada por los siguientes campos de información: id (int): Es el identificador de la valoración de un museo. id_museo (int): Es el identificador del museo al que pertenece la valoración. id_usuario (int): Es el identificador del usuario que realiza la valoración. valoracion (int): Es el número con el que el usuario valora la actividad o plan. 3. Tabla categorias_museos: Esta tabla contiene la información relacionada con las categorías de los museos. Está formada por los siguientes campos de información: id (int): Es el identificador de una categoría de un museo. categoria (varchar): Es el nombre de las categorías de un museo. 4. Tabla relacion_categorias_museos: Esta tabla contiene la información relacionada con la relación entre los museos y las categorías a las que están asociados. Está formada por los siguientes campos de información: id_museo (int): Es el identificador de un museo. id_categoria (int): Es el identificador de una categoría que está asociada a una actividad o plan.
68 5.2.5 Tablas de monumentos En esta sección se describen las tablas que tienen información sobre los monumentos y las relaciones que tienen con los usuarios y los planes: 1. Tabla monumentos: Esta tabla contiene la información relacionada con los monumentos. Está formada por los siguientes campos de información: id (int): Es el identificador de un monumento. nombre (varchar): Es el nombre de un monumento. descripcion (varchar): Es la descripción de un monumento. codpostal (varchar): Es el código postal de la localización de un monumento. autores (varchar): Es el nombre del autor de un monumento. fecha (varchar): Es la fecha de inauguración de un monumento. direccion (varchar): Es la dirección de un monumento. horario (varchar): Es el horario de acceso a un monumento. latitud (varchar): Es la latitud de la ubicación de un monumento. longitud (varchar): Es la longitud de la ubicación de un monumento. transporte (varchar): Es el nombre del transporte que se utiliza para acceder a un monumento. url (varchar): Es la url de la web de un monumento. 2. Tabla valoraciones_monumentos: Esta tabla contiene la información relacionada con la relación que hay entre un monumento y su valoración. Está formada por los siguientes campos de información: id (int): Es el identificador de la valoración de un monumento. id_monumento (int): Es el identificador del monumento al que pertenece la valoración. id_usuario (int): Es el identificador del usuario que realiza la valoración. valoracion (int): Es el número con el que el usuario valora la actividad o plan. 3. Tabla categorias_monumentos:
69 Esta tabla contiene la información relacionada con las categorías de los monumentos. Está formada por los siguientes campos de información: id (int): Es el identificador de una categoría de un monumento. categoria (varchar): Es el nombre de las categorías de un monumento. 4. Tabla relacion_categorias_monumentos: Esta tabla contiene la información relacionada con la relación entre los monumentos y las categorías a las que están asociados. Está formada por los siguientes campos de información: id_monumento (int): Es el identificador de un monumento. id_categoria (int): Es el identificador de una categoría que está asociada a una actividad o plan. 5.2.6 Tablas de restaurantes En esta sección se describen las tablas que tienen información sobre los restaurantes y las relaciones que tienen con los usuarios y los planes: 1. Tabla restaurantes: Esta tabla contiene la información relacionada con los restaurantes. Está formada por los siguientes campos de información: id (int): Es el identificador de un restaurante. nombre (varchar): Es el nombre de un restaurante. descripcion (varchar): Es la descripcion de un restaurante. codpostal (varchar): Es el código postal de un restaurante. email (varchar): Es el email de un restaurante. direccion (varchar): Es la dirección de un restaurante. horario (varchar): Es el horario de un restaurante. latitud (varchar): Es la latitud de la ubicación de un restaurante. longitud (varchar): Es la longitud de la ubicación de un restaurante. telefono (varchar): Es el teléfono de un restaurante. url (varchar): Es la url de la web de un restaurante.
70 2. Tabla valoraciones_restaurantes: Esta tabla contiene la información relacionada con la relación que hay entre un restaurante y su valoración. Está formada por los siguientes campos de información: id (int): Es el identificador de la valoración de un restaurante. id_restaurante (int): Es el identificador del restaurante al que pertenece la valoración. id_usuario (int): Es el identificador del usuario que realiza la valoración. valoracion (int): Es el número con el que el usuario valora la actividad o plan. 3. Tabla categorias_restaurantes: Esta tabla contiene la información relacionada con las categorías de los restaurantes. Está formada por los siguientes campos de información: id (int): Es el identificador de una categoría de un restaurante. categoria (varchar): Es el nombre de las categorías de un restaurante. 4. Tabla subcategorias_restaurantes: Esta tabla contiene la información relacionada con las subcategorías de los restaurantes. Está formada por los siguientes campos de información: id (int): Es el identificador de una subcategoría de un restaurante. subcategoria (varchar): Es el nombre de las subcategorías de un restaurante. 5. Tabla restaurantes_imagenes: Esta tabla contiene la información sobre las imágenes de los restaurantes. Está formada por los siguientes campos de información: id (int): Es el identificador de la imagen de un restaurante. id_restaurante (int): Es el identificador del restaurante al que pertenece la imagen. imagen (varchar): Es la ruta donde se encuentra la imagen. 6. Tabla relacion_categorias_restaurantes:
71 Esta tabla contiene la información relacionada con la relación entre los restaurantes y las categorías a las que están asociados. Está formada por los siguientes campos de información: id_restaurante (int): Es el identificador de un restaurante. id_categoria (int): Es el identificador de una categoría que está asociada a una actividad o plan. 7. Tabla relacion_subcategorias_restaurantes: Esta tabla contiene la información relacionada con la relación entre los restaurantes y las subcategorías a las que están asociados. Está formada por los siguientes campos de información: id_restaurante (int): Es el identificador de un restaurante. id_subcategoria (int): Es el identificador de una subcategoría que está asociada a una actividad. 5.2.7 Tablas de contactos En esta sección se describen las tablas que tienen información sobre los contactos y las relaciones que se dan entre usuarios: 1. Tabla contactos: Esta tabla contiene la información sobre la relación de los usuarios y sus contactos añadidos. Está formada por los siguientes campos de información: id_contacto (int): Es el identificador del usuario que es el contacto del usuario identificado. id_usuario (int): Es el identificador del usuario que está identificado. 2. Tabla solicitudes: Esta tabla contiene la información relacionada con la relación de los usuarios que envían solicitudes de contacto. Está formada por los siguientes campos de información: id_solicitante (int): Es el identificador del usuario que solicita una invitación a un contacto.
72 id_solicitud (int): Es el identificador del usuario que recibe la solicitud de contacto de otro usuario. 3. Tabla recomendaciones: Esta tabla contiene la información relacionada con la relación entre una actividad y los usuarios entre los que se da la recomendación. Está formada por los siguientes campos de información: id (int): Es el identificador de la recomendación. id_actividad (int): Es el identificador de la actividad o plan que se recomendó. id_contacto (int): Es el identificador del usuario al que se le recomienda una actividad o plan. id_usuario (int): Es el identificador del usuario que recomiendo una actividad o plan. tipo_actividad (varchar): Es el tipo de actividad que está en las tendencias (ya sea monumento, museo, restaurante, evento o plan). 5.2.8 Tablas de tendencias En esta sección se describen las tablas que tienen información sobre las tendencias correspondientes a las actividades y los planes: 1. Tabla tendencias: Esta tabla contiene la información sobre las actividades que son tendencias. Está formada por los siguientes campos de información: id (int): Es el identificador de la tendencia. id_actividad (int): Es el identificador de la actividad que está en tendencias. tipo_actividad (varchar): Es el tipo de actividad que está en las tendencias (ya sea monumento, museo, restaurante, evento o plan).
73 Capítulo 6 - Arquitectura de la web En este capítulo se describe la arquitectura que se ha definido para desarrollar la aplicación web. La arquitectura del sistema sigue el modelo cliente-servidor. El modelo clienteservidor es una arquitectura de diseño de software en la que las tareas se distribuyen entre los proveedores de recursos o servicios, llamados servidores, y los usuarios finales, llamados clientes. El servidor ofrece servicios específicos a los clientes, quienes, a su vez, envían peticiones al servidor para acceder a dichos servicios. En la ilustración 22 se ve reflejado como el cliente (este caso es un navegador web) hace una solicitud al servidor (paso 1 de la Ilustración 22) y el servidor responde satisfaciendo la solicitud del cliente (paso 5 de la Ilustración 22). El servidor espera a recibir las solicitudes del cliente. Cuando llegan, el servidor las procesa (pasos 2, 3 y 5 de la Ilustración 22) y envía la respuesta correspondiente.
74 Ilustración 22 Arquitectura del sistema
75 Capítulo 7 - Diseño de la web En este capítulo se explica porque se han tomado las decisiones del diseño de la web y los patrones que se han seguido. 7.1 Bootstrap 5.0 Para la programación de la interfaz visual de la web se ha utilizado un framework gratuito llamado Bootstrap 5 [16]. Bootstrap 5 es un framework enfocado al desarrollo de aplicaciones webs. Se han usado componentes ofrecidos por este framework como formularios, botones, barras de navegación o acordeones. 7.2 Estilo Se ha seguido un estilo de diseño plano. En este estilo se elimina la profundidad de los iconos y se utilizan formas geométricas básicas. Además, se utiliza una tipografía clara y se eliminan las texturas y gradientes. Usando este estilo se intenta eliminar la sobrecarga de elementos y colores. En las páginas principales donde se muestran todas las actividades y planes se ha intentado mantener consistencia interna. Para esto, la vista de todas las actividades y planes se realiza usando unas “cards” para mostrar sus atributos principales, acceder a su descripción o guardar a favoritos. Usando esta implementación se intenta facilitar al usuario el uso de los dos tipos al tener una apariencia similar ya que tienen una funcionalidad muy parecida. 7.3 Iconos Para ofrecer al usuario facilidad y que la web sea intuitiva se han establecido iconos habituales y estándares manteniendo la consistencia externa con otras webs y aplicaciones. Para representar la valoración de una actividad o plan se ha elegido el icono de una estrella, para añadir a favoritos se ha establecido un corazón y los iconos de cada tipo de actividad representan la actividad correspondiente. Estos iconos se
82 Ilustración 32 Código uso de la librería MapBox Ilustración 33 Código gestión de coordenadas de la ubicación
83 Ilustración 34 Card que se muestra en el mapa de actividades 8.3 Funcionalidad referida a la generación de PDF En el perfil de un plan se encuentra esta funcionalidad que permite a los usuarios descargarse un PDF que resume el itinerario. Tal y como se muestra en la Ilustración 35, pulsando el botón de descarga, se descarga en el navegador el documento. Esto es posible gracias a la librería Jspdf. Para hacer uso de esta librería se importa el script y se utilizan sus funciones que están definidas en Javascript, puede verse en Ilustración 36. En la Ilustración 37 se muestra el contenido del documento PDF generado.
84 Ilustración 35 Vista del perfil del plan que muestra una descarga Ilustración 36 Código descarga de PDF usando la librería jSPDF
85 Ilustración 37 Ejemplo PDF resultante 8.4 Funcionalidad referida a la creación de planes 8.4.1 Creación manual de planes Esta función permite al usuario crear sus planes mediante el formulario que se muestra en la Ilustración 38. Este se rellena manualmente. Permite establecer libremente todos los campos del itinerario que desea seguir el usuario y crear un plan a su medida.
86 Ilustración 38 Formulario para crear un plan 8.4.2 Generación automática de planes Tal y como puede verse en la Ilustración 38 vista anteriormente, a la hora de crear un plan se ofrece también la posibilidad de generar un plan automáticamente. Pulsando el botón “Generar plan”, se abre el Modal que se muestra en la Ilustración 39. Para generar el plan, el usuario deberá elegir los criterios que se seguirán para generar el plan y la fecha en la que quiere realizarlo. Las actividades se eligen aleatoriamente de la lista de actividades que se seleccione. Puede ser de la lista general (opción “Aleatorio”), de la lista de tendencias (opción “Tendencias”), de la lista de actividades favoritas del usuario (opción “Actividades favoritas”) o de lista de actividades que coincidan con los gustos del usuario, que previamente han establecido en su perfil (opción “Categorías favoritas”). En la Ilustración 40 puede verse como dependiendo de la opción que se ha seleccionado, se elige de una lista u otra. En el caso de la opción “Categorías favoritas”, se obtiene la lista de todas las actividades, pero a la hora de elegir aleatoriamente una actividad de esa lista primero comprueba si tiene alguna de las categorías elegidas por el usuario para ese tipo de actividad y en caso de no coincidir, elige actividades hasta que encuentre alguna que cumpla con las condiciones, tal y como se muestra en la Ilustración 41.
87 Ilustración 39 Modal para generar un plan automáticamente
88 Ilustración 40 Código selección de la lista de actividades Ilustración 41 Código selección de actividad aleatoria que contenga una categoría 8.5 Funcionalidad referida a la gestión de datos (Administrador) El usuario administrador puede gestionar todos los datos que se encuentran en la web. Para ello se ofrece un panel al que sólo tienen acceso este tipo de usuarios y al que se puede acceder desde la cabecera. 8.5.1 Visibilizar datos Esta funcionalidad permite visibilizar todos los datos de la aplicación mediante la tabla de la Ilustración 42. Esta vista permite ver todos los datos guardados en la base de
89 datos, copiarlos, descargarlos en un Excel, guardarlos como PDF y seleccionar las columnas que desea ver en caso de no querer visualizar todas. Para esto se importa el script DataTables y se define una función en Javascript en la vista para hacer uso de la librería como puede verse en la Ilustración 43. Esta función hace que todas las tablas que se definan con clase “table table-striped” e id “example” hagan uso de la librería. La Ilustración 44 es un ejemplo del uso. Ilustración 42 Panel de visualizar datos del administrador Ilustración 43 Código uso de DataTables
90 Ilustración 44 Código creación de tablas 8.5.2 Subir datos masivos Esta funcionalidad permite al administrador subir grandes cantidades de datos a la aplicación desde un Excel [21]. Los botones de la Ilustración 45 de “Descargar platilla”, descargan una plantilla como la mostrada en la Ilustración 46, que contiene todos los campos de la base de datos y un ejemplo del tipo de datos que se espera recibir en cada uno (la primera fila de ejemplo no es procesada en la subida de los datos). En la subida de datos se hace uso de la API PHPExcel [22] que permite leer datos del archivo Excel que sube el usuario para así subirlos a la base de datos. En la Ilustración 47 puede verse un ejemplo del uso de la API.
91 Ilustración 45 Página para subir datos masivos a la aplicación Ilustración 46 Plantilla de ejemplo para subir datos masivos Ilustración 47 Código de uso de la API PHPExcel
99 CONTRIBUCIONES PERSONALES Estudiante 1 Nuria Alonso González Ingeniería de requisitos o Planteamiento Participó en el planteamiento y desarrollo de la idea principal junto a Luis, mantuvo reuniones para establecer el alcance y objetivos del proyecto. o Especificación Una vez establecidos las funcionalidades participó junto a Luis en el desarrollo de la especificación de requisitos y la creación de tablas de casos de uso de la aplicación. Desarrollo o Modelado de los datos Participó junto a Luis en el diseño del modelo entidad-relación y en la implementación de los diagramas y estructuras de los datos. o Extracción e importación de datos del ayuntamiento de Madrid Extrajo los datos de la página web de la comunidad de Madrid y desarrolló un script para importar los datos obtenidos a la base de datos de la aplicación. o Implementación iteración cuentas de usuario Desarrolló la vista y la funcionalidad del perfil del usuario, el perfil del contacto, inicio de sesión, registro, cierre de sesión y borrar cuenta de usuario. Desarrolló e implementó junto a Luis la funcionalidad de recuperar contraseña. o Implementación de la iteración administrar datos
100 Desarrolló el panel de administración haciendo uso de un sidebar, y la librería Datatables. También desarrolló formularios para subir datos a la aplicación y la funcionalidad de subir datos masivos a la aplicación haciendo uso de la librería PHPExcel e implementó la descarga de plantillas para la subida de los datos. o Implementación de la iteración gestión de contactos Desarrolló la vista y la funcionalidad de la página de contactos, de solicitudes de contactos y de recomendaciones de contactos. o Implementación de las iteraciones de actividades y planes Desarrolló la vista del perfil de las actividades y los planes junto a las funcionalidades correspondientes de esa vista de valorar, guardar en favoritos, recomendar a otros contactos, mostrar el mapa mediante la ubicación y descargar PDF en el caso del perfil del plan. Desarrolló la vista y la funcionalidad del filtrado de planes y actividades, de creación de planes y generación de planes automáticos. Memoria Participó en el primer capítulo en la redacción del plan de trabajo, el diagrama de Gantt y la estructura de la memoria. Participó en la elaboración del segundo capítulo de la memoria donde se especifican aplicaciones web que utilizan herramientas y manejan datos similares a los del trabajo añadiendo las ilustraciones que se muestran y haciendo referencia a ellas en el texto. Participó en la redacción de algunas de las tecnologías especificadas en el tercer capítulo. Participó junto a Luis en la redacción de los actores y la realización de las tablas de los casos de uso.
101 En el quinto capítulo junto a Luis, se realizó la explicación del modelo entidad-relación y de la estructura de los datos. Redactó la descripción de la arquitectura de la aplicación en el capítulo séptimo. Redactó las funcionalidades más importantes de la aplicación y añadió las referencias a imágenes y código de la aplicación que se muestran en el capítulo octavo. Añadió las referencias a las ilustraciones y tablas y generó las tablas de contenido. Redactó las traducciones del texto del resumen, introducción y conclusión.
102 Estudiante 2 Luis Pecos Sánchez Ingeniería de requisitos Participó en el desarrollo de la idea inicial de la aplicación web. Para ello se mantuvieron reuniones con Nuria y el tutor donde se plantearon diferentes ideas de trabajos. Una vez escogido el trabajo, se pensó la funcionalidad que se iba a implementar estableciendo los requisitos. Posteriormente, se llevó a cabo la elección y creación de los casos de uso finales que se desarrollarían. Cuando el proyecto ya tenía una base se empezó a pensar la fuente de extracción de los datos de actividades que se iban a utilizar y distintas webs o APIs que pudiesen ser de utilidad para la implementación en un futuro. Desarrollo del trabajo o Modelado de los datos Participó junto a Nuria en el diseño del modelo entidad-relación y en la implementación de los diagramas y estructuras de los datos. o Diseño e implementación del perfil Participó en el desarrollo del perfil del usuario, el perfil del contacto, inicio de sesión y recuperación de contraseña. Realizó la implementación y desarrollo de alertas de confirmación y error que se generan dependiendo del resultado de las acciones que realiza el usuario. o Diseño e implementación del administrador Desarrolló de la vista y funcionalidad de la administración de datos del administrador. Implementó y desarrolló las alertas de añadir, modificar y eliminar que se generan dependiendo del resultado de las acciones que realiza el administrador. o Diseño e implementación de los planes
103 Participó en la implementación de la página principal de actividades junto a las funcionalidades correspondientes de esa vista de filtrar, buscar por nombre y buscar por geolocalización los sitios cercanos en el mapa. Implementó los cuatro tipos de actividades principales junto a sus funcionalidades. o Diseño e implementación de las actividades Desarrolló la vista del perfil de los planes junto a las funcionalidades correspondientes de esa vista de valorar, guardar en favoritos, recomendar a otros contactos y filtrar por características. Memoria Participó en el capítulo 1 en la redacción de la motivación de realizar la aplicación web, los objetivos a conseguir durante el trabajo y la estructura de la memoria. Realizó la elaboración del segundo capítulo de la memoria donde se especifican aplicaciones web que utilizan herramientas y manejan datos similares a los del trabajo. Redactó el tercer capítulo donde se describe la tecnología más importante utilizada durante el desarrollo del trabajo. Realizó en cuarto capítulo los diagramas de casos de uso y participó junto a Nuria en la redacción de los actores y la realización de las tablas de los casos de uso. En el quinto capítulo junto a Nuria, realizó la explicación del modelo entidad-relación y el diseño de los diagramas entidad-relación. Redactó la descripción del estilo y los componentes utilizados en el diseño de la aplicación web en el sexto capítulo.
104 También en el noveno capítulo escribió la conclusión a la que se llegó después de la realización del proyecto y algunas ideas que se llevarán a cabo en el futuro para mejorar el trabajo. Finalmente, en el apéndice redactó la guía básica de utilización de la aplicación web que describe las funcionalidades principales.
105 BIBLIOGRAFÍA [1] Un buen día en Madrid, [En línea]. Available: https://unbuendiaenmadrid.com/. [2] Espacio Madrid, [En línea]. Available: http://www.espaciomadrid.es/. [3] Comiendo pipas, «Comiendo pipas,» [En línea]. Available: https://www.comiendopipas.com/. [4] Madrid Diferente, «Madrid Diferente,» [En línea]. Available: https://madriddiferente.com/. [5] Madrid Experience, «Madrid Experience,» [En línea]. Available: https://madridexperience.com/. [6] Visual Studio Code, «Visual Studio Code,» [En línea]. Available: https://code.visualstudio.com/. [7] Microsoft, «Microsoft,» [En línea]. Available: https://www.microsoft.com/es-es. [8] Github Desktop, «Github Desktop,» [En línea]. Available: https://desktop.github.com/. [9] Github, «Github,» [En línea]. Available: https://github.com/. [10] MariaDB, «MariaDB,» [En línea]. Available: https://mariadb.org/. [11] Apache, «Xampp,» [En línea]. Available: https://www.apachefriends.org/es/index.html. [12] Apache, «Apache,» [En línea]. Available: https://httpd.apache.org/.
106 [13] MySQL, «MySQL,» [En línea]. Available: https://www.mysql.com/. [14] JavaScript, «JavaScript,» [En línea]. Available: https://www.javascript.com/. [15] Git, «Git,» [En línea]. Available: https://git-scm.com/. [16] Bootstrap, «Introduction · Bootstrap v5.0,» [En línea]. Available: https://getbootstrap.com/docs/5.0/getting-started/introduction/. [17] Font Awesome, «Font Awesome,» [En línea]. Available: https://fontawesome.com/. [18] BrandMark, «BrandMark,» [En línea]. Available: https://brandmark.io/. [19] D. Lázaro, «GET y POST en PHP,» [En línea]. Available: https://diego.com.es/get-ypost-en-php. [20] MapBox, «MapBox,» [En línea]. Available: https://www.mapbox.com/. [21] Microsoft, «Microsoft Excel,» [En línea]. Available: https://www.microsoft.com/eses/microsoft-365/excel. [22] PowerKiKi, «Github,» [En línea]. Available: https://github.com/PHPOffice/PHPExcel. [23] Synchro, «Github,» [En línea]. Available: https://github.com/PHPMailer/PHPMailer. [24] Composer, «Composer,» [En línea]. Available: https://getcomposer.org/. [25] GitMind, «GitMind,» [En línea]. Available: https://gitmind.com/es/.
107 APÉNDICES Apéndice A - Guía de usuario En este Apéndice se detalla el uso de las diferentes vistas de la aplicación. Página de inicio (Home) Es la primera página que se muestra al acceder a la aplicación. Desde esta se puede acceder a las funcionalidades principales de la web. A través de los botones diferentes que se encuentran en la cabecera de la Ilustración 53, el usuario puede registrarse (botón “sign-up”), iniciar sesión (botón “login”) y acceder a las páginas de planes o actividades. En la Ilustración 54 se pueden ver tres actividades recomendadas. Se permite acceder a ella a través del botón “Ver detalles”. Ilustración 53 Página principal de la aplicación
108 Ilustración 54 Actividades recomendadas en la página principal Página de registro En esta página se encuentra un formulario como se puede ver en la Ilustración 55 que permite al usuario crearse una cuenta introduciendo sus datos. Además, obliga al usuario elegir categorías desde un selector multi opción como el que se muestra en lustración 56. Este selector contiene las diferentes categorías de las actividades para manejar información sobre sus gustos y poder recomendar actividades más tarde. Para completar el registro el usuario debe rellenar todos los campos obligatorios y pulsar el botón de “Sign-in”.
115 Ilustración 64 Botón de me gusta Ilustración 65 Apartado para valoraciones Para realizar la recomendación de una actividad el usuario registrado debe tener algún contacto añadido. Al pulsar el botón de recomendar tendrá que seleccionar el usuario al que desea recomendar la actividad como se muestra en la Ilustración 66. Ilustración 66 Apartado para recomendar actividad a contactos
116 Página de planes En esta página se listan los planes que se encuentran en la base de datos como se puede ver en la Ilustración 67. Ilustración 67 Página que muestra todos los planes El usuario puede seleccionar entre ver los planes que son tendencia o ver todos los planes. Si el usuario selecciona tendencias se mostrarán todos los planes que se encuentran en la lista de tendencias seleccionados por el administrador. Los planes se pueden filtrar pulsando en el botón “Filtrar” que aparece en la parte superior derecha de la Ilustración 67. Al pulsarlo se mostrará el modal en el que se puede elegir filtrar según varias características como la valoración, la fecha o las características como se puede ver en la Ilustración 68. Ilustración 68 Card de [7] [7] plan Los planes se listan en filas con tres planes en cada una si existen. En cada plan el usuario tiene las opciones de añadir a favoritos o ver los detalles del plan.
117 Al pulsar en el nombre del plan se accede a los detalles del plan como se muestra en la Ilustración 69 se muestran la información del plan. Concretamente se muestran los datos principales y las actividades que forman el itinerario junto a sus horas. Además, si el usuario está registrado se le permitirá valorarlo desde el formulario de la Ilustración 70, añadirlo a favoritas pulsando en el botón con forma de corazón y recomendarlo a uno de los contactos que tiene añadidos de la misma forma que se hacía en las actividades. Desde los botones que se muestran en la Ilustración 71 se puede descargar el plan como PDF y modificar el plan. Al pulsar el botón de modificar plan se muestra la vista de la Ilustración 72 en la que se pueden editar todos los campos del plan, añadir o eliminar actividades del plan pulsando los botones verde y rojo respectivamente y guardarlo pulsando en el botón de “Actualizar”. Ilustración 69 Perfil del plan
118 Ilustración 70 Formulario para valorar un plan Ilustración 71 Botón para descargar un plan Ilustración 72 Formulario para modificar un plan
119 Para finalizar un usuario registrado tiene la posibilidad de crear un plan manualmente rellenando el formulario de la Ilustración 74 y pulsando el botón de “Guardar” o generar un plan automáticamente rellenando unos filtros que se muestran en las Ilustración 73 y pulsando el botón de “Generar plan”. Ilustración 73 Modal para generar planes automáticamente
120 Ilustración 74 Formulario para crear un plan manualmente Página de usuario En la página de la Ilustración 75 se muestran los datos del usuario y se permite modificar la información del usuario y las categorías seleccionadas. Para actualizar el perfil el usuario deberá realizar cambios en el formulario con sus datos y pulsar el botón “Save profile”. Si desea cerrar la sesión el usuario debe pulsar el botón “Logout”. Para ver la lista de planes o actividades favoritas el usuario deberá pulsar el botón “Actividades favoritas” que abre el desplegable de la Ilustración 76. Para editar las características con las preferencias del usuario, este debe realizar cambios en los selectores que se muestran en la parte inferior derecha y que se muestran más al detalle en la Ilustración 77.
121 Ilustración 75 Perfil del usuario Desplegables con las listas de favoritos
122 Ilustración 76 Lista de actividades favoritas
123 Ilustración 77 Formulario para editar las características de un usuario Página de contactos En esta página el usuario puede ver los contactos que tiene añadidos, acceder a su perfil y eliminarlos como se muestra en la Ilustración 78. También se puede enviar solicitudes de seguimiento pulsando en el botón de “Agregar” que despliega el formulario de “Añadir contacto” y escribiendo el correo de otro usuario y confirmando la acción. Para acceder al perfil del contacto que se muestra en la Ilustración 79, el usuario debe pulsar en el nombre del usuario de la vista de contactos. En este encontramos las actividades favoritas del contacto y podemos visitarlas pulsando en el nombre o guardarlas en favoritos pulsando en el botón con forma de corazón. Pulsando en el botón rojo se eliminará el contacto de la lista de contactos.
124 Ilustración 78 Página para gestionar contactos Ilustración 79 Perfil de contacto Página de solicitudes En esta página el usuario puede ver las solicitudes de seguimiento enviadas por otros usuarios y aceptarla o eliminarla como se muestra en la Ilustración 80. Para aceptar la solicitud el usuario deberá pulsar el botón de color verde, esta acción añadirá el Botón que despliega el formulario para Botón que envía Botón que elimina el contacto
131 Plantilla de eventos La primera fila de la Ilustración 89 contiene todos los campos que puede almacenar un evento en la base de datos, la segunda fila da un ejemplo del tipo de datos esperado para cada campo. El resto de filas vacías deberán rellenarse, una fila por cada evento que se quiera subir a la aplicación. Ilustración 89 Plantilla de datos de eventos Plantilla de monumentos La primera fila de la Ilustración 90 contiene todos los campos que puede almacenar un monumento en la base de datos, la segunda fila da un ejemplo del tipo de datos esperado para cada campo. El resto de filas vacías deberán rellenarse, una fila por cada monumento que se quiera subir a la aplicación. Ilustración 90 Plantilla de datos de monumentos Las plantillas pueden verse a través del siguiente enlace: https://github.com/nalonsozalcu/TFG/tree/main/files/plantillas