eac-sanmaron.wikispaces.com · Web viewCuando 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

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 superioro 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 emuladorParte 4 de 4 Instrucciones de Instalación

Si estás usando el emulador por primera vez, seguí estos pasos.

Paso 1Abrí 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: HelloPurrAhora 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