Vamos a crear la primera aplicacin con nuestro telfono Android: HolaRonronea

Esta pgina te ayudar a empezar la construccin de tu primera aplicacin: Una imagen

de un gatito que malla cuando la tocamos. Puedes ver un vdeo con el desarrollo de esta
aplicacin. Cuando termines el desarrollo de Hola Ronronea estars listo para disear y
construir aplicaciones por tu cuenta. Antes de empezar, asegrate de haber configurado
correctamente el equipo.

A medida que desarrollemos Hola Ronronea, aprenders cmo utilizar las tres
herramientas fundamentales de trabajo de App Inventor:

El Diseador (designer), el lugar donde se disea la aplicacin. Se ejecuta en el

navegador web.
El Editor de bloques (blocks editor), aplicacin Java donde configuramos el
comportamiento de nuestro desarrollo. Es una aplicacin independiente, que corre
en una ventana diferente a la instancia del navegador.
El telfono, conectado al ordenador mediante un cable USB. Puede ser sustituido
por el Emulador.

En este primer tutorial me referir a los diferentes elementos de App Inventor en espaol e ingls, tal como se ve
en la lista de vietas anterior. Sin embargo, debemos tener en cuenta que, por el momento, App Inventor no ha
sido traducido, y por tanto no encontraremos las herramientas, secciones, componentes, botones, etc. en ingls
durante el uso del paquete de software de App Inventor. Por este motivo, en prximos tutoriales, ya me referir a
esos mismos elementos slo en ingls, que es como los encontraremos en la aplicacin MIT App Inventor Beta.

Para construir Hola Ronronea tendrs una imagen de una gatita y el sonido de un maullido. Descargar estos
archivos al ordenador:

foto del gatito

miau sonido

Iniciar el diseo y crear un nuevo proyecto

En el navegador Web, apunta a la pgina web de App Inventor en http://beta.appinventor.mit.edu/ . Si esta es la

primera vez que has usado App Inventor, vers la pgina de Proyectos vaca, sin proyectos en ella
todava. Debera tener este aspecto:

1 de 9
Crear un nuevo proyecto

1. Haga clic en New en el lado izquierdo, cerca de la parte superior de la pgina.

2. Introduzca el nombre del proyecto HolaRonronea (una sola palabra, sin espacios) en el cuadro de dilogo
que aparece, haga clic en Aceptar.

El navegador abrir el Diseador, el lugar donde se seleccionan los componentes para su aplicacin, y debe tener
este aspecto:

2 de 9
Seleccione los componentes para el diseo de su aplicacin

Los componentes de App Inventor se encuentran en el lado izquierdo de la pantalla de diseo, bajo el ttulo
Palette . Los componentes son los elementos bsicos que se utilizan para hacer las aplicaciones en el telfono
Android. Son como los ingredientes de una receta. Algunos componentes son muy simples, como el componente
Label, que slo muestra un texto en la pantalla, o el componente Button que mostrar un botn en la pantalla del
telfono que al ser pulsado iniciar una accin. Otros componentes son ms elaborados: el componente Canvas
es un lienzo de dibujo que puede almacenar imgenes fijas o animaciones, el AccelerometerSensor es un sensor
de movimiento que funciona como un mando de Wii y detecta cuando movemos o agitamos el telfono, los
componentes que crean o envan mensajes de texto, los componentes que reproducen msica y video,
componentes capaces de obtener informacin de sitios Web, y as sucesivamente.

Para utilizar un componente en su aplicacin, tendr que hacer clic y se arrastra sobre el visor (Viewer), en el
centro de la pantalla de diseo. Cuando aadas un componente en el visor, tambin aparece en la lista de
componentes (Components), a la derecha del visor..

Los componentes tienen propiedades, que se presentan en la parte derecha de la pantalla (Properties) y que se
pueden ajustar para cambiar la forma en que el componente interactuar con la aplicacin. Para ver y cambiar las
propiedades de un componente, primero debe seleccionar el componente deseado en la lista de componentes.

Pasos a seguir para seleccionar los componentes y propiedades de configuracin

Queremos que HolaRonronea tenga un botn con la propiedad de imagen ajustada al archivo que has
descargado antes, con la imagen del gatito, kitty.png. Estableceremos esto del modo siguiente:

1. Arrastra y suelta un Button hasta Screen1, en el rea del visor (viewer). El componente Button se
encuentra en la seccin Basic de la paleta (palette).
2. En la lista de propiedades de Button1, el botn que acabamos de disponer, en imagen, haz clic sobre

3 de 9
 ninguno (none) ...
3. Haga clic en agregar (Add) ... .
4. Selecciona el archivo kitty.png, que has descargado antes.
5. Eliminar Text for Button1, que aparece bajo la propiedad text mediante la tecla de retroceso.

Tu diseo debera tener este aspecto:

Abre el Editor de bloques (Blocks Editor), y conecta el telfono

El diseador (Designer) es una de las tres herramientas clave que utilizars en la creacin de aplicaciones. El
segundo es el Editor de bloques. El tercero es el telfono. Vamos a usar el Editor de bloques para asignar los
comportamientos de los componentes, como qu debe suceder cuando el usuario de la aplicacin presiona un
botn.

El editor de bloques se ejecuta en una ventana separada. Al hacer clic en Abrir el editor de bloques (Open the
Blocks Editor) de la ventana de diseo, el archivo de programa del editor de bloques se debe descargar y
ejecutar. Este proceso puede tardar 30 segundos o ms. Si no se abre el Editor de bloques, podra ser porque el
navegador no est configurado para ejecutar aplicaciones Java descargadas de forma automtica. Una vez
descargado, veremos el archivo del editor de bloques, llamado AppInventorForAndroidCodeblocks.jnlp y debemos
abrirlo. Una vez hecho esto, se activa Java, que nos solicitar si queremos ejecutar la aplicacin, a lo que
responderemos que s. Entonces, la ventana del editor de bloques debe verse como se muestra abajo, con
"cajones" para los bloques de programa a la izquierda, y un gran espacio vaco para la colocacin de los bloques
que uniremos para montar el programa, que se va a hacer a continuacin.

4 de 9
Antes de continuar con la construccin de la aplicacin, tendrs que conectar el telfono. Asegrete de que se
ha configurado el telfono de modo correcto . Ahora conecta tu telfono al ordenador mediante un cable USB, y
haz clic en Conectar dispositivo (Connect to device) en la parte superior de la ventana del editor de
bloques. Vers una lista desplegable con el telfono en dicha lista, identificado por su tipo de modelo (por
ejemplo, HT99TP800054). Haz clic sobre l. Vas a ver una flecha amarilla animada sobre un telfono, indicando
que App Inventor se est conectando al telfono. El establecimiento de esta conexin puede tardar un minuto o
dos. Una vez la conexin se completa, la flecha deja de moverse y se pone verde, y si nos fijamos en la pantalla
del telfono, vers el gatito. La aplicacin empieza a ejecutarse!

Si, por el contrario, no dispones de telfono y quieres desarrollar la aplicacin con el emulador, sustituye lo
indicado en el prrafo anterior por lo que indicamos en la pgina sobre el emulador.

Prximos pasos

En este punto, debes tener el diseador abierto en el navegador, el editor de bloques abierto en otra ventana, y el
dispositivo elegido (telfono o emulador) conectado con el Editor de bloques.

A continuacin haremos lo siguiente para completar la aplicacin:

En el Diseador:

Agregar un componente de etiqueta (label) que ponga "Acaricia al gatito".

Subir el archivo meow.mp3
Agregar un componente de sonido (sound) que reproduzca el archivo meow.mp3.

En el Editor de bloques:

Crear un controlador de eventos que dispare el componente de sonido cuando el usuario pulsa el botn.

Adicin de la etiqueta

En la paleta y el visor:

1. Arrastra y suelta el componente Label hasta el visor (Viewer) , situndolo por debajo del gatito. Aparecer
en la lista de componentes como Label1

5 de 9
Bajo propiedades (properties)

1. Cambia la propiedad Text de Label1 de forma que ponga "Acaricia al gatito". Cuando el cursos cambie a
otra rea vers aparecer este texto en el botn en tu ordenador y en el dispositivo Android.
2. Cambiar el Color de fondo (BackgroundColor) de Label1. Puedes cambiar a azul.
3. Cambiar el color del texto (TextColor) de Label1, por ejemplo pasndolo a amarillo.
4. Cambiar el tamao de su fuente (FontSize) de Label1 ponindola a 30.

El diseador debe parecerse a esto:

Agregando el maullido

En la paleta (Palette):

1. Haz clic en la seccin Media

para ampliarla y ver sus componentes.
2. Arrastra un componente Sound y colcalo en el visor (Viewer) . Independientemente de donde lo dejes
caer, aparecer en la parte inferior del visor, como componente no visible (non-visible-components) y
como Sound1.

En el rea de medios (Media)

1. Haz clic en Agregar (Add) ...

2. Sube el archivo meow.mp3 a este proyecto.

Bajo Propiedades (Properties)

1. Establece la propiedad fuente (source) del componente Sound1 haciendo clic sobre la misma. Cuando
aparezca el cuadro de seleccin, pulsa sobre meow.mp3 y sobre OK. Esto asocia el maullido contenido en

6 de 9
 este archivo a Sound1.

El diseador debe parecerse a esto:

Hacer el juego de sonido

Con el Editor de bloques vamos a definir la forma en que la aplicacin se va a comportar. Le diremos a los
componentes lo que deben hacer y cundo hacerlo. Vas a decirle al botn, que en realidad es la fotografa del
gatito, que reproduzca el sonido del maullido cuando el usuario lo toque. Si los componentes son los ingredientes
de una receta, puedes pensar en bloques como las instrucciones de elaboracin del plato.

El editor de bloques tiene dos pestaas en la esquina superior izquierda: Integrados (Built-in) y mis bloques
(My blocks) . Los botones situados debajo de cada pestaa muestran los bloques cuando se hace
clic. Los Integrados son un conjunto de bloques genrico, que encontraremos disponibles independientemente
de la aplicacin que vayamos a crear. Son siempre los mismos. Los bloques debajo de la pestaa de mis
bloques contienen bloques especficos, vinculados con el conjunto de componentes que hemos elegido para la
aplicacin. Varan segn los componentes seleccionados previamente y cambian si cambiamos componentes
sobre la marcha.

Para hacer que se reproduzca el sonido al tocar (pulsar) el botn con la foto del gatito, tendrs que pulsar la
pestaa My Blocks, desplegar los bloques de la seccin Button1 y arrastrar y soltar al lienzo central el
bloque When Button1.Click do, que se refiere a la circunstancia que el usuario pulse el botn y, tras desplegar
los bloques de la seccin Sound1, arrastrar el bloque callSound1.Play al lienzo central, aproximndolo al
bloque When Button1.Click do, de modo que ambos encajen como en un rompecabezas, lo que la aplicacin
nos indica con un sonoro clic, perfectamente audible.

Una vez hecho esto, pulsando sobre la foto (esto es tocando la pantalla en la foto y retirando el dedo
rpidamente, lo que android considera un Click), oiremos como el telfono emite el maullido.

El Editor de bloques debe asemejarse a esto:

7 de 9
Embalaje de su aplicacin

Felicitaciones, tienes tu primera aplicacin en ejecucin! Si est usando un telfono, entonces la aplicacin se
ejecuta en el telfono, pero slo funciona cuando el telfono est conectado a App Inventor. Si se desenchufa el
cable USB, la aplicacin va a desaparecer. Puedes volver a conectar el telfono para hacer que regrese. Para
obtener una aplicacin que se ejecuta sin estar conectado a App Inventor, debes "empaquetar" la aplicacin para
producir un paquete de la aplicacin (archivo APK). Al pulsar paquete para el telfono (Package for phone) en
la parte superior derecha de la pgina del diseador se presentarn tres opciones:

1. Si el telfono est conectado, puedes descargar e instalar directamente la aplicacin en el telfono.

2. Puede descargar la aplicacin al ordenador, como un archivo APK, que se puede distribuir y compartir, e
instalar manualmente en los telfonos que utilizan el programa Android.
3. Se puede generar un cdigo de barras, que se puede utilizar para instalar la aplicacin en tu telfono con
la ayuda de un escner de cdigo de barras, como el escner de cdigo de barras ZXing (disponible
gratuitamente en el Android Market). Este cdigo de barras funciona slo para tu propio telfono.Si deseas
compartir la aplicacin con los dems, tendrs que descargar el archivo APK al ordenador y compartir el
archivo.

Resumen

Las ideas clave son las siguientes:

8 de 9
 Puedes construir aplicaciones mediante la seleccin de los componentes (ingredientes) y luego decirles
qu hacer y cundo.

Puedes utilizar el Diseador para seleccionar los componentes. Algunos componentes sern visibles y
otros no.

Puedes agregar elementos multimedia (imgenes, vdeos y sonidos) para las aplicaciones, cargndolos
desde tu ordenador.

Puede utilizar el Editor de bloques para ensamblar los bloques que definen el comportamiento adecuado
de los componentes, segn las acciones efectuadas por el usuario o la interaccin con otros componentes.

Contenidos bajo licencia de Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0.

Buena parte de los contenidos son traducciones y adaptaciones de Learn, publicados bajo licencia de Creative Commons Attribution 3.0 Unported
License.

9 de 9