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 página Java Installation de Oracle. : 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 u sar 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. Java.
Tu computadora no tiene suficiente memoria para ejecutar App I nventor (requiere alrededor de 950 Mb de memoria)
Requerimientos de sistema
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
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 In ventor (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
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. E sta 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 un a 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 del Editor de Bloques y se ejecutará.
en la ventana del Diseñador, se descargará el archivo
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' 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
, en el que ubicarás los bloques para
ir armando el programa.
En el lado izquierdo, hay tres
(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
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
contienen
bloques específicos relacionados con el conjunto de components que elegiste para tu aplicación. La solapa
contiene bloques para desarrollar aplicaciones intermedias y avanzadas con una
lógica más compleja.
El
corre desde el navegador, y el
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.
Abrí el Editor de Bloques, y hacé clic en el botón "New emulator" en la parte superior de la ventana .
Recibirás un mensaje diciendo que se está iniciando el emulador, y pidiéndote que seas paciente; iniciar el emulador puede llevar algunos minutos.
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
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 lu ego 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 bajo el título
de App Inventor están ubicados en el sector i zquierdo de la ventana del Diseñador . Los componentes son los elementos básicos que usás para hacer aplicaciones
en el teléfono Android. Son como los ingredientes de una r eceta. Algunos componentes son muy simples, como un componente componente
, que simplemente muestra texto en la pantalla, o un
(#1 a la izquierda) al que tocás para iniciar una acción.
Otros componentes son más elaborados: un lienzo de dibujo ( contener imágenes o animaciones, un sensor
, #2 a la izquierda) que puede
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 li sta 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
que muestra la imagen del gato que descargaste antes. Para
lograrlo:
. Desde la paleta
, arrastrá el componente
tenga la imagen del gato, en el panel
a Screen1 (#1). Para hacer que el botón
, 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".
. Cambiá la propiedad
del botón: Borrá "Text for Button1", dejando la propiedad texto
del botón en blanco, de manera que no quede n ada 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.
. De la paleta
, arrastrá un componente
al Visor (#1), y ubicalo debajo de la imagen
del gato. Aparecerá debajo de tu lista de componentes como Label1.
En el panel de
, cambiá la propiedad
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.
. En la paleta, clic en el grupo
y arrastrá un componente
qué lugar lo ubiques, aparecerá en la zona inferior del visor llamada panel
, clic en Add... (#2) Localizá el archivo
proyecto. En el panel de Propiedades, fijate que la propiedad None... para cambiarla a meow.mp3 (#4).
Programando con el Editor de Bloques
al visor. Sin importar en . En el
que bajaste antes y cargalo en este dice None.... Clic en la palabra
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 en la esquina superior derecha de la v entana al Diseñador.
Nota: Una manera fácil de cambiar entre el Editor de Bloques y e l 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 Bl oques, continuá con el paso siguiente para empezar a programar tu aplicación con bloques.
Haciendo que el sonido se escuche . En la solapa My Blocks a la izqui erda del Editor de Bloques, clic en el grupo
para
abrirlo. Arrastrá el bloque Button1.Click al espacio de trabajo (el area abierta a la derecha).
Esos bloques verdes se llaman bloques
. 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.
.
. Clic en el grupo
, 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
blocks (bloques de comando), y se ubican dentro
de los manejadores de eventos. Cuando se ejecuta un manejador de eventos, se ejecuta l a 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
está dentro del
. 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 eje mplo, tocar un sonido y un soni do 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 "
" 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.
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.
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.
: 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
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 ti ene 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
.
En la solapa Built-In, en el grupo
, 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
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
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
