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.
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.
Los pasos a seguir son los siguientes:
a) Crear una cuenta de Google, en caso que no la tengas.
b) Trabajar online en la siguiente dirección: http://appinventor.mit.edu/ c) Instalar MIT AI2 Companion en tu dispositivo Android (móvil).
d) Crear una aplicación, pudiendo ver su progreso en tu móvil hasta su finalización.
e) Descargar la APP finalizada o subirla a Google Play Store.
En el siguiente video podemos ver las distintas secciones de la Inferfaz APP INVENTOR
Entre las distintas opciones que podremos realizar con MIT APP INVENTOR, tenemos:
2.1. Nuestra primera APP
Vamos
a realizar nuestra primera APP que consiste en la imagen de un gato que
maullará. Para ello debemos descargar la imagen y el sonido, guardánlos
en nuestro ordenador.
En la parte izquierda hacemos
clic en el tipo de objeto Botón, y
sin soltar arrastramos hasta el visor. Si todo funciona bien se verá en el
visor, y también en la pantalla del móvil, o del emulador.
Un botón es un objeto sobre
el que podemos hacer clic, y puede tener diferentes aspectos.
Para que el botón tenga la
imagen del gato hacemos clic en el botón, y en la parte derechadeAppInventor,enPropiedades,ybajolapropiedadImagen,hacemosclicen Ninguno…
Elegimos
la opción Subir archivo…, y después Seleccionar archivo
ElegimoselarchivodelgatoennuestrodiscoduroypulsamosAceptarparasubirloala página de nuestro proyecto en App
Inventor. Se verá el gato como imagen del botón, que ahora será másgrande.
Para quitar el texto “Texto
para el Botón1” que aparece por debajo del gato hay que borrar el valor de una
propiedad Texto del botón, en la parte derecha de la ventana.
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,soyKitty”.Unapista:hayqueseleccionarlaetiquetaenelvisor,yluegocambiar
sus propiedades en la parte derecha de la ventana de trabajo de AppInventor.
b) Añadir
un sonido
Ahora añadiremos un sonido a
nuestra aplicación, arrastrando hasta el visor el icono Sonido,queestádentrodelgrupoMedios,enlaPaleta.Ojo,esteobjetonoseveráen el móvil o
en el emulador, porque no es una imagen, ni un botón, ni una etiqueta. Por eso
aparece debajo del visor, en el apartado Componentes
novisibles.
Investiguemos ahora de nuevo
para saber cómo asociar a este objeto que hemos creado el sonido “Miau.pm3” que
hemos descargado. De nuevo hay que usar el panel de propiedades para este
componente. No es difícil, haremos clic sobre el valor de la propiedad Origen del componente Sonido1 y subiremos el archivo
descargado.
Con esto hemos terminado de
diseñar el aspecto de nuestra aplicación Ahora viene la magia, tenemos que
programar cómo se comportará la aplicación. ¡Eso esprogramar!
Hacemos clic en el botón Bloques situado en la esquina superior
derecha.
Esto abre la ventana de
programación con bloques. La parte más amplia, ahora en blanco, es el Editor,
donde colocaremos los bloques de nuestros programas.
Vamosahacerquesueneelsonidodelgatocadavezquehagamosclicsobrelaimagen
del gato(botón).
Hacemos clic en Botón para que se muestren los bloques
de colores disponibles para escribirnuestrocódigo,elprograma.Seabreun“cajóndeherramientas”contodoslos bloques que podemos utilizar.
Arrastramos hasta el editor el que diceBotón1.Clic.
Losbloquescolormostazasonlosmanejadoresogestoresdesucesos.Indicanquéhay que hacer cuando
sucede algo en la aplicación. En este caso, el manejador nos permitirá decirle
al ordenador qué debe hacer cuando hagamos clic sobre elgato.
Ahora hacemos clic sobre
nuestro componente Sonido1 para
abrir su cajón. Entonces arrastramos la instrucción Llamar.Sonido1.Reproducir hasta “encajarla” dentro del manejador
que hemos creado para el botón.
¡Enhorabuena por la primera
aplicación!
Yapodemosprobarlaenelmóvil,perolaperderemossicerramoslaaplicaciónAI2que
nos conecta con el ordenador. Para instalarla en el móvil permanentemente, como
cualquier otra aplicación, podemos generar un códigoQR.
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.
2.2. Actividades
A
continuación vamos a realizar otra nueva aplicación muy sencilla, para
ello
seguiremos el siguiente videotutorial a la vez que vamos programando
nuestra
aplicación.
ACTIVIDAD 1
Juego: GENERADOR DE AUDIO
Colocaremos un campo de texto donde escribir y un bótón en la pantalla que diga "Presioname"
A continuación aquí está el
código a programar:
ACTIVIDAD 2
Juego: FRUTICAT
Descarga de imagenes e iconos
necesarios:
HACER CLIC
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.
ACTIVIDAD 3
Juego: TURISMO PARIS
Descarga de imagenes e iconos
necesarios:
HACER CLIC
Colocaremos las imágenes descargadas en la pantalla, las renombramos y ajustamos sus propiedades:
A continuación aquí está el
código a programar.
3. INTRODUCCIÓN: VARIABLES, BLOQUES Y GRÁFICOS
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
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
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.
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.
