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ón usuarios 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 con Chrome.

Verificar Java Web Start

Para verificar si Java Web Start está 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 Notepad no 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 Notepad y 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 Start para abrir archivos jnlp. Una

solución podría 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 usás Firefox con la extension NoScript extension, tendrás que deshabilitarla.

Fijate en página para resolver problemas.

Apple Safari 5.0 o superior

Google Chrome 4.0 o superior

Microsoft Internet Explorer 7 o superior

1.Instalación

2. Instalar App Inventor

Parte 2 de 4 Instrucciones 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 llamado App 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 para ver 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ás App 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 para ver 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 "Connect the

Device..." 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

HelloPurr es 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 tu carpeta 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 componente Label, que simplemente muestra texto en

la pantalla, o un componente Button  (#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 componente Button 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 Height y Width

del botón 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 elegirás "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). Verás el

cambio de texto en el Diseñador 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 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 event handler (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 componente Sound en 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í "Package for Phone" en la parte superior derecha de la

página de diseño. App Inventor mostrará tres opciones para empaquetar:

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 ZXing

barcode 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. Download to this Computer: 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 "side loading").

3. Download to Connected Phone: Podés descargar tu archivo apk directamente 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.

Tenemos que especificar cuánto tiempo durará esta acció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 number y 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ás el 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 bloques call ... les dicen a los componentes que hagan cosas.

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 archivo apk