¿Cómo utilizar AppInventor?

Para poder aprender a utilizar App inventor, tenemos que conocer la plataforma. Además debemos tener un cuenta gmail asociada, en donde podrás acceder a todos tus proyectos.

 Selecciona "Comenzar un proyecto nuevo" y  asignale un nombre.

Luego, estarás en la plataforma para poder comenzar a programas. Cuando estamos en modo "Diseñador"  encontramos la paleta, al costado izquierdo de la pantalla, la cual tiene los bloques para que podamos programar, es decir, el interfaz de usuario.

En la sección paleta se encuentran los componentes que queremos agregar a nuestra aplicación. Basta arrástralo a screen1 o pantalla de nuestro móvil virtual.

En el lado derecho de la pantalla, está el área de componentes, donde se van agregando los elementos del screen1 y al lado aparecen las propiedades de cada componente. Estas pueden ser modificadas antes de ejecutar la aplicación, es decir, inicializar sus propiedades o bien cambiar sus propiedades durante la ejecución. 

Cada vez que necesites ver como está quedando tu aplicación debes utilizar el emulador de Smarphone o tu propio celular, para esto debes dirigirte a "Conectar" y seleccionar tu opción, "Emulador" si quieres verlo desde el mismo computador, o vía USB para tu celular.

(EMULADOR)

Cuando quieras realizar cambios nuevamente, es decir, agregar o quitar bloques debes dirigirte nuevamente a "Conectar" y pulsar "Reiniciar conexión"

Para poder comenzar a familiarizarnos con este interfaz, desarrollaremos una aplicación básica, así podrás reconocer los elementos que te podrán servir para tu propia App. Será un juego fácil y sencillo, el cual consiste en un mono que debe atrapar bananas sumando un punto, sin embargo, debe esquivar la bombas sino se le resta un punto.

En la sección "Dibujo y animación" arrastra "Lienzo" a la pantalla, luego en "Componentes" selecciona "Lienzo 1" y en "Imagen de fondo" sube una fotografía del ambiente en que quieras que este el mono, por ejemplo, una selva.  El ancho de la imagen ajustar al contenedor, mientras que el alto selecciónalo como 80%, para poder tener un 20% de la pantalla donde estará el próximo contador.

Arrastra tres "SpriteImagen", cambia el nombre a cada una de ellas por: mono, plátano y bomba en Componentes. Y sube una imagen asociada a estas tres componentes, asignarle pixeles a tu conveniencia. Por ejemplo:

MONO

PLÁTANO

BOMBA

Si te fijas le asignamos velocidades a cada componente, esto determina la velocidad en lo que se moverá cada una de ellas. Como la dificultad es la bomba esta debe tener más velocidad que el plátano.

En "Interfaz de usuario" arrastra a la pantalla "Etiqueta" y cámbiale el nombre por Contador, esto nos ayudará a facilitar la programación en bloques.

Ingresa a el modo Bloques, aquí podemos ver que existen distintos tipos de bloques, además, de que están todas las componentes ingresadas anteriormente. Para programar alguna de ellas, solo debemos seleccionarla y veremos qué bloques están determinados para ellas.

Necesitamos que cuando el plátano y la bomba toque los bordes de nuestra pantalla estos no se detengan, sino que cambien su dirección y sigan moviéndose. Para esto, selecciona el plátano y selecciona " Cuando _____.Tocar Borde" y luego "Llamar____.ApuntarEnLaDirección x,y", para que este siga moviendose en nuestra pantalla. 

Luego en los bloques integrados, selecciona "Matemáticas" y haz clic en "Entero Aleatorio entre __ y __". Los bloques anclalos como te mostraré a continuación. 

Como nosotros queremos mover al mono con nuestros dedos necesitamos programarlo para eso. Entonces, aun en modo Bloques selecciona "Mono" y selecciona la segunda opción, que nos permitirá arrastrarlo.

Luego, "Llamar____.MoverA", e ingresa a "Variables" y selecciona "Tomar" selecciona con el clic derecho este bloque y selecciona "Duplicar"

Ancla los bloques de la siguiente manera:

Para poder ir verificando como se ve nuestro juego de forma real, debemos tener descargada la aplicación del AppInventor en nuestros Android, para luego ir a "Conectar" y seleccionar "Reiniciar conexión" y "Al Companion". Abrir la app en nuestro celular y escanear el código QR o ingresar el código.

Para asignarle movimiento a la Bomba, debemos duplicar los bloques que hicimos con el plátano y cambiarle el objeto a bomba, ya que necesitamos que esta al tocar los bordes siga moviéndose. 

Ahora, para poder tener un Contador en nuestro juego, cuando el mono toque el plátano gane un punto, mientras que si toca la bomba se le resta un punto, debemos crear la variable "Contador"

Seleccionamos "Variables" y "Inicializar global ____como" e ingresamos Contador, vamos a "Matemáticas" y hacemos clic en el primer bloque dándole el valor 0, es decir, su valor inicial. 

Ahora, es cuando programamos los movimientos del mono con las del contador. Primero definiremos cuando el mono colisione con el plátano sumando un punto.

1º Seleccionamos mono, haciendo clic en el bloque "Cuando___.EnColisionCon". Duplicamos el bloque "Llamar plátano.ApuntarEnLaDirección".

2º En "Varibles" haz clic en "poner___a" y selecciona "Global Contador". Luego en "Matemáticas", seleccionar el bloque de suma. Duplica el bloque "Tomar global Contador"

3º Selecciona el componente "Contador" y pon el bloque "Poner Contador. Texto como" y duplica nuevamente "Tomar global Contador"

4º Ancla los bloques como a continuación:

Ahora debemos lograr que el contador reste un punto por cada vez que el mono toque a la bomba.

1º Selecciona el componente Mono y haz clic en "Cuando mono. Tocar" y duplica el bloque "Llamar bomba.ApuntarEnDirección"

2º En "Varibles" haz clic en "poner___a" y selecciona "Global Contador". Luego en "Matemáticas", seleccionar el bloque de resta. Duplica el bloque "Tomar global Contador"

3º Selecciona el componente "Contador" y pon el bloque "Poner Contador. Texto como" y duplica nuevamente "Tomar global Contador"

4º Ancla los bloques de la siguiente forma:

Prueba el juego en tu celular o mediante el emulador e intenta agregarle dificultad a este. Crea tu propia App y recuerda ir verificando mediante "Al Companion" como va quedando este.