canciones-ingles.pdf - dcomg.upv.es · dado que la aplicación almacena y gestiona las canciones en...

28
Título del Proyecto: Canciones Inglés Autor: Gómez Sacedón, Mario Director: Tomás Gironés, Jesús TESINA PARA LA OBTENCIÓN DEL TÍTULO DE: Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles Septiembre del 2016

Upload: vantuong

Post on 09-Apr-2018

223 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Título del

Proyecto:

Canciones Inglés

Autor:

Gómez Sacedón,

Mario

Director:

Tomás Gironés,

Jesús

TESINA PARA LA OBTENCIÓN DEL TÍTULO DE:

Máster en Desarrollo de Aplicaciones sobre Dispositivos

Móviles

Septiembre del 2016

Page 2: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 2

Contenido

Introducción ............................................................................................................................. 3

Descripción del problema ...................................................................................................... 3

Objetivos .............................................................................................................................. 4

Motivación ............................................................................................................................ 4

Arquitectura de la aplicación ..................................................................................................... 5

Esquema del diseño .............................................................................................................. 5

Diagrama Casos de Uso de la Aplicación: ....................................................................... 5

Diagrama de Clases: ...................................................................................................... 6

Modelo de datos ................................................................................................................. 10

Objeto Fundamental: .................................................................................................. 10

Ficheros XML: .............................................................................................................. 11

Almacenamiento: ........................................................................................................ 14

Vistas .................................................................................................................................. 16

Vista Principal: ............................................................................................................. 16

Vista Canción: .............................................................................................................. 20

Conclusiones ........................................................................................................................... 27

Anexos .................................................................................................................................... 28

Listado de fuentes entregadas ............................................................................................ 28

Page 3: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 3

Introducción

Descripción del problema

En un mundo globalizado y totalmente conectado, los idiomas han adquirido una gran

importancia, es más, se tratan de un conocimiento fundamental que permite

interactuar con personas de todo el mundo, favoreciendo los negocios y ampliando las

amistades.

La importancia en los idiomas se ve reflejada en la educación actual, cada vez existen

más colegios involucrados en una educación bilingüe, incluso las guarderías están

apostando cada vez más por este tipo de educación, fomentado el aprendizaje de

otros idiomas desde pequeños.

Con la crisis de estos años y la difícil situación del mundo laboral, en el que cada vez

existe más competencia y se requieren mayores y mejores conocimientos para optar a

un empleo, la necesidad de dominar un segundo idioma se ha acrecentado, siendo un

factor diferencial a la hora de conseguir un trabajo. En el mundo laboral el

conocimiento de otro idioma y en especial el inglés, se trata de un requisito básico

exigido en casi cualquier oferta de empleo.

De todos los idiomas, el inglés es el que ha adquirido una mayor relevancia, se ha

convertido en un idioma global, utilizado en casi todos los ámbitos de nuestra vida

cotidiana y siendo considerado actualmente como una necesidad.

Esta necesidad se ha visto reflejada en la gran cantidad de academias de idiomas que

proliferan en nuestro país, así mismo, existen infinidad de herramientas (libros, cursos

online, aplicaciones, juegos…), que facilitan la comprensión y perfeccionamiento de

estos idiomas.

Con este proyecto, pretendo ofrecer una aplicación móvil que permita mejorar el

conocimiento del inglés y sobretodo perfeccionar la pronunciación de este idioma a

través de las canciones.

Page 4: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 4

Objetivos

Desarrollar una aplicación basada en el sistema operativo Android que permita a los

usuarios profundizar y mejorar el conocimiento del inglés de una forma divertida a

través de las canciones.

Pretendo que sea una aplicación dinámica, con una interfaz sencilla de manejar para

todos los tipos de usuarios, y que facilite la mejora de la pronunciación del inglés

mediante la repetición de las estrofas de las canciones elegidas por los usuarios.

La aplicación estará dotada de tres modos distintos de reproducción, de forma que el

usuario tenga diversas alternativas para mejorar su aprendizaje.

Así mismo, constará de subtítulos en inglés y castellano para facilitar su comprensión.

Adicionalmente, hará uso del reconocimiento de voz para que el usuario pueda

practicar la pronunciación.

La gestión de las canciones se realizará a través de ficheros XML, dotando al sistema de

una gran portabilidad para en un futuro permitir el intercambio de esta información.

Motivación

La motivación en la creación de esta aplicación como proyecto final del Master de

Desarrollo de Aplicaciones sobre Dispositivos Móviles ha sido personal.

Surge de la necesidad de dotar de una herramienta que permita perfeccionar el

conocimiento del inglés de una forma sencilla y divertida, realizando una actividad

cotidiana como es escuchar música.

Quería huir de los estándares de las academias o cursos de inglés, dónde el aprendizaje

es mucho más monótono, realizando una aplicación móvil dinámica y que sirva sobre

todo para mejorar la pronunciación.

Page 5: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 5

Arquitectura de la aplicación

Esquema del diseño

Diagrama Casos de Uso de la Aplicación:

Ilustración 1: Diagrama Casos Uso

Page 6: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 6

Diagrama de Clases:

i. Clase Canción

Ilustración 2: Clase Canción

La Clase Canción, contiene todos los atributos necesarios para registrar las canciones

introducidas por el usuario. Además, está dotado de un conjunto de Frases (Letra:

ArrayList<Frase>), que permite registrar los subtítulos en inglés y castellano, así

como los tiempos de inicio y fin de cada uno de ellos.

Dado que la aplicación almacena y gestiona las canciones en un XML, se ha dotado a la

Clase Canción de todas las funcionalidades necesarias para realizar el procesado de

estos ficheros, por ello, ha sido necesario crear la Clase ManejadorXML que extiende

de DefaultHandler, la cual permite parsear los XML.

Page 7: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 7

ii. Actividad Principal:

Ilustración 3: Actividad Principal

La Actividad Principal se basa en AppCompatActivity, se ha añadido el

FloatingActionButton, que permite al usuario sincronizar la lista de reproducción de

las canciones, así como Recyclerview (LinearLayoutManager) para su visualización,

generando un adaptador propio (AdaptadorCanciones), para representar cada una de

las canciones en la lista de reproducción. La gestión de las canciones de forma interna

se realiza a través de un vector (CancionesVector) que implementa todas las funciones

(añadir, eliminar, borrar…), definidas en la Interfaz Canciones.

Page 8: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 8

iii. Preferencias y Acerca De:

Ilustración 4: Preferencias y Acerca De

iv. Editar, Etiquetar y Nueva Canción:

Se ha optado por reutilizar la misma Actividad para las opciones de editar e insertar

una nueva canción. La Actividad EtiquetarCancion nos permite, mientras se reproduce

el audio, establecer los tiempos de inicio y fin de cada frase.

Ilustración 5: Editar, Etiquetar y Nueva Canción

Page 9: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 9

v. Vista Canción:

Ilustración 6: Vista Canción

Esta Actividad nos permite visualizar de forma individualizada cada una de las

canciones existentes en la Lista de Reproducción. Además, en ella podremos

reproducir la canción con el modo de reproducción seleccionado.

Para el modo Normal se ha incluido un MediaController para gestionar la

reproducción de la canción. En el modo Lectura se utiliza TextToSpecch para que la

aplicación lea las frases que componen la canción en inglés y posteriormente en

castellano. Y el modo Repetición hace uso del reconocimiento de voz

(RecognizenIntent) para que el usuario repita la frase y compruebe su pronunciación.

La gestión de estos modos se ha realizado en un hilo de ejecución en segundo plano

(MiThread), independiente del hilo principal de forma que no bloque la ejecución

normal de la aplicación, dado que se debe determinar en cada instante la posición del

audio para establecer los subtítulos correspondientes, así como en ciertos modos

mantenerse a la espera hasta finalizar una acción (reproducir las frases,

reconocimiento de voz).

Page 10: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 10

Modelo de datos

La aplicación no utiliza una base de datos como modelos de datos al uso. Para

almacenar la información persistente de la entidad fundamental (Objeto Canción), que

permite el correcto funcionamiento de la aplicación se hace uso de los ficheros XML.

Objeto Fundamental:

El objeto fundamental sobre el que se basa toda la aplicación es la Clase Cancion,

contiene toda la información necesaria para registrar las canciones introducidas por el

usuario como el título, autor y género (Pop, Jazz, Rock…). La dificultad estará

representada por unas estrellas indicando el nivel de complejidad, la variable

etiquetado permite identificar si se ha realizado el proceso de introducir los tiempos

de inicio y fin de cada frase, también mantiene un registro de la letra de la canción

compuesta por un conjunto de frases (original y traducida) con sus tiempos de inicio y

fin. Adicionalmente contiene un atributo de uso interno (nombrefichero) que nos

permite identificar los ficheros1 asociados a la canción.

Ilustración 7: Objeto Fundamental

1 Para crear una canción es necesario introducir en la SD (carpeta “cancionesingles”) 3 ficheros obligatorios

(audio.mp3, letraOriginal.txt, letraTraducida.txt) además de 1 imagen.jpg opcional. Más adelante se detallará

esta información.

Page 11: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 11

Ficheros XML:

La gestión de las canciones se realizará a través de ficheros XML, es decir, cuando el

usuario generé una nueva canción se creará un XML con toda la información relativa a

la canción. Se ha optado por esta solución porque es una forma sencilla de

almacenamiento, y práctica ya que permite al usuario modificar los componentes de la

canción de forma externa a la aplicación, sobre todo a la hora de editar los tiempos de

inicio y fin de cada frase. Así mismo, es un mecanismo que dota de portabilidad a la

aplicación permitiendo el intercambio de canciones ya etiquetadas entre los usuarios.

Ilustración 8: Esquema XML

Para la gestión de los XML se ha optado por SAX (SIMPE APLI for XML), debido a que

permite un análisis rápido con el mínimo consumo de memoria. SAX no guarda los

datos y por ello se necesita una estructura de datos donde guardar la información

(Objeto Canción). El parser con SAX genera eventos a medida que se lee el documento

XML, para cada una de las etiquetas existentes en el fichero, por ello, ha sido necesario

realizar nuestro propio ManejadorXML heredando la funcionalidad de la clase

DefaultHandler.

Page 12: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 12

A continuación se detallan los métodos desarrollados para procesar los ficheros XML

asociados a las canciones:

Leer XML:

public void leerXML (String path) throws Exception{

File xmlFile = new File(path);

FileInputStream xmlFileInputStream = new FileInputStream(xmlFile);

InputSource inputSource = new InputSource(xmlFileInputStream);

SAXParserFactory fabrica = SAXParserFactory.newInstance();

SAXParser parser = fabrica.newSAXParser();

XMLReader lector = parser.getXMLReader();

ManejadorXML manejadorXML = new ManejadorXML();

lector.setContentHandler(manejadorXML);

lector.parse(inputSource);

this.titulo = manejadorXML.getCancionXML().getTitulo();

this.autor = manejadorXML.getCancionXML().getAutor();

this.genero = manejadorXML.getCancionXML().getGenero();

this.dificultad = manejadorXML.getCancionXML().getDificultad();

this.etiquetado = manejadorXML.getCancionXML().getEtiquetado();

this.letra = manejadorXML.getCancionXML().getLetra();

}

Genera el parser SAX para procesar el XML, se le asigna un XMLReader para leer

el fichero y se le asocia el ManejadorXML que permite interpretar cada uno de

los eventos asociados a las etiquetas que forman el fichero xml. Con los datos

que devuelve el Manejador, se actualiza los atributos del objeto Canción.

Escribir XML:

public void escribirXML(){

if (validarEscribirSD()){

String path =rutaCarpeta+this.nombreFichero+EXTENSION_XML;

try{

FileOutputStream xmlFile = newFileOutputStream(path,true);

XmlSerializer serializador = Xml.newSerializer();

serializador.setOutput(xmlFile,"UTF-8");

serializador.startDocument("UTF-8",true);

serializador.startTag("", "cancion");

serializador.startTag("","titulo");

serializador.text(this.titulo);

serializador.endTag("","titulo");

serializador.startTag("","autor");

serializador.text(this.autor);

serializador.endTag("","autor");

serializador.startTag("","genero");

serializador.text(String.valueOf(this.genero.ordinal()));

serializador.endTag("","genero");

serializador.startTag("","dificultad");

serializador.text(String.valueOf(this.dificultad.ordinal()));

serializador.endTag("","dificultad");

serializador.startTag("","etiquetado");

serializador.text(String.valueOf(this.etiquetado));

serializador.endTag("","etiquetado");

serializador.startTag("","letra");

for(Frase frase:this.letra){

serializador.startTag("","frase");

serializador.startTag("","tiempoIni");

Page 13: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 13

serializador.text(String.valueOf(frase.getTiempoIni()));

serializador.endTag("","tiempoIni");

serializador.startTag("","tiempoFin");

serializador.text(String.valueOf(frase.getTiempoFin()));

serializador.endTag("","tiempoFin");

serializador.startTag("","fraseOriginal");

serializador.text(frase.getFraseOriginal());

serializador.endTag("","fraseOriginal");

serializador.startTag("","fraseTraducida");

serializador.text(frase.getFraseTraducida());

serializador.endTag("","fraseTraducida");

serializador.endTag("","frase");

}

serializador.endTag("","letra");

serializador.endTag("","cancion");

serializador.endDocument();

sincroListReproduccion();

}catch (Exception e){

Log.e(LOG_TAG, e.getMessage(), e);

}

}

}

Genera cada una de las etiquetas con los campos que forman el fichero mediante

XMLSerializer. Una vez finalizado el documento, llama a sincroListReproduccion

que permite generar la Lista de Reproducción con todas las canciones (ficheros

xml), existentes en la carpeta cancionesingles de la SD.

Manejador XML:

public class ManejadorXML extends DefaultHandler{

private Cancion cancionXML;

private Frase frase;

private String tmpValue;

public Cancion getCancionXML(){

return this.cancionXML;

}

@Override

public void startDocument() throws SAXException {

cancionXML = new Cancion();

}

@Override

public void startElement(String uri, String nombreLocal, String

nombreCualif, Attributes atr) throws SAXException {

if(nombreCualif.equalsIgnoreCase("frase")){

frase = new Frase();

}

}

@Override

public void characters(char [] c, int comienzo, int lon){

tmpValue = new String(c, comienzo, lon);

}

@Override

public void endElement(String uri, String nombreLocal, String

nombreCualif) throws SAXException{

if(nombreCualif.equalsIgnoreCase("titulo")){

cancionXML.setTitulo(tmpValue);

}

Page 14: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 14

if(nombreCualif.equalsIgnoreCase("autor")){

cancionXML.setAutor(tmpValue);

}

if(nombreCualif.equalsIgnoreCase("genero")){

cancionXML.setGenero(Genero.values()[Integer.parseInt(tmpValue)]);

}

if(nombreCualif.equalsIgnoreCase("dificultad")){

cancionXML.setDificultad(Dificultad.values()[Integer.parseInt(tmpValue)]

); }

if (nombreCualif.equalsIgnoreCase("etiquetado")){

cancionXML.setEtiquetado(Boolean.parseBoolean(tmpValue));

}

if (nombreCualif.equalsIgnoreCase("tiempoIni")){

frase.setTiempoIni(Integer.parseInt(tmpValue));

}

if (nombreCualif.equalsIgnoreCase("tiempoFin")){

frase.setTiempoFin(Integer.parseInt(tmpValue));

}

if (nombreCualif.equalsIgnoreCase("fraseOriginal")){

frase.setFraseOriginal(tmpValue);

}

if (nombreCualif.equalsIgnoreCase("fraseTraducida")){

frase.setFraseTraducida(tmpValue);

}

if (nombreCualif.equalsIgnoreCase("frase")){

cancionXML.getLetra().add(frase);

}

}

}

Reacciona ante cada uno de los eventos generados al procesar el fichero xml,

de forma que interpreta las etiquetas que contiene el xml obteniendo el valor

de cada atributo del objeto canción correspondiente.

Almacenamiento:

El almacenamiento de los ficheros XML generados por la aplicación, así como de los

ficheros que debe introducir el usuario para generar una canción, se realizan en una

carpeta (cancionesingles) de la memoria externa SD.

Por tanto ha sido necesario establecer los permisos de Android que permiten acceder

a la memoria externa tanto en lectura como escritura. Así mismo, cada vez que se

debe realizar una acción sobre la SD, se valida los permisos correspondientes.

Cuando se instala por primera vez la aplicación, se comprueba si existe en la SD la

carpeta cancionesingles, y en caso de no existir se crea esta carpeta para el

almacenamiento de todos los ficheros XML generados por la aplicación.

Adicionalmente, y para dotar al usuario de unas canciones demo, en la carpeta de

recursos assets, se han introducido todos los ficheros necesarios para crear tres

canciones, de forma que, cuando comprueba que no existe la carpeta cancionesingles

y posteriormente la crea, copia estos ficheros a dicha carpeta para que el usuario

tenga unas canciones de ejemplo.

Page 15: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 15

Para crear una nueva canción, el usuario deberá guardar en la carpeta cancionesingles

de la SD, previamente al proceso de insertar una nueva canción, 3 ficheros

obligatorios audio.mp3, letraoriginal.txt, letratraducido.txt), además de 1 imagen.jpg

opcional. Todos estos ficheros se deben renombrar de la misma forma diferenciándose

por su extensión (excepto los txt que mantendrán original.txt y traducido.txt para

diferenciarse), el nombre elegido será el que el usuario introduzca en Nombre Fichero

de la vista Nueva Canción.

Como se ha indicado anteriormente, toda la gestión de las canciones se realiza a través

de XML, de forma que, para establecer la lista de reproducción de las canciones, la

aplicación accede a la carpeta cancionesingles de la SD y busca los XML existentes,

creando para cada uno de ellos la canción correspondiente. Por tanto, cualquier

modificación en esta carpeta de los ficheros XML se verá reproducido en la aplicación

(VectorCanciones es de uso interno y no persistente, se genera a partir de los XML

existentes en la carpeta cancionesingles).

El método encargado de generar la lista de reproducción es sincroListReproduccion,

que obtiene el nombre de todos los ficheros XML existentes en la carpeta

cancionesingles de la SD, y para cada uno de ellos genera un objeto canción mediante

el método descrito anteriormente leerXML. Por último añade cada una de las

canciones generadas al VectorCanciones de la aplicación.

Sincronizar Lista Reproducción:

static void sincroListReproduccion(){

List<String> listaFicherosXML = getListOfFilesXML(rutaCarpeta);

Cancion cancion;

vectorCanciones = new CancionesVector();

for(String nombreXML:listaFicherosXML){

cancion = new Cancion ();

String nombreFichero =

nombreXML.substring(0,nombreXML.lastIndexOf("."));

cancion.setNombreFichero(nombreFichero);

Log.d(LOG_TAG,nombreFichero);

try {

cancion.leerXML(rutaCarpeta+nombreXML);

}catch (Exception e){

Log.e(LOG_TAG, e.getMessage(), e);

}

cancion.toStringCancion();

vectorCanciones.anyade(cancion);

}

}

Page 16: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 16

Vistas

Vista Principal:

Ilustración 9: Esquema Navegación Actividad Principal

Page 17: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 17

i. Actividad Principal

En el diseño del interfaz de la aplicación se ha optado por Material Design (a partir de la

versión 5.0 de Android API 21). Material Design se basa en diseños y colores planos, además de

simular que los elementos están construidos de material físico.

Ilustración 10: Vista Actividad Principal

En la Actividad Principal se ha utilizado la barra de acciones extendida a través de

CollapsingToolbarLayout. El botón flotante (FloatingActionButton), permite al usuario

sincronizar la lista de reprodución.

Para el diseño de la lista de reproducción, se hace uso de la vista RecyclerView, la cual es más

eficiente y flexible, además permite el reciclado de vistas y una distribución configurable (en

este caso LinearLayoutManager). Es necesario generar un adaptador propio

(AdaptadorCanciones), que contendrá el layout individual y todos los elementos de las

canciones a mostrar. Además, para que al seleccionar un elemento de la lista se visualice de

forma individualizada una canción (VistaCanción), se debe asignar un escuchador a cada una

de las vistas del RecyclerView (setOnItemClickListener).

Para poder utilizar Material Design y ReciclerView es necesario introducir las siguientes

dependencias en build.gradle:

dependencies {

compile 'com.android.support:appcompat-v7:24.0.0'

compile 'com.android.support:design:24.0.0'

compile 'com.android.support:recyclerview-v7:24.0.0'

}

En el menú de la actividad principal se puede consultar información de la aplicación (Acerca

De…), y acceder a las preferencias de la aplicación, en las que se puede establecer los

subtitulos para el modo de reproducción normal. Además, desde este mismo menú tendremos

la opción de insertar una nueva canción.

Page 18: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 18

ii. Nueva Canción

Como se ha comentado anteriormente, se ha reutilizado la misma actividad para las opciones

de Editar e Insertar una canción (EdiciónNuevaCanciónActivity), dado que ambas opciones

comparten funcionalidades y usan el mismo formulario para introducir los datos que definen la

canción. Además, en el caso de insertar una nueva canción, se ha introducido un campo

adicional (Nombre Fichero), que permite al usuario identificar los ficheros necesarios para

generar la canción, este campo se utilizará para nombrar el fichero XML generado.

Ilustración 11: Vista Nueva Canción

Previamente a realizar el proceso de insertar una nueva canción se debe guardar en la

carpeta cancionesingles de la SD los siguientes ficheros:

Obligatorios

Audio de la canción en formato mp3 (nombreFichero.mp3).

Texto con las frases en inglés (nombreFicherooriginal.txt).

Texto con las frases en español (nombreFicherotraducido.txt).

Opcional

Imagen de portada en formato jpg (nombreFichero.jpg).

Es muy importante mantener la nomenclatura de todos los ficheros como se ha

indicado, de forma que cuando el usuario introduzca el nombre del fichero en la vista

Nueva Canción, la aplicación pueda identificar dichos ficheros y generar la canción

correctamente.

Ejemplo: Nombre Fichero “yesterday” yesterday.mp3, yesterday.jpg, yesterdayoriginal.txt, yesterdaytraducido.txt

Page 19: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 19

El proceso para crear una nueva canción cuando se pulsa el botón guardar, sigue los

siguientes pasos:

1. Registrar los datos del formulario en un objeto Canción temporal.

2. Leer los .txt indicados a través del campo Nombre Fichero, para generar el

conjunto Letra (ArrayList<Frase>), con cada una de las frases en inglés y

castellano (los tiempos de inicio y fin se inicializan a 0ms, dado que no se ha

realizado el proceso de etiquetar).

3. En caso de existir un .xml con el nombre indicado en el formulario, se

eliminaría.

4. Generar el fichero xml a través del método escribirXML() descrito

anteriormente.

Leer TXT

public void leerTXT(){

if(validarLeerSD()){

String txtOriginal = rutaCarpeta + this.nombreFichero +

EXTENSION_TXTORIGINAL;

String txtTraducido = rutaCarpeta + this.nombreFichero +

EXTENSION_TXTTRADUCIDO;

try{

File original = new File(txtOriginal);

File traducido = new File(txtTraducido);

FileReader frOriginal = new FileReader(original);

FileReader frTraducido = new FileReader(traducido);

BufferedReader brOriginal = new BufferedReader(frOriginal);

BufferedReader brTraducido = new BufferedReader(frTraducido);

String fraseOriginal;

String fraseTraducida;

do{

Frase frase = new Frase();

fraseOriginal = brOriginal.readLine();

fraseTraducida = brTraducido.readLine();

if(fraseOriginal != null && fraseTraducida !=null){

frase.setFraseOriginal(fraseOriginal);

frase.setFraseTraducida(fraseTraducida);

letra.add(frase);

}

}while(fraseOriginal!=null && fraseTraducida !=null);

frOriginal.close();

frTraducido.close();

}

catch(Exception e){

Log.e(LOG_TAG, e.getMessage(),e);

}

}

}

A partir del campo Nombre Fichero, obtiene el path de los ficheros de texto.

Genera un BufferReader para cada uno de los txt (original y traducido), lee

cada línea de los ficheros y añade su contenido a la Lista Letra. Cuando ya no

existen más frases que leer en los ficheros, los cierra.

Page 20: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 20

Vista Canción:

Ilustración 12: Esquema Navegación Vista Canción

Page 21: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 21

i. Vista Canción

Al pulsar sobre un elemento de la lista de reproducción en la Actividad Principal,

accederemos al detalle de la canción (Vista Canción). La principal característica de esta

vista es la selección del modo de reproducción. Se ha incluido tres opciones que

ofrecen al usuario distintas formas de mejorar el conocimiento del inglés.

Ilustración 13: Vista Canción

La gestión de estos modos se realiza en un hilo secundario (MiThread) para evitar que

se bloquee el hilo principal de ejecución (hilo de interfaz). Cuando se pulsa cualquier

botón de los modos, se lanza el hilo secundario y tras comprobar la elección del

usuario, ejecuta el modo correspondiente.

class MiThread extends Thread{

int result;

Frase frase;

boolean repetir = true;

@Override public void run(){

while(contador <cancion.getLetra().size() && corriendo) {

switch (modoRepro) {

case MODO_NORMAL:

modoNormal();

break;

case MODO_LECTURA_INICIAL:

modoLecturaInicial();

break;

case MODO_REPETICION:

modoRepeticion();

break;

}

}

runOnUiThread(new Runnable() {

@Override

public void run() {

inicializaVistas();

corriendo = false;

contador = 0;

}

});

}

Page 22: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 22

Modo Normal:

Este modo permite reproducir el audio de forma continua, mostrando en cada

momento los subtítulos seleccionados en preferencias. Se ha dotado de un

MediaController que permite gestionar la reproducción de la canción.

Cuando se pulsa el botón “Normal”, se activa la reproducción del audio y se lanza el

hilo secundario, el cual comprobará en todo momento la posición del audio respecto a

los tiempos de inicio y fin de las frases mostrando por pantalla la que corresponda.

while(mediaPlayer.getCurrentPosition()<cancion.getLetra().get(contador)

.getTiempoIni() && corriendo){

sleep(1);

}

} catch (Exception e) {

Log.e(LOG_TAG, "Error ModoNormal sleep1:" + e);

}

try {

while (mediaPlayer.getCurrentPosition() <=

cancion.getLetra().get(contador).getTiempoFin() && corriendo) {

runOnUiThread(new Runnable() {

@Override

public void run() {

if(contador < cancion.getLetra().size()) {

int cont = contador;

fOriginal.setText(cancion.getLetra().get(cont).getFraseOriginal());

fTraducida.setText(cancion.getLetra().get(cont).getFraseTraducida());

}

}

});

}

}catch (Exception e){

Log.e(LOG_TAG, "Error ModoNormal bloque2:" + e);

}

contador++;

}

Dado que el código se ejecuta en un hilo secundario, no tenemos acceso a la interfaz

de usuario, y por tanto para realizar cambios en las vistas, es necesario indicar que

estas modificaciones se ejecuten en el hilo principal con runOnUiThread.

Page 23: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 23

Modo Lectura:

En el modo Lectura, se muestra inicialmente la frase en inglés a la vez que se

reproduce mediante TextToSpeech. Posteriormente se muestra la frase en castellano y

se reproduce igualmente. Por último, se activa el audio en la posición correspondiente

al tiempo de inicio de la frase. Todo este proceso se repite hasta finalizar la canción.

Para reproducir la frase mediante TextToSpeech se utiliza el método speak(), el cual

tiene dos configuraciones posibles en función del API de Android en el que se ejecuta.

Código para versión < LOLLIPOP (API 21)

result = tts.setLanguage(Locale.ENGLISH);

if (result != TextToSpeech.LANG_MISSING_DATA || result !=

TextToSpeech.LANG_NOT_SUPPORTED) {

if(corriendo) {

tts.speak(fOriginal.getText().toString(),

TextToSpeech.QUEUE_FLUSH, null); } }

while(tts.isSpeaking()) {

try {

sleep(1500);

} catch (Exception e) {

Log.e(LOG_TAG, "Error LecturaInicial sleep1:" + e);

}

}

Se configura el idioma del TextToSpeech (en este caso en inglés), y tras

comprobar que el dispositivo soporta este idioma, se reproduce la frase

original de la canción a través del método speak. Posteriormente se mantiene

el hilo dormido mientras reproduce la frase.

Código para versión >= LOLLIPOP (API 21)

tts.setOnUtteranceProgressListener(new UtteranceProgressListener() {

@Override

public void onStart(String s) {

}

@Override

public void onDone(String utteranceId) {

estaHablando = false;

}

@Override

public void onError(String s) {

}

});

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

versionLollipop = true;

}

Page 24: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 24

result = tts.setLanguage(Locale.ENGLISH);

if (result != TextToSpeech.LANG_MISSING_DATA || result !=

TextToSpeech.LANG_NOT_SUPPORTED) {

if(corriendo) {

if(versionLollipop){

tts.speak(fOriginal.getText().toString(),

TextToSpeech.QUEUE_FLUSH, null,"id");

}

}

}

if(versionLollipop){

estaHablando = true;

while(estaHablando) {

try {

sleep(100);

} catch (Exception e) {

Log.e(LOG_TAG, "Error LecturaInicial sleep1:" + e);

}

}

}

La principal diferencia es que a partir de la API 21 se añade un escuchador de eventos

UtteranceProgressListener que nos permite saber cuando se ha completado el

proceso de reproducir la frase (onDone). Este funcionamiento es más preciso y ha

permitido que el tiempo que se mantiene el hilo secundario dormido sea menor

(100ms). Mientras que para versiones inferiores al API 21 se ha tenido que ampliar

este tiempo (1.500ms), debido a que se producian errores de sincronización.

Modo Repetición:

El funcionamiento de este modo es similar al de Lectura, con la salvedad de que no

reproduce la frase en castellano.

Ilustración 14: Modo Repetición

Inicialmente muestra y reproduce la frase en inglés (TextToSpeech), a continuación se

muestra la imagen de un micrófono que al pulsarse activa el reconocimiento de voz

(lanzar RecognizerIntent) para que el usuario reproduzca la frase en inglés, y muestra

el resultado de forma que pueda comprobar su pronunciación. Posteriormente activa

el audio de la frase correspondiente. El proceso se repite tantas veces como frases

contiene la canción.

Page 25: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 25

Intent intent = new Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH);

intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE_MODEL, "en-US");

intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE_MODEL,

RecognizerIntent.LANGUAGE_MODEL_FREE_FORM);

try {

startActivityForResult(intent, 4578);

} catch (ActivityNotFoundException e) {

Log.e(LOG_TAG,"El dispositivo no permite reconocimiento de voz");

}

@Override

protected void onActivityResult(int requestCode, int resulCode, Intent

data){

if (requestCode == 4578 && resulCode== Activity.RESULT_OK && data!=null)

{

ArrayList<String>text=data.getStringArrayListExtra

(RecognizerIntent.EXTRA_RESULTS);

fTraducida.setText(text.get(0));

}

}

Por otro lado, desde las opciones de menú de la Vista Canción se puede realizar las

acciones de editar, etiquetar y borrar la canción.

ii. Borrar Canción

Al pulsar sobre borrar una canción, aparece un cuadro de dialogo que nos solicita

confirmación para su eliminación. Para que una canción sea borrada, se debe eliminar

el xml correspondiente, posteriormente se actualiza la nueva Lista de Reproducción.

iii. Editar Canción

Ya se ha indicado anteriormente que tanto Editar como Nueva Canción reutilizan la

misma actividad (EdicionNuevaCancionActivity). En el formulario de editar,

desaparece el campo para introducir el nombre de los ficheros, además cuando se

muestra el formulario se visualizan los datos de la canción. Para diferenciar el

funcionamiento entre las dos opciones, se comprueba los parametros pasados en el

intent de llamada a la actividad, dado que en Editar es necesario saber el id de la

canción a modificar.

iv. Etiquetar Canción

Esta vista permite al usuario establecer los tiempos de inicio y fin de cada frase que

componen una canción. Cuando se inicia el proceso de etiquetado, se activa el audio y

el usuario debe pulsar los botones correspondientes para establecer el inicio y fin de

cada frase. Es imprescindible indicar el final de la frase, ya que en caso de no pulsar el

inicio, este se recalcula automáticamente en función del tiempo final de la frase

anterior aplicando un retardo.

Page 26: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 26

Ilustración 15: Etiquetar Canción

Se ha comentado que al insertar una nueva canción la aplicación genera un xml con

toda la información registrada en el formulario, además de generar el conjunto letra

leyendo los txt. Esto implica que tanto en el proceso de Editar como en el de Etiquetar,

ya exista un xml previo, de forma que a la hora de guardar las modificaciones

realizadas (editar parámetros canción o establecer tiempos frases), se debe eliminar

(borrar) el fichero xml existente y volver a crear uno nuevo con el registro de las

modificaciones (escribir.xml).

public void ini(View view){

if(mediaPlayer.isPlaying() && contador < cancion.getLetra().size())

{

timeActualMP = mediaPlayer.getCurrentPosition()-100;

cancion.getLetra().get(contador).setTiempoIni(timeActualMP);

if(!pulsadoIni){

pulsadoIni = true;

}

}

}

public void fin(View view){

if(mediaPlayer.isPlaying() && contador < cancion.getLetra().size())

{

timeActualMP = mediaPlayer.getCurrentPosition()+100;

cancion.getLetra().get(contador).setTiempoFin(timeActualMP);

if(!pulsadoIni &&

cancion.getLetra().get(contador).getTiempoIni() == 0) {

cancion.getLetra().get(contador).setTiempoIni(timeAnteriorFin+25);

}

timeAnteriorFin = timeActualMP;

pulsadoIni=false;

contador++;

visualizarFrase();

}

if(!mediaPlayer.isPlaying() || contador >=

cancion.getLetra().size()){

contador = 0;

bIni.setVisibility(View.INVISIBLE);

bFin.setVisibility(View.INVISIBLE);

bStart.setVisibility(View.VISIBLE);

}

}

Page 27: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 27

Conclusiones

Como conclusión indicar que se ha cumplido con los objetivos planteados inicialmente,

creando una aplicación que permite al usuario mejorar su conocimiento del idioma

inglés. Se trata de una forma sencilla y divertida de mejorar la pronunciación del

idioma a través de las canciones.

Proporciona al usuario distintas alternativas de aprendizaje con la inclusión de tres

modos de reproducción, cada uno de ellos ofrece alternativas para mejorar la

comprensión o la pronunciación. Hace uso de diversas técnicas como reproducir las

estrofas en ambos idiomas, así como del reconocimiento de voz permitiendo verificar

la pronunciación.

El uso de ficheros xml dota al sistema de una gran portabilidad, además es una forma

de registro de información sencilla y práctica.

Como Líneas abiertas destacar:

Dotar a la aplicación de un sistema de explorador de ficheros, que facilite al

usuario la inclusión de todos los ficheros necesarios para generar una canción

sin tener que renombrar cada uno ellos con el mismo nombre.

Crear un Servidor donde los usuarios puedan subir y descargar las canciones

etiquetadas, ampliando la oferta de canciones y haciendo más atractiva la

aplicación.

Generar un Servicio de Notificaciones que avise al usuario ante cualquier

novedad producida en el Servidor.

En el ámbito personal, agradecer todo lo aprendido durante el Master, ha sido

interesante poder plasmar los conceptos adquiridos en una aplicación final y funcional.

Mi actual trabajo no está relacionado con nada que tenga que ver con la

programación, y ha sido divertido (aunque con gran esfuerzo), volver a recordar los

aspectos de la programación, sobre todo en un ámbito tan actual como el desarrollo

de aplicaciones móviles.

Page 28: Canciones-Ingles.pdf - dcomg.upv.es · Dado que la aplicación almacena y gestiona las canciones en un XML, ... this.letra = manejadorXML ... que permite generar la Lista de Reproducción

Proyecto: Canciones Inglés Alumno: Gómez Sacedón, Mario

Máster en Desarrollo de Aplicaciones sobre Dispositivos Móviles 28

Anexos

Listado de fuentes entregadas

Junto con la memoria del proyecto del Master se entrega:

Archivo .zip con el código fuente de la aplicación.

Archivo apk de la aplicación.