Para ello utilizaremos la herramienta App Inventor (http://appinventor.mit.edu), una herramienta, diseñada originalmente por la familia googlelabs, y que en estos momentos mantiene el MIT (Massachusetts Institute of Technology) como herramienta educativa, y nos facilitará enormemente el aprendizaje y nos permitirá crear nuestras primeras aplicaciones en sólo unos minutos.
Es importante saber que es una herramienta que trabaja en Cloud Computing y que se asocia a una cuenta gmail, por lo que es importante para poder empezar tener activa una cuenta gmail (http://gmail.com)
¿Qué es App Inventor?
La aplicación App Inventor permite desarrollar aplicaciones para los teléfonos Android con un navegador web y un teléfono conectado o con el emulador. Los servidores de la aplicación de App Inventor almacenan los trabajos y ayudan a realizar un seguimiento de los proyectos.
Las aplicaciones se construyen trabajando con:
• El “App Inventor Design”, donde se seleccionan los componentes necesarios
para la aplicación.
• El “Blocks Editor”, donde se programa el comportamiento de los componentes
mediante piezas tipo puzle.
La aplicación aparece paso a paso en el teléfono a medida que se van
añadiendo piezas a la misma. Cuando hayamos terminado, podemos “empaquetarla” y
crear una aplicación independiente que puede ser instalada en cualquier dispositivo
Android.
Si no tienes un teléfono Android, puedes construir tus aplicaciones utilizando
el emulador de Android, un software que se ejecuta en tu ordenador y se comporta
como el teléfono.
Para configurar tu ordenador para usar App Inventor u obtener más
información accede a http://appinventor.mit.edu/explore/setup-mit-appinventor.html
Hola Gato:
Es típicamente conocido por todos los programadores que el primer ejercicio
que se debe hacer cuando se está aprendiendo es un programa muy sencillo que
muestre un mensaje en la pantalla. Normalmente este mensaje es “Hola Mundo”.
En nuestro caso vamos a adaptar esta costumbre. Vamos a crear una
aplicación que constará de una imagen de un gato que al ser pulsada hará sonar un
maullido. Junto con este boletín se ha proporcionado una imagen y un archivo de
sonido que serán utilizados durante la práctica.
Paso 1:
Al acceder a la aplicación por primera vez nos encontraremos con la siguiente
pantalla:
No tenemos ningún proyecto creado, vamos a crear uno nuevo.
1. Pulsar en “New”. Nos aparecerá el siguiente diálogo:
2. Escribimos el nombre: HolaGato (sin espacios) y pulsamos “OK”. Nos
aparecerá el panel de Diseño.
Paso 2:
Los Componentes de la aplicación se encuentran en el lado izquierdo de la
pantalla de diseño bajo el título “Palette”. Los componentes son los elementos básicos
que se utilizan para hacer funcionar las aplicaciones en el teléfono Android. Son como
los ingredientes de una receta. Algunos componentes son muy simples, como la
“Label”, que sólo muestra el texto en la pantalla, o un “Button” que al pulsarlo inicia
una acción. Otros componentes son más elaborados: “Canvas” que puede almacenar
imágenes fijas o animaciones, un acelerómetro que es un sensor que funciona como
un mando de Wii y detecta movimiento del teléfono, los componentes que crean o
envían mensajes de texto, los componentes que reproducen música y video,
componentes que obtienen información de sitios Web, etc.
Para utilizar un componente en la aplicación, hay que hacer clic arrastrar en el
visor en el centro del diseño. Cuando se agrega un componente, este aparece tanto en
el visor como en la lista de componentes en la parte derecha del visor.
Los componentes tienen propiedades que se pueden ajustar para cambiar la
forma en que el componente aparece dentro de la aplicación. Para ver y cambiar las
propiedades de un componente, primero se debe seleccionar el componente deseado
en la lista de componentes.
Pasos para la selección de componentes y configuración de las propiedades:
Queremos que HolaGato tenga un botón con la forma de la imagen kitty.png.
Para hacerlo tenemos que:
1. Arrastrar y soltar el botón desde la Paleta de Componentes hasta el visor. El
Componente Botón se encuentra en la sección Básicos de la paleta.
2. En la lista de propiedades, haz clic bajo “Image” donde pone “None…”
3. Pulsa el botón “Add”.
4. Selecciona el archivo kitty.png proporcionado con esta práctica.
5. Eliminar el texto “Text for Button1” que aparece en el panel de propiedades justo
bajo de donde hemos pulsado para seleccionar la imagen.
El diseño debe tener el siguiente aspecto:
Paso3:
El diseño es una de las tres herramientas clave que se utilizarán en la creación
de aplicaciones. La segunda es el “Editor de bloques”. La tercera es el teléfono. Vamos
a usar el Editor de bloques para asignar comportamiento a los componentes, lo que
debe suceder cuando el usuario de la aplicación pulse el botón.
El Editor de bloques se ejecuta en una ventana independiente. Al hacer clic en
“Open de Blocks Editor” de la ventana de diseño, se descargará un archivo que
debemos ejecutar. Este proceso puede tardar 30 segundos o más. Si el Editor de
bloques nunca se abre, puede ser porque el navegador no está configurado para
ejecutar aplicaciones Java descargadas de forma automática. En este caso, busca el
archivo descargado llamado AppInventorForAndroidCodeblocks.jnlp y ábrelo. La ventana del editor de bloques debe verse como se muestra abajo, con "cajones" de
bloques de programa a la izquierda, y un gran "lienzo" vacío para la colocación de
bloques que describan el comportamiento.
Lo primero que debemos hacer desde el Editor de Bloques es conectar
nuestro teléfono o bien arrancar el emulador.
Para utilizar el emulador, primero tenemos que crearlo, pulsa donde dice
“New Emulator”, se abrirá una nueva ventana, pulsa ok y espera a que se abra e inicie
el emulador.
Una vez que el emulador esté listo, desde el Editor de Bloques puslamos en
“Connect to Device” y seleccionamos la entrada “EMULATOR”. Transcurridos unos
segundos podremos ver que la ventana del emulador ha cambiado y tiene el siguiente
aspecto:
Si disponemos de un teléfono Android, podemos conectarlo para ver nuestra
aplicación en él. Para ello tenemos que configurarlo (ver
http://appinventor.mit.edu/explore/setup-mit-app-inventor.html). Cuando pulsemos
sobre “Connect to Device” nos aparecerá una entrada con un nombre que es el tipo de
modelo del teléfono (algo tipo HT99TP800054), seleccionamos esta.
Paso 4:
Llegados a este punto es un buen momento para que guardemos todo el
trabajo que hemos hecho. Para ello sólo tenemos que pulsar el botón “Save” desde la
ventana de Diseño.
Google guardará nuestro proyecto, de esta forma siempre estará accesible
desde cualquier ordenador conectado a internet.
Paso 5:
Ahora vamos a añadir una etiqueta de texto bajo la imagen del Gato. El
proceso es similar a cuando hemos añadido el primer botón:
1. Arrastra y suelta un componente de tipo “Label” desde la paleta hasta el visor
(justo por debajo de la foto).
2. En el panel de propiedades cambia la propiedad “Text” y pon: Pulsa el gato!!!
3. Cambia el color de fondo de la “Label” pulsando en el cuadrito que hay bajo
“BackgroundColor” (elige el que quieras).
4. Cambia la propiedad “TextColor” (elige el que quieras) y dale tamaño 30
(“FontSize”).
El diseño debe ser similar al siguiente:
Paso 6:
Ahora vamos a añadir el sonido:
1. Desde la paleta, pulsa en la categoría “Media” y arrastra un componente tipo
“Sound”. Verás que se añade bajo el Visor, en un apartado que se llama “Nonvisible
components” (Componentes no visibles). Esto es debido a que un sonido es
un tipo de componente que no se muestra en la pantalla, sólo se escucha.
2. En el panel de componentes pulsa bajo “Source” y añade el archivo “meow.mp3”.
El diseño debe quedar así:
Paso 7:
Ahora vamos a definir cómo la aplicación se va a comportar. Le diremos a los
componentes lo que deben hacer y cuándo hacerlo. Vamos a hacer que cuando se
pulse sobre la foto (recuerda que era un botón) suene el sonido del gato maullando.
Abre el Editor de Bloques, en el panel de la izquierda podemos observar que
existen dos “fichas”.
• “Built-In”: Muestra piezas de puzle básicas que siempre estarán disponibles. Se
clasifican por categorías (Definición, Texto, Listas…).
• “My Blocks”: Muestra piezas sólo piezas de puzle relacionadas con los
componentes que hemos añadido a nuestra aplicación.
Al pulsar sobre alguna de las categorías se muestran todas las piezas
disponibles.
Selecciona y arrastra la pieza “Button1.Click”. Se encuentra en la ficha “My
Blocks” dentro de la categoría “Button1”.
Esta pieza indica la acción que se ejecutará al hacer Click sobre el botón. Para
añadir la acción vamos a poner en el hueco vacío una pieza que reproduzca el sonido.
Esta pieza es “Sound1.Play”, en la ficha “MyBlocks” dentro de la categoría “Sound1”.
Selecciónala y arrástrala tal y como se muestra en las siguientes imágenes.
Paso 8:
Para finalizar, guarda el proyecto pulsando en “Save” desde la venta de
Diseño.
Si nos fijamos, arriba del botón Save aparecen tres enlaces. Desde “My
Projects” iremos a la primera ventana que vimos al entrar a App Inventor, donde
podremos ver que tenemos guardado vuestro Proyecto.
El enlace “Design” nos lleva a la ventana de diseño y el enlace “Learn” nos
lleva a una web con tutoriales y documentación sobre App Inventor.
La aplicación ya está terminada, puedes probarla pulsando sobre la foto en el
emulador o en el dispositivo. Sin embargo para poder instalar nuestra aplicación en un
dispositivo (sin estar conectados al pc mediante el cable) debemos generar un archivo
de extensión “.apk” que al ser ejecutado en el dispositivo iniciará la instalación.
Para ello, pulsamos en el botón “Package for Phone” de la ventana de Diseño,
se nos muestran 3 opciones:
• Show Barcode: Muestra un código QR (algo parecido a un código de barras con
más información) que puede ser reconocido por aplicaciones de lectura de QR
desde un dispositivo Android. Permite descargar la aplicación desde internet
pero sólo si nos registramos con la cuenta de gmail desde la que se creó la
aplicación.
• Download to this computer: Permite descargar el archivo de extensión “.apk”
en el ordenador con el que estamos trabajando.
• Download to Connected Phone: Instala directamente la aplicación en el
dispositivo conectado (ya sea un teléfono o el emulador).
