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 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: http://beta.appinventor.mit.edu/. Si es la primera vez que uss App Inventor, vers una pgina de proyecto en blanco. 1. 2. Clic en New en el lado izquierdo, cerca la parte superior de la pgina. 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. 2. 3. Clic 'OK' (Abrir el archivo Java) Clic 'Siempre confiar en contenidos de este publicador' y 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 Paso 4.

#2

#3

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