Professional Documents
Culture Documents
A medida que desarrollemos Hola Ronronea, aprenders cmo utilizar las tres
herramientas fundamentales de trabajo de App Inventor:
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:
1 de 9
Crear un nuevo proyecto
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.
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.
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.
En el Diseador:
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.
Agregando el maullido
En la paleta (Palette):
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.
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.
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:
Resumen
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.
9 de 9