3 - Guía de APP Inventor

Guía de App Inventor

TG E uMí A a

1 9

Desarrollo del Internet de las Cosas

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 , aún está en versión beta, no obstante cuenta con muchas características funcionales. El App Inventor es una aplicación 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 través del editor por lo que no se requieren grandes conocimientos de programación, las aplicaciones se desarrollan mediante la composición de elementos y bloques. La página 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 ningún proyecto creado, para continuar avanzando tenemos que crear uno pulsando en el botón New Project. Vamos a llamar a este proyecto Prueba1.

TEMA 3 –Guía Básica

Los proyectos se almacenan en la propia plataforma, la información se guarda de manera automática y en cualquier momento podemos recuperar un proyecto anterior. Una vez creamos el proyecto se nos dirige a la pantalla del diseñador Web de App Inventor.

TEMA 3 –Guía Básica

La interfaz del editor Web se divide en varias partes, en la parte central Viewer tenemos el editor de pantallas de nuestra aplicación. Inicialmente nuestra aplicación solo tiene una pantalla / ventana, pero se pueden agregar más.

En la parte izquierda tenemos la Palette, donde están todos los elementos que podemos agregar a las pantallas de nuestra aplicación, algunos elementos tienen representación gráfica en la pantalla (por ejemplo los botones, imágenes, etiquetas de texto, etc.), otros elementos en cambio no serán visibles, pero sí que tendrán su efecto en la lógica de negocio de la aplicación.

TEMA 3 –Guía Básica

Los elementos están ordenados en diferentes categorías según su objetivo.

TEMA 3 –Guía Básica



En la categoría User Interface encontramos los controles clásicos que se utilizan para construir interfaces de usuario: botones imágenes, etiquetas de texto, campos de entrada de texto, etc.



En la categoría Layout encontramos unos elementos que sirven para definir la posición de los elementos en la pantalla, es decir sirven de guía para colocar nuevos elementos dentro de otros. Utilizamos los Layouts como elemento principal y dentro de ellos vamos introduciendo nuevos controles: botones, imágenes, etc. En el App Inventor el uso de los Layouts no es obligatorio



En la categoría Media encontramos elementos que trabajan con elementos multimedia: imagen, video y sonido.



En la categoría Drawing and Animation encontramos elementos para realizar animaciones gráficas.



En la categoría Sensor encontramos elementos que habilitan el acceso al hardware del dispositivo, sensores, GPS, cámara, 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 categoría Social encontramos elementos de comunicación social.



En la categoría Storage encontramos elementos que habilitan la gestión de datos, en ficheros y bases de datos.

TEMA 3 –Guía Básica



En la categoría Connectivity encontramos los elementos que permiten que nuestra aplicación se comunique con otros sistemas, vía Internet o Bluetooth.



En la categoría 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/enus/mindstorms/?domainredir=mindstorms.lego.com

Lego MindStorms

En la parte izquierda de la pantalla tenemos la sección Components y Properties. La sección Components nos muestra una lista con todos los componentes que hay en la aplicación, en este momento el único componente es la propia pantalla Secreen1, pero en el futuro tendremos más componentes, esta lista puede resultar muy útil para seleccionar componentes con precisión. La sección 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 parámetros asociados a la pantalla.

TEMA 3 –Guía Básica

Dependiendo del elemento seleccionado se mostrarán 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) Alineación Elemento visible o invisible Dimensiones: alto y ancho Etc.

En la parte superior de la pantalla tenemos una serie de acciones de configuración que permiten gestionar los proyectos, la conexión con dispositivos o emuladores y la generación de ficheros .apk con la aplicación que nosotros hemos diseñado (Los

TEMA 3 –Guía Básica

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

TEMA 3 –Guía Básica

Conectar un dispositivo Las aplicaciones desarrolladas se pueden probar sobre un dispositivo Android real (Sistema embebido, Teléfono, Tablet, etc.) o sobre un emulador que podemos instalar en cualquier ordenador. Si se dispone de un teléfono real siempre será la mejor opción, 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 aplicación en todos los dispositivos Android que queramos utilizar para probar las aplicaciones que desarrollemos, podemos descargar la aplicación desde el Google Play: https://play.google.com/store/apps/details?id=edu.mit.appinventor.aicompanion3&hl=es La aplicación se llama MIT AI2 Companion.

Ejecutamos la aplicación 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 aplicación AI2 Companion y conectamos el dispositivo Android por USB al PC. En la página Web seleccionamos Connect -> USB

TEMA 3 –Guía Básica

(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 rápidamente las aplicaciones en cualquier teléfono mediante un código, para obtener el código de nuestra aplicación, nos dirigimos a la Web y seleccionamos Connect -> AI Companion

Obtendremos un código QR y un código numérico que tenemos que introducir en la aplicación de nuestro dispositivo Android, (cualquiera de las dos opciones es válida). No se debe pulsar nunca el botón Cancel, esta ventana desaparecerá de forma automática cuando el dispositivo esté conectado al App inventor.

Accedemos a la aplicación del dispositivo móvil y pulsamos el botón Scan QR Code , o introducimos el código manualmente en el campo de texto y pulsamos Connect with code.

TEMA 3 –Guía Básica

Al introducir el código y pulsar en Connect with code, desaparecerá el mensaje de la página Web y nuestro dispositivo ya estará sincronizado, todos los cambios que realicemos en la editor web se verán reflejados en el dispositivo. Por ejemplo si arrastramos un Button desde la Palette hasta nuestra ventana veremos como aparece en la pantalla del dispositivo móvil.

TEMA 3 –Guía Básica

TEMA 3 –Guía Básica

TEMA 3 –Guía Básica

Utilizar el emulador del App Inventor Esta opción no suele ser muy recomendable, ya que el emulador es bastante lento, pero en algunos casos puede ser la opción más cómoda. Para conectar un emulador tenemos que descargar el instalador de la página de APP inventor http://appinventor.mit.edu/explore/ai2/setup-emulator.html .

Tenemos disponible instalables para diferentes sistemas operativos. El proceso de instalación del App Inventor Setup Installer es muy sencillo, se hace a través del asistente y apenas requiere unos minutos. Una vez instalado nos aparecerá un acceso directo en nuestra máquina para la aplicación aiStarter, (Si no aparece el acceso directo buscamos el programa en la ruta de instalación o el buscador de aplicaciones de Windows).

TEMA 3 –Guía Básica

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



Si en algún momento el aiStarter presenta problemas, cerrar la aplicación pulsando Control + C sobre la consola, nunca cerrar la aplicación de la ventana directamente, pues puede que realmente no mate el servicio.

Para probar el emulador volvemos a la página web y pulsamos el botón Connect -> Emulator.

Es muy importante asegurarse de que nuestro navegador Web y nuestra versión de Java están dentro de la lista de navegadores web compatibles con el App inventor. http://appinventor.mit.edu/explore/ai2/setup El proceso de inicialización del Emulador puede llevar varios minutos (Sobre todo la primera vez que se ejecuta).

TEMA 3 –Guía Básica

Probablemente el emulador necesite varios minutos para cargar el sistema:

TEMA 3 –Guía Básica

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 solución si no se dispone de un dispositivo físico 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 aplicación MIT AI2 Companion como si se tratara de un dispositivo real. En este caso como el dispositivo el emulador no tiene acceso a la cámara habrá que introducir los códigos 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 –Guía Básica

Ejemplo 1: Saludo Vamos a comenzar a utilizar el App Inventor para crear una aplicación muy básica que genere un saludo personalizado. Incluimos en la pantalla principal Screen1: un campo de entrada de texto (TextBox), una etiqueta textual (Label) y un botón (Button), para incluir los elementos tenemos que arrastrarlos desde la Palette Hasta el Viewer.

Podemos mover los elementos por la pantalla para variar su posición, solo tenemos que arrastrarlos por la pantalla manteniendo el botón derecho del ratón pulsado.

TEMA 3 –Guía Básica

Si queremos eliminar algún elemento tenemos que seleccionarlo y pulsar el botón Supr o borrar del teclado, para seleccionar un elemento puede resultarnos útil utilizar la vista de Components ya que en ocasiones puede resultar difícil seleccionar un elemento concreto en la pantalla (Sobre todo si hay muchos elementos).

TEMA 3 –Guía Básica

Por defecto el editor asigna nombres genéricos a los elementos que incluimos en la pantalla: Screen 1, TextBox1, Label1, Button1, para que resulte más fácil programar la lógica 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 cuestión y pulsar el botón que aparece en la parte inferior Rename.

A continuación modificamos el nombre de los elementos:   

TextBox – CajaTextoNombre Label1 – TextoSaludo Button1 – BotonSaludar

TEMA 3 –Guía Básica

A continuación 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 tamaño del texto a 20 (Propiedad FontSize).



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



Cambiamos la alineación 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 mínimo espacio posible para su representación.

TEMA 3 –Guía Básica

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

TEMA 3 –Guía Básica

Una vez hemos definido la interfaz de usuario de la aplicación es el momento de programar la lógica de negocio, para las labores de programación el App Inventor utiliza un editor de bloques, podemos acceder al editor de bloques pulsando sobre el botón Blocks situado en la parte superior derecha de la Web

. Podemos movernos entre el editor y el diseñador de bloques utilizando los botones Designer y Blocks.

TEMA 3 –Guía Básica

En la parte izquierda del editor de bloques tenemos una lista donde están todas las estructuras de programación que podemos utilizar (Built-in) y todos los componentes que tenemos en la pantalla (Screen1). Las estructuras de programación son un conjunto reducido de las estructuras de control clásicas de un lenguaje de programación.

TEMA 3 –Guía Básica

Al seleccionar cada una de las categorías 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 . además contiene bloques que permiten realizar evaluaciones y abrir / cerrar ventanas (Screens) y la aplicación. Consultar: http://appinventor.mit.edu/explore/ai2/support/blocks/control.html



Logic: contiene bloques para manejar los operadores lógicos y especificar condiciones / comparaciones. Consultar: http://appinventor.mit.edu/explore/ai2/support/blocks/logic.html



Math: contiene bloques para trabajar con elementos numéricos, estos elementos consisten principalmente en elementos de comparación y diferentes tipos de funciones matemáticas. 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 básicas sobre cadenas de texto: unión, evaluación reemplazos, etc.

TEMA 3 –Guía Básica

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 básicas con ellas. Consultar: http://appinventor.mit.edu/explore/ai2/support/blocks/lists.html



Colors: bloques que permiten realizar acciones relacionadas con la selección o definición 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), además contiene los bloques de acceso a los valores (get) y de modificación (set). (Los elementos de la categoría Variable se utilizan de manera habitual en la definición de la lógica 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 gestión 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 lógica de la aplicación tenemos que seleccionar los bloques y arrastrarlos hasta el área de diseño de la parte derecha de la pantalla. Los bloques que incluimos en la área de diseño definen el comportamiento de la aplicación.

TEMA 3 –Guía Básica

Los bloques se combinan entre sí (encajan como piezas de un puzzle, de esta forma pueden definir una lógica compleja para la aplicación.

Podemos asignar un comportamiento a la propia ventana (Screen) y también a los controles que hay sobre ella (botones, etiquetas, etc.). A continuación podemos realizar varias pruebas, encajando bloques de diferentes tipos para ver cómo se combinan (aunque de momento no tiene ningún funcionamiento “lógico”). Por ejemplo, a continuación mostramos la posible equivalencia entre dos funciones, primero en un lenguaje de programación tradicional y luego desde el editor de bloques:

TEMA 3 –Guía Básica

function procedimiento(){ var resultado = 10; if ( resultado == 10){ resultado = 15; } }

La forma de utilización es muy similar, el editor impide que podamos realizar combinaciones no permitidas ya que las piezas incompatibles no encajan entre sí. A continuación se presenta otro ejemplo donde se está realizando un bucle While. function procedimiento(){ var contador = 0; while ( contador < 10){ contador = contador + 1; } }

TEMA 3 –Guía Básica

Recurso: resumen de funcionamiento de estructuras de control en lenguajes de programación: 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 continuación Control + V (Pegar). Para comenzar a implementar la lógica de negocio de la aplicación vamos dejar el área de diseño totalmente vacía, eliminamos todos los controles en caso de que hubiera alguno, (Los bloques se eliminan arrastrándolos 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 botón BotonSaludar, para ello seleccionamos el botón en la lista de elementos de la parte izquierda. La funcionalidad asociada a la pulsación es la WhenBotonSaludar.Click do:

TEMA 3 –Guía Básica

Permite definir qué queremos que ocurra cuando el usuario realiza un Click (pulsación estándar) sobre el botón 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 –Guía Básica

Arrastramos el bloque al espacio de diseño, pero aun no realizamos ningún tipo de conexión. 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” (También de tipo Text) y el valor del texto de la CajaTextoNombre. El bloque que permite definir texto literal es:

TEMA 3 –Guía Básica

Concatenación de cadenas (Join):

Ahora solo falta asignar la concatenación 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 –Guía Básica

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

Con esto finalizamos la implementación de la lógica del botón BotonSaludar y podemos probar la aplicación en el dispositivo. Hay que asegurarse de que la conexión con el dispositivo Android sigue “activa”. En caso de que el teléfono no se haya actualizado con la última versión de la aplicación lo más recomendable es resetear la conexión y repetir el proceso de emparejamiento (AI Companion o Emulator).

La aplicación desplegada ya debería de ser totalmente funcional.

TEMA 3 –Guía Básica

Ejemplo 2: Responde la pregunta La segunda aplicación que vamos a implementar va a solicitar al usuario que realice una suma (con números 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 categoría Layout) , de esta forma podemos incluir elementos en horizontal.

TEMA 3 –Guía Básica

Sobre el HorizontalArrangement vamos a incluir 3 elementos de tipo Label: la primera será el número 1 de la suma la segunda el signo “`+” y la tercera el número 2.

Modificamos los nombres de las Label y también su: contenido (Text), tamaño de texto (Font Size).

TEMA 3 –Guía Básica

En la parte baja de la pantalla (a continuación 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 diseño 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 botón Add Screen, a continuación 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 –Guía Básica

Automáticamente el editor nos dirige a la nueva pantalla “correcto”, pero podemos movernos entre todas las pantallas de nuestra aplicación 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 definición de las interfaces gráficas queda definir la lógica de negocio, lo haremos desde el editor de Bloques.

TEMA 3 –Guía Básica

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

La lógica será simple: cuando se inicializa la pantalla introducimos dos números aleatorios en las Labels num1 y num2 Para asignar lógica 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 –Guía Básica

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 numérico aleatorio a la etiqueta, para ello vamos a utilizar el bloque random integer que podemos encontrar dentro de la categoría Math. Este bloque permite elegir cual es el rango a utilizar en la generación de los números aleatorios, podemos establecer un rango de 1 a 10.

TEMA 3 –Guía Básica

Repetimos la misma operación para la label num2.

TEMA 3 –Guía Básica

A continuación implementaremos la lógica del botón (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 botón vamos a realizar una comprobación, para ello seleccionamos el bloque if then que está dentro de la categoría Control.

TEMA 3 –Guía Básica

Dentro de la parte del if, estableceremos la condición, 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 comprobación matemática utilizamos el bloque de comparación localizado en la categoría Math.

TEMA 3 –Guía Básica

El primer parámetro que incluiremos en la comparación será el contenido textual del elemento Respuesta, seleccionamos el elemento Respuesta y posteriormente el bloque Respuesta.Text .

TEMA 3 –Guía Básica

El segundo factor de la comparación será la suma de num1 + num2, todas las operaciones matemáticas se encuentran en la categoría Math.

TEMA 3 –Guía Básica

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 operación con el elemento num2 y lo colocamos en segundo lugar.

TEMA 3 –Guía Básica

Si se cumple la condición expresada en el if se ejecutará la lógica de negocio introducida en la parte del then, cuando se cumpla la condición queremos que la aplicación pase de la pantalla “Screen1” a la pantalla “correcto”. En la categoría 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 categoría Text.

TEMA 3 –Guía Básica

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 lógica de negocio de la pantalla Screen1, pero aún falta por incluir la lógica de negocio del botón que tenemos en la pantalla “correcto”, al pulsar este botón queremos que la aplicación vuelva a la pantalla Screen1. Para incluir lógica de negocio en otra pantalla la seleccionamos en el menú desplegable.

TEMA 3 –Guía Básica

El procedimiento para incluir la lógica de negocio en el botón BotonVolver de la ventana “correcto” es prácticamente el mismo que realizamos en la ventana anterior, aunque en este caso no será necesario realizar ninguna comprobación antes de redirigir la aplicación hacia otra ventana. Seleccionamos el BotonVolver e incluimos el bloque When BotonVolver.Click. Dentro del bloque incluimos el elemento open another screen screenName continuación le agregamos el texto literal con el nombre de la ventana “Screen1”.

y a

Con esto hemos finalizado el desarrollo de la aplicación y está ya es completamente funcional. Hay que colocar la aplicación en la pantalla “Screen1” para poder comenzar a ejecutar de forma lógica la aplicación.

TEMA 3 –Guía Básica

Ejemplo 3: Sensor y notificación 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 vehículo encima o no, y por lo tanto puede saber si la plaza está ocupada o libre, un sistema de este tipo tendría varios dispositivos embebidos distribuidos por toda la ciudad, cada uno monitorizaría una plaza de parking o varias en función del número de sensores que maneje el dispositivo. Un sistema de este tipo necesita también un servidor centralizado que se ocuparía de recolectar toda la información de las plazas ocupadas o libres, este servidor centralizado podría ofrecer servicios a los ciudadanos para indicarles que plazas libres hay cerca de su posición.

Los dispositivo embebidos en un sistema de este tipo necesitan utilizar un sensor para detectar los vehículos, por ejemplo un sensor de luz, de posición, presencia o de presión. En este ejemplo vamos a implementar el software de los dispositivos utilizando el sensor de aceleración/posición del teléfono, supondremos que hemos instalado un pequeño sensor que detecta si el vehículo está sobre la plaza o no, en función de esa medición la aplicación enviara la información al sistema centralizado (a través de un servicio Web), indicándole que la plaza está libre / ocupada.

TEMA 3 –Guía Básica

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 medición actual del sensor acelerómetro, 2 ) si el valor asignado a la medición actual determina que la plaza está ocupada / libre. Personalizamos las propiedades de los dos Labels, (Nombre del elemento, ancho y tamaño de texto). A continuación vamos a incluir el elemento que permite obtener las mediciones de los sensores de aceleración del dispositivo, buscamos el elemento AccelerometerSensor (que se encuentra en la categoría Sensors) y lo arrastramos a la pantalla.

TEMA 3 –Guía Básica

Este elemento no tiene representación gráfica en la pantalla, se limita a obtener los datos del sensor de aceleración. Normalmente los dispositivos pueden tener muchos otros sensores: luz, proximidad, giroscopio, campo magnético, etc, pero por el momento la herramienta APP Inventor solo soporta un pequeño conjunto de ellos. Aunque el elemento no tenga representación gráfica puede ser utilizado para definir la lógica de negocio de la aplicación. El siguiente elemento que tenemos que incluir es el elemento Web (dentro de la categoría Connectivity), que permite realizar peticiones a páginas Web, en este caso nuestra aplicación va a enviar peticiones a un servidor Web externo cuando detecte que la plaza está libre / ocupada. Añadimos el elemento Web a la pantalla, al igual que en el caso anterior el elemento tampoco tiene representación gráfica.

TEMA 3 –Guía Básica

El aspecto final del editor deberá ser similar al siguiente:

TEMA 3 –Guía Básica

Nos dirigimos al editor de bloques para implementar la lógica de la aplicación que consiste en: 

Asignamos un identificador a nuestra plaza (un número largo y aleatorio: por ejemplo 3412312) para que no coincida con los identificadores de otros alumnos.



Monitorizar el sensor de aceleración (aceleración en el eje X)



En todo momento vamos a colocar la medición del sensor de aceleración eje (X) en la Label EtiquetaMediciónAcelerometro



Si la aceleración en el eje X supera las 5 unidades enviamos una petición al servicio Web http://www.parking.mderg.com/actualizarplazag.php indicando que la plaza está ocupada



Si la aceleración está por debajo de las 0 unidades enviamos una petición 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 vacía, este servicio recibe dos parámetros:

TEMA 3 –Guía Básica

i o

Identificador numérico de la plaza 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 visión Global de la ocupación de las plazas se puede ver en la página: http://www.parking.mderg.com/plazas.php de esta forma podremos comprobar si nuestra aplicación está funcionando correctamente. Comenzamos a implementar la lógica de negocio de la aplicación. Creamos una variable global y le asignamos el identificador numérico aleatorio de nuestra plaza. Para incluir variables globales hay que seleccionar el bloque Variables -> Intialize global.

TEMA 3 –Guía Básica

Le asignamos un valor numérico Math -> valor númerico.

.

El resultado será el siguiente:

Pulsamos sobre el AccelerometerSensor y seleccionamos el bloque AccelerometerSensor.AccelerationChanged , que detecta cuando el sensor de aceleración cambia su posición:

TEMA 3 –Guía Básica

Asignamos a la Label EtiquetaMediciónAcelerometro la medición del eje X. Seleccionamos la etiqueta e incluimos el bloque set EtiquetaMediciónAcelerometro.Text

TEMA 3 –Guía Básica

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 categoría Variables.

TEMA 3 –Guía Básica

A partir de este momento podemos probar la aplicación en el dispositivo y veremos como la label EtiquetaMedicionAcelerometro actualiza su valor cuando movemos el teléfono. El siguiente paso en la implementación de la lógica de negocio consiste en ver si el xAccel supera las 5 unidades, para enviar una petición Web indicando que la plaza está ocupada, para realizar la comprobación utilizamos el bloque if then que se encuentra dentro de la categoría Control.

TEMA 3 –Guía Básica

La condición se incluye en la primera parte del if, en este caso consistirá en una comprobación matemática, el bloque de comprobación matemática de dos números se encuentran en la categoría Math.

TEMA 3 –Guía Básica

Seleccionamos el combo para cambiar el tipo de comprobación de = a 5 . Para ello le vamos a ampliar el bloque if añadiéndole un caso “else”, es decir si no se cumple la condición (xAccel < 5) . Pulsamos sobre las opciones de configuración del bloque if else.

y añadimos un bloque

A continuación incluimos toda la lógica de negocio dentro del bloque else ( es prácticamente idéntica a la que incluimos en el bloque else, excepto por dos diferencias: 1) El valor al parámetro “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 –Guía Básica

Ahora podemos probar la aplicación y comprobar que el estado de la plaza varía en función de la medición 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 condición a xAccel < 0. *Nota2 en caso de usar un emulador lo más probable es que no se disponga de sensor de aceleración y que siempre retorne el valor 0, para poder probar la aplicación se recomienda utilizar un generador de números aleatorios como se explica a continuación. Clock y Generación de números aleatorios Abrimos el editor en modo Designer e incluimos un elemento de tipo Clock , que está situado dentro de la categoría Sensors.

TEMA 3 –Guía Básica

El elemento Clock no tiene representación 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 lógica de negocio para hacer que cada segundo (1000 milisegundos – Ciclo de Reloj) se genere un número aleatorio, que emulara la medición del sensor.

TEMA 3 –Guía Básica

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

Este bloque sirve para especificar que lógica 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 categoría Variables.

TEMA 3 –Guía Básica

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 categoría Math. Estabelcemos un rango de -10 a 10.

Finalmente movemos el contenido del bloque When AccelerometerSensor1 .AccelerationChanged al bloque whenClock1.Timer.

TEMA 3 –Guía Básica

El resultado sera el siguiente:

Cada segundo se creara un numero aletorio que se almacenará en la variable local xAccel, en funcion de ese número aletorio se enviara la petición al servicio web, indicando que la plaza esta ocupada o libre.

TEMA 3 –Guía Básica

Generar Apks Las aplicaciones de Android se distribuyen como ficheros .apk que se instalan en los dispositivos móviles, para generar el fichero apk de una aplicación hay que pulsar sobre la opción Connect y App (save .apk to my computer).

TEMA 3 –Guía Básica

Recursos Tutoriales 1 http://beta.appinventor.mit.edu/learn/tutorials/ Tutoriales 2 http://appinventor.mit.edu/explore/ai2/tutorials Documentación http://appinventor.mit.edu/explore/library Documentación tipos de bloques http://appinventor.mit.edu/explore/ai2/support/blocks.html Peticiones Web avanzadas http://www.appinventorblocks.com/appinventor-tutorials-tips/appinventor-webcomponent-json-response Sistemas embebidos Android http://www.liquidware.com/category/Android

TEMA 3 –Guía Básica