tutorial app inventor_rev1

Tutorial

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

Tutorial



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

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

http://mail.google.com/

http://dl.google.com/dl/appinventor/installers/windows/appinventor_setup_installer_v_1_1.exe

http://dl.google.com/appinventor/installers/mac/AppInventor_Setup_v_1.1.dmg

• Instalación en Linux

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

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

En cualquiera de los dos casos: instalación

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 según 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 explicación. Asique presionamos el botón Los nombres solo pueden contener Letras y Nú


Instalación en Linux

. Si tu Linux esta basado en una distribución 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 según vayamos profundizando en el tutorial, también iré profundizando en las herramientas que tiene.

Para acceder al App Inventor, entraremos siempre desde aquí:


Creando un proyecto

amos a ver es la siguiente:

Las opciones que aparecen aquí, son claras y creo yo que no requieren ninguna explicación. Asique presionamos el botón New y le asignamos un nombre, en nuestro caso: GacetAndroidLos nombres solo pueden contener Letras y Números.


. Si tu Linux esta basado en una distribución 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, también iré

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

http://dl.google.com/dl/appinventor/installers/linux/appinventor-setup_1.1_all.deb

http://dl.google.com/dl/appinventor/installers/linux/appinventor-setup_1.1.tar.gz


Al cargar la pagina, les saldrá el banco de trabajo gráfico, tendría 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, Imágenes… etc.

En Viewer, tendremos como una “vista previa” de nuestra aplicación. 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 región, vamos a profundizar un poco más 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, Imágenes… etc.

, tendremos como una “vista previa” de nuestra aplicación. 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 saldrán las propiedades del objeto que tengamos seleccionado en Components.

que ya tenemos claro para que sirve cada región, vamos a profundizar un poco más en



Palette, Viewer, Components y Properties

se encontraran todos los objetos que podremos utilizar como por

, tendremos como una “vista previa” de nuestra aplicación. Podremos arrastrar los

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

nos saldrán las propiedades del objeto que tengamos

que ya tenemos claro para que sirve cada región, vamos a profundizar un poco más 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 introducción a App Inventor no voy a detenerme para explicarlos uno a uno, solo voy a nombrar los más típicos.

Todo objeto tendrá a su derecha un botón de (?) inglés) de su funcionamiento.

Vamos a desarrollar una pequeña aplicación, 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 botón, 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 introducción a App Inventor no voy a detenerme para explicarlos uno a uno, solo voy a nombrar los más típicos.

Todo objeto tendrá a su derecha un botón de (?) en el que te mostrara una descripción (en inglés) de su funcionamiento.


Este objeto genera un botón, 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 introducción a App Inventor no voy a detenerme para

en el que te mostrara una descripción (en


Este objeto genera un botón, 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 (están en Palette > Basic). Los arrastramos a la Región de Viewer. Recordad que vamos a utilizar dos botones, asique quedar algo así:


Una vez tengamos localizados estos 3 objetos (están en Palette > Basic). Los arrastramos a la Región de Viewer. Recordad que vamos a utilizar dos botones, asique arrastrar 2. Os debería


Una vez tengamos localizados estos 3 objetos (están en Palette > Basic). Los arrastramos a la arrastrar 2. Os debería

Viewer. Una vista rápida a tu aplicación

De esta región hay poco que contar, solo tiene una opción de configuración 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 botón con el nombre que le has dado, justo al lado del botón Screen1, si pinchamos sobre el botón nuevo podrelas distintas pantallas.

Si os habéis fijado, al arrastrar los objetos de la Palette al Viewer, únicamente podíais 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 opinión 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 solución.

Para que veáis como funciona, vamos a agregar el objeto HorizontalArrangement, justo después del TextBox y dentro de este meteremos los botones uno alde la siguiente forma:


Viewer. Una vista rápida a tu aplicación

De esta región hay poco que contar, solo tiene una opción de configuración que es la de Display Invisible Components in Viewer en la parte superior. Esta opción 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 botón con el nombre que le has dado, justo al lado del botón Screen1, si pinchamos sobre el botón nuevo podremos conmutar entre

Si os habéis fijado, al arrastrar los objetos de la Palette al Viewer, únicamente podíais colocarlos uno debajo del otro. Esto es porque las pantallas tienen sus propios objetos en la

tos objetos son los siguientes:

En mi opinión 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 código abierto, asique tarde o temprano alguien aportara la solución.

Para que veáis como funciona, vamos a agregar el objeto HorizontalArrangement, justo después del TextBox y dentro de este meteremos los botones uno al lado del otro, quedando


De esta región hay poco que contar, solo tiene una opción de configuración 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 botón con el nombre que le has dado,

mos conmutar entre

Si os habéis fijado, al arrastrar los objetos de la Palette al Viewer, únicamente podíais 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 código abierto,

Para que veáis 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 recomendación, y que debéis coger como costumbre si no queréis complicaros la vida más tarde, es uséis 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 recomendación, y que debéis coger como costumbre si no queréis complicaros la vida más tarde, es renombrar los objetos que uséis con un nombre que los identifique rápidamente. 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 recomendación, y que debéis coger renombrar los objetos que

he renombrado yo

En la parte inferior podemos ver un pequeño apartado que pone pone ADD. Aquí iremos subiendo las imágenes 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 región las propiedades de dicho objeto. Cada objeto tiene sus claras. Vamos a configurar las propiedades de los objetos que hemos cargado:

• Label: Marcaremos la opción FontBolt para que salga en negrita e introduciremos en Text el siguiente texto: “demás opciones las dejamos como están.

• 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”hubiera un texto que si tenga en cuenta por defecto, lo colocaríamos 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 pequeño apartado que pone Media, con un botón que pone ADD. Aquí iremos subiendo las imágenes o sonidos que vayamos a utilizar ahora o mas tarde, estos archivos quedaran cargados en la aplicación 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 región 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 opción FontBolt para que salga en negrita e introduciremos en Text el siguiente texto: “Introduce el texto a mostrardemás opciones las dejamos como están.

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 quisiéramos que hubiera un texto que si tenga en cuenta por defecto, lo colocaríamos en la casilla de Text.

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


, con un botón que pone ADD. Aquí iremos subiendo las imágenes o sonidos que vayamos a utilizar ahora o mas

n la aplicación y se podrá acceder a ellos desde

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

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

Marcaremos la opción 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 quisiéramos que hubiera un texto que si tenga en cuenta por defecto, lo colocaríamos en la

Únicamente cambiaremos el texto de los botones, en uno

Trabajando con el código. El modo pu

Cuando ya tengamos todo lo anterior hecho, nos dirigimos a la parte superior derecha, en la barra verde habrá un botón que pone Cuando termine de cargar se descargara un archivo java, si tu navegdeberás 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 mínimo de conocimientos:

• Definition: Aquí se agrvariables. Cuando definas algo, para poder llamarlo o utilizarlo deberás dirigirte a My Blocks > My Definitions

• Text: Aquí estarán todas las funciones relacionadas con el texto, crear texto, buscatexto, comprar textos… etc

• List: Opciones relacionadas con creación de listas• Math: Serán los típicos operadores lógicos de suma, resta, multiplicación…etc

• Logic: Secuencias lógicas como =, and, or…

• Control: Todas las funciones como If, do while• Color: para asignar colores.


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 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 deberás 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 deberás dirigirte a My Blocks > My Definitions

Text: Aquí estarán todas las funciones relacionadas con el texto, crear texto, buscatexto, comprar textos… etc

List: Opciones relacionadas con creación de listas Math: Serán los típicos operadores lógicos de suma, resta, multiplicación…etc

Logic: Secuencias lógicas 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 deberás 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 deberás dirigirte a My

Text: Aquí estarán todas las funciones relacionadas con el texto, crear texto, buscar

Math: Serán los típicos operadores lógicos de suma, resta, multiplicación…etc

De las dos pestañas que nos quedan (My blocks y Advanced) a este nivel del tutorial solo me interesa enseñaros la pestaña 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, variables…etc)

Ahora que ya sabemos para qué sirve cada cosa vamos a empezar a programar nuestra aplicación.

Programando con Puzles

Lo primero que quiero que sepáis 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 sacaremos serán las siquientes:

La pieza amarilla ifelse sirve pacierto y se cumple ejecutara lo que se encuentre en Thenelse-do. En cambio si la condición no es cierta lo hará al revés.

La pieza azul TextoMensaje.Text haráTextbox. Recordar que esto lo sacamos desde My Blocks > <nombre_que_le_disteis_al_texbox>.

Con la pieza marrón, is text empty? Comprobamos si el texto de la pieza azul, esta vacio.

La pieza naranja, not, crea una negación.

Si las juntamos todas como en la imagen obtendremos que si el Texto que contiene el Textbox está vacío, ejecute lo que se encuentra en elseun texto ejecute lo que se encuentra en


De las dos pestañas que nos quedan (My blocks y Advanced) a este nivel del tutorial solo me interesa enseñaros la pestaña 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, variables…etc).

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

Programando con Puzles

Lo primero que quiero que sepá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

Las primeras piezas que sacaremos serán las siquientes:

sirve para hacer una comprobación ( test ), si esa comprobación 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 condición no es cierta lo hará al revés.

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


, not, crea una negación.

Si las juntamos todas como en la imagen obtendremos que si el Texto que contiene el Textbox está vacío, 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 pestañas que nos quedan (My blocks y Advanced) a este nivel del tutorial solo me interesa enseñaros la pestaña 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 sabéis de qué tipo de objeto se trata y no tengo que ir indicando

ra hacer una comprobación ( test ), si esa comprobación 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 preocupéis de donde colocarlo porque este tipo de objetos solo pueden ser invisible. Al añadirlo veréis 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 debería ser algo parecido a este:

Pero con esto no es suficiente, ahora tenemopulsemos el botón 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 preocupéis de donde colocarlo porque este tipo de objetos solo pueden ser invisible. Al añadirlo veréis 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 debería ser algo parecido a este:

Pero con esto no es suficiente, ahora tenemos que conseguir que esto ocurra cuando pulsemos el botón 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 preocupéis de donde colocarlo porque este tipo de objetos solo pueden ser invisible. Al añadirlo veréis 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 botón 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 aplicación. Hacemos lo mismo con el botón de borrar y el resultado final será este:

Probando nuestra aplicación. Creando un emulador.

Ahora para probar nuestra aplicación, nos dirigimos a la parte superior y pinchamos en Emulator, y nos saldrán dos ventanas como estas:


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

Probando nuestra aplicación. Creando un emulador.

Ahora para probar nuestra aplicación, nos dirigimos a la parte superior y pinchamos en ldrán dos ventanas como estas:


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

Ahora para probar nuestra aplicación, nos dirigimos a la parte superior y pinchamos en New

Dejamos que cargue hasta que estemos viendo el escritorio de un teléfono android.

Justo a la derecha de New Emulator hay otro botón que pone ahí y pinchamos sobre el único emulador que tendremosequipo, lo reconocería y aparecería aquí, pudiendo probar la aplicación en nuestro propio móvil como comentaba al principio del tutorial.

Dejamos que cargue el dispositivo y la aplicación 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 aplicación cargada en el emulador.

Y para terminar vemos el resultado de nuestra aplicación:



Justo a la derecha de New Emulator hay otro botón que pone Connect to deviceahí y pinchamos sobre el único emulador que tendremos. Si conectamos nuestro móvil y al equipo, lo reconocería y aparecería aquí, pudiendo probar la aplicación en nuestro propio móvil como comentaba al principio del tutorial.

Dejamos que cargue el dispositivo y la aplicación 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 aplicación cargada en el emulador.

Y para terminar vemos el resultado de nuestra aplicación:



Connect to device, pinchamos . Si conectamos nuestro móvil y al

equipo, lo reconocería y aparecería aquí, pudiendo probar la aplicación en nuestro propio

Dejamos que cargue el dispositivo y la aplicación y en pocos minutos estará nuestra aplicación

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


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

Documents