App inventor tutorial

Prepará tu sistema (Java)
App Inventor requiere Java
Si ya tenés instalado Java, o si no estás seguro, seguí las indicaciones para verificar si Java Web Start
está funcionando correctamente. Si estás seguro que no tenés Java instalado, seguí las instrucciones
de la página Java Installation de Oracle.
Atenciónusuarios Mac: La página Oracle Java dice que Java no funciona bien con el navegador
Chrome en Mac. Esto no sería correcto, podrías usar Java 7 y App Inventor en Mac conChrome.

Verificar Java Web Start
Para verificar si Java Web Startestá funcionando bien, clic en el botón naranja que está debajo para
tratar de ejecutar un programa desde la Web. Este test debería bajar y ejecutar un archive
(notepad.jnlp), que creará una ventana llamada "Notepad" donde podés ingresar texto. Dependiendo
del navegador, quizás necesites abrir manualmente el archivo jnlp después de que se descargue.
Si Notepadno se ejecuta, entonces ha fallado el test. No trates de usar todavía App Inventor, buscá
debajo posibles soluciones.
Si el test resulta bien, cerrá la ventana Notepady continuá.

Si el test falla, las razones podrían ser:
Tu computadora tiene un firewall que no permite descargar el programa. (Consultá con el
administrador de la red o el responsable de tecnología).
Tu navegador no está configurado para usar Java Web Startpara abrir archivos jnlp.
Unasoluciónpodríaserreinstalar 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 usásFirefox con la extensionNoScript extension, tendrás que deshabilitarla. Fijate
en páginapara resolver problemas.
Apple Safari 5.0 o superior
Google Chrome 4.0 o superior
Microsoft Internet Explorer 7 o superior

1. Instalación
2. InstalarApp Inventor
Parte 2 de 4Instrucciones de Instalación
Instalar App Inventor
Antes de que puedas usar App Inventor, tenés que instalarlo en tu computadora. El software que
necesitás se encuentra en un paquete llamadoApp Inventor Setup. Seguí las instrucciones de tu
sistema operativo para hacer la instalación, y después 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 Diseñador de App Inventor y el Editor de Bloques
Ahora estás listo para iniciar el diseñador 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 paraver
cómo configurar un dispositivo o un emulador.

3. Iniciar App Inventor por primera vez

Paso 3 de 4 de las instrucciones de configuración:
Comenzar App Inventor
Antes de empezar, asegurate de que tenés acceso a:
Internet
Una cuenta de Gmail (así es cómo te loguearás en App Inventor) | Conseguí una cuenta de Gmail
gratis
NOTA: Una vez que ingreses a App Inventor, regresá al Paso 4 para ver cómo conectar un dispositivo
o emulador.

Comenzar el Diseñador 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 usásApp Inventor, verás una página de proyecto en blanco.
1.

Clic en New en el lado izquierdo, cerca la parte superior de la página.

2.

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

El navegador abrirá una página web que llamaremos Diseñador, el lugar donde seleccionarás los
componentes para tu aplicación y diseñarás la interfaz de usuario. Esta página debería verse así:

Además del Diseñador, tenés que iniciar el Editor de Bloques, el lugar donde indicarás el
comportamiento de la aplicación. Es una aplicación separada con su propia ventana, y por lo tanto
necesitamos dos ventanas para diseñar una aplicación. Estas ventanas están asociadas: los cambios
hechos en el Diseñador se verán inmediatamente reflejados en el Editor de Bloques.

Iniciando el Editor de Bloques
Cuando hacés clic en Open the blocks editor en la ventana del Diseñador, 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 botón 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 automáticamente. Podés
entonces localizer el archive AppInventorForAndroidCodeblocks.jnlp y ejecutarlo. El Editor de
Bloques debería verse así:

La gran zona (canvas) vacía a la derecha es el espacio de trabajo, en el que ubicarás 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 hacés clic
en uno de estos recuadros, podés ver todos los bloques de ese grupo.Podés desplazarte paraver
más bloques.
La solapa Built-In contiene el conjunto de bloques standard que están disponibles para toda
aplicación que construyas (Definition, Text, Lists, etc.). Los grupos de la solapa My Blocks contienen
bloques específicos relacionados con el conjunto de components que elegiste para tu aplicación. La
solapa Advanced contiene bloques para desarrollar aplicaciones intermedias y avanzadas con una
lógica más compleja.
El Diseñador corre desde el navegador, y el Editor de Bloques corre desde Java; sin embargo, están
conectados. Por lo tanto, aún cuando cierres la ventana del Editor de Bloques, toda la información en
el Editor de Bloques se almacena en el Diseñador. Cuando hacés clic en el botón "Open the Blocks
Editor", se descarga un nuevo archivo .jnlp en tu computadora, y tenés 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 construís tu aplicación, podés testearla en un emulador o en un dispositivo Android.
Nosotros vamos a probar la aplicación 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 Instalación
Si estás usando el emulador por primera vez, seguí estos pasos.
Paso 1
Abrí el Editor de Bloques, y hacé clic en el botón "New emulator" en la parte superior de la ventana.

Paso 2.
Recibirás un mensaje diciendo que se está iniciando el emulador, y pidiéndote 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,
todavía tenés que esperar hasta que el teléfono emulado termine de preparar su tarjeta SD: habrá
una notificación en la parte superior del teléfono mientras se prepara la tarjeta. Tendrás que usar el
mouse en la pantalla del teléfono para desbloquear el dispositivo arrastrando el candado de fondo
verde hacia la derecha (#3).

#1

#2

#3

Paso 4.
El emulador trabaja como un teléfono con algunas limitaciones (por ej., no podés “mover” el
emulador como un teléfono real). Después de desbloquearlo, hacé clic en el botón
"ConnecttheDevice..." en el Editor de Bloques, y luego clic en el nombre del emulador. Cuando el
ícono del teléfono se vuelve verde, significa que el emulador está conectado.

¡La instalación está lista! Ya estás listo para tu primera
aplicación.

HelloPurr
Construyendo tu primera aplicación: HelloPurr
Ahora que configuraste tu computadora y tu dispositivo, y que aprendiste cómo trabajan el
Diseñador y el Editor de Bloques, estás listo para construir la aplicación HelloPurr. En este momento,
deberías tener el Diseñador 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
HelloPurres una aplicación sencilla que podrás hacer en poco tiempo. Vas a crear un botón con la
imagen de un gato en él, y luego vas a programar el botón para que cuando sea cliqueado se
escuche un maullido.
Para construir HelloPurr, necesitarás 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 tucarpeta de trabajo.
Imagen de gato: kitty.png
Sonido de maullido: meow.mp3

Seleccioná componentes para desarrollar tu aplicación

Los Componentes de App Inventor están ubicados en el sector izquierdo de la ventana del Diseñador
bajo el título Palette. Los componentes son los elementos básicos que usás para hacer aplicaciones
en el teléfono Android. Son como los ingredientes de una receta. Algunos componentes son muy
simples, como un componenteLabel, que simplemente muestra texto en la pantalla, o un
componenteButton (#1 a la izquierda) al que tocás para iniciar una acción.
Otros componentes son más elaborados: un lienzo de dibujo (Canvas, #2 a la izquierda) que puede
contener imágenes o animaciones, un sensor Accelerometer que trabaja como un controlador Wii y
detecta cuando movés o agitás el teléfono, componentes que envían mensajes de texto,
componentes que reproducen música y video, componentes que traen información desde sitios Web,
y mucho más.
Para usar un componente en tu aplicación, tenés que hacerle clic y arrastrarla al visor en el centro
del Diseñador. Cuando agregás un componente al Visor, éste también 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 aplicación. Para ver y cambiar las
propiedades de un componente (#3 debajo), primero tenés 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 componenteButton a Screen1 (#1). Para hacer que el botón
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 cuál 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 botón: Borrá"Text for Button1", dejando la propiedad texto del
botón en blanco, de manera que no quede nada escrito sobre la cara del gato. Tu Diseñador debería
verse así:

Si no se ve la imagen del gato completa, podés ajustarla fijando las propiedades HeightyWidth del
botón a "FillParent". Para hacerlo, hacé clic en el componente Button, en el panel de Propiedades
desplazate hasta la parte inferior donde dice Widthy hacé clic en "Automatic..." para activar una lista
desplegable, donde elegirás "FillParent". Hay que hacer lo mismo para la propiedad Height.

Paso 3. De la paleta Basic, arrastrá un componenteLabel 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 "PettheKitty" (#2). Verás el cambio
de texto en el Diseñador y en tu dispositivo. CambiáFontSizede Label1 a 30 (#3).
CambiáBackgroundColorde Label1 haciendo clic en el recuadro (#4): elegí un color.
CambiáTextColorde 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 aplicación y los componentes en el Diseñador, e
una ventana del navegador. Para empezar a programar el comportamiento de la aplicación, necesitás
ir al Editor de Bloques. Si el Editor de Bloques no está en ejecución, clic en el botón Open the Blocks
Editor en la esquina superior derecha de la ventana al Diseñador.
Nota: Una manera fácil de cambiar entre el Editor de Bloques y el Diseñador es usar la barra de
tareas que muestra las aplicaciones que están ejecutándose. El Editor de Bloques se ejecuta
localmente como un programa java y se representa con un ícono de una taza de café. El Diseñador
se ejecuta en tu navegador web de modo que podés encontrarlo haciendo clic en el ícono de tu
navegador.
Una vez que tenés listo el Editor de Bloques, continuá con el paso siguiente para empezar a
programar tu aplicación 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 eventhandler (manejadores de eventos). Los bloques
manejadores de eventos especifican cómo debería responder el teléfono ante ciertos eventos: se
pulsó un botón, se agitó el teléfono, 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 sección "do"
del bloque when Button1.Click. Los bloques se conectan como piezas de un rompecabezas y podés
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 acción que
se debe ejecutar (por ejemplo, tocar un sonido) cuando el evento (por ejemplo, presionar Button1)
se activa.
Tus bloques deberían verse así en este momento:

Podés 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 categoría de acción (por ejemplo, cuando un botón es cliqueado), y el comando especifica
el tipo de acción y los detalles de la acción (por ejemplo, tocar un sonido y un sonido específico).
Podés leer más acerca de cómo trabajan los bloques en: Understanding Blocks.
Probalo! Cuando hacés clic en el botón deberías escuchar el maullido. Felicitaciones, ¡tu primera
aplicación está funcionando!

Nota: hay un error con el componenteSounden algunos dispositivos. Si ves un "OS Error" y no se escucha el sonido – o se demora
en ejecutarlo, volvé al Diseñador y tratá de usar el componente Player (lo encontrás bajo Media) en lugar del componente Sound.

Empaquetando tu aplicación
Mientras tu dispositivo (emulador o teléfono / tablet) está conectado a App Inventor, tu aplicación se
ejecuta en tiempo real en tu dispositivo. Si desconectás el emulador / teléfono / tablet del Editor de
Bloques, la aplicación desaparecerá. Siempre podés recuperarla reconectando el dispositivo. Para
tener una aplicación funcionando sin estar conectada a App Inventor, tenés que "empaquetar" la
aplicación para obtener un paquete de aplicación (archivo apk).
Para "empaquetar" la aplicación a tu teléfono, conectá el teléfono al Editor de Bloques y asegurate de
que el color del ícono del teléfono (en la esquina superior derecha del Editor de Bloques) sea verde.

Después volvé al Diseñador y elegí "PackageforPhone" en la parte superior derecha de la página de
diseño. App Inventormostrarátresopcionesparaempaquetar:

1. Show Barcode: Podés generar un Código QR, que podés usar para instalar la aplicación en tu
teléfono o en una tablet con cámara, con el agregado de un scanner de código QR, como
ZXingbarcode scanner (disponible gratis en Google Play).
Nota: este código funciona sólo para tu dispositivo porque está asociado con tu cuenta de Google. Si
querés compartir tu aplicación con otros usando un código, tendrás que descargar el archive.apk a
tu computadora y usar algún programa para convertir el archivo en un código QR. Podés encontrar
más información acá.
2. DownloadtothisComputer: Podés descargar la aplicación a tu computadora como un archivo apk,
que podés distribuir y compartir manualmente instalándolo en otros dispositivos (se suele
llamar "sideloading").

3. DownloadtoConnectedPhone: Podés descargar tu archivo apkdirectamente en el dispositivo
conectado al Editor de Bloques. Esto funciona aún si estás usando el emulador como tu dispositivo.

Cambios!Hacer que el gato ronronee
El cambio será que el gato ronronee cuando se agita el teléfono. En el Editor de Bloques abrí el
grupo Sound1 y arrastrá el bloque Sound1.Vibrate debajo del bloque Sound1.Play. Verás 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 tenés que conectarle
algo que especifique más acerca de cómo tendría que funcionar este bloque.
Tenemosqueespecificarcuántotiempoduraráestaacción.El tiempo se expresa en milésimas de
segundo (milliseconds): para hacer que el teléfono vibre durante medio segundo, necesitamos
conectar un valor de 500 milisegundos.
En la solapa Built-In, en el grupo Math, buscá el bloque numbery conectalo con Sound1.Vibrate.

Después que ubicás el bloque number, clic en el número "123". El número 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 teléfono y tocá la imagen del gato. El teléfono debería vibrar y se debería escuchar
el maullido al mismo tiempo.

Revisión
Aquí están las ideas principales que hemos visto:
Podés construir aplicaciones seleccionando componentes (ingredientes) e indicando a esos
componentes qué hacer y cuándo hacerlo.
Usásel Diseñador para seleccionar componentes y establecer sus propiedades. Algunos
componentes son visibles y otros no.
Podés agregar media (sonidos e imágenes) a tus aplicaciones desde tu computadora.
Usás 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 bloquescall ... les dicen a los componentesquehagancosas.

Scaneála aplicación de ejemplo en tu teléfono
Escaneá el siguiente código en tu teléfono para instalar y ejecutar esta aplicación.

O descargá el archivoapk

App inventor tutorial

Más contenido relacionado

La actualidad más candente (15)

Similar a App inventor tutorial (20)

App inventor tutorial