Aplicaciones

móviles con App Inventor 2

CEP “Luisa Revuelta” de Córdoba. Curso 2016/17

Práctica 1 Variables (I)

Expresado de forma coloquial, podemos afirmar que una variable es un “contenedor” que se
utiliza para almacenar datos (numéricos o alfanuméricos). Las variables se crean asignándoles un
nombre y pueden alojar un dato o un conjunto de datos (listas o tablas).

Por ejemplo, para crear la Variable de nombre “Control” en App Inventor utilizamos la etiqueta

el la que estamos indicando que almacene inicialmente el valor “0”.

Si posteriormente deseamos almacenar otro valor en dicha variable, utilizaremos la etiqueta:

Así, si quisiéramos almacenar el valor “1” construiríamos el bloque:

Un uso frecuente de las variables es el de “contar” el número de veces que ocurre un evento (en el
caso del juego del frontón podría ser el número de veces que la “bola” colisiona con la “pala”).
El siguiente bloque establece que cada vez que hagamos clic sobre el botón “Continuar” la variable
“numero_de_veces” incremente en una unidad su valor:

Utilizamos la etiqueta “poner” para “almacenar” una valor en la variable, y “tomar” para “leer” el
valor almacenado en dicha variable.
Es decir, la variable “numero_de_veces” almacenará el número de veces que hemos pulsado el
botón “Continuar”.

EJEMPLO 1. CONTADOR DE PULSACIONES SOBRE UN BOTÓN
Para aplicar lo explicado anteriormente vamos a crear una aplicación que nos muestre en pantalla
el número de veces que pulsamos un botón.

Como vimos en la práctica del Traductor el componente “CampoDeTexto” se utiliza para
introducir datos (numéricos o alfanuméricos) en una aplicación, aunque no es el único
componente que realiza esta función (Deslizador, SelectorDeHora, etc).

El componente “Etiqueta” se utiliza para mostrar información o resultados. Tiene el inconveniente
de que el texto es plano , permitiendo tan solo definir el tamaño, negrita, cursiva, color y posición.
Dicha configuración se aplica a todo el texto de la “Etiqueta”.

Autor: Antonio Ruiz Murcia (IES Blas Infante) 1

 Aplicaciones móviles con App Inventor 2
CEP “Luisa Revuelta” de Córdoba. Curso 2016/17

1. Comenzamos un proyecto nuevo de nombre: “Contador”

2. Añadimos los siguientes componentes:

Componentes Propiedades
DisposiciónHorizontal • DispHorizontal: Centro
• DispoVertical: Centro
• ColorDeFondo: Negro
• Ancho: Ajustar al contenedor…
Botón1 Texto: Pulsar
Etiqueta1 • Negrita: activado
• Tamaño de letra: 20
• Texto: (en blanco)
• ColorDETexto: Verde

3. En el Editor de Bloques programamos los componentes.
• Creamos la variable “contador” con el valor inicial “0”
• En la Etiqueta1 mostraremos el texto “Pulsaciones: ” y el valor almacenado en la variable
“contador” (“tomar global contador”)
• Para unir ambos textos utilizamos la etiqueta “unir” que se encuentra dentro del apartado
Texto. Al hacer clic sobre el símbolo que aparece en la parte izquierda de la etiqueta, se
despliega una ventana que me permite añadir más cadenas para unir 2, 3 ó más textos.

El resultado sería como se muestra en la imagen:

Autor: Antonio Ruiz Murcia (IES Blas Infante) 2

 Aplicaciones móviles con App Inventor 2
CEP “Luisa Revuelta” de Córdoba. Curso 2016/17

4. Comprobamos el funcionamiento con MIT AI2 Companion.
Conectamos nuestro dispositivo móvil con App Inventor 2. Si funciona correctamente Guardamos
el proyecto.

ACTIVIDAD 1:
Modificar la aplicación del Frontón para que “cuente” el número de veces seguidas que la Pelota y
la Pala colisionan. El resultado se debe mostrar dentro de la Disposición Horizontal, al lado del
botón “Empezar”. La etiqueta debe contener el texto: “Puntos: “. Los puntos se reiniciarán a 0 cada
vez que pulsemos el botón “Empezar”

EJEMPLO 2. AÑADIENDO EFECTOS DE SONIDO
Continuando con el ejemplo 1, nos planteamos que suene un sonido cada vez que pulsamos el
botón “Pulsa”. Además, queremos poder desactivar esta opción desde la propia aplicación.

En primer lugar subiremos a App Inventor el archivo “Pop.wav” que contiene el efecto de sonido.
También necesitaremos un componente que reproduzca el sonido dentro de la aplicación. App
Inventor nos ofrece los componente Reproductor y Sonido. El primero se debe utilizar para
sonidos de larga duración (una canción, por ejemplo) mientra que “Sonido” es más adecuado para
sonidos de corta duración (efectos sonoros). Ambos componentes se encuentran en el apartado de
Medios. En nuestro caso procede añadir el componente “Sonido1” (no visible).

Para activar y desactivar el Sonido añadiremos también el componente “CasillaDeVerificación”.
Se utiliza para activar o desactivar un evento cuando se hace clic sobre ella. Este componente es
visible y los colocaremos a la izquierda del botón “Pulsar” (dentro de la Disposición Horizontal).

Las Propiedades son las siguientes:

Componentes Propiedades
Sonido1 Origen: Pop:wav
CasillaDeVerificación1 • Texto: Sonido
• ColorDeTexto: Blanco

Desde el componente Sonido también se pude controlar la vibración del dispositivo móvil (si tiene
esta característica).
La propiedad IntervaloMínimo indica el tiempo mínimo (en milisegundos) que debe transcurrir
entre dos reproducciones de sonidos consecutivas.

Autor: Antonio Ruiz Murcia (IES Blas Infante) 3

 Aplicaciones móviles con App Inventor 2
CEP “Luisa Revuelta” de Córdoba. Curso 2016/17
Programación de componentes
Al igual que hicimos en la actividad 4 del juego del frontón, utilizaremos la etiqueta “Si …
entonces …” del apartado “Control”. En este caso, si la casilla de verificación está “Verificado” (es
decir, el sonido activado), indicaremos que se reproduzca el sonido con la etiqueta “llamar
Sonido1.Reproducir”.

Comprobamos el funcionamiento y Guardamos
Conectamos nuestro dispositivo móvil con App Inventor 2


ACTIVIDAD 2:
Modificar la aplicación del Frontón para que se reproduzca el sonido Pop:wav cada vez que la
Pelota y la Pala colisionen. Añadir una casilla de verificación para activar/desactivar el sonido.

Autor: Antonio Ruiz Murcia (IES Blas Infante) 4