PDF de programación - Básicos APPInventor - Manual de Introducción

BÁSICOS APP INVENTOR



Manual de Introducción a AppInventor











Contenido

1.

¿Qué es AppInventor? ................................................................................................................... 2

2.

3.

¿Qué tipo de aplicaciones pueden crearse con AppInventor? ...................................................... 3

¿Cómo se construye una aplicación en AppInventor? ................................................................... 4

3.1. Componentes .............................................................................................................................. 5

3.2. Comportamiento ......................................................................................................................... 6

3.2.1.

Eventos .................................................................................................................................... 9

3.2.2. Manejadores de Eventos ....................................................................................................... 13

4. Requisitos Previos ........................................................................................................................ 15

5.

El Entorno de Desarrollo .............................................................................................................. 17

5.1. Diseñando los Componentes .................................................................................................... 19

5.2. Añadiendo Comportamientos ................................................................................................... 21

6. Referencias ................................................................................................................................... 24



1





1. ¿Qué es AppInventor?



AppInventor es una aplicación web de Google que permite crear aplicaciones para el sistema

operativo de dispositivos móviles Android. Utiliza un editor Drag and Drop (Arrastrar y soltar) para

la generación de interfaces gráficas y un sistema de bloques para gestionar el comportamiento de la

aplicación. Los proyectos generados a través de esta herramienta se almacenan automáticamente

en los servidores de App Inventor, permitiendo llevar en todo momento un seguimiento y control

de todo nuestro trabajo.



Figura 1. Visión global de AppInventor

La principal característica de AppInventor es que no es necesario tener ningún conocimiento

de programación para desarrollar las aplicaciones. Simplemente basta con disponer de un

navegador web y una cuenta de usuario de Google.

2






2. ¿Qué tipo de aplicaciones pueden crearse con AppInventor?



AppInventor ofrece un amplio abanico de posibilidades para los desarrolladores:

Juegos

Puede crearse juegos sencillos haciendo uso incluso del acelerómetro incluido en el

dispositivo móvil.

Aplicaciones educativas

Es posible desarrollar aplicaciones útiles para educación, como por ejemplo tests de

respuestas múltiples o preguntas directas.

Aplicaciones de geolocalización

Puede hacerse uso del dispositivo GPS incluido en el móvil para crear aplicaciones de

geolocalización.

Aplicaciones multimedia complejas

Pueden crearse aplicaciones que van desde reconocimiento de códigos de barras hasta

reproducir vídeos y música o tomar fotografías.

Aplicaciones orientadas a la Web

Pueden desarrollarse aplicaciones que se comuniquen con la web (Twitter, RSS, etc.).

3





3. ¿Cómo se construye una aplicación en AppInventor?



Las aplicaciones construidas mediante AppInventor están compuestas por los elementos que se
muestran en el siguiente diagrama:


Figura 2. Arquitectura interna de una aplicación creada con AppInventor



Una buena manera de entender una aplicación, es descomponerla en dos partes, por un

lado los componentes y por otro los comportamientos.



4





3.1. Componentes


Hay dos tipos de componentes principales en cualquier aplicación: los visibles y los no visibles.



Los componentes visibles son aquellos que podemos ver una vez hemos ejecutado nuestra

aplicación (botones, cajas de texto, etiquetas, etc.). El conjunto de estos elementos se denomina

comúnmente como la interfaz de usuario de la aplicación.

Por otro lado, los componentes no visibles son aquellos que no podemos ver en la

aplicación, ya que no son parte de la interfaz de usuario. Proporcionan acceso a la funcionalidad

interna de los dispositivos; por ejemplo, el componente Texting permite enviar y procesar mensajes

de texto, y el componente LocationSensor permite determinar la localización del dispositivo.

Ambos componentes están definidos mediante una serie de propiedades. Las propiedades son

fragmentos de memoria que permiten almacenar información relativa al componente al que

referencian. Los componentes visibles, por ejemplo, disponen de propiedades relativas a su

posición, altura y anchura, y alineación, que definen conjuntamente su aspecto dentro de la

aplicación global. Todas estas propiedades se definen dentro del diseñador de componentes de

AppInventor.



5





Figura 3. Ejemplo de un componente y sus propiedades

3.2. Comportamiento

El comportamiento define como una aplicación debe responder ante una serie de eventos, los

producidos por la interacción del usuario (un clic de botón) y los externos (un SMS recibido en

nuestro dispositivo). En este punto es donde reside la mayor complejidad en el desarrollo de

aplicaciones. Afortunadamente, AppInventor proporciona un lenguaje visual de bloques que nos

permite definir comportamientos de una forma muy precisa.

Normalmente, podemos identificar el desarrollo de aplicaciones con la elaboración de una “receta”,

es decir, siguiendo una secuencia lineal de instrucciones.



6





Sin embargo, la mayoría de las aplicaciones actuales, no cumple estrictamente este tipo de

paradigma. No se ejecutan una serie de instrucciones en un orden predeterminado, sino que, la

aplicación reacciona a una serie de eventos, normalmente iniciados por el usuario final de la

aplicación. Por ejemplo, si el usuario hace clic sobre un botón, la aplicación responde realizando

alguna operación (enviar un mensaje de texto, confirmar una determinada operación, etc.).

Este tipo de aplicaciones se pueden interpretar como un conjunto de componentes que reaccionan

ante unos determinados eventos. Las aplicaciones incluyen una serie de “recetas” (secuencias de

instrucciones), las cuales se ejecutan cuando se producen los eventos asociados a las mismas.



Figura 4. Ejemplo secuencial de eventos e operaciones

La mayoría de los eventos son generados por el usuario final de la aplicación, salvo en algunos

casos. Una aplicación puede reaccionar a eventos que suceden en el propio dispositivo, como por

ejemplo: cambios en el sensor de orientación, eventos generados en otros dispositivos, datos que

llegan desde la web, etc.



7





Figura 5. Una aplicación puede responder tanto a eventos internos, externos o generador
por el usuario.

El motivo principal por el cual podemos afirmar que las aplicaciones desarrolladas mediante

AppInventor son intuitivas, es porque están basadas en el paradigma evento-respuesta.



8





3.2.1.

Eventos

A continuación, explicaremos brevemente

los diferentes tipos de eventos que pueden

desencadenar diferentes acciones en este tipo de aplicaciones.



Tipo de Evento

Ejemplo

Evento iniciado por el usuario

Cuando el usuario hace clic en el boton_1, hacer...

Evento de inicialización

Cuando la aplicación se inicia, hacer...

Evento de temporización

Cuando han pasado 20 milisegundos, hacer...

Evento de animación

Cuando dos objetos colisionan, hacer...

Evento externo

Cuando el teléfono recibe un SMS, hacer...



Eventos iniciados por el usuario


Son el tipo más común de eventos. Reflejan la interacción del usuario final con la aplicación. Por

ejemplo, en la siguiente figura podemos observar como se ha definido que cuando el usuario hace

click sobre el botón “SpeakItButton” se reproduce oralmente el contenido escrito en la caja de texto

“TextBox1”.



Figura 6. Ejemplo de evento iniciado por la interacción del usuario

9





Eventos de inicialización


En algunas ocasiones nuestras aplicaciones requieren realizar ciertas funciones en el momento en el

que se inician. AppInventor considera este inicio de la aplicación como un evento.

En el siguiente ejemplo, podemos observar como en e