Desarrollo de una aplicación móvil enfocada a m-learning

179 Pages·2016·9.05 MB·Spanish

Exam Developer:

Desarrollo de una aplicación

móvil enfocada a m-learning
TRABAJO DE FIN DE GRADO. GRADO EN INGENIERÍA
INFORMÁTICA
ROBERTO GUTIÉRREZ SOPEDRA
TUTOR: DR. DAVID GRIOL BARRES
UNIVERSIDAD CARLOS III DE MADRID | Leganés, junio de 2016
Introducción

1 | 17 8
Introducción
Agradecimientos

La primera mención a mi tutor, David Griol. Su optimismo y confianza son
contagiosos, incluso en los momentos difíciles.

Gracias a mi familia y amigos, que me han aguantado estos meses y que me
han ayudado con todo lo que tenían. En especial a mi hermana, aunque haya sido
imposible haberle sacado una opinión imparcial de la aplicación, su apoyo y su afán de
mejora me han guiado desde que tengo uso de razón.

Destacar la confianza ciega de mi padre, que jamás ha puesto en duda ninguno
de los objetivos que me he propuesto.

Por último, me quito el sombrero ante Inés, mi pareja, que ha dedicado a este
proyecto tantos dolores de cabeza como yo. Sus consejos, sus constantes ánimos, su
inestimable ayuda, sus increíbles ideas y su don para hacerme discutir conmigo mismo
han conseguido que aguante el estrés, el trabajo, los exámenes y las prácticas y que
consiga terminar el proyecto a tiempo.

Introducción

Introducción

2 | 17 8
Introducción
Resumen

En este TFG se ha desarrollado una aplicación para Android, enfocada en todo
momento a su fácil uso por diferentes perfiles de usuario. En dicha aplicación se han
implementado diferentes tipos de examen con la intención de abarcar tres puntos
principales: Ejercicios de ayuda para personas con Alzheimer, personas con TDA y
ejercicios similares a los propuestos en las entrevistas de trabajo más comunes. El
trabajo intenta ofrecer una nueva base a lo que actualmente existe, más que una
aplicación final intenta ofrecer una aplicación base que pueda crecer en cualquier
dirección que se necesite (Aunque la aplicación es totalmente utilizable desde el primer
momento). La aplicación se desarrolla alrededor siempre de los exámenes, ofreciendo
cada vez más posibilidades. Desde la creación del ejercicio individual hasta la corrección
del examen final, pasando por la creación de exámenes personalizados y la
visualización de los resultados obtenidos.
La intención inicial de la aplicación es poder ofrecer en todo momento al usuario
exámenes orientados a su perfil, mediante la utilización de un algoritmo desarrollado
para adaptar los exámenes a los resultados del usuario, de tal forma que los puntos
débiles que el usuario haya demostrado poseer tengan más presencia en los exámenes.
Aun así, los resultados del usuario serán, en un principio, accesibles en todo momento,
de tal forma que el usuario pueda ver dónde comete más errores.
Durante el desarrollo de la aplicación, he optado por dar más importancia a la
creación personal de ejercicios y exámenes que a la generación automática de éstos.
Es decir, el papel que desempeñan los usuarios es más importante para el
funcionamiento óptimo de la aplicación que cualquier automatización o algoritmo.
La intención principal del TFG es la de incluir todas las funcionalidades posibles,
intentando en todo momento comprender el funcionamiento de cada elemento incluido.
Además, el desarrollo del TFG finalmente ha requerido el uso de un servidor propio
(Apache) incluyendo una base de datos externa MySQL. A lo largo de esta memoria se
explicará el por qué y el cómo de cada decisión que ha llevado al proyecto final.

Palabras clave: app, m-learning, aplicaciones multimodales, interacción oral,
síntesis de voz, Android, Android Studio, MySQL, PHP, exámenes de inteligencia, IQ
test, Alzheimer.

3 | 17 8
Introducción
Índice general

Capítulo 1:Introducción ............................................................................................... 11
1.1 Introducción ....................................................................................................... 11
1.2 Problemas iniciales ........................................................................................... 11
1.3 Las versiones de Android .................................................................................. 12
1.4 Objetivos ........................................................................................................... 13
1.5 El proceso de desarrollo .................................................................................... 15
1.6 Estructura de la memoria .................................................................................. 17
1.7 Herramientas utilizadas ..................................................................................... 18
Capítulo 2: Estado del arte ...................................................................................... 19
2.1 Introducción ....................................................................................................... 19
2.2 Android .............................................................................................................. 20
2.3 Android Studio ................................................................................................... 32
2.4 Android y una base de datos externa ................................................................ 36
2.5 Android y la interacción por voz ......................................................................... 39
2.6 Tests de inteligencia .......................................................................................... 48
2.7 M-learning ......................................................................................................... 51
2.8 Aplicaciones Android de exámenes ................................................................... 58
2.9 Conclusión ........................................................................................................ 62
Capítulo 3: Descripción general del sistema ............................................................ 63
3.1 La aplicación ..................................................................................................... 63
3.2 Inicio de sesión y registro .................................................................................. 77
3.2.1 La base de datos ........................................................................................ 77
3.2.2 PHP ............................................................................................................ 78
3.3 Pantallas de selección ....................................................................................... 88
3.3.1 Implementación de Menús .......................................................................... 88
3.3.2 Implementación del módulo “Ayuda” ........................................................... 90
3.3.3 Redirección de un intent a otro ................................................................... 92
3.4 Creación de ejercicios ....................................................................................... 94
3.4.1 Spinners. .................................................................................................... 94
3.4.2 Acceder a las imágenes del móvil ............................................................... 96
3.4.3 Introducción de imágenes mediante Android Device Monitor ...................... 96
3.4.4 Subir una imagen a una base de datos ....................................................... 97
3.4.5 Android, Bitmap y OutOfMemory ................................................................ 98
3.5 Creación de exámenes .................................................................................... 100
4 | 17 8
Introducción
3.5.1 ListViews .................................................................................................. 100
3.5.2 Dialog ....................................................................................................... 107
3.6 Realización de exámenes ............................................................................... 112
3.6.1 CheckBox ................................................................................................. 114
3.6.2 ViewPager ................................................................................................ 114
3.6.3 Implementación de la interacción por voz. ................................................ 118
3.7 Conclusión ...................................................................................................... 120
Capítulo 4: Descripción detallada de los componentes del sistema ....................... 122
4.1 Inicio de sesión................................................................................................ 123
4.2 Registro ........................................................................................................... 124
4.3 Pantalla de selección 1 .................................................................................... 125
4.4 Creación de ejercicios ..................................................................................... 126
4.5 Creación de exámenes .................................................................................... 130
4.6 Estadísticas ..................................................................................................... 135
4.8 Realización de exámenes ............................................................................... 138
4.9 Selección de exámenes personalizados .......................................................... 142
Capítulo 5: Evaluación preliminar de la aplicación ................................................. 144
5.1 La encuesta ..................................................................................................... 144
5.2 Los resultados ................................................................................................. 147
Capítulo 6: Costes finales ...................................................................................... 151
6.1 Planificación del trabajo ................................................................................... 151
6.2 Desglose de costes ......................................................................................... 152
Capítulo 7: Conclusiones y Trabajo futuro ............................................................. 156
7.1 Conclusiones ................................................................................................... 156
7.2 Trabajo Futuro ................................................................................................. 159
Brief Summary of the Bachelor’s Project ................................................................... 161
Abstract and process ............................................................................................. 161
1.4 Goals and objectives .................................................................................... 163
6.1Conclusions .................................................................................................. 164
6.2: Errors, future work and elements to upgrade .............................................. 167
Glosario .................................................................................................................... 169
Bibliografía ................................................................................................................ 172

5 | 17 8
Introducción
Índice de figuras
Figura 1.1: Código de versión de Android elegida ....................................................... 13
Figura 1.2: Diagrama de la planificación del desarrollo del trabajo.............................. 15
Figura 2.1: Primer móvil con Android .......................................................................... 20
Figura 2.2: Estadística de reparto de sistemas operativos de los móviles ................... 21
Figura 2.3: Pantallas principales de Android Froyo ..................................................... 23
Figura 2.4: Chema Alonso y Jordi Évole discuten sobre ciberseguridad ..................... 24
Figura 2.5: Pantallas principales de Android Gingerbread .......................................... 24
Figura 2.6: Demostración del juego Grand Theft Auto (GTA) en Gingerbread ............ 25
Figura 2.7: Pantallas principales Ice Cream Sandwich ................................................ 25
Figura 2.8: Pantallas principales de Jelly Bean ........................................................... 26
Figura 2.9: Android Jelly Bean aprende e interactúa con la vida personal del usuario 27
Figura 2.10: Pantallas principales de Android Kitkat ................................................... 27
Figura 2.11: Icono de Ok Google en Android 4.4 ........................................................ 28
Figura 2.12: Pantallas principales de Android Lollipop ................................................ 29
Figura 2.13: Ejemplo simplificado de Lollipop multipantalla......................................... 29
Figura 2.14: Pantallas principales de Androidn Marshmallow ..................................... 30
Figura 2.15: Imagen general de Android Studio con emulador .................................... 32
Figura 2.16: Pantallas principales de AVD Manager ................................................... 34
Figura 2.17: SDK Manager ......................................................................................... 34
Figura 2.18: Imagen general de Android Device Monitor ............................................ 35
Figura 2.19: Ventana de Log de Android Studio .......................................................... 35
Figura 2.20: Diagrama de la interacción Android, PhP y MySQL ................................ 36
Figura 2.21: Código de ejemplo de Android para interactuar con BBDD ..................... 37
Figura 2.22: Ejemplo de paralelización con C ............................................................. 38
Figura 2.23: Ejemplo de paralelización usando la clase AsyncTask ........................... 38
Figura 2.24: Arquitectura de un sistema de diálogo .................................................... 40
Figura 2.25: Módulos de un sistema de diálogo .......................................................... 41
Figura 2.26: Código para comprobar recursos de audio del teléfono .......................... 44
Figura 2.27: Código de onActivtyResult de TTS ......................................................... 44
Figura 2.28: Implementar Interfaz TextToSpeech.OnInitListener ................................ 45
Figura 2.29: Código para Elegir idioma para el output de voz ..................................... 45
Figura 2.30: Código del Método speak para reproducir un texto por los altavoces ...... 46
Figura 2.31: Representación de las principales características de m-learning ............ 51
Figura 2.32: Descripción de las características de m-learning .................................... 52
Figura 2.33: Pantallas principales de Wunderlist ......................................................... 54
Figura 2.34: Ejemplos de uso de colorNote ................................................................ 54
Figura 2.35: Ejemplo visual de Autodesk SketchBook ................................................ 55
Figura 2.36: Pantallas principales de la aplicación para exámenes de conducir
TodoTest .................................................................................................................... 58
Figura 2.37: Ejemplo de exámenes realizados de la aplicación TodoTest .................. 59
Figura 2.38: Pantallas principales de Abbas Exam Creator......................................... 60
Figura 3.1: Diagrama de navegación por la aplicación ................................................ 64
Figura 3.2: Pantalla de Descarga Android Studio ....................................................... 65
Figura 3.3: Progreso de Instalación Android Studio .................................................... 66
Figura 3.4: Error instalación Android Studio (JDK) ...................................................... 66
Figura 3.5: Instalación JDK desde la página web de Oracle ....................................... 67
Figura 3.6: Este equipo → Propiedades...................................................................... 67
Figura 3.7: Pantalla Windows de recursos .................................................................. 68
Figura 3.8: Propiedades del sistema (Windows) ......................................................... 68
6 | 17 8
Introducción
Figura 3.9: Configuración Variables de Entorno (Windows) ........................................ 69
Figura 3.10: Crear un nuevo proyecto ......................................................................... 70
Figura 3.11: Elegir tipo de actividad inicial .................................................................. 70
Figura 3.12: Ciclo de vida de una actividad ................................................................. 71
Figura 3.13: Unión java con XML mediante setContentView ....................................... 72
Figura 3.14: Ejemplo básico XML con un botón .......................................................... 72
Figura 3.15: Compilación del código Android .............................................................. 73
Figura 3.16: Imagen de ejecución de código en Android Studio .................................. 74
Figura 3.17: Imagen del LogCat de Android ................................................................ 75
Figura 3.18: Imagen del modo debug de Android ....................................................... 76
Figura 3.19: Imagen para construir una APK desde Android Studio ............................ 76
Figura 3.20: Crear nueva base de datos (phpMyAdmin) ............................................. 77
Figura 3.21: Crear una nueva tabla desde phpMyAdmin ............................................ 77
Figura 3.22: Ejemplo de datos de un usuario en la base de datos .............................. 78
Figura 3.23: Ejemplo de código PHP para obtener datos de usuario registrado.......... 79
Figura 3.24: Ejecutar un fichero PHP en la barra de navegación ................................ 79
Figura 3.25: Errores obtenidos en el navegador por un fallo en el fichero PHP........... 80
Figura 3.26: Dónde encontrar php_error_log dentro del cuadro de mando de XAMPP80
Figura 3.27: Comunicación entre Android app y base de datos .................................. 81
Figura 3.28: Método authenticate de la clase Login .................................................... 82
Figura 3.29: Clase User, conteniendo los datos básicos de un usuario en Android .... 83
Figura 3.30: Método fetchUserDataInBackground para obtener los datos del usuario 83
Figura 3.31: Interfaz de usuario devuelto .................................................................... 84
Figura 3.32: Código de doInBackground completo para recuperar un usuario registrado
en el inicio de sesión................................................................................................... 85
Figura 3.33: Obtener datos añadidos en Android desde PHP ..................................... 86
Figura 3.34: Código referente para onPostExecute con una interfaz callback ............. 86
Figura 3.35: Diagrama de datos para iniciar sesión .................................................... 87
Figura 3.36: Ejemplo del menú desplegado ................................................................ 88
Figura 3.37: Ejemplo del icono de menú sin desplegar ............................................... 88
Figura 3.38: Estructura básica de un menú en XML ................................................... 89
Figura 3.39: Código para usar el menú creado desde Java ........................................ 89
Figura 3.40: Ejemplos de métodos para modificar un menú........................................ 89
Figura 3.41: Programar la funcionalidad con el menú ................................................. 90
Figura 3.42: Iconos de ayuda por texto o audio .......................................................... 91
Figura 3.43: ayuda desde el menú .............................................................................. 91
Figura 3.44: Ejemplo de ayuda por texto en la App ..................................................... 92
Figura 3.45: Ejemplo de un intent ............................................................................... 93
Figura 3.46: Obtención de información desde el intent ............................................... 93
Figura 3.47: Campos de “Ejercicio” en la base de datos ............................................. 94
Figura 3.48: Ejemplo de Spinner desplegado ............................................................. 95
Figura 3.49: Ejemplo de Spinner sin desplegar ........................................................... 95
Figura 3.50: Crear y usar un spinner ........................................................................... 95
Figura 3.51: Código para acceder a los archivos del móvil del usuario ....................... 96
Figura 3.52: Android Device Monitor para insertar varias imágenes en el emulador ... 97
Figura 3.53: De Bitmap a String .................................................................................. 97
Figura 3.54: Código para redimensionar una imagen para optimizar memoria............ 98
Figura 3.55: Código para cambiar el alto y el ancho de una imagen ........................... 99
Figura 3.56: ListView original de Android .................................................................. 100
Figura 3.57: Código en XML para incluir una ListView .............................................. 101
Figura 3.58: Imagen de un elemento personalizado de ListView.............................. 101
7 | 17 8
Introducción
Figura 3.59: Código para utilizar el adapter personalizado........................................ 102
Figura 3.60: Creando el adapter desde Java ............................................................ 102
Figura 3.61: Clase básica ejercicio con los parámetros, el constructor y los métodos
getters y setters ........................................................................................................ 103
Figura 3.62: Código del método GetView del adapter ............................................... 104
Figura 3.63: Resultado final del item personalizado de ListView ............................... 105
Figura 3.64: Código encargado de manejar el evento de hacer click sobre un item de la
lista ........................................................................................................................... 106
Figura 3.65: Añadir un ejercicio al examen personalizado ........................................ 107
Figura 3.66: Ejemplo de ventana emergente (Dialog) ............................................... 108
Figura 3.67: Ventana emergente con enunciado ampliado ....................................... 108
Figura 3.68: Programando ampliación de enunciado en ventana emergente ............ 109
Figura 3.69: Ventana emergente para rellenar datos finales del examen .................. 110
Figura 3.70: Parte de programación para ventana emergente personalizada ........... 110
Figura 3.71: Interactuar con elementos de la ventana emergente ............................. 111
Figura 3.72: Ejemplo de corrección de ejercicio de examen ..................................... 112
Figura 3.73: Ejemplo de examen sin responder ........................................................ 112
Figura 3.74: Evento de ampliar el texto de una opción tras un LongClick ................. 112
Figura 3.75: Código para obligar a que sólo una opción sea marcada ...................... 113
Figura 3.76: Código mostrando métodos principales para interactuar con una checkbox
................................................................................................................................. 114
Figura 3.77: Ejemplo de una checkbox básica .......................................................... 114
Figura 3.78: Checkbox en Java y XML ..................................................................... 114
Figura 3.79: Pantalla contenedora de ViewPager ..................................................... 115
Figura 3.80: ViewPager código XML ......................................................................... 115
Figura 3.81: Elemento predeterminado de ViewPager .............................................. 116
Figura 3.82: Usar ViewPager desde Java ................................................................. 116
Figura 3.83: Código del Método onCreateView del ViewPager ................................. 117
Figura 3.84: Código para usar respuesta por voz ..................................................... 118
Figura 4.1:4.1: Diagrama de navegación por la aplicación ........................................ 122
Figura 4.2: Pantalla de inicio de sesión ..................................................................... 123
Figura 4.3: Ventana emergente para ofrecer al usuario una visión del progreso ....... 123
Figura 4.4: Mensaje para indicar que los datos introducidos en el inicio de sesión son
correctos ................................................................................................................... 124
Figura 4.5: Mensaje para indicar que los datos introducidos en el inicio de sesión son
correctos ................................................................................................................... 124
Figura 4.6: Actividad de registro ............................................................................... 124
Figura 4.7: Pantalla de selección 1 con los iconos de ayuda .................................... 125
Figura 4.8: Pantalla para la creación de nuevos ejercicios con los campos marcados
................................................................................................................................. 126
Figura 4.9: Pantalla que muestra los archivos del usuario ........................................ 127
Figura 4.10: Pantalla de creación de ejercicios con la vista previa de la imagen
seleccionada y el spinner desplegado ...................................................................... 127
Figura 4.11: Pantalla de creación de ejercicios con todos los datos completos......... 128
Figura 4.12: Ejercicio en la base de datos .............................................................. 129
Figura 4.13: Pantalla de creación de ejercicios tras subir el ejercicio ........................ 129
Figura 4.14: Elementos de la pantalla de creación de exámenes ............................. 130
Figura 4.15: Enunciado de ejercicio ampliado ........................................................... 131
Figura 4.16: Ejercicios añadidos al examen personalizado ....................................... 132
Figura 4.17: Pantalla para rellenar los datos del examen .......................................... 133
Figura 4.18: datos del examen a rellenar por el usuario ............................................ 134
8 | 17 8
Introducción
Figura 4.19: Pantalla de creación de exámenes con el mensaje de examen subido
correctamente ........................................................................................................... 134
Figura 4.20: Ejemplo de estadísticas ........................................................................ 135
Figura 4.21: Elementos de pantalla de selección dos ............................................... 136
Figura 4.22: Menú desplegado en pantalla de sección dos ....................................... 137
Figura 4.23: Elementos de pantalla de realización de examen ................................. 138
Figura 4.24: Enunciado del examen agrandado ........................................................ 139
Figura 4.25: Opción del examen agrandada (con audio) ........................................... 140
Figura 4.26: Menú del examen ................................................................................. 141
Figura 4.27: Pantalla de examen con respuesta incorrecta ....................................... 141
Figura 4.28: Pantalla de examen con respuesta correcta y barra de navegación que
marca ejercicios correctos e incorrectos ................................................................... 141
Figura 4.29: Pantalla selección exámenes personalizados ....................................... 142
Figura 4.30: LongClick sobre examen personalizado ................................................ 143
Figura 5.1: Preguntas sobre la experiencia del usuario con tecnología ..................... 144
Figura 5.2: Encuesta completa de la experiencia del usuario usando la aplicación
desarrollada (1) ......................................................................................................... 145
Figura 5.3: Encuesta completa de la experiencia del usuario usando la aplicación
desarrollada (2) ......................................................................................................... 146
Figura 5.4: Encuesta sobre posibles mejoras ........................................................... 146
Figura 5.5: Resultados experiencia usuarios con tecnología..................................... 147
Figura 5.6: Respuestas usuarios sobre su opinión acerca de la aplicación (1) ......... 148
Figura 5.7: Respuestas usuarios sobre su opinión acerca de la aplicación (2) ......... 149
Figura 5.8: Sugerencias de los usuarios para mejorar la aplicación .......................... 150
Figura 6.1: Tabla de Gantt con las fases de desarrollo y las fechas .......................... 151
Figura 6.2: Diagrama de Gantt con las tareas realizadas .......................................... 152

9 | 17 8