APP INVENTOR 2

MIT App Inventor 2 es una plataforma que nos permite crear aplicaciones interactivas utilizando un smartphone y un pc.

Para saber mas sobre APP INVENTOR ingresa aquí.

Haremos click en GET STARTED y luego SETUP INSTRUCTIONS

                            Luego descargas la versión recomendada o la que te acomode más.

Debemos descargar la MIT AI2 Companion app, en nuestro smartphone - para eso hacer click en el siguiente enlace. (versión recomendada)

Una vez descargada la app en nuestro celular, ingresar a la siguiente pagina.

Nos encontraremos en la siguiente pagina, hacer click en START A BLANK PROJECT.

HACER CLICK EN LA IMAGEN PARA VER EN TAMAÑO GRANDE

Nos saldra un cuadro donde ingresaremos el nombre de nuestro proyecto, y nos enviara a la siguiente pantalla.

HACER CLICK EN LA IMAGEN PARA VER EN TAMAÑO GRANDE

Y listo, ya estamos ad portas de crear nuestra propia app móvil.

Como podemos ver en la imagen, al centro se encuentra una representación de nuestro móvil (donde dice Visor) a la izquierda en el área donde dice Paleta, se encuentran los componentes que podemos agregar a nuestra aplicación. Para hacer esto simplemente basta con tomar el componente deseado y arrastrarlo a la pantalla del móvil.

Nuestra primera aplicación será un juego tipo pong muy simple. Consiste en una pelotita que rebota en los bordes. Hay que capturar la pelotita con una caja. Debemos capturar 10 pelotitas para ganar para lo cual se tiene un contador. El problema que se presenta es que cada vez que capturamos una pelotita la velocidad aumenta.

Para esto lo primero es colocar un contenedor o Lienzo que es nuestra base para colocar los componentes animados necesarios en este juego de pong.

Para colocar el lienzo nos vamos a Paleta - Dibujo y animación.

Arrastramos Lienzo a la pantalla del movil virtual. 

Nos quedara asi, debemos ajustar el lienzo para que cubra toda la pantalla, para ajustar el tamaño del Lienzo nos vamos a Propiedades y ajustamos el Alto y Ancho al tamaño del contenedor.

HACER CLICK EN LA IMAGEN PARA VER EN TAMAÑO GRANDE

Agregar Pelota al Lienzo

Cambiar color y deja la velocidad de la pelota en 5 en Propiedades.

Para comprobar nuestro progreso Guardaremos nuestro proyecto y lo revisaremos con la app que descargamos anteriormente en nuestro smartphone.

Para revisar nuestro avance nos vamos a la parte superior de la pantalla al lado de Proyectos hacemos click en Conectar y seleccionamos AI Companion.

Y nos mostrara un codigo QR

Que nosotros debemos escanear con la cámara de nuestro smartphone utilizando la MIT AI2 Companion app.

Si los cambios que hacemos no se han aplicado debemos hacer click en Refresh connection o Refresh companion screen en Conectar.

Ahora para programar los movimientos del componente que agregamos, en este caso la Pelota, debemos ir a la seccion Bloques.

HACER CLICK EN LA IMAGEN PARA VER EN TAMAÑO GRANDE

Seleccionamos la Pelota en el área de Bloques, al hacer esto se mostraran todos los comportamientos programables que la aplicación nos da la capacidad de modificar o agregar.

Queremos hacer que la pelota rebote al tocar los bordes de la pantalla por lo tanto nos vamos al bloque Cuando Pelota TocarBorde Ejecutar

Haz nuevamente clic en Pelota del área Bloques, y selecciona la acción Llamar Pelota y Apuntar En La Dirección x, y

Y encajar en el bloque anterior.

Haremos que la pelota rebote en direcciones aleatorias, para esto necesitamos una función matemática.

Selecciona el bloque Matemática y busca el bloque entero aleatorio entre.

Y dejaremos el valor predeterminado que es de entre 1 y 100.

Lo duplicamos y lo encajamos en x e y.

Descargar la imagen de una caja que sea de poca resolución.

Estando en modo de Diseño seleccionamos SpriteImagen desde la Paleta y la arrastramos a nuestro lienzo en Screen1.

Selecciona SpriteImagen en el área de componentes y luego el botón Subir archivo en el área Medios.

Selecciona la imagen de la caja que descargaste y subela.

En Propiedades de SpriteImagen selecciona Foto y selecciona un archivo.
Programaremos el siguiente evento: Cuando arrastremos el SpriteImagen lo moveremos a otra posición.
Nos vamos al modo Bloques selccionales SpriteImagen y el bloque cuando SpriteImagen1 Arrastrado ejecutar.

Luego seleccionamos llamar SpriteImagen MoverA x, y y lo encajamos en al bloque anterior.

Si arrastramos en SpriterImagen a una nueva posición los valores de las propiedades de x e y deben tomar los nuevos valores, para esto colca el cursor sobre XActual.

Selecciona tomar XActual y encaje el bloque para x. Realiza lo mismo para y.
Agregaremos un nuevo evento que consiste en lo siguiente: Cada vez que colisione la Pelota1 con el SpriteImagen1 la pelota debe rebotar apuntando a una nueva dirección.
La acción que la Pelota1 apunte a una nueva dirección ya la tenemos por lo tanto lo duplicaremos. Basta agregar el bloque de colisión de SpriteImagen1 quedando de la siguiente manera.

Recuerda que puedes revisar tu progreso en tu Companion App en tu Smartphone haciendo click en Refresh Companion Screen

Le agregaremos un contador de colisiones, para esto necesitamos un campo de texto para ir mostrando la cantidad de colisiones que se van generando. Nos vamos al modo de Diseño y agregaremos un campo de texto desde Paleta / Interfaz de usuario.
No podemos agregar el campo de texto al lienzo por lo tanto necesitamos cambiar el tamaño del Lienzo, Para esto seleccionamos Lienzo desde el área Componentes y cambiaremos el Ancho y el Alto. Cambia por 80% el alto y el Ancho.

Seleccionamos el área Paleta /Interfaz de usuario y arrastramos debajo del lienzo el CampoDeTexto como se muestra en la imagen.

Necesitamos una variable global llamada contador inicializada en 0, que sea reconocida por todas las componentes, para esto vamos al modo Bloque y seleccionamos Variables y arrastramos inicializar global nombre como.

En el área Visor haz doble clic en nombre y cámbialo por contador.
Para inicializar el valor necesitamos un valor Matemático 0, Selecciona Matemáticas en Bloques y selecciona el primer bloque de valor y encájalo en Inicializar global.

El evento de colisión es el siguiente: Cada vez que colisiona SpriteImagen1 con la Pelota1 debemos incrementar el contador y escribir su valor en el Campo de Texto.
Para incrementar en 1 el valor del contador necesitamos poner el contador al valor de la suma del valor actual del contador más 1 Para sumar seleccionamos el bloque + de Matemática y lo completamos con:
Tomar el valor de la variable global de contador más el valor 1 de un bloque de Matemática. Deberia quedar así

Este valor obtenido debe cambiar el valor de la variable global contador. Es decir, poner en la variable un nuevo valor Asigna el nombre al bloque poner y encaja el bloque de la suma, obteniendo lo siguiente.

Como queremos actualizar el campo de Texto debemos poner en el CampoDeTexto un Texto con el valor de la variable global contador.
Seleccionamos en el área de Bloque el CampoDeTexto y seleccionamos el bloque poner CampoDeTexto el Texto Para obtener el valor de la variable global contador lo obtenemos duplicando el bloque tomar que ya tenemos y lo encajamos en el bloque del CampoDeTexto

Agregamos los bloques al evento Colisión obteniendo lo siguiente.

Le agregaremos una pequeña dificultad al juego. Cada vez que colisione le aumentaremos la velocidad a la Pelota1 un 20%, es decir, la velocidad anterior la multiplicaremos por 1,2 Seleccionamos el bloque poner Pelota1 a Velocidad como y le agregamos el bloque de multiplicación de la Pelota1, es decir:

Acoplar al bloque de colision de la siguiente manera:

Le agregaremos una nueva dificultad al juego. LA caja siempre va permanecer abajo del Lienzo y le aumentaremos la velocidad a la pelota, esta última condición va a depender de la velocidad del procesador del celular. Para cambiar la posición de la caja hay que arrastrar a una posición deseada en el Lienzo, en el modo Diseño, y ver el valor de la propiedad Y En modo Bloques cambiar el valor de Y en moverA a tomar el valor de Y inicial como indica la figura.

Y listo! Hemos finalizado la creacion de nuestra primera app movil con MIT App Inventor 2. Recuerda guardar tu proyecto antes de salir. Así se deberia ver en nuestros celulares ya finalizada la app.