¡Programa tu juego o aplicación y la verás publicada en Play Store GRATIS!

Ya sabes lo básico para hacer una aplicación o juego sencillo con App Inventor. Ahora sólo necesitas práctica y una buena idea de aplicación.

Realiza una aplicación con App Inventor, exporta el proyecto y envíalo a cebrianmarquez@gmail.com.

¡Las mejores aplicaciones serán publicadas en Play Store GRATIS!*

Si quieres ver tu aplicación publicada para que todo el mundo la pueda descargar en sus telefonos Android, ¡anímate y empieza ya a programarla!

(*): Publicación en la cuenta oficial del profesor, los derechos y la autoría de la aplicación o juego seguirán siendo propiedad del alumno desarrollador del mismo. Válido solo para alumnos del I.E.S. Las Salinas de Seseña (Toledo) y sólo para aplicaciones recibidas hasta el 10 de Julio de 2016.

Paso 9: Programando nuestro primer juego con Canvas

Uno de los juegos más sencillos de programar en Flash era el de darle al topo, en el que uno o varios topos aparecían por la pantalla y teniamos que presionar en ellos para acumular puntos.

Para App Inventor vamos a hacer uno similar. La lógica completa del juego se resume en esta imagen:

En ella se puede observar lo siguiente:

• Bloques "to ... do" que son procedimientos. Reunen un conjunto de acciones. Se llaman desde distintas partes del programa con "call ..." y se usan para no repetir muchas veces la misma lógica. Son el equivalente a las funciones de lenguajes de alto nivel.
• "random.fraction": genera valores aleatorios, útil para hacer que el topo aparezca cada vez en un sitio distinto, cambiamos su posición x e y aleatoriamente, teniendo en cuenta la anchura del canvas (marco) y la anchura del topo.

Además, en este juego se hace uso del objeto "canvas", que permite trabajar dentro de él con objetos, como podrás ver en el vídeo de demostración.


Si estás interesado en más efectos especiales utilizando el "canvas" para tus juegos, puedes consultar la guía resumen siguiente:
http://appinventor.mit.edu/explore/sites/all/files/ConceptCards/ai2/AI2_ConceptCards.pdf

TAREAS PARA EL ALUMNO

Busca una imagen de un topo (u otro animal o persona) y un fondo a elegir. Lleva a cabo el tutorial paso a paso para realizar tu propio juego estilo "dale al topo".

Paso 8: Haciendo operaciones matemáticas en bloques

Con los bloques de App Inventor se puede hacer prácticamente cualquier cálculo de los que permiten los lenguajes de programación del alto nivel (sumas, restas, multiplicaciones, divisiones, restos, raíces, ...etc).

Como ejemplo, puedes ver paso a paso como realizar una aplicación completa que te será muy util para tus clases de matemáticas, un solucionador de ecuaciones de segundo grado (del tipo ax2 + bx + c).

TAREAS PARA EL ALUMNO

Crea la aplicación del ejemplo, llámala "Paso8" e intenta crear una aplicación similar, como un calculador automático de potencias (dada una base y un exponente), un calculador de divisores de un número, ...etc.

Paso 7: Crear múltiples pantallas y almacenar datos persistentes

Casi todas las aplicaciones móviles modernas están compuestas de múltiples pantallas (Screens). Se utilizan para mostrar elementos independientes en cada momento. Por ejemplo, la aplicación WhatsApp tiene una pantalla principal de mensajes, cada chat de usuario o grupo se gestiona en una pantalla distinta.

Nosotros podemos hacer lo mismo en nuestras aplicaciones, pulsando el botón "Añadir pantalla" (Add Screen). Desde el Diseñador, la pantalla aparecerá vacía y podremos cambiar de una pantalla a otra fácilmente. Desde Bloques, la lógica de bloques también estará vacía, pero podremos guardar datos de una pantalla a otra por medio de una base de datos TinyDB.

Una base de datos TinyDB almacena los datos que queramos en nuestra aplicación para luego restaurarlos siempre que queramos. Es muy fácil de usar.

A continuación tienes un ejemplo de cómo crear varias pantallas y de cómo utilizar TinyDB para almacenar datos.

TAREAS PARA EL ALUMNO

Reproduce el ejemplo del vídeo y practica creando una tercera Screen con un label que obtenga automáticamente el datos de la base de datos TinyDB cuando la Screen se cargue.

Paso 6. Cómo ordenar los elementos de la interfaz

Al colocar los elementos de nuestra interfaz en el Diseñador, muchas veces veremos que, según la pantalla del móvil, los elementos se descolocan o no aparecen como nosotros queremos.

En una aplicación de prueba que hice utilicé las Disposiciones (Arrangements):

• Son como contenedores donde introducir los elementos que queramos ordenar.
• Podemos meter uno dentro de otro, para ello, nos será muy util el organizador de la derecha del Diseñador. Podremos arrastar y soltar elementos o Disposiciones para colocarlas dentro de otras.
• Las hay Horizontal, Vertical y Tabular. Por ejemplo, si queremos que los elementos se distribuyan horizontalmente, usaremos la horizontal. La tabular es para colocarlos en una tabla y se usa para más de dos componentes adyacentes.

TAREAS PARA EL ALUMNO

Crea una aplicación llamada "Paso6" en la que intentes reproducir la misma distribución del ejemplo.

Mira atentamente como están colocados los elementos en el ejemplo.

• Dentro del VerticalArrangement3 hay contenido otro VerticalArrangement2 para mantener colocados los elementos de la caja de texto y los botones en horizontal. 
• Los dos botones se mantienen en horizontal gracias a que están incluidos en HorizontalArrangement2, que a su vez está incluido en VerticalArrangement2.
• Los elementos sin interfaz (TextToSpeech1 y SpeechRecognizer1) van fuera de las Disposiciones, no tiene sentido ordenarlos.

Paso 5. Entendiendo cómo funcionan los bloques

Los bloques es, como ya hemos visto en otros pasos, lo que definen la funcionalidad a los elementos que hemos colocado en la parte de Diseño.

En App Inventor no necesitamos saber programar utilizando comandos o sintaxis, tan sólo tenemos que saber qué debe ir en cada sitio, es decir, que gráficamente todos los bloques encajen y tengan sentido.

En el editor de bloques, en la esquina inferior izquierda aparecerán los errores en rojo. Si hay errores, la aplicación no funcionará. Si hay warnings (en amarillo) significa que la aplicación puede funcionar pero puede que algún bloque esté mal colocado o vacío.

TAREAS PARA EL ALUMNO

Crea una aplicación sencilla llamada "Paso5" en la que crees el ejemplo propuesto, con la imagen y el sonido que desees.

En la imagen puedes ver los bloques necesarios para que cuando se pulse una imagen, se inicie un sonido y el móvil vibre (bloque superior) y que cuando se agite el móvil, se inicie también el sonido.

Para que funcione, debemos de seguir los siguientes pasos:

1. Debemos poner en el Diseñador la imagen en un botón (Button1) y el sonido (Sound1).
2. Desde el editor de bloques, arrastrar el bloque Cuando (When) asociado a la acción del botón de la imagen.
3. Por último, rellenamos con las acciones de iniciar un sonido y de vibrar (opciones del sonido) y le indicamos cuantos milisegundos vibrar (en el conjunto de funciones de matemáticas, está el de poner un valor cualquiera).

Puedes ver paso a paso como se hace este ejemplo en el siguiente video o bien, si lo prefieres, en el enlace oficial al tutorial de App Inventor.

Paso 4. Usando API's

Las API's con las librerías que App Inventor (y otros lenguajes de programación) facilitan para que los programadores no tengan que programarlas desde cero.

Las más útiles en App Inventor son todas aquellas que usan el sintetizador de voz y el reconocimiento de voz. Ambas son propietarias de Google y están disponibles como API's en App Inventor.

TAREAS PARA EL ALUMNO

Si quieres comprobar como funcionan, puedes descargar la aplicación de prueba "DictaTexto" o bien puedes realizar el tutorial siguiente, donde verás que sencillo es utilizar API's. NOTA: Para que funcione correctamente, el motor de sintetización de voz de Google tiene que estar instalado en el móvil o emulador.

Lista completa de videotutoriales de Joel Vega-i-Vidal

Paso 3. Creando una aplicación básica

Una vez registrado en la página de App Inventor ya podemos crear nuestra primera aplicación.

Desde la sección del "Diseñador" se arrastran y sueltan al Screen todos los elementos que se deseen. Se pueden colocar utilizando disposiciones y dividiendo los elementos en distintas Screens (luego lo veremos).

Una vez terminada la interfaz, pulsa el botón "Bloques" para asignar la funcionalidad a los elementos del Screen añadidos anteriormente.

TAREAS PARA EL ALUMNO

Reproduce los pasos del tutorial, llama a la aplicación "ejemplo1" y pruébala en un dispositivo o emulador de Android.

Paso 2. Iniciando MIT App Inventor

Bien, si realizaste el primer paso correctamente y tienes una cuenta de Gmail, ya estás listo para poder iniciar MIT App Inventor.

Esta vez veremos como iniciar MIT App Inventor, sus secciones principales y cómo enlazar el móvil para realizar las pruebas y ver nuestro programa en funcionamiento. Sigue los pasos del videotutorial:

1. Visita la página de MIT App Inventor: http://ai2.appinventor.mit.edu
2. Inicia sesión con tu cuenta de Gmail y da permisos a MIT App Inventor para que puedas iniciar sesión con tu cuenta.
3. Enlaza el móvil o emulador con MIT App Inventor, yo en el videotutorial lo hago paso a paso utilizando Ubuntu Linux.

TAREAS PARA EL ALUMNO:

Sigue los pasos del videotutorial, indica en comentarios todos los problemas que hayas tenido durante el desarrollo de la práctica.

Paso 1. Preparando el móvil o el emulador.

MIT App Inventor es una herramienta web, no requiere obligatoriamente que tengas ninguna aplicación instalada, tan sólo una cuenta de correo Gmail (luego veremos cómo registrarnos). Sin embargo, para probar las aplicaciones que crees, necesitarás:

• Un móvil Android con la aplicación AI2 Companion instalada y con conexión WIFI.
• El emulador de Android instalable en cualquier tipo de sistema operativo (para los casos que no tengamos un móvil Android a mano).

Este es el primer paso, luego veremos por qué es tan necesario configurar un móvil o un emulador correctamente.

La instalación del emulador en Windows es muy sencilla, tan sólo hay que descargar e instalar la última versión del emulador.

La instalación del emulador en Linux es un poco más complicada, por eso explico en un videotutorial como instalarlo y arrancarlo en una Ubuntu.

TAREAS PARA EL ALUMNO: 

Instala un emulador de Android compatible con tu sistema operativo o bien instala la aplicación AI2 Companion en tu móvil Android. Usa los enlaces indicados para descargarlos y comenta todas las dudas que tengas.

Bienvenidos a AulApp!

Mi nombre es José Luis Cebrián Márquez, soy profesor de F.P. de Informática y desarrollador web y de aplicaciones móviles.

En un intento por mezclar mis dos grandes pasiones (desarrollo móvil y docencia) he creado este blog para facilitar a todos los profesores y alumnos el aprendizaje y uso de la herramienta de desarrollo móvil App Inventor.

Sigue paso a paso los tutoriales de configuración y uso y verás que sencillo es programar aplicaciones móviles para Android.

¡Ánimo! ¡Estás a sólo unas horas de crear tu primera App!