ESNELL: Una herramienta para la búsqueda online de servicios a domicilio

I ESNELL: UNA HERRAMIENTA PARA LA BÚSQUEDA ONLINE DE SERVICIOS A DOMICILIO TRABAJO FIN DE GRADO CURSO 2022-2023 MARÍA CAÑAS ENCINAS DIRECTOR ANTONIO SARASA CABEZUELO GRADO EN INGENIERÍA INFORMÁTICA FACULTAD DE INFORMÁTICA UNIVERSIDAD COMPLUTENSE DE MADRID Junio - 2023 II ESNELL: A TOOL FOR ONLINE SEARCH OF HOME SERVICES FINAL DEGREE PROJECT REPORT MARÍA CAÑAS ENCINAS DIRECTED BY ANTONIO SARASA CABEZUELO DEGREE IN COMPUTER ENGINEERING FACULTAD DE INFORMÁTICA COMPLUTENSE UNIVERSITY OF MADRID JUNE 2023 1 DEDICATORIA A todos mis seres queridos, que me acompañaron a llegar hasta aquí. 2 AGRADECIMIENTOS En primer lugar, me gustaría agradecer la oportunidad que se me ha dado para realizar este trabajo, a mi tutor, Antonio Sarasa Cabezuelo, dado que siempre ha estado totalmente disponible para cualquier duda o pregunta que tuviera sobre el proyecto, además de que la comunicación que se ha tenido durante todo el curso ha sido de gran ayuda a la hora de completar este proyecto. También me gustaría agradecer el apoyo recibido durante todo el curso por parte de mis familiares, ya que siempre han estado ayudando y aportando ideas con el objetivo de mejorar este proyecto. 3 RESUMEN Este trabajo tiene como objetivo crear una página web donde se ofrezca la ayuda a aquellas personas que la necesiten, ofreciendo así una manera fácil y rápida de poder satisfacer las necesidades que tienen los clientes. En concreto los clientes disponen de un buscador de servicios, con diferentes filtros con el objetivo de que encuentren de una manera más rápida y fácil la ayuda que están buscando, mientras que los profesionales podrán añadir los servicios que quieran prestar así como indicar su disponibilidad. El sistema desarrollado está formado por una aplicación web junto con la información añadida a la base de datos y esta irá aumentando a medida que los profesionales y clientes hacen uso de ella. Palabras clave Servicios, Profesionales, Clientes, Ayuda, Trabajo. 4 ABSTRACT This work aims to create a web page where help is offered to those who need it, thus offering an easy and fast way to satisfy the needs of customers. Specifically, clients have a service search engine, with different filters with the aim of finding the help they are looking for more quickly and easily, while professionals can add the services they want to provide as well as indicate their availability. The developed system consists of a web application together with the information added to the database and this will increase as professionals and clients make use of it. Keywords Services, Professionals, Clients, Help, Work. 5 ÍNDICE GENERAL Dedicatoria .............................................................................................................................. 1 Agradecimientos ..................................................................................................................... 2 Resumen ................................................................................................................................... 3 Abstract .................................................................................................................................... 4 Índice general .......................................................................................................................... 5 Índice de figuras ...................................................................................................................... 9 Índice de tablas ......................................................................................................................12 Capítulo 1 - Introducción .......................................................................................................14 1.1 Estructura de la memoria .............................................................................................14 1.2 Motivación ....................................................................................................................14 1.3 Objetivos ........................................................................................................................15 1.4 Plan de trabajo .............................................................................................................16 Chapter 1 – Introduction ........................................................................................................21 1.1 Motivation .....................................................................................................................21 1.2 Objective .......................................................................................................................21 1.3 Work organization .........................................................................................................22 Capítulo 2 - Estado del arte ...................................................................................................26 2.1 Wallapop .......................................................................................................................26 2.2 Taskrabbit ......................................................................................................................26 2.3 Freelancer .....................................................................................................................27 2.4 Uber ................................................................................................................................27 2.5 Upwork ...........................................................................................................................27 6 Capítulo 3 - Tecnología empleada ......................................................................................28 3.1 HTML5 .............................................................................................................................28 3.2 CSS .................................................................................................................................28 3.3 Bootstrap .......................................................................................................................28 3.4 PHP .................................................................................................................................28 3.5 SQL .................................................................................................................................29 3.6 Xampp Apache ............................................................................................................29 3.7 Visual Studio Code .......................................................................................................29 Capítulo 4 - Casos de uso ......................................................................................................30 4.1 Actores ...........................................................................................................................30 4.2 Diagramas de caso de uso .........................................................................................30 4.2.1. Diagrama de cliente ................................................................................................31 4.2.2. Diagrama de profesional .........................................................................................32 4.2.3. Diagrama de administrador ....................................................................................32 4.2.4. Diagrama usuario no registrado ..............................................................................33 4.3 Especificación de requisitos .........................................................................................34 4.3.1. Módulo de gestión de cuentas ...............................................................................34 4.3.2. Módulo de funciones del profesional .....................................................................37 4.3.3. Módulo de funciones del usuario registrado ..........................................................40 4.3.4. Módulo de funciones del administrador .................................................................42 4.3.5. Módulo de gestión de valoraciones .......................................................................46 4.3.6. Módulo de gestión de lista de favoritos .................................................................48 Capítulo 5 - Arquitectura de la Aplicación y modelo de Datos ........................................50 5.1 Arquitectura de la aplicación .....................................................................................50 7 5.2 Estructura de la base de datos ...................................................................................50 5.2.1 Tabla categorías ....................................................................................................53 5.2.2 Tabla dispoprofesional ...........................................................................................53 5.2.3 Tabla favoritos ........................................................................................................53 5.2.4 Tabla seraceptados ...............................................................................................54 5.2.5 Tabla servicio ..........................................................................................................54 5.2.6 Tabla solicitudescliente..........................................................................................55 5.2.7 Tabla soliservicios ...................................................................................................55 5.2.8 Tabla usuario ..........................................................................................................56 Capítulo 6 - Implementación y diseño de la aplicación ....................................................58 6.1 Diseño de la aplicación ...............................................................................................58 6.2 Implementación de la aplicación web ......................................................................59 6.2.1 Sección administrador ...........................................................................................59 6.2.2 Sección cliente .......................................................................................................68 6.2.3 Sección profesional ...............................................................................................75 6.2.4 Sección usuario ......................................................................................................81 Capítulo 7 - Conclusiones y trabajo futuro ...........................................................................92 7.1 Conclusiones .................................................................................................................92 7.2 Trabajo futuro ................................................................................................................92 Chapter 7 - Conclusions and future work .............................................................................95 7.1. Conclusions ..........................................................................................................95 7.2. Future work ...........................................................................................................95 Bibliografía...............................................................................................................................97 Anexo A ...................................................................................................................................98 14 Capítulo 1 - Introducción Este trabajo de Fin de Grado (TFG) consiste en la realización de una página web, en el que profesionales ofrecerán sus servicios a clientes (Ambos previamente registrados), y estos podrán solicitar su ayuda con el objetivo de que el problema que tengan sea resuelto. 1.1 Estructura de la memoria La memoria de este TFG se ha dividido en diferentes apartados, los cuales son: La portada del TFG, la sección de dedicatoria y los agradecimientos, un resumen sobre en que consiste la aplicación desarrollada, el índice general donde se pueden ver los diferentes apartados de la memoria junto con la página en la que se encuentra cada apartado, el índice de las figuras y de las tablas, los diferentes capítulos que forman la memoria como el capítulo 1 donde se realiza la introducción a este TFG junto con el plan de trabajo, el capítulo 2 donde se describen aplicaciones cuya funcionalidad es parecida a la aplicación desarrollada, el capítulo 3 donde se encuentran las tecnologías utilizadas en la implementación del código, el capítulo 4 donde se encuentran definidos los casos de uso, el capítulo 5 donde se explica la arquitectura de la aplicación y la base de datos, el capítulo 6 en el que se explica la implementación y el diseño de la aplicación, y el último capitulo el 7 donde se comentan las conclusiones y el trabajo futuro a realizar en la aplicación y las dos últimas partes de esta memoria son la bibliografía y el anexo donde se puede encontrar una guía de uso de la aplicación web. 1.2 Motivación Este trabajo de Fin de Grado se basa en desarrollar una página web de ofrecimiento de servicios de profesionales hacia clientes. Gracias a esta página web los clientes podrán solicitar la ayuda de profesionales que ofrezcan servicios relacionados con su consulta. La principal motivación que hay detrás de este proyecto, radica en el gran aumento de la demanda de servicios en línea debido a la pandemia de Covid-19 15 iniciada en el año 2020, ya que muchas personas se vieron obligadas a quedarse en casa y tuvieron que buscar alternativas de ofrecer servicios, pudiendo así ampliar más sus conocimientos de manera independiente y poder facilitar la vida de las personas ofreciendo esa ayuda que necesiten. La creación de esta página web es una solución efectiva para poder satisfacer esta demanda creciente ayudando así a tanto los profesionales como los clientes, ya que los profesionales podrán ofrecer sus conocimientos mediante servicios y los clientes podrán recibir esa ayuda que están buscando. 1.3 Objetivos El objetivo principal de este trabajo es ofrecer una experiencia única al cliente al facilitar la contratación de servicios, realizándolo así de una manera fácil, segura y cómoda. Este objetivo se particulariza en los siguientes objetivos más específicos: • Analizar el mercado: Su objetivo es analizar el mercado de los servicios que ofrecen los profesionales. Es decir, poder identificar las necesidades y demandas de los clientes, pudiendo así conocer los servicios más demandados a día de hoy y poder conocer a los mejores profesionales de esa rama. • Diseñar la página web: Este sería el segundo objetivo, el poder diseñar una página web que cuente con una interfaz atractiva, intuitiva y fácil de usar. Para ello, se contará con una estructura clara y organizada, para que cualquiera de los usuarios pueda navegar de una manera sencilla y así poder encontrar la información que busca sin dificultad. • Implementar funcionalidades: El tercer objetivo sería implementar unas funcionalidades que faciliten la interacción entre los profesionales y los clientes. Ya que por ejemplo, una vez se dé por completado el servicio, el cliente podrá dejar una valoración sobre el servicio que le ha prestado ese profesional. 16 • Evaluar la satisfacción del usuario: Este cuarto objetivo se podrá lograr, como se ha comentado antes, mediante la valoración de los clientes a los profesionales en forma de valoraciones. • Garantizar la seguridad: El último de los objetivos sería garantizar la seguridad de la información tanto de los clientes como de los profesionales. Ya que se contará con un usuario, siendo este el administrador de la página, el que podrá ver/eliminar la información acerca de los usuarios registrados. 1.4 Plan de trabajo En este apartado se presenta un plan de trabajo que incluye las tareas principales que se llevan a cabo para el cumplimiento de los objetivos enumerados en el anterior apartado. La Tabla 1 1 muestra una estimación que se acordó al principio del curso sobre la duración de cada entrega, así como una representación visual mediante un diagrama de Gantt en la Figura 1 1 .Para llevar a cabo esta representación se ha utilizado el programa Canva [1] . 17 Etapa Duración Especificación de Requisitos 5 Septiembre – 17 Septiembre Módulo de Gestión de Cuentas 3 Octubre – 30 Octubre Funciones del Profesional 7 Noviembre – 18 Diciembre Funciones del Usuario Registrado 26 Diciembre – 5 Febrero Funciones del Administrador 13 Febrero – 5 Marzo Gestión de Valoraciones 13 Marzo – 2 Abril Figura 1.1 Diagrama de Gantt con las etapas del desarrollo del proyecto Figura 1 1 Diagrama de Gantt con las etapas del desarrollo del proyecto 18 Presentación al cliente 18 Abril Gestión de la lista de favoritos 10 Abril - 30 Abril Desarrollo de la memoria 18 Abril - 16 Mayo Tabla 1 1 Duración y etapas en el desarrollo del proyecto A continuación se explican cuáles han sido las fases que se han llevado a cabo para el desarrollo del proyecto. Fase 1: Especificación de Requisitos Esta primera fase se realizó la discusión y especificación de los casos de uso que van a formar parte de la aplicación web, para ello se tuvo una reunión con el tutor para hablar sobre ello y posteriormente se realizaron más conversaciones acerca de la corrección de estos requisitos. Fase 2: Módulo de gestión de cuentas En esta segunda fase se ha desarrollado el código necesario para la implementación de la gestión de las cuentas de usuario. En esta fase se han implementado todas las funcionalidades necesarias para el desarrollo de esta gestión, siendo estas: • Registro de Usuario. • Login. • Logout. • Modificación de los datos del usuario. • Eliminación de un usuario. 19 Fase 3: Funciones del profesional En esta tercera fase se ha realizado la implementación de las funciones que puede realizar un profesional en la página web. En concreto, se ha desarrollado todo el código necesario para que esas funcionalidades se puedan llevar a cabo, siendo estas: • Crear un nuevo servicio. • Modificar el servicio. • Borrar el servicio. • Ver información del servicio. • Activar / Desactivar la disponibilidad del profesional. • Aceptar / Denegar un servicio. Fase 4: Funciones del usuario registrado En esta cuarta fase se ha realizado la implementación de las actividades que puede realizar un cliente en cuanto al buscador y solicitud de servicios. En concreto el cliente podrá buscar el servicio, además de contar con una serie de filtros de búsqueda con el fin de obtener unos mejores resultados. Estos filtros consisten en la categoría del servicio, la localización, precio máximo de servicio y la forma en la que se muestren los resultados en cuanto al precio (Menor a Mayor o Mayor a Menor). Una vez el cliente realice la búsqueda y encuentre el servicio que se adapte a sus necesidades, este podrá mandar una solicitud al profesional. Fase 5: Funciones del administrador En esta quinta fase se ha realizado la implementación del código de la funcionalidad que tiene el Administrador de la página web, ya que este será el que tenga acceso a todos los datos de los usuarios de la página web y podrá ver, editar o eliminar los datos relacionados en cuanto a los servicios, categorías y usuarios. En concreto estas funcionalidades son: • Ver los servicios de la página y cuales tiene un profesional. • Ver la información de un servicio. 20 • Editar / Eliminar un servicio. • Añadir / Modificar / Eliminar una categoría. • Eliminar usuario. Fase 6: Gestión de valoraciones En esta sexta fase se ha implementado el código necesario para realizar la gestión de las valoraciones. En concreto, se han desarrollado todas las funcionalidades necesarias para ello, estas son: • Añadir una valoración del cliente hacia el profesional (Esto se podrá realizar cuando el profesional de por terminado el servicio). • Modificar / Eliminar una valoración realizada por el cliente. • El profesional tendrá un apartado donde podrá ver todas las valoraciones que ha recibido por parte de todos los clientes a los que ha prestado servicios. • El administrador contará con un apartado donde podrá ver todas las valoraciones de los profesionales y las podrá borrar. Fase 7: Presentación al cliente Esta séptima fase consistió en una reunión con una clienta que está interesada en el TFG y se procedió a enseñar la parte de la página implementada. Fase 8: Gestión de la lista de favoritos En esta octava y última fase se ha llevado a cabo la implementación del código necesario para realizar la gestión de la lista de favoritos, en la cual el cliente añade a su lista de favoritos a los profesionales. En concreto estas funcionalidades son: • Añadir / Eliminar profesional de la lista de favoritos • Ver la lista de profesionales favoritos 21 Chapter 1 – Introduction This Final Degree Project (TFG) consists of the creation of a web page, in which professionals will offer their services to clients (Both previously registered), and they will request their help with the aim of solving the problem they have. 1.1 Motivation This Final Degree project is based on developing a web page offering professional services to clients. Thanks to this web page, clients will be able to request help of professionals who offer services related to their query. The main motivation behind this project lies in the great increase in the demand for online services due to the Covid-19 pandemic that began in 2020, since many people were force to stay at home and had to look for alternatives to offer services, thus being able to further expand their knowledge independently and to msake life easier for people by offering the help they need. The creation of this web page is an effective solution to be able to satisfy this growing demand, thus helping both professionals and clients, since professionals will be able to offer their knowledge through services and clients will be able to receive the help they are looking for. 1.2 Objective The main objective of this work is to offer a unique experience to the client by facilating the contracting of services, thus doing it in an easy, safe and comfortable way. This objective is broken down into the following more specific objectives: • Analyze the market: Its objective is to analyze the market for the services offered by professionals. Thar is, to be able to identify the needs and demands of customers, thus being able to know the most demanded services today and to meet the best professionals in that branch. • Design the web page: This would be the second objective, to be able to design a web page that has an attractive, intuitive and easy to use interface. For this, there will be a clear and organized structure, so that 22 any of the users can navigate in a simple way and thus be able to find the information they are looking for without difficulty. • Implement functionalities: The third objective would be to implement functionalities that facilitate interaction between professionals and clients. Since, for example, once the service is completed, the client will be able to leave an assessment of the service provided by that professional • Evaluate user satisfaction: This fourth objective ca be achieved as mentioned before, through the evaluation of clients to professionals in the form of evaluations. • Guarantee security: The last of the objectives would be to guarantee the security of the information of both clients and professionals. Since there will be a user, this being the administrator of the page, who will be able to see/delete information about the registered users. 1.3 Work organization This section presents a work plan that includes the main task that are carried out to fulfill the objectives listed in the previous section. Tabla 1 1 shows an estimate that was agreed at the beginning of the course on the duration of each delivery, as well as a visual representation by means of a Gantt chart in Figura 1 1. To carry out this representation, the Canva [1] program has been used. The following are the phases that have been carried out for the development of the project. Phase 1: Specification of Requirements In this first phase, the discussion and specification of the use cases that are going to be part of the web application was carried out, for which a meeting was held with the tutor to talk about it and later more conversations were held about the correction os these requirements. 23 Phase 2: Account management module In this second phase, the necessary code for the implementation of user account management has been developed. In this phase, all the necessary functionalities for the development of this management have been implemented, these being: • User register • Login • Logout • Modification of user data • Deletion of a user Phase 3: Functions of the professional In this third phase, the implementation of the functions that a professional can perform on the website has been carried out. Specifically, all the necessary code has been developed so that these functionalities can be carried out, these being: • Create a new service • Modify the service • Delete the service • View service information • Activate/Deactivate the availability of the professional • Accept/Deny a service Phase 4: Functions of the registered user In this fourth phase, the implementation of the activities that a client can carry out in terms of the search engine and request for services has been carried out. Specifically, the client will be able to search to the service, in addition to having a series of search filters in order to obtain better results. These filters consist of the service category, location, maximum service price and the way in which the results are displayed in terms of price ( Low to High or High to Low). Once the client performs the 30 Capítulo 4 - Casos de uso En la página web se han definido los siguientes tipos de usuarios: 4.1 Actores Dentro de la página web se encuentran los siguientes tipos de usuarios: • Cliente. Es aquel usuario registrado previamente como cliente, el cual busca a un profesional que pueda realizar el servicio por el cual solicitan la ayuda. • Profesional. Es aquel usuario registrado previamente como profesional, el cual ofrecerá sus servicios con el objetivo de ayudar a los clientes. • Administrador. Es el usuario encargado de gestionar toda la información de la página web. • Usuario sin registrar. Son aquellos usuarios que visitan la página web por primera vez, o que no tienen creada una cuenta en la página web. Se les dará la opción de registrarse junto con la ventana inicial de la página web. Cuando se registren, estos tendrán que introducir la información que se les pide para crear una cuenta en la página web, junto con el tipo de usuario que quieren ser, siendo este o cliente o profesional. 4.2 Diagramas de caso de uso Los casos de uso se han agrupado de acuerdo a los diferentes actores, siendo estos: • Diagrama de cliente. • Diagrama de profesional. • Diagrama de administrador. • Diagrama de usuario no registrado. A continuación, se describen cada uno de ellos, junto con una figura representando los casos de uso relacionados. 31 4.2.1. Diagrama de cliente En este diagrama están incluidas todas las funcionalidades que puede realizar un cliente, registrado previamente en la página web, como son el iniciar sesión, la búsqueda de un servicio, realizar valoraciones, editar sus datos de usuario…etc. En la Figura Figura 4. 1 se representa el diagrama de casos de uso relacionado con este módulo. Figura 4. 1 Diagrama de casos de uso módulo cliente 32 4.2.2. Diagrama de profesional En este diagrama están incluidas todas las funcionalidades que puede realizar un profesional, registrado previamente en la página web, como son el iniciar sesión, crear un servicio, aceptar o denegar un servicio recibido por un cliente, modificar la disponibilidad…etc. En la Figura 4. 2 se representa el diagrama de casos de uso relacionado con este módulo. Figura 4. 2 Diagrama de casos de uso módulo profesional 4.2.3. Diagrama de administrador En este diagrama están incluidas todas las funcionalidades que puede realizar en exclusiva el administrador de la página web, como son eliminar la cuenta de un usuario de la página web, eliminar un servicio, eliminar categorías, ver información de cualquier usuario de la página…etc. En la Figura 4. 3 se representa el diagrama de casos de uso relacionado con este módulo. 33 Figura 4. 3 Diagrama de casos de uso módulo administrador 4.2.4. Diagrama usuario no registrado En este diagrama está incluida la funcionalidad que puede realizar un usuario no registrado en la página web. En el caso de este usuario solo podrá realizar el registro a la página. En la Figura 4. 4 se representa el diagrama de casos de uso relacionado con este módulo. 34 Figura 4. 4 Diagrama de casos de uso módulo usuário no registrado 4.3 Especificación de requisitos En esta sección se detallan los casos de uso definidos para los actores, estos se han agrupado en varios módulos funcionales. Siendo estos los siguientes: • Módulo de gestión de cuentas • Módulo de funciones del profesional • Módulo de funciones del usuario registrado • Módulo de funciones del administrador • Módulo de gestión de valoraciones • Módulo de gestión de lista de favoritos 4.3.1. Módulo de gestión de cuentas Los casos de uso pertenecientes a este módulo son: • Registro de usuario (Tabla 4.3.1 1) • Login (Tabla 4.3.1 2) • Logout (Tabla 4.3.1 3) • Modificación de los datos del usuario (Tabla 4.3.1 4) • Eliminación de usuario (Tabla 4.3.1 5) 35 A continuación se describe cada caso de uso perteneciente a este módulo. Requisito Registro de Usuario Prioridad Alta Precondición NA Postcondición Se ha creado la cuenta del cliente Descripción Los usuarios (Clientes/Profesionales) pueden crearse una cuenta en esta aplicación Entrada Nombre, Apellidos, Cod Postal, dirección, teléfono, Contraseña, Correo electrónico, foto de perfil Salida NA Secuencia normal C Paso Acción 1 1 El usuario accede a la aplicación y se le muestra una pantalla principal y pulsa el botón de “Registrarse” 2 2 El sistema muestra una pantalla en la que aparecerán todos los campos a rellenar por el futuro usuario 3 3 El usuario rellenará esos campos 4 El sistema valida que la información introducida sea la correcta 5 5 El sistema mostrará la pantalla principal de la aplicación Excepciones P Paso Acción 1 3 Se muestra un mensaje si el correo electrónico no es correcto 2 3 Se muestra un mensaje si el número de teléfono no es correcto 3 3 Se muestra un mensaje si el correo electrónico o teléfono introducido ya existe Actores Usuario no registrado Tabla 4.3.1 1 Registro de usuario Requisito Login Prioridad Alta Precondición El usuario tiene que estar registrado en la página Postcondición El usuario ha iniciado sesión en la página Descripción Los usuarios que están registrados (Clientes/Profesiones) puedes iniciar sesión en la página Entrada Correo electrónico y contraseña Salida NA Secuencia normal C Paso Acción 1 1 El usuario accede a la aplicación por medio de la pantalla principal y pulsa sobre el boton de “Login” 2 2 El sistema le muestra la pantalla en la que se le pedirán los datos a introducir a la hora del inicio de sesión 3 3 El usuario rellenará esos campos 4 El sistema valida que la información introducida sea la correcta 5 5 El sistema mostrará la pantalla principal de la aplicación Excepciones P Paso Acción 1 4 Se mostrará n mensaje en el caso de que los datos introducidos no se correspondan con los de ese usuario Actores Administrador, Cliente, Profesional Tabla 4.3.1 2 Tabla de login 36 Requisito Logout Prioridad Alta Precondición El usuario tiene que haber iniciado sesión Postcondición Se ha cerrado la sesión del usuario Descripción Los usuarios que han iniciado sesión en la página pueden salir de esa sesión Entrada Correo electrónico Salida NA Secuencia normal C Caso Acción 1 1 El usuario pulsará el botón de “Cerrar Sesión” 2 2 El sistema cierra la sesión y aparecerá la página principal Excepciones P Caso Acción 1 2 No se puede cerrar sesión Actores Administrador, Cliente, Profesional Tabla 4.3.1 3 Tabla de logout Requisito Modificación de los datos del usuario Prioridad Media Precondición El usuario tiene que estar registrado y tener iniciada la sesión Postcondición Se han modificado los datos del usuario Descripción Se modifican los datos deseados por el usuario, menos el correo electrónico que será fijo Entrada Datos que quiera modificar Salida NA Secuencia normal C Paso Acción 1 1 El usuario pulsa sobre el botón de “Ver perfil” desde la página principal 2 2 El sistema muestra la página con los datos del usuario, y el usuario pulsará sobre el botón de “Editar datos” 3 3 El usuario introduce los datos que quiere modificar y pulsará sobre el botón de “Editar datos” 4 El sistema mostrará la página principal Excepciones P Caso Acción 3 4 No se han podido modificar los datos del usuario Actores Administrador, Cliente, Profesional Tabla 4.3.1 4 Tabla de modificación de los datos del usuario Requisito Eliminación de un usuario Prioridad Media Precondición El administrador tiene que tener iniciada la sesión en la página web Postcondición Se ha eliminado la cuenta del cliente o del profesional Descripción El administrador puede eliminar la cuenta de un cliente o de un profesional Entrada Correo electrónico del usuario que quiere eliminar Salida NA Secuencia normal C Paso Acción 1 1 El usuario accede a la aplicación y pulsa sobre el botón de “Eliminar cuenta de usuario” 2 2 El sistema le mostrará una pantalla en el que se le pedirá el correo electrónico del usuario que quiere eliminar. También se le mostrará una lista con todos los usuarios de la página. 3 3 El administrador introduce el correo del usuario o pulsa sobre el icono de borrar en la fila del usuario que quiere eliminar 37 4 El sistema borra la cuenta del usuario introducido 5 5 El sistema le muestra la misma página pero sin el usuario que acaba de eliminar Excepciones P Paso Acción 4 4 No se ha encontrado el usuario que está buscando 2 2 El administrador pulsa sobre el botón de “Página principal” por lo que no realiza el borrado del usuario Actores Administrador Tabla 4.3.1 5 Tabla de eliminación de un usuario 4.3.2. Módulo de funciones del profesional Los casos de uso pertenecientes a este módulo son: • Crear un nuevo servicio (Tabla 4.3.2 1) • Modificar el servicio (Tabla 4.3.2 2) • Borrar servicio (Tabla 4.3.2 3) • Ver información del servicio (Tabla 4.3.2 4) • Activar/Desactivar la disponibilidad del profesional (Tabla 4.3.2 5) • Aceptar o denegar una solicitud de un servicio (Tabla 4.3.2 6) A continuación se describe cada caso de uso perteneciente a este módulo. Requisito Crear un nuevo servicio Prioridad Media Precondición El profesional debe de estar registrado y con la sesión iniciada Postcondición NA Descripción El profesional crea un nuevo servicio, añadiéndolo a la lista de los que ya tiene creados Entrada Nombre del servicio, descripción, precio/hora , localización y categoría Salida Lista de servicios Secuencia normal C Paso Acción 1 1 El profesional accede a la página web y se le muestra la pantalla principal, pulsando sobre el botón de “Crear un Servicio” 2 2 El sistema le mostrará una pantalla que estará formada por los datos que tiene que introducir, para añadir ese nuevo servicio 3 3 El profesional rellenará esos datos 4 El profesional pulsará sobre el botón “Añadir Servicio” Excepciones P Paso Acción 4 4 El sistema mostrará el mensaje de que falta por introducir algunos de los datos pedidos Actores Profesional Tabla 4.3.2 1 Tabla de crear un nuevo servicio 38 Requisito Modificar el servicio Prioridad Media Precondición El profesional debe de estar registrado, con la sesión iniciada y debe de existir el servicio que quiere modificar Postcondición NA Descripción El administrador o profesional puede modificar la información sobre el servicio que presta Entrada Datos que quiere modificar del servicio Salida Lista de servicios Secuencia normal C Paso Acción 1 1 El administrador o profesional accede a la lista de sus servicios pulsando sobre el botón “Lista de mis servicios” 2 2 El administrador o profesional selecciona el servicio que quiere modificar pulsando sobre el icono de editar 3 3 El sistema mostrará la pantalla con la información de ese servicio y modifica los datos 4 El administrador o profesional pulsa sobre el botón de “Editar datos” 5 5 El sistema mostrará la pantalla de los servicios con los datos ya modificados Excepciones P Paso Acción 4 4 El administrador o profesional pulsa sobre el botón “Cancelar”, por lo que los datos no se modificarán Actores Profesional, Administrador Tabla 4.3.2 2 Tabla de modificar el servicio Requisito Borrar servicio Prioridad Media Precondición El profesional debe estar registrado, con la sesión iniciada y debe de existir el servicio que quiere modificar Postcondición NA Descripción El administrador o profesional puede eliminar sus servicios Entrada NA Salida Lista de servicios Secuencia normal C Paso Acción 1 1 El administrador o profesional accede a la lista de sus servicios pulsando sobre el botón “Lista de mis servicios” 2 2 El administrador o profesional selecciona el servicio que quiere eliminar pulsando sobre el icono de eliminar 3 El sistema borra la el servicio seleccionado 4 4 El sistema mostrará la pantalla de los servicios menos el que acaba de borrar Excepciones P Paso Acción 4 2 El administrador o profesional pulsa sobre el botón de “Página principal”, ya que no desea realizar ninguna modificación en cuanto a los servicios Actores Administrador, Profesional Tabla 4.3.2 3 Tabla de borrar servicio 39 Requisito Ver información del servicio Prioridad Media Precondición El servicio debe de existir, el usuario tiene que estar registrado en la página y con la sesión iniciada Postcondición NA Descripción El administrador o profesional podrá ver la información de sus servicios Entrada NA Salida Información de los servicios Secuencia normal C Paso Acción 1 1 El administrador o profesional accede a la lista de sus servicios pulsando sobre el botón “Lista de mis servicios” 2 2 El sistema muestra por pantalla la información de todos los servicios Excepciones NA Actores Administrador, profesional Tabla 4.3.2 4 Tabla de ver información del servicio Requisito Activar / Desactivar la disponibilidad del profesional Prioridad Media Precondición El profesional debe de estar registrado y con la sesión iniciada Postcondición NA Descripción El profesional podrá cambiar el estado de su disponibilidad a “Disponible” o “No Disponible” Entrada NA Salida NA Secuencia normal C Paso Acción 1 1 El profesional accede a la página principal, donde le aparecerá la información de su disponibilidad 2 2 El profesional pulsará sobre el botón de “Cambiar Mi Disponibilidad” 3 3 El sistema cambia la disponibilidad y muestra de nuevo la pantalla principal con la disponibilidad cambiada 4 El sistema borra la cuenta del usuario introducido 5 5 El sistema le muestra la misma página pero sin el usuario que acaba de eliminar Excepciones P Paso Acción 4 2 El profesional no cambia el estado de su disponibilidad Actores Profesional Tabla 4.3.2 5 Tabla de activar / desactivar la disponibilidad del profesional 46 4.3.5. Módulo de gestión de valoraciones Los casos de uso pertenecientes a este módulo son: • Añadir valoración (Cliente -> Profesional) una vez que el trabajo se dé por finalizado (Tabla 4.4.5 1) • Modificar una valoración (Tabla 4.4.5 2) • Eliminar una valoración por parte del cliente (Tabla 4.4.5 3) • Eliminar una valoración por parte del administrador (Tabla 4.4.5 4) A continuación se describe cada caso de uso perteneciente a este módulo. Requisito Añadir valoración Prioridad Media Precondición El cliente que quiere hacer la valoración tiene que estar registrado y con la sesión iniciada, además de que al profesional que quiere valorar tiene que existir y que el servicio tiene que estar terminado Postcondición NA Descripción El cliente puede valorar a un profesional en cuanto al servicio prestado. Esta acción solo se podrá realizar cuando el servicio se de por finalizado Entrada Valoración Salida Secuencia normal C Paso Acción 1 1 El cliente desde la pantalla principal pulsa sobre el botón de “Lista de servicios solicitados” 2 2 El cliente ve todos los servicios solicitados, junto el estado en el que se encuentra ese servicio. En el caso de que ese servicio esté finalizado, el cliente puede realizar una valoración, para ello pulsa sobre el botón de “Añadir” 3 3 El cliente introduce los datos de la valoración y pulsa sobre el botón de “Enviar” 4 El sistema muestra la pantalla de todos los servicios solicitados por ese cliente, junto con la valoración añadida de ese servicio Excepciones P Paso Acción 4 3 El cliente introduce los datos de la valoración, pero no pulsa sobre el botón de “Enviar” Actores Profesional, Cliente Tabla 4.4.5 1 Tabla de añadir valoración Requisito Modificar una valoración Prioridad Media Precondición El cliente tiene que estar registrado y con la sesión iniciada, además de que la valoración que quiere modificar debe de existir Postcondición NA Descripción El cliente puede modificar una valoración que ha realizado hacia otro profesional Entrada Nuevos datos de la valoración Salida Lista de las valoraciones Secuencia normal C Paso Acción 47 1 1 El cliente desde la pantalla principal pulsa sobre el botón de “Lista de servicios solicitados” 2 2 El cliente elige la valoración a modificar y pulsa sobre el icono de editar 3 3 El cliente introduce la nueva valoración y pulsa sobre el botón de “Modificar” 4 El sistema muestra la pantalla de todos los servicios solicitados por ese cliente, junto con los datos actualizados Excepciones P Paso Acción 4 3 El cliente introduce la nueva valoración pero no pulsa sobre el botón de “Modificar” Actores Profesional, cliente Tabla 4.4.5 2 Tabla de modificar una valoración Requisito Eliminar una valoración por parte del cliente Prioridad Media Precondición El cliente tiene que estar registrado, con la sesión iniciada, además de que la valoración que quiere eliminar debe de existir Postcondición NA Descripción El cliente puede borrar las valoraciones que ha realizado Entrada NA Salida Lista de valoraciones Secuencia normal C Paso Acción 1 1 El cliente desde la pantalla principal pulsa sobre el botón de “Lista de servicios solicitados” 2 2 El cliente elige la valoración a eliminar y pulsa sobre el icono de eliminar 3 3 El sistema elimina la valoración y muestra la pantalla de todos los servicios solicitados con los datos modificados Excepciones NA Actores Cliente, Profesional Tabla 4.4.5 3 Tabla de eliminar una valoración por parte del cliente Requisito Eliminar una valoración por parte del administrador Prioridad Media Precondición El administrador tiene que tener la sesión iniciada, además de que la valoración que quiere eliminar debe de existir Postcondición NA Descripción El administrador puede borrar cualquiera de las valoraciones realizadas en la página web por parte de los clientes Entrada NA Salida Lista de valoraciones Secuencia normal C Paso Acción 1 1 El administrador desde la pantalla principal pulsa sobre el botón de “Ver valoraciones” 2 2 El sistema muestra la pantalla de las valoraciones junto con un buscador, con el objetivo de que pueda buscar todas las valoraciones realizadas por un cliente 3 3 El administrador, una vez tenga decidida que valoración quiere eliminar, pulsa sobre el icono de borrar 4 4 El sistema muestra la pantalla de las valoraciones de la página web con la información modificada Excepciones NA Actores Cliente, Profesional, Administrador Tabla 4.4.5 4 Tabla de eliminar una valoración por parte del administrador 48 4.3.6. Módulo de gestión de lista de favoritos Los casos de uso pertenecientes a este módulo son: • Añadir profesional a la lista de favoritos (Tabla 4.4.6 1) • Eliminar profesional de la lista de favoritos (Tabla 4.4.6 2) • Ver la lista de favoritos (Tabla 4.4.6 3) A continuación se describe cada caso de uso perteneciente a este módulo. Requisito Añadir profesional a la lista de favoritos Prioridad Media Precondición El cliente debe de estar registrado, con la sesión iniciada, además de que el profesional que quiere añadir a la lista debe de existir y no aparecer en esa lista Postcondición NA Descripción El cliente dispone de una lista de profesionales favoritos, donde podrá añadir a profesionales a esa lista con el objetivo de buscar los servicios que estos ofrecen de una forma más rápida Entrada NA Salida Lista de favoritos Secuencia normal C Paso Acción 1 1 El cliente busca un servicio, y dentro de cada servicio tendrá un icono en forma de corazón para marcar como favorito al profesional de ese servicio 2 2 El cliente pulsa sobre el icono de favorito 3 3 El sistema añade al profesional a la lista de favoritos y muestra al cliente su lista de profesionales favoritos con este añadido Excepciones NA Actores Cliente, Profesional Tabla 4.4.6 1 Tabla de añadir profesional a la lista de favoritos Requisito Eliminar profesional de la lista de favoritos Prioridad Media Precondición El cliente debe de estar registrado, con la sesión iniciada, además de que el profesional que quiere eliminar de la lista debe de aparecer en ella Postcondición NA Descripción El cliente elimina a un profesional de la lista de favoritos Entrada NA Salida Lista de favoritos Secuencia normal C Paso Acción 1 1 El cliente accede a su lista de favoritos desde la pantalla principal pulsando sobre el botón de “Lista de favoritos” 2 2 El sistema muestra la lista con la información de los profesionales que forman parte de ella 3 3 El cliente, una vez seleccionado que profesional quiere eliminar, pulsa sobre el icono de borrar 4 El sistema actualiza la información y muestra de nuevo la lista pero sin el profesional que ha sido borrado 49 Excepciones NA Actores Cliente, Profesional Tabla 4.4.6 2 Tabla de eliminar profesional de la lista de favoritos Requisito Ver lista de favoritos Prioridad Media Precondición El cliente tiene que estar registrado y con la sesión iniciada Postcondición NA Descripción El cliente puede ver una lista con sus profesionales favoritos Entrada NA Salida Lista de profesionales favoritos Secuencia normal C Paso Acción 1 1 El cliente accede a su lista de favoritos desde la pantalla principal pulsando sobre el botón de “Lista de favoritos” 2 2 El sistema muestra la lista con la información de los profesionales que forman parte de ella Excepciones NA Actores Cliente Tabla 4.4.6 3 Tabla de ver lista de favoritos 50 Capítulo 5 - Arquitectura de la Aplicación y modelo de Datos En este capítulo se describe la arquitectura utilizada y las tablas que forman la base de datos. 5.1 Arquitectura de la aplicación En cuanto a la arquitectura utilizada en el desarrollo de la aplicación web, ha sido la del cliente-servidor, en la que la página web se divide en dos partes principales: el cliente y el servidor. En el que el cliente es el encargado de realizar peticiones a un servidor y este será el encargado de generar respuestas a esas peticiones. En cuanto a los clientes en este caso serán los usuarios (Clientes, profesionales y administrador) que serán los que realicen las peticiones a través del navegador, ya que está formado por diferentes pantallas con sus respectivos formularios. En cuanto a los servidores, tenemos a Apache como el servidor web y a MySQL como servidor de la base de datos. Por lo tanto los clientes serán los que inicien las solicitudes o peticiones y esperan las respuestas del servidor, ya que este está en espera hasta recibir las solicitudes de los clientes y posteriormente las procesa y envía la respuesta al cliente. 5.2 Estructura de la base de datos La información a almacenar en la base de datos consiste en: datos de los usuarios de la aplicación, solicitudes de los servicios, solicitudes de los clientes, datos de los servicios de los profesionales, servicios que se han aceptado, lista de favoritos de los clientes, disponibilidad de los profesionales y categorías de los servicios. Para ello se ha dividido la información en diferentes tablas como se puede ver en la Figura 5. 1. 51 Figura 5. 1 Tablas de la Base de Datos Para el almacenamiento de los datos se decidió utilizar el programa phpMyAdmin [14], ya que es una herramienta para administrar y mantener una base de datos MYSQL de una manera fácil y eficiente. Para la creación de las tablas en la base de datos se han seguido una serie de pasos, siendo estos: 1. Identificación de las entidades: El primero de los pasos ha sido identificar las entidades clave de la aplicación, que en nuestro caso son los “usuarios”, “servicios” y “solicitudes” 2. Definir los atributos: El segundo de los pasos ha sido el identificar los atributos o características que debe almacenar cada tabla. Como por ejemplo en el caso de la tabla de los “usuarios” se guarda toda la información que se pide a la hora de crearse una cuenta en la página web. 3. Definir el tipo de dato: El tercer paso, una vez identificado los atributos que van a formar parte de la tabla, se ha procedido a definir el tipo de dato que va a ser cada atributo, por ejemplo el nombre será una cadena de texto, el código postal un número, la fecha un date… 4. Identificar las claves primarias y los valores que son únicos: El cuarto de los pasos, ha sido identificar cuáles de los atributos van a ser valores únicos y cuáles van a ser la clave o claves primarias de cada tabla. 52 5. Establecer las relaciones: El quinto y último paso ha sido establecer las relaciones entre los atributos de las tablas, por ejemplo la tabla de servicio va a tener un atributo del email del profesional el cual va a estar relacionado con el atributo de email usuario de la tabla de usuarios. A continuación, en la Figura 5 2 se muestra el modelo Relacional de la base de datos utilizada en este TFG, tras la definición de todas las tablas junto con sus atributos: Figura 5 2 Modelo Relacional de la base de datos Las tablas junto con los atributos que forman cada una son las siguientes: 53 5.2.1 Tabla categorías Esta tabla se utiliza para almacenar las diferentes categorías en cuanto a los servicios que prestan los profesionales en la aplicación. En ella se almacena el nombre de la categoría como se puede ver en la Figura 5. 3. El contenido de esta tabla aumenta cuando el administrador de la página crea nuevas categorías. Figura 5. 3 Tabla Categorías 5.2.2 Tabla dispoprofesional Esta tabla se utiliza para almacenar el email del profesional, junto con la disponibilidad que tiene en ese momento, este valor será 0 -> No disponible , 1- >Disponible . En ella se almacena el correo del profesional, junto con el valor de la disponibilidad. La estructura de esta tabla se puede ver en la Figura 5. 4. Figura 5. 4 Tabla Dispoprofesional 5.2.3 Tabla favoritos Esta tabla se utiliza para almacenar los profesionales que forman la lista de favoritos de los clientes. En ella se almacena el correo del cliente y del profesional. La estructura de esta tabla se puede ver en la Figura 5. 5. Figura 5. 5 Tabla favoritos 54 5.2.4 Tabla seraceptados En esta tabla se almacenan los servicios aceptados por cada profesional. En ella se almacena el correo del cliente y del profesional, junto con el nombre del servicio y del estado del servicio, este valor puede ser 0 -> Ha sido aceptado pero no terminado, 1-> Se ha dado por finalizado el servicio. La estructura de la tabla se puede ver en la Figura 5. 6. Figura 5. 6 Tabla seraceptados 5.2.5 Tabla servicio Esta tabla almacena la información de cada servicio ofrecido por cada profesional. En ella se guarda el email del profesional, el nombre del servicio, la descripción de ese servicio, el precio, la categoría y la localización. La estructura de la tabla se puede ver en la Figura 5. 7. Figura 5. 7 Tabla servicio 55 5.2.6 Tabla solicitudescliente En esta tabla se almacenan los servicios solicitados por parte del cliente junto con la información en cuanto al estado de la solicitud y de la valoración hacia el profesional de ese servicio. En ella se guarda el correo del cliente y del profesional, el nombre del servicio solicitado, el estado de la solicitud (0 -> Pendiente, 1 -> Aceptado, 2 ->Denegado), el estado de la valoración (0 -> No realizada, 1 -> Realizada) y la valoración (Esta solo se podrá realizar una vez el estado de la solicitud sea 2, en el caso contrario este campo está vacío). La estructura de la tabla se puede ver en la Figura 5. 8. Figura 5. 8 Tabla solicitudescliente 5.2.7 Tabla soliservicios En esta tabla se almacenan los servicios recibidos por un profesional. En ella se guarda el nombre del cliente junto con su correo, el correo del profesional y el nombre del servicio del cual ha recibido la solicitud. La estructura de la tabla se puede ver en la Figura 5. 9. 62 Figura 6 5 Código para añadir nueva categoría Para eliminar una categoría, el administrador hace clic sobre el icono de eliminar desde la pantalla donde se muestran todas las categorías en la página web y la aplicación eliminará esa categoría en la base de datos. Además de eliminar la categoría de la base de datos, también se ha implementado que todos los servicios prestados por los profesionales que tengan la categoría que se va a eliminar, se les coloque la categoría de “Sin categoría”. El código utilizado para realizar estas acciones se puede observar en la Figura 6 6. 63 Figura 6 6 Código para eliminar una categoría Ver/Eliminar usuarios de la aplicación El administrador al hacer clic sobre el botón de “Eliminar usuario” desde la pantalla principal. La aplicación muestra la pantalla de usuarios, la cual está formada por un buscador de usuario, para que se introduzca el correo electrónico del usuario que se quiere eliminar y también muestra una tabla con la información de los usuarios de la página web junto con el icono de eliminar. Por lo que la aplicación da dos opciones para borrar un usuario. Esta pantalla se puede observar en la Figura 6 7. Figura 6 7 Pantalla con la información de todos los usuarios 64 Al hacer clic sobre el icono de eliminar, la aplicación borrará todos los datos de las tablas de la base de datos en las que aparezca ese usuario. Dependiendo del tipo de usuario, se borrará los datos de unas tablas u otras. El código implementado para borrar todos los datos se puede observar en la Figura 6 8. Figura 6 8 Código de eliminación de usuario Ver/Eliminar valoraciones realizadas por los usuarios La pantalla que muestra todas las valoraciones realizadas por los usuarios está formada por un buscador de valoraciones realizadas por un profesional junto a una tabla en la que aparecen todas las valoraciones que se han realizado en la página web. Cada una de estas valoraciones tendrá el icono de borrar, al hacer clic sobre 65 ese icono la aplicación borra la información de la base de datos. Esta pantalla se puede observar en la Figura 6 9, mientras que el código implementado para actualizar el estado de la valoración a 0 (No realizada) y poner el campo de la valoración con un valor vacío se puede ver en la Figura 6 10. Figura 6 9 Pantalla de valoraciones de la página web Figura 6 10 Código de eliminar la valoración Editar/Eliminar servicios de un profesional Para poder editar el servicio de un profesional se debe de estar en la pantalla de servicios de la aplicación (Figura 6 1). Cada servicio contará con los iconos de 66 editar y eliminar. Según la acción que se quiera realizar se hace clic en un icono o en otro. En el caso de que se pulse sobre el icono de editar, la aplicación muestra un formulario formado por los campos donde aparece la información de ese servicio. El administrador modifica los datos deseados y pulsa sobre el botón de “Editar Datos”. La aplicación actualiza los datos en la base de datos y vuelve a mostrar la pantalla de los servicios. El código que recibe los datos del formulario y los actualiza en la base de datos se puede observar en la Figura 6 11. Figura 6 11 Código de edición de los datos de un servicio En el caso de que se pulse el icono de eliminar, la aplicación borra todos los datos relacionados con ese servicio en la base de datos. El código para realizar esta acción se puede observar en la Figura 6 12. 67 Figura 6 12 Código para eliminar un servicio Eliminar un usuario de la aplicación El administrador decide borrar la cuenta de un usuario de la aplicación y desde la pantalla donde se muestran todos los usuarios de la página web, como podemos observar en la Figura 6 13, el administrador tiene dos opciones para llevar a cabo esta acción. Una de ellas será mediante un buscador de usuario, en el que se introduce el correo electrónico. La otra opción es hacer clic sobre el icono de borrar que está situado en la fila de cada usuario. Figura 6 13 Pantalla de eliminar cuenta de usuario 68 En las dos figuras siguientes (Figura 6 14 y Figura 6 15) se puede observar el código implementado para mostrar el buscador de usuarios y la tabla donde se muestra la información de todos los usuarios junto con el icono de eliminar. Figura 6 14 Código para el buscador del usuario Figura 6 15 Código que muestra todos los usuarios de la aplicación 6.2.2 Sección cliente Dentro de esta sección se han implementado todas las funcionalidades que puede realizar el usuario de tipo cliente dentro de la página web, siendo estas: Buscar/solicitar 69 un servicio, Añadir/Editar/Eliminar una valoración, Ver/Añadir/Eliminar usuarios de la lista de favoritos. Buscar/Solicitar un servicio Desde la pantalla de buscador ser servicios, la aplicación muestra una serie de filtros de búsqueda junto con el buscador de servicios. El usuario introduce los datos para la búsqueda del servicio y la aplicación muestra todos los servicios que estén relacionados con la búsqueda. La pantalla de buscar servicios se puede observar en la Figura 6 16. El código implementado para esta pantalla se puede observar en la Figura 6 17. Figura 6 16 Pantalla de búsqueda de servicios 70 Figura 6 17 Código de la pantalla de búsqueda Una vez realizada la búsqueda, la aplicación muestra una tabla con el listado de profesionales. Esta tabla cuenta con el email del profesional, nombre del servicio, localización, precio/hora, disponibilidad del profesional, botón de solicitar servicio y el botón de añadir el profesional a la lista de favoritos. Esta tabla se puede observar en Figura 6 18. 71 Figura 6 18 Pantalla de información de servicios Una vez seleccionado el profesional al que se quiere enviar la solicitud, se hace clic sobre el icono de enviar y se envía la solicitud al profesional. El código que envía esta solicitud se puede observar en la Figura 6 19. Figura 6 19 Código solicitud de servicio Añadir/Editar/Eliminar una valoración Para añadir una valoración, previamente se tiene que haber dado por finalizado el servicio prestado. Una vez se ha finalizado el servicio, el usuario puede realizar la valoración desde la pantalla de servicios solicitados haciendo clic sobre el botón de “Añadir”. La aplicación muestra un campo donde se introduce la valoración y posteriormente se pulsa sobre el botón de “Añadir”. La aplicación guarda la 78 Figura 6 31 Pantalla de editar un servicio En el caso de hacer clic en el icono de borrar el servicio, la aplicación borra los datos correspondientes a ese servicio de la base de datos. La implementación en código de la acción de borrar el servicio se puede observar en la Figura 6 32. Figura 6 32 Código para eliminar un servicio Dar por finalizado un servicio El profesional pulsa sobre el botón de finalizar servicio desde la pantalla de servicios aceptados. La aplicación actualiza el valor del estado del servicio a 79 finalizado. La pantalla de servicios aceptados se puede ver en la Figura 6 33 y el código que realiza esta acción en la Figura 6 34. Figura 6 33 Pantalla servicios aceptados Figura 6 34 Código para la finalización de un servicio Cambiar Disponibilidad El profesional puede cambiar su disponibilidad haciendo clic sobe el botón de “Cambiar Disponibilidad”. La aplicación cambia el estado de la disponibilidad como podemos observar en la Figura 6. 35 y la Figura 6. 36. 80 Figura 6. 35 Pantalla de profesional disponible Figura 6. 36 Pantalla de profesional No disponible En la Figura 6 37 se puede observar la implementación del código el cual realiza el cambio del valor del campo de la disponibilidad en la base de datos. 81 Figura 6 37 Código cambio de disponibilidad 6.2.4 Sección usuario Dentro de esta sección se han implementado todas las funcionalidades que tienen en común todos los usuarios de la aplicación, siendo estas: Registro de Usuario, Ver y editar los datos del perfil , Login, Logout. Registro de Usuario La primera vista de un usuario que quiere registrarse en la página web es la del registro de usuario. Esta pantalla contiene los campos de nombre completo, dirección, número, ciudad, provincia, código postal, teléfono, correo electrónico, contraseña y el tipo de usuario del cual va a ser creada la cuenta, como se puede ver en la Figura 6 38 .Todos los campos son obligatorios de introducir, en el caso de que falte alguno de ellos, se avisa de que se debe introducir ese dato. Se puede observar el código de la implementación del formulario en la Figura 6 39. 82 Figura 6 38 Formulario de registro 83 Figura 6 39 Código del formulario de registro Una vez rellenado todos los datos de una forma correcta, se hace clic en el botón de “Registro”. La aplicación muestra la pantalla principal, esta dependerá del tipo de usuario registrado. La pantalla principal de cliente se puede ver en la Figura 6 40, mientras que la del se puede ver en la Figura 6 41. 84 Figura 6 40 Pantalla principal cliente Figura 6 41 Pantalla principal profesional El código que se muestra en la Figura 6 42 es el que inserta los datos del nuevo usuario en la tabla de usuario, y en el caso de que el tipo de usuario sea profesional también se inserta el correo del usuario en la tabla de la disponibilidad, la cual el estado de la disponibilidad será “Disponible” por defecto en el momento del registro de la cuenta. 85 Figura 6 42 Código de insertar un nuevo usuario Ver datos y editar el perfil Al hacer clic en el botón de “Ver perfil”, la aplicación muestra al usuario los datos asociados a su cuenta junto con el botón de editar perfil, como podemos observar en la Figura 6 43. 86 Figura 6 43 Pantalla de datos del perfil Al hacer clic sobre el botón de “Editar datos”, la aplicación muestra la pantalla con un formulario en la cual el usuario edita los datos del perfil, como podemos observar en la Figura 6 44. Una vez introducido los datos que se quieran modificar la aplicación actualiza esa información en la en la base de datos. Se puede observar el código para generar el formulario con los campos de los datos de perfil en la Figura 6 45. 87 Figura 6 44 Pantalla editar datos perfil Figura 6 45 Código del formulario de los datos de perfil 95 Chapter 7 - Conclusions and future work 7.1. Conclusions In this work, a web application has been developed aimed at helping people who need the service of a professional. For this, a series of functionalities have been implemented to meet the objectives set at the beginning of the development of the application, such as the search for services based on filters, request a service, see the status of said request. Along with the functionalities mentioned above, a content manager has been created in terms of the services, since it will be possible to add, edit and delete their information, as well as being able to add or eliminate new categories of these services, such as adding ratings or users to the favorites list. Regarding the usability of the application, it has been designed with the aim of making the interface intuitive and easy to use, in which users are comfortable navigating through it. 7.2. Future work Despite the good results obtained when it comes to meeting a large part of the objectives and functionalities set at the beginning of the project in the requirements gathering phase. A number of new features and functionality have been proposed for development as future work. These improvements are: • User interface improvement: Although the user interface has been made intuitive and easy to use, improvements can still be made in terms of page navigation and element layout. • Adaptation to different screen sizes: Optimize the css to adapt the application elements to different screen sizes and thus achieve a user experience appropriate to the size of the device from which the page is being accessed. • Internationalization: Currently the application has been fully developed in Spanish. But in the future it will be adapted to make it accessible and understandable by any user regardless of country or language. This can be achieved through a drop-down menu with which the language of the web page can be selected. 96 • Show more information to clients about professionals: Currently the application does not show clients the ratings that a professional has, but it would be useful if clients could see the ratings of a professional in order to help them when choosing the professional solve your help. • Featured section of professionals: It would be of great help for clients to be able to see the professionals who have the best rating in terms of the category belonging to the service they are looking for. 97 BIBLIOGRAFÍA [1] Canva : https://www.canva.com/ [2] Wallapop : https://es.wallapop.com/wall [3] Taskrabbit : https://www.taskrabbit.es/es/es/ [4] Freelancer : https://www.freelancer.es/ [5] Uber : https://www.uber.com/es/es-es/ [6] Upwork : https://www.upwork.com/ [7] HTML5 : https://es.wikipedia.org/wiki/HTML5 [8] CSS : https://es.wikipedia.org/wiki/CSS [9] Bootstrap : https://getbootstrap.com/ [10] PHP : https://desarrolloweb.com/home/php [11] SQL : https://desarrolloweb.com/manuales/tutorial-sql.html [12] Xampp Apache : https://www.apachefriends.org/es/index.html [13] Visual Studio Code : https://code.visualstudio.com/ [14] PhpMyAdmin : https://www.phpmyadmin.net/ 98 ANEXO A Guía de uso En este anexo se explica cómo hacer la gestión de la aplicación por parte del administrador y cómo usar la aplicación dependiendo del tipo de usuario. A.1. Usuario administrador A.1.1. Vista principal de administrador En la Figura A. 1. se observa la vista principal que podrá ver el administrador tras iniciar sesión. En ella se encuentra una barra de navegación situada en la parte inferior con las opciones de ver servicios, categorías, eliminar cuenta de usuario o ver valoraciones. Figura A. 1 Vista principal de administrador 99 A.1.2. Gestión de servicios En la gestión de servicios se distinguen 4 opciones posibles visibles en la Figura A. 2. Para ver la información de los servicios de un profesional específico debe hacer clic en el buscador de servicios e introducir el correo electrónico del usuario que desea ver sus servicios, posteriormente debe hacer clic en el botón de “Buscar”. Para ver más información acerca un servicio debe pulsar sobre el icono de más información y la aplicación muestra la información adicional acerca de ese servicio. Para editar un servicio se debe pulsar sobre el icono de editar, a continuación, debe editar los datos deseados en el formulario observable en la Figura A. 3 y por último pulsar sobre el botón de “Editar datos”. Por último, para eliminar un servicio, debe hacer clic sobre el icono de eliminar del servicio que desee eliminar. Figura A. 2 Listado de servicios 100 Figura A. 3 Editar datos de un servicio A.1.3. Gestión de categorías En la gestión de categorías se distinguen 3 opciones posibles visibles en la Figura A. 4 .Para añadir una categoría el administrador debe de hacer clic sobre el botón de “Añadir categoría”, a continuación, introduce el nombre de la categoría y pulsará sobre el botón de “Añadir Categoría” observable en la Figura A. 5 .Para editar una categoría se debe pulsar sobre el icono de editar , modificar el dato y pulsar sobre el botón de “Editar nombre”. Por último, para eliminar una categoría, el administrador debe hacer clic sobre el icono de eliminar de la categoría que desee eliminar. 101 Figura A. 4 Listado de categorías Figura A. 5 Añadir categoría A.1.4. Gestión de eliminar un usuario En la gestión de eliminación de usuarios se distinguen 2 opciones posibles para llevar a cabo esta acción. La primera es introducir en el buscador el correo electrónico del usuario que desee eliminar la cuenta y pulsar sobre el botón de “Eliminar Usuario”. Mientras que la segunda opción es pulsar sobre el icono de eliminar del usuario que desee eliminar la cuenta. Estas dos opciones se pueden observar en la Figura A. 6. 102 Figura A. 6 Eliminar usuario A.1.5. Gestión de valoraciones En la gestión de valoraciones se distinguen 2 opciones visibles en la Figura A. 7. El administrador puede ver todas las valoraciones en una tabla, pero también tiene la opción de buscar todas las valoraciones realizadas por un usuario introduciendo el correo electrónico del usuario en el buscador y pulsar sobre el botón de “Buscar valoraciones”. Por último, para eliminar una valoración, el administrador debe pulsar sobre el icono de eliminar de la valoración que desee eliminar. Figura A. 7 Gestión de valoraciones 103 A.2. Usuario cliente A.2.1. Vista principal de cliente En la Figura A. 8 se observa la vista principal que podrá ver el cliente tras iniciar sesión. En ella se encuentra una barra de navegación situada en la parte inferior con las opciones de buscar un servicio, ver la lista de favoritos o ver la lista de los servicios solicitados. Figura A. 8 Vista principal de cliente A.2.2. Búsqueda de servicio En la pantalla de búsqueda de servicio, se muestra un buscador de servicios junto unos filtros de búsqueda, como muestra la Figura A. 9 . Se podrá seleccionar la categoría, la localización, el precio máximo y la forma de mostrar los servicios buscados. 110 aceptar, sin en cambio, si desea denegar esa solicitud debe de hacer clic sobre el icono de denegar. En el caso de que la solicitud sea aceptada, la información del servicio aparecerá en la pantalla de servicios aceptados (Figura A. 18), en caso contrario, la información se descarta. Figura A. 17 Solicitudes de servicios A.3.6. Servicios aceptados Desde la pantalla de servicios aceptados se pueden ver todos los servicios que ha aceptado el usuario. También se podrá dar por finalizado el servicio haciendo clic sobre el botón de “Finalizar servicio”. En la Figura A. 18 se puede observar dicha pantalla. Figura A. 18 Servicios aceptados 111 A.3.6. Lista de valoraciones Desde la pantalla de lista de valoraciones recibidas, el usuario puede ver la información de la valoración recibida por parte del cliente en el servicio realizado. En la Figura A. 19 se puede ver la lista de las valoraciones recibidas. Figura A. 19 Valoraciones recibidas