Escuela Técnica Superior de Ingenieros de Telecomunicación

72 Pages·2017·8.79 MB·Spanish

Escuela Técnica Superior de
Ingenieros de Telecomunicación

Grado en Ingeniería de Tecnologías de Telecomunicación

Desarrollo de una aplicación móvil para facilitar
el aprendizaje de una lengua extranjera
mediante ejercicios

Autor:
Borja Pérez Morán

Tutoras:
Dña. Míriam Antón Rodríguez
Dña. María Ángeles Pérez Juárez

Septiembre de 2017, Valladolid
2
TÍTULO Desarrollo de una aplicación móvil para facilitar el
aprendizaje de una lengua extranjera mediante ejercicios

AUTOR Borja Pérez Morán

TUTORAS Dña. Míriam Antón Rodríguez y Dña. Mª Ángeles Pérez
Juárez

DEPARTAMENTO Teoría de la Señal y Comunicaciones e Ingeniería
Telemática

TRIBUNAL

PRESIDENTA Dña. Mª Ángeles Pérez Juárez

SECRETARIO D. David González Ortega

VOCAL D. Javier Aguiar Pérez

SUPLENTE D. Mario Martínez Zarzuela

SUPLENTE Dña. Míriam Antón Rodríguez

FECHA 6 de septiembre de 2017

CALIFICACIÓN

3
4
Resumen

La enseñanza de una lengua extranjera requiere de materiales y recursos
didácticos que motiven al alumno y le faciliten su aprendizaje. Para
cualquier nativo digital, un recurso formativo que adopte un formato
multimedia e interactivo y se le ofrezca a través de un canal integrado
en su dinámica diaria como pueda ser su smartphone o tablet es
susceptible de resultar atractivo, máxime si emplea un pensamiento y
mecánica de jugabilidad (gamificación).

En este Trabajo Fin de Grado se pretende llevar a cabo el diseño y
desarrollo de una aplicación híbrida que aproveche la versatilidad del
desarrollo web, pero que tenga la capacidad de adaptación al dispositivo
móvil usado para acceder a la misma como si de una app nativa se tratara.
La aplicación propondrá de forma dinámica al usuario pequeños ejercicios,
planteados de forma lúdica, basados por ejemplo en contenidos que el
usuario esté visionando en un momento dado.

Keywords: aplicación, multiplataforma, idiomas, aprendizaje, multimedia.

Abstract

Learning a foreign language requires from tools who keep the student
motivated and turn the learning easier. For millennials any multimedia
resource in smartphones or tables, which are fully integrated in their
daily routine, could be catchier. Even more if there is some gamification
in it.

The main goal within this bachelor thesis is the design and development
of a hybrid app. Taking advantage of the web technologies but working
as if it is a native app. The app will challenge the user with some
exercises while the user is watching some media content.

Keywords: app, multiplatform, languages, learning, multimedia.
5
A mi padre y madre, Carlos y Reden.
A mi hermana, María.

Todo lo que soy,
se lo debo a ellos.

Who let the words out? Who… Who…

6
Tabla de contenido
1. Introducción ................................................................................................................... 12
Contexto y Motivación ............................................................................................................... 12
Objetivos .................................................................................................................................... 13
2. Estudio de las diferentes aproximaciones a las aplicaciones móviles .......................... 14
Introducción ............................................................................................................................... 14
Aplicaciones nativas ................................................................................................................... 14
Aplicaciones web ........................................................................................................................ 15
Aplicaciones híbridas .................................................................................................................. 15
3. VLC media player ........................................................................................................... 17
Interfaz Web de VLC media player ............................................................................................. 17
4. OpenSubtitles.org .......................................................................................................... 19
Introducción ............................................................................................................................... 19
Desarrollar usando OpenSubtitles.org ....................................................................................... 20
Protocolo OSDb .......................................................................................................................... 21
¿Cómo funciona la descarga de subtítulos? ........................................................................... 21
¿Cómo funciona la subida de un subtítulo? ............................................................................ 22
Node.js OpenSubtitles-API ......................................................................................................... 22
5. Servicios de traducción .................................................................................................. 24
WordReference API .................................................................................................................... 24
Google Translator API ................................................................................................................. 24
Otros servicios ............................................................................................................................ 25
6. Estudio y justificación de las tecnologías a usar ........................................................... 26
Node.js ....................................................................................................................................... 26
Npm, el gestor de paquetes de Node.js ..................................................................................... 27
HTML5 CSS3 JS ........................................................................................................................... 28
HTML5 .................................................................................................................................... 28
CSS3 ........................................................................................................................................ 29
JavaScript ................................................................................................................................ 31
Angular 2 .................................................................................................................................... 32
Módulos .................................................................................................................................. 33
Componentes y plantillas ........................................................................................................ 33
Metadata ................................................................................................................................ 34
Data Binding ........................................................................................................................... 34
Directivas ................................................................................................................................ 35
Servicios .................................................................................................................................. 35
TypeScript ................................................................................................................................... 36
7. Apache Cordova ............................................................................................................. 37
8. Ionic 2 ............................................................................................................................. 39
Arquitectura ............................................................................................................................... 40
Comenzando con Ionic2 ............................................................................................................. 40
Guía para la plataforma iOS ................................................................................................... 40
Guía para la plataforma Android ............................................................................................ 41
Organización de un proyecto en Ionic 2 ..................................................................................... 41
Versiones de Ionic ...................................................................................................................... 42
9. Base de datos ................................................................................................................. 43
7
Almacenamiento del navegador ............................................................................................. 43
SQLite ...................................................................................................................................... 43
CouchDB ................................................................................................................................. 44
PouchDB .................................................................................................................................. 44
10. Electron ........................................................................................................................ 46
¿Qué es y cómo funciona? ......................................................................................................... 46
Usando Electron ......................................................................................................................... 47
Crear una nueva aplicación en Electron ..................................................................................... 48
Ficheros más relevantes ............................................................................................................. 48
Package.json ........................................................................................................................... 48
Main.js .................................................................................................................................... 48
Index.html ............................................................................................................................... 49
Electron globalmente ................................................................................................................. 49
11. Análisis ......................................................................................................................... 50
Comenzar reproducción ............................................................................................................. 50
Traducir palabra ......................................................................................................................... 50
Guardar palabra ......................................................................................................................... 51
Completar espacio...................................................................................................................... 51
Configurar aplicación ................................................................................................................. 52
Ayuda ......................................................................................................................................... 52
12. La aplicación: Watch Your Words! .............................................................................. 53
Manual de usuário para la app móvil ......................................................................................... 53
Home & Menu ......................................................................................................................... 53
Go Learning ............................................................................................................................. 54
Refresh .................................................................................................................................... 57
Settings ................................................................................................................................... 57
Help? ....................................................................................................................................... 59
Splash screen e Icons ................................................................................................................. 60
Manual de usuario para la app de escritorio ............................................................................. 61
Requisitos del sistema ................................................................................................................ 63
13. Modelo de negocio Canvas ......................................................................................... 64
14. Presupuesto y material usado ..................................................................................... 66
15. Conclusiones y líneas futuras ...................................................................................... 67
Líneas futuras ............................................................................................................................. 68
15. Bibliografía ................................................................................................................... 70

8
Índice de ilustraciones
Ilustración 1: Diferentes aproximaciones al desarrollo móvil........ 14
Ilustración 2: Logo de VLC media player............................. 17
Ilustración 3: Logo de OpenSubtitles.org............................ 19
Ilustración 4: Logo de Word Reference............................... 24
Ilustración 5: Logo de Google Translator............................ 24
Ilustración 6: Logo de Node.JS...................................... 26
Ilustración 7: Logo de npm.......................................... 27
Ilustración 8: Logo de HTML......................................... 28
Ilustración 9: Logo de CSS3......................................... 29
Ilustración 10: Encuesta sobre uso de preprocesadores CSS........... 29
Ilustración 11: Ejemplo de buenas prácticas DRY..................... 30
Ilustración 12: Logo de JavaScript.................................. 31
Ilustración 13: Logo de Angular..................................... 32
Ilustración 14: Mapa conceptual de Angular.......................... 32
Ilustración 15: Relación entre componentes y plantillas............. 34
Ilustración 16: Interacciones entre el DOM y las componentes........ 35
Ilustración 17: Logo de TypeScript.................................. 36
Ilustración 18: Logo de Apache Cordova.............................. 37
Ilustración 19: Mapa de la arquitectura............................. 37
Ilustración 20: Logo de Ionic....................................... 39
Ilustración 21: Filosofía Ionic..................................... 39
Ilustración 22: Arquitectura en forma de pila....................... 40
Ilustración 23: src................................................. 42
Ilustración 24: Logo de SQLite...................................... 43
Ilustración 25: Logo de CouchDB..................................... 44
Ilustración 26: Logo de PouchDB..................................... 44
Ilustración 27: Sincronización offline y online..................... 45
Ilustración 28: Logo de Electron.................................... 46
Ilustración 29: Interacción entre procesos.......................... 47
Ilustración 30: Vista principal y menú lateral...................... 53
Ilustración 31: Vista de Go Learning................................ 54
Ilustración 32: Traducción de la palabra seleccionada............... 55
Ilustración 33: El usuario dispone de 3 intentos.................... 56
Ilustración 34: Palabras guardadas con su traducción................ 57
Ilustración 35: Vista de la configuración........................... 58
Ilustración 36: Diferentes slides en la ayuda....................... 60
Ilustración 37: Diferentes fondos de la aplicación.................. 61
Ilustración 38: Ventana con el botón para elegir el vídeo........... 62
Ilustración 39: Ventana con el botón para comenzar la reproducción.. 63
Ilustración 40: Plantilla para el modelo de negocio Canvas.......... 64

9
Índice de tablas

Tabla 1: Comandos para la interfaz web VLC.......................... 18
Tabla 2: Algunas lenguas con su código ISO639.1..................... 21
Tabla 3: Métodos disponibles en la API de OpenSubtitles............. 23
Tabla 4: Equivalencia entre versión Cordova y Android............... 41
Tabla 5: Análisis "Comenzar reproducción"........................... 50
Tabla 6: Análisis "Traducir palabra"................................ 50
Tabla 7: Análisis "Guardar palabra"................................. 51
Tabla 8: Análisis "Completar espacio"............................... 51
Tabla 9: Análisis "Configurar aplicación"........................... 52
Tabla 10: Análisis "Ayuda".......................................... 52

10