Professional Documents
Culture Documents
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.
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/
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 uiera de los dos casos: Se recomienda no cambiar la ruta de instalacin
http://beta.appinventor.mit.edu/
Creando un proyecto
amos a ver es la siguiente: La primera pantalla que vamos
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 Nmeros. N
http://lagacetadeandroid.blogspot.com.es/
Al cargar la pagina, les saldr el banco de trabajo grfico, tendra que salir algo como esto:
http://lagacetadeandroid.blogspot.com.es/
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.
, son objetos pasivos que lo nico que hacen es mostrar el texto que se Las Label, son etiquetas, 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/
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, tutorial, App Inventor esta desarrollado en cdigo abierto, 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/
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 en la aplicacin y se podr acceder a ellos desde cualquier parte del programa.
Label: Marcaremos la opcin FontBolt para que salga en negrita e introduciremos en Text el siguiente texto: Introduce Introduce el texto a mostrar. mostrar Las 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. Mensaje. Si quisiramos que 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/
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 agruparan la posibilidad de crear procedimientos, funciones o 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, buscar busca 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 ara asignar colores.
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.
La pieza amarilla ifelse sirve para para hacer una comprobacin ( test ), si esa comprobacin es cierto y se cumple ejecutara lo que se encuentre en Then-do Then do e ignorara lo que se encuentre en else-do. do. En cambio si la condicin no es cierta lo har al revs. 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, else do, pero por lo contrario, si el usuario introdujo 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. tendrem el siguiente objeto: En la parte de Other Stuff tendremos
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:
Pero con esto no es suficiente, ahora tenemos tenemos que conseguir que esto ocurra cuando 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:
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, device pinchamos ah y pinchamos sobre el nico emulador que tendremos. tendremos. Si conectamos nuestro mvil y al 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/