Tutorial

http://lagacetadeandroid.blogspot.com.es/

ndice
Introduccin .................................................................................................................................. 3 Qu es App Inventor? .............................................................................................................. 3 Qu necesito para utilizar App Inventor? ................................................................................ 3 Requisitos del Sistema ........................................................................................................... 3 Requisitos del Navegador ...................................................................................................... 3 Requisitos de Software .......................................................................................................... 3 Preparando nuestra cuenta y equipo ............................................................................................ 4 Crear una cuenta ....................................................................................................................... 4 Instalando el Software necesario .............................................................................................. 4 Empezamos. Un primer vistazo ..................................................................................................... 5 Creando un proyecto ................................................................................................................. 5 Creando la interfaz grafica......................................................................................................... 6 Palette. Los objetos de App Inventor .................................................................................... 7 Viewer. Una vista rpida a tu aplicacin ............................................................................... 9 Components. Todo en un vistazo. ....................................................................................... 10 Properties. Personalizando nuestros objetos...................................................................... 11 Trabajando con el cdigo. El modo puzle ................................................................................ 12 Programando con Puzles ..................................................................................................... 13 Probando nuestra aplicacin. Creando un emulador.......................................................... 15 Crditos........................................................................................................................................ 17

http://lagacetadeandroid.blogspot.com.es/

Introduccin
Qu es App Inventor?
App inventor es una innovadora apuesta en cdigo abierto para el desarrollo de aplicaciones web. Con App inventor podrs desarrollar aplicaciones va web como si de resolver un puzle se tratara. Podrs conectar directamente tu telfono Android y probar en vivo las aplicaciones que desarrolles, o puedes crear telfonos virtuales para probar las aplicaciones desde tu ordenador.

Qu necesito para utilizar App Inventor?

App inventor es una herramienta gratuita, para tener acceso a ella nicamente necesitas una cuenta de Gmail y ya podrs empezar a desarrollar tus propias aplicaciones. Para empezar necesitas unos requisitos mnimos en tu equipo:

Requisitos del Sistema

Macintosh (con procesador Intel): Mac OS X 10.5, 10.6 Windows: Windows XP, Windows Vista, Windows 7 GNU / Linux: Ubuntu 8 +, Debian 5 +

Requisitos del Navegador

Mozilla Firefox 3.6 o superior Apple Safari 5.0 o superior Google Chrome 4.0 o superior Microsoft Internet Explorer 7 o superior

Requisitos de Software
Su equipo tiene que ejecutar Java 6 (tambin conocido como Java 1.6). Puede descargar Java desde www.java.com.

http://lagacetadeandroid.blogspot.com.es/

Preparando nuestra cuenta y equipo

Crear una cuenta

Como comente antes para utilizar App Inventor es necesario tener una cuenta de Gmail ya que esta ser vuestra cuenta de App Inventor y todos los proyectos que creis quedaran vinculados con ella. Asique si no disponis de una antes de continuar haceros una, podis conseguirla aqu.

Instalando el Software necesario

Aunque App inventor es una aplicacin que funciona a travs de la web, necesita un software especial basado en java instalado en el ordenador para poder mostrar la interfaz de puzle y crear el telfono virtual con el que probar aplicacin.

Instalacin en Windows XP / Vista / 7

Simplemente descargamos el software, y lo instalamos en nuestro equipo. No es necesario ningn tipo de configuracin ni nada por el estilo. Descarga: AppInventor_Setup_Installer_v_1_1.exe (~92 MB)

Instalacin en MacOs
Al igual que en Windows, simplemente se descarga el software y se instala, no es necesario ningn tipo de configuracin adicional. Descarga: AppInventor_Setup_Installer_v_1_1.dmg (~92 MB) Se recomienda no cambiar la ruta de instalacin

http://lagacetadeandroid.blogspot.com.es/

Instalacin en Linux
Opcin 1. Si tu Linux esta basado en una distribucin Debian, puedes utilizar . este paquete: AppInventor_Setup_Installer_v_1_1_all.deb (~92 MB) Opcin 2. Descargar e instalar este paquete: AppInventor_Setup_Installer_v_1_1.tar.gz (~92 MB) En cualquiera de los dos casos: Se recomienda no cambiar la ruta de uiera instalacin

Empezamos. Un primer vistazo

Vamos a empezar a crear un proyecto simple, con el que os mostrare todas las pantallas principales del App Inventor, y segn vayamos profundizando en el tutorial, tambin ir profundizando en las herramientas que tiene. Para acceder al App Inventor, entraremos siempre desde aqu:

http://beta.appinventor.mit.edu/

Creando un proyecto
amos La primera pantalla que vamos a ver es la siguiente:

Las opciones que aparecen aqu, son claras y creo yo que no requieren ninguna explicacin. Asique presionamos el botn New y le asignamos un nombre, en nuestro caso: GacetAndroid GacetAndroid. Los nombres solo pueden contener Letras y N Nmeros.

http://lagacetadeandroid.blogspot.com.es/

Al cargar la pagina, les saldr el banco de trabajo grfico, tendra que salir algo como esto:

Creando la interfaz grafica

Esta pantalla se divide en 4 regiones principales: Palette, Viewer, Components y Properties En el bloque de Palette se encontraran todos los objetos que podremos utilizar como por ejemplo Cuadros de Texto, Etiquetas, Botones, Imgenes etc. En Viewer, tendremos como una vista previa de nuestra aplicacin. Podremos arrastrar los , objetos aqu, y colocarlos como deseemo deseemos. En Components, tendremos una lista de los componentes que vamos usando, para trabajar , con ellos hacemos clic encima y se marcaran. Finalmente en la columna Properties nos saldrn las propiedades del objeto que tengamos seleccionado en Components. Ahora que ya tenemos claro para que sirve cada regin, vamos a profundizar un poco ms en cada una.

http://lagacetadeandroid.blogspot.com.es/

Palette. Los objetos de App Inventor

Como he dicho anterior mente, en la Palette tendremos todos los objetos que podremos utilizar con el App Inventor, son muchos objetos de los cuales algunos son bastante complejos, muchos y como la idea de este tutorial es la introduccin a App Inventor no voy a detenerme para explicarlos uno a uno, solo voy a nombrar los ms tpicos. Todo objeto tendr a su derecha un botn de (?) en el que te mostrara una descripcin (en ingls) de su funcionamiento.

Vamos a desarrollar una pequea aplicacin, muy simple, que lo que har ser mostrar un mensaje con el texto que nosotros escribamos. Para esto vamos a utilizar estos 3 objetos:

Este objeto genera un botn, con el al presionarlo mostraremos el texto introducido en el Textbox. UTILIZAREMOS 2 BOTONES. .

El TextBox, es un cuadro de texto que sirve para que el usuario introduzca cualquier tipo de texto.

, Las Label, son etiquetas, son objetos pasivos que lo nico que hacen es mostrar el texto que se les introduce.

http://lagacetadeandroid.blogspot.com.es/

Una vez tengamos localizados estos 3 objetos (estn en Palette > Basic). Los arrastramos a la Regin de Viewer. Recordad que vamos a utilizar dos botones, asique arrastrar 2. Os debera quedar algo as:

http://lagacetadeandroid.blogspot.com.es/

Viewer. Una vista rpida a tu aplicacin

De esta regin hay poco que contar, solo tiene una opcin de configuracin que es la de Display Invisible Components in Viewer en la parte superior. Esta opcin permite, que aunque un objeto tenga propiedad invisible puedas verlo aqu. En Android se trabaja por Pantallas (screens) puedes crear todas las pantallas que quieras y nombrarlas como quieras, pero la primera siempre por defecto se llamara Screen1. Para c crear una Pantalla nueva pinchamos sobre Add Screen, le damos un nombre y ya estar creada. Al , crearla aparecer en la parte superior del Viewer un botn con el nombre que le has dado, justo al lado del botn Screen1, si pinchamos sobre el botn nuevo podremos conmutar entre podremos las distintas pantallas. Si os habis fijado, al arrastrar los objetos de la Palette al Viewer, nicamente podais colocarlos uno debajo del otro. Esto es porque las pantallas tienen sus propios objetos en la Palette para organizarlo. Estos objetos son los siguientes: tos

En mi opinin esto es un error, ya que tienes lidiar mucho con estos objetos para conseguir cuadrar los objetos como te gusta. Yo creo que tarde o temprano solucionaran esto ya que como comentaba al principio del tutorial, App Inventor esta desarrollado en cdigo abierto, tutorial, asique tarde o temprano alguien aportara la solucin. Para que veis como funciona, vamos a agregar el objeto HorizontalArrangement, justo despus del TextBox y dentro de este meteremos los botones uno al lado del otro, quedando de la siguiente forma:

http://lagacetadeandroid.blogspot.com.es/

Components. Todo en un vistazo. .

Este apartado tampoco tiene mucho que explicar. Nos aparecer en lista los componentes que estamos utilizando. En la parte inferior podemos ver dos botones Rename y Delete Estas Delete. opciones son para renombrar o borrar un objeto. Una recomendacin, y que debis coger como costumbre si no queris complicaros la vida ms tarde, es renombrar los objetos que usis con un nombre que los identifique rpidamente. Os muestro como los he renombrado yo en nuestro ejemplo:

http://lagacetadeandroid.blogspot.com.es/

En la parte inferior podemos ver un pequeo apartado que pone Media, con un botn que , pone ADD. Aqu iremos subiendo las imgenes o sonidos que vayamos a utilizar ahora o mas tarde, estos archivos quedaran cargados en la aplicacin y se podr acceder a ellos desde en cualquier parte del programa.

Properties. Personalizando nuestros objetos

Cuando pinchamos sobre un objeto en Components, se cargaran en esta regin las propiedades de dicho objeto. Cada objeto tiene sus propias propiedades y suelen ser muy claras. Vamos a configurar las propiedades de los objetos que hemos cargado:

Label: Marcaremos la opcin FontBolt para que salga en negrita e introduciremos en Text el siguiente texto: Introduce el texto a mostrar Las Introduce mostrar. dems opciones las dejamos como estn. Textbox: El apartado hint, es un texto en color gris semitransparente que sirve para indicar al usuario que introducir en ese cuadro, pero sin que se tenga en cuenta, nosotros nicamente escribiremos ah Mensaje. Si quisiramos que Mensaje. hubiera un texto que si tenga en cuenta por defecto, lo colocaramos en la casilla de Text. Botones: nicamente cambiaremos el texto de los botones, en uno pondremos Mostrar y en el otro Borrar.

http://lagacetadeandroid.blogspot.com.es/

Trabajando con el cdigo. El modo pu puzle

Cuando ya tengamos todo lo anterior hecho, nos dirigimos a la parte superior derecha, en la barra verde habr un botn que pone Open de Blocks Editor, pinchamos y empezara a cargar. , Cuando termine de cargar se descargara un archivo java, si tu navegador web es Chrome navegador debers guardarlo y ejecutarlo, si es cualquier otro navegador puedes ejecutarlo directamente. Una vez que cargue nos saldr una pantalla con una columna con varias opciones en colores, y el resto en blanco con una papelera abajo a la derecha. Os voy a explicar un poco la columna derecha. de colores:

Cada color contiene muchas opciones, y os voy a explicar un poco para que sirve cada una en rasgos generales, a partir de aqu ya si es necesario un mnimo de conocimientos: Definition: Aqu se agruparan la posibilidad de crear procedimientos, funciones o agruparan variables. Cuando definas algo, para poder llamarlo o utilizarlo debers dirigirte a My Blocks > My Definitions Text: Aqu estarn todas las funciones relacionadas con el texto, crear texto, busca buscar texto, comprar textos etc List: Opciones relacionadas con creacin de listas Math: Sern los tpicos operadores lgicos de suma, resta, multiplicacinetc Logic: Secuencias lgicas como =, and, or Control: Todas las funciones como If, do while Color: para asignar colores. ara

http://lagacetadeandroid.blogspot.com.es/

De las dos pestaas que nos quedan (My blocks y Advanced) a este nivel del tutorial solo me interesa ensearos la pestaa de My blocks, ya que la otra no la vamos a utilizar muy a menudo. En la parte de My blocks , se encuentran todos los objetos creados (botones, textbox, label..etc) y los objetos definidos (funciones, variablesetc) variablesetc). Ahora que ya sabemos para qu sirve cada cosa vamos a empezar a programar nuestra aplicacin.

Programando con Puzles

Lo primero que quiero que sepis es que cada color siempre est relacionado con un tipo de objetos, as viendo el color ya sabis de qu tipo de objeto se trata y no tengo que ir indicando no est. Las primeras piezas que sacaremos sern las siquientes:

La pieza amarilla ifelse sirve para hacer una comprobacin ( test ), si esa comprobacin es para cierto y se cumple ejecutara lo que se encuentre en Then do e ignorara lo que se encuentre en Then-do else-do. En cambio si la condicin no es cierta lo har al revs. do. La pieza azul TextoMensaje.Text har referencia al texto que haya introducido el usuario en el Textbox. Recordar que esto lo sacamos desde My Blocks > <nombre_que_le_disteis_al_texbox>. Con la pieza marrn, is text empty? Comprobamos si el texto de la pieza azul, esta vacio. La pieza naranja, not, crea una negacin. , Si las juntamos todas como en la imagen obtendremos que si el Texto que contiene el Textbox est vaco, ejecute lo que se encuentra en else do, pero por lo contrario, si el usuario introdujo else-do, un texto ejecute lo que se encuentra en Then-do.

http://lagacetadeandroid.blogspot.com.es/

Ahora solo necesitamos que muestre un mensaje en caso de que no haya introducido texto, o que muestre el texto introducido si de verdad existe. Para conseguir esto volvemos a la parte grafica del App inventor. tendremos En la parte de Other Stuff tendrem el siguiente objeto:

Lo arrastramos al Viewer, no os preocupis de donde colocarlo porque este tipo de objetos solo pueden ser invisible. Al aadirlo veris que aparecer en la parte de abajo. Como es buena costumbre lo renombramos y le ponemos de nombre Mensajero. Ahora ya si volvemos a la parte de Puzle del App Inventor. Nos dirigimos a My Blocks > Mensajero y sacamos dos piezas de este tipo:

El resultado final debera ser algo parecido a este:

Pero con esto no es suficiente, ahora tenemos que conseguir que esto ocurra cuando tenemos pulsemos el botn de Mostrar. Para conseguir esto nos dirigimos a My blocks > BotonMostrar y sacamos la siguiente pieza:

http://lagacetadeandroid.blogspot.com.es/

Simplemente tenemos que meter en su interior todo lo que hemos hecho antes y ya estar casi lista la aplicacin. Hacemos lo mismo con el botn de borrar y el resultado final ser este:

Probando nuestra aplicacin. Creando un emulador.

Ahora para probar nuestra aplicacin, nos dirigimos a la parte superior y pinchamos en New Emulator, y nos saldrn dos ventanas como estas: ldrn

http://lagacetadeandroid.blogspot.com.es/

Dejamos que cargue hasta que estemos viendo el escritorio de un telfono android. Justo a la derecha de New Emulator hay otro botn que pone Connect to device pinchamos device, ah y pinchamos sobre el nico emulador que tendremos. Si conectamos nuestro mvil y al tendremos. equipo, lo reconocera y aparecera aqu, pudiendo probar la aplicacin en nuestro propio mvil como comentaba al principio del tutorial. Dejamos que cargue el dispositivo y la aplicacin y en pocos minutos estar nuestra aplicacin en el emulador para poder probarla. Para realizar cambios, no es necesario cerrar el emulador, los cambios se actualizaran al momento en la aplicacin cargada en el emulador. Y para terminar vemos el resultado de nuestra aplicacin:

http://lagacetadeandroid.blogspot.com.es/

Crditos
Bueno aqu termina este tutorial de introduccin al App Inventor. Espero que os haya servido de ayuda y empecis en este mundillo del desarrollo de aplicaciones para Android. En la 2 parte de este tutorial, que estar orientado a gente con algo de conocimientos en programacin, os mostrare cosas ms complejas como el uso de Bases de datos o animaciones. Y nada ms que decir, no olviden visitarnos en nuestro blog !!!

http://lagacetadeandroid.blogspot.com.es/