Gua de App Inventor

Desarrollo del Internet de las Cosas

9
1E uM A
TG a
App Inventor
Es un entorno para desarrollar aplicaciones software para dispositivos Android. Fue
concebido por Google en 2011 aunque posteriormente fue abandonado, a partir de ese
momento fue desarrollado por el MIT http://appinventor.mit.edu/explore/
http://mitmobilelearning.org , an est en versin beta, no obstante cuenta con muchas
caractersticas funcionales.

El App Inventor es una aplicacin distribuida, podemos acceder a ellas desde un

navegador Web compatible (Necesita Java 1.6 o superior http://www.java.com/es/ .
http://www.java.com/en/download/installed.jsp ), las aplicaciones desarrolladas se
pueden desplegar en dispositivos Android o emuladores.

Se basa en el desarrollo visual, a travs del editor por lo que no se requieren grandes
conocimientos de programacin, las aplicaciones se desarrollan mediante la
composicin de elementos y bloques.

La pgina principal del APP inventor es: http://ai2.appinventor.mit.edu se necesita una

cuenta de Gmail para poder acceder como usuario.

Las aplicaciones que desarrollamos son proyectos, originalmente no tenemos ningn

proyecto creado, para continuar avanzando tenemos que crear uno pulsando en el botn
New Project.

Vamos a llamar a este proyecto Prueba1.

TEMA 3 Gua Bsica

Los proyectos se almacenan en la propia plataforma, la informacin se guarda de
manera automtica y en cualquier momento podemos recuperar un proyecto anterior.

Una vez creamos el proyecto se nos dirige a la pantalla del diseador Web de App
Inventor.

TEMA 3 Gua Bsica

La interfaz del editor Web se divide en varias partes, en la parte central Viewer tenemos
el editor de pantallas de nuestra aplicacin. Inicialmente nuestra aplicacin solo tiene
una pantalla / ventana, pero se pueden agregar ms.

En la parte izquierda tenemos la Palette, donde estn todos los elementos que podemos
agregar a las pantallas de nuestra aplicacin, algunos elementos tienen representacin
grfica en la pantalla (por ejemplo los botones, imgenes, etiquetas de texto, etc.), otros
elementos en cambio no sern visibles, pero s que tendrn su efecto en la lgica de
negocio de la aplicacin.

TEMA 3 Gua Bsica

Los elementos estn ordenados en diferentes categoras segn su objetivo.

TEMA 3 Gua Bsica

 En la categora User Interface encontramos los controles clsicos que se
utilizan para construir interfaces de usuario: botones imgenes, etiquetas de
texto, campos de entrada de texto, etc.

En la categora Layout encontramos unos elementos que sirven para definir la

posicin de los elementos en la pantalla, es decir sirven de gua para colocar
nuevos elementos dentro de otros. Utilizamos los Layouts como elemento
principal y dentro de ellos vamos introduciendo nuevos controles: botones,
imgenes, etc. En el App Inventor el uso de los Layouts no es obligatorio

En la categora Media encontramos elementos que trabajan con elementos

multimedia: imagen, video y sonido.

En la categora Drawing and Animation encontramos elementos para realizar

animaciones grficas.

En la categora Sensor encontramos elementos que habilitan el acceso al

hardware del dispositivo, sensores, GPS, cmara, etc. Por el momento el APP
Inventor solo ofrece soporte a parte del hardware equipado en los dispositivos
Android (no a la totalidad).

En la categora Social encontramos elementos de comunicacin social.

En la categora Storage encontramos elementos que habilitan la gestin de

datos, en ficheros y bases de datos.

TEMA 3 Gua Bsica

 En la categora Connectivity encontramos los elementos que permiten que
nuestra aplicacin se comunique con otros sistemas, va Internet o Bluetooth.

En la categora Lego MindStorms encontramos un conjunto de elementos para

programar aplicaciones que van a ser ejecutadas en dispositivos
LegoMindStorm, principalmente nos permite acceder a los diferentes sensores
del robot de Lego (normalmente estos robots cuentan con muchos tipos de
sensores y motores diferentes). http://www.lego.com/en-
us/mindstorms/?domainredir=mindstorms.lego.com

Lego MindStorms

En la parte izquierda de la pantalla tenemos la seccin Components y Properties.

La seccin Components nos muestra una lista con todos los componentes que hay en la
aplicacin, en este momento el nico componente es la propia pantalla Secreen1, pero
en el futuro tendremos ms componentes, esta lista puede resultar muy til para
seleccionar componentes con precisin.

La seccin Properties muestra las propiedades del componente seleccionado

actualmente, por defecto el componente seleccionado es la propia ventana Screen1 , por
lo que podemos modificar varios de los parmetros asociados a la pantalla.

TEMA 3 Gua Bsica

Dependiendo del elemento seleccionado se mostrarn unas u otras propiedades, algunas
de las propiedades comunes permiten definir:

Color o imagen de fondo

Color del texto
Elemento activo / inactivo
Tipo de letra
Hint (mensaje de ayuda)
Alineacin
Elemento visible o invisible
Dimensiones: alto y ancho
Etc.

En la parte superior de la pantalla tenemos una serie de acciones de configuracin que

permiten gestionar los proyectos, la conexin con dispositivos o emuladores y la
generacin de ficheros .apk con la aplicacin que nosotros hemos diseado (Los

TEMA 3 Gua Bsica

ficheros .apk son los ejecutables de las aplicaciones Android, se pueden enviar a
cualquier dispositivo Android e instalarlos).

TEMA 3 Gua Bsica

Conectar un dispositivo
Las aplicaciones desarrolladas se pueden probar sobre un dispositivo Android real
(Sistema embebido, Telfono, Tablet, etc.) o sobre un emulador que podemos instalar
en cualquier ordenador.
Si se dispone de un telfono real siempre ser la mejor opcin, ya que el emulador no
suele tener un buen rendimiento.

Utilizar un dispositivo Android real

Para usar un dispositivo Android propio tenemos que descargar la app del App
Inventor 2, tenemos que instalar esta aplicacin en todos los dispositivos Android que
queramos utilizar para probar las aplicaciones que desarrollemos, podemos descargar la
aplicacin desde el Google Play:
https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3&hl=es

La aplicacin se llama MIT AI2 Companion.

Ejecutamos la aplicacin MIT AI2 Companion que acabamos de instalar en nuestro

dispositivo, ahora tenemos dos formas de lanzar las aplicaciones que estamos
desarrollando en la web:

Forma 1: Abrimos la aplicacin AI2 Companion y conectamos el dispositivo

Android por USB al PC. En la pgina Web seleccionamos Connect -> USB

TEMA 3 Gua Bsica

 (Requiere que tengamos los drivers del dispositivo conectado, y que el
dispositivo admita aplicaciones de origines desconocidos)

Forma 2 (* Recomendada) : si nuestro dispositivo Android tiene acceso a

internet podemos desplegar rpidamente las aplicaciones en cualquier telfono
mediante un cdigo, para obtener el cdigo de nuestra aplicacin, nos dirigimos
a la Web y seleccionamos Connect -> AI Companion

Obtendremos un cdigo QR y un cdigo numrico que tenemos que introducir en la

aplicacin de nuestro dispositivo Android, (cualquiera de las dos opciones es vlida).
No se debe pulsar nunca el botn Cancel, esta ventana desaparecer de forma
automtica cuando el dispositivo est conectado al App inventor.

Accedemos a la aplicacin del dispositivo mvil y pulsamos el botn Scan QR Code ,

o introducimos el cdigo manualmente en el campo de texto y pulsamos Connect with
code.

TEMA 3 Gua Bsica

Al introducir el cdigo y pulsar en Connect with code, desaparecer el mensaje de la
pgina Web y nuestro dispositivo ya estar sincronizado, todos los cambios que
realicemos en la editor web se vern reflejados en el dispositivo.

Por ejemplo si arrastramos un Button desde la Palette hasta nuestra ventana veremos
como aparece en la pantalla del dispositivo mvil.

TEMA 3 Gua Bsica

TEMA 3 Gua Bsica
TEMA 3 Gua Bsica
Utilizar el emulador del App Inventor

Esta opcin no suele ser muy recomendable, ya que el emulador es bastante lento, pero
en algunos casos puede ser la opcin ms cmoda. Para conectar un emulador tenemos
que descargar el instalador de la pgina de APP inventor
http://appinventor.mit.edu/explore/ai2/setup-emulator.html .

Tenemos disponible instalables para diferentes sistemas operativos.

El proceso de instalacin del App Inventor Setup Installer es muy sencillo, se hace a
travs del asistente y apenas requiere unos minutos.

Una vez instalado nos aparecer un acceso directo en nuestra mquina para la aplicacin
aiStarter, (Si no aparece el acceso directo buscamos el programa en la ruta de
instalacin o el buscador de aplicaciones de Windows).

TEMA 3 Gua Bsica

Ejecutamos la aplicacin y se abrir una ventana que nunca debemos cerrar, tras este
paso la aplicacin ya estar lista para lanzar un emulador (los emuladores se iniciaran
desde la propia pgina web del App Inventor).

Si en algn momento el aiStarter presenta problemas, cerrar la aplicacin

pulsando Control + C sobre la consola, nunca cerrar la aplicacin de la ventana
directamente, pues puede que realmente no mate el servicio.

Para probar el emulador volvemos a la pgina web y pulsamos el botn Connect ->
Emulator.

Es muy importante asegurarse de que nuestro navegador Web y nuestra versin de Java
estn dentro de la lista de navegadores web compatibles con el App inventor.

http://appinventor.mit.edu/explore/ai2/setup

El proceso de inicializacin del Emulador puede llevar varios minutos (Sobre todo la
primera vez que se ejecuta).

TEMA 3 Gua Bsica

Probablemente el emulador necesite varios minutos para cargar el sistema:

TEMA 3 Gua Bsica

Otros emuladores

En ocasiones el emulador del App inventor no funciona demasiado bien (es algo lento),
y tarda varios minutos en procesar las ordenes, una solucin si no se dispone de un
dispositivo fsico Android, es utilizar otro emulador, por ejemplo BlueStacks.
http://www.bluestacks.com/ este emulador trata de emular a un dispositivo real, y tiene
acceso al Google Play, por lo que podemos descargar la aplicacin MIT AI2
Companion como si se tratara de un dispositivo real. En este caso como el dispositivo
el emulador no tiene acceso a la cmara habr que introducir los cdigos manualmente.

Existen otros emuladores de gran calidad que pueden ser utilizados de igual forma, se
recomienda probarlos y utilizar el que ofrezca un mejor rendimiento:

GenyMotion https://shop.genymotion.com/index.php?controller=order-opc
YouWave for Windows http://youwave.com/
Jar of Beans
https://drive.google.com/folderview?id=0BxKzTODvot0bYnZ2VFBGejhFRDQ
&usp=sharing

TEMA 3 Gua Bsica

Ejemplo 1: Saludo

Vamos a comenzar a utilizar el App Inventor para crear una aplicacin muy bsica que
genere un saludo personalizado.

Incluimos en la pantalla principal Screen1: un campo de entrada de texto (TextBox),

una etiqueta textual (Label) y un botn (Button), para incluir los elementos tenemos que
arrastrarlos desde la Palette Hasta el Viewer.

Podemos mover los elementos por la pantalla para variar su posicin, solo tenemos que
arrastrarlos por la pantalla manteniendo el botn derecho del ratn pulsado.

TEMA 3 Gua Bsica

Si queremos eliminar algn elemento tenemos que seleccionarlo y pulsar el botn Supr
o borrar del teclado, para seleccionar un elemento puede resultarnos til utilizar la vista
de Components ya que en ocasiones puede resultar difcil seleccionar un elemento
concreto en la pantalla (Sobre todo si hay muchos elementos).

TEMA 3 Gua Bsica

Por defecto el editor asigna nombres genricos a los elementos que incluimos en la
pantalla: Screen 1, TextBox1, Label1, Button1, para que resulte ms fcil programar
la lgica de negocio vamos a modificar esos nombres por defecto y colocar nombres
descriptivos de los controles.

Para modificar los nombres de los elementos tenemos que ir a la vista Components,
seleccionar el elemento en cuestin y pulsar el botn que aparece en la parte inferior
Rename.

A continuacin modificamos el nombre de los elementos:

TextBox CajaTextoNombre
Label1 TextoSaludo
Button1 BotonSaludar

TEMA 3 Gua Bsica

A continuacin vamos a modificar las propiedades de algunos de los elementos
utilizando la vista Properties, seleccionamos el elemento TextoSaludo.

Le asignamos un color de fondo, amarillo (Propiedad: BackgroundColor :

Yellow).

Indicamos que el texto tiene que ser negrita (Propiedad: FondBold).

Aumentamos el tamao del texto a 20 (Propiedad FontSize).

Cambiamos el texto por defecto a Sin saludo (Propiedad Text).

Cambiamos la alineacin para que aparezca en el centro (Propiedad

TextAlignment : center).

Cambiamos el ancho para que ocupe todo el espacio disponible en la pantalla

(Propiedad Width valor: Fill parent). Fill parent significa que se extienda por
todo el espacio disponible en la pantalla, en cambio s seleccionamos Automatic
el elemento ocupara el mnimo espacio posible para su representacin.

TEMA 3 Gua Bsica

A continuacin modificaremos las propiedades del elemento BotonSaludar,
cambiamos su texto (Propiedad Text) por Saludar!, podemos incluir cualquier otra
modificacin de aspecto que consideremos oportuna: cambiar el color de fondo
(BackgroundColor), la forma (Shape), incluir una imagen (Image), etc.

TEMA 3 Gua Bsica

Una vez hemos definido la interfaz de usuario de la aplicacin es el momento de
programar la lgica de negocio, para las labores de programacin el App Inventor
utiliza un editor de bloques, podemos acceder al editor de bloques pulsando sobre el
botn Blocks situado en la parte superior derecha de la Web

.
Podemos movernos entre el editor y el diseador de bloques utilizando los botones
Designer y Blocks.

TEMA 3 Gua Bsica

En la parte izquierda del editor de bloques tenemos una lista donde estn todas las
estructuras de programacin que podemos utilizar (Built-in) y todos los componentes
que tenemos en la pantalla (Screen1).

Las estructuras de programacin son un conjunto reducido de las estructuras de control

clsicas de un lenguaje de programacin.

TEMA 3 Gua Bsica

Al seleccionar cada una de las categoras nos aparecer un panel desplegable donde se
encuentran todos los bloques que podemos utilizar.

Control: Contiene los bloques de control tradicionales: if / else, for, while .

adems contiene bloques que permiten realizar evaluaciones y abrir / cerrar
ventanas (Screens) y la aplicacin.

Consultar:
http://appinventor.mit.edu/explore/ai2/support/blocks/control.html

Logic: contiene bloques para manejar los operadores lgicos y especificar

condiciones / comparaciones.

Consultar:
http://appinventor.mit.edu/explore/ai2/support/blocks/logic.html

Math: contiene bloques para trabajar con elementos numricos, estos elementos
consisten principalmente en elementos de comparacin y diferentes tipos de
funciones matemticas.

Consultar:
http://appinventor.mit.edu/explore/ai2/support/blocks/math.html

Text: contiene bloques para definir y manipular textos, permite definir una gran
cantidad de operaciones bsicas sobre cadenas de texto: unin, evaluacin
reemplazos, etc.

TEMA 3 Gua Bsica

 Consultar:
http://appinventor.mit.edu/explore/ai2/support/blocks/text.html

Lists: contiene bloques que permiten gestionar listas de elementos, crear listas,
manipularlas y realizar operaciones bsicas con ellas.

Consultar:
http://appinventor.mit.edu/explore/ai2/support/blocks/lists.html

Colors: bloques que permiten realizar acciones relacionadas con la seleccin o

definicin de Colores (Generalmente no se utilizan demasiado).

Consultar:
http://appinventor.mit.edu/explore/ai2/support/blocks/colors.html .

Variables, contiene bloques que permiten definir variables globales (todo el

programa) o locales (dentro de procedimientos), adems contiene los bloques de
acceso a los valores (get) y de modificacin (set). (Los elementos de la categora
Variable se utilizan de manera habitual en la definicin de la lgica de negocio).

Consultar:
http://appinventor.mit.edu/explore/ai2/support/blocks/variables.html
http://appinventor.mit.edu/explore/ai2/support/concepts/variables.html

Procedures: contiene bloques que permiten la gestin de procedimientos, los

procedimientos permiten agrupar un conjunto de bloques bajo un mismo
nombre (son similares a las funciones de otros lenguajes), los procedimientos
definidos pueden ser posteriormente invocados.

Consultar:
http://appinventor.mit.edu/explore/ai2/support/blocks/procedures.html
http://appinventor.mit.edu/explore/ai2/support/concepts/procedures.html

Para programar la lgica de la aplicacin tenemos que seleccionar los bloques y

arrastrarlos hasta el rea de diseo de la parte derecha de la pantalla. Los bloques que
incluimos en la rea de diseo definen el comportamiento de la aplicacin.

TEMA 3 Gua Bsica

Los bloques se combinan entre s (encajan como piezas de un puzzle, de esta forma
pueden definir una lgica compleja para la aplicacin.

Podemos asignar un comportamiento a la propia ventana (Screen) y tambin a los

controles que hay sobre ella (botones, etiquetas, etc.).

A continuacin podemos realizar varias pruebas, encajando bloques de diferentes tipos

para ver cmo se combinan (aunque de momento no tiene ningn funcionamiento
lgico).

Por ejemplo, a continuacin mostramos la posible equivalencia entre dos funciones,

primero en un lenguaje de programacin tradicional y luego desde el editor de bloques:

TEMA 3 Gua Bsica

function procedimiento(){
var resultado = 10;

if ( resultado == 10){
resultado = 15;
}

La forma de utilizacin es muy similar, el editor impide que podamos realizar

combinaciones no permitidas ya que las piezas incompatibles no encajan entre s.

A continuacin se presenta otro ejemplo donde se est realizando un bucle While.

function procedimiento(){
var contador = 0;

while ( contador < 10){

contador = contador + 1;
}

TEMA 3 Gua Bsica

Recurso: resumen de funcionamiento de estructuras de control en lenguajes de
programacin: http://es.wikipedia.org/wiki/Estructuras_de_control

*Nota: para simplificar el desarrollo: los bloques se pueden copiar y pegar,

seleccionamos un bloque que se marcar con un reborde amarillo pulsamos
Control + C (Copiar) y a continuacin Control + V (Pegar).

Para comenzar a implementar la lgica de negocio de la aplicacin vamos dejar el rea

de diseo totalmente vaca, eliminamos todos los controles en caso de que hubiera
alguno, (Los bloques se eliminan arrastrndolos hacia el cubo que aparece en la parte
inferior izquierda de la pantalla).

Vamos a incluir una funcionalidad que se ejecutar cuando el usuario pulse el botn
BotonSaludar, para ello seleccionamos el botn en la lista de elementos de la parte
izquierda.

La funcionalidad asociada a la pulsacin es la WhenBotonSaludar.Click do:

TEMA 3 Gua Bsica

Permite definir qu queremos que ocurra cuando el usuario realiza un Click (pulsacin
estndar) sobre el botn saludar.

La funcionalidad deseada ser:

Obtener el texto que el usuario ha escrito en el componente CajaTextoNombre

Formar una nueva cadena con Hola + el texto introducido en

CajaTextoNombre

Asignar esa nueva cadena a la etiqueta TextoSaludo

En primer lugar seleccionamos la CajaTextoNombre, y buscamos la caja que permite

obtener el valor de su propiedad Text CajaTextoNombre.Text:

TEMA 3 Gua Bsica

Arrastramos el bloque al espacio de diseo, pero aun no realizamos ningn tipo de
conexin.

Tenemos que concatenar el valor del texto de la CajaTextoNombre con la cadena de

texto Hola. Para crear la cadena de texto utilizamos el elemento de tipo Text Join.

El Join permite concatenar cadenas de texto, vamos a concatenar un literal Hola

(Tambin de tipo Text) y el valor del texto de la CajaTextoNombre.

El bloque que permite definir texto literal es:

TEMA 3 Gua Bsica

Concatenacin de cadenas (Join):

Ahora solo falta asignar la concatenacin al elemento TextoSaludo, seleccionamos el

elemento TextoSaludo y buscamos el bloque que permite modificar el valor de su
atributo Text (setTextoSaludo.Text)

El texto que le vamos a asignar es el resultado del Join.

TEMA 3 Gua Bsica

Y todo esto lo vamos a hacer cuando el usuario haga Click sobre el botn
BotonSaludar, por lo que tendremos que encajar el bloque dentro del bloque Click.

Con esto finalizamos la implementacin de la lgica del botn BotonSaludar y

podemos probar la aplicacin en el dispositivo.

Hay que asegurarse de que la conexin con el dispositivo Android sigue activa. En
caso de que el telfono no se haya actualizado con la ltima versin de la aplicacin lo
ms recomendable es resetear la conexin y repetir el proceso de emparejamiento (AI
Companion o Emulator).

La aplicacin desplegada ya debera de ser totalmente funcional.

TEMA 3 Gua Bsica

Ejemplo 2: Responde la pregunta

La segunda aplicacin que vamos a implementar va a solicitar al usuario que realice una
suma (con nmeros aleatorios), si el resultado introducido por el usuario es correcto lo
va a dirigir a una segunda ventana.

Creamos un nuevo proyecto al que vamos a llamar suma.

Sobre la Screen1 vamos a desplegar un Layout de tipo HorizontalArrangement (se

encuentra en la categora Layout) , de esta forma podemos incluir elementos en
horizontal.

TEMA 3 Gua Bsica

Sobre el HorizontalArrangement vamos a incluir 3 elementos de tipo Label: la
primera ser el nmero 1 de la suma la segunda el signo `+ y la tercera el nmero 2.

Modificamos los nombres de las Label y tambin su: contenido (Text), tamao de texto
(Font Size).

TEMA 3 Gua Bsica

En la parte baja de la pantalla (a continuacin del HorizontalArragngement vamos a
incluir un elemento TextBox para que el usuario introduzca su respuesta, y un elemento
Button para que el usuario pulse cuando quiera responder a la pregunta.

Nuevamente renombramos los dos elementos para que tengan nombres descriptivos:

El TextBox ser Respuesta

El Button ser BotonResponder

Hemos finalizado el diseo de la primera pantalla/ventana, para incluir una nueva

ventana (que se mostrar cuando el usuario responda correctamente a la pregunta)
tenemos que pulsar sobre el botn Add Screen, a continuacin tendremos que darle un
nombre a la nueva pantalla, la llamaremos correcto, este nombre es muy importante
ya que ser el identificador de la pantalla.

TEMA 3 Gua Bsica

Automticamente el editor nos dirige a la nueva pantalla correcto, pero podemos
movernos entre todas las pantallas de nuestra aplicacin utilizando el men desplegable
que de la parte superior.

En la pantalla correcto vamos a incluir un elemento Label que indique al usuario que
respondi correctamente a la pregunta, y un elemento Button que le permita generar
otra pregunta a la que debe responder.

Nuevamente renombramos los dos elementos para que tengan nombres descriptivos:

El Label ser MensajeCorrecto

El Button ser BotonVolver

Una vez finalizada la definicin de las interfaces grficas queda definir la lgica de
negocio, lo haremos desde el editor de Bloques.

TEMA 3 Gua Bsica

En primer lugar vamos a editar la lgica de negocio de la pantalla Screen1, para ello
tenemos que seleccionar la pantalla.

La lgica ser simple: cuando se inicializa la pantalla introducimos dos nmeros

aleatorios en las Labels num1 y num2

Para asignar lgica de negocio a la pantalla tenemos que seleccionar el elemento

Screen1 y posteriormente el bloque when Screen1.Initialize (cuando la Screen1 se
inicializa).

TEMA 3 Gua Bsica

Seleccionamos el elemento num1 , y posteriormente el bloque set num1.Text to , este
bloque nos permite asignar un nuevo texto.

Vamos a asignar un valor numrico aleatorio a la etiqueta, para ello vamos a utilizar el
bloque random integer que podemos encontrar dentro de la categora Math.

Este bloque permite elegir cual es el rango a utilizar en la generacin de los nmeros
aleatorios, podemos establecer un rango de 1 a 10.

TEMA 3 Gua Bsica

Repetimos la misma operacin para la label num2.

TEMA 3 Gua Bsica

A continuacin implementaremos la lgica del botn (BotonResponder), cuando el
usuario pulsa tenemos que ver si el valor introducido en Respuesta se corresponde
realmente con la suma de num1 y num2.

Seleccionamos el elemento BotonResponder y el bloque when BotonResponder.click

do.

Cuando el usuario pulsa sobre el botn vamos a realizar una comprobacin, para ello
seleccionamos el bloque if then que est dentro de la categora Control.

TEMA 3 Gua Bsica

Dentro de la parte del if, estableceremos la condicin, que en este caso consiste en
comprobar si el Texto introducido en el elemento Respuesta se corresponde con la suma
de los textos de num1 + num2.

Para hacer una comprobacin matemtica utilizamos el bloque de comparacin

localizado en la categora Math.

TEMA 3 Gua Bsica

El primer parmetro que incluiremos en la comparacin ser el contenido textual del
elemento Respuesta, seleccionamos el elemento Respuesta y posteriormente el bloque
Respuesta.Text .

TEMA 3 Gua Bsica

El segundo factor de la comparacin ser la suma de num1 + num2, todas las
operaciones matemticas se encuentran en la categora Math.

TEMA 3 Gua Bsica

En primer lugar dentro de la suma colocaremos el valor textual del elemento num1,
seleccionamos el elemento y posteriormente el nombre num1.Text., repetimos la
operacin con el elemento num2 y lo colocamos en segundo lugar.

TEMA 3 Gua Bsica

Si se cumple la condicin expresada en el if se ejecutar la lgica de negocio
introducida en la parte del then, cuando se cumpla la condicin queremos que la
aplicacin pase de la pantalla Screen1 a la pantalla correcto.

En la categora control esta el bloque que nos permite abrir una nueva ventana, ese
bloque es el open another screen screenName (est en la parte final).

Este bloque requiere el nombre de la pantalla que queremos abrir, para ello tenemos que
incluir un literal textual con el nombre de la pantalla, es importante escribirlo
exactamente igual, o de lo contrario la pantalla no se abrir. Podemos introducir un
texto literal utilizando el primer bloque de la categora Text.

TEMA 3 Gua Bsica

Para ello nos dirigimos al editor de bloques.

La pantalla que queremos abrir en caso de que el usuario responda correctamente a la

pregunta es la pantalla correcto.

Con esto hemos finalizado la lgica de negocio de la pantalla Screen1, pero an falta
por incluir la lgica de negocio del botn que tenemos en la pantalla correcto, al
pulsar este botn queremos que la aplicacin vuelva a la pantalla Screen1.

Para incluir lgica de negocio en otra pantalla la seleccionamos en el men desplegable.

TEMA 3 Gua Bsica

El procedimiento para incluir la lgica de negocio en el botn BotonVolver de la
ventana correcto es prcticamente el mismo que realizamos en la ventana anterior,
aunque en este caso no ser necesario realizar ninguna comprobacin antes de redirigir
la aplicacin hacia otra ventana.

Seleccionamos el BotonVolver e incluimos el bloque When BotonVolver.Click.

Dentro del bloque incluimos el elemento open another screen screenName y a
continuacin le agregamos el texto literal con el nombre de la ventana Screen1.

Con esto hemos finalizado el desarrollo de la aplicacin y est ya es completamente

funcional. Hay que colocar la aplicacin en la pantalla Screen1 para poder comenzar a
ejecutar de forma lgica la aplicacin.

TEMA 3 Gua Bsica

Ejemplo 3: Sensor y notificacin

El objetivo del ejemplo tres ser emular el funcionamiento de un sistema embebido

Android instalado en una plaza de aparcamiento de una ciudad.

El dispositivo tiene un sensor que detecta si hay un vehculo encima o no, y por lo tanto
puede saber si la plaza est ocupada o libre, un sistema de este tipo tendra varios
dispositivos embebidos distribuidos por toda la ciudad, cada uno monitorizara una
plaza de parking o varias en funcin del nmero de sensores que maneje el dispositivo.

Un sistema de este tipo necesita tambin un servidor centralizado que se ocupara de

recolectar toda la informacin de las plazas ocupadas o libres, este servidor centralizado
podra ofrecer servicios a los ciudadanos para indicarles que plazas libres hay cerca de
su posicin.

Los dispositivo embebidos en un sistema de este tipo necesitan utilizar un sensor para
detectar los vehculos, por ejemplo un sensor de luz, de posicin, presencia o de
presin. En este ejemplo vamos a implementar el software de los dispositivos utilizando
el sensor de aceleracin/posicin del telfono, supondremos que hemos instalado un
pequeo sensor que detecta si el vehculo est sobre la plaza o no, en funcin de esa
medicin la aplicacin enviara la informacin al sistema centralizado (a travs de un
servicio Web), indicndole que la plaza est libre / ocupada.

TEMA 3 Gua Bsica

Creamos un nuevo proyecto , Project -> Start New Project .

Incluimos dos labels en la pantalla Screen 1 , utilizaremos estos labels como elementos
de ayuda para mostrar: 1) La medicin actual del sensor acelermetro, 2 ) si el valor
asignado a la medicin actual determina que la plaza est ocupada / libre.

Personalizamos las propiedades de los dos Labels, (Nombre del elemento, ancho y
tamao de texto).

A continuacin vamos a incluir el elemento que permite obtener las mediciones de los
sensores de aceleracin del dispositivo, buscamos el elemento AccelerometerSensor
(que se encuentra en la categora Sensors) y lo arrastramos a la pantalla.

TEMA 3 Gua Bsica

Este elemento no tiene representacin grfica en la pantalla, se limita a obtener los datos
del sensor de aceleracin. Normalmente los dispositivos pueden tener muchos otros
sensores: luz, proximidad, giroscopio, campo magntico, etc, pero por el momento la
herramienta APP Inventor solo soporta un pequeo conjunto de ellos.

Aunque el elemento no tenga representacin grfica puede ser utilizado para definir la
lgica de negocio de la aplicacin.

El siguiente elemento que tenemos que incluir es el elemento Web (dentro de la

categora Connectivity), que permite realizar peticiones a pginas Web, en este caso
nuestra aplicacin va a enviar peticiones a un servidor Web externo cuando detecte que
la plaza est libre / ocupada. Aadimos el elemento Web a la pantalla, al igual que en el
caso anterior el elemento tampoco tiene representacin grfica.

TEMA 3 Gua Bsica

El aspecto final del editor deber ser similar al siguiente:

TEMA 3 Gua Bsica

Nos dirigimos al editor de bloques para implementar la lgica de la aplicacin que
consiste en:

Asignamos un identificador a nuestra plaza (un nmero largo y aleatorio: por

ejemplo 3412312) para que no coincida con los identificadores de otros
alumnos.

Monitorizar el sensor de aceleracin (aceleracin en el eje X)

En todo momento vamos a colocar la medicin del sensor de aceleracin eje (X)
en la Label EtiquetaMedicinAcelerometro

Si la aceleracin en el eje X supera las 5 unidades enviamos una peticin al

servicio Web http://www.parking.mderg.com/actualizarplazag.php indicando
que la plaza est ocupada

Si la aceleracin est por debajo de las 0 unidades enviamos una peticin al

servicio web http://www.parking.mderg.com/actualizarplazag.php indicando
que la plaza esta libre.

El Servicio web: http://www.parking.mderg.com/actualizarplazag.php es un servicio

REST GET que permite indicar si una plaza est ocupada o vaca, este servicio recibe
dos parmetros:

TEMA 3 Gua Bsica

 i Identificador numrico
de la plaza
o Estado de la plaza:
1 = ocupado
0 = libre

Por ejemplo, para indicar que la plaza 1 est ocupada la llamada seria:

http://www.parking.mderg.com/actualizarplazag.php?i=1&o=0

Para indicar que la plaza uno est libre la llamada seria:

http://www.parking.mderg.com/actualizarplazag.php?i=1&o=1

La visin Global de la ocupacin de las plazas se puede ver en la pgina:

http://www.parking.mderg.com/plazas.php de esta forma podremos comprobar si
nuestra aplicacin est funcionando correctamente.

Comenzamos a implementar la lgica de negocio de la aplicacin.

Creamos una variable global y le asignamos el identificador numrico aleatorio de
nuestra plaza. Para incluir variables globales hay que seleccionar el bloque Variables ->
Intialize global.

TEMA 3 Gua Bsica

Le asignamos un valor numrico Math -> valor nmerico.

El resultado ser el siguiente:

Pulsamos sobre el AccelerometerSensor y seleccionamos el bloque

AccelerometerSensor.AccelerationChanged , que detecta cuando el sensor de
aceleracin cambia su posicin:

TEMA 3 Gua Bsica

Asignamos a la Label EtiquetaMedicinAcelerometro la medicin del eje X.
Seleccionamos la etiqueta e incluimos el bloque set
EtiquetaMedicinAcelerometro.Text

TEMA 3 Gua Bsica

Para obtener el valor del sensor tenemos que acceder a la variable xAccel, para acceder
al valor de cualquier variable (global o local) utilizamos el bloque get que se encuentra
dentro de la categora Variables.

TEMA 3 Gua Bsica

A partir de este momento podemos probar la aplicacin en el dispositivo y veremos
como la label EtiquetaMedicionAcelerometro actualiza su valor cuando movemos el
telfono.

El siguiente paso en la implementacin de la lgica de negocio consiste en ver si el

xAccel supera las 5 unidades, para enviar una peticin Web indicando que la plaza est
ocupada, para realizar la comprobacin utilizamos el bloque if then que se encuentra
dentro de la categora Control.

TEMA 3 Gua Bsica

La condicin se incluye en la primera parte del if, en este caso consistir en una
comprobacin matemtica, el bloque de comprobacin matemtica de dos nmeros se
encuentran en la categora Math.

TEMA 3 Gua Bsica

Seleccionamos el combo para cambiar el tipo de comprobacin de = a <.

TEMA 3 Gua Bsica

Para obtener el valor del atributo xAccel tenemos que volver a utilizar el bloque get que
se encuentra dentro de la categora Variables, como ya utilizamos este bloque
anteriormente podemos copiarlo y pegarlo (Control + C copiar y Control + V pegar)

El valor 5 con el que vamos a comparar el atributo xAccel lo podemos definir

utilizando el bloque de valor literal matemtico de la categora Math (lo habamos
utilizado previamente para asignar el valor a la variable global nplaza.

Ahora tenemos que definir la lgica de negocio que se va a ejecutar cuando se cumpla la
condicin xAccel < 5, esa lgica de negocio la incluiremos dentro del then

Para realizar la peticin al servicio Web tenemos que utilizar el elemento Web1 (que
habamos introducido previamente en la aplicacin).

El primer paso consiste en establecer la URL de la peticin web:

Para establecer la URL pulsamos en el elemento Web1 y buscamos el bloque

setWeb1.Url to (est en la parte final de la lista desplegable). Encajamos el bloque en
la lgica de negocio de nuestra aplicacin.

TEMA 3 Gua Bsica

En este caso la URL que tenemos que establecer seria:
http://www.parking.mderg.com/actualizarplazag.php?i=34244&o=1

Indica que la plaza es la i=34244, indica que la plaza est ocupada o=1.

En lugar de utilizar una nica cadena vamos a crear esta cadena de texto concatenando
varias cadenas, la URL principal y cada uno de los parmetros necesarios.

TEMA 3 Gua Bsica

Para concatenar cadenas utilizamos el bloque Join que est dentro de la categora Text.

TEMA 3 Gua Bsica

Algunos bloques como el bloque Join o if then tienen opciones de configuracin, para
acceder a las opciones de configuracin hay que pulsar sobre el botn azul del bloque
. La configuracin nos permite definir cuantos textos vamos a concatenar en este
Join , incluiremos un total de cuatro cadenas de texto.

El primero de los textos va a ser el texto literal que contenga la URL

http://www.parking.mderg.com/actualizarplazag.php
El bloque de texto literal se encuentra en la categora Text.

TEMA 3 Gua Bsica

El siguiente elemento a concatenar ser el atributo i.
Incluimos otro bloque de texto literal con el valor ?i=

TEMA 3 Gua Bsica

A continuacin incluimos el valor del identificador, que ser el valor del atributo
nplaza, para obtener valores de atributos utilizamos el bloque get que est en la
categora Variables (igual que hicimos anteriormente).

Finalmente incluimos el parmetro o con valor 0 para indicar que la plaza est ocupada,
utilizaremos un literal textual con valor &o=1

Ya tenemos la URL de la peticin Web pero para realizarla tenemos que incluir el
bloque CallWeb1.Get (ya que en este caso nos interesa realizar una peticin de tipo
Get).

TEMA 3 Gua Bsica

Con el bloque Call finalizamos la llamada al servicio web, por ultimo vamos a cambiar
el texto de la etiqueta EtiquetaOcupado para indicar que la plaza est ocupada.

El procedimiento es exactamente el mismo que utilizamos para cambiar el valor de la

etiqueta EtiquetaMedicionAcelerometro, accedemos al atributo set
EtiquetaOcupado.Text y lo cambiamos por el texto literal ocupado.

TEMA 3 Gua Bsica

Llegados a este punto podemos comprobar que nuestra aplicacin funciona de manera
parcial. Desplegamos la aplicacin en el mvil y giramos el telfono hasta que el eje X
del acelermetro supere las 5 unidades, en ese momento el dispositivo debera realizar
una peticin al servicio web, si la peticin se realiz correctamente en la pgina
veremos que la plaza se marca como ocupada

http://www.parking.mderg.com/plazas.php

TEMA 3 Gua Bsica

Es el momento de detectar cuando la plaza esta libre, para ello vamos a analizar que el
valor del atributo xAccel > 5 . Para ello le vamos a ampliar el bloque if aadindole un
caso else, es decir si no se cumple la condicin (xAccel < 5) .

Pulsamos sobre las opciones de configuracin del bloque if y aadimos un bloque

else.

A continuacin incluimos toda la lgica de negocio dentro del bloque else ( es

prcticamente idntica a la que incluimos en el bloque else, excepto por dos diferencias:

1) El valor al parmetro o ser 0, (1 era para ocupado, 0 es para libre)

2) El texto literal que colocaremos en la etiqueta EtiquetaOcupado ser libre

El resultado final ser el siguiente:

TEMA 3 Gua Bsica

Ahora podemos probar la aplicacin y comprobar que el estado de la plaza vara en
funcin de la medicin del sensor.

*Nota1 en caso de que el dispositivo utilizado para realizar las pruebas tenga problemas
para llegar detectar aceleraciones altas se recomienda bajar la condicin a xAccel < 0.

*Nota2 en caso de usar un emulador lo ms probable es que no se disponga de sensor de

aceleracin y que siempre retorne el valor 0, para poder probar la aplicacin se
recomienda utilizar un generador de nmeros aleatorios como se explica a continuacin.

Clock y Generacin de nmeros aleatorios

Abrimos el editor en modo Designer e incluimos un elemento de tipo Clock , que est
situado dentro de la categora Sensors.

TEMA 3 Gua Bsica

El elemento Clock no tiene representacin Visual en la pantalla, pero s que tiene
propiedades. Si seleccionamos el elemento Clock podemos personalizar su intervalo
(TimeInterval), por defecto el editor asigna un valor de 1000, lo que significa que el
reloj ejecutar un ciclo cada segundo.

Modificaremos la lgica de negocio para hacer que cada segundo (1000 milisegundos
Ciclo de Reloj) se genere un nmero aleatorio, que emulara la medicin del sensor.

TEMA 3 Gua Bsica

Abrimos el editor de bloques y seleccionamos el elemento Clock1, posteriormente el
bloque When Clock1.Timer do

Este bloque sirve para especificar que lgica de negocio queremos que se ejecute cada
vez que el reloj cumpla un ciclo, en este caso cada segundo.

Vamos a declarar una variable local , para hacerlo utilizamos el elemento initialize
local que hay dentro de la categora Variables.

TEMA 3 Gua Bsica

A la variable local la vamos a llamar xAccel.

Le asignamos como valor un numero aletorio utilizando el bloque random integer

from que hay en la categora Math. Estabelcemos un rango de -10 a 10.

Finalmente movemos el contenido del bloque When AccelerometerSensor1

.AccelerationChanged al bloque whenClock1.Timer.

TEMA 3 Gua Bsica

El resultado sera el siguiente:

Cada segundo se creara un numero aletorio que se almacenar en la variable local

xAccel, en funcion de ese nmero aletorio se enviara la peticin al servicio web,
indicando que la plaza esta ocupada o libre.

TEMA 3 Gua Bsica

Generar Apks

Las aplicaciones de Android se distribuyen como ficheros .apk que se instalan en los
dispositivos mviles, para generar el fichero apk de una aplicacin hay que pulsar sobre
la opcin Connect y App (save .apk to my computer).

TEMA 3 Gua Bsica

Recursos

Tutoriales 1
http://beta.appinventor.mit.edu/learn/tutorials/

Tutoriales 2
http://appinventor.mit.edu/explore/ai2/tutorials

Documentacin
http://appinventor.mit.edu/explore/library

Documentacin tipos de bloques

http://appinventor.mit.edu/explore/ai2/support/blocks.html

Peticiones Web avanzadas

http://www.appinventorblocks.com/appinventor-tutorials-tips/appinventor-web-
component-json-response

Sistemas embebidos Android

http://www.liquidware.com/category/Android

TEMA 3 Gua Bsica