Desarrollo de una aplicación interactiva para el etiquetado de objetos

Transcripción

Desarrollo de una aplicación interactiva para el etiquetado de objetos
IS31 Proyectos informáticos de sistemas
Ingeniería Técnica en Informática de Sistemas
Curso 2012-2013
Proyecto final de carrera
Desarrollo de una aplicación interactiva
para el etiquetado de objetos
Vte. Ramón Rubert Escuder
[email protected]
Dirigido por Raúl Montoliu Colas
INDICES
Índice de contenido
Anexos
Índice de Figuras y Tablas
Índice de contenido
1. Introducción......................................................................................................................................1
1.1. Objetivos...................................................................................................................................2
1.2. Medios utilizados......................................................................................................................3
1.3. Tareas .......................................................................................................................................4
1.4. Planificación temporal..............................................................................................................5
1.5. Presupuesto...............................................................................................................................8
1.6. Limitaciones............................................................................................................................10
2. Antecedentes...................................................................................................................................11
2.1. Smartphones............................................................................................................................12
2.2. Sistemas operativos.................................................................................................................16
2.3. Aplicaciones y juegos.............................................................................................................18
2.4. Android...................................................................................................................................20
2.4.1. Arquitectura....................................................................................................................21
2.4.2. Java (ver Referencias).....................................................................................................24
2.4.3. Aplicaciones....................................................................................................................25
3. Análisis...........................................................................................................................................26
3.1. Requisitos................................................................................................................................27
3.2. Casos de uso............................................................................................................................28
3.3. Flujo de trabajo.......................................................................................................................29
4. Diseño.............................................................................................................................................31
4.1. Arquitectura............................................................................................................................32
4.2. Interfaz....................................................................................................................................33
4.3. Carpetas del proyecto..............................................................................................................36
4.4. Diagrama de Clases................................................................................................................38
5. Implementación..............................................................................................................................40
5.1. Layouts....................................................................................................................................41
5.2. Clases......................................................................................................................................42
5.3. Pruebas....................................................................................................................................48
5.4. Resultados ..............................................................................................................................50
6. Conclusiones...................................................................................................................................53
6.1. Valoración...............................................................................................................................54
Anexos
7. Anexos............................................................................................................................................55
Anexo A: Eclipse...........................................................................................................................56
Instalar el SDK y Eclipse IDE .................................................................................................56
Crear un proyecto con Eclipse..................................................................................................57
Ejecución de la aplicación.........................................................................................................58
Generar el .APK (ver Referencias)...........................................................................................60
Anexo B: La aplicación en Google Play........................................................................................62
Anexo C: Glosario de términos.....................................................................................................65
Anexo D: Código fuente................................................................................................................66
AndroidManifest.xml................................................................................................................67
p_uaieo.xml...............................................................................................................................68
p_iniciar.xml.............................................................................................................................70
p_puntuacion.xml......................................................................................................................72
Uaieo.java.................................................................................................................................73
Iniciar.java.................................................................................................................................75
Imagen.java...............................................................................................................................79
Puntuacion.java.........................................................................................................................82
strings.xml.................................................................................................................................84
ic_launcher.png.........................................................................................................................84
Anexo E: Referencias....................................................................................................................85
Anexo F: Propuesta Técnica .........................................................................................................86
Índice de Figuras y Tablas
Figura 1. Diagrama de Gantt: Calendario de Tareas.............................................................................6
Figura 2. Diagrama de Red o PERT: Dependencia entre tareas...........................................................7
Figura 3. Diagrama EDT con costes asociados....................................................................................9
Figura 4. Imagen 00197_940128_fa.jpg............................................................................................10
Figura 5. Simon de IBM (1993) y Palm Pilot (1996).........................................................................12
Figura 6. Nokia 9110 Communicator (1998) y BlackBerry 5810 (2002).........................................13
Figura 7. Palm Treo 600(2003) y iPhone de Apple (2007)................................................................13
Figura 8. Motorola Droid (2009) y Evo 4G de HTC (2010)..............................................................14
Figura 9. Familia Samsung Galaxy S, SII y SIII................................................................................15
Figura 11. Arquitectura de Android....................................................................................................21
Figura 12. Casos de uso para el usuario de la aplicación...................................................................28
Figura 13. Casos de uso para la aplicación al conectar al servidor....................................................28
Figura 14. Diagrama de Actividad: Iniciar Partida............................................................................29
Figura 15. Diagrama de Actividad: Responder Pregunta...................................................................29
Figura 16. Diagrama de Actividad: Consultar Puntuación.................................................................30
Figura 17. Diagrama de Actividad: Descargar Archivo Configuración.............................................30
Figura 18. Diagrama de Actividad: Descargar Imágenes...................................................................30
Figura 19. Diagrama de Actividad: Actualizar Resultados................................................................30
Figura 20. Diseño Arquitectónico del Sistema...................................................................................32
Figura 21. Diseño de la Pantalla del menú principal..........................................................................33
Figura 22. Diseño de la Pantalla de Inicio..........................................................................................34
Figura 23. Diseño de la Pantalla de Puntuación.................................................................................35
Figura 24. Carpetas del Proyecto en Eclipse......................................................................................36
Figura 25. Diagrama de Clases UML.................................................................................................38
Figura 26. Toast: Verifique su conexión a internet.............................................................................49
Figura 27. Uso de CPU de la aplicación.............................................................................................49
Figura 28. Pantallas de la aplicación:.................................................................................................50
Figura 29. Pantallas de la aplicación: Aciertos y fallos......................................................................51
Figura 30. Pantalla de Puntuaciones...................................................................................................52
Figura 31. El nuevo proyecto de aplicación Android en Eclipse. .....................................................57
Figura 32. El Administrador de AVD muestra unos dispositivos virtuales. ......................................59
Figura 33. Exportar Aplicación firmada.............................................................................................60
Figura 34. Selección de la key o certificado.......................................................................................60
Figura 35. Creación de la key o certificado........................................................................................61
Figura 36. Destino de la key o certificado..........................................................................................61
Tabla 1. Diagrama de Gantt con la duración de las tareas y precedencias...........................................5
Tabla 2. Uso de Recursos.....................................................................................................................8
Tabla 3. Ventas de smartphones por sistema operativo en el cuarto cuatrimestre de 2011-12...........17
Tabla 4. Tabla de Requisitos...............................................................................................................27
Desarrollo de una aplicación interactiva para el etiquetado de objetos
1. Introducción
Este proyecto corresponde a la asignatura IS31 Proyectos Informáticos de Sistemas, de 3er Curso de Ingeniería Técnica en Informática de Sistemas en la Universitat Jaume I de Castellón.
Lo que se pretende con este proyecto es realizar una aplicación en forma de juego que permita al
usuario a evaluar una determinada imagen, en este caso si es un hombre o una mujer, para ello nos
serviremos de dispositivos móviles con el sistema operativo Android, sistema propiedad de Google
en creciente popularidad y líder de mercado.
Los resultados pasaran a formar parte del conjunto de investigaciones que esta llevando el grupo
de visión de la Universitat Jaume I. Más concretamente el grupo de visión del INIT está estudiando
algoritmos para decidir si una imagen es un hombre o una mujer automáticamente. A través de esta
aplicación pueden completar este estudio averiguando cómo lo hacen las personas para diferenciar
sexos. Actualmente existe un cuestionario disponible en la web para la evaluación de las imágenes,
pero no resulta demasiado apetecible al usuario por lo que surge la idea de realizar esta aplicación
más interactiva y atractiva.
Para la introducción nos hemos servido de la aplicación openPoject de la cual extraemos las figuras y tablas que ilustran esta primera sección. Para el desarrollo de la aplicación nos serviremos
de la plataforma de desarrollo Eclipse y se desarrollara en lenguaje de programación Java.
1
Desarrollo de una aplicación interactiva para el etiquetado de objetos
1.1. Objetivos
Los objetivos que nos marcamos para empezar a trabajar son diseñar una aplicación sobre un
dispositivo Android que permita el etiquetado de imágenes, la cual deberá cumplir lo siguiente:
•
Realizar una conexión con el servidor donde esta alojado el archivo de configuración.
•
Realizar una conexión con el servidor donde están alojadas las imágenes para la descarga de
las misma.
•
Etiquetado de imágenes.
•
Gestión de los resultados del juego: aciertos y fallos.
•
Realizar una conexión con el servidor donde se devuelven los resultados mediante un
script .php.
•
El usuario podrá acceder a la aplicación como si de un juego convencional se tratase, obteniendo una puntuación según su tasa de aciertos y fallos.
2
Desarrollo de una aplicación interactiva para el etiquetado de objetos
1.2. Medios utilizados
Nivel hardware: Será necesario un dispositivo Android donde funcionara la aplicación y se realizaran las pruebas durante la fase de desarrollo, un ordenador donde instalar el entorno de desarrollo y programar la aplicación, y un servidor donde estén alojados el archivo de configuración, las
imágenes y el archivo de los resultados.
De estos elementos, el alumno ya dispone de los dos primeros, un teléfono Sony Ericsson Xperia Neo V:
•
Pantalla TFT táctil de 3,7 pulgadas y 854 x 480 píxeles
•
S.O. Google Android 4.0 (Ice Cream Sandwich)
•
Procesador 1 GHz Qualcomm Snapdragon
•
512 MB de memoria RAM y tarjeta SD de 32GB
•
Acceso a redes UMTS HSPA GSM GPRS/EDGE
y un ordenador portátil Dell Inspiron 1520:
•
Ubuntu 12.04 LTS de 64-bit
•
Procesador Intel® Core™2 Duo CPU T7300 @ 2.00GHz × 2
•
2.0 GB de memoria RAM y 160 GB disco duro
•
Gráficos Nvidia GeForce 8600M GT/PCIe/SSE2
El laboratorio del grupo de visión dispone de las imágenes en un servidor accesible.
Nivel software: Programas instalados para la realización del proyecto:
•
Eclipse
•
JDK
•
Android SDK
•
ADT plugin
•
LibreOffice 3.5.7.2
•
Gimp 2.6.12
•
Serena openProj
Nivel organizativo: El proyecto se realizara por un alumno y un profesor que se encargara de
dirigirlo. Se realizará en el propio domicilio además de las tutorías periódicas para la revisión de los
avances con una duración aproximada de cuatro meses.
3
Desarrollo de una aplicación interactiva para el etiquetado de objetos
1.3. Tareas
Se ha dividido el trabajo en tareas y subtareas , a continuación se muestra dichas división y una
breve explicación de las tareas más relevantes:
1. Propuesta técnica.
1.1. Entrevista previa con el tutor.
1.2. Búsqueda de información.
1.3. Desarrollo de la propuesta técnica.
2. Desarrollo.
2.1. Instalación Herramientas.
2.2. Documentación.
2.3 Análisis y Diseño.
2.4. Desarrollo de la aplicación.
2.4.1. Gestión del archivo de configuración.
2.4.2. Gestión de imágenes.
2.4.3. Interacción usuario y gestión de resultados.
2.4.4. Pruebas y test.
3. Revisión final.
3.1. Redacción memoria final
3.2 Preparación de la presentación.
Propuesta técnica: Elaboración de un documento inicial donde se asentaran las bases del proyecto, esta propuesta formara parte fundamental de la introducción de la Memoria final.
Desarrollo: Una vez planificada la elaboración del proyecto pasaremos a una fase de reposo y
documentación en la que pensaremos que haremos y como lo haremos, cuando se tenga muy claro
el que y el como, pasaremos al desarrollo de la aplicación. A lo largo de esta fase y la siguiente empezaremos con la redacción de las partes de la memoria que se correspondan.
Desarrollo de la aplicación: Se han estimado una tareas mínimas a realizar en la fase de desarrollo, el 50 % del esfuerzo se concentra en esta fase.
Revisión final: Concluido el proyecto, se redactan las partes de la memoria que quedaron por
redactar y se prepara una presentación para mostrar el trabajo al tribunal.
4
Desarrollo de una aplicación interactiva para el etiquetado de objetos
1.4. Planificación temporal
Para cada tarea y subtarea se ha estimado un coste temporal que puede sufrir variaciones a lo largo del proyecto. Se ha tomado como base un calendario laboral de lunes a viernes con una jornada
de cuatro horas dedicadas al proyecto, tomando como festivos una semana en marzo y diez días en
abril. A continuación se muestra un diagrama de Gantt con el coste temporal y la precedencia entre
tareas (Tabla 1):
Tabla 1. Diagrama de Gantt con la duración de las tareas y precedencias.
Comparando la duración estimada de las tareas con su duración real se observa que apenas han
sufrido variación, por lo que se puede afirmar que se han cumplido completamente con los plazos
estimados.
A continuación se muestran dos figuras: Un diagrama de Gantt o diagrama temporal donde se
aprecia muy fácilmente la duración de cada tarea en un calendario (Figura 1), y un diagrama de
RED o PERT que muestra el tiempo mínimo para realizar cada tarea y en conjunto el tiempo mínimo para realizar todo el proyecto teniendo en cuenta las dependencias entre tareas (Figura 2).
5
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Figura 1. Diagrama de Gantt: Calendario de Tareas.
6
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Figura 2. Diagrama de Red o PERT: Dependencia entre tareas.
7
Desarrollo de una aplicación interactiva para el etiquetado de objetos
1.5. Presupuesto
Personal: Se asume el sueldo de un ingeniero técnico recién titulado durante 350 horas o 2 meses a jornada completa. Se toma como referencia el Salario bruto anual por nivel de estudios para un
“Diplomado universitario o equivalente” de 29.104,17 euros proporcionado por el Instituto Nacional de Estadística (ver Referencias). A continuación se desglosan los costes de cada tarea en una tabla (Tabla 2) y un diagrama EDT, tipo arbol (Figura 3), lo que resulta en un coste personal de
4.900 euros brutos.
Hardware: El coste teórico se calculará teniendo en cuenta el equipo real con que se realizará el
proyecto. Será por una parte un ordenador portátil comprado por 1.100 euros hace 6 años por lo que
su valor actual se considera inferior a 500 euros. El dispositivo móvil de 160 euros y un año de antigüedad por lo que se considera su valor actual sobre los 100 euros. El laboratorio a través de la UJI
proporciona el servidor de imágenes, a falta de información sobre este coste se considerara como
coste cero. Coste total 600 euros.
Software: El ordenador dispone de una distribución Linux, Ubuntu 12.04 gratuita. El entorno
de programación Eclipse, el SDK(software development kit), etc. es gratuito. La totalidad del software es libre por lo que el coste en este apartado es cero.
Totales: 4.900 + 600 + 0 = 5.500 euros.
Tabla 2. Uso de Recursos.
8
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Figura 3. Diagrama EDT (Estructura de Descomposición del Trabajo) con costes asociados.
9
Desarrollo de una aplicación interactiva para el etiquetado de objetos
1.6. Limitaciones
Introducción
En la propuesta inicial se contemplaba la modificación de las imágenes por parte del proyectando para añadir dificultad y crear la sensación de juego, debido a la poca resolución y tamaño de las
imágenes se elimina esta opción dado que la posibilidad de añadir dificultad a una imagen ya de por
si de mala calidad son casi nulas. Por otro lado, la configuración del sistema permite a los investigadores del grupo de visión añadir más imágenes con la modificación que crean oportuna. Por lo que
realmente este hándicap no limita a la aplicación en el caso de querer focalizar el estudio de rasgos
u otras características de los rostros. En la imagen inferior (Figura 4) se puede apreciar el tamaño y
calidad de una imagen al azar. Texto eliminado de la introducción:
“Además este proyecto pretende ir un paso más allá introduciendo modificaciones en las imágenes de forma que dificulte al usuario la tarea de forma progresiva, de esta forma la aplicación pasa a
ser en parte un juego”
Objetivos
Tal como se indica en la introducción se elimina este objetivo:
“Modificación de las imágenes para añadirle dificultad como cambios de color , ocultación de partes del rostro y otros efectos de distorsión.”
Figura 4. Imagen 00197_940128_fa.jpg Anchura: 45 píxeles Altura: 36 píxeles.
10
Desarrollo de una aplicación interactiva para el etiquetado de objetos
2. Antecedentes
En este capítulo se ha querido explicar con más detalle los aspectos relacionados con Android y
las aplicaciones. En la primera parte se tratan aspectos como la historia de los smartphones, otros temas a tratar serán los diferentes sistemas operativos que se pueden utilizar y las tiendas de aplica ciones que los acompañan. Respecto a las aplicaciones, se tratan algunos de los juegos más populares. Para ello nos serviremos de diferentes noticias y artículos de la web (ver Referencias) de donde
se extraen partes del texto y las imágenes que lo acompañan.
Finalmente se explicará con más profundidad los detalles del sistema operativo Android, su lenguaje de programación, Java, y los componentes de una aplicación Android.
11
Desarrollo de una aplicación interactiva para el etiquetado de objetos
2.1. Smartphones
Un smartphone es un término destinado a dispositivos móviles que fusionan funcionalidades de
teléfono móvil (realizar o recibir llamadas y mensajes principalmente) con funcionalidades de una
PDA (acceder al correo electrónico, organizador personal y actualmente incluso la instalación de diferente software) controladas por un sistema operativo que además gestiona el resto de recursos
software y hardware. La aparición del concepto smartphone, aunque se pueda considerar un término
reciente, data de 1993 (han pasado 20 años). Debido a su alto coste, los primeros modelos apenas
llegaron al público en general y solamente los altos ejecutivos se lo podían permitir.
El “Simon”, de IBM (Figura 5), fue el primer intento real de la industria tecnológica de crear un
teléfono “con algo más”, mediante la incorporación de servicios de voz y datos, por lo que el equipo
funcionaba como un teléfono móvil, un asistente digital personal (tenía calendario, libreta de direcciones, reloj mundial, calculadora, bloc de notas, correo electrónico y juegos), e incluso como una
máquina de fax.
Lo que resulta increíble, teniendo en cuenta que fue lanzado al mercado en 1993, es que contaba con una pantalla táctil para marcar los números, y el texto se ingresaba mediante un teclado
QWERTY, tal cual sucede hoy en día. Por supuesto, sus aspectos negativos eran su diseño, su tamaño y su peso, que dieron lugar a comparaciones humorísticas con un ladrillo. Su precio original fue
de 900 dólares, una cifra que en 1993 era una pequeña fortuna.
Figura 5. Simon de IBM (1993) y Palm Pilot (1996).
Tres años después aparece la Palm Pilot, no fue técnicamente un smartphone, pero fue muy importante ya que ayudo a popularizar el uso de dispositivos portátiles, y acostumbró a los usuarios a
la idea de poder llevar sus datos de un lado a otro. Fue un equipo muy utilizado por ejecutivos y
hombres de negocios.
El Pilot 1000 (Figura 5) contaba un procesador de 16MHz y una memoria de 128KB. Todo esto
a un precio de 300 dólares, una cifra que hoy puede parecer mucho, pero en ese entonces era tecnología de última generación, y fue el equipo que popularizó la sigla “PDA” (del inglés Asistente Digital Personal) en los Estados Unidos.
12
Desarrollo de una aplicación interactiva para el etiquetado de objetos
En 1998 el Nokia 9110 Communicator (Figura 6) fue un dispositivo con un diseño más similar
a lo que hoy entendemos como “smartphone”. Su pantalla no era color, y no se podía navegar por
Internet, pero tenía un teclado QWERTY deslizable que sirvió como modelo para los teléfonos actuales, como el Motorola Droid.
Figura 6. Nokia 9110 Communicator (1998) y BlackBerry 5810 (2002).
A fines de la década del ’90, la compañía canadiense Research In Motion (RIM) era conocida
gracias a sus pagers o bipers, que eran usados por decenas de millones de personas en todo el mundo. Pero a comienzos de 2002, RIM entró en el mercado de los teléfonos móviles, y lo hizo por la
puerta grande: su BlackBerry 5810 (Figura 6) era un teléfono con la capacidad de revisar correos
electrónicos y navegar por Internet.
El principal elemento negativo de este producto es que, para hablar por teléfono, era necesario
utilizar auriculares, ya que, por más increíble que parezca, el equipo no tenía altavoces. Esto fue así
durante 2 años, ya que en 2004 RIM lanzó su BlackBerry 6210, con la cual se podía hacer llamadas
sin accesorio adicional alguno.
Figura 7. Palm Treo 600(2003) y iPhone de Apple (2007).
13
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Treo 600 (Figura 7) fue el primer smartphone lanzado por Palm, tras adquirir al fabricante Handspring. Este móvil tenía la peculiaridad de soportar redes GSM y CDMA, tenía 32MB de memoria
RAM y un procesador de 144 MHz. Fue un equipo que se vendió muy bien, aunque fue lanzado en
2003, una época en la que Palm comenzaba su caída en popularidad.
El iPhone de Apple (Figura 7) es tan conocido, que no hace falta decir mucho al respecto. El
éxito que tuvo Apple con su primera experiencia en acceder al comercio de los móviles, fue alucinante. El producto vendió millones de unidades, en parte gracias a su pantalla táctil, y a que ofrecía
la mejor experiencia en Internet hasta ese momento. Han pasado 6 años, y todavía el iPhone es el
smartphone con el que los demás equipos son comparados.
En el mismo año en que Apple lanzó el iPhone, Google presentó su sistema operativo Android.
Este último lanzamiento no fue tan explosivo, ni causó tanto revuelo en ese entonces, pero hoy, 6
años después, podemos decir que Android es claramente exitoso, ya que es un éxito en ventas en
Estados Unidos y Europa, tiene miles de aplicaciones disponibles en la Tienda Android, y un futuro
más que prometedor. De hecho, recientemente se conoció el dato de que en los Estados Unidos hay
más móviles con Android que iPhones (por un lado, es injusto comparar un sistema operativo con
un equipo, pero bueno, la estadística no deja de ser contundente).
Si bien Android ya tenía su buen tiempo en el mercado, el Droid, de Motorola (Figura 8), fue el
primer móvil súper exitoso en utilizar la plataforma Android en los Estados Unidos. El equipo, que
también fue el primer móvil con Android en la red Verizon, vendió más de 1 millón de unidades en
sus primeros 74 días en el mercado.
Actualmente, la red WiMAX es la red inalámbrica más rápida en los Estados Unidos. Con el
lanzamiento del EVO 4G, de HTC (Figura 8), apareció un equipo que busca aprovechar el máximo
potencial de este tipo de conectividad. Además, el equipo se distinguía por su enorme pantalla táctil
de 4,3 pulgadas, que ofrece una resolución de 800 x 400 píxeles. Utiliza el sistema operativo Android.
Figura 8. Motorola Droid (2009) y Evo 4G de HTC (2010).
La revolución de los smartphones llegó en el 2011 de la mano de Apple , on el primer teléfono
con sistema operativo multitarea (IOS4), el iPhone 4; y de la mano de Google con el Google Nexus
S el primer dispositivo con Android en soportar NFC tanto a nivel de hardware como a nivel de software.
14
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Actualmente cada pocos meses salen nuevos modelos con mayor pantalla y resolución, mayor
velocidad de procesador, mejor chip gráfico, etc. como ejemplo de esta evolución se puede ver la
familia Samsung Galaxy S , SII, SIII y S4 (Figura 9). A nivel general el único talón de Aquiles que
presentan los smartphones es la batería, que aunque cada vez de mayor capacidad, esta limitada su
duración por el tamaño de las pantallas y su resolución. Los teléfonos con 4 núcleos y pantallas full
HD ya están aquí ,el próximo gran paso aun esta por llegar.
Figura 9. Familia Samsung Galaxy S, SII y SIII. El S4 salio al mercado en abril de 2013.
15
Desarrollo de una aplicación interactiva para el etiquetado de objetos
2.2. Sistemas operativos
Un sistema operativo móvil o SO móvil es un sistema operativo que controla un dispositivo móvil equivalente a como un PC utiliza Windows, Linux o MAC, es decir, controlan tanto los recursos
hardware como software, con la diferencia que estos SO móviles son más basicos y están más
orientados los formatos multimedia y a la conectividad inalámbrica. En la actualidad el mercado
smartphone se lo reparten 6 compañías con sus respectivos sistemas operativos. Estos sistemas operativos son Android, iOS, BlackBerry OS, Microsoft Windows Phone, Symbian y Bada.
• Android: Se trata de un SO basado en Linux que se ejecuta en Java, desarrollado inicialmente por Android Inc. y comprado por Google en 2005. En 2007 se lanzó el primer kit
para desarrolladores y desde entonces se ha ido actualizando el sistema estando disponible
incluso para dispositivos como tabletas.
• iOS: Sistema operativo desarrollado por Apple Inc. Inicialmente se diseñó para el dispositivo iPhone (Iphone OS) pero su uso se ha extendido a otros dispositivos propiedad de Apple
como iPod Touch, iPad y Apple TV.
• BlackBerry OS: Desarrollado por BlackBerry Ltd. para sus dispositivos BlackBerry. El sistema proporciona multitarea y diferentes métodos de entrada como trackwheel, trackball,
touchpad y pantallas táctiles.
• Microsoft Windows Phone: Sistema operativo propietario de Microsoft. Soporta pantallas
táctiles de alta resolución, integración con redes sociales y multiescritorio.
• Symbian OS: Desarrollado por Symbian Ltd. que fue fundada por la unión de varias empresas de telefonía móvil como Nokia, Motorola o Ericsson entre otras. Permite un uso eficiente de memoria y energía del dispositivo y soporta en tiempo real los protocolos de comunicación y telefonía. Además soporta múltiples lenguajes de programación como Symbian C+
+, Java ME, Open C, etc. Su historia acaba en febrero de 2013 con el anuncio de Nokia del
lanzamiento de su ultimo terminal Symbian el 808 PureView (ver Referencias).
• Bada: Sistema operativo desarrollado por Samsung que permite cualquiera de los kernel de
Linux. Sus aplicaciones son desarrolladas en C++ y ofrece varios controles de interfaz de
usuario a los desarrolladores. También soporta diversos sensores, GPS y detección de rostros. Su futuro más próximo es incierto aunque hay rumores de una posible fusión con Tizen
(ver Referencias).
• Otros: Otros SO que a día de hoy no forman parte de las estadísticas de sistemas operativos
más relevantes son Web Os, Maemo o LiMo, aunque estos dos últimos sistemas recientemente se han unido dando lugar a un sistema operativo llamado Tizen (ver Referencias).
Según el análisis de Gartner (ver Referencias) del cuarto cuatrimestre del año 2012, la venta de
dispositivos móviles en general ha disminuido un 1.7% mientras que la venta de smartphones ha aumentado un 38.8% respecto al mismo periodo de 2011. Dicho análisis (Tabla 3) también muestra el
aumento de ventas de smartphones con Android, iOS o Microsoft (Windows Phone), y un decremento de ventas de Symbian, Bada y RIM (BlackBerry). El principal motivo de caída de Symbian
se encuentra en la disminución de ventas de Nokia, principal portador de dicho sistema operativo.
16
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Worldwide Smartphone Sales to End Users by Operating System in 4Q12 (Thousands of Units)
Operating System
Android
4Q2012
4Q2012 Market
4Q2011
4Q2011 Market
Units
Share (%)
Units
Share (%)
144,720.3
69.7
77,054.2
51.3
43,457.4
20.9
35,456.0
23.6
Research in Motion
7,333.0
3.5
13,184.5
8.8
Microsoft
6,185.5
3.0
2,759.0
1.8
Bada
2,684.0
1.3
3,111.3
2.1
Symbian
2,569.1
1.2
17,458.4
11.6
713.1
0.3
1,166.5
0.8
iOS
Others
Total
207,662.4
100.0
150,189.9
100.0
Tabla 3. Ventas de smartphones por sistema operativo en el cuarto cuatrimestre de 2011-12.
Gartner nos muestra un incremento casi exponencial del sistema operativo Android alcanzando
unas ventas de 144.7 millones de unidades, seguido de iOS con 43.4 millones.
Técnicamente no existe el sistema operativo ideal, pero comparándolos entre sí se pueden ver
las ventajas de unos y otros y se puede evaluar para cada caso que sistema operativo puede resultar
más adecuado. Dos de los parámetros más importantes en la elección del sistema operativo son el
interfaz de usuario y el conjunto de aplicaciones que tenga disponibles.
Si comparamos el interfaz de usuario de los distintos sistemas operativos disponibles en el mercado tanto iOS como Android y Windows Phone 7 ofrecen un apartado visual bonito, fluido y con
buena respuesta, aunque de los tres sistemas Android es el único que ofrece una personalización total por ser un sistema operativo libre.
Si evaluamos la cantidad de aplicaciones, tanto por calidad como por cantidad que hay detrás de
cada sistema operativo, el mejor sistema seria iOS seguido cada vez más de cerca por Android y un
poco más lejos por el Windows Marketplace.
Por último se debe analizar la funcionalidad de los sistemas. Si bien inicialmente tanto iPhone
como Windows Mobile arrancaron bastante escasos de funcionalidad, con sus nuevas actualizaciones iOS 6 y Windows Phone 8 parecen estar bastante completos aunque la multitarea está limitada.
En éste aspecto Android es el más completo.
Actualmente y a tenor de los datos analizados, se ha considerado que Android es el sistema operativo que ofrece una mejor funcionalidad y experiencia de usuario además de ofrecer un buen soporte a los desarrolladores ya que es software libre, lo cual se ha tenido en cuenta a la hora de desa rrollar la aplicación.
17
Desarrollo de una aplicación interactiva para el etiquetado de objetos
2.3. Aplicaciones y juegos
Hoy en día las aplicaciones son un aspecto básico de un smartphone y posiblemente un sistema
operativo que no posea un buen catálogo de aplicaciones se quede fuera de la lucha por el mercado
móvil. La naturaleza de las aplicaciones es muy variada, desde lectores de periódicos hasta juegos
pasando por aplicaciones GPS o redes sociales por poner sólo unos ejemplo.
En los diferentes stores de cada plataforma, la cantidad de aplicaciones disponible aumenta cada
día que pasa de forma que se convierten en un elemento fundamental de cada sistema operativo.
Este incremento demuestra que los smartphones son los dispositivos llamados a suceder al teléfono
convencional.
Actualmente cada uno de los sistemas operativos destinados a ser utilizados en un smartphone
posee su propio store (tienda) de aplicaciones a los cuales se puede acceder a través del propio móvil y en algunos casos incluso desde el PC.
•
Google Play: Store del sistema operativo Android. Su lanzamiento se produjo en octubre de
2008 y cuatro años y medio después el número de aplicaciones activa es mayor de 800.000.
•
iOS App Store: Store de Apple. Su lanzamiento se produjo en julio de 2008 y en abril de
2013 el número de aplicaciones activas es similar al de Google Play pero con 45,000 millones de descargas.
•
Windows phone Store: Su lanzamiento se produjo en octubre de 2010 sustituyendo a Windows phone Marketplace. Tres años más tarde, en febrero de 2013, el número de aplicaciones es 135.000.
•
App World: Se trata del store de BlackBerry OS. Su salida al mercado se produjo en abril
de 2009 y en marzo de 2013 disponía de más de 200.000 aplicaciones.
•
Nokia Store: Store de Symbian OS que inicialmente se llamó Nokia Ovi Store. Nació en
mayo de 2009 y se anuncio su abandono en mayo de 2011, ya tenía más de 100.000 aplicaciones.
Figura 10. Descargas e ingresos de App's de iOS App Store y GooglePlay.
18
Desarrollo de una aplicación interactiva para el etiquetado de objetos
En la anterior imagen (Figura 10), extraida del blog de App Annie (ver Referencias), observamos como las descargas de Google Play ya son cerca del 90% de las del iOS App Store en el primer
cuatrimestre de 2013. Por otro lado la iOS App Store ha generado 2,6 veces más ingresos por aplicaciones que Google Play en el mismo periodo.
Existen hay muchos tipos de aplicaciones (negocios, bolsa, meteorológicas, deportivas, etc.)
pero centrándose en el market de Android se pueden clasificar en dos grandes grupos: aplicaciones
y juegos.
•
Juegos: Hay gran variedad de tipos: arcade, carreras, deportes, cartas, puzzle e incluso widgets están incluidos en esta categoría.
•
Aplicaciones: Cualquier aplicación que no sea juego ni widget, es decir, aplicaciones relacionadas con compras, redes sociales, finanzas, medicina, etc.
Por lo general, tanto para el market de Android como para cualquier otra tienda de aplicaciones
de otro sistema operativo, las aplicaciones que más éxito suelen tener son aquellas gratuitas. Muchas de ellas sirven como inspiración e incluso han marcado tendencia. No todas son exclusivas de
Android, algunos juegos como Angry Birds son originales de iOS y han sido adaptados a este sistema operativo. Evaluando diferentes listas de internet sobre juegos y aplicaciones gratuitas más populares se ha elaborado otra con aquellos que estan teniendo más éxito actualmente a nivel español:
•
Angry Birds: Juego que consiste en que los pájaros recuperen los huevos que robaron los
cerdos. El 9 de mayo de 2012 se alcanzaron los 1.000 millones de descargas.
•
Triviados: Juego de preguntas y respuestas, competición online contra tus amigos. Adaptación del juego de mesa Trivial de siempre. Más de 7.000 preguntas.
•
Wassap: Aplicación de mensajería, utiliza 3G o wifi para enviar y recibir mensajes, fotos,
notas de audio y vídeo sin coste alguno. USD $0,99/año después del primer año.
•
Line: Aplicación de comunicaciones que te permite hacer llamadas de voz y enviar mensajes en cualquier momento y lugar gratis. 150 millones de usuarios en 230 países.
•
Facebook: Aplicación android para la popular red social. Mantente en contacto con tus amigos, ve que están haciendo, comparte actualizaciones de estado, fotos y vídeos.
•
Pou: Juego de Mascota alienígena , recuerda vagamente a los “Tamagochi” de otra época.
Aliméntalo, límpialo juega con él y obsérvalo crecer mientras sube de nivel.
•
4 fotos 1 palabra: Juego de palabras, cada acertijo contiene cuatro fotos que tienen algo en
común. Lo más similar a la aplicación que vamos a realizar.
•
Apalabrados: Juego online. Adaptación del juego de mesa scrabble. Juego del año y revelación del año 2012 en la AppStore.
19
Desarrollo de una aplicación interactiva para el etiquetado de objetos
2.4. Android
Para un buen desarrollo y realización de programas para teléfonos móviles con tecnología Android, hay que conocer y tener experiencia en dos conceptos muy importantes para dicho desarrollo,
como es el conocimiento del sistema operativo Android y los diferentes lenguajes de programación
para dicho sistema operativo.
Android es un sistema operativo completo basado en el kernel de Linux ® V2.6. Inicialmente, el
destino de la implementación de Android fueron los teléfonos móviles, incluyendo teléfonos inteligentes o smartphones. Sin embargo, toda la gama de Android tiene el potencial de extenderse más
allá del mercado de teléfonos móviles como ordenadores portátiles, netbooks, tabletas, Google TV,
relojes de pulsera, auriculares y otros dispositivos.
La plataforma Android es el producto de la Handset Alliance abierta , un consorcio de compañías de hardware, software y telecomunicaciones para avanzar en los estándares abiertos de los dispositivos móviles. El grupo, liderado por Google, incluye operadores de telefonía móvil, fabricantes
de auriculares, dispositivos y componentes, empresas de software, proveedores de plataformas, y las
empresas de comercialización.
Las características del sistema operativo Android son las siguientes:
•
Cuenta con un framework de aplicaciones que permite reutilizar o sustituir las aplicaciones
existentes.
•
Cuenta con una máquina virtual especialmente optimizada para dispositivos móviles conocida como Dalvik VM.
•
Navegador integrado basado en el motor de código abierto WebKit.
•
Capaz de procesar gráficos en 2D (gracias a la librería SGL) y gráficos 3D basados en la especificación OpenGL ES 1.X/2.0 (dependiendo de la versión de Android).
•
Soporte para el almacenamiento de datos estructurados mediante las librerías SQLite.
•
Soporte de múltiples formatos multimedia tanto de audio como vídeo o imagen (MPEG4,
H.264, MP3, AAC, AMR, JPG, PNG, GIF).
•
Telefonía GSM (dependiente del hardware).
•
Comunicaciones siguiendo los protocolos estándar Bluetooth, EDGE, 3G, y Wifi.
•
Soporte de múltiples dispositivos hardware como cámaras, GPS, brújula o acelerómetros
(dependiente del hardware).
•
Potente entrono de desarrollo que incluye un emulador, herramientas de depuración o un
complemento par el IDE Eclipse.
•
Pantalla Multi-táctil.
•
Google Play permite que los desarrolladores pongan sus aplicaciones, gratuitas o de pago,
en el mercado a través de esta aplicación accesible desde la mayoría de los teléfonos con
Android.
20
Desarrollo de una aplicación interactiva para el etiquetado de objetos
2.4.1. Arquitectura
Los arquitectura del sistema operativo de Android, se describe a continuación y se muestra en la
siguiente imagen (Figura 11). El diagrama de la arquitectura de Android se toma del sitio oficial de
Android developers (ver Referencias), además de que puede encontrarse en cualquier libro serio sobre de Android, y la documentación de diversas fuentes (ver Referencias).
Figura 11. Arquitectura de Android.
El núcleo Linux: El núcleo de Android está formado por el sistema operativo Linux versión
2.6. Esta capa proporciona servicios como la seguridad, el manejo de la memoria, el multiproceso,
la pila de protocolos y el soporte de drivers para dispositivos. Esta capa del modelo actúa como
capa de abstracción entre el hardware y el resto de la pila. Por lo tanto, es la única que es dependiente del hardware.
Runtime de Android: Está basado en el concepto de máquina virtual utilizado en Java. Dado
las limitaciones de los dispositivos donde ha de correr Android (poca memoria y procesador limitado) no fue posible utilizar una máquina virtual Java estándar. Google tomó la decisión de crear una
nueva, la máquina virtual Dalvik, que respondiera mejor a estas limitaciones.
Algunas características de la máquina virtual Dalvik que facilitan esta optimización de recursos
son: que ejecuta ficheros Dalvik ejecutables (.dex), formato optimizado para ahorrar memoria. Además, está basada en registros. Cada aplicación corre en su propio proceso Linux con su propia ins21
Desarrollo de una aplicación interactiva para el etiquetado de objetos
tancia de la máquina virtual Dalvik. Delega al kernel de Linux algunas funciones como threading y
el manejo de la memoria a bajo nivel.
También se incluye en el Runtime de Android el “core libraries” con la mayoría de las librerías
disponibles en el lenguaje Java.
Librerías nativas: Incluye un conjunto de librerías en C/C++ usadas en varios componentes de
Android. Están compiladas en código nativo del procesador. Muchas de las librerías utilizan proyectos de código abierto. Algunas de estas librerías son:
•
System C library: una derivación de la librería BSD de C estándar (libc), adaptada para dispositivos embebidos basados en Linux.
•
Media Framework: librería basada en PacketVideo's OpenCORE; soporta codecs de reproducción y grabación de multitud de formatos de audio vídeo e imágenes MPEG4, H.264,
MP3, AAC, AMR, JPG y PNG.
•
Surface Manager: maneja el acceso al subsistema de representación gráfica en 2D y 3D.
•
WebKit: soporta un moderno navegador web utilizado en el navegador Android y en la vista
webview. Se trata de la misma librería que utiliza Google Chrome y Safari de Apple.
•
SGL: motor de gráficos 2D.
•
Librerías 3D: implementación basada en OpenGL ES 1.0 API. Las librerías utilizan el acelerador hardware 3D si está disponible, o el software altamente optimizado de proyección
3D.
•
FreeType: fuentes en bitmap y renderizado vectorial.
•
SQLite: potente y ligero motor de bases de datos relacionales disponible para todas las aplicaciones.
•
SSL: proporciona servicios de encriptación Secure Socket Layer.
También se incluye en el Runtime de Android el “core libraries” con la mayoría de las librerías
disponibles en el lenguaje Java.
Entorno de aplicación: Proporciona una plataforma de desarrollo libre para aplicaciones con
gran riqueza e innovaciones (sensores, localización, servicios, barra de notificaciones).
Esta capa ha sido diseñada para simplificar la reutilización de componentes. Las aplicaciones
pueden publicar sus capacidades y otras pueden hacer uso de ellas (sujetas a las restricciones de seguridad). Este mismo mecanismo permite a los usuarios reemplazar componentes.
Una de las mayores fortalezas del entorno de aplicación de Android es que se aprovecha el lenguaje de programación Java. El SDK de Android no acaba de ofrecer todo lo disponible para su estándar del entorno de ejecución Java (JRE), pero es compatible con una fracción muy significativa
de la misma.
Los servicios más importantes que incluye son:
•
Views: extenso conjunto de vistas, (parte visual de los componentes).
22
Desarrollo de una aplicación interactiva para el etiquetado de objetos
•
Resource Manager: proporciona acceso a recursos que no son en código.
•
Activity Manager: maneja el ciclo de vida de las aplicaciones y proporciona un sistema de
navegación entre ellas.
•
Notification Manager: permite a las aplicaciones mostrar alertas personalizadas en la barra
de estado.
•
Content Providers: mecanismo sencillo para acceder a datos de otras aplicaciones (como
los contactos).
Aplicaciones: Este nivel está formado por el conjunto de aplicaciones instaladas en una máquina Android. Todas las aplicaciones han de correr en la máquina virtual Dalvik para garantizar la seguridad del sistema.
Normalmente las aplicaciones Android están escritas en Java. Para desarrollar aplicaciones en
Java podemos utilizar el Android SDK. Existe otra opción consistente en desarrollar las aplicaciones utilizando C/C++. Para esta opción podemos utilizar el Android NDK (Native Development
Kit).
23
Desarrollo de una aplicación interactiva para el etiquetado de objetos
2.4.2. Java (ver Referencias)
Java es un lenguaje de programación orientado a objetos, desarrollado por Sun Microsystems a
principios de los años 90. El lenguaje en sí mismo toma mucha de su sintaxis de C y C++, pero tie ne un modelo de objetos más simple y elimina herramientas de bajo nivel, que suelen inducir a muchos errores, como la manipulación directa de punteros o memoria.
Las aplicaciones Java están típicamente compiladas en un bytecode, aunque la compilación en
código máquina nativo también es posible. En el tiempo de ejecución, el bytecode es normalmente
interpretado o compilado a código nativo para la ejecución, aunque la ejecución directa por hardware del bytecode por un procesador Java también es posible.
La implementación original y de referencia del compilador, la máquina virtual y las bibliotecas
de clases de Java fueron desarrolladas por Sun Microsystems en 1995. Desde entonces, Sun ha controlado las especificaciones, el desarrollo y evolución del lenguaje a través del Java Community
Process, si bien otros han desarrollado también implementaciones alternativas de estas tecnologías
de Sun, algunas incluso bajo licencias de software libre.
Entre diciembre de 2006 y mayo de 2007, Sun Microsystems liberó la mayor parte de sus tecnologías Java bajo la licencia GNU GPL, de acuerdo con las especificaciones del Java Community
Process, de tal forma que prácticamente todo el Java de Sun es ahora software libre (aunque la biblioteca de clases de Sun que se requiere para ejecutar los programas Java aún no lo es).
El lenguaje Java se creó con cinco objetivos principales:
1. Debería usar la metodología de la programación orientada a objetos.
2. Debería permitir la ejecución de un mismo programa en múltiples sistemas
operativos.
3. Debería incluir por defecto soporte para trabajo en red.
4. Debería diseñarse para ejecutar código en sistemas remotos de forma segura.
5. Debería ser fácil de usar y tomar lo mejor de otros lenguajes orientados a
objetos, como C++.
24
Desarrollo de una aplicación interactiva para el etiquetado de objetos
2.4.3. Aplicaciones
En éste apartado vamos a centrarnos específicamente en los distintos tipos de componentes de
software con los que podremos construir una aplicación Android. Repasemos los componentes principales que pueden formar parte de una aplicación Android (ver Referencias).
Activity: Las actividades (activities) representan el componente principal de la interfaz gráfica
de una aplicación Android. Se puede pensar en una actividad como el elemento análogo a una ventana o pantalla en cualquier otro lenguaje visual.
View: Las vistas (view) son los componentes básicos con los que se construye la interfaz gráfica
de la aplicación, análogo por ejemplo a los controles de Java o .NET. De inicio, Android pone a
nuestra disposición una gran cantidad de controles básicos, como cuadros de texto, botones, listas
desplegables o imágenes, aunque también existe la posibilidad de extender la funcionalidad de estos
controles básicos o crear nuestros propios controles personalizados.
Service: Los servicios (service) son componentes sin interfaz gráfica que se ejecutan en segundo plano. En concepto, son similares a los servicios presentes en cualquier otro sistema operativo.
Los servicios pueden realizar cualquier tipo de acciones, por ejemplo actualizar datos, lanzar notificaciones, o incluso mostrar elementos visuales (p.ej. actividades) si se necesita en algún momento
la interacción con el usuario.
Content Provider: Un proveedor de contenidos (content provider) es el mecanismo que se ha
definido en Android para compartir datos entre aplicaciones. Mediante estos componentes es posible compartir determinados datos de nuestra aplicación sin mostrar detalles sobre su almacenamiento interno, su estructura, o su implementación. De la misma forma, nuestra aplicación podrá acceder
a los datos de otra a través de los content provider que se hayan definido.
Broadcast Receiver: Un broadcast receiver es un componente destinado a detectar y reaccionar
ante determinados mensajes o eventos globales generados por el sistema (por ejemplo: “Batería
baja”, “SMS recibido”, “Tarjeta SD insertada”, …) o por otras aplicaciones (cualquier aplicación
puede generar mensajes (intents, en terminología Android) broadcast, es decir, no dirigidos a una
aplicación concreta sino a cualquiera que quiera escucharlo).
Widget: Los widgets son elementos visuales, normalmente interactivos, que pueden mostrarse
en la pantalla principal (home screen) del dispositivo Android y recibir actualizaciones periódicas.
Permiten mostrar información de la aplicación al usuario directamente sobre la pantalla principal.
Intent: Un intent es el elemento básico de comunicación entre los distintos componentes Android que hemos descrito anteriormente. Se pueden entender como los mensajes o peticiones que
son enviados entre los distintos componentes de una aplicación o entre distintas aplicaciones. Mediante un intent se puede mostrar una actividad desde cualquier otra, iniciar un servicio, enviar un
mensaje broadcast, iniciar otra aplicación, etc.
La forma más sencilla de empezar a desarrollar aplicaciones de Android es descargar el paquete
ADT, que incluye una versión del IDE de Eclipse con el ADT incorporado, para no extendernos
más en su instalación y configuración, nos remitiremos al anexo o nos dirigiremos a la pagina web :
http://developer.android.com/sdk/installingng/bundle.html
25
Desarrollo de una aplicación interactiva para el etiquetado de objetos
3. Análisis
En la fase de análisis, iremos transformando los requisitos a un lenguaje más afín al desarrollador, se trata de dar una visión integral tras estructurar y analizar los casos de uso y requisitos que se
deben cumplir en nuestro sistema. Para lograr este objetivo deberemos tomar decisiones para facilitar las tareas a la hora de abordar la fase de diseño. Al finalizar se describe como fluye la información por el sistema mediante diagramas de flujo.
Antes de empezar vamos a darle nombre a nuestra aplicación, recordemos que es lo que queremos obtener: Una aplicación interactiva para el etiquetado de objetos, así pues tomando la primera
letra de cada palabra obtenemos UAIEO, que es como se llamará nuestro proyecto en Eclipse. Aunque es difícil de pronunciar, resulta elegante la manera de mostrar las cinco vocales del alfabeto.
26
Desarrollo de una aplicación interactiva para el etiquetado de objetos
3.1. Requisitos
En este apartado se detallan todas las condiciones que tiene que cumplir la aplicación, para que
su funcionamiento pueda considerarse correcto. Es una etapa dinámica, pues durante el desarrollo
pueden aparecer nuevos requisitos y la exclusión o sustitución de otros. Algunos de estos requisitos
suelen ser, a priori, desconocidos por el proyectando. Así pues, durante la implementación de la interfaz gráfica de las aplicaciones, surgen variados cambios y nuevas ideas por parte de los implicados. Se puede decir que la etapa de requisitos es el contrato entre el tutor y el alumno.
Llamaremos requisitos funcionales a las acciones que deberá ser capaz de desempeñar la aplicación y requisitos no funcionales a otras posibles propiedades del producto en sí. Alguno de los requisitos se podría dividir en varios, se ha tomado la decisión de mantenerlos en un sólo porque son
similares unos a otros y esto mejora la compresión de todos los requisitos. Se muestra en la Tabla 4.
REQUISITOS FUNCIONALES
REQUISITOS USUARIO
RU 1
EL USUARIO PODRÁ INICIAR UNA PARTIDA DE LA APLICACION UAIEO
RU 2
EL USUARIO PODRÁ RESPONDER A LAS PREGUNTAS
RU 3
EL USUARIO PODRÁ RESPONDER A UNA OPCION ENTRE DOS POSIBILIDADES
RU 4
EL USUARIO PODRÁ RESPONDER A DIEZ PREGUNTAS CONSECUTIVAS
RU 5
EL USUARIO PODRÁ CONSULTAR LAS ESTADISTICAS DE LAS PARTIDAS
REQUISITOS APLICACIÓN
RA 1
LA APLICACIÓN DESCARGARA EL ARCHIVO DE CONFIGURACION
RA 2
LA APLICACIÓN DESCARGARA LAS IMAGENES
RA 3
LA APLICACIÓN GUARDARÁ LAS ESTADISTICAS DE LAS PARTIDAS
RA 4
LA APLICACIÓN GUARADARÁ LOS RESULTADOS DEL USUARIO
REQUISITOS NO FUNCIONALES
REQUISITOS TERMINAL
RT 1
EL TERMINAL TENDRÁ ACCESO A INTERNET
RT 2
EL TERMINAL TENDRÁ VERSION NECESARIA DE ANDROID O SUPERIOR
REQUISITOS SERVIDOR
RS 1
EL SERVIDOR PERMITE EL ACCESO MEDIANTE LOS PERMISOS OPORTUNOS
Tabla 4. Tabla de Requisitos.
27
Desarrollo de una aplicación interactiva para el etiquetado de objetos
3.2. Casos de uso
Durante este apartado se especificarán los diferentes casos de uso planteados para la aplicación
que va a ser desarrollada. Cada caso de uso va a ser especificado de forma gráfica con un diagrama
que muestre la interacción del usuario con el sistema en el caso de la Figura 12 y con un diagrama
para la interacción entre la aplicación y el servidor de imágenes en el caso de la Figura 13.
APLICACIÓN
Iniciar Partida
Responder Pregunta
Consultar Puntuación
USUARIO
Figura 12. Casos de uso para el usuario de la aplicación.
SERVIDOR
Descarga Archivo
de configuración
Descarga Imagenes
Actualizar Resultados
APLICACIÓN
Figura 13. Casos de uso para la aplicación al conectar al servidor.
28
Desarrollo de una aplicación interactiva para el etiquetado de objetos
3.3. Flujo de trabajo
Los siguiente diagramas de actividad, permiten reflejar la secuencia concreta en la que suceden
los procesos, se describe cómo fluye la información, permitiéndonos visualizar el comportamiento
dinámico del sistema. En nuestro caso, contamos con seis diagramas de actividad, que corresponden
con todos los casos de uso, los seis se muestran y explican en los siguientes apartados.
Iniciar partida: Una vez el usuario inicia partida la aplicación descarga el archivo de configuración y muestra la pantalla de inicio, procesa el archivo extrayendo la información de las imágenes
que debe mostrar, con esta información descarga la imagen que debe mostrar en la pantalla de inicio, a continuación carga esta imagen en la pantalla de inicio. Ver Figura 14.
INICIAR
PARTIDA
DESCARGA
ARCHIVO
CONFIGURACION
MUESTRA
PANTALLA
DE INICIO
PROCESAR
ARCHIVO
DESCARGAR
IMAGEN
ESPERA
CARGAR
IMAGEN EN
PANTALLA
DE INICIO
Figura 14. Diagrama de Actividad: Iniciar Partida.
Responder pregunta: El usuario pulsa el botón correspondiente a su respuesta, se procesa la
respuesta comparándola con la correcta y almacenando su resultado , simultáneamente actualizamos
el resultado en el servidor, si es la ultima imagen se muestra la puntuación y finaliza la partida , o
sino, carga la siguiente imagen y vuelve a plantear la pregunta. Ver Figura 15.
RESPONDER
PREGUNTA
PROCESAR
RESPUESTA
ACTUALIZAR
RESULTADOS
FIN?
CARGAR
IMAGEN EN
PANTALLA
DE INICIO
DESCARGAR
IMAGEN
CONSULTAR
PUNTUACION
FIN
Figura 15. Diagrama de Actividad: Responder Pregunta.
29
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Consultar estadísticas: Se cargan las puntuaciones que se han ido almacenando durante la partida y se muestran en la pantalla de puntuación, a continuación podemos poner la puntuación a cero
o salir. Ver Figura 16.
MUESTRA
PANTALLA
PUNTUACIÓN
CONSULTAR
PUNTUACIÓN
CARGAR
PUNTUACIÓN
SALIR
FIN
LIMPIAR
LIMPIAR
PUNTUACIÓN
Figura 16. Diagrama de Actividad: Consultar Puntuación.
Descarga archivo de configuración: Realizamos una conexión al servidor que contiene el archivo de configuración y lo descargamos en el terminal, finalizamos. Posteriormente se procesa el
archivo. Ver Figura 17.
DESCARGAR
ARCHIVO DE
CONFIGURACIÓN
CONEXION
SERVIDOR
DESCARGA
ARCHIVO
FIN
Figura 17. Diagrama de Actividad: Descargar Archivo Configuración.
Descarga imágenes: Realizamos una conexión al servidor que contiene las imágenes y descargamos la imagen correspondiente en el terminal, finalizamos. Posteriormente se mostrara la imagen.
Ver Figura 18.
DESCARGAR
IMAGENES
CONEXION
SERVIDOR
DESCARGA
IMAGEN
FIN
Figura 18. Diagrama de Actividad: Descargar Imágenes.
Actualizar resultados: Realizamos una conexión al servidor que contiene el archivo resultado y
cargamos la los resultados almacenados previamente en el terminal, finalizamos. Ver Figura 19.
ACTUALIZAR
RESULTADOS
CONEXION
SERVIDOR
CARGA
RESULTADO
FIN
Figura 19. Diagrama de Actividad: Actualizar Resultados.
30
Desarrollo de una aplicación interactiva para el etiquetado de objetos
4. Diseño
En la fase de diseño del sistema queremos transformar el modelo de análisis para ir acercándonos cada vez más al de implementación, es decir, hacer más formal el modelo de análisis. El objetivo es realizar un diseño correcto para evitar rectificaciones en la fase de implementación y por lo
tanto cumplir los plazos iniciales de entrega del proyecto. Concretamente se van a comentar los detalles relacionados con el diseño arquitectónico del sistema, el diseño de las interfaces de usuario,
las carpetas del proyecto y las relaciones entre clases.
31
Desarrollo de una aplicación interactiva para el etiquetado de objetos
4.1. Arquitectura
La aplicación desarrollada se sirve en una arquitectura Cliente-Servidor donde una entidad cliente realiza peticiones a otra entidad servidora y esta le devuelve una respuesta. En este caso particular, la entidad cliente será el dispositivo móvil que ejecuta la aplicación de Android y que realizará
las peticiones a la aplicación servidora a través de la red. En la siguiente figura se muestra un esquema de la arquitectura propuesta identificando las entidades cliente y servidor y mostrando un ejemplo de comunicación entre las mismas:
SERVIDOR
CLIENTE
PETICIÓN HTTPGET
IMAGEN
PROCESO
Figura 20. Diseño Arquitectónico del Sistema.
La estructura del servidor se ha realizado de la forma más simple posible, esto es mediante una
carpeta en la dirección web docente del tutor: http://www.vision.uji.es/~montoliu/UAIEO/IMG, que
contendrá un archivo de texto y las imágenes. El archivo contiene el nombre de cada imagen y su
etiqueta (hombre o mujer), tiene una linea por cada imagen. Mediante una petición web o http obtendremos estos archivos. Para actualizar resultados crearemos un script.php en el servidor, que recogerá todas las peticiones (envio de resultados) que hagamos, estas peticiones contendrá como parámetros los dos datos que nos interesa almacenar, el nombre de la imagen y su etiquetado por parte
del usuario, por ejemplo: imagen87265.jpg y H.
Esta arquitectura le permite al investigador del grupo de visión cambiar el grupo de imágenes a
analizar de forma cómoda, puesto que tan solo requiere sustituir las imágenes de la carpeta y el archivo de texto.
32
Desarrollo de una aplicación interactiva para el etiquetado de objetos
4.2. Interfaz
En esta sección se muestran los diferentes diseños que fueron realizados para cada pantalla de la
aplicación. En cada pantalla se explica cómo el usuario puede interactuar con las mismas y cuál es
el resultado de sus acciones.
Todas las pantallas de la aplicación se muestran en posición vertical por dos motivos. El primero
se debe a la posición natural del smartphone en la mano, siempre o casi siempre nos encontraremos
utilizando el teléfono en esta posición. El segundo motivo está relacionado con la aplicación, para
jugar la partida resulta más cómodo tener la imagen arriba y los botones abajo, conformando un
conjunto vertical, otras aplicaciones similares utilizan esta disposición.
La Figura 21 muestra el diseño de la pantalla del menú principal, mostrado nada más arrancar la
aplicación en el terminal. En dicha pantalla aparece los logos de la aplicación y la universidad, un
texto de bienvenida y tres botones. Las imágenes y los textos van a ser siempre las mismos por lo
tanto se almacenarán en la aplicación como un recurso.
LOGO
UAIEO
LOGO
UJI
INICIAR PARTIDA
PUNTUACION
SALIR
Figura 21. Diseño de la Pantalla del menú principal.
Si se pulsa el primer botón, iniciar partida, se inicia la partida, con el segundo botón , puntuación, podremos ver unas estadísticas de las partidas jugadas y con el tercer botón, salir,saldremos de
la aplicación, así mismo también se puede salir con el botón de retroceso del móvil .
33
Desarrollo de una aplicación interactiva para el etiquetado de objetos
La Figura 22 muestra el diseño de la pantalla de inicio, se muestra esta pantalla al pulsar el primer botón, iniciar partida de la pantalla del menú principal. En dicha pantalla aparece un texto preguntando acerca de la imagen, la imagen descargada y dos botones. La pregunta va a ser siempre la
misma por lo tanto se almacenará como recurso en la aplicación.
Al mostrar esta pantalla la aplicación conectará con el servidor para descargar el archivo de configuración, una vez procesado el archivo, tendremos la lista de imágenes que debemos descargar y
la respuesta correcta correspondiente a cada imagen, a continuación la aplicación se conectará nuevamente con el servidor para descargar la primera imagen y mostrarla en pantalla. Tal como se ha
descrito al crear esta pantalla nos conectaremos dos veces al servidor, la primera vez para la descarga del archivo de configuración, proceso que se realizara sólo una vez en todo el ciclo de la partida,
y la segunda vez para la descarga de la primera imagen, proceso que se repetirá para cada imagen
que deseemos mostrar.
PREGUNTA
IMAGEN
BOTON 1
BOTON 2
Figura 22. Diseño de la Pantalla de Inicio.
Tanto si se pulsa el botón 1 como si se pulsa el botón 2 la aplicación evaluará si se ha llegado a
la ultima imagen, de ser así se mostrará la pantalla de puntuación. De no ser así la aplicación carga rá una nueva imagen sustituyendo a la anterior como se ha descrito anteriormente.
En todo caso al pulsar cualquiera de los dos botones se almacenará el resultado elegido por el
usuario y se conectará con el servidor para cargar esta información. También se mostrará si el resultado a sido correcto o incorrecto, este dato se guarda para las estadísticas y puntuaciones.
34
Desarrollo de una aplicación interactiva para el etiquetado de objetos
La Figura 23 muestra la pantalla de puntuación, se muestra esta pantalla al pulsar el segundo
botón, puntuación, de la pantalla del menú principal. También accederemos a esta pantalla al acabar
de etiquetar las 10 imágenes de la pantalla de inicio. En dicha pantalla aparece un texto con las estadísticas que se consideran más relevantes y dos botones. Las estadísticas se han ido generando en la
pantalla de iniciar partida y están almacenadas en la aplicación.
PUNTUACION
LIMPIAR
SALIR
Figura 23. Diseño de la Pantalla de Puntuación.
Al pulsar el primer botón , limpiar, pondremos las estadísticas a cero. Con el segundo botón podremos salir de esta pantalla para volver al menú principal. Igualmente se puede volver al menú
principal pulsando la tecla retroceder de nuestro terminal.
Con estas tres pantallas otorgamos una solución a todos los requerimientos y casos de uso expuestos en la fase de análisis:
•
Pantalla de menú principal.
•
Pantalla de inicio.
•
Pantalla de puntuación.
35
Desarrollo de una aplicación interactiva para el etiquetado de objetos
4.3. Carpetas del proyecto
Cuando se crea un proyecto Android en Eclipse se genera automáticamente una estructura en
carpetas que sirve para poder desarrollar la aplicación de forma ordenada. La organización de las
carpetas de la aplicación se muestra en la siguiente imagen (Figura 24):
Figura 24. Carpetas del Proyecto en Eclipse.
36
Desarrollo de una aplicación interactiva para el etiquetado de objetos
A continuación se describen el contenido y el cometido de cada una de las carpetas (ver Referencias):
assets /: Esta vacía, se puede utilizar para almacenar archivos RAW (Archivos de sonido, texturas, datos). Los archivos guardados aquí se compilarían dentro de la aplicación .apk con sus extensiones, no estarán indexados ni compilados de modo que el acceso sería a través de su ruta.
bin /: Esta carpeta como la carpeta gen se genera automáticamente, y la utiliza el compilador
para preparar los archivos para el empaquetado final en forma de APK. Tanto esta carpeta como la
gen / la podemos borrar si es necesario ya que se generaran de nuevo al compilar, y cabe considerar
excluir estas carpetas si utilizamos un sistema de repositorio, ya que al importar el proyecto de nue vo sucederá lo mismo, se generan automáticamente.
gen /: Esta es una carpeta de código fuente que va a contener archivos de Java como la carpeta
src, pero no deberemos agregar o modificar los archivos contenidos ya que son generados automáticamente por el plugin de Android a partir del contenido de la carpeta res. Aquí encontramos el archivo R que es el archivo de java que servirá para indexar e identificar a todos y cada uno de los recursos de la carpeta res.
libs /: Esta pensada para contener las librerías que vamos a enlazar a nuestro proyecto, por lo general se van a depositar aquí los archivos JAR empaquetados de librerías portables.
res /: Esa es una carpeta más compleja ya que se subdivide en múltiples subdirectorios, pero
para resumir, diremos que va a contener lo que en el mundo de Android llamaremos recursos. Ya
veremos que existen distintos tipos de recursos como imágenes, textos, layouts, y que podemos administrar aquí como se van gestionar los recursos para dispositivos con características y configuraciones distintas (densidad de píxel, localización, etc…).
Hay que tener en cuenta que los archivos que vayamos a crear como recursos deben seguir una
nomenclatura determinada ya que no se va a permitir que el nombre del archivo empiece por un valor numérico por poner un ejemplo, o que contenga mayúsculas. Contiene :
•
drawable/: down.jpg, ic_launcher.jpg.
•
layouts/: p_iniciar.xml, p_puntuacion.xml, p_uaieo.xml.
•
values/: strings.xml.
src /: Esta es por defecto la carpeta donde se depositará el código fuente Java, y como en los
proyectos para escritorio puede llamarse de otro modo si nos interesa o podemos disponer de distintas carpetas fuente, a veces puede ser un modo de enlazar con librerías.
Todo el código que pongamos en las carpetas fuente será compilado cuando se requiera. Y también como en los proyectos tradicionales de java el código se organizará en carpetas que resultaran
en paquetes. Contiene:
•
Paquete rubert.uji.uaieo: Imagen.java, Iniciar.java, Puntuación.java, Uaieo.java.
AndroidManifest.xml: Aunque no sea una carpeta podemos decir que este es el archivo principal y que todas las aplicaciones o librerías deben contener en la raíz del proyecto. En este, se definen las características del proyecto como el nombre, paquete, los permisos que va a requerir la aplicación o a versión mínima de la Api de Android. También es en este archivo donde se describe los
componentes de la aplicación.
37
Desarrollo de una aplicación interactiva para el etiquetado de objetos
4.4. Diagrama de Clases
Un diagrama de clases es un tipo de diagrama estático que describe la estructura de un sistema
mostrando sus clases, atributos y las relaciones entre ellos. Los diagramas de clases son utilizados
durante el proceso de análisis y diseño de los sistemas, donde se crea el diseño conceptual de la información que se manejará en el sistema, y los componentes que se encargaran del funcionamiento
y la relación entre uno y otro. Se ha utilizado la herramienta objectaid (ver Referncias) para la ela boración del siguiente diagrama (figura 25):
Figura 25. Diagrama de Clases UML.
38
Desarrollo de una aplicación interactiva para el etiquetado de objetos
La clase Uaieo es la clase inicial de nuestra aplicación y muestra el menú principal con las tres
opciones posibles: iniciar partida, consultar puntuación y salir, dentro del método onCreate. Extiende la clase Activity como cualquier aplicación para Android. Se gestiona la pulsación de los tres botones hacia las clases Iniciar y Puntuación.
La clase Iniciar muestra la pantalla de partida con la imagen y los dos botones que deberá pulsar el usuario dentro del método onCreate. Gestiona la descarga del archivo de configuración con
los métodos gestionArchivo, leeLineas y generaAleatorios. Muestra la imagen correspondiente con
los métodos siguiente y muestra. A su vez el método muestra utiliza los métodos downloadBitmap y
redimensionar para la descarga de la imagen y adaptarla al imageview que rellenará. La gestión de
la pulsación del botón se hará a través del la clase imagen.
La clase Imagen gestiona la pulsación de uno de los botones a través del método onclick. El método cogeBoton toma el valor pulsado que nos servirá para enviar la respuesta al servidor a través
del método enviaRespuesta y para contabilizar las puntuaciones que mostraremos más adelante por
medio del método actualizaPuntuacion. Una vez termina el ciclo si es la ultima imagen a mostrar
lanzaremos la clase Puntuación a través del método onFinish, si aún quedan imágenes por mostrar
llamaremos a los métodos siguiente y muestra de la clase Iniciar.
La clase Puntuación muestra la tercera y ultima pantalla de la aplicación dentro del método onCreate. Gestiona la pulsación de los botones cargar y limpiar con los métodos de idéntico nombre.
39
Desarrollo de una aplicación interactiva para el etiquetado de objetos
5. Implementación
Una vez expuestos los requisitos y características principales de la aplicación, así como las decisiones tomadas en cuanto a su diseño, a continuación se desgranan en este apartado los aspectos relacionados con su implementación. Finalmente en la sección de pruebas se describen los problemas
encontrados y las soluciones que se han implementado para su resolución.
El fin perseguido en las siguientes líneas no es sólo mostrar el código más relevante de UAIEO,
sino también se espera poder ayudar a otros desarrolladores a ampliar en un futuro las capacidades
de UAIEO, o incluso inspirar la creación de aplicaciones con servicios similares. Se advierte que
los fragmentos de código fuente a continuación mostrados no son una copia literal del código fuente
de UAIEO, sino que en algunos casos se reducen o modifican para simplificar y facilitar su comprensión. Para una documentación exacta del código hay que dirigirse al Anexo.
40
Desarrollo de una aplicación interactiva para el etiquetado de objetos
5.1. Layouts
Layouts es tal como se denominan en Eclipse a las pantallas, estas están definidas en archivos de
tipo “.xml”. Vamos a describir como implementar los distintos elementos que las componen.
La disposición elegida es<LinearLayout> es decir los componentes se irán situando uno detrás
de otro de forma lineal, pudiéndose elegir una disposición horizontal o vertical. En nuestro caso seleccionamos en el caso de las tres pantallas la disposición vertical, tal como se justificó en el apartado de diseño.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical >
Los primeros elementos que definiremos en el layout serán los textos y botones, como atributos
de cualquier elemento ( y del anterior <LinearLayout> ) podremos indicar su tamaño mediante su
relación de ancho, android:layout_width, y alto, android:layout_heigh. Si asignamos el valor ”match_parent" indicaremos que este elemento rellenara el elemento superior en el cual es
contenido y si asignamos en valor "wrap_content" indicaremos que el elemento se ajustara a su
contenido, es decir se reducirá lo mínimo indispensable para mostrar su contenido. Otra forma de
indicar su tamaño seria asignarlo directamente mediante numero de píxeles o densidad de píxeles,
"200dp", por ejemplo.
<TextView
android:id="@+id/texto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/txttexto" >
Otros atributos que definen los elementos son el identificador, android:id=, para hacer referencia al mismo desde la aplicación, y el texto que contiene el elemento, android:text=, que puede
introducirse directamente como atributo o referencia a un recurso(lo recomendado). Para definir un
botón utilizaremos la etiqueta <Button> y para definir una imagen la etiqueta <ImageView>.
<ImageView
android:id="@+id/imageView"
android:layout_width="200dp"
android:layout_height="150dp"
android:contentDescription="@string/img"
android:src="@drawable/down" />
41
Desarrollo de una aplicación interactiva para el etiquetado de objetos
5.2. Clases
Tras la creación de un proyecto Android en Eclipse, este creará una clase principal que extiende
la clase Activity, public class MainActivity extends Activity, tambien incluirá el paquete del cual es miembro y las librerías necesarias para ejecutar los métodos que se han incluido
por defecto. Estos métodos serán llamadas siempre al iniciarse la activity, protected void onCreate(Bundle savedInstanceState) y public boolean onCreateOptionsMenu (Menu
menu), y su funcion es la de mostrar o “pintar” los layouts o pantallas, y el menú si existiera.
package rubert.uji.pfc;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}
Una vez sabemos que es cada elemento de la clase que se ha creado podemos empezar a desarrollarla. En esta primera clase llamada Uaieo.java, y su pantalla asociada p_uaieo.xml, ya habíamos
definido en la fase de Análisis y Diseño las acciones que se iban a realizar , estas seran las de pulsar
los botones y lanzar las activity's correspondientes.
Para capturar la pulsación de un botón necesitaremos realizar tres cosas, la primera conocer el
identificador del botón ( 1 ), la segunda indicar que el boton es un elemento pulsable o “clickable” (
2 ) y la tercera indicar la acción a realizar tras la pulsación ( 3 ).
1
2
(Button)findViewById(R.id.boton1).setOnClickListener(new OnClickListener( ) {
@Override
public void onClick(View v) {
Intent intencion;
3
intencion = new Intent(Uaieo.this, Iniciar.class);
startActivity(intencion);
}
});
42
Desarrollo de una aplicación interactiva para el etiquetado de objetos
La segunda clase que vamos a explicar va a ser Inicar.java, en esta clase vamos a mostrar la pantalla correspondiente como siempre, p_iniciar.xml, a continuación descargaremos el archivo de configuración y lo procesamos y finalmente descargaremos la imagen correspondiente y la mostraremos en su imageview correspondiente.
Para la descarga de un archivo de la red es necesario ejecutar esta tarea en un hilo o thread independiente al de la aplicación, es nuestro caso realizaremos esta tarea en varias ocasiones, sirva este
ejemplo comentado para mostrar como realizaremos la gestión de la conexión en un hilo o thread :
...
// MOSTRAMOS UN DIALOGO QUE BLOQUEA LA PANTALLA
// HASTA EL FIN DEL PROCESO DE DESCARGA
final ProgressDialog dialogo = ProgressDialog.show(this,"DESCARGA","Descarga");
dialogo.show();
// CREAMOS NUEVO HILO DONDE EJECUTAR LA DESCARGA
new Thread(new Runnable() {
@Override
public void run() {
try {
//EJECUTAMOS ACCIONES EN EL HILO SECUNDARIO
// ASIGNAMOS URL
string url = “http://www.pagina.com/Archivo.txt”;
// DESCARGA DEL ARCHIVO EN UN VECTOR DE STRINGS
descargaArchivo(url);
// SALIMOS AL HILO PRINCIPAL
runOnUiThread(new Runnable() {
@Override
public void run() {
//EJECUTAMOS ACCIONES EN EL HILO PRINCIPAL
}
});
// COGEMOS LAS POSIBLES EXCEPCIONES
// Y LAS MOSTRAMOS PARA SU ANÁLISIS
} catch (IOException e) {
e.printStackTrace();
// ACCIONES FUERA DEL TRY
} finally {
//FINALIZAMOS EL DIALOGO DE DESCARGA
dialogo.dismiss();
}
}
}).start();
...
// ESTE METODO SE EJECUTARA EN UN HILO DISTINTO AL PRINCIPAL
public void descargaArchivo (String url) throws IOException{
try {
// VER SIGUIENTE SECCION PARA M ÁS DETALLE
// ACERCA DE LA DESCARGA DE TEXTO E IMAGENES
} catch (IOException e) {
e.printStackTrace();
}
return lineas;
}
43
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Acabamos de ver cómo es la ejecución de un proceso en un hilo distinto al principal, como mostrar una ventana de dialogo durante la espera, y como realizar acciones en el hilo principal llamándolo desde el hilo secundario.
Ahora veremos que dos procesos realizaremos dentro de un hilo como ese, el primero sera un
método que descarga de un archivo de texto y lo procesa:
// ESTE METODO DESCARGA UN ARCHIVO DE TEXTO
// Y DEVUELVE 10 LINEAS ALEATORIAS
public String[] descargaArchivo (String url)throws IOException{
// DEFINIMOS EL VECTOR DE 10 STRING
String[] lineas = new String[10];
try {
// DEFINIMOS EL CLIENTE
HttpClient cliente = new DefaultHttpClient();
// DEFINIMOS LA PETICION HTTPGET
HttpUriRequest pideWeb = new HttpGet(url.toString());
// EJECUTAMOS LA PETICION Y GUARADAMOS LA RESPUESTA
HttpResponse respuesta = cliente.execute(pideWeb);
// ALMACENAMOS LA RESPUESTA EN UN INPUTSTREAM
InputStream texto = respuesta.getEntity().getContent();
// ALMACENAMOS RESPUESTA EN BUFFER
BufferedReader buffer = new BufferedReader(new InputStreamReader(texto));
// VARIABLES AUXILIARES
String s = "";
List<String> ls = new ArrayList<String>();
// LEEMOS EL BUFFER Y
// GUARDAMOS LAS LINEAS EN UNA LISTA DE STRING
while ((s=buffer.readLine()) != null) {
Ls.add(s);
}
// GENERAMOS UN VECTOR DE 10 ENTEROS
// ALEATORIOS Y ORDENADOS DE MENOR A MAYOR
Integer [] n = generaAleatorios(ls.size());
// ALMACENAMOS LOS 10 STRING ALEATORIOS
for (int a=0;a<10;a++){
lineas[a] = ls.get(n[a]);
}
// LIBERAMOS ESPACIO DE LAS
// VARIABLES Y EL BUFFER
ls= null;
buffer.close();
texto.close();
} catch (IOException e) {
e.printStackTrace();
}
// DEVOLVEMOS LOS 10 STRING ALEATORIOS
return lineas;
}
Fuera de este método bastará con recorrer el vector de String para sacar el nombre de la imagen
y la respuesta, con el nombre de la imagen formaremos la URL de descarga que utilizaremos en el
siguiente método. Esto se realizará desde el hilo secundario mediante una llamada al hilo principal:
44
Desarrollo de una aplicación interactiva para el etiquetado de objetos
...
// LLAMADA AL HILO PRINCIPAL DESDE EL HILO SECUNDARIO
runOnUiThread(new Runnable() {
@Override
public void run() {
// RECORREMOS LINEAS[]
for (int i=0;i<10;i++){
// DIVIDIMOS LA LINEA SEGÚN EL PATRON
Pattern p = Pattern.compile(" ");
String[] aux = p.split(lineas[i]);
// ALMACENAMOS EL NOMBRE DE LA IMAGEN
imagenes[i]=aux[0];
// ALMACENAMOS SU ETIQUETADO
respuestas[i]= aux[1];
}
}
});
...
Este método en nuestra aplicación se llama gestionArchivo (). El siguiente proceso que realizaremos en un hilo secundario será un método que realiza la descarga de una imagen y la carga en el
layout, aquí hemos de fijarnos que aunque es similar no tiene la misma estructura que el anterior
método. La URL de descarga de la imagen no la conocemos enteramente de antemano, la formamos
sobre la marcha a partir del proceso anterior por lo que podría ser errónea por algún fallo no controlado durante la ejecución. Vamos a intentar solventar este posible error mediante una comprobación,
leeremos el código de respuesta, 200 equivalente a OK.
// ESTE METODO DESCARGA UNA IMAGEN
public Bitmap descargaImagen(String url) throws IOException {
// DEFINIMOS EL CLIENTE
HttpClient cliente = new DefaultHttpClient();
// DEFINIMOS LA PETICION HTTPGET
HttpUriRequest pideWeb = new HttpGet(url.toString());
// EJECUTAMOS LA PETICION Y GUARADAMOS LA RESPUESTA
HttpResponse respuesta = cliente.execute(pideWeb);
// LEEMOS EL CODIGO DE RESPUESTA
StatusLine statusLine = respuesta.getStatusLine();
int statusCode = statusLine.getStatusCode();
// SI ES 200 = OK
if (statusCode == 200) {
// PROCESAMOS LA RESPUESTA
HttpEntity entity = respuesta.getEntity();
byte[] bytes = EntityUtils.toByteArray(entity);
Bitmap bitmap = BitmapFactory.decodeByteArray(bytes,0,bytes.length);
// DEVOLVEMOS UN OBJETO DE TIPO BITMAP
return bitmap;
// SI EL CODIGO =! 200 LANZAMOS EXCEPCION
} else {
throw new IOException(statusCode+"-"+statusLine.getReasonPhrase());
}
}
45
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Fuera de este método pero en el hilo secundario obtendremos el identificador del imageview
que debemos rellenar,
...
final ImageView imagen = (ImageView) findViewById(R.id.imageView1);
...
y ya en una llamada al hilo principal “pintaremos” la imagen (bitmap) sobre el imageview (imagen):
...
runOnUiThread(new Runnable() {
@Override
public void run() {
imagen.setImageBitmap(bitmap);
}
});
...
Este método en nuestra aplicación se denomina muestra (). Hasta aquí hemos llegado con la explicación de la clase Iniciar.java. En Resumen esta clase muestra la pantalla asociada, descarga la
información necesaria para la aplicación, la procesa y la muestra. La siguiente clase que explicamos
es Imagen.java.
En esta clase vamos a controlar la lógica de la aplicación , que sucede cuando pulsamos ciertos
botones y que nos mostrara la aplicación como respuesta, almacenaremos estos datos para su tratamiento posteriormente. En esta clase se definirán todas las variables que utilizaremos para la aplicación y que serán accesibles desde la clase Iniciar.java.
Esta clase esta a la escucha de la pulsación de los dos botones mediante su definición:
public abstract class Imagen extends Activity implements OnClickListener {
...
}
Tras la esperada pulsación de un botón los primeros métodos que utilizamos son cogeBoton (),
que nos asignará a la variable pulsar el valor M o F según el usuario haya respondido Hombre o
Mujer. Con este dato llamamos al método enviaRespuesta () que mediante un hilo como hemos explicado anteriormente, realiza una petición HttpGet a un script php que tomara la respuesta enviada.
Dicho script es el siguiente:
<?php
$img=$_GET[img];
$res=$_GET[res];
$fp = fopen("./datos.txt", "a");
fwrite($fp, $img. " ". $res ."\n");
fclose($fp);
?>
46
Desarrollo de una aplicación interactiva para el etiquetado de objetos
De esta forma la URL de nuestra petición deberá tomar la siguiente estructura:
...
String url = "http://www.vision.uji.es/~montoliu/UAIEO/resultados.php?img=";
String php = url+imagen+"&res="+pulsar;
String url2 = url + php;
...
siendo imagen y pulsar dos String que se corresponden con la imagen visualizada y la respuesta
dada (botón pulsado). La parte final de la url será por ejemplo de la siguiente forma:
/resultados.php?img=imagen2389673.jpg&res=H
A continuación se comprueba si la respuesta dada es igual a la respuesta recogida en el archivo
de configuración mediante el método “.equals()”, se incrementara el contador de respuestas correctas si corresponde y de preguntas realizadas, y se mostrara un mensaje en un Toast para informar al
usuario si se ha acertado o no esa imagen:
if (respuesta.equals(pulsar)){
acierto = true;
correctas += 1;
}
((TextView)findViewById(R.id.puntos)).setText(" "+correctas);
...
aviso = Toast.makeText(this, mensaje, Toast.LENGTH_SHORT);
aviso.show();
contador += 1;
...
Una vez finalizada la lógica de la aplicación mostraremos la siguiente imagen sino hemos llegado al final, con el método muestra () si por el contrario ya hemos visualizado y respondido a las 10
imágenes llamaremos al metodo actualizaPuntuacion () que cargara el numero de respuestas correctas y lanzaremos el Activity Puntuacion.
Esta clase tan sólo muestra su pantalla y carga las estadísticas de las respuestas dadas durante la
fase anterior, existen dos botones que permiten el borrado de las estadísticas y salir de la pantalla
p_puntuacion para volver al menú principal. Las estadísticas se almacenan como preferencias de la
aplicación. Se muestra como ejemplo de esta clase el método limpiar () que pone las estadísticas a
cero.
private void limpiar() {
SharedPreferences prefs =
getSharedPreferences(Uaieo.UAIEO_prefs,Activity.MODE_PRIVATE);
SharedPreferences.Editor editor = prefs.edit();
editor.putInt(Puntuacion.PARTIDAS, 0)
.putInt(Puntuacion.PUNTOS, 0)
.putInt(Puntuacion.GANADAS, 0);
editor.commit();
}
47
Desarrollo de una aplicación interactiva para el etiquetado de objetos
5.3. Pruebas
Una vez finalizada la implementación se ha dedicado parte del tiempo en analizar la usabilidad
de la aplicación e intentar descubrir posibles fallos o bugs, o cualquier otra anomalía no prevista en
las fases de análisis y diseño. Para ello el propio desarrollador a cedido la aplicación (en versión
beta) a usuarios de teléfonos Android de su entorno para su prueba. A continuación se exponen las
principales modificaciones y mejoras que ha sufrido la aplicación en versión beta.
Al iniciar partida no se muestra inmediatamente la imagen correspondiente puesto que se esta
descargando el archivo de configuración y la imagen del servidor, este proceso se puede demorar
unos segundos por lo que se decide mostrar una ventana emergente (conocido como Toast en Android) mostrando el texto “Descargando” mientras dure la descarga del archivo de configuración.
En algunos casos este mensaje es imperceptible por el usuario debido al escaso tiempo de descarga, para los demás casos este mensaje cumple su función, que es la de advertir al usuario que la
aplicación funciona correctamente y en breve empezara la partida. Aunque no interfiere directamente en un mejor funcionamiento de la aplicación esta acción mejora la calidad de la misma, se muestra el código implementado antes de iniciar la descarga y al finalizar la misma:
final ProgressDialog dialog=ProgressDialog.show ( Iniciar.this, "Descarga" ,
"Descargando”);
dialog.show();
…
dialog.dismiss();
Un par de anomalías se han detectado durante el transcurso de las partidas, la primera consiste
en la disposición de la pantalla en formato horizontal o landscape, si bien se decidió en la fase de
análisis una disposición vertical o portrait, en la implementación no se ha controlado correctamente.
Esto es debido a que el sistema Android permite habilitar de forma genérica el giro de pantalla para
las aplicaciones instaladas, siempre que el hardware lo permita (giroscopio). Por lo que durante una
partida si girásemos el teléfono (y tuviera habilitada la opción antes mencionada) Android dispondría nuestro layout vertical de forma horizontal de la forma que creyera más oportuna y según se ha
observado esta disposición no permite la pulsación de los botones.
Para resolver este fallo indicaremos desde el android_manifest.xml la disposición que queremos
mostrar independientemente de los giros que sufra el teléfono o de otros estímulos externos. El siguiente fragmento de define la orientación(última línea):
<activity
android:name="rubert.uji.uaieo.Uaieo"
android:label="@string/app_name"
android:screenOrientation="portrait" >
Otra anomalía detectada es la falta de conexión a internet, ya sea por wifi, 3G u otros medios de
los que disponga el terminal. Si el teléfono no dispusiera de la conexión necesaria la aplicación se
quedaría “colgada” y el sistema Android lanzaría una excepción que informaría del cierre inmediato
de la aplicación, para resolver este fallo se ha implementado una función que comprueba la cone48
Desarrollo de una aplicación interactiva para el etiquetado de objetos
xión. Para utilizar esta funcion se ha modificado el Android_manifest.xml añadiendo el permiso correspondiente para la comprobación del estado de red.
La función se ejecuta al pulsar el botón de iniciar partida, si existe conexión continua la ejecución normal de la aplicación, si no dispusiéramos de conexión en ese momento un mensaje (Toast)
nos indicaría que debemos comprobar la conexión para poder iniciar la partida. Toast mostrado (Figura 26):
Figura 26. Toast: Verifique su conexión a internet.
Se ha analizado el uso de los recursos hardware por parte de la aplicación con la herramienta
“OS monitor” que nos permite monitorizar el uso de la CPU, de la memoria, de la red, etc. Antes de
ver estos resultados conviene aclarar algunos puntos sobre Android,
•
Android ha sido diseñado para cerrar o matar una tarea cuando se necesita memoria.
•
De la misma manera, cerrará o matará una aplicación que lleva tiempo en segundo plano sin
ser utilizada.
•
La mayoría de los servicios usan muy poca memoria cuando están en segundo plano.
Analizando los usos de memoria y CPU del Sony Xperia Neo V utilizado durante las pruebas no
se ha observado ningún uso destacable ni se ha excedido de los valores normales en el transcurso
del uso nuestra aplicación. Siendo el uso de CPU medido durante el transcurso de una partida del
3,2 % (Figura 27) y el uso de memoria de 28 MB. Como también se ha observado que el uso de batería por parte del sistema después del uso continuado de la aplicación no presenta anomalías.
Figura 27. Uso de CPU de la aplicación.
49
Desarrollo de una aplicación interactiva para el etiquetado de objetos
5.4. Resultados
Vamos a describir una partida real jugada en nuestra aplicación. Para iniciar nuestra aplicación
UAIEO pulsaremos el icono de la misma sobre la pantalla del menú de aplicaciones de nuestro
smartphone, esta lanzara una pantalla como muestra la figura 28a, correspondiente al diseño planteado en la sección 4.2. Interfaz. Como queremos empezar ya a utilizar la aplicación pulsaremos el
primer botón iniciar partida y se mostrará la figura 28b y a continuación cambiara a la que se muestra en la figura 29a.
28a
28b
Figura 28. Pantallas de la aplicación:
Menú principal e Inicio (Descargando Archivo de configuración).
Por lo visto hasta el momento, la aplicación cumple con los objetivos y lo planteado en la secciones de análisis y diseño en cuanto a la parte visual, ahora vamos a ver algo más acerca de su funcionamiento interno. Como se puede observar en las siguientes imágenes se muestra la primer rostro descargado desde el servidor (figura 29a), el contador de aciertos permanece vacío puesto que
aun no se ha pulsado ningún botón, como estamos bastante seguros, pulsaremos el botón Hombre y
veremos que se actualiza la puntuación y se muestra un mensaje de acierto(figura 29b).
Seguimos pulsando Hombre o mujer según avanza la partida(figura 29c), en alguna ocasión fallamos, la aplicación se encarga de recordárnoslo y vemos como la puntuación no sube al marcador
(figura 29d).
50
Desarrollo de una aplicación interactiva para el etiquetado de objetos
29a
29b
29c
29d
Figura 29. Pantallas de la aplicación: Aciertos y fallos.
51
Desarrollo de una aplicación interactiva para el etiquetado de objetos
En cada pulsación que realizamos se realizan múltiples tareas, la primera es la gestión del dato
que acabamos de introducir, hombre o mujer, este se compara con el etiquetado correcto y se almacena para mostrar la pantalla de la puntuación al final. La segunda es la carga del dato en el servidor
mediante la conexión al descrita en capítulos anteriores, y la tercera es la carga de una nueva imagen. Al realizar la última pulsación (en nuestro caso se han configurado 10) se muestra el total de
aciertos y la pantalla de puntuación (figura 30a), si hemos hecho muy mala puntuación se puede
pulsar Limpiar, así vaciaremos las estadísticas para no ver lo mal que lo hemos hecho (figura 30b).
Accediendo al archivo de resultados (ubicado en la carpeta UAIEO del servidor) se puede comprobar como se han escrito los resultados, uno por linea, correctamente. Para finalizar pulsamos Cerrar que nos devuelve al menú principal, desde el cual pulsando Salir volveremos a la pantalla del
menú de aplicaciones de nuestro smartphone.
30a
30b
Figura 30. Pantalla de Puntuaciones.
52
Desarrollo de una aplicación interactiva para el etiquetado de objetos
6. Conclusiones
En la última sección de esta memoria aportaremos nuestra valoración personal y evaluaremos
nuestro sistema en función de los objetivos descritos en el capitulo 1.
53
Desarrollo de una aplicación interactiva para el etiquetado de objetos
6.1. Valoración
En mi valoración personal del proyecto puedo decir que me siento satisfecho por el trabajo realizado y por otras dos razones. La primera es la satisfacción de finalizar la carrera tras la presentación
de la presente memoria, no hay mucho más que añadir aquí, se consigue cerrar un ciclo, el de estudiante, para iniciar uno nuevo, el de la proyección profesional. La segunda es el haber realizado el
proyecto sobre el tema que más me interesa, Android.
Durante la carrera se tocan diversas ramas de la informática y se profundiza en las que uno desea, bien a nivel personal con nuestros propios medios o a nivel académico mediante asignaturas
optativas o cursos de formación. Con el presente proyecto he profundizado en Android de las dos
formas, mediante mis medios investigando y documentándome sobre Android en Internet y en menor medida con libros, y mediante una asignatura que me ha dado la libertad de elegir este tema.
De forma clara podemos afirmar que la aplicación cumple con lo esperado, siempre respetando
los objetivos iniciales y requisitos y funcionalidades contempladas a lo largo del desarrollo. La duración estimada del proyecto se corresponde con la real, las diferencias de coste temporal que han
podido producirse en ciertas tareas han sido mínimas y han podido compensarse los retrasos de unas
tareas con otros adelantos en otras. La valoración es totalmente satisfactoria en este apartado.
Por último quisiera aportar las posibilidades que brinda la aplicación. Al tratarse de un juego
tipo “Quiz” (cuestionario: preguntas y respuestas), con tan sólo cambiar las imágenes del servidor y
alguna pequeña modificación en el código fuente se podría realizar un estudio totalmente distinto en
otro departamento de la universidad. Por ejemplo en un estudio de mercado para valorar que productos prefiere el consumidor, podría mostrar imágenes con dos productos y el usuario valorar cual
prefiere: A / B, Nocilla / Nutella, Agua con gas / Agua sin gas, Coca- cola / Pepsi, etc. También se
podría modificar la interfaz para mostrar tres o más botones en cuestionarios más complejos o cambiar la pregunta tras cada respuesta incluyendo este dato en el archivo de configuración.
"Nuestra recompensa se encuentra en el esfuerzo
y no en el resultado.
Un esfuerzo total es una victoria completa."
Mahatma Gandhi
54
Desarrollo de una aplicación interactiva para el etiquetado de objetos
7. Anexos
A. Eclipse
B. La aplicación en Google Play
C. Glosario de términos
D. Código Fuente
E. Referencias
F. Propuesta Técnica
55
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Anexo A: Eclipse
Instalar el SDK y Eclipse IDE
Crear un proyecto con Eclipse
Ejecución de la aplicación
Generar el .APK
El paquete ADT proporciona todo lo que se necesita para comenzar a desarrollar aplicaciones,
incluyendo una versión del IDE de Eclipse con una función de ADT (Android Developer Tools)
para optimizar su desarrollo de aplicaciones Android. Para nuestro caso descargamos la siguiente
versión;
Plataforma
Paquete
Tamaño
Linux de 64 bits
adt-bundle-linux-x86_64-20130219.zip
418939098 bytes
Instalar el SDK y Eclipse IDE
1. Descomprimir el archivo ZIP (llamado adt-bundle-linux-x86_64-20130219.zip) y guardarlo en
un lugar adecuado, como un directorio de "desarrollo" en el directorio personal.
2. Abrir el directorio adt-bundle-linux-x86_64-20130219/eclipse/ y ejecutar eclipse.
Eso es todo! El IDE ya está cargado con el plugin Android Developer Tools y el SDK está listo
para funcionar. Para comenzar a desarrollar, se puede examinar la aplicación Hola Mundo que se ha
generado automáticamente o explorar los códigos de ejemplo.
No hay que mover ninguno de los archivos y directorios del adt-bundle-linux-x86_64-20130219.
Si se mueve el eclipse o el directorio SDK, ADT no será capaz de localizar el SDK y se tendrá que
actualizar manualmente las preferencias de ADT.
A medida que se continua con el desarrollo de aplicaciones, es posible que se tengan que instalar
otras versiones de Android para el emulador y otros paquetes, como la biblioteca de Google Play
In-App Billing. Para instalar más paquetes, hay que utilizar el Administrador de SDK .
Todo lo que se necesita para desarrollar aplicaciones Android está en esta en la web http://developer.android.com , incluyendo guías de diseño, entrenamiento de desarrollo, API reference , así
como información sobre cómo se puede distribuir una aplicación . Para obtener recursos adicionales
sobre el desarrollo y la distribución de una aplicación, consular los Developer Support Resources .
56
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Crear un proyecto con Eclipse
1. Hacer clic en New en la barra de herramientas.
2. En la ventana que aparece, abrir la carpeta Android, seleccione Android Application Project, y hacer clic en Next.
Figura 31. El nuevo proyecto de aplicación Android en Eclipse.
3. Rellenar el formulario que aparece:
• Application Name es el nombre de la aplicación que aparece a los usuarios. Para este proyecto, se usó “Uaieo".
• Project Name es el nombre del directorio del proyecto y el nombre visible en Eclipse.
• Package Name es el espacio de nombres de paquetes para la aplicación (siguiendo las mismas reglas que los paquetes en el lenguaje de programación Java). El nombre del paquete
debe ser único en todos los paquetes instalados en el sistema Android. Por esta razón, generalmente es mejor si se utiliza un nombre que comienza con el nombre de dominio reverso
de la empresa organización o entidad. Para este proyecto, se puede utilizar algo así como
"com.example.myfirstapp." Sin embargo, no se puede publicar la aplicación en Google Play
con el espacio de nombres "com.example".
• Minimum Required SDK es la versión más baja de Android que la aplicación es compatible, se indica el uso del nivel API. Para apoyar a tantos dispositivos como sea posible, debe
ajustarse en la versión más baja disponible que le permita a la aplicación proporcionar su
conjunto de características básicas. Si alguna de las funciones de la aplicación sólo es posible en las nuevas versiones de Android y no es crítica para el núcleo del conjunto de características de la aplicación, se puede activar la función sólo cuando se ejecuta en las versiones
que lo apoyan.
57
Desarrollo de una aplicación interactiva para el etiquetado de objetos
• Target SDK indica la versión más alta de Android (también con el nivel de la API) con la
que se ha probado con la solicitud.
• A medida que nuevas versiones de Android estén disponibles, se debe probar la aplicación
en la nueva versión y actualizar este valor para que coincida con el nivel de API más reciente con el fin de aprovechar las nuevas características de la plataforma.
• Compile With es la versión de la plataforma contra la que se compila la aplicación. De forma predeterminada, se establece en la última versión de Android disponible en el SDK. Todavía se puede construir una aplicación para apoyar a las versiones anteriores, pero establecer el destino de generación a la última versión permite habilitar nuevas características y optimizar la aplicación para una gran experiencia de usuario en los últimos dispositivos.
• Theme especifica el estilo de interfaz de usuario de Android para aplicar a la aplicación.
Hacer clic en Next.
4. En la siguiente pantalla para configurar el proyecto, deje las selecciones predeterminadas y
haga clic en Next.
5. En la siguiente pantalla puede ayudar a crear un icono de lanzador para su aplicación. Puede
personalizar un icono de varias maneras y la herramienta genera un icono para todas las densidades de pantalla. Antes de publicar una aplicación, se debe asegurar de que el icono cumple con las especificaciones definidas en la guía de diseño. Hacer clic en Next.
6. Ahora se puede seleccionar una plantilla de actividad desde la cual comenzar a construir la
aplicación. Para este proyecto, seleccionamos BlankActivity y hacemos clic en Next.
7. Dejar todos los detalles de la actividad en su estado predeterminado y hacer clic en Finish.
El proyecto Android ya está configurado con algunos archivos por defecto y ya está listo para
comenzar a construir la aplicación.
Ejecución de la aplicación
EL proyecto generado hasta ahora incluye un conjunto predeterminado de ficheros "Hello
World" de origen que permiten ejecutar inmediatamente la aplicación. Si tenemos un dispositivo
con Android real, así es como se puede instalar y ejecutar la aplicación:
1. Conectar el dispositivo al equipo de desarrollo con un cable USB. Si está desarrollando en
Windows, puede que se tenga que instalar el controlador USB adecuado para el dispositivo.
Para la instalación de controladores de ayuda, consulte el documento Drivers USB OEM :
http://developer. android.com/tools/extras/oem-usb.html.
2. Habilitar la depuración USB en el dispositivo.
•
En la mayoría de los dispositivos con Android 3.2 o mayor, se encuentra la opción de Ajustes> Aplicaciones> Desarrollo.
•
En Android 4.0 y posteriores, que se encuentra en Configuración> Opciones para desarrolladores.
Nota: En Android 4.2 y posteriores, las opciones para desarrolladores está oculta de manera
58
Desarrollo de una aplicación interactiva para el etiquetado de objetos
predeterminada. Para que esté disponible, vaya a Ajustes> Acerca del teléfono y toque
Construir número siete veces. Volver a la pantalla anterior para encontrar opciones para
desarrolladores.
Para ejecutar la aplicación desde Eclipse:
1. Abra uno de los archivos de su proyecto y haga clic en Ejecutar de la barra de herramientas.
2. En la ventana Ejecutar como que aparece, seleccione Aplicación para Android y haga clic
en Aceptar.
Eclipse instala la aplicación en el dispositivo conectado y la inicia.
Para ejecutar la aplicación en el emulador es necesario crear primero un Android Virtual Device
(AVD). Un AVD es una configuración de dispositivos para el emulador de Android que te permite
modelar diferentes dispositivos.
Figura 32. El Administrador de AVD muestra unos dispositivos virtuales.
Para crear un AVD:
1. Inicie el Administrador de dispositivos Android Virtual: En Eclipse, haga clic en Administrador de dispositivos Android Virtual
de la barra de herramientas.
2. En el panel Administrador de dispositivos Android Virtual, haga clic en New.
3. Rellene los detalles de la AVD. Darle un nombre, un destino de la plataforma, un tamaño de
la tarjeta SD, y un skin (HVGA es por defecto).
4. Hacer clic en Create AVD.
5. Seleccione el nuevo AVD del Administrador de dispositivos Android Virtual y haga clic en
Iniciar.
6. El emulador arranca, desbloquear la pantalla del emulador.
59
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Para ejecutar la aplicación desde Eclipse:
1. Abra uno de los archivos de su proyecto y haga clic en Ejecutar de la barra de herramientas.
2. En la ventana Ejecutar como que aparece, seleccione Aplicación para Android y haga clic
en Aceptar.
Eclipse instala la aplicación en su AVD y la inicia.
Generar el .APK (ver Referencias)
Una vez hayas probado tu aplicación ya sea en el emulador o en el dispositivo de pruebas, ahora
lo ideal es probarlo en otros dispositivos Android.
Hay dos maneras de exportar el APK Sin Firmar y Firmada. Sin Firmar nos genera el APK inmediatamente, pero no te permitirá instalarla en un dispositivo diferente al que utilizas para pruebas. Firmada nos permitirá instalarla en cualquier dispositivo que tenga activo la instalación de aplicaciones de Orígenes desconocidos. (Para activarlo en el dispositivo Ajustes>Aplicaciones> Orígenes desconocidos).
Ahora para exportar la aplicación firmada, das clic derecho sobre el proyecto Android
Tools>Export Signed Application Package. Luego seleccionas el proyecto que vas a exportar, Siguiente :
Figura 33. Exportar Aplicación firmada
En la ventana Keystore Selection colocas la ubicación y nombre del certificado keystorename.keystore y colocas un password, Siguiente
Figura 34. Selección de la key o certificado.
60
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Luego en la ventana Key Creation colocas un Alias para tu certificado, recomiendan colocarle
25 años de valides a los certificados, aunque también puedes limitarlo, y de resto colocas la información de la compañía y país.
Figura 35. Creación de la key o certificado.
En la ventana Destination and key/certificate checks, colocas la ubicación donde almacenaras el
APK y le das un nombre a tu nuevo APK, recuerda que se esta es creando por lo tanto no es que debas buscar un APK para colocar en la ruta. Finish
Figura 36. Destino de la key o certificado.
Finalmente te diriges al la ruta que habías especificado y encontraras el APK de tu aplicación ya
firmada, ahora puedes instalarla en diferentes dispositivos Android.
61
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Anexo B: La aplicación en Google Play
Cómo subir aplicaciones
Una vez que te hayas registrado(es necesario tener cuenta de google, aceptar las condiciones y
tener una tarjeta de crédito para el pago de $25 USD), podrás subir fácilmente tus aplicaciones a
Google Play. En la pantalla principal de la consola de Google Play para desarrolladores, selecciona
Añadir nueva aplicación. Tendrás que rellenar la información de tu aplicación que se indica a
continuación:
Subir recursos
Archivo APK: el tamaño máximo admitido de un único archivo APK son 50 MB. Puedes
utilizar archivos de expansión para subir recursos adicionales como, por ejemplo, gráficos. Si un
único archivo APK no es suficiente para todos los dispositivos que quieres, puedes subir varios
archivos APK en la misma entrada de aplicación para que cada uno se encargue de la configuración
de un dispositivo diferente.
Ten en cuenta que los nombres de paquetes de los archivos de aplicaciones son únicos y
permanentes, por lo que debes elegirlos con cuidado. Los nombres de paquetes no se pueden
eliminar ni reutilizar en el futuro. Ten en cuenta que si has perdido tu almacén de claves, tendrás
que publicar la aplicación con un nuevo nombre de paquete y una nueva clave. También debes
actualizar la descripción de la aplicación original y eliminar su publicación.
Borrador de archivo APK de aplicación: al subir un archivo APK, este se puede guardar
como un borrador mientras editas el resto de aspectos de la lista. Si quieres añadir una nueva
versión del archivo APK, pero no quieres publicarla, accede de forma inmediata a Google Play
Store, cambia al modo avanzado y conserva tu nuevo archivo APK como borrador.
Capturas de pantalla: son obligatorias dos capturas de pantalla y se pueden utilizar otras seis
de forma opcional. Consulta el artículo sobre gráficos para obtener más información sobre las
capturas de pantalla y los iconos.
Especificación de detalles
Idioma: sirve para indicar el idioma de tu aplicación. El idioma predeterminado es el inglés de
EE.UU. La lista de idiomas irá aumentando a medida que los dispositivos con la tecnología de
Android estén disponibles en más idiomas. Asimismo, puedes incluir traducciones del nombre y de
la descripción de la aplicación para promocionarla para usuarios que hablen otros idiomas. Las
traducciones se mostrarán en Google Play.
Nombre: es el nombre de tu aplicación tal como te gustaría que apareciera en Google Play.
Puedes añadir un nombre por idioma.
Descripción: es la descripción de tu aplicación que se verá en Google Play. Utiliza la función de
traducción para traducir la descripción de tu aplicación a otros idiomas. En este campo, puedes
utilizar un máximo de 4.000 caracteres.
Cambios recientes: la función de cambios recientes te ofrece la oportunidad de añadir notas
sobre los cambios específicos de la versión más reciente de tu aplicación. Utiliza el campo de
62
Desarrollo de una aplicación interactiva para el etiquetado de objetos
cambios recientes para informar a tus usuarios sobre los cambios que has hecho en la aplicación.
Más información sobre la función de cambios recientes
Texto promocional: es el texto situado junto al gráfico promocional en lugares destacados de
Google Play.
Tipo de aplicación: Google Play se divide en dos tipos principales de aplicaciones:
Aplicaciones y Juegos. Elige uno.
Categoría: debes elegir una categoría para la aplicación. Consulta más información sobre las
categorías.
Nota: el uso de palabras clave repetitivas o irrelevantes en la descripción promocional, en la
descripción o en el nombre de la aplicación ofrece al usuario una experiencia negativa y puede dar
lugar a la suspensión de la aplicación. Consulta las directrices completas en la página de ayuda de la
Política para aplicaciones.
Opciones de publicación
Protección contra copias: la protección contra copias puede ayudar a evitar que otros usuarios
copien las aplicaciones desde un dispositivo. Aumenta la cantidad de memoria necesaria para
instalar la aplicación en el teléfono. Prevemos que la protección contra copias quedará obsoleta en
breve. Si tienes una aplicación de pago, te recomendamos que implementes el servicio de licencias
de Google Play. Ten en cuenta que el servicio de licencias de Google Play también está disponible
para aplicaciones gratuitas si tu aplicación utiliza archivos de expansión APK.
Ubicaciones: son las ubicaciones en las que puedes distribuir tus aplicaciones. No todas las
ubicaciones de la lista actual tienen usuarios con dispositivos con la tecnología de Android.
Puedes seleccionar ubicaciones de forma individual o la opción Todas las ubicaciones actuales
y futuras. Esta opción significa que se habilitarán más ubicaciones de distribución a medida que las
vayamos habilitando para tu aplicación. Antes de comprobar esta opción, consulta la página de
cumplimiento de las leyes de exportación.
Nota: en este momento, solo puedes vender aplicaciones a usuarios que se encuentren en ciertas
ubicaciones.
Información de contacto
Debes seleccionar un canal de asistencia para tu aplicación (por ejemplo, un sitio web, una
dirección de correo electrónico o un teléfono). Los usuarios de Google Play verán esta información.
Puedes seleccionar varios canales de asistencia.
Usuarios de la consola de Google Play para desarrolladores
Una vez que hayas guardado un cambio realizado en tu aplicación en la consola para
desarrolladores, estarán disponibles las traducciones automáticas de tu entrada de Play Store. Debes
recordar que una traducción humana es siempre una mejor opción. En el caso de idiomas en los que
la traducción no la haya proporcionado el desarrollador, el usuario podrá ver una traducción
automática de la especificación de detalles en la página web de Google Play Store. Sobre la
traducción aparecerá una nota indicando que la traducción se ha realizado de forma automática y se
mostrará una opción para volver al idioma predeterminado. Actualmente, no se admiten
63
Desarrollo de una aplicación interactiva para el etiquetado de objetos
traducciones automáticas para armenio, retorromance, tagalo y zulú.
Puedes añadir capturas de pantalla, gráficos de funciones, iconos de alta resolución, URL de vídeo de YouTube y gráficos promocionales localizados si quieres comercializar tu aplicación en diferentes idiomas. Crea una única entrada de Play Store para todos los idiomas. Una vez que hayas
añadido gráficos y vídeos en un determinado idioma, los usuarios cuyas preferencias de idioma coincidan verán la versión localizada de los recursos en la página web de Google Play Store y en el
dispositivo.
Las aplicaciones del sistema del usuario (incluidas aplicaciones precargadas) se muestran en la
sección Mis aplicaciones del dispositivo del usuario en Google Play Store (en cuanto una aplicación con el mismo nombre de paquete se sube a la consola de Google Play para desarrolladores,
aunque no se haya publicado la aplicación).
64
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Anexo C: Glosario de términos
xml : El XML (Extensible Markup Language, Lenguaje de Marcas Ampliable) es una forma flexible de crear formatos de información y compartir tanto el formato como los datos en la World
Wide Web, intranets y otras redes.
.apk : Es la extensión de las aplicaciones Android, variante del Java. Así pues, un .apk es cualquier aplicación que te puedes instalar en tu móvil.
ADT ( Android Development Tools plugin ) : Plugin de Eclipse proporcionado por Google para
desarrollar aplicaciones para Android.
Android SDK ( Software Development Kit ) : Un kit de desarrollo de software es generalmente un conjunto de herramientas de desarrollo de software que le permite al programador crear
aplicaciones para un sistema Android.
widget : Es una pequeña aplicación o programa, usualmente presentado en archivos o ficheros
pequeños que son ejecutados por un motor de widgets o Widget Engine.
framework : Es una estructura conceptual y tecnológica de soporte definido, normalmente con
artefactos o módulos de software concretos, que puede servir de base para la organización y desarrollo de software
Runtime : Se denomina tiempo de ejecución (runtime en inglés) al intervalo de tiempo en el
que un programa de computadora se ejecuta en un sistema operativo.
threading, thread : Un hilo de ejecución, hebra o subproceso es la unidad de procesamiento
más pequeña que puede ser planificada por un sistema operativo.
NDK (native development kit ) : Es un kit de desarrollo de software basado en una Interfaz de
programación de aplicaciones nativa (API) que permite desarrollar software directamente en una
plataforma a diferencia de hacerlo a través de una máquina virtual.
bytecode : Es un código intermedio más abstracto que el código máquina. Habitualmente es tratado como un archivo binario que contiene un programa ejecutable similar a un módulo objeto, que
es un archivo binario producido por el compilador cuyo contenido es el código objeto o código máquina .
API : Interfaz de programación de aplicaciones es el conjunto de funciones y procedimientos
(o métodos, en la programación orientada a objetos) que ofrece cierta biblioteca para ser utilizado
por otro software como una capa de abstracción.
AVD : Los AVD (Android Virtual Devices) son unas herramientas imprescindibles para los desarrolladores y testers, ya que permiten emular en una computadora los dispositivos móviles a los
que apunta nuestra aplicación.
65
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Anexo D: Código fuente
AndroidManifest.xml
p_uaieo.xml
p_iniciar.xml
p_puntuaacion.xml
Uaieo.java
Iniciar.java
Imagen.java
Puntuacion.java
strings.xml
ic_launcher.png
66
Desarrollo de una aplicación interactiva para el etiquetado de objetos
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="rubert.uji.uaieo"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="17" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="rubert.uji.uaieo.Uaieo"
android:label="@string/app_name"
android:screenOrientation="portrait" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name="rubert.uji.uaieo.Iniciar"
android:label="@string/app_name" >
</activity>
<activity
android:name="rubert.uji.uaieo.Puntuacion"
android:label="@string/app_name" >
</activity>
</application>
</manifest>
67
Desarrollo de una aplicación interactiva para el etiquetado de objetos
p_uaieo.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="horizontal" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_margin="20dp"
android:src="@drawable/ic_launcher" />
<ImageView
android:id="@+id/imageView2"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_margin="20dp"
android:src="@drawable/uji" />
</LinearLayout>
<TextView
android:id="@+id/texto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="@string/txttexto" >
</TextView>
<Button
android:id="@+id/boton1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:text="@string/txtboton1" >
</Button>
<Button
android:id="@+id/boton2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
68
Desarrollo de una aplicación interactiva para el etiquetado de objetos
android:layout_marginTop="20dp"
android:text="@string/txtboton2" >
</Button>
<Button
android:id="@+id/boton3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:text="@string/txtboton3" >
</Button>
</LinearLayout>
69
Desarrollo de una aplicación interactiva para el etiquetado de objetos
p_iniciar.xml
<?xml version= "1.0" encoding= "utf-8" ?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:orientation="vertical" >
<TextView
android:id="@+id/pregunta"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/pregunta" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="@+id/puntuacion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/puntuacion" />
<TextView
android:id="@+id/puntos"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/b" />
<TextView
android:id="@+id/total"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/total" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="30dp" >
<ImageView
android:id="@+id/imageView"
android:layout_width="200dp"
android:layout_height="150dp"
android:contentDescription="@string/img"
android:src="@drawable/down" />
</LinearLayout>
<LinearLayout
70
Desarrollo de una aplicación interactiva para el etiquetado de objetos
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="30dp"
android:orientation="horizontal" >
<Button
android:id="@+id/botoncero"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/etiquetacero" />
<Button
android:id="@+id/botonuno"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/etiquetauno" />
</LinearLayout>
</LinearLayout>
71
Desarrollo de una aplicación interactiva para el etiquetado de objetos
p_puntuacion.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="@+id/puntuacion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="@string/b" >
</TextView>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dip"
android:orientation="horizontal" >
<Button
android:id="@+id/boton4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="@string/limpia" >
</Button>
<Button
android:id="@+id/boton5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="@string/cerrar" >
</Button>
</LinearLayout>
</LinearLayout>
72
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Uaieo.java
package rubert.uji.uaieo;
import
import
import
import
import
import
import
import
import
import
import
android.app.Activity;
android.content.Context;
android.content.Intent;
android.net.ConnectivityManager;
android.net.NetworkInfo;
android.os.Bundle;
android.view.Menu;
android.view.View;
android.view.View.OnClickListener;
android.widget.Button;
android.widget.Toast;
public class Uaieo extends Activity {
public static final String UAIEO_prefs = "PUNTUACION";
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.p_uaieo);
((Button) findViewById(R.id.boton1)).setOnClickListener(new
OnClickListener() {
@Override
public void onClick(View v) {
if (!isOnline()){
Toast.makeText(Uaieo.this,"Verifique su conexión a
internet",Toast.LENGTH_LONG).show();
}
else{
//Toast.makeText(Uaieo.this,"conexión a
internet",Toast.LENGTH_LONG).show();
Intent intencion;
intencion = new Intent(Uaieo.this,
Iniciar.class);
startActivity(intencion);
}
}
});
((Button) findViewById(R.id.boton2)).setOnClickListener(new
OnClickListener() {
@Override
public void onClick(View v) {
Intent intencion;
intencion = new Intent(Uaieo.this, Puntuacion.class);
startActivity(intencion);
}
73
Desarrollo de una aplicación interactiva para el etiquetado de objetos
});
//
((Button) findViewById(R.id.boton3)).setOnClickListener(new
OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
}
public boolean isOnline() {
ConnectivityManager cm = (ConnectivityManager)
this.getSystemService(Context.CONNECTIVITY_SERVICE);
NetworkInfo netInfo = cm.getActiveNetworkInfo();
if (netInfo != null && netInfo.isConnectedOrConnecting()) {
return true;
}
return false;
}
public boolean onCreateOptionsMenu(Menu menu) {
}
super.onCreateOptionsMenu(menu);
getMenuInflater().inflate(R.menu.p_uaieo, menu);
return true;
}
74
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Iniciar.java
package rubert.uji.uaieo;
import
import
import
import
import
import
import
import
import
java.io.BufferedReader;
java.io.IOException;
java.io.InputStream;
java.io.InputStreamReader;
java.util.ArrayList;
java.util.Arrays;
java.util.List;
java.util.Random;
java.util.regex.Pattern;
import
import
import
import
import
import
import
import
org.apache.http.HttpEntity;
org.apache.http.HttpResponse;
org.apache.http.StatusLine;
org.apache.http.client.HttpClient;
org.apache.http.client.methods.HttpGet;
org.apache.http.client.methods.HttpUriRequest;
org.apache.http.impl.client.DefaultHttpClient;
org.apache.http.util.EntityUtils;
import
import
import
import
import
import
import
android.app.ProgressDialog;
android.graphics.Bitmap;
android.graphics.BitmapFactory;
android.graphics.Matrix;
android.os.Bundle;
android.widget.Button;
android.widget.ImageView;
public class Iniciar extends Imagen {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.p_iniciar);
gestionArchivo();
}
public void gestionArchivo() {
final ProgressDialog dialog = ProgressDialog.show(Iniciar.this,
"Descarga","Descarga");
dialog.show();
new Thread(new Runnable() {
@Override
public void run() {
try {
String url =
"http://vision.uji.es/~montoliu/UAIEO/IMG/imagenes_y_etiquetas.txt";
final String [] leido = leeLineas(url);
runOnUiThread(new Runnable() {
@Override
public void run() {
for (int i=0;i<10;i++){
75
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Pattern p = Pattern.compile(" ");
String[] aux =
p.split(leido[i]);
}
imagenes[i]=aux[0];
respuestas[i]= aux[1];
}
}
}).start();
});
} catch (IOException e) {
e.printStackTrace();
} finally{
dialog.dismiss();
siguiente();
muestra();
}
}
public String[] leeLineas (String url)throws IOException{
String[] lineas = new String[10];
try {
//Integer a = 0;
HttpClient cliente = new DefaultHttpClient();
//Peticion web, almacenamos respuesta en buffer
HttpUriRequest pideWeb = new HttpGet(url.toString());
HttpResponse respuesta = cliente.execute(pideWeb);
InputStream texto = respuesta.getEntity().getContent();
BufferedReader buffer = new BufferedReader(new
InputStreamReader(texto));
String s = "";
List<String> ls = new ArrayList<String>();
while ((s=buffer.readLine()) != null) {
//Leemos el buffer y guardamos linea a linea en una lista
ls.add(s);
}
Integer [] n = generaAleatorios(ls.size());
//Devuelve un vector de num. aleatorios ordenados
for (int a=0;a<10;a++){
lineas[a] = ls.get(n[a]);
}
ls= null;
buffer.close();
texto.close();
} catch (IOException e) {
e.printStackTrace();
}
return lineas;
}
public Integer[] generaAleatorios(Integer n)throws IOException{
Integer[] aleatorios = new Integer [10];
int i = 0 ;
int j = 0;
Random r = new Random();
aleatorios[i]= r.nextInt(n)
;
76
Desarrollo de una aplicación interactiva para el etiquetado de objetos
for(i = 1;i<10;i++){
//Rellenamos con Random
aleatorios[i]= r.nextInt(n)
;
for(j=0;j<i;j++)
{
if(aleatorios[i]==aleatorios[j])
{
i--;
}
}
}
Arrays.sort(aleatorios);
//Ordenamos ascendentemente
return aleatorios;
}
public void siguiente() {
imagen = imagenes[pregunta];
respuesta = respuestas[pregunta];
pregunta = pregunta +1;
}
public void muestra(){
Button idcero = (Button) findViewById(R.id.botoncero);
Button iduno = (Button) findViewById(R.id.botonuno);
new Thread(new Runnable() {
@Override
public void run() {
try {
final Bitmap downloadBitmap =
downloadBitmap("http://vision.uji.es/~montoliu/UAIEO/IMG/"+imagen);
final ImageView idimagen = (ImageView)
findViewById(R.id.imageView);
final Bitmap downloadBitmap2 =
redimensionar(downloadBitmap);
runOnUiThread(new Runnable() {
@Override
public void run() {
idimagen.setImageBitmap(downloadBitmap
2);
}
});
} catch (IOException e) {
e.printStackTrace();
}
}
}
}).start();
iduno.setOnClickListener(this);
idcero.setOnClickListener(this);
public Bitmap downloadBitmap(String url) throws IOException {
HttpClient cliente = new DefaultHttpClient();
HttpUriRequest pideWeb = new HttpGet(url.toString());
HttpResponse respuesta = cliente.execute(pideWeb);
77
Desarrollo de una aplicación interactiva para el etiquetado de objetos
StatusLine statusLine = respuesta.getStatusLine();
int statusCode = statusLine.getStatusCode();
if (statusCode == 200) {
HttpEntity entity = respuesta.getEntity();
byte[] bytes = EntityUtils.toByteArray(entity);
Bitmap bitmap = BitmapFactory.decodeByteArray(bytes, 0,
bytes.length);
return bitmap;
} else {
throw new IOException("Download failed, HTTP response code "
+ statusCode + " - " +
statusLine.getReasonPhrase());
}
}
public Bitmap redimensionar(Bitmap mBitmap){
//Redimensionamos
int width = mBitmap.getWidth();
int height = mBitmap.getHeight();
float scaleWidth = 150 / width;
float scaleHeight = 150 / height;
// float scaleHeight = ((float) newHeigth) / height;
// create a matrix for the manipulation
Matrix matrix = new Matrix();
// resize the bit map
matrix.postScale(scaleWidth, scaleHeight);
// recreate the new Bitmap
return Bitmap.createBitmap(mBitmap, 0, 0, width, height, matrix,
false);
}
}
78
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Imagen.java
package rubert.uji.uaieo;
import java.io.IOException;
import
import
import
import
import
org.apache.http.HttpResponse;
org.apache.http.client.HttpClient;
org.apache.http.client.methods.HttpGet;
org.apache.http.client.methods.HttpUriRequest;
org.apache.http.impl.client.DefaultHttpClient;
import
import
import
import
import
import
import
import
android.app.Activity;
android.content.Intent;
android.content.SharedPreferences;
android.os.Bundle;
android.view.View;
android.view.View.OnClickListener;
android.widget.TextView;
android.widget.Toast;
public abstract class Imagen extends Activity implements OnClickListener {
String[] imagenes = new String[10];
Declaracion de variables
String imagen;
String[] respuestas = new String[10];
String respuesta;
String pulsar;
int
int
int
int
//
pregunta = 0;
contador = 0;
correctas = 0;
total = 10;
Toast aviso;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public void onClick(View v) {
cogeBoton(v);
enviaRespuesta();
boolean acierto = false;
if (respuesta.equals(pulsar)){
acierto = true;
correctas += 1;
}
((TextView)findViewById(R.id.puntos)).setText(" "+correctas);
79
Desarrollo de una aplicación interactiva para el etiquetado de objetos
//Toast.makeText(this,respuesta+"..."+pulsar+"...",
Toast.LENGTH_SHORT).show();
String mensaje = acierto ?
getResources().getString(R.string.acierto) :
getResources().getString(R.string.fallo);
if (aviso == null) {
aviso = Toast.makeText(this, mensaje, Toast.LENGTH_SHORT);
} else {
aviso.setText(mensaje);
}
aviso.show();
contador += 1;
if (contador >= total) {
onFinish(correctas);
Toast.makeText(this,correctas+"...aciertos...de..."+total,
Toast.LENGTH_SHORT).show();
Imagen.this.finish();
startActivity(new Intent(getBaseContext(),
Puntuacion.class));
} else {
siguiente();
}
muestra();
}
public abstract void siguiente();
public abstract void muestra();
public void onFinish(int puntuacion) {
actualizaPuntuacion(puntuacion);
}
public void actualizaPuntuacion(int puntuacion) {
SharedPreferences prefs = getSharedPreferences(Uaieo.UAIEO_prefs,
Activity.MODE_PRIVATE);
SharedPreferences.Editor editor = prefs.edit();
0) + 1);
editor.putInt(Puntuacion.PARTIDAS, prefs.getInt(Puntuacion.PARTIDAS,
if (puntuacion >= 5) {
editor.putInt(Puntuacion.GANADAS,
prefs.getInt(Puntuacion.GANADAS, 0) + 1);
}
editor.putInt(Puntuacion.PUNTOS, prefs.getInt(Puntuacion.PUNTOS, 0)
+ puntuacion);
editor.putInt(Puntuacion.PARTIDA, puntuacion);
}
editor.commit();
80
Desarrollo de una aplicación interactiva para el etiquetado de objetos
public void cogeBoton(View v){
int id = v.getId();
pulsar = "";
switch (id) {
case R.id.botoncero:
pulsar = "M";
break;
case R.id.botonuno:
pulsar = "F";
break;
}
}
public void enviaRespuesta(){
new Thread(new Runnable() {
@Override
public void run() {
try {
HttpClient cliente = new DefaultHttpClient();
//Peticion web
String php =
"http://www.vision.uji.es/~montoliu/UAIEO/resultados.php?
img="+imagen+"&res="+pulsar;
HttpUriRequest pideWeb = new
HttpGet(php.toString());
//
cliente.execute(pideWeb);
HttpResponse respuestaWeb =
cliente.execute(pideWeb);
//
} catch (IOException e) {
e.printStackTrace();
}catch (Exception e) {
e.printStackTrace();
}
}
}).start();
}
}
81
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Puntuacion.java
package rubert.uji.uaieo;
import
import
import
import
import
import
import
android.app.Activity;
android.content.SharedPreferences;
android.os.Bundle;
android.view.View;
android.view.View.OnClickListener;
android.widget.Button;
android.widget.TextView;
public class Puntuacion extends Activity {
public
public
public
public
static
static
static
static
final
final
final
final
String
String
String
String
PARTIDAS = "Partidas";
GANADAS = "Ganadas";
PUNTOS = "Puntos";
PARTIDA = "Partida";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.p_puntuacion);
cargar();
((Button) findViewById(R.id.boton4)).setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
limpiar();
cargar();
}
});
((Button) findViewById(R.id.boton5)).setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
}
private void cargar() {
SharedPreferences prefs
Activity.MODE_PRIVATE);
=
getSharedPreferences(Uaieo.UAIEO_prefs,
int n = prefs.getInt(Puntuacion.PARTIDAS, 0);
StringBuilder sb = new StringBuilder();
if (n != 0) {
82
Desarrollo de una aplicación interactiva para el etiquetado de objetos
int gana = prefs.getInt(Puntuacion.GANADAS, 0);
int punto = prefs.getInt(Puntuacion.PUNTOS, 0);
int partida = prefs.getInt(Puntuacion.PARTIDA,0);
sb.append(getResources().getString(R.string.ganadas))
.append(String.format("%.2f", (double)gana / n * 100))
.append(getResources().getString(R.string.media))
.append(String.format("%.2f", (double)punto / n))
.append(getResources().getString(R.string.jugadas))
.append(n)
.append(getResources().getString(R.string.aciertos))
.append(partida)
.append("\n\n");
} else {
sb.append(getResources().getString(R.string.sinPuntuacion));
}
}
((TextView) findViewById(R.id.puntuacion)).setText(sb.toString());
private void limpiar() {
SharedPreferences prefs = getSharedPreferences(
Uaieo.UAIEO_prefs, Activity.MODE_PRIVATE);
SharedPreferences.Editor editor = prefs.edit();
editor.putInt(Puntuacion.PARTIDAS, 0)
.putInt(Puntuacion.PUNTOS, 0)
.putInt(Puntuacion.GANADAS, 0);
editor.commit();
}
}
83
Desarrollo de una aplicación interactiva para el etiquetado de objetos
strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">uaieo</string>
<string name="txttexto">Bienvenvido a UAIEO (Una Aplicacion Interactiva
para el Etiquetado de Objetos)</string>
<string name="txtboton1">Iniciar Partida</string>
<string name="txtboton2">Puntuación</string>
<string name="txtboton3">Salir</string>
<string name="img">Hombre o Mujer</string>
<string name="etiquetacero">Hombre</string>
<string name="etiquetauno">Mujer</string>
<string name="Atras">Atrás</string>
<string name="menu_settings">Settings</string>
<string name="puntuacion">Aciertos :\u0020</string>
<string name="pregunta">¿Es un hombre o una mujer?</string>
<string name="acierto">Has acertado!!! Bien!!!</string>
<string name="fallo">Lo lamento, has fallado.</string>
<string name="limpia">Limpiar</string>
<string name="cerrar">Cerrar</string>
<string name="b">\u0020</string>
<string name="li">lineas</string>
<string name="total">\u0020de 10.</string>
<string name="sinPuntuacion">No hay estadisticas\n</string>
<string name="ganadas">ESTADISTICAS:\nPartidas ganadas % :\u0020</string>
<string name="media">\nMedia de aciertos:\u0020</string>
<string name="jugadas">\nPartidas Jugadas:\u0020</string>
<string name="aciertos">\nAciertos de la última ronda:\u0020</string>
<string name="findeljuego">Fin del juego</string>
</resources>
ic_launcher.png
84
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Anexo E: Referencias
De forma general durante todo el desarrollo del proyecto se ha accedido a la pagina web de Android para la documentación y consultas acerca de las librerias : http://developer.android.com/
De igual manera se ha accedido a la wikipedia para los conceptos desconocidos o aclarar los que
presentaban dudas: http://es.wikipedia.org/wiki/Wikipedia:Portada
Presupuesto: Personal: http://www.ine.es/prensa/np741.pdf
Smartphones : http://www.puntogeek.com/2011/01/14/breve-historia-de-los-smartphones/
Sistemas operativos:
Symbian: http://www.results.nokia.com/results/Nokia_results2012Q4e.pdf
Bada: http://elpais.com/diario/2012/01/17/radiotv/1326754801_850215.html
Tizen: https://www.tizen.org/
Garner: http://www.gartner.com/newsroom/id/2335616
Aplicaciones y Juegos: http://blog.appannie.com/app-annie-index-market-q1-2013/
Android: http://cv.uoc.edu/~javiercg/practica_final/modulo5.html
http://www.androidcurso.com/
Aplicaciones: http://www.sgoliver.net/blog/?page_id=3011
Java: http://www.ecured.cu/index.php/Java
Diseño: carpetas: http://androidzone.org/2012/08/estructura-de-un-proyecto-android/
Diagrama de clases: http://www.objectaid.com
Generar .APK:
http://alejocram.blogspot.com.es/2013/02/firmar-aplicacion-android-para-pruebas.html
85
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Anexo F: Propuesta Técnica
Se expone la propuesta técnica íntegramente tal como se presento a fecha de 23 de febrero de
2013. La misma se corresponde con el capítulo 1 de la presente memoria.
Índice de contenido
Introducción........................................................................................................................................87
Objetivos.............................................................................................................................................87
Alcance...............................................................................................................................................87
Figura 1. Diagrama de casos de uso...................................................................................................88
Planificación.......................................................................................................................................89
División del proyecto en tareas .........................................................................................................89
Planificación temporal del proyecto y precedencias entre tareas.......................................................89
Figura 2. Diagrama de Gantt con la duración de las tareas y precedencias.......................................89
Figura 3. Diagrama de Gantt..............................................................................................................90
Figura 4. Diagrama de Red o PERT...................................................................................................91
Presupuesto.........................................................................................................................................92
Figura 5. Uso de Recursos..................................................................................................................92
Figura 6. Diagrama EDT (Estructura de Descomposición del Trabajo) con costes asociados..........93
86
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Introducción
Este proyecto corresponde a la asignatura IS31 Proyectos Informáticos de Sistemas, de 3er Curso
de Ingeniería Técnica en Informática de Sistemas en la Universitat Jaume I de Castellón.
Lo que se pretende con este proyecto es realizar una aplicación que permita al usuario a evaluar
una determinada imagen, en este caso si es un hombre o una mujer, para ello nos serviremos de
dispositivos móviles con el sistema operativo Android, sistema propiedad de Google en creciente
popularidad y líder de mercado.
Además este proyecto pretende ir un paso más allá introduciendo modificaciones en las
imágenes de forma que dificulte al usuario la tarea de forma progresiva, de esta forma la aplicación
pasa a ser en parte un juego, que pasara a formar parte del conjunto de proyectos e investigaciones
que esta llevando el grupo de Visión de la Universitat Jaume I.
Para el desarrollo de la aplicación nos serviremos de la plataforma de desarrollo Eclipse y se
desarrollara en lenguaje de programación Java. En esta propuesta se define la planificación del
proyecto, así como la distribución de las distintas tareas, sus relaciones y sus costes asociados.
Objetivos
Diseñar una aplicación sobre un dispositivo Android que permita el etiquetado de imágenes, la
cual deberá cumplir los siguientes objetivos:
•
Realizar una conexión con el servidor donde están alojadas las imágenes para la descarga de
las misma.
•
Modificación de las imágenes para añadirle dificultad como cambios de color , ocultación de
partes del rostro y otros efectos de distorsión.
•
Gestión de los resultados del juego: aciertos y fallos.
Alcance
Alcance funcional: El usuario podrá acceder a la aplicación como si de un juego convencional se
tratase, superando niveles y obteniendo una puntuación según su tasa de aciertos y fallos.
Alcance informático: Será necesario un dispositivo Android donde funcionara la aplicación y se
realizaran las pruebas durante la fase de desarrollo, un ordenador donde instalar el entorno de
desarrollo y programar la aplicación, y un servidor donde estén alojadas las imágenes.
De estos elementos, el alumno ya dispone de los dos primeros, un teléfono Sony Ericsson
Xperia Neo V con sistema operativo Android 4.0 y un ordenador portátil Dell Inspiron 1520 con
una distribución Ubuntu de Linux. El laboratorio del grupo de Visión dispone de las imágenes en un
servidor accesible.
Alcance organizativo: El proyecto se realizara por un alumno y un profesor que se encargara de
dirigirlo. Se realizará en el laboratorio del grupo de Visión con una duración aproximada de cuatro
meses.
87
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Uso normal del móvil
APLICACIÓN
Conexion Servidor
Iniciar Partida
Descarga Imágenes
Modificar imágenes
Usuario/Jugador
Etiquetar
Cambio de nivel
Ver Resultados
Finalizar Partida
Figura 1. Diagrama de casos de uso.
88
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Planificación
Para la planificación se ha utilizado el programa OpenProj.
División del proyecto en tareas
1. Propuesta técnica.
1.1. Entrevista previa con el tutor.
1.2. Búsqueda de información.
1.3. Desarrollo de la propuesta técnica.
2. Desarrollo.
2.1. Instalación Herramientas.
2.2. Documentación.
2.3. Desarrollo de la aplicación.
2.3.1. Descarga de imágenes.
2.3.2. Modificación imágenes.
2.3.3. Interacción usuario.
2.3.4. Pruebas y test.
3. Revisión final.
3.1. Redacción memoria final
3.2. Preparación de la presentación.
Planificación temporal del proyecto y precedencias entre tareas
Para la planificación temporal se ha tomado como base un calendario laboral de lunes a viernes
con una jornada de cuatro horas dedicadas al proyecto, tomando como festivos la semana de la
Magdalena y semana y media en Pascua.
Figura 2. Diagrama de Gantt con la duración de las tareas y precedencias.
89
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Figura 3. Diagrama de Gantt.
90
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Figura 4. Diagrama de Red o PERT
91
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Presupuesto
Personal: Se asume el sueldo de un programador junior sin experiencia y recién titulado durante
350 horas o 2 meses a jornada completa. A falta de otras referencias y teniendo en cuenta la actual
situación de crisis en España por una parte y que la informática es una de las profesiones con menos
paro por la otra, se toma como sueldo 6 euros/hora (1.000 euros al mes aproximadamente) lo que
resulta en un coste de personal de 2.100 euros
Hardware: El alumno ya dispone de ordenador y dispositivo móvil Android por lo que el coste
real es cero. El coste teórico se calculará teniendo en cuenta el equipo real con que se realizará el
proyecto. Será por una parte un ordenador portatil de 1.100 euros y 6 años de antigüedad por lo que
su valor actual se considera inferior a 500 euros. El dispositivo móvil costo 160 euros de segunda
mano hace 6 meses por lo que se considera su valor actual sobre los 100 euros. El laboratorio a
traves de la UJI proporciona el servidor de imagenes, a falta de informacion sobre este coste se
considerara de forma temporal como coste cero. Coste total 600 euros.
Software: El ordenador dispone de una distribución Linux, Ubuntu 12.04 gratuita. El entorno de
programación Eclipse , el SDK(software development kit), etc es gratuito. La totalidad del software
es libre por lo que el coste en este apartado es cero.
Totales: 2.100 + 600 + 0 = 2.700 euros.
Figura 5. Uso de Recursos.
92
Desarrollo de una aplicación interactiva para el etiquetado de objetos
Figura 6. Diagrama EDT (Estructura de Descomposición del Trabajo) con costes asociados.
93

Documentos relacionados