App Inventor : nuestra primera aplicacion-parte 4 (final)

Regresemos a la pantalla de Designer para agregar el maullido del gato....

En Palette:
-hacemos clic en la cabecera de la subsección "media" para desplegar sus elementos.
-desde aqui arrastramos el elemento "Sound" hasta la seccion de "Viewer" (no importa donde lo dejemos pues automaticamente se le catalogará como elemento no-visible)
En Components:
-si no tenemos seleccionado el nuevo elemento Sound hacerle clic para seleccionarlo
En Properties:
-haciendo clic en el recuadro de Source cargamos el archivo meow.mp3, (previamente descargado)


Ahora solo queda hacer que el boton suene....
Para esto volvemos a la pantalla del Block Editor, hacemos clic en la pestaña de "My Blocks" y veremos uno tras de otro los elementos que componen nuestra aplicación.

Hacemos clic sobre "Button1" y se desplegará una nueva sección con los eventos asociados a este elemento.
Desde ahi arrastramos hasta el área del editor, el evento "Button1.click".

Finalmente,
Hacemos clic sobre "Sound1" y de los eventos desplegados, arrastraremos "Sound1.play" hasta dejarlo dentro del evento click del Button1.


y..listo!
anda a la ventana del Emulador y hazle click sobre el boton-gato y escucharás
el maullido.

App Inventor : nuestra primera aplicacion-parte 3

Es hora de darle "vida" a nuestra aplicación.
Para esto vamos a abrir el Block Editor, que como recordarás es donde le asignamos comportamiento a los elementos.
Haciendo click en el boton "Open Block editor" se te pedirá que descargues un archivo (AppInventorForAndroidCodeblocks.jnlp) el cual comunicará a tu computadora con un dispositivo.(en nuestro caso usaremos el emulador)

Luego de darle "Ok".
El Block editor se abrirá y se nos preguntará si usaremos un telefono celular o el emulador.
Elegiremos usar el emulador (clic en "use emulator").


Esto hará que empiece a activarse el Emulator. Cuando esté listo (osea : cuando tenga la apariencia de un celular bloqueado) podemos recien "desbloquearlo" (arrastrando la barra de desbloqueo hacia la derecha con el mouse) para luego comunicarlo con nuestra aplicación haciendo click en el botón "connect to device".

Cuando hagamos esto veremos que el Emulador mostrará en su pantalla nuestro boton con la imagen del gato.

App Inventor : nuestra primera aplicacion-parte 2

Como es la primera vez que usas App Inventor, te aparecerá la página inicial de Proyectos vacía.
Aprovecha entonces y
1) crea tu primer proyecto haciendo click en el botón New que se encuentra en la esquina superior izquierda.
2) ingresa el nombre que quieras, p.e: HolaGato (recuerda que este no puede tener espacios en blanco en medio)
Haz click en OK, y verás que se abre la vista de Designer donde elegiremos los componentes de nuestra aplicación.

Como verás, en esta vista se tienen 4 secciones:
-la Palette , donde estan los elementos a colocar en nuestra aplicación.
-la Viewer, que simula una pantalla de celular y adonde arrastraremos los elementos seleccionados.
-la Component, donde el elemento "padre" es Screen1 apartir del cual se listarán los elementos seleccionados. Este sección tiene una subsección llamada "media" en la aparecerán los elementos del tipo media relacionados con algun componente.
-la de Properties, donde podemos modificar las propiedades de los elementos seleccionados.

Teniendo en mente el objetivo de la aplicación...
- necesitaremos un botón, para lo cual arrastraremos el elemento "Button" desde la sección Palette hasta la de Viewer para dejarlo sobre Screen1.
- este botón deberá tener la imagen del gato como fondo, por lo que iremos a la sección "Properties", y en la propiedad "image" haremos clic sobre el texto de "none.." esto nos abrirá una ventana para subir la foto,entonces: clic en "browse" para ubicar la imagen del gato. Clic en "Ok" para terminar.
- si eres observador verás que sobre la imagen recien cargada se lee "text for button1" lo borraremos yendo de nuevo a la sección de "Properties" y blanqueando el contenido de la propiedad "text".

App Inventor : nuestra primera aplicacion-parte 1

Para no inventar la rueda, nuestra primera aplicacion será la misma que proponen los de Google. En este caso se podria decir que cambiaron el "Hola Mundo" por el "Gatito Maullador".
El objetivo de la aplicación es crear una donde haya un botón que tenga la imagen de un gato, y que al hacerle click diga "miau". (ver imagen ilustrativa ---->)
Ok, sé que parece medio tonta pero...por algo se empieza :-D

Empezamos?
antes que nada vamos a necesitar 3 cosillas para poder continuar:
1) la imagen de un gato, que la puedes bajar desde acá
2) un archivo de sonido del maullido del susodicho, que puedes bajar desde acá.
3) y...una cuenta de gmail!
Pasa que, como comenté anteriormente, nuestros proyectos se guardarán en "la red" más precisamente en servidores de google, por lo que para poder acceder a ellos tendremos que logearnos, de la forma que estás pensando..si!!! con tu usuario(y password) de gmail. Todo cierra verdad?

Listo?
bueno, ahora ingresa desde tu browser favorito (el cual espero fervientemente que no sea Internet Explorer) a la siguiente dirección: http://appinventor.googlelabs.com

App Inventor : preparandonos para empezar

1) nuestra PC debe tener Java 6 (tambien llamado jdk 1.6) el cual puedes descargar desde aca
2) para probar que todo anda ok ingresa a esta página que testea si Java está ejecutandose correctamente. Si no se ve un cuadrado negro en medio de la pantalla, quiere decir que vas por buen camino ;-)
3) descarga el instalador del App Inventor desde acá
4) ejecuta el instalador del App Inventor. (dale next, next, next sin miedo)
5) ..y listo!

App Inventor : nociones básicas

Decidí empezar este blog dedicado a Android, con un tutorial de App Inventor por considerar que es una puerta de entrada bastante amigable tanto para los que se inician en el "fascinante" mundo de la programacion como para aquellos viejos lobos de mar (mar de bytes) que timidamente se acercan a esto de desarrollar en android y quieren ver resultados "ya!".
Ahora bien, qué demonios es App Inventor?? a saber, es una plataforma ideada por la gente de Google que permite crear aplicaciones android de un modo "visual", en el que los componentes (y el comportamiento de los mismos) los encontramos insertos (ojo, con la palabrita) dentro de una "paleta de herramientas" de donde las tomaremos y arrastraremos hacia nuestra área de trabajo para asi,(con algo de ingenio y buen humor) darle vida a "algo" que podamos luego ver andando ya sea directamente en nuestro telefono celular o sobre un "emulador".

En App Inventor contamos con 2 áreas de trabajo principales:
"App Inventor Designer", donde seleccionamos los elementos que tendrá nuestra aplicación y el "App Inventor Blocks Editor", donde relacionamos estos elementos con el comportamiento que querramos darles.

(Un detalle importante es que nuestros proyectos serán hechos sobre el browser y almacenados en servidores de Google.)