UD7. Creación de Apps con MIT APP INVENTOR 2

1. INTRODUCCIÓN

App Inventor es una herramienta desarrollada por Massachusetts Institute of Technology (MIT) para facilitar el proceso de crear aplicaciones para Android, en comparación con la programación tradicional de aplicaciones Android. Se basa en una interfaz web en la que desarrollaremos la aplicación, mediante programación por bloques, y una Companion App, o aplicación “compañera”, en la que se visualizarán en tiempo real las modificaciones que se realicen en la interfaz web y donde podremos ir probando nuestra aplicación a medida que la desarrollemos.

http://appinventor.mit.edu/

http://diwo.bq.com/app-inventor-primeros-pasos/

http://kio4.com/appinventor/

2. PRIMEROS PASOS

Como hemos comentado en el apartado anterior, MIT APP INVENTOR es una herramienta gratuita para elaboración de aplicaciones en Android. Entre sus características principales encontramos:

a) Herramienta gratuita.

b) Programación mediante bloques, similar a Scratch.

c) Prueba de aplicaciones mediante dispositivo móvil o emulador.

d) solo necesitas un navegador para utilizarlo.

Los requisitos para usarlo, entontramos: a) PC (Windows, Mac, Linux) con conexión a Internet. b) Cuenta Google. c) Navegador Google Chrome, Mozilla firefox u otros. d) Un teléfono móvil.

En el siguiente video podemos ver las distintas secciones de la Inferfaz APP INVENTOR

Si no vemos la cara del gato entera en la pantalla del dispositivo deberemos cambiar los valores de las propiedades Ancho y Alto del botón por “Ajustar al contenedor”, para que se ajusten al tamaño máximo disponible en la pantalla del dispositivo.

Para incluir una etiqueta debajo del gato que ponga “Hola, soy Kitty” arrastramos un componente Etiqueta hasta el visor, y la soltamos debajo del gato.

Investiguemos ahora para descubrir cómo cambiar el texto “Texto para Etiqueta1” por “Hola, soy Kitty”. Una pista: hay que seleccionar la etiqueta en el visor, y luego cambiar sus propiedades en la parte derecha de la ventana de trabajo de App Inventor.

Esto tomará un poco de tiempo, después del cuál aparecerá un código QR que podremos capturar en nuestro móvil. La aplicación quedará descargada entonces en nuestro teléfono/Tablet, para ejecutarla siempre que queramos.

 c) Ahora a vibrar

Podemos mejorar la aplicación, haciendo que el teléfono vibre a la vez que el gato maúlla. Una pista: hay que buscar dentro del cajón de bloques del objeto Sonido1.

El bloque que hace que el móvil vibre es Llamar.Sonido1.Vibrar. Este bloque, a diferencia del anterior, tiene un “encajador” por el lado derecho. Sirve para indicar cuánto tiempo tiene que vibrar el dispositivo, en milisegundos.

Para poner aquí un valor de tiempo hay que abrir el cajón Matemáticas y arrastrar el bloque de arriba hasta el encajador libre a la derecha del bloque Llamar.Sonido1.Vibrar, donde indica milisegundos.

 

Ahora cambiamos el valor 0 por el valor 500, para que vibre durante medio segundo. Los bloques quedarán así

 

¿Qué pasa si ponemos 2500 en el bloque azul? Vibrará durante 2,5 segundos. Para cambiar el valor hay que hacer clic sobre el número, y escribir el nuevo valor.

Ahora volveremos al Diseñador y añadiremos un objeto Acelerómetro, que se encuentra en la Paleta, dentro del cajón Sensores. Se quedará bajo la ventana del visor, porque no se refiere a un objeto visible en nuestra interfaz de usuario.

Ahora, en el editor de bloques, elegiremos en la ventana de bloques el objeto Acelerómetro1 que hemos creado. De su cajón elegiremos el bloque mostaza cuando.Acelerómetro1.Agitar

Ahora copiamos el bloque Llamar.Sonido1.Reproducir de arriba, haciendo clic con el botón derecho sobre él y seleccionando Duplicar.

Una vez duplicado lo encajaremos con el bloque mostaza que hemos creado. El editor de código aparecerá como en la siguiente figura.

¿Qué va a ocurrir? El gato también maullará cada vez que agitemos el móvil. El acelerómetro es el sistema que detecta que el móvil se mueve, o cambia de orientación vertical a horizontal. Es muy útil para muchas aplicaciones.

Aquí hay dos EVENTOS distintos, y le estamos indicando al móvil, a través de este programa, qué debe hacer cuando suceda cada uno de estos eventos.

A continuación aquí está el código a programar:

Juego: FRUTICAT

Colocaremos las imágenes descargadas en la pantalla, las renombramos y ajustamos sus propiedades:

A continuación aquí está el código a programar.

Puedes duplicar los bloques con la orden duplicar código (botón derecho del ratón), ya que son muy parecidos.

3. INTRODUCCIÓN A LAS VARIABLES

 3.1. Programa Pitágoras. Introducción a las variables

3.2. Programa adivina. Introducción a los bloques condicionales

3.3. Programa trilero. Introducción de gráficos y sonidos en los programas

aplausos.mp3 carta risa.mp3

4. ENCENDIDO Y APAGADO DE UN LED DE BITBLOQ MEDIANTE MIT APP INVENTOR

Esta práctica guiada consiste en realizar una App con MIT App Inventor que pueda encender y apagar un LED conectado a una placa de bq programada con bitbloq.

La App que vamos a diseñar tiene que tener dos botones, uno para conectar el bluetooth y otro para desconectarlo y otros dos para controlar el LED, uno para encenderlo y otro para apagarlo, además. tenemos que añadir un visor de lista (oculto) para mostrar los dispositivos bluetooth detectados.

Antes de comenzar, para poder utilizar la placa bq zumcore 2.0, necesitamos añadir a MIT App Inventor la extensión BluetoothLE.aix

Si no funciona, prueba este enlace BluetoothLE.aix

Una vez descargada, se debe crear un proyecto nuevo en App Inventor y hacer clic en Import extension → Seleccionar archivo → Import.

Ahora hay que añadir los componentes correspondientes a la pantalla de diseño de MIT App Inventor 2. Se ha añadido un icono para indicar que el bluetooth está conectado o desconectado.

Los bloques de programación del bluetooth son los siguientes, su explicación es complicada, por lo que la omitiremos.

Los siguientes bloques son los que le envían mensajes a la placa a través del bluetooth, se pueden duplicar todas las veces necesarias y cambiar la palabra enviada.

Para conocer si la conexión se ha establecido correctamente, es recomendable utilizar algunos de los siguientes componentes y su respectiva programación:

1.        Un notificador que muestre un aviso para informar del estado de la conexión.

2.        Una imagen que vaya cambiando según el estado de conexión.

3.        Una etiqueta para mostrar en pantalla el estado de la conexión.

Nosotros hemos optado por la tercera opción.

Descarga este programa desde aquí: Encender apagar LED Genera el código QR e instálalo en tu móvil. Con el programa instalado en el móvil, ya podremos establecer la conexión bluetooth, el nombre del Bluetooth de la placa controladora, corresponde a los cuatro últimos números que aparecen impresos en la parte trasera de la misma.

La programación de la placa mediante bitbloq no es complicada. Primer se crea una variable de texto para guardar la palabra recibida del teléfono móvil y luego se le dice lo que tiene que hacer la placa según el mensaje recibido.

5. RECIBIENDO DATOS DE LA PLACA EN EL MÓVIL A TRAVÉS DE MIT APP INVENTOR

Al igual que la placa controladora puede recibir información, también puede enviarla, por ejemplo, los datos que recibe de sus sensores analógicos.

Para programar que se muestre en la pantalla de la aplicación la cantidad de luz detectada por el sensor de luz, se debe:

1.     Programar la placa controladora para que envíe la cantidad de luz detectada por el sensor de luz.

2. Añadir a la aplicación un componente que permita mostrar la información recibida por la placa, por ejemplo, una etiqueta.

3. Programar la aplicación para que reciba la información y la muestre en la etiqueta. Para ello, se debe configurar la función del Bluetooth para que reciba los datos enviados por la placa controladora.