Desarrollo de una aplicación web para profesionales del sector musical

Texto completo

(1)Desarrollo de una Aplicación Web para profesionales del sector musical Memoria de Proyecto Final de Máster Máster Universitario en Desarrollo de Sitios y Aplicaciones Web. Autor: Sara Paz Fernández Consultor: Anna Ferry Mestres Profesor: Juliá Minguillón Alfonso Profesor: Cesar Pablo Córcoles Briongos. 06/01/2020.

(2) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Copyright. Esta obra está sujeta a una licencia de Reconocimiento-NoComercialSinObraDerivada 3.0 España de Creative Commons. 2 / 84.

(3) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Abstract Este proyecto consiste en el desarrollo de una aplicación web para profesionales del sector musical, con el objetivo de facilitar la búsqueda de empleo en este ámbito y la conexión entre distintos músicos para crear proyectos musicales. Surge de la necesidad de una plataforma en la que instrumentistas, cantantes, compositores y otros profesionales cubran sus necesidades, como encontrar compañeros para un proyecto musical o un empleo como profesor de música. Para su desarrollo se utiliza el framework de JavaScript Angular, aportando agilidad por tratarse de una SPA (Single Page Application). Se adapta a cualquier tamaño de pantalla y, al ser una PWA (Progressive Web App), se puede instalar en el dispositivo y utilizar algunas funciones sin conexión a Internet, lo que ofrece una mejor experiencia de usuario. El backend está desarrollado con TypeScript, y utiliza el framework Express de Node.js.. Keywords: PWA, Angular, Aplicación web, música, empleo para músicos. 3 / 84.

(4) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Abstract (english version) This project consists in the development of a web application for professionals in the music sector, with the aim of facilitating the job search in this field and the connection between different musicians to create projects. It arises from the need for a platform where instrumentalists, singers, composers and other professionals cover their needs, such as finding partners for a musical project or a music teacher job. The Angular JavaScript framework is used for its development, providing agility because it is a SPA (Single Page Application). It adapts to any screen size and can be installed on the device and use some functions without an Internet connection as it is a PWA (Progressive Web App), which offers a better user experience. The backend is developed with TypeScript, and uses the Node.js framework Express.. Keywords: PWA, Angular, Web application, music, musician job. 4 / 84.

(5) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Índice 1.. Introducción ............................................................................................................................................... 9 1.1 Contexto y justificación del trabajo .......................................................................................................... 9. 2. Descripción .................................................................................................................................................. 10 3. Objetivos ...................................................................................................................................................... 11 3.1 Principales .............................................................................................................................................. 11 3.2 Secundarios ........................................................................................................................................... 11 4. Marco teórico ............................................................................................................................................... 12 5. Contenidos ................................................................................................................................................... 13 6. Metodología ................................................................................................................................................. 14 7. Arquitectura de la aplicación/sistema/servicio ............................................................................................. 15 7.1 Frontend ................................................................................................................................................. 15 7.2 Backend ................................................................................................................................................. 16 7.2 Base de datos ........................................................................................................................................ 16 8. Plataforma de desarrollo ............................................................................................................................. 17 9. Planificación ................................................................................................................................................. 18 10. Proceso de trabajo..................................................................................................................................... 21 11. Librerías utilizadas ..................................................................................................................................... 23 12. Diagramas UML ......................................................................................................................................... 24 12.1 Diagrama de base de datos ................................................................................................................. 24 12.2 Árbol de navegación ............................................................................................................................ 25 12.3 Diagrama de casos de uso .................................................................................................................. 26 13. Prototipos ................................................................................................................................................... 27 13.1 Lo-Fi ..................................................................................................................................................... 27 3.2 Hi-Fi ........................................................................................................................................................ 35 14. Perfiles de usuario ..................................................................................................................................... 44 15. Usabilidad/UX ............................................................................................................................................ 50 16. Seguridad .................................................................................................................................................. 52 17. Requisitos de instalación/implantación/uso ............................................................................................... 53 18. Instrucciones de instalación/implantación ................................................................................................. 54 18.1 Producción ........................................................................................................................................... 54 18.2 Desarrollo ............................................................................................................................................. 55 19. Instrucciones de uso .................................................................................................................................. 57 20. Bugs ........................................................................................................................................................... 58 5 / 84.

(6) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. 21. Proyección a futuro .................................................................................................................................... 59 22. Presupuesto ............................................................................................................................................... 60 23. Marketing y Ventas .................................................................................................................................... 61 24. Conclusiones ............................................................................................................................................. 62 Anexo 1. Entregables del proyecto .................................................................................................................. 63 Anexo 2. Código fuente (extractos) ................................................................................................................. 64 Anexo 3. Capturas de pantalla ........................................................................................................................ 74 Anexo 4. Libro de estilo ................................................................................................................................... 83 Anexo 5. Bibliografía ........................................................................................................................................ 84. 6 / 84.

(7) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Figuras y tablas Lista de imágenes, tablas, gráficos, diagramas, etc., numeradas, con títulos y las páginas en las que aparecen.. Índice de figuras Ilustración 1: Arquitectura de Angular .............................................................................................................................. 15 Ilustración 2 Diagrama de Gantt ........................................................................................................................................ 20 Ilustración 3 Diagrama ER ................................................................................................................................................ 24 Ilustración 4 Diagrama de casos de uso ........................................................................................................................... 26 Ilustración 5 Wireframe Inicio sin login Smartphone ......................................................................................................... 27 Ilustración 6. Wireframe Inicio con login Smartphone ....................................................................................................... 27 Ilustración 7. Wireframe Inicio sin loguin escritorio ........................................................................................................... 28 Ilustración 8. Wireframe Buscar profesional Smartphone ................................................................................................. 28 Ilustración 9: Wireframe Buscar profesional Escritorio ...................................................................................................... 29 Ilustración 10. Wireframe Lista de profesionales escritorio ............................................................................................... 29 Ilustración 11. Wireframe Lista de profesionales Smartphone .......................................................................................... 30 Ilustración 12. Wireframe Ofertas de empleo Smartphone................................................................................................ 30 Ilustración 13. Wireframe Ofertas de empleo Escritorio .................................................................................................... 31 Ilustración 14. Wireframe Detalle del profesional Escritorio .............................................................................................. 31 Ilustración 15. Mi perfil Smartphone .................................................................................................................................. 32 Ilustración 16. Wireframe Detalle del profesional Smartphone .......................................................................................... 32 Ilustración 17. Wireframe Detalle del profesional Escritorio .............................................................................................. 33 Ilustración 18. Wireframe Mi perfil Escritorio ..................................................................................................................... 34 Ilustración 19. Mockup Inicio sin login Smartphone .......................................................................................................... 35 Ilustración 20. Mockup Inicio logueado Smartphone ......................................................................................................... 35 Ilustración 21. Mockup Inicio sin Loguin Escritorio ............................................................................................................ 36 Ilustración 22. Mockup Detalle profesional Smartphone ................................................................................................... 37 Ilustración 23. Mockup Buscar profesional Smartphone ................................................................................................... 37 Ilustración 24. Mockup Buscar profesional Escritorio ........................................................................................................ 38 Ilustración 25. Mockup Lista de profesionales Escritorio ................................................................................................... 38 Ilustración 26. Mockup Ofertas de empleo Smartphone ................................................................................................... 39 Ilustración 27. Mockup Detalles profesional Smartphone ................................................................................................. 39 Ilustración 28. Mockup Detalle profesional Escritorio ........................................................................................................ 40 Ilustración 29. Mockup Ofertas de empleo Escritorio ........................................................................................................ 41 Ilustración 30. Mockup Mi perfil Smartphone .................................................................................................................... 42 Ilustración 31. Mockup Mi perfil Escritorio ......................................................................................................................... 43 Ilustración 32. Número de conciertos de música popular en vivo en España en 2017, por comunidad autónoma ........... 44 Ilustración 33: Evolución anual de la facturación neta de la industria de la música en vivo en España entre 2005 y 2018 (en millones de euros *...................................................................................................................................................... 45 Ilustración 34. Empleo por ramas de actividad .................................................................................................................. 46 Ilustración 35. Personas que realizaron actividades artísticas en el último año según sexo por tipo de actividad............ 46 Ilustración 36. Personas que realizaron actividades artísticas en el último año según edad por tipo de actividad ........... 47 7 / 84.

(8) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Ilustración 37. Profesionales de la música y danza por tipo .............................................................................................. 47 Ilustración 38. Población que ha usado Internet de manera frecuente en los últimos tres meses por grupos de edad y sexo. 2018......................................................................................................................................................................... 48 Ilustración 39. Captura Inicio Escritorio ............................................................................................................................. 74 Ilustración 40. Captura inicio Smartphone......................................................................................................................... 75 Ilustración 41. Captura Mi perfil Escritorio ......................................................................................................................... 76 Ilustración 42. Captura buscador profesionales Escritorio ................................................................................................ 77 Ilustración 43. Captura resultados profesionales Smartphone .......................................................................................... 78 Ilustración 44. Captura Detalle Profesional Escritorio ....................................................................................................... 79 Ilustración 45. Captura Detalle Profesional Smartphone ................................................................................................... 80 Ilustración 46. Captura Ofertas de Empleo Escritorio ....................................................................................................... 81 Ilustración 47. Captura Detalle Oferta Smartphone ........................................................................................................... 82 Ilustración 48. Icono MusicJobs ........................................................................................................................................ 83. Índice de tablas Tabla 1: Planificación del trabajo ...................................................................................................................................... 19. 8 / 84.

(9) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. 1. Introducción 1.1 Contexto y justificación del trabajo. Hoy en día la tecnología está presente en casi todos los ámbitos de nuestra vida. Sin embargo, en el sector de la música, a pesar de que existen varias páginas y aplicaciones web específicas para músicos, pocas contemplan buscadores para cubrir necesidades como, por ejemplo, encontrar a un músico cercano con unas características concretas o tener acceso a todas las ofertas para músicos publicadas en las principales páginas de empleo del país en una sola herramienta. Mi experiencia en este sector es la que me motiva a desarrollar esta herramienta, ya que la música es una de mis aficiones y una pequeña parte de mi carrera profesional. Por lo tanto, este Trabajo de Fin de Máster (TFM) se involucra bastante en mi vida personal.. 9 / 84.

(10) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. 2. Descripción Este Trabajo de Fin de Máster (TFM) trata de desarrollar una aplicación web progresiva destinada para músicos, y también para personas que quieren contratar a un músico.. La idea surge de la necesidad de conectar a los músicos entre ellos permitiendo, de esta manera, encontrar fácilmente compañeros para un proyecto musical o para una actuación en concreto. Creando una plataforma como punto de encuentro entre músicos de la misma región, se fomenta la colaboración y aumentan las posibilidades de promoción. Por otro lado, se unificarán muchas de las ofertas de empleo destinadas para músicos publicadas en distintas webs de empleo, lo que facilitará la búsqueda de empleo en este sector.. El objetivo principal de la aplicación es la conexión entre músicos para realizar proyectos en común, y facilitar la búsqueda de empleo en el sector musical.. A continuación, se describen las funcionalidades principales de la aplicación: -. Buscar y mostrar ofertas de empleo para profesionales del sector musical.. -. Crear un perfil de usuario, con posibilidad de añadir foto de perfil, enlaces a redes sociales y a vídeos publicados en Youtube o Vimeo.. -. Buscar profesionales entre todos los usuarios de la aplicación. Principalmente se crearán filtros por estilo, instrumento y ubicación.. -. Registro y reseteo de contraseña con confirmación por correo electrónico.. Las tecnologías utilizadas para el desarrollo de la aplicación son Angular 8 para el frontend, y una API en Express para el backend. También se crea una base de datos en MySql. Para el web scraping se elige Puppeteer, una librería para Node.js de Google Chrome, y se utiliza en el backend, realizando una búsqueda por las distintas webs cada 6 horas.. 10 / 84.

(11) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. 3. Objetivos A continuación, se enumeran los objetivos principales y secundarios de este trabajo.. 3.1 Principales -. Desarrollar una aplicación que permita buscar profesionales del sector musical, filtrando por profesión, estilo musical, instrumento y ubicación, así como buscar ofertas de empleo para músicos.. -. Desarrollar una aplicación web progresiva en Angular que sea escalable, adaptable a todos los dispositivos, intuitiva, y que ofrezca buena experiencia de usuario, poniendo en práctica los conocimientos adquiridos a lo largo del Máster.. -. Adquirir conocimientos en Express para realizar una API que sirva de interfaz entre la aplicación y la base de datos.. -. Obtener experiencia en Web Scraping con herramientas de JavaScript.. 3.2 Secundarios -. Promocionar músicos.. -. Facilitar la comunicación entre la comunidad de músicos para cubrir distintas necesidades.. 11 / 84.

(12) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. 4. Marco teórico Se han encontrado varias aplicaciones similares a la que se desarrolla en este proyecto. A continuación se detallan las más relevantes: -. https://myjobmusic.es: Gestor de empleo para músicos y músicas, en la que empresas y particulares solicitan artistas para eventos.. -. https://empleoparamusicos.com: Portal de empleo para músicos y músicas, en la que se muestran ofertas de trabajo publicadas en otras webs.. -. https://www.reverbnation.com: Red social internacional en la que bandas y artistas crean sus perfiles y publican sus canciones. Los usuarios pueden escuchar canciones, comprarlas, seguir a los artistas, etc.. -. http://www.miuseek.com: Red social para músicos y músicas en la que se visualizan los distintos perfiles.. -. http://galiciantunes.com: Marca de la promoción internacional de la música gallega, ideada como plataforma conjunta de las instituciones, empresas y asociaciones profesionales del sector musical en Galicia. Grupos y artistas publican información como vídeos, discografía y datos de contratación.. Al comprobar que existen varios productos funcionando actualmente que cubren varias de las funcionalidades de la aplicación, se decide enfocarla para un ámbito más local, centrándose en la comunidad de músicos de Galicia. Dentro de este marco, GalicianTunes es la web que más se parece a este proyecto. Sin embargo, los objetivos principales que se describen en la propia web son contribuir al fortalecimiento de la industria musical gallega, lograr una mayor visibilidad social del sector y favorecer su proyección internacional. Los objetivos principales del proyecto no son ninguno de estos, sino que son facilitar la búsqueda de empleo para músicos y músicas, y conectar a los artistas entre ellos para crear nuevos proyectos. Se ha descubierto un grupo de Facebook llamado “Se busca/ Se ofrece Músico Galicia”, en el que se publican ofertas y demandas de músicos y músicas. Principalmente hay publicaciones buscando un músico o música para tocar algún instrumento o cantar en bandas nuevas o ya existentes. Se ha comprobado que en los últimos días ha habido varias publicaciones con respuestas. Este grupo de Facebook con más de 1800 miembros y con una actividad relevante, demuestra que hay un número importante de posibles usuarios de la aplicación.. 12 / 84.

(13) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. 5. Contenidos Los elementos que están presentes en todas las pantallas de la aplicación son el menú de navegación y el pie de página. El menú estará situado en la parte superior y será estático, es decir, aunque se haga scroll hacia abajo, siempre estará visible en la parte superior de la pantalla. El pie contendrá el mapa del sitio, permitiendo acceder a cualquier página desde él.. La aplicación está compuesta por las siguientes pantallas: -. Inicio: En esta página se mostrará una breve descripción de la aplicación, y algún enlace a las partes más relevantes. También contará con una sección con los últimos anuncios de empleo para músicos.. -. Nuevo usuario: Formulario de registro para los nuevos usuarios.. -. Lista de profesionales: Listado con todos los profesionales registrados en la aplicación. Se buscarán usuarios a través de filtros como especialidad (instrumentista, cantante, compositor/a …), estilo musical y ubicación. Al pulsar en buscar se mostrarán los resultados. Al pulsar sobre un registro, se entra en el perfil del usuario seleccionado.. -. Mi perfil: Formulario para modificar los datos de perfil, accesible solamente si el usuario está autentificado.. -. Detalles del profesional: Pantalla con los detalles del profesional seleccionado.. -. Ofertas de empleo: Pantalla donde se visualizarán ofertas de empleo publicadas en otras aplicaciones como MilAnuncios o Indeed. Solamente es accesible para usuarios autentificados.. -. Detalle de la oferta: Página con los detalles de la oferta, incluyendo un enlace donde se encontrará más información. En algún caso, este enlace descarga publicaciones del BOE u otros documentos oficiales. Solamente es accesible para usuarios autentificados.. -. Contacto: Formulario para enviar comentarios o sugerencias sobre la aplicación.. 13 / 84.

(14) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. 6. Metodología Antes del inicio del proyecto, hay una fase previa que consiste en la determinación de la temática de la aplicación y la investigación sobre las herramientas existentes actualmente en el mercado.. La fase inicial del trabajo consiste en el análisis completo de la aplicación. Se concretan las funcionalidades, los objetivos y los contenidos, las tecnologías a utilizar, los recursos necesarios para su desarrollo, se define la arquitectura de la aplicación y se planifica el desarrollo de la aplicación.. En la segunda fase se configura el entorno de trabajo y se inicia el desarrollo de la aplicación, documentando los procedimientos más relevantes. En este periodo se realiza un análisis de mercado, un estudio de usabilidad, se crean diagramas de flujo, árbol de navegación y casos de uso, y se diseñan los wireframes de las pantallas principales. Finalmente, se consolidan los fundamentos de la aplicación, revisando su arquitectura y se crea la base de datos.. En la siguiente fase se crea una primera versión de la aplicación con las funcionalidades más importantes, siendo esta fase la más completa en cuanto al desarrollo de la aplicación. Durante todo el proceso se documenta y justifica el desarrollo.. Por último, en la fase final se finaliza y se entrega el proyecto, finalizando su desarrollo y su documentación. Se realizan los test necesarios, se corrigen errores y se hace una revisión completa de la memoria. También se crean las presentaciones en vídeo y en diapositivas.. 14 / 84.

(15) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. 7. Arquitectura de la aplicación/sistema/servicio Para desarrollar esta aplicación se decide utilizar Angular para el frontend, la parte con la que interactúa el usuario, MySql para la base de datos, y Express y Node.js para servir una REST API que recibirá las peticiones de la aplicación para enviar y obtener información de la base de datos. El cliente y el servidor estarán en proyectos diferentes.. 7.1 Frontend Angular será el framework que se utilizará para crear la parte del cliente de la aplicación, y se sigue la arquitectura estándar de una aplicación en Angular.. Ilustración 1: Arquitectura de Angular 1. 1. https://angular.io/guide/architecture, 2019 15 / 84.

(16) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. La estructura de carpetas será la siguiente: -src -app -helpers -home -models -pipes -services -… -assets -fonts -icons -img La carpeta ‘models’ tendrá las clases que representan los objetos de la base de datos para facilitar el manejo de los datos. En la carpeta ‘services’ estarán los servicios, encargados de realizar las llamadas a la API para cada acción. Habrá una carpeta para cada componente de la aplicación dentro de ‘src/app’.. 7.2 Backend Para el backend se crea una API REST en Express y se sirve con Node.js. La estructura de carpetas será la siguiente: -controllers -routes Los controladores, alojados en la carpeta ‘controllers’, implementarán funciones para cada acción en la que se necesite interactuar con la base de datos, tanto para obtener como para introducir o modificar información. En el directorio ‘routes’ habrá un archivo por cada controlador, donde se definen los endpoints (URL) de la API y las funciones de los controladores para recibir las peticiones desde la aplicación. A mayores, en el archivo principal del backend (server/src/index.ts), se invoca a una función de una clase llamada ‘webScrapping.ts’. Esta llamada se implementa dentro de la función de JavaScript setInterval con un intervalo de 6 horas entre cada llamada.. 7.2 Base de datos La base de datos se creará en MySql a través de phpMyAdmin en un servidor Wamp. 16 / 84.

(17) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. 8. Plataforma de desarrollo A continuación, se detallan los recursos tecnológicos necesarios para el desarrollo del proyecto: -. Software: Para desarrollar tanto el frontend como el backend se utiliza Visual Studio Code, y para crear la base de datos se ejecuta un servidor en local con Wamp, y se crea la base de datos en PhpMyAdmin. Git es el controlador de versiones.. -. Hardware. El Hardware utilizado es un ordenador portátil Acer I5, con 8Gb de memoria RAM y sistema operativo Windows 10.. -. Web apps: Se utiliza la interfaz web de GitHub para realizar algunas operaciones de control de versiones, aunque mayoritariamente se utiliza la consola.. 17 / 84.

(18) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. 9. Planificación Para planificar el trabajo, se divide el proceso en cuatro fases principales. En la planificación se han distribuido los días contando que se dedican 4 horas diarias en la primera fase, 6 horas en las demás, y 8 horas diarias en los últimos 3 o 4 días, sin contar los fines de semana y festivos.. -. Análisis e investigación: Se realiza una investigación sobre las aplicaciones similares a la idea del proyecto y un estudio de las herramientas adecuadas para el desarrollo de este tipo de aplicaciones. También se elabora la metodología de trabajo y la planificación, se definen las funcionalidades, objetivos y contenidos de la aplicación. Una vez que se deciden las herramientas a utilizar para el desarrollo, se analizan los recursos necesarios y se diseña la arquitectura.. -. Inicio del desarrollo y su documentación: Se crea el diagrama de la base de datos, el árbol de navegación, el estudio de usabilidad y casos de uso. Posteriormente, se configura el entorno de desarrollo y se crea la base de datos para poder iniciar el desarrollo, comenzando por el backend. En esta fase se inicia el proceso de documentación de la aplicación, que estará presente hasta el fin del trabajo.. -. Desarrollo de la primera versión de la aplicación: Esta fase se centra en el desarrollo de la aplicación, y en ella se comienza a desarrollar el frontend, creando los primeros servicios y componentes, y aplicando estilos a la web con herramientas como SCSS y Bootstrap. Finalmente, se publica una primera versión en un servidor.. -. Finalización del proyecto: Se implementan los servicios y componentes restantes y el servicio de web scraping, además de las pruebas necesarias. Por último, se revisa la memoria y se elabora la presentación en diapositivas y en vídeo.. 18 / 84.

(19) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Fase. Tarea. Fecha inicio 18/09/2019. Fecha fin 01/10/2019. Horas 44. Días 11. Investigación sobre herramientas similares en el mercado Definición del problema e inicio de la memoria Definición de funcionalidades y contenidos de la aplicación. 18/09/2019. 19/09/2019. 8. 2. 20/09/2019. 23/09/2019. 6. 1.5. 23/09/2019. 25/09/2019. 8. 2. Definición de objetivos. 25/09/2019. 26/09/2019. 4. 1. Determinación de las tecnologías a utilizar y recursos necesarios para el desarrollo. 26/09/2019. 26/09/2019. 2. 0.5. Diseño de la arquitectura. 27/09/2019. 27/09/2019. 4. 1. Elaboración de la metodología y planificación del trabajo Revisión del índice y los primeros puntos de la memoria. 28/09/2019. 28/09/2019. 4. 1. 30/09/2019. 01/10/2019. 8. 2. Segunda fase: Todas Diseño del árbol de navegación y casos de uso Perfiles de usuario Creación de prototipos Configuración del entorno de trabajo Diseño del diagrama de la base de datos Creación de la base de datos. 02/10/2019. 30/10/2019. 126. 21. 02/10/2019. 02/10/2019. 6. 1. 04/10/2019 08/10/2019 21/10/2019 22/10/2019 22/10/2019 23/10/2019. 07/10/2019 18/10/2019 21/10/2019 22/10/2019 23/10/2019 30/10/2019. 12 54 6 3 9 36. 2 9 1 0.5 1.5 6. Tercera fase: Todas Desarrollo de servicios y de componentes en Angular: Inicio, Nuevo Usuario, Iniciar sesión, Mi perfil, Detalles del profesional, Ofertas de Empleo Publicación de la primera versión en un servidor. 31/10/2019. 08/12/2019. 156. 26. 31/10/2019. 02/12/2019. 138. 23. 04/12/2019. 04/12/2019. 6. 1. Corrección de la memoria. 05/12/2019. 05/12/2019. 6. 1. Creación del vídeo de demostración. 08/12/2019. 08/12/2019. 6. 1. Cuarta fase: Todas. 09/12/2019. 06/01/2020. 114. 18. Desarrollo del servicio de web scraping. 09/12/2019. 27/12/2019. 78. 13. Pruebas y correcciones. 30/12/2019. 02/01/2020. 12. 2. 03/01/2020. 03/01/2020. 8. 1. 04/01/2020. 06/01/2020. 16. 2. Primera fase: Todas. Análisis e investigación. Diseño e inicio del desarrollo. Revisión de memoria y desarrollo del backend. Desarrollo de la primera versión de la aplicación. Finalización del proyecto. Revisión, corrección y finalización de la memoria Elaboración de presentaciones en diapositivas y vídeo. Tabla 1: Planificación del trabajo. 19 / 84.

(20) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Ilustración 2 Diagrama de Gantt. 20 / 84.

(21) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. 10. Proceso de trabajo El proceso de desarrollo para este proyecto se divide en cuatro etapas, marcadas por las fechas de entrega. Las dos primeras etapas se centran en la planificación, diseño de la arquitectura, estudio de los perfiles de usuarios tipo de la aplicación y realización de prototipos.. La tercera entrega consiste en la mayor parte del desarrollo de la aplicación. Para el desarrollo se comienza por la creación del backend con Express, y la implementación de los principales endpoints de la API REST. Se continúa creando el frontend con Angular CLI. Se crean los componentes, servicios, modelos y demás clases necesarias, y se comienza la implementación de las distintas funcionalidades. Al mismo tiempo se van añadiendo y modificando funciones del backend. En la última etapa se desarrolla el web scraping de MilAnuncios y demás páginas, se corrigen errores, se refactoriza lo que sea posible y se realizan pruebas.. A continuación, se detallan los procesos del desarrollo que provocaron atascos o complicaciones. -. Foto de perfil: La funcionalidad de subir una foto de perfil ha tenido alguna complicación. En primer lugar, la librería ‘multer’ parecía una buena solución para subir los ficheros a una carpeta del mismo servidor donde se encuentra la API. Se ha comprobado que funciona en local, pero concretamente en ‘Heroku’ no es posible debido a un proceso que elimina todos los archivos cada poco tiempo. Finalmente se ha optado por utilizar la librería ‘promise-ftp’, además de ‘multer’. Una vez subido el archivo, como no se borra instantáneamente, se realiza una subida a través de FTP al servidor donde se aloja el frontend. Los datos de conexión al FTP se indican en el archivo de configuración ‘server/src/ftp.ts’. También se desarrolla la eliminación de la antigua foto del usuario si tenía alguna ruta en el campo foto de la tabla en base de datos. Finalmente se tuvo que cambiar la conexión FTP con una SFTP, ya que se decidió utilizar el servidor facilitado por la UOC para guardar las imágenes, y éste utiliza una conexión SFTP. Además de este problema, cuando se ha probado la aplicación en varios dispositivos móviles y el usuario saca la foto con la cámara, en algún dispositivo la foto se mostraba rotada lateralmente. Se ha añadido una pequeña funcionalidad en el frontend para solventar este problema. Cuando el usuario saca la foto, si después pincha en la foto, ésta se rota un ángulo de 90º.. -. Sección Vídeos del componente ‘Mi perfil’: En esta parte ha surgido un problema de renderizado de los iframes de Youtube y Vimeo. En un primer intento, al asociar el valor del atributo src del iframe a una variable del usuario a través del doble data binding de Angular ([src] = “video”), daba un error en la consola del navegador: “Unsafe value used in a resource URL context”. Para solventar este error, se ha añadido en el constructor del componente un DomSanitizer, una clase de la librería ‘@angular/platform-browser’, que hace que el componente ignore este problema de seguridad. Posteriormente, se ha observado que cualquier cambio en el formulario como un foco en un campo de texto, provocaba que el iframe volviese a ser cargado, lo que provocaba que los 21 / 84.

(22) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. vídeos desapareciesen y volviesen a aparecer continuamente de forma molesta. Para solucionar esto, se ha creado un componente concreto para los vídeos, que se muestra en cada interacción de la colección de vídeos del usuario. A este componente hijo se le indica en la directiva ‘@Component()’ la propiedad ‘ changeDetection: ChangeDetectionStrategy.OnPush’ -. Actualizar usuario: Aparte de las dificultades con la foto de perfil, fue necesario desarrollar en el backend un sistema para comparar todos los instrumentos, profesiones, estilos y vídeos asociados al usuario, eliminando de la base de datos los registros que no existan en el cuerpo de la petición, y añadiendo los nuevos.. A lo largo del desarrollo se han detectado y desarrollado optimizaciones. Por ejemplo, en lugar de hacer una llamada a la API cada vez que se cambia de provincia para obtener los ayuntamientos, se desarrolla una funcionalidad para almacenar los datos en localStorage (profesiones, instrumentos, estilos, provincias, últimos 3 profesionales registrados y ofertas de empleo). En el caso de los últimos profesionales y las ofertas de empleo, si han pasado más de dos horas desde la última sincronización con la base de datos, se vuelven a realizar las peticiones. De esta forma se ahorran muchas llamadas a la API, se ofrece mejor rendimiento al mostrar los resultados más rápido y se depende mucho menos de la conexión a Internet. En el desarrollo del web scraping, se han aplicado filtros a las ofertas, ya que aparecían muchos anuncios que no iban destinados a músicos aunque apareciese la palabra “música” en la descripción, por ejemplo, anuncios de ofertas de empleo para camareros. Se ha intentado obtener los datos de la web “InfoJobs”, pero detecta el scraping, y muestra un mensaje de bloqueo en lugar del código fuente que se puede ver si se inspecciona la página en un navegador. En “MilAnuncios” se mostró el mismo mensaje de bloqueo después de realizar muchas pruebas, pero al volver a realizar las consultas unas horas más tarde se solventó el problema. También fue necesario implementar en el servicio del web scraping un sistema que compara las ofertas existentes en la base de datos con las nuevas. Para ello se establece un identificador único (en cada web se extrae de campos diferentes), se eliminan de la base de datos las ofertas que ya no existan, se añaden las nuevas, y solamente se actualiza una oferta si cambia la fecha, ya que se ha detectado que, por ejemplo, en MilAnuncios, en alguna oferta se actualiza la fecha cada cierto tiempo.. Las webs que se han añadido en el servicio de web scraping son las siguientes: -. MilAnuncios: https://www.milanuncios.com/ofertas-deempleo/musico.htm?fromSearch=1&dias=90&demanda=n. -. Xunta de Galicia: https://emprego.xunta.gal/portal/index.php/gl/buscar-emprego.html?emprego=musi. -. CanalOposiciones: https://www.canaloposiciones.com/buultconv.asp?busca=musica. -. Indeed: https://www.indeed.es/jobs?q=musica&sort=date. 22 / 84.

(23) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. 11. Librerías utilizadas A continuación, se detallan las librerías utilizadas en el trabajo, tanto en el backend como en el frontend.. -. @types/express: Express es la librería que se utiliza para servir la API REST con el objetivo de comunicar el frontend con la base de datos. Se utiliza en el servidor, en el archivo ‘server/src/index.ts’.. -. @types/cors: Middleware para agregar funcionalidad CORS a la API. Se utiliza en el archivo ‘server/src/index.ts’ para evitar problemas de acceso CORS desde el frontend.. -. @types/mysql: Librería que permite conectar la API con la base de datos en MySQL. Se utiliza en los controladores, y la configuración se encuentra en el archivo ‘server/src/database.ts’.. -. @types/nodemailer: Se utiliza en la funcionalidad de registro en el servidor, para enviar el correo electrónico de confirmación a los nuevos usuarios y para actualizar la contraseña.. -. @types/morgan: facilita la depuración escribiendo logs en cada llamada y respuesta de la API.. -. multer: se utiliza para subir archivos a una carpeta del servidor, en el fichero ‘server/src/routes/usersRoutes.ts’ para actualizar la foto de perfil del usuario.. -. @types/promise-ftp: Al observar que una vez desplegado el backend en Heroku, las fotos se eliminaban pasado un corto período de tiempo, se decide añadir esta librería para subir las fotos a través de FTP a una carpeta del servidor donde se encuentra el frontend. Se utiliza en la funcionalidad de actualizar usuario, en el archivo ‘server/src/controllers/usersControllers.ts’. -. @types/bcrypt: Se utiliza para encriptar la contraseña del usuario, en el archivo ‘server/src/controllers/usersControllers.ts’, para las funcionalidades de autentificación, registro y actualización de contraseña.. -. @types/jsonwebtoken: Librería para crear un token de acceso JWT. Se utiliza para añadir seguridad en algunos endpoints de la API.. -. @fortawesome/fontawesome-free: Librería utilizada en el frontend para iconos de ‘fontawesome’.. -. bootstrap: se utiliza en el frontend para facilitar el diseño. Por ejemplo, se utiliza el componente ‘carousel’ en la página de inicio, y para los mensajes de éxito y error.. -. Google Fonts: Se utilizan las tipografías de Google Fonts ‘Roboto’, ‘Alice’, ‘Courguette’ y ‘Material Icons’.. -. Puppeteer: Para el web scraping se utiliza esta librería de Google Chrome.. 23 / 84.

(24) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. 12. Diagramas UML 12.1 Diagrama de base de datos. Ilustración 3 Diagrama ER. 24 / 84.

(25) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. 12.2 Árbol de navegación. NUEVO. INICIO. USUARIO. INICIO SESIÓN. LISTA DE. OFERTAS DE. PROFESIONALES. EMPLEO. DETALLE DEL. DETALLE DE. PROFESIONAL. LA OFERTA. MI PERFIL. CONTACTO. Ilustración 3: Árbol de navegación. 25 / 84.

(26) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. 12.3 Diagrama de casos de uso. Nuevo profesional (registro) Modificar perfil Mi perfil Usuario. Ofertas de empleo. <<includes>>. Login. >>. Detalle de la oferta Inicio. Lista de profesionales. Detalle del profesional. Ilustración 4 Diagrama de casos de uso. 26 / 84.

(27) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. 13. Prototipos A continuación, se presentan los wireframes para los siguientes dispositivos: - Escritorio y Tablet Landscape: Resolución de 1024px - Smartphone vertical: Resolución de 360px. 13.1 Lo-Fi. Ilustración 5 Wireframe Inicio sin login Smartphone. Ilustración Figura 6: 6. Wireframe Wireframe Inicio Inicio con con login login Smartphone. 27 / 84.

(28) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Ilustración 7. Wireframe Inicio sin loguin escritorio. Ilustración 8. Wireframe Buscar profesional Smartphone. 28 / 84.

(29) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Ilustración 9: Wireframe Buscar profesional Escritorio. Ilustración 10. Wireframe Lista de profesionales escritorio. 29 / 84.

(30) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Figura Ilustración 11: Wireframe 11. Wireframe Lista Lista de profesionales de profesionales Smartphone Smartphone. Ilustración 12.Wireframe WireframeOfertas Ofertasde de Figura 12: empleo empleoSmartphone Smartphone. 30 / 84.

(31) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Ilustración 13. Wireframe Ofertas de empleo Escritorio. Ilustración 14. Wireframe Detalle del profesional Escritorio. 31 / 84.

(32) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Ilustración 16. Wireframe Detalle del profesional Smartphone. Ilustración 15. Mi perfil Smartphone. 32 / 84.

(33) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Ilustración 17. Wireframe Detalle del profesional Escritorio. 33 / 84.

(34) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Ilustración 18. Wireframe Mi perfil Escritorio. 34 / 84.

(35) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. 3.2 Hi-Fi •. Mockups. Ilustración 20. Mockup Inicio logueado Smartphone. Ilustración 19. Mockup Inicio sin login Smartphone. 35 / 84.

(36) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Ilustración 21. Mockup Inicio sin Loguin Escritorio. 36 / 84.

(37) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Ilustración 23. Mockup Buscar profesional Smartphone. Ilustración 22. Mockup Detalle profesional Smartphone. 37 / 84.

(38) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Ilustración 24. Mockup Buscar profesional Escritorio. Ilustración 25. Mockup Lista de profesionales Escritorio. 38 / 84.

(39) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Ilustración 27. Mockup Detalles profesional Smartphone. Ilustración 26. Mockup Ofertas de empleo Smartphone. 39 / 84.

(40) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Ilustración 28. Mockup Detalle profesional Escritorio. 40 / 84.

(41) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Ilustración 29. Mockup Ofertas de empleo Escritorio. 41 / 84.

(42) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Ilustración 30. Mockup Mi perfil Smartphone. 42 / 84.

(43) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Ilustración 31. Mockup Mi perfil Escritorio. 43 / 84.

(44) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. 14. Perfiles de usuario La aplicación está destinada a personas que se dedican a la música, principalmente instrumentistas y cantantes, pero también a técnicos, empresas, asociaciones y otras entidades que también están relacionadas con este sector, como por ejemplo salas de conciertos, estudios de grabación, productoras, bandas municipales, locales de ensayo, etc. Los usuarios secundarios de la aplicación serán los programadores y organizadores de eventos, que utilizarán la aplicación para buscar profesionales sin necesidad de estar registrados. A continuación, se presenta un análisis sobre la actividad musical en España.. Según un informe publicado en statista.com, en España se acogieron, en total, más de 87.000 conciertos en 2017, siendo Madrid la comunidad autónoma en cabeza, seguido por Andalucía.. Ilustración 32. Número de conciertos de música popular en vivo en España en 2017, por comunidad autónoma. 2. 2. Fuente: https://es.statista.com/estadisticas/475086/numero-de-conciertos-de-musica-en-directo-espana-por-cc-aa/. 44 / 84.

(45) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. El informe de la evolución anual de la facturación neta de la industria de la música en vivo en España muestra que se facturaron 333,9 millones de euros en música en vivo.. Ilustración 33: Evolución anual de la facturación neta de la industria de la música en vivo en España entre 2005 y 2018 (en millones de euros *3. Consultando las estadísticas de empleo por ramas de actividad en el INE, en el segundo trimestre de 2019 había 1.775.924 personas trabajando en actividades artísticas, recreativas y otros servicios, de un total de 20.437.437, lo que representa más del 8% de la población.. 3. *. Fuente: https://es.statista.com/estadisticas/472441/industria-de-la-musica-en-vivo-facturacion-en-espana/ No incluye los datos de macrofestivales.. 45 / 84.

(46) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Ilustración 34. Empleo por ramas de actividad4. Según la Encuesta de Hábitos y Prácticas Culturales en España de la página web del Ministerio de Cultura y Deporte, el 4,9% de la población ha realizado actividades artísticas relacionadas con la danza en el 2015, el 7,8% ha tocado un instrumento musical, y el 2,4% ha cantado en un coro. Las mujeres se decantan más por la danza y cantar en coros, y los hombres por tocar instrumentos. Analizando las estadísticas por grupos de edades, las personas de 15 a 24 años realizan más actividades relacionadas con la música.. Ilustración 35. Personas que realizaron actividades artísticas en el último año según sexo por tipo de actividad5. 4 5. Fuente: https://www.ine.es/jaxiT3/Tabla.htm?t=28607&L=0 Fuente: https://www.culturaydeporte.gob.es/dam/jcr:eb5b8140-e039-42ab-8e24-500fddc5b2a4/anuario-de-estadisticas-culturales-. 2018.pdf. 46 / 84.

(47) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Ilustración 36. Personas que realizaron actividades artísticas en el último año según edad por tipo de actividad6. Como consecuencia de la Ley de Protección de datos, los datos de profesionales de música no están disponibles a partir de la fecha de 2005, por lo que a continuación se muestran los datos de 2004.. En 2004 había 3.471 instrumentistas y 2.402 docentes de música trabajando en España. También se puede ver que se contaba con 1.142 compositores, 770 cantantes, 202 críticos, 622 directores y 268 investigadores. Estos perfiles serán usuarios tipo de la aplicación.. Ilustración 37. Profesionales de la música y danza por tipo7. 6. Fuente: https://www.culturaydeporte.gob.es/dam/jcr:eb5b8140-e039-42ab-8e24-500fddc5b2a4/anuario-de-estadisticas-culturales-. 2018.pdf 7. Fuente: http://estadisticas.mecd.gob.es/CulturaJaxiPx/Tabla.htm?path=/t18/p18/a2005//l0/&file=T1801005.px&type=pcaxis&L=0. 47 / 84.

(48) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Finalmente, se muestra el informe de la población que ha usado internet de manera frecuente en los últimos tres meses.. Ilustración 38. Población que ha usado Internet de manera frecuente en los últimos tres meses por grupos de edad y sexo. 2018.8. Considerando los datos, los usuarios tipo de la aplicación serán personas entre 18 y 45 años.. 8. Fuente: https://www.ine.es/jaxi/Datos.htm?path=/t00/mujeres_hombres/tablas_1/l0/&file=c05001.px. 48 / 84.

(49) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. Cristina Crujeiras Pianista, apasionada por la música clásica ● Acaba de terminar la carrera de piano ● Le gustaría conseguir un trabajo como pianista o teclista, pero no sabe cómo encontrarlo.. X.com quiere que Cristina:. ● Encuentre trabajo como pianista. ● Recomiende la web a otros compañeros del conservatorio.. Perfil personal Cristina acaba de finalizar sus estudios de piano en el conservatorio superior de música. Sigue viviendo con sus padres, y desde que terminó el instituto con 18 años, además de seguir estudiando en el conservatorio, trabaja de camarera en un bar de tapas de su barrio en Barcelona. Aunque está cómoda con su trabajo, su pasión es la música, y le encantaría trabajar de lo que más le gusta: tocar el piano. Cristina siempre ha oído que era imposible vivir de la música, pero ella no pierde la esperanza y busca a diario ofertas de empleo en internet, esperando que algún día aparezca su primer trabajo como músico. Objetivos y Motivaciones Cristina necesita... ● Encontrar un trabajo de pianista o profesora de piano. ● Promocionar su carrera. Cristina teme... ● No poder trabajar nunca como músico. ● Que la música clásica tenga poca salida laboral. Cristina visita x.com para… ● Encontrar empleo como pianista o teclista. ● Conocer gente para crear proyectos musicales. Cristina presta atención a… ● Aplicaciones, sitios web y redes sociales donde publiquen ofertas de empleo.. Scenario: Cristina llega a su casa de trabajar a las 7 de la tarde. Mientras toma un descanso, busca ofertas de empleo para músicos en su teléfono móvil. Abre la aplicación, y ve varias ofertas para pianistas y profesores de música. Le interesa una de las ofertas, que es para profesora de clases extraescolares de música en Barcelona, por lo que pincha en el enlace para acceder a la oferta de trabajo.. Demografía: Edad: 21 años (15/07/1998) Estudios: Bachiller y Conservatorio superior de piano Trabajo: Camarera Sueldo: 18000 €/año Estado civil: Soltera Hobbies: Tocar el piano, asistir a conciertos, hacer deporte y participar en redes sociales. Personalidad: Estudiosa, organizada.. Capacidades tecnológicas Ordenador: lo utiliza básicamente para: ● Leer el correo ● Redes sociales, tanto para amistades como para buscar grupos musicales interesantes ● Buscar partituras, audios y vídeos para practicar con el piano ● Consultar páginas de ofertas de empleo ● Compras online Smartphone: ● Leer el correo ● Redes sociales, tanto para amistades como para publicitar su página de perfil como pianista. ● Consultar páginas de ofertas de empleo ● Buscar conciertos. 49 / 84.

(50) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. 15. Usabilidad/UX A continuación, se describe cómo se han aplicado distintos principios de usabilidad y técnicas para mejorar la experiencia de usuario. -. Scroll top. Cada vez que el usuario navega por la aplicación, automáticamente se desplazará hacia la parte superior en la siguiente ‘página’. Para conseguir esta funcionalidad de una forma simple, se añade el evento ‘onActivate()’ en el fichero ‘client/src/app/app.component.ts’ dentro de la etiqueta ‘<router-outlet>’ del fichero ‘client/src/app/app.component.html’: <router-outlet (activate)="onActivate($event)"></router-outlet> onActivate(event) { window.scroll(0,0); } También se añade un botón fijo para volver a la parte superior de la pantalla en los resultados de la búsqueda de profesionales.. -. Diálogos de confirmación. Para evitar descuidos o clicks accidentales, en algunas funcionalidades se muestra un mensaje de confirmación al usuario. Por ejemplo, si elimina un vídeo en la página de ‘Mi perfil’, aparece un diálogo preguntando si está seguro de eliminarlo, y solamente se eliminará si pulsa ‘Aceptar’. En la misma página de perfil, si el usuario realiza algún cambio en el formulario y después navega hacia otra página, también se muestra un diálogo para que confirme que quiere salir sin guardar los cambios.. -. Autocompletar. Los combos que tienen un número importante de elementos, como los ayuntamientos, estilos musicales e instrumentos, cuentan con un campo de texto en el que se van mostrando los resultados que contienen el texto a medida que se va escribiendo. Esto ayuda a encontrar un elemento fácilmente. Se muestran antes los resultados cuyo nombre empieza por el texto buscado, y debajo de éstos se muestran los que contienen el texto, pero comienzan de otra forma. La funcionalidad de autocompletar se ha obtenido de la documentación de Angular Material9. -. Paginación. En el componente de ofertas de empleo se muestran los resultados de forma paginada. En el ‘paginador’ se pueden elegir el número de elementos a mostrar. Este componente también se ha obtenido de Angular Material.10. -. Botones atrás y guardar/buscar en la parte superior de la aplicación.. -. Navegación: El usuario puede navegar a cualquier parte de la aplicación a través del menú de navegación situado en la parte superior, o a través de los enlaces del footer. Si el usuario ha navegado por la aplicación, se muestra en la parte superior un botón “Atrás” para poder prescindir de los botones del navegador o dispositivo para volver a la página anterior. Además, si se encuentra en la página de perfil, en la misma sección que el botón de retroceso, aparece un botón para guardar, con el objetivo de facilitar la experiencia del usuario y que no sea necesario desplazarse. 9. https://material.angular.io/components/autocomplete/overview https://material.angular.io/components/paginator/overview. 10. 50 / 84.

(51) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. hasta la parte inferior de la página para guardar los datos, ya que estos botones están siempre visibles. Por ejemplo, si el usuario solamente quiere cambiar la foto de perfil, que está en la parte superior de la página, no tendría que hacer scroll hasta el final para poder guardar los cambios. Si el usuario se encuentra en el buscador de profesionales, hay un botón para buscar profesionales en lugar del de guardar. -. Guardado de datos en caché. Se mejora la experiencia del usuario guardando datos que se obtienen de la API en caché con una fecha de caducidad temprana (entre 2 y 4 horas). Por ejemplo, al entrar en la página de inicio, si en la caché no hay datos o han “caducado”, se hace la petición a la API para obtener los elementos de la base de datos. La próxima vez que el usuario requiera de esa información, como esos datos están disponibles en caché se cargarán mucho más rápido. Con esta funcionalidad, además de mejorar la experiencia de usuario, se reducen las peticiones a la API (puede suponer un ahorro económico según el plan de alojamiento) y las conexiones a la base de datos.. -. Visibilidad del estado del sistema. En todos los botones que realizan peticiones a la API, por lo que tardan más tiempo en responder, se añade un spinner de la librería Bootstrap, desde que el usuario pulsa el botón hasta que se obtiene el resultado. También se añaden validaciones en los campos del formulario, de forma que cuando el usuario está escribiendo algo incorrecto se muestra un mensaje de error, informando del formato que se espera. Se añaden mensajes de aviso, tanto de error, como de éxito y alerta. Por ejemplo, si el usuario realiza el registro, se redirige a la página de acceso con un mensaje en la parte superior de la pantalla indicando que el registro se ha realizado correctamente y debe revisar su correo para confirmarlo, o que ha ocurrido un error.. -. Relación entre el sistema y el mundo real. Se utilizan iconos para los distintos campos del perfil de un profesional, o de los detalles de una oferta. Por ejemplo, el icono de un teléfono en el campo teléfono. También se utiliza el icono de usuario y nuevo usuario en el menú de navegación.. -. Libertad y control por parte del usuario. El usuario siempre puede deshacer o rehacer cualquier acción. Por ejemplo, puede modificar sus datos de perfil y cambiar la contraseña. También puede eliminar el usuario en la página de perfil. Para esto se añade una confirmación. -. Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de los errores. Se modifican los mensajes de error de la API para que el usuario lo entienda y pueda solucionarlo. Por ejemplo, si el usuario intenta iniciar sesión y no ha realizado la confirmación por correo electrónico, se muestra un aviso informando de que debe hacerlo, y si tiene algún problema puede pinchar en ‘Olvidé mi contraseña’. También se muestra un diálogo si el usuario realiza alguna modificación en el formulario de su perfil y abandona la página sin guardar, preguntando si está seguro de descartar los cambios.. 51 / 84.

(52) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. 16. Seguridad Se han desarrollado las siguientes funcionalidades para prevenir riesgos de seguridad en la aplicación: -. Encriptación de contraseña: Se utiliza la librería ‘bcrypt’11 para enviar la contraseña del usuario a la base de datos encriptada. Esta librería no permite desencriptar una contraseña, sino que solamente se puede comparar el texto plano con el encriptado, ya que siempre genera un resultado diferente para el mismo texto. Se puede configurar la complejidad de la encriptación mediante el parámetro saltOrRounds, siendo más compleja la encriptación cuanto más alto es el valor del parámetro. En este caso se establece este valor a 12, siendo 10 el mínimo recomendado, y teniendo en cuenta que cuanto mayor sea el saltOrRounds, más tarda en encriptarse o en comparar un texto plano con otro encriptado.. -. JWT (JSON Web Token): Se utiliza la librería ‘jsonwebtoken’12 para gestionar la sesión de los usuarios. En este caso, se añade el token al usuario devuelto en la función de autentificación de la API, y desde el frontend se gestiona la caducidad del token (24 horas) mediante localStorage. En el backend se añade la comprobación del token en el endpoint getOfertas, que es añadido mediante un interceptor http.. 11 12. https://www.npmjs.com/package/bcrypt https://www.npmjs.com/package/jsonwebtoken 52 / 84.

(53) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. 17. Requisitos de instalación/implantación/uso A continuación, se enumeran los requisitos de implantación para el cliente y el servidor de la aplicación. Cliente: -. Cuenta en Firebase. Servidor: -. -. Cuenta en Heroku con los siguientes BuildPacks: •. https://buildpack-registry.s3.amazonaws.com/buildpacks/jontewks/puppeteer.tgz. •. heroku/nodejs. Cuenta y repositorio en GitHub enlazado a la aplicación de Heroku.. Para el uso óptimo de la aplicación es necesario un dispositivo con un navegador actual como Google Chrome o Mozilla Firefox y con conexión a internet.. 53 / 84.

(54) Desarrollo de una Aplicación Web para profesionales del sector musical Máster en Desarrollo de Sitios y Aplicaciones Web Sara Paz Fernández. 18. Instrucciones de instalación/implantación A continuación, se detallan las instrucciones de implantación de la aplicación web.. 18.1 Producción Servidor En este caso, para publicar la API en Express se utiliza la Plataforma como Servicio (PaaS) Heroku. Para ello se crea una cuenta y se compra un contenedor (dyno). También se puede crear una aplicación gratuita. Hay que tener el código del servidor en un repositorio de GitHub y asociar este repositorio a la aplicación de Heroku. Para publicar la aplicación se siguen los pasos que se indican en la pestaña ‘Deploy’ de la página de la aplicación en Heroku. En este caso, la aplicación se llama ‘buscomusicoserver’ y, una vez añadido el repositorio de Git en la carpeta raíz del código del servidor (server), se ejecutan los siguientes comandos: heroku login heroku git:clone -a buscomusicoserver cd buscomusicoserver git add . git commit -am "make it better" git push heroku master. Al estar desarrollado en TypeScript, para poder ejecutar la API, se configuran los scripts del fichero ‘package.json’ de la siguiente forma: "scripts": { "build-ts": "tsc", "preinstall": "npm install pm2 -g", "postinstall": "npm run build-ts", "start": "pm2-runtime start build/index.js --env production", "serve": "node build/index.js", "watch": "tsc -w", "dev": "nodemon ./build" }, Se añade pm2 al script ‘start’ para obligar a reiniciar el backend en caso de un error bloqueante. En el fichero ‘server/src/keys.ts’ se configuran las variables relativas a la base de datos, ftp, correo electrónico y la URL del frontend.. Cliente Antes de nada, hay que configurar la variable API_ENDPOINT_PROD en el fichero client/src/app/app.settings.ts con la url de la aplicación que se ha creado en Heroku para el backend. En este caso: 54 / 84.