Sei sulla pagina 1di 15

Tema 1

Hola Gatito

Introduccin

En este captulo conocers los elementos clave de App Inventor; la ventana de diseo
y la ventana de edicin de bloques, y vers los pasos bsicos necesarios para conseguir
crear tu primera app.

La app Hola Gatito

En nuestra primera app aparecer la imagen de un gatito en pantalla que maullar


cuando la toques y vibrar cuando agites tu dispositivo.

Qu vamos a aprender

Crearemos apps seleccionando componentes desde la ventana de diseo y


luego los programaremos para que hagan aquello que queramos en la ventana
de edicin de bloques.
Veremos que algunos componentes son visibles en la pantalla de la app pero
otros, en cambio, no lo son.
Aadiremos contenido multimedia a la app (la imagen del gatito y un sonido).
Probaremos la app a la vez que la construimos (live testing). Esto te permitir ver
cmo funciona la app en tu dispositivo a medida que vamos trabajando en ella.
Para terminar, empaquetaremos la app y la instalaremos en nuestro dispositivo.
H o l a G a t i t o

Juan Francisco Fuster


1
Entorno de trabajo de App Inventor

Para empezar a programar con App Inventor, abre un navegador y conctate a


http://ai2.appinventor.mit.edu, introduce los datos de acceso a tu cuenta de usuario
de Gmail si el navegador te los pregunta y pulsa el botn Continue.

El entorno de trabajo est formado por tres partes:

La ventana de diseo. La usaremos para insertar componentes en la app y definir


sus propiedades.
La ventana de edicin de bloques. Nos permitir especificar qu queremos que
hagan los componentes de nuestra app y cundo.
Un dispositivo Android o un emulador Android, gracias al cul podremos probar
nuestra app a medida que la vamos creando.

Ventana de diseo
H o l a G a t i t o

Juan Francisco Fuster


2
Venta de edicin de bloques

La primera vez que te conectes a http://ai2.appinventor.mit.edu vers tu Pgina de


Proyectos, es decir, una relacin de las apps que has creado con App Inventor.
Obviamente, la primera vez estar vaca.

Para empezar a crear tu primera app, haz clic en Project y despus en New Project.
Ahora, introduce el nombre de tu proyecto, por ejemplo: HolaGatito, y pulsa Ok.

Atencin! El nombre de los proyectos no puede contener espacios en blanco. Si


quieres, en su lugar utiliza el smbolo de guin.

La primera ventana que se abrir es la ventana de diseo. El editor de bloques est


disponible si haces clic sobre el botn Blocks que aparece en la esquina superior
derecha de la ventana.

App Inventor es una herramienta de could computing (o computacin en la nube), es


decir, tu app se almacenar en el servidor de App Inventor y cualquier modificacin o
ampliacin sobre ella tendrs que realizarla a travs de la pgina
http://ai2.appinventor.mit.edu. Adems, necesitars una conexin a Internet cada
vez que quieras ponerte a trabajar en tu app.
H o l a G a t i t o

Juan Francisco Fuster


3
Diseo de componentes

Empezaremos a trabajar en la ventana de diseo. Podemos usar los componentes


predefinidos para incluirlos en nuestra app y dotarla de contenido. Algunos
componentes son muy sencillos, como el componente Label, que muestra un texto
en pantalla. Otros son mucho ms complicados, como el componente Canvas que
puede contener imgenes y animaciones.

Nada ms empezar con un proyecto nuevo, la ventana de diseo ser como la


siguiente:

Ventana de diseo

En la ventana se distinguen las siguientes partes:

En la parte central encontramos un espacio llamado Viewer (visor). Este es el lugar


donde insertaremos los componentes que necesitamos para nuestra app, y
muestra una primera vista de cmo quedar la app al final en un dispositivo, pero
esta vista no es ms que una aproximacin. Para ver realmente como quedar la
app tendrs que utilizar tu dispositivo o bien un emulador tal y como
describimos en el tema anterior: Requisitos Previos.
En el lado izquierdo de la ventana est la Palette (paleta), que es una lista de los
componentes que podemos usar. La Palette est dividida en secciones; en este
momento, slo estarn visibles los componentes de la categora User Interface,
pero puedes ver los dems haciendo clic en el nombre de cada una de las
categoras.
H o l a G a t i t o

A la derecha de Viewer est Components (componentes), donde se muestra la


lista de componentes que estamos usando en nuestra app. Inicialmente, el nico
componente disponible es: Screen1 que simboliza la pantalla del dispositivo
Android.

Juan Francisco Fuster


4
Debajo de la lista de componentes tenemos un espacio ms llamado Media que
mostrar los archivos de imagen y sonido que vamos a utilizar en nuestra app y
que previamente tendremos que haber subido al servidor de App Inventor con
Upload new.

A la derecha del todo se encuentra la seccin de Properties (propiedades), que


muestra las propiedades de los componentes. As, despus de seleccionar un
componente en la seccin Components podremos ver y modificar sus propiedades en
el panel de Properties. Ahora mismo, podrs ver las propiedades del nico
componente de nuestra app, el componente Screen1. Algunas de sus propiedades
son el color de fondo (backgroundcolor), la imagen de fondo (backgroundimage) y el
ttulo de la pantalla (title).

Para nuestra primera app, necesitaremos dos componentes: el componente Label


permitir mostrar un texto en pantalla (Acaricia al gatito) y un componente Button
con una imagen de un gatito en l. Tambin necesitaremos un componente Sound,
que a diferencia de los anteriores no ser visible en la pantalla pero que nos permitir
reproducir el maullido del gatito cuando pulsemos el botn. Por ltimo, incluiremos
tambin un componente Accelerometer para detectar cundo el usuario agita el
dispositivo. Vamos a verlo paso a paso.

Crear una etiqueta

El primer componente que vamos aadir es una Label (etiqueta) para mostrar un
texto.

1. En la paleta, haz clic en la categora User Interface (interfaz de usuario) para ver
los componentes disponibles. Haz clic en Label (etiqueta) y arrstralo hasta el
rea de vista. All veras un rectngulo con el texto: Text for label1.
2. En la ventana de propiedades, busca una propiedad llamada Text y cambia el
texto que aparece all por Acaricia al gatito y pulsa intro. Vers como el texto se
modifica tambin en la seccin de vista.
3. Cambia el color de fondo de la etiqueta haciendo clic en el cuadro
BackgroundColor que actualmente ser None. Selecciona el color blue. Cambia
tambin el color del texto de la etiqueta usando la propiedad TextColor; por
ejemplo usa el color Yellow. Para terminar, cambia el tamao de la fuente a 20
puntos desde la propiedad FontSize.
H o l a G a t i t o

Juan Francisco Fuster


5
Ya tenemos nuestra primera etiqueta

Aadir un botn

El siguiente paso es aadir un botn (Button) a nuestra app y haremos que este
componente muestre la imagen del gatito.

Para empezar, selecciona el componente Button desde la paleta y arrstralo hasta la


vista, colocndolo justo debajo de la etiqueta anterior. Vers que aparece un botn
con un aspecto clsico.

Ahora que tenemos el botn haremos que aparezca en l la imagen del gatito:

1. Primero, debes descargar y guardar en tu ordenador la imagen que vamos a usar.


Dicha imagen est disponible en la seccin de Descargas de este tema. Si
quieres, aprovecha ahora y descarga tambin el sonido que reproduciremos
cuando alguien toque al gatito.
2. Asegrate que tienes seleccionado el botn en la lista de componentes; as, en la
ventana de propiedades podrs ver las que son sus propiedades.
3. En la ventana de propiedades, haz clic en Image (que actualmente tiene el valor
None) y pulsa el botn Upload file (cargar fichero). Selecciona la imagen del gatito
que has descargado previamente a tu ordenador y haz clic en OK.
4. Despus de cargar la imagen, kitty.png aparecer en la lista como una opcin
para la imagen del botn. Seleccinala y pulsa OK. La imagen del gatito se
mostrar inmediatamente en pantalla. Observa que la imagen tambin estar
disponible en la seccin Media.
5. Como comprobars, sobre la imagen del gatito todava aparece el texto que
H o l a G a t i t o

habamos introducido antes. Busca la propiedad Text del botn y borra el texto
que hay all.

Juan Francisco Fuster


6
Ahora tenemos una etiqueta y un botn con la imagen del gatito

Aadir el maullido del gatito

Cuando el usuario toque el botn, queremos que el se escuche el maullido del gatito.
Para ello, necesitamos el sonido (disponible en la seccin de Descargas del tema) y
un componente que se encargue de su reproduccin.

1. Si todava no lo has hecho, descarga el sonido del gatito y despus sbelo a tu


app usando el botn Upload file disponible en la seccin Media.
2. En la ventana de diseo (Designer) haz clic en la categora Media de la paleta
(Palette). Haz clic y arrastra el componente Sound hasta tu app. Independiente de
donde sueltes el clic, el componente de sonido se situar en la parte inferior de la
seccin vista; en un apartado llamado Non-visible componentes (componentes no
visibles).
3. Haz clic sobre Sound1 en la seccin de componentes no visibles para poder
visualizar sus propiedades. Usa la propiedad Source (origen) para seleccionar el
archivo .mp3 que has subido en el paso 1.
H o l a G a t i t o

Juan Francisco Fuster


7
Prueba en vivo (live testing)

Gracias a la prueba en vivo puedes comprobar cmo funciona tu app en tu


dispositivo Android mientras trabajas en ella. En el tema 0 ya repasamos todos los
elementos de configuracin necesarios para poder usar este tipo de prueba.

Si tienes tu dispositivo Android conectado y configurado y se encuentra en la misma


Wi-Fi que el ordenador, en la ventana de App Inventor, selecciona Connect y despus
haz clic sobre AI Companion.

En tu dispositivo, lanza la aplicacin MIT AI2 Companion y selecciona Scan QR Code.


Despus, escanea el cdigo QR que aparece en la pantalla de tu ordenador.

Si todo funciona como es debido, podrs ver la app en tu dispositivo y, a medida que
hagas cambios en la app los vers tambin en el dispositivo.

Si puedes ver la app en tu dispositivo, toca la imagen del gatito. Evidentemente,


todava no se reproducir el sonido; an nos queda un poquito de trabajo
Debemos indicar a la app cundo debe reproducir el sonido del maullido pero eso
tendremos que hacerlo desde la ventana de edicin de bloques (Blocks).
H o l a G a t i t o

Juan Francisco Fuster


8
Aadir comportamiento a los componentes

Ha llegado el momento de conocer el lenguaje de programacin que incluye App


Inventor; lo usaremos para decirle a nuestra app cundo debe reproducir el sonido
del gatito.

Para empezar, haz clic en el botn Blocks para cambiar a la ventana de edicin de
bloques.

En el panel izquierdo podrs ver una lista de los bloques disponibles en el lenguaje
de programacin de App Inventor, aparecen todos bajo la categora Built-in. Justo
debajo, vers tambinScreen1 y dentro de ella, la lista de los componentes que
previamente habamos incluido en nuestra app desde la vista de diseo.

Por hacer una analoga, podemos decir que si los componentes son los ingredientes
de una receta de cocina entonces los bloques son las instrucciones de la receta que
nos permitir cocinarlos.

Tambin puedes comprobar que si haces clic en uno de los componentes (en la
imagen anterior se ha hecho sobre Button1) entonces se ver la lista de eventos,
mtodos y propiedades asociados a dicho componente.

Para programar qu queremos que suceda cuando se toca el botn, haz clic sobre
Button1 y despus selecciona el evento when Button1.Click y arrstralo al espacio en
blanco. Todos los componentes que incluyen la palabra when (cuando) se llaman
programadores de eventos, es decir, especifican cmo se comportar el componente
en cuestin cuando sucede algo (en nuestro caso: cuando se haga clic sobre el
botn).
H o l a G a t i t o

Juan Francisco Fuster


9
Definimos una respuesta a una accin del usuario (tocar el botn del gatito)

Haz clic en Sound1 en el panel izquierdo para seleccionar el componente de sonido.


Despus, selecciona el bloque Sound1.Play y arrstralo hasta la ventana de bloques,
justo dentro del bloque when Buttton1.Click. Ahora podrs comprobar que el nuevo
bloque ha encajado dentro del primero tal y como se muestra en la imagen
siguiente. Recuerda tambin que, previamente ya habamos asignado el sonido del
maullido a este componente.

Ahora cuando toquemos el botn se escuchara el sonido del gatito

Prueba tu app

Comprueba que todo est funcionando como es debido. Es importante probar tu aplicacin
cada vez que aades algo nuevo. Toca la imagen del gatito en tu dispositivo (o haz clic si
ests usando el emulador). Debers escuchar el maullido.

Aadir un ronroneo
H o l a G a t i t o

Vamos a hacer que el gatito malle y tambin que ronronee cuando tocamos el
botn. Simularemos en ronroneo haciendo vibrar el dispositivo. Aunque parezca
muy difcil de hacer en realidad es muy sencillo; el componente Sound incluye la
posibilidad de hacer vibrar el dispositivo. De hecho, en la vista de diseo no

Juan Francisco Fuster


10
tendremos que hacer nada, tan slo tendremos que aadir un bloque ms en la vista
de bloques:

1. Desde la ventana de bloques, haz clic en el componente Sound1.


2. Selecciona el bloque call Sound1.Vibrate y arrstralo hasta situarlo justo debajo
del bloque call Sound1.Play. El bloque se colocar en su sitio tal y como se aprecia
en la imagen siguiente:

Reproducir el sonido y vibrar simultneamente

3. Comprueba que el bloque Vibrate incluye la opcin milisegundos. Se trata de un


parmetro que necesariamente tendremos que especificar, y que en este caso, se
refiere a la cantidad de tiempo que queremos que vibre el dispositivo (tiempo
especificado en milsimas de segundo). Si, por ejemplo, queremos que el
dispositivo vibre durante medio segundo, tendremos que asignarle un valor de
500.
4. Ahora haz clic en Math y vers que el primer elemento de la lista es un bloque
con un cero. Haz clic en dicho bloque y arrstralo hasta hacerlo encajar con la
ranura de los milisegundos del bloque anterior.
5. Por ltimo, haz clic sobre el cero y escribe 500 para conseguir nuestro objetivo.
H o l a G a t i t o

Juan Francisco Fuster


11
Asignar un valor numrico(cero por defecto)

Cambiar el valor a 500

Encajar el valor 500 en la ranura

Prueba tu app
H o l a G a t i t o

Prubalo! Toca la imagen del gatito en tu dispositivo y comprueba que adems del sonido
tambin se produce la vibracin.

Juan Francisco Fuster


12
Agitar el dispositivo

Vamos a aadir un ltimo elemento para que al agitar nuestro dispositivo tambin se
reproduzca el sonido del gatito. Para conseguirlo necesitaremos un componente ms
llamado AccelerometerSensor o acelermetro.

1. Vuelve a la vista de diseo. Despliega la categora de sensores de la paleta y haz


clic sobre el componente AccelerometerSensor. Arrstralo hasta cualquier lugar de
la Screen1 y no te preocupes si no aparece all. Fjate que se habr situado en la
parte inferior de la ventana, en el espacio disponible para los componentes no
visibles.
2. Tendremos que distinguir una nueva situacin; que se agite el dispositivo y por
tanto, necesitaremos un nuevo controlador de eventos. As pues, cambia a la
ventana de edicin de bloques. Haz clic sobre el componente
Accelerometersensor1 situado en el panel izquierdo.
3. Ahora, selecciona el evento AccelerometerSensor1.Shaking y arrstralo a la
ventana de trabajo.
4. Por ltimo, tal y como ya hicimos para reproducir el sonido anteriormente,
vuelve a hacer lo mismo para que el sonido se reproduzca dentro de este nuevo
bloque. Observa la imagen siguiente:

Los bloques de nuestra app

Descarga la app a tu dispositivo

La prueba en vivo te permite comprobar fcilmente la app mientras trabajas en ella.


El nico problema es que una vez terminado el trabajo, cuando desconectes tu
dispositivo, la app dejar de funcionar.

Para conseguir la app de forma definitiva en el dispositivo necesitaremos instalarla.


Lo primero que debemos hacer es asignar una imagen para el icono que
representar nuestra app en el dispositivo. Desde la vista de diseo, selecciona el
H o l a G a t i t o

componente Screen1 y asgnale una imagen a la propiedad Icon. Si quieres, puedes


utilizar la misma imagen del gatito o subir otra cualquiera.

Juan Francisco Fuster


13
Ahora, asegrate que tu dispositivo puede ejecutar apps que no provengan de la
tienda oficial de Google, la Play Store. Para la mayora de dispositivos tendrs que ir a
Ajustes / Aplicaciones y marcar la casilla Permitir apps de fuentes desconocidas.

De nuevo en la ventana de diseo de App Inventor, haz clic en Build y selecciona App
(provide QR code for .apk). Al cabo de unos segundos, aparecer el cdigo QR;
escanalo con una app adecuada. Tu dispositivo te pedir que introduzcas tu
contrasea de tu cuenta de Google. Despus de introducirla, comenzar la descarga
de tu app y lo podrs comprobar en el rea de notificaciones de tu dispositivo.
Cuando la descarga finalice, ya puedes proceder a su instalacin.

Al terminar la instalacin, echa un vistazo a las apps disponibles en tu dispositivo y


vers que tu app HolaGatito ya est disponible. Puedes tocar sobre su icono para
comenzar su ejecucin tal y como haras con cualquier otra app.

Es importante comprender que esto significa que tu app ha sido empaquetada,


descargada e instalada en tu dispositivo. Es decir, que si realizas cambios en ella
desde App Inventor tendrs que repetir el proceso completo de descarga e
instalacin para poder apreciar los cambios en la app de tu dispositivo.

Compartir la app

Una vez que has creado una app, la puedes compartir de varias formas. Para
compartir el paquete ejecutable (el archivo .apk), primero haz clic en Build y
selecciona la opcin Application (save to my computer). As podrs crear un archivo
con extensin .apk en tu ordenador. Puedes compartir tu app enviando por correo
electrnico el archivo anterior a tus familiares, amigos o alumnos. Tambin puedes
compartir la app si subes el archivo .apk a internet, por ejemplo a tu carpeta de
DropBox o Google Drive y despus crear un enlace a dicho archivo que puedes
compartir con otras personas. Pero recuerda que para que otras personas puedan
instalar tu app en sus dispositivos deben tener activada en su dispositivo Android la
opcin que permite instalar apps de fuentes desconocidas, es decir, apps que no
provienen de la tienda oficial de Google (Play Store).

Tambin puedes, si lo deseas, compartir el cdigo fuente (los bloques) de tu app con
otras personas. Para hacerlo, haz clic en My Projects, selecciona la app que quieres
compartir (en este caso HolaGatito) y despus haz clic en Project / Export Selected
Project. Este proceso crear un fichero en tu ordenador con la extensin .aia. Puedes
enviar por email dicho archivo a otras personas que tambin quieran aprender a usar
apps con App Inventor. Los destinatarios podrn hacer clic en Project / Import Project
desde su cuenta de App Inventor para ver tu aplicacin, editarla, ampliarla, etc.

Ampliaciones

Despus de construir tu primera app, hay algunas cosas que puedes mejorar por ti
mismo, por ejemplo:
H o l a G a t i t o

Si agitas el dispositivo, el sonido del gatito suena un poco extrao como si


tuviera eco. Esto es debido a que el acelermetro est ejecutando el evento
shaking varias veces por segundo y, por tanto, el sonido del gatito empieza su

Juan Francisco Fuster


14
reproduccin varias veces en un solo segundo provocando que los distintos
sonidos se solapen. Si vas a la ventana de diseo, seleccionas el componente de
sonido y compruebas sus propiedades vers una llamada Minimuminterval, que
determina el tiempo que se debe esperar el componente sound como mnimo
antes de volver a reproducir el sonido. Si usas un valor mayor al actual e igual o
superior a la duracin del maullido entonces conseguirs solucionar el problema.
Prubalo tu mismo.

Resumen

Algunos de los puntos ms importantes que hemos tratado en este tema son:

Podemos construir apps seleccionando componentes en la vista diseo y


dicindoles qu deben hacer y cundo desde la ventana de edicin de bloques.
Hay algunos componentes que son visibles pero otros no so son. Los visibles
aparecen en la pantalla de la app y los invisibles en un espacio designado para
ello en App Inventor.
Para definir el comportamiento de los distintos componentes de nuestra app
usamos bloques predefinidos en el editor de bloques. Por ejemplo, Sound1.Play
reproduce el sonido correspondiente al componente Sound1.
Algunos componente necesitan informacin adicional para funcionar. Por
ejemplo Vibrate necesita que le indiquemos cuntos milisegundos queremos que
vibre.
Los nmeros tambin se representan como bloques.
App Inventor tiene algunos componentes que son sensores. El
AccelerometerSensor puede detectar cuando movemos o agitamos el dispositivo.
Despus de terminar una app, podemos empaquetarla para instalarla en nuestro
dispositivo y tambin para distribuirla a otras personas.

H o l a G a t i t o

Juan Francisco Fuster


15