Tutorial App Inventor_rev1

utorial

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

Índice Introducción .................................................................................................................................. 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 rápida a tu aplicación ............................................................................... 9 Components. Todo en un vistazo. ....................................................................................... 10 Properties. Personalizando nuestros objetos...................................................................... 11 Trabajando con el código. El modo puzle................................................................................ 12 Programando con Puzles ..................................................................................................... 13 Probando nuestra aplicación. Creando un emulador.......................................................... 15 Créditos........................................................................................................................................ 17


Introducción ¿Qué es App Inventor? App inventor es una innovadora apuesta en código abierto para el desarrollo de aplicaciones web. Con App inventor podrás desarrollar aplicaciones vía web como si de resolver un puzle se tratara. Podrás conectar directamente tu teléfono Android y probar en vivo las aplicaciones que desarrolles, o puedes crear teléfonos 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 podrás empezar a desarrollar tus propias aplicaciones. Para empezar necesitas unos requisitos mínimos 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 (también conocido como Java 1.6). Puede descargar Java desde www.java.com.


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 creéis quedaran vinculados con ella. Asique si no disponéis de una antes de continuar haceros una, podéis conseguirla aquí.

Instalando el Software necesario Aunque App inventor es una aplicación que funciona a través de la web, necesita un software especial basado en java instalado en el ordenador para poder mostrar la interfaz de puzle y crear el teléfono virtual con el que probar aplicación.

•

Instalación en Windows XP / Vista / 7 Simplemente descargamos el software, y lo instalamos en nuestro equipo. No es necesario ningún tipo de configuración ni nada por el estilo. Descarga: AppInventor_Setup_Installer_v_1_1.exe (~92 MB)

•

Instalación en MacOs Al igual que en Windows, simplemente se descarga el software y se instala, no es necesario ningún tipo de configuración adicional. Descarga: AppInventor_Setup_Installer_v_1_1.dmg (~92 MB) Se recomienda no cambiar la ruta de instalación


•

Instalación en Linux Opción 1. Si tu Linux esta basado en una distribución Debian, puedes utilizar

este paquete: AppInventor_Setup_Installer_v_1_1_all.deb (~ 2 MB) Opción 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

uta de

instalación

Empezamos. Un primer vistazo Vamos a empezar a crear un royecto simple, con el que os mostrare todas la s pantallas principales del App Inventor, según vayamos profundizando en el tutorial, t mbién iré profundizando en las herrami entas que tiene. Para acceder al App Inventor, entraremos siempre desde aquí:

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

Creando un proyecto La primera pantalla que vam s a ver es la siguiente:

Las opciones que aparecen a uí, son claras y creo yo que no requieren ningun a explicación. Asique presionamos el botón New y le asignamos un nombre, en nuestro cas : GacetAndroid. Los nombres solo pueden co tener Letras y Números.


Al cargar la pagina, les saldrá el banco de trabajo gráfico, tendría que salir alg como esto:

Creando la interfaz grafica Esta pantalla se divide en 4 re giones principales: Palette, Viewer, Components y Properties En el bloque de Palette se en ontraran todos los objetos que podremos utiliz r como por ejemplo Cuadros de Texto, Et iquetas, Botones, Imágenes… etc. En Viewer, tendremos como una “vista previa” de nuestra aplicación. Podre os arrastrar los objetos aquí, y colocarlos co o deseemos. En Components, tendremos na lista de los componentes que vamos usando, para trabajar con ellos hacemos clic encim y se marcaran. Finalmente en la columna Pr perties nos saldrán las propiedades del objeto q ue tengamos seleccionado en Components . Ahora que ya tenemos claro ara que sirve cada región, vamos a profundizar un poco más en cada una.


Palette. Los objetos e App Inventor Como he dicho anterior ment e, en la Palette tendremos todos los objetos que podremos utilizar con el App Inventor, s n muchos objetos de los cuales algunos son ba tante complejos, y como la idea de este tutoria l es la introducción a App Inventor no voy a det nerme para explicarlos uno a uno, solo vo y a nombrar los más típicos. Todo objeto tendrá a su dere ha un botón de (?) en el que te mostrara una descripción (en inglés) de su funcionamiento.

Vamos a desarrollar una peq eña aplicación, muy simple, que lo que hará ser mostrar un mensaje con el texto que nos otros escribamos. Para esto vamos a utilizar est s 3 objetos:

Este objeto genera un botón, con el al presionarlo mostraremos el texto intr ducido en el Textbox. UTILIZAREMOS 2 BOTONES.

El TextBox, es un cuadro de t xto que sirve para que el usuario introduzca cu lquier tipo de texto.

Las Label, son etiquetas, son bjetos pasivos que lo único que hacen es mostr ar el texto que se les introduce.


Una vez tengamos localizado estos 3 objetos (están en Palette > Basic). Los a rrastramos a la Región de Viewer. Recordad ue vamos a utilizar dos botones, asique arrastra r 2. Os debería quedar algo así:


Viewer. Una vista rá ida a tu aplicación De esta región hay poco que ontar, solo tiene una opción de configuración q ue es la de Display Invisible Components in Viewer en la parte superior. Esta opción perm ite, que aunque un objeto tenga propiedad in isible puedas verlo aquí. En Android se trabaja por Pan tallas (screens) puedes crear todas las pantallas que quieras y nombrarlas como quieras, pe ro la primera siempre por defecto se llamara Scr een1. Para crear una Pantalla nueva pinchamos sobre Add Screen, le damos un nombre y ya e tará creada. Al crearla aparecerá en la parte superior del Viewer un botón con el nombre qu le has dado, justo al lado del botón Screen1, si pinchamos sobre el botón nuevo podremos conmutar entre las distintas pantallas. Si os habéis fijado, al arrastra r los objetos de la Palette al Viewer, únicamente podíais colocarlos uno debajo del otr . Esto es porque las pantallas tienen sus propio objetos en la Palette para organizarlo. Estos objetos son los siguientes:

En mi opinión esto es un erro r, ya que tienes lidiar mucho con estos objetos ara conseguir cuadrar los objetos como te g usta. Yo creo que tarde o temprano solucionara n esto ya que como comentaba al principio del tutorial, App Inventor esta desarrollado en c ódigo abierto, asique tarde o temprano algu ien aportara la solución. Para que veáis como funcion , vamos a agregar el objeto HorizontalArrange ent, justo después del TextBox y dentro de este meteremos los botones uno al lado del otro, quedando de la siguiente forma:


Components. Todo e n un vistazo. Este apartado tampoco tiene mucho que explicar. Nos aparecerá en lista los c omponentes que estamos utilizando. En la parte inferior podemos ver dos botones Rename y elete. Estas opciones son para renombrar o borrar un objeto. Una recomendación, y que ebéis coger como costumbre si no queréi complicaros la vida más tarde, es renombrar lo s objetos que uséis con un nombre que los i dentifique rápidamente. Os muestro como los h e renombrado yo en nuestro ejemplo:


En la parte inferior podemos er un pequeño apartado que pone Media, con n botón que pone ADD. Aquí iremos subie ndo las imágenes o sonidos que vayamos a utiliz ar ahora o mas tarde, estos archivos quedara n cargados en la aplicación y se podrá acceder a ellos desde cualquier parte del programa .

Properties. Personalizando nuestros objetos Cuando pinchamos sobre un bjeto en Components, se cargaran en esta regi n las propiedades de dicho objeto. Cada objeto tiene sus propias propiedades y su len ser muy claras. Vamos a configurar las propiedades de los objetos que hemos cargado :

•

•

•

Label: Marca emos la opción FontBolt para que salga en negri ta e

introducirem s en Text el siguiente texto: “Introduce el texto a mostrar”. Las demás opcio es las dejamos como están. Textbox: El a artado hint, es un texto en color gris semitrans arente que sirve para indicar al usuario que introducir en ese cuadro, pero sin que se tenga en cuenta, nosotros únicamente escribiremos ahí “Mensaje”. Si uisiéramos que hubiera un texto que si tenga en cuenta por defecto, lo coloc ríamos en la casilla de Tex . Botones: Úni amente cambiaremos el texto de los botones, e n uno pondremos “ ostrar” y en el otro “Borrar”.


Trabajando con el código. El modo puzle Cuando ya tengamos todo lo anterior hecho, nos dirigimos a la parte superior derecha, en la barra verde habrá un botón q ue pone Open de Blocks Editor , pinchamos y e pezara a cargar. Cuando termine de cargar se descargara un archivo java, si tu navegador web es Chrome deberás guardarlo y ejecutarl o, si es cualquier otro navegador puedes ejecuta rlo directamente. Una vez que cargue nos saldr una pantalla con una columna con varias opcio nes en colores, y el resto en blanco con una pa pelera abajo a la derecha. Os voy a explicar un poco la columna de colores:

Cada color contiene muchas pciones, y os voy a explicar un poco para que si ve cada una en rasgos generales, a partir de quí ya si es necesario un mínimo de conocimien tos: •

•

• • • • •

Definition: Aquí se agruparan la posibilidad de crear procedimientos, unciones o variables. Cuando de finas algo, para poder llamarlo o utilizarlo deber ás dirigirte a My Blocks > My Definitions Text: Aquí estarán to as las funciones relacionadas con el texto, crea texto, buscar texto, comprar texto … etc List: Opciones relacionadas con creación de listas Math: Serán los típic s operadores lógicos de suma, resta, multiplicac ión…etc Logic: Secuencias lógicas como =, and, or… Control: Todas las fu ciones como If, do while Color: para asignar colores.


De las dos pestañas que nos q uedan (My blocks y Advanced) a este nivel del t utorial solo me interesa enseñaros la pestañ de My blocks, ya que la otra no la vamos a utili zar muy a menudo. En la parte de My blocks , se ncuentran todos los objetos creados (botones, extbox, label..etc) y los objetos definidos (funciones, variables…etc). Ahora que ya sabemos para q ué sirve cada cosa vamos a empezar a programa r nuestra aplicación.

Programando con P zles Lo primero que quiero que se páis es que cada color siempre está relacionado con un tipo de objetos, así viendo el color ya sabéis de qué tipo de objeto se trata y no tengo que ir indicando no está. Las primeras piezas que sacar emos serán las siquientes:

La pieza amarilla ifelse sirve ara hacer una comprobación ( test ), si esa com robación es cierto y se cumple ejecutara l o que se encuentre en Then-do e ignorara lo qu se encuentre en else-do. En cambio si la condición no es cierta lo hará al revés. La pieza azul TextoMensaje.T xt hará referencia al texto que haya introducid el usuario en el Textbox. Recordar que esto l sacamos desde My Blocks > . Con la pieza marrón, is text e pty? Comprobamos si el texto de la pieza azul, esta vacio. La pieza naranja, not, crea un a negación. Si las juntamos todas como e la imagen obtendremos que si el Texto que co tiene el Textbox está vacío, ejecute lo que se ncuentra en else-do, pero por lo contrario, si el usuario introdujo un texto ejecute lo que se en uentra en Then-do.


Ahora solo necesitamos que uestre un mensaje en caso de que no haya intr oducido texto, o que muestre el texto introdu ido si de verdad existe. Para conseguir esto volv emos a la parte grafica del App inventor. En la parte de Other Stuff tendremos el siguiente objeto:

Lo arrastramos al Viewer, no s preocupéis de donde colocarlo porque este ti po de objetos solo pueden ser invisible. Al a ñadirlo veréis que aparecerá en la parte de abaj . Como es buena costumbre lo renombramos y le ponemos de nombre “Mensajero”. Ahora ya si volvemos a la par e de Puzle del App Inventor. Nos dirigimos a M Blocks > Mensajero y sacamos dos pie zas de este tipo:

El resultado final debería ser lgo parecido a este:

Pero con esto no es suficient , ahora tenemos que conseguir que esto ocurra cuando pulsemos el botón de Mostra r. Para conseguir esto nos dirigimos a My blocks > BotonMostrar y sacamos la siguiente pieza:


Simplemente tenemos que m eter en su interior todo lo que hemos hecho ant es y ya estará casi lista la aplicación. Hacem os lo mismo con el botón de borrar y el resultad final será este:

Probando nuestra a licación. Creando un emulador. Ahora para probar nuestra ap licación, nos dirigimos a la parte superior y pinc amos en New Emulator, y nos saldrán dos v entanas como estas:


Dejamos que cargue hasta qu e estemos viendo el escritorio de un teléfono an droid. Justo a la derecha de New E ulator hay otro botón que pone Connect to device, pinchamos ahí y pinchamos sobre el únic o emulador que tendremos. Si conectamos nues tro móvil y al equipo, lo reconocería y apar cería aquí, pudiendo probar la aplicación en nu stro propio móvil como comentaba al pri cipio del tutorial. Dejamos que cargue el dispos itivo y la aplicación y en pocos minutos estará n uestra aplicación en el emulador para poder pr obarla. Para realizar cambios, no es n ecesario cerrar el emulador, los cambios se actu alizaran al momento en la aplicación cargada en el emulador. Y para terminar vemos el res ltado de nuestra aplicación:


Créditos Bueno aquí termina este tutorial de introducción al App Inventor. Espero que os haya servido de ayuda y empecéis 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 programación, os mostrare cosas más complejas como el uso de Bases de datos o animaciones. Y nada más que decir, no olviden visitarnos en nuestro blog !!!


Tutorial App Inventor_rev1

Recommend Documents