Introduction: Puzzle Botánica / Animales

Puzzle Botánica / Animales es un proyecto que se ha desarrollado por estudiantes de la Universidad Autónoma de Occidente para la asignatura Arquitectura de sistemas multimedia. El proyecto consiste en el rediseño del juguete puzzle de animales y botánica propuesto por María Montessori.

El objetivo principal del proyecto es mediar tecnológicamente las tres actividades principales que se pueden realizar con el juguete, también reconocer cuando una de estas se ha realizado correctamente y por quién ha sido utilizado el juguete.

Las tres actividades principales son:

-Armar el rompecabezas

-Agrupar las láminas según el animal o planta al que corresponden

-Identificar los nombres de cada parte del rompecabezas

Para el desarrollo del proyecto se decidió realizar una aplicación móvil, la cual contiene las 3 actividades principales del juguete.

Para el diseño de la aplicación se necesita un desarrollador y un diseñador, el desarrollador se encarga de todo el back-end de la aplicación y el diseñador del front-end.

A continuación se explicará el paso a paso para desarrollar la app móvil.

Step 1: Diseño De La Aplicación Móvil

Para el diseño de la aplicación móvil se utilizó Adobe Illustrator.

Adobe Illustrator es un editor de gráficos vectoriales, cuyo objetivo principal es la creación artística de dibujo e ilustración.

Creación de interfaces

Paso 1:

Para la creación de cada interfaz se define cuantas debe tener la aplicación, en este caso, fueron 6.

-Inicio de la app.

-Inicio de sesión.

-Menú principal.

-Tres actividades.

Paso 2:

Se crea un nuevo archivo en Adobe Illustrator del tamaño de la pantalla del celular en dónde se irá a instalar la app. Después de esto se pasa a diseñar cada interfaz.

Inicio de la app (Ver imagen): Para esta interfaz se vectorizan con la herramienta pluma varias fichas de un rompecabezas y se pintan de diferentes colores, después con la herramienta de texto, escribimos el nombre de la app, en nuestro caso puzzle botánica / animales.

Inicio de sesión(Ver imagen): Para el inicio de sesión solo se utilizó un fondo con varias figuras (estas figuras se hicieron con la herramienta rectángulo )y de color morado, se vectorizaron dos niños y se ubicaron en la parte superior de la interfaz.

Menú principal (Ver imagen): Para el menú principal se utilizó el mismo fondo con varias figuras pero de otro color, se vectorizó una ficha de rompecabezas que se ubicó en la parte superior del menú principal.

Tres actividades(Ver imagen): Para las tres actividades el diseño de la interfaz se hizo principalmente en Android Studio, en Adobe Illustrator ser realizaron solo los fondos, estos fondos son también con varias figuras pero cada uno de diferente color.

Paso 3:

Por última se realiza el diseño del icono de la app(Ver imagen), para el diseño se vectorizan cuatro fichas de rompecabezas que encajan entre sí, cada una de un color distinto.

NOTA: Algunas de las ilustraciones utilizadas en la aplicación móvil fueron sacadas de www.freepik.es, por tanto los créditos van a sus respectivos autores. Esta página es una herramienta en donde se encuentran vectores, imágenes, etc., totalmente gratis.


Step 2: Desarrollo De La Aplicación Móvil

Para el desarrollo de la aplicación móvil se usó Android Studio. Android Studio es el IDE oficial para el desarrollo de aplicaciones para Android y es libre. Se puede descargar en este link

Para crear esta aplicación en Android Studio lo primero es crear un proyecto y seleccionar una actividad vacía.

Por defecto Android Studio crea una clase java y un layout, esta clase se llama MainActivity y el layout se llama activity_main.xml. En los xml se diseñan las interfaces, en estos xml se hace uso de los recursos gráficos que se realizaron en Adobe illustrator y en la clase java se realizan las interacciones entre estas interfaces.

Primero que todo, antes de empezar con el desarrollo de la aplicación debemos ir a la página de OkHttp para conseguir el compile que debemos incluir en el proyecto de Android Studio y así poder trabajar con esta librería.

Una vez en la página de OkHttp buscaremos el título Graddle y copiaremos la línea que aparece ahí.

Algo como esto: compile 'com.squareup.okhttp3:okhttp:3.8.0' (ver imágenes al inicio de este paso)

Esta línea se debe agregar en el build.graddle (Module:app) en el apartado de dependencias y le damos click en el botón sync now que nos aparecerá en la parte superior. (ver imágenes al inicio de este paso)

En caso de que no nos aparezca este aviso, vamos a la barra de herramientas en la parte superior de la interfaz y le daremos click en el icono Sync project with Gradle files. (ver imágenes al inicio de este paso)

Ahora podemos empezar con el desarrollo de la aplicación.

Para esta aplicación se realizan 7 clases que son: MainActivity, SplashActivity, ActividadesActivity, ArmarActivity que corresponde a la actividad número 1, AgruparActivity que corresponde a la actividad número 2 , 1 clase Pregunta1Activity que corresponde a la actividad 3. Por último la clase Diálogos.

A cada una de estas clases se le crea un layout los cuales son: activity_main, activity_splash, actividades_layout, agrupar_activity y el layout de la actividad número 3 que es activity_pregunta1.

La clase principal es MainActivity y en ella se realiza el login con una conexión a un servidor, en el layout que pertenece a esta clase que es activity_main, se diseña la interfaz del login, en esta interfaz se le presenta al usuario un campo para agregar su usuario y un botón para identificarse.

La siguiente clase es SplashActivity, esta clase se hace con el fin de iniciar la aplicación móvil con la imagen del logo de la app, antes del inicio de sesión, el objetivo es que la aplicación tenga una mejor estética, cuando se incluye esta clase se debe ir al archivo AndroidManifest y poner la clase SplashActivity como launcher y la MainActivity como clearsplash para que sea la clase que se pone cuando el SplashActivity se limpia.

El layout activity_splash es la interfaz de la clase SplashActivity y aquí simplemente se usa una imagen con el diseño del logo de la app.

La siguiente clase es ActividadesActivity, en esta clase se da acceso a las 3 actividades principales, en el layout que pertenece a esta clase que es actividades_layout, se diseña la interfaz del menú principal, en esta interfaz se le presenta al usuario 3 botones cada uno con el nombre de cada actividad.

La siguiente clase es ArmarActivity, en esta clase se realiza la actividad uno que es armar el rompecabezas, que corresponde a esta clase (al usuario se le presentan fragmentos de la imagen de un animal o planta en la parte inferior de la pantalla y en la superior se deben ubicar. Para ubicar imágenes en pequeños cuadros en la pantalla de tal manera que queden como fichas se hace uso de un Grid layout.

En esta actividad el usuario debe deslizar cada fragmento en la posición correcta, esto se hace por medio de una función llamada drag and drop. Si quieres ver el funcionamiento básico de esto puedes ver este vídeo en Youtube

La siguiente clase es AgruparActivity, en donde el usuario debe armar los grupos de láminas de manera correcta, para esto también se usa un Grid layout, diviendo la pantalla en 6, en la parte superior se indica lo que debe hacer el usuario, y están las láminas que se deben ubicar en algún recuadro de la parte inferior de la pantalla, esto también se realiza con la función drag and drop.

La última clase es la que corresponde a la actividad número 3, que es pregunta1_Activity, en las tres primeras preguntas se le dan solo dos opciones al usuario que responde con falso y verdadero, solo puede pasar a la siguiente pregunta si responde bien, las otras tres preguntas son de selección múltiple, tiene 4 opciones y para pasar a la siguiente pregunta se debe responder correctamente la anterior. De acuerdo al número de pregunta, se le muestran las opciones correspondientes por medio de strings y de acuerdo también al número de pregunta, el usuario gana seleccionando distintos botones.

Al finalizar cada actividad la aplicación te muestra un diálogo indicando que has hecho correctamente la actividad y te envía al menú principal.

La última clase es la clase Diálogos. En esta clase se crean los diálogos indicando que el usuario realizó correctamente las actividades y desde esta se hacen los post HTTP al servidor.

Al inicio de este paso están los vídeos de todas las versiones de la aplicación hasta la aplicación final.

Si deseas descargar el proyecto completo da clic en el siguiente link:

https://drive.google.com/open?id=0B33i0atGcpyyd0FK...

Step 3: Evidencias

Algunas imágenes del proceso de desarrollo de la aplicación