Prepar tu sistema (Java)

App Inventor requiere Java

Si ya tens instalado Java, o si no ests seguro, segu las indicaciones para verificar si Java Web
Start est funcionando correctamente. Si ests seguro que no tens Java instalado, segu las
instrucciones de la pgina Java Installation de Oracle.
Atencin usuarios Mac: La pgina Oracle Java dice que Java no funciona bien con el navegador
Chrome en Mac. Esto no sera correcto, podras usar Java 7 y App Inventor en Mac con Chrome.

Verificar Java Web Start

Para verificar si Java Web Start est funcionando bien, clic en el botn naranja que est debajo
para tratar de ejecutar un programa desde la Web. Este test debera bajar y ejecutar un archive
(notepad.jnlp), que crear una ventana llamada "Notepad" donde pods ingresar texto.
Dependiendo del navegador, quizs necesites abrir manualmente el archivo jnlp despus de que
se descargue.
Si Notepad no se ejecuta, entonces ha fallado el test. No trates de usar todava App Inventor,
busc debajo posibles soluciones.
Si el test resulta bien, cerr la ventana Notepad y continu.

Si el test falla, las razones podran ser:

Tu computadora tiene un firewall que no permite descargar el programa. (Consult con el

administrador de la red o el responsable de tecnologa).

Tu navegador no est configurado para usar Java Web Start para abrir archivos jnlp. Una
solucin podra ser reinstalar Java.

Tu computadora no tiene suficiente memoria para ejecutar App Inventor (requiere

alrededor de 950 Mb de memoria)

Requerimientos de sistema
Computadora y sistema operativo

Macintosh (con Intel processor): Mac OS X 10.5 o superior

Windows: Windows XP, Windows Vista, Windows 7

GNU/Linux: Ubuntu 8 or higher, Debian 5 o superior

Navegador

Mozilla Firefox 3.6 o superior

o

Nota: Si uss Firefox con la extension NoScript extension, tendrs que

deshabilitarla. Fijate en pgina para resolver problemas.

1.

Apple Safari 5.0 o superior

Google Chrome 4.0 o superior

Microsoft Internet Explorer 7 o superior

Instalacin
2. Instalar App Inventor
Parte 2 de 4 Instrucciones de Instalacin
Instalar App Inventor
Antes de que puedas usar App Inventor, tens que instalarlo en tu computadora. El software que
necesits se encuentra en un paquete llamado App Inventor Setup. Segu las instrucciones de tu
sistema operativo para hacer la instalacin, y despus continu con este tutorial en el Paso 3
(comenzar con App Inventor) y en el Paso 4 (configurar tu dispositivo o emulador).

Instrucciones para Mac OS X

Instrucciones para GNU/Linux

Instrucciones para Windows

Iniciar el Diseador de App Inventor y el Editor de Bloques

Ahora ests listo para iniciar el diseador de App Inventor (en el navegador) y el Editor de
Bloques (programa local Java). Segu las instrucciones del Paso 3, y luego volv a estas
instrucciones para ver cmo configurar un dispositivo o un emulador.

3. Iniciar App Inventor por primera vez

Paso 3 de 4 de las instrucciones de configuracin:

Comenzar App Inventor
Antes de empezar, asegurate de que tens acceso a:

Internet

Una cuenta de Gmail (as es cmo te loguears en App Inventor) | Consegu una cuenta
de Gmail gratis
NOTA: Una vez que ingreses a App Inventor, regres al Paso 4 para ver cmo conectar un
dispositivo o emulador.

Comenzar el Diseador y crear un Nuevo proyecto

En tu navegador web, ingres al sitio de App Inventor: http://beta.appinventor.mit.edu/. Si es la
primera vez que uss App Inventor, vers una pgina de proyecto en blanco.
1.

Clic en New en el lado izquierdo, cerca la parte superior de la pgina.

2.

Ingres el nombre del proyecto: HelloPurr (una palabra, sin espacios) en la caja de
dilogo que aparece, luego clic en OK.

El navegador abrir una pgina web que llamaremos Diseador, el lugar donde seleccionars los
componentes para tu aplicacin y disears la interfaz de usuario. Esta pgina debera verse as:
Adems del Diseador, tens que iniciar el Editor de Bloques, el lugar donde indicars el
comportamiento de la aplicacin. Es una aplicacin separada con su propia ventana, y por lo
tanto necesitamos dos ventanas para disear una aplicacin. Estas ventanas estn asociadas:
los cambios hechos en el Diseador se vern inmediatamente reflejados en el Editor de Bloques.

Iniciando el Editor de Bloques

Cuando hacs clic en Open the blocks editor en la ventana del Diseador, se descargar el
archivo del Editor de Bloques y se ejecutar.

Se te pedir que aceptes el archivo del Editor de Bloques. Hac clic en "save", "allow", "keep", o
cualquier botn de ese tipo (depende de tu computadora y navegador). Para usuarios de
Windows, segu las instrucciones del instalador. Para abrir el Editor de Bloques:
1.

Clic 'OK' (Abrir el archivo Java)

2.

Clic 'Siempre confiar en contenidos de este publicador' y

3.

Clic 'Ejecutar'

Este proceso puede llevar aprox. 30 segundos. Si el Editor de Bloques no abre, puede ser
que tu navegador no est configurado para ejecutar aplicaciones Java descargadas

automticamente. Pods entonces localizer el archive AppInventorForAndroidCodeblocks.jnlp y

ejecutarlo. El Editor de Bloques debera verse as:

La gran zona (canvas) vaca a la derecha es el espacio de trabajo, en el que ubicars los
bloques para ir armando el programa.

En el lado izquierdo, hay tres solapas (Built-In, My Blocks, Advanced); cada solapa tiene
agrupados conjuntos de bloques, cada grupo representado por un recuadro de distinto color.
Cuando hacs clic en uno de estos recuadros, pods ver todos los bloques de ese grupo. Pods
desplazarte para ver ms bloques.
La solapa Built-In contiene el conjunto de bloques standard que estn disponibles para toda
aplicacin que construyas (Definition, Text, Lists, etc.). Los grupos de la solapa My

Blocks contienen bloques especficos relacionados con el conjunto de components que elegiste
para tu aplicacin. La solapa Advanced contiene bloques para desarrollar aplicaciones
intermedias y avanzadas con una lgica ms compleja.
El Diseador corre desde el navegador, y el Editor de Bloques corre desde Java; sin embargo,
estn conectados. Por lo tanto, an cuando cierres la ventana del Editor de Bloques, toda la
informacin en el Editor de Bloques se almacena en el Diseador. Cuando hacs clic en el botn
"Open the Blocks Editor", se descarga un nuevo archivo .jnlp en tu computadora, y tens que
abrir ese archivo otra vez. Cuando se abre un nuevo Editor de Bloques, ste contendr todos los
bloques que programaste antes de cerrar el Editor de Bloques.
Cuando construs tu aplicacin, pods testearla en un emulador o en un dispositivo Android.
Nosotros vamos a probar la aplicacin en un emulador en pantalla que viene con App Inventor
(ya lo instalaste cuando instalaste App Inventor).

4. Construir aplicaciones en el
emulador
Parte 4 de 4 Instrucciones de Instalacin
Si ests usando el emulador por primera vez, segu estos pasos.
Paso 1
Abr el Editor de Bloques, y hac clic en el botn "New emulator" en la parte superior de la
ventana.

Paso 2.
Recibirs un mensaje diciendo que se est iniciando el emulador, y pidindote que seas
paciente; iniciar el emulador puede llevar algunos minutos.

Paso 3.
Inicialmente, el emulador aparecer con una pantalla negra en blanco (#1). Esper hasta que el
emulador est listo, con un fondo de pantalla de color (#2). Cuando aparezca el fondo coloreado,
todava tens que esperar hasta que el telfono emulado termine de preparar su tarjeta SD:
habr una notificacin en la parte superior del telfono mientras se prepara la tarjeta. Tendrs
que usar el mouse en la pantalla del telfono para desbloquear el dispositivo arrastrando el
candado de fondo verde hacia la derecha (#3).

#1

#2

#3

Paso 4.
El emulador trabaja como un telfono con algunas limitaciones (por ej., no pods mover el
emulador como un telfono real). Despus de desbloquearlo, hac clic en el botn "Connect the
Device..." en el Editor de Bloques, y luego clic en el nombre del emulador. Cuando el cono del
telfono se vuelve verde, significa que el emulador est conectado.

La instalacin est lista! Ya ests listo para tu primera

aplicacin.

HelloPurr
Construyendo tu primera aplicacin: HelloPurr
Ahora que configuraste tu computadora y tu dispositivo, y que aprendiste cmo trabajan el
Diseador y el Editor de Bloques, ests listo para construir la aplicacin HelloPurr. En este
momento, deberas tener el Diseador abierto en tu navegador, el Editor de Bloques abierto en
otra ventana (que se ver como el cono de taza de caf de Java en tu barra de tareas), y el
emulador Android conectado al Editor de Bloques.

HelloPurr: toca el gato y escucha el maullido

HelloPurr es una aplicacin sencilla que podrs hacer en poco tiempo. Vas a crear un botn con
la imagen de un gato en l, y luego vas a programar el botn para que cuando sea cliqueado se
escuche un maullido.
Para construir HelloPurr, necesitars una imagen de un gato y un archivo de audio con el sonido
de maullido. Descarg esos archivos a tu computadora usando los siguientes enlaces. Para
descargar: ctrl + clic en el enlace, clic derecho sobre la imagen o sonido y eleg Guardar como.
Guard ambos archivos en tu carpeta de trabajo.

Imagen de gato: kitty.png

Sonido de maullido: meow.mp3

Seleccion componentes para desarrollar tu aplicacin

Los Componentes de App Inventor estn ubicados en el sector izquierdo de la ventana del
Diseador bajo el ttulo Palette. Los componentes son los elementos bsicos que uss para
hacer aplicaciones en el telfono Android. Son como los ingredientes de una receta. Algunos
componentes son muy simples, como un componente Label, que simplemente muestra texto en
la pantalla, o un componente Button (#1 a la izquierda) al que tocs para iniciar una accin.
Otros componentes son ms elaborados: un lienzo de dibujo (Canvas, #2 a la izquierda) que
puede contener imgenes o animaciones, un sensor Accelerometer que trabaja como un
controlador Wii y detecta cuando movs o agits el telfono, componentes que envan mensajes
de texto, componentes que reproducen msica y video, componentes que traen informacin
desde sitios Web, y mucho ms.
Para usar un componente en tu aplicacin, tens que hacerle clic y arrastrarla al visor en el
centro del Diseador. Cuando agregs un componente al Visor, ste tambin aparecer en la
lista de componentes en el lado derecho del Visor.
Los componentes (#2 debajo) tienen propiedades que se pueden ajustar para cambiar la manera
en la que el componente aparece o se comporta dentro de la aplicacin. Para ver y cambiar las
propiedades de un componente (#3 debajo), primero tens que elegir el componente deseado
en tu lista de componentes.

Pasos para elegir componentes y establecer propiedades

HelloPurr tendr un componente Button que muestra la imagen del gato que descargaste antes.
Para lograrlo:
Paso 1. Desde la paleta Basic, arrastr el componente Button a Screen1 (#1). Para hacer que
el botn tenga la imagen del gato, en el panel Properties, en Image, hac clic en el texto
"None..." y clic en "Upload New" (#2). Aparecer una ventana para indicar cul es el archivo
que tiene la imagen (clic en "Browse" para localizarlo). Clic en el archivo kitty.png, clic en
"Open", y luego clic en "OK".

Paso 2. Cambi la propiedad Text del botn: Borr "Text for Button1", dejando la propiedad
texto del botn en blanco, de manera que no quede nada escrito sobre la cara del gato. Tu
Diseador debera verse as:
Si no se ve la imagen del gato completa, pods ajustarla fijando las propiedades Height y Width
del botn a "Fill Parent". Para hacerlo, hac clic en el componente Button, en el panel de
Propiedades desplazate hasta la parte inferior donde dice Width y hac clic en "Automatic..."
para activar una lista desplegable, donde elegirs "Fill Parent". Hay que hacer lo mismo para la
propiedad Height.

Paso 3. De la paleta Basic, arrastr un componente Label al Visor (#1), y ubicalo debajo de la
imagen del gato. Aparecer debajo de tu lista de componentes como Label1.
En el panel de Propiedades, cambi la propiedad Text de Label1 a "Pet the Kitty" (#2). Vers el
cambio de texto en el Diseador y en tu dispositivo. Cambi FontSize de Label1 a 30 (#3).
Cambi BackgroundColor de Label1 haciendo clic en el recuadro (#4): eleg un color. Cambi
TextColor de Label1 (#5) a cualquier color que te guste. Aqu, el color de fondo es azul y el color
del texto es amarillo.

Paso 4. En la paleta, clic en el grupo Media y arrastr un componente Sound al visor. Sin
importar en qu lugar lo ubiques, aparecer en la zona inferior del visor llamada Non-visible
components. En el panel Media, clic en Add... (#2) Localiz el archivo meow.mp3 que bajaste
antes y cargalo en este proyecto. En el panel de Propiedades, fijate que la propiedad
Source dice None.... Clic en la palabra None... para cambiarla a meow.mp3 (#4).

Programando con el Editor de Bloques

Hasta ahora estuviste organizando la pantalla de su aplicacin y los componentes en el

Diseador, e una ventana del navegador. Para empezar a programar el comportamiento de la
aplicacin, necesits ir al Editor de Bloques. Si el Editor de Bloques no est en ejecucin, clic en
el botn Open the Blocks Editor en la esquina superior derecha de la ventana al Diseador.
Nota: Una manera fcil de cambiar entre el Editor de Bloques y el Diseador es usar la barra de
tareas que muestra las aplicaciones que estn ejecutndose. El Editor de Bloques se ejecuta
localmente como un programa java y se representa con un cono de una taza de caf. El
Diseador se ejecuta en tu navegador web de modo que pods encontrarlo haciendo clic en el
cono de tu navegador.
Una vez que tens listo el Editor de Bloques, continu con el paso siguiente para empezar a
programar tu aplicacin con bloques.

Haciendo que el sonido se escuche

Paso 1. En la solapa My Blocks a la izquierda del Editor de Bloques, clic en el grupo
Button1 para abrirlo. Arrastr el bloque Button1.Click al espacio de trabajo (el area abierta a la
derecha).

Esos bloques verdes se llaman bloques event handler (manejadores de eventos). Los
bloques manejadores de eventos especifican cmo debera responder el telfono ante ciertos
eventos: se puls un botn, se agit el telfono, el usuario est moviendo su dedo por la
pantalla, etc. Los bloques manejadores de eventos son de color verde y usan la palabra when.
Por ejemplo, when Button1.Click es un manejador de evento.
.
Paso 2. Clic en el grupo Sound1, arrastr el bloque Sound1.Play block y conectalo con la
seccin "do" del bloque when Button1.Click. Los bloques se conectan como piezas de un
rompecabezas y pods escuchar un sonido de clic cuando se conectan.

Los bloques violetas y azules se llaman command blocks (bloques de comando), y se ubican
dentro de los manejadores de eventos. Cuando se ejecuta un manejador de eventos, se ejecuta
la secuencia de comandos contenida en el manejador. Un comando es un bloque que especifica
una accin que se debe ejecutar (por ejemplo, tocar un sonido) cuando el evento (por ejemplo,
presionar Button1) se activa.
Tus bloques deberan verse as en este momento:

Pods ver que el bloque de comando est dentro del manejador de eventos. Este conjunto
de bloques significa: "cuando se hace clic en Button1, sonar Sound1. El manejador de eventos
es como una categora de accin (por ejemplo, cuando un botn es cliqueado), y el comando
especifica el tipo de accin y los detalles de la accin (por ejemplo, tocar un sonido y un sonido
especfico).
Pods leer ms acerca de cmo trabajan los bloques en: Understanding Blocks.
Probalo! Cuando hacs clic en el botn deberas escuchar el maullido. Felicitaciones, tu primera
aplicacin est funcionando!

Nota: hay un error con el componente Sound en algunos dispositivos. Si ves un "OS Error" y no se
escucha el sonido o se demora en ejecutarlo, volv al Diseador y trat de usar el componente
Player (lo encontrs bajo Media) en lugar del componente Sound.

Empaquetando tu aplicacin
Mientras tu dispositivo (emulador o telfono / tablet) est conectado a App Inventor, tu
aplicacin se ejecuta en tiempo real en tu dispositivo. Si desconects el emulador / telfono /
tablet del Editor de Bloques, la aplicacin desaparecer. Siempre pods recuperarla
reconectando el dispositivo. Para tener una aplicacin funcionando sin estar conectada a App
Inventor, tens que "empaquetar" la aplicacin para obtener un paquete de aplicacin (archivo
apk).
Para "empaquetar" la aplicacin a tu telfono, conect el telfono al Editor de Bloques y
asegurate de que el color del cono del telfono (en la esquina superior derecha del Editor de
Bloques) sea verde.

Despus volv al Diseador y eleg "Package for Phone" en la parte superior derecha de la
pgina de diseo. App Inventor mostrar tres opciones para empaquetar:

1. Show Barcode: Pods generar un Cdigo QR, que pods usar para instalar la aplicacin en tu
telfono o en una tablet con cmara, con el agregado de un scanner de cdigo QR, como ZXing
barcode scanner (disponible gratis en Google Play).
Nota: este cdigo funciona slo para tu dispositivo porque est asociado con tu cuenta de
Google. Si quers compartir tu aplicacin con otros usando un cdigo, tendrs que descargar el
archive .apk a tu computadora y usar algn programa para convertir el archivo en un cdigo QR.
Pods encontrar ms informacin ac.

2. Download to this Computer: Pods descargar la aplicacin a tu computadora como un

archivo apk, que pods distribuir y compartir manualmente instalndolo en otros dispositivos (se
suele llamar "side loading").
3. Download to Connected Phone: Pods descargar tu archivo apk directamente en el
dispositivo conectado al Editor de Bloques. Esto funciona an si ests usando el emulador como
tu dispositivo.

Cambios! Hacer que el gato ronronee

El cambio ser que el gato ronronee cuando se agita el telfono. En el Editor de Bloques abr el
grupo Sound1 y arrastr el bloque Sound1.Vibrate debajo del bloque Sound1.Play. Vers un
cono de advertencia Amarillo en la esquina izquierda del bloque, lo que significa que el bloque
tiene un componente perdido.

El bloque Sound1.Vibrate block tiene una muesca abierta, lo que significa que tens que
conectarle algo que especifique ms acerca de cmo tendra que funcionar este bloque. Tenemos
que especificar cunto tiempo durar esta accin. El tiempo se expresa en milsimas de segundo
(milliseconds): para hacer que el telfono vibre durante medio segundo, necesitamos conectar
un valor de 500 milisegundos.
En la solapa Built-In, en el grupo Math, busc el bloque number y conectalo con Sound1.Vibrate.

Despus que ubics el bloque number, clic en el nmero "123". El nmero aparece resaltado:
escrib en su lugar "500" con tu teclado.

Listo! Fijate que el cono amarillo de alerta ya no est: el bloque ya no tiene un componente
perdido.

Ahora conect tu telfono y toc la imagen del gato. El telfono debera vibrar y se debera
escuchar el maullido al mismo tiempo.

Revisin
Aqu estn las ideas principales que hemos visto:

Pods construir aplicaciones seleccionando componentes (ingredientes) e indicando a

esos componentes qu hacer y cundo hacerlo.

Uss el Diseador para seleccionar componentes y establecer sus propiedades. Algunos

componentes son visibles y otros no.

Pods agregar media (sonidos e imgenes) a tus aplicaciones desde tu computadora.

Uss el Editor de Bloques para organizar los bloques que definan el comportamiento
de los componentes.

Los bloques when ... do ... son manejadores de eventos, que le dicen a los componentes
qu hacer cuando algo ocurre.

Los bloques call ... les dicen a los componentes que hagan cosas.

Scane la aplicacin de ejemplo en tu telfono

Escane el siguiente cdigo en tu telfono para instalar y ejecutar esta aplicacin.

O descarg el archivo apk