Gamificación para la creación de aplicaciones de docencia musical

119 Pages·2017·4.79 MB·Spanish

by  Pablo Arques Sabater

Gamificación
para la creación de
aplicaciones de
docencia musical

Grado en Ingeniería Informática

Trabajo Fin de Grado
Autor:
Pablo Arques Sabater
Tutor/es:
David Rizo Valero
Junio 2017
Gamificación para la creación de aplicaciones de docencia musical

PREÁMBULO

Desde bien pequeño siempre me ha apasionado el mundo de la tecnología, cualquier
artilugio o “cacharro” con botones era un motivo de entretenimiento que no cambiaba
por nada y como decía mi madre… “mira que t’agrà trastejar amb les maquinetes”.
Una de las decisiones más difíciles que he tomado en la vida llegó en la adolescencia y
fue el momento en el que tuve que decidir qué camino seguir: continuar con mis
estudios de música en el conservatorio o por el contrario ir a la universidad y comenzar
mis estudios de informática. Fue una decisión difícil pero pienso que muy acertada.
Apenas unos meses atrás, llegó el momento de decidir cuál sería el último paso para
finalizar con esta etapa de mi vida, y aquí es donde nació la idea de retomar aquello que
dejé en el camino…
Fruto de la unión de mis dos grandes pasiones: la música y la informática ha nacido este
proyecto que solo es el inicio de un largo camino por recorrer.

Página | 1
Gamificación para la creación de aplicaciones de docencia musical

Me gustaría tener una palabras de agradecimiento a todas aquellas
personas que me han estado apoyando en todo momento
En primer lugar agradecer a mis padres, su apoyo incondicional
en los momentos más difíciles de mi vida y por todo el esfuerzo y
sacrificio que han hecho para hacer de mí la persona que soy hoy
en día. Sólo decirles que me hacen sentir el hijo más afortunado
de mundo.
Además, agradecer a mi chica, Andrea, que siempre saca lo
mejor de mí y siempre está ahí cuando la necesito, en los bueno y
malos momentos. Te quiero.
Y finalmente a mi tutor, David, por apoyarme desde el primer día
en la decisión que había tomado de afrontar este proyecto y por
toda su dedicación a lo largo de estos meses. Muchas gracias.

Página | 2
Gamificación para la creación de aplicaciones de docencia musical

JUSTIFICACIÓN Y OBJETIVOS DEL PROYECTO

Durante comienzos del siglo XX hasta nuestros días, uno de los factores que más han
influenciado en nuestra sociedad ha sido el desarrollo y el uso de la tecnología. Además,
en los últimos años, con la aparición de los dispositivos móviles y el uso que llevan
asociados, la vida de los seres humanos ha sufrido un vuelco que años atrás era
impensable.
Prácticamente a diario podemos encontrar en los medios de comunicación nuevas
aplicaciones o usos de la tecnología en ámbitos que desconocíamos o no éramos
conscientes de ello, como por ejemplo, en el ámbito de la educación, lo que ha dado
lugar a nuevas formas de aprendizaje.
La gamificación es una técnica de aprendizaje que traslada la mecánica de los juegos al
ámbito educativo con el fin de conseguir mejores resultados, ya sea para absorber mejor
algunos conocimientos o mejorar alguna habilidad, entre muchos otros.
Este modelo basado en el juego consigue motivar a los alumnos e incentivar el ánimo de
superación; para ello se utilizan técnicas mecánicas como la acumulación de puntos, el
escalado de niveles o clasificaciones a modo de ranking.
Este proyecto tiene como objetivo principal la creación de un sistema de apoyo en el
aula para facilitar el aprendizaje en materia de música entorno a la lectura de ritmos,
uno de los puntos básicos en el aprendizaje musical para cualquier alumno, todo ello en
un entorno web fácil, sencillo, amigable y accesible para cualquier usuario.

Página | 3
Gamificación para la creación de aplicaciones de docencia musical
ÍNDICE DE CONTENIDOS

1. ESTUDIO DE VIABILIDAD ................................................................................ 12
1.1. Alcance ............................................................................................................ 12
1.2. Organización del equipo de desarrollo y responsabilidades ............................ 12
1.3. Planificación del proyecto. Diagrama de Gantt ............................................... 13
1.4. Estudio de costes .............................................................................................. 25
1.4.1. Estimación de costes para Rítmic utilizando puntos de función .............. 26
2. DESCRIPCIÓN GENERAL .................................................................................. 32
2.1. Perspectiva del producto .................................................................................. 32
2.2. Funcionalidad del producto ............................................................................. 32
2.3. Características de los usuarios ......................................................................... 33
2.4. Restricciones .................................................................................................... 33
2.5. Evaluación previsible del sistema .................................................................... 34
3. ESPECIFICACIÓN DE REQUERIMIENTOS ..................................................... 35
3.1. Requerimientos funcionales ............................................................................. 35
3.2. Requerimientos no funcionales ........................................................................ 39
3.3. Requisitos comunes de los interfaces .............................................................. 41
3.3.1. Interfaces de usuario ................................................................................. 41
3.3.2. Interfaces de hardware .............................................................................. 41
3.3.3. Interfaces de software ............................................................................... 41
3.3.4. Interfaces de comunicación ...................................................................... 41
4. DISEÑO DE LA APLICACIÓN ............................................................................ 42
4.1. Diagrama casos de uso ..................................................................................... 42
4.2. Diseño de la base de datos ............................................................................... 43
4.2.1. Diseño lógico - Modelo relacional ........................................................... 43
4.2.2. Diseño físico ............................................................................................. 44
Página | 4
Gamificación para la creación de aplicaciones de docencia musical
4.3. Diagrama de clases .......................................................................................... 48
4.4. Diagramas de actividades ................................................................................ 55
5. TECNOLOGÍA UTILIZADA ................................................................................ 58
5.1. Spring Framework ........................................................................................... 58
5.2. Hibernate .......................................................................................................... 66
5.3. Verovio ............................................................................................................ 69
6. PATRONES Y ARQUITECTURAS DE DESARROLLO ................................... 70
6.1. Arquitectura aplicación web – API REST ....................................................... 70
6.2. Arquitectura Modelo-Vista-Controlador (MVC) ............................................. 72
6.2.1. Capa de persistencia (Modelo) ................................................................. 72
6.2.2. Capa de negocio (Controlador) ................................................................ 74
6.2.3. Capa de presentación (Vista) .................................................................... 77
6.3. Patrón Singleton (Clase AbstractDAO) ........................................................... 79
7. HERRAMIENTAS DE DESARROLLO ............................................................... 80
7.1. Eclipse .............................................................................................................. 80
7.2. Xampp .............................................................................................................. 80
7.3. MySQL Workbench 6.3 ................................................................................... 80
7.4. Sibelius ............................................................................................................. 80
7.5. Otras herramientas utilizadas ........................................................................... 81
8. CODIFICACIÓN ................................................................................................... 82
8.1. Subida de un fichero ........................................................................................ 82
8.2. Uso de la interface converter ........................................................................... 85
8.2.1. Algoritmo de Levenshtein o distancia de edición ........................................ 87
9. PRUEBAS .............................................................................................................. 90
10. DESPLIEGUE DE LA APLICACIÓN ............................................................... 92
11. MANUAL DEL USUARIO ................................................................................ 98
11.1. Registro de usuarios ..................................................................................... 98
Página | 5
Gamificación para la creación de aplicaciones de docencia musical
11.2. Autenticación en el sistema .......................................................................... 99
11.3. Consulta/modificación información de la cuenta ....................................... 101
11.4. Borrado de la cuenta ................................................................................... 102
11.5. Cerrar sesión ............................................................................................... 103
11.6. Conceptos teóricos (Aprendizaje) .............................................................. 104
11.7. Matriculación y selección de curso ............................................................ 105
11.8. Consulta Ranking de puntuaciones ............................................................ 107
11.9. Panel de gestión del profesor ..................................................................... 109
11.9.1. Creación de actividades ...................................................................... 109
11.9.2. Creación de un curso ........................................................................... 110
11.9.3. Visualización información alumnos ................................................... 111
10.10 Realización de una actividad .......................................................................... 111
12. Alternativa para la creación de aplicaciones con Spring ................................... 114
12.1. Creación de una aplicación ........................................................................ 114
12.2. Ventajas e inconvenientes de usar JHipser ................................................ 115
13. Conclusiones ...................................................................................................... 117
14. Bibliografía y referencias .................................................................................. 118

Página | 6
Gamificación para la creación de aplicaciones de docencia musical
INDICE DE ILUSTRACIONES

Ilustración 1. Estructura organizacional / roles .............................................................. 13
Ilustración 2. Recursos de trabajo para Rítmic ............................................................... 14
Ilustración 3. Diagrama de Gantt. Análisis y Especificación de Requisitos .................. 15
Ilustración 4. Diagrama de Gantt. Adaptación a nuevos entornos y aprendizaje - 1...... 16
Ilustración 5. Diagrama de Gantt. Adaptación a nuevos entornos y aprendizaje - 2...... 17
Ilustración 6. Diagrama de Gantt. Adaptación a nuevos entornos y aprendizaje - 3...... 17
Ilustración 7. Diagrama de Gantt. Adaptación a nuevos entornos y aprendizaje - 4...... 18
Ilustración 8. Diagrama de Gantt. Adaptación a nuevos entornos y aprendizaje - 5...... 18
Ilustración 9. Diagrama de Gantt. Modelado y diseño - 1 .............................................. 19
Ilustración 10. Diagrama de Gantt. Modelado y diseño - 2 ............................................ 20
Ilustración 11. Diagrama de Gantt. Modelado y diseño - 3 ............................................ 20
Ilustración 12. Diagrama de Gantt. Codificación ........................................................... 21
Ilustración 13. Diagrama de Gantt. Pruebas - 1 .............................................................. 22
Ilustración 14. Diagrama de Gantt. Pruebas - 2 .............................................................. 23
Ilustración 15. Diagrama de Gantt. Elaboración de la documentación final .................. 24
Ilustración 16. Diagrama de Gantt. Entrega final. .......................................................... 24
Ilustración 17. Diagrama casos de uso ........................................................................... 42
Ilustración 18. Modelo relacional de la Base de Datos .................................................. 43
Ilustración 19. Diagrama de actividades. Punto de vista alumno ................................... 55
Ilustración 20. Diagrama de actividades. Punto de vista del profesor ............................ 56
Ilustración 21. Diagrama de actividades. Punto de vista del invitado ............................ 57
Ilustración 22. Logo Spring Framework......................................................................... 58
Ilustración 23. Diagrama de comunicación entre capas en Spring ................................. 59
Ilustración 24. Diagrama comportamiento DispatcherServlet ....................................... 61
Ilustración 25. Tabla usuario con contraseñas cifradas .................................................. 63
Ilustración 26. Tabla con información de la sesión ........................................................ 65
Ilustración 27. Ejemplo inicio de sesión con funcionalidad Remember-me .................. 65
Ilustración 28. Sesión almacenada. Ejemplo de datos en tabla ...................................... 65
Ilustración 29. Logo Hibernate Framework ................................................................... 66
Ilustración 30. Logo Verovio ......................................................................................... 69
Ilustración 31 Flujo de peticiones HTTP en Spring ....................................................... 71
Ilustración 32. Diagrama patrón Singleton ..................................................................... 79
Página | 7
Gamificación para la creación de aplicaciones de docencia musical
Ilustración 33. Algoritmo distancia de edición ............................................................... 88
Ilustración 34. Ejemplo de ejecución test unitarios para el cálculo de la distancia de
edición ............................................................................................................................ 91
Ilustración 35. Ejemplo de ejecución test unitarios para la corrección de una actividad 91
Ilustración 36. Fichero de parámetro para el despliegue ................................................ 92
Ilustración 37. Diagrama de despliegue Tomcat ............................................................ 93
Ilustración 38. Panel de control de Xampp .................................................................... 94
Ilustración 39. BBDD cargada en el servidor MySQL ................................................... 94
Ilustración 40. Directorio raíz Tomcat ........................................................................... 95
Ilustración 41. Panel de control de Heroku .................................................................... 96
Ilustración 42. Configuración plugin Maven para Heroku ............................................. 96
Ilustración 43. Ejemplo para lanzar una goal ................................................................. 97
Ilustración 44. Opción de registro .................................................................................. 98
Ilustración 45. Formulario de registro: información personal ........................................ 98
Ilustración 46. Formulario de registro: información de la cuenta .................................. 99
Ilustración 47. Opción iniciar sesión .............................................................................. 99
Ilustración 48. Formulario para hacer login. ................................................................ 100
Ilustración 49. Autenticación errónea. Mensaje de error .............................................. 100
Ilustración 50. Autenticación con opción “recordarme” .............................................. 100
Ilustración 51. Opción editar usuario ........................................................................... 101
Ilustración 52. Formulario de edición .......................................................................... 101
Ilustración 53. Más opciones. Actualizar contraseña ................................................... 102
Ilustración 54. Opción borrar cuenta ............................................................................ 102
Ilustración 55. Confirmación borrado de la cuenta ...................................................... 103
Ilustración 56. Mensaje confirmación borrado de la cuenta ......................................... 103
Ilustración 57. Opción cerrar sesión ............................................................................. 103
Ilustración 58. Mensaje verificación sesión cerrada correctamente. ............................ 104
Ilustración 59. Opción aprendizaje ............................................................................... 104
Ilustración 60. Conceptos teóricos explicados ............................................................. 104
Ilustración 61. Aprendizaje. Ejemplo desplegable con explicación ............................. 105
Ilustración 62. Opción mis cursos ................................................................................ 105
Ilustración 63. Desplegable cargar un curso ................................................................. 106
Ilustración 64. Mensaje de confirmación al cargar un curso ........................................ 106
Ilustración 65. Curso actualmente cargado................................................................... 106
Página | 8
Gamificación para la creación de aplicaciones de docencia musical
Ilustración 66. Desplegable matriculación en un curso ................................................ 106
Ilustración 67. Confirmación de nueva matriculación.................................................. 107
Ilustración 68. Opción consulta ranking ....................................................................... 107
Ilustración 69. Vista ranking de puntuaciones alumno................................................. 108
Ilustración 70. Vista ranking de puntuaciones profesor ............................................... 108
Ilustración 71. Opción panel de gestión ....................................................................... 109
Ilustración 72. Formulario creación actividad .............................................................. 109
Ilustración 73. Menaje de confirmación actividad creada ............................................ 110
Ilustración 74. Formulario creación nuevo curso ......................................................... 110
Ilustración 75. Mensaje de confirmación alta nuevo curso .......................................... 110
Ilustración 76. Vista mis alumnos ................................................................................ 111
Ilustración 77. Vista de una actividad .......................................................................... 111
Ilustración 78. Cuenta atrás para que empiece la actividad .......................................... 112
Ilustración 79. Ejemplo puntuación. ............................................................................. 112
Ilustración 80. Actividad asociada a un curso .............................................................. 113
Ilustración 81. Vista por defecto aplicación generada con JHipser .............................. 115

Página | 9