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
([Link]), 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
Nota: Si uss Firefox con la extension NoScript extension, tendrs que deshabilitarla. Fijate
en pgina para resolver problemas.
Apple Safari 5.0 o superior
Google Chrome 4.0 o superior
Microsoft Internet Explorer 7 o superior
1. 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: [Link] 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 [Link] 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: [Link]
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 [Link], 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 [Link] 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
[Link] es un manejador de evento.
.
Paso 2. Clic en el grupo Sound1, arrastr el bloque [Link] block y conectalo con la seccin "do"
del bloque when [Link]. 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 [Link] debajo del bloque [Link]. Vers un cono de
advertencia Amarillo en la esquina izquierda del bloque, lo que significa que el bloque tiene un
componente perdido.
El bloque [Link] 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 [Link].
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