tutorial app inventor rev1

Tutorial

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

Tutorial



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


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.


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

Instalacin en Linux

Opcin 1. Si tu Linux esta basado en una distribucin Debian, puedes utilizar este paquete:

Opcin 2. Descargar e instalar este paquete: AppInventor_Setup_Installer_v_1_1.tar.gz (~92 MB)

En cualquiera de los dos casos: 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 profundizando en las herramientas que tiene.

Para acceder al App Inventor, entraremos siempre desde aqu:

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

Creando un proyecto

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 Los nombres solo pueden contener Letras y N


Instalacin en Linux

. Si tu Linux esta basado en una distribucin Debian, puedes utilizar este paquete: AppInventor_Setup_Installer_v_1_1_all.deb (~92 MB)

Descargar e instalar este paquete: AppInventor_Setup_Installer_v_1_1.tar.gz (~92 MB)

uiera de los dos casos: Se recomienda no cambiar la ruta de

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 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: GacetAndroidLos nombres solo pueden contener Letras y Nmeros.


. Si tu Linux esta basado en una distribucin Debian, puedes utilizar AppInventor_Setup_Installer_v_1_1_all.deb (~92 MB)

Se recomienda no cambiar la ruta de

Vamos a empezar a crear un proyecto simple, con el que os mostrare todas las pantallas tutorial, tambin ir

Las opciones que aparecen aqu, son claras y creo yo que no requieren ninguna explicacin. New y le asignamos un nombre, en nuestro caso: GacetAndroid.

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:

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

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 Propertiesseleccionado en Components.

Ahora que ya tenemos claro para que sirve cada regin, vamos a profundizar un poco ms en cada una.



Creando la interfaz grafica

Esta pantalla se divide en 4 regiones principales: Palette, Viewer, Components y Properties

se encontraran todos los objetos que podremos utilizar como por ejemplo Cuadros de Texto, Etiquetas, Botones, Imgenes etc.

, tendremos como una vista previa de nuestra aplicacin. Podremos arrastrar los objetos aqu, y colocarlos como deseemos.

, tendremos una lista de los componentes que vamos usando, para trabajar con ellos hacemos clic encima y se marcaran.

Properties nos saldrn las propiedades del objeto que tengamos seleccionado en Components.

que ya tenemos claro para que sirve cada regin, vamos a profundizar un poco ms en



Palette, Viewer, Components y Properties

se encontraran todos los objetos que podremos utilizar como por

, tendremos como una vista previa de nuestra aplicacin. Podremos arrastrar los

, tendremos una lista de los componentes que vamos usando, para trabajar

nos saldrn las propiedades del objeto que tengamos

que ya tenemos claro para que sirve cada regin, vamos a profundizar un poco ms en

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 muchy 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 (?) 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.


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, 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.


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

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

, son objetos pasivos que lo nico que hacen es mostrar el texto que se


Como he dicho anterior mente, en la Palette tendremos todos los objetos que podremos os objetos de los cuales algunos son bastante complejos,

y como la idea de este tutorial es la introduccin a App Inventor no voy a detenerme para

en el que te mostrara una descripcin (en


Este objeto genera un botn, con el al presionarlo mostraremos el texto introducido en el

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

, son objetos pasivos que lo nico que hacen es mostrar el texto que se

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 quedar algo as:


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


Una vez tengamos localizados estos 3 objetos (estn en Palette > Basic). Los arrastramos a la arrastrar 2. Os debera

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 Viewerun 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 cuna Pantalla nueva pinchamos sobre 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 podrelas 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:

En mi opinin esto es un error, ya que tienes lidiar mucho concuadrar los objetos como te gusta. Yo creo que tarde o temprano solucionaran esto ya que como comentaba al principio del tutorialasique 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 alde la siguiente forma:


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 cuna 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

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

tos objetos son los siguientes:

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, 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 esta regin hay poco que contar, solo tiene una opcin de configuracin que es la de permite, que aunque

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 crear

, 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,

mos conmutar entre

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

estos objetos para conseguir cuadrar los objetos como te gusta. Yo creo que tarde o temprano solucionaran esto ya que

, App Inventor esta desarrollado en cdigo abierto,

Para que veis como funciona, vamos a agregar el objeto HorizontalArrangement, justo lado del otro, quedando

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 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 usis con un nombre que los identifique en nuestro ejemplo:


. 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

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


Este apartado tampoco tiene mucho que explicar. Nos aparecer en lista los componentes que Delete. Estas

para renombrar o borrar un objeto. Una recomendacin, y que debis coger renombrar los objetos que

he renombrado yo

En la parte inferior podemos ver un pequeo apartado que pone pone ADD. Aqu iremos subiendo las imgenes o sonidos que vayamos a utilizar ahora o mas tarde, estos archivos quedaran cargados ecualquier 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 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: 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 Mensajehubiera 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.


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 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:

Marcaremos la opcin FontBolt para que salga en negrita e introduciremos en Text el siguiente texto: Introduce el texto a mostrardems opciones las dejamos como estn.

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 hubiera un texto que si tenga en cuenta por defecto, lo colocaramos en la casilla de Text.

nicamente cambiaremos el texto de los botones, en uno pondremos Mostrar y en el otro Borrar.


, con un botn que pone ADD. Aqu iremos subiendo las imgenes o sonidos que vayamos a utilizar ahora o mas

n la aplicacin y se podr acceder a ellos desde

Cuando pinchamos sobre un objeto en Components, se cargaran en esta regin las y suelen ser muy

claras. Vamos a configurar las propiedades de los objetos que hemos cargado:

Marcaremos la opcin FontBolt para que salga en negrita e Introduce el texto a mostrar. Las

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

. Si quisiramos que hubiera un texto que si tenga en cuenta por defecto, lo colocaramos en la

nicamente cambiaremos el texto de los botones, en uno

Trabajando con el cdigo. El modo pu

Cuando ya tengamos todo lo anterior hecho, nos dirigimos a la parte superior derecha, en la barra verde habr un botn que pone Cuando termine de cargar se descargara un archivo java, si tu navegdebers 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 dede 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 agrvariables. 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, buscatexto, 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.


Trabajando con el cdigo. El modo 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 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


Definition: Aqu se 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, buscatexto, 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 ara asignar colores.


Cuando ya tengamos todo lo anterior hecho, nos dirigimos a la parte superior derecha, en la , pinchamos y empezara a cargar.

ador web es Chrome 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 recha. Os voy a explicar un poco la columna


uparan la posibilidad de crear procedimientos, funciones o variables. Cuando definas algo, para poder llamarlo o utilizarlo debers dirigirte a My

Text: Aqu estarn todas las funciones relacionadas con el texto, crear texto, buscar

Math: Sern los tpicos operadores lgicos de suma, resta, multiplicacinetc

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 todoslabel..etc) y los objetos definidos (funciones, 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 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 pacierto y se cumple ejecutara lo que se encuentre en Thenelse-do. En cambio si la condicin no es cierta lo har al revs.

La pieza azul TextoMensaje.Text harTextbox. Recordar que esto lo sacamos desde My Blocks > .

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 elseun texto ejecute lo que se encuentra en


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

En la parte de My blocks , se encuentran todos los objetos creados (botones, textbox, label..etc) y los objetos definidos (funciones, variablesetc).

Ahora que ya sabemos para qu sirve cada cosa vamos a empezar a programar nuestra

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

Las primeras piezas que sacaremos sern las siquientes:

sirve para hacer una comprobacin ( test ), si esa comprobacin es cierto y se cumple ejecutara lo que se encuentre en Then-do e ignorara lo que se encuentre en

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 > .


, 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 un texto ejecute lo que se encuentra en Then-do.


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

los objetos creados (botones, textbox,

Ahora que ya sabemos para qu sirve cada cosa vamos a empezar a programar nuestra

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

ra hacer una comprobacin ( test ), si esa comprobacin es do e ignorara lo que se encuentre en

referencia al texto que haya introducido el usuario en el


Si las juntamos todas como en la imagen obtendremos que si el Texto que contiene el Textbox do, pero por lo contrario, si el usuario introdujo

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.

En la parte de Other Stuff tendrem

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

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 tenemopulsemos el botn de Mostrar. Para conseguir esto nos dirigimos a My blocks > BotonMostrar y sacamos la siguiente pieza:


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

tendremos 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 pulsemos el botn de Mostrar. Para conseguir esto nos dirigimos a My blocks > BotonMostrar


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

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

Ahora ya si volvemos a la parte de Puzle del App Inventor. Nos dirigimos a My Blocks >

s que conseguir que esto ocurra cuando pulsemos el botn de Mostrar. Para conseguir esto nos dirigimos a My blocks > BotonMostrar

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 Emulator, y nos saldrn dos ventanas como estas:


Simplemente tenemos que meter en su interior todo lo que hemos hecho antes y ya estar 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 ldrn dos ventanas como estas:


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

Ahora para probar nuestra aplicacin, nos dirigimos a la parte superior y pinchamos en New

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 ah y pinchamos sobre el nico emulador que tendremosequipo, 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 nuestraen 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:



Justo a la derecha de New Emulator hay otro botn que pone Connect to deviceah y pinchamos sobre el nico emulador que 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 nuestraen 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:



Connect to device, pinchamos . Si conectamos nuestro mvil y al

equipo, lo reconocera y aparecera aqu, pudiendo probar la aplicacin en nuestro propio

Dejamos que cargue el dispositivo y la aplicacin y en pocos minutos estar nuestra aplicacin

Para realizar cambios, no es necesario cerrar el emulador, los cambios se actualizaran al


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 !!!

IntroduccinQu es App Inventor?Qu necesito para utilizar App Inventor?Requisitos del SistemaRequisitos del NavegadorRequisitos de Software

Preparando nuestra cuenta y equipoCrear una cuentaInstalando el Software necesario

Empezamos. Un primer vistazoCreando un proyectoCreando la interfaz graficaPalette. Los objetos de App InventorViewer. Una vista rpida a tu aplicacinComponents. Todo en un vistazo.Properties. Personalizando nuestros objetos

Trabajando con el cdigo. El modo puzleProgramando con Puzles/Probando nuestra aplicacin. Creando un emulador.

Crditos

tutorial app inventor rev1

Documents

app inventor podrs

objetos de app inventor

introduccin qu

requisitos de software

desarrollo de aplicaciones

estutorial http

cdigo abierto

ndice introduccin