Laboratorio de Electrónica

Práctica 5: Creación de un contador de clicks y un simulador de ruleta para celular a

partir del desarrollo de aplicaciones en MIT app inventor
Andrea Guadalupe Martínez Ortiz
Diana Sánchez Barrios
Luis Amilli Zárate Calatayud
Gonzalo Natael Hernández Canul

Resumen
A través de la página web https://appinventor.mit.edu/ se creó una aplicación para Android capaz de
contar la cantidad de veces que fue presionado un botón. También se se creó una aplicación en la que el usuario
podía hacer girar una ruleta virtual. Esta aplicación se programó para que la velocidad de la ruleta aumentara
en el tiempo en que el usuario dejaba presionado un botón y la ruleta comenzara a detenerse cuando el usuario
soltaba el botón. [1]

Introducción
MIT App Inventor
Es una plataforma de desarrollo de aplicaciones móviles para Android del Instituto Tecnológico de Massa-
chusetts(MIT).Con ella se pueden hacer aplicaciones con alto nivel de complejidad de forma simple. Una vez
desarrolladas las aplicaciones, pueden exportarse y ejecutarse en dispositivos móviles que cuenten con sistema
operativo Android. En si, App Inventor es un lenguaje de programación basado en bloques que a simple viste
lucen como piezas de un juego de construcción y orientado a eventos. Sirve para indicarle al cerebro del dis-
positivo móvil qué queremos que haga, y cómo. Es por supuesto muy conveniente disponer de un dispositivo
Android donde probar los programas según los vamos escribiendo.

Diseñar una aplicación en App Inventor

Para crear una aplicación con App inventor, debemos diseñar conjuntamente la pantalla de interfaz con
el usuario y el código que le dirá a la aplicación qué instrucciones seguir. Lo primero se realiza mediante la
pestaña Designer y lo segundo, mediante la pestaña Blocks.
En Designer se decide qué aparecerá en la pantalla del celular en cuanto el usuario abra la aplicación y qué
sensores o aditamentos del teléfono se utilizarán para el funcionamiento de la app. El aspecto de esta pestaña
se muestra en la Figura 1.
Para añadir un componente a la aplicación, debemos arrastrar su ícono de la columna de la izquierda
(Palette) a la pantalla en blanco que aparece en el centro (Viewer). En esta práctica se utilizaron: el sensor
Clock, los elementos Canvas y Ball de las herramientas de dibujo y animación, así como un botón (Button) y
una etiqueta (Label) para la interfaz con el usuario. Además, se utilizaron arreglos del Layout para presentar los
componentes de una forma más ordenada. Más adelante, en la sección de Desarrollo Experimental se explicará
a detalle qué componentes se utilizaron en cada programa.
En la columna Properties se pueden ajustar las características de cada uno de los componentes. Por ejemplo,
aquí puede editarse el texto inicial que aparece en una etiqueta o en un botón. Pueden ajustarse los tamaños,
posiciones y colores de las bolas que aparecen en el lienzo de animación. Así como la disposición de cada uno
de los componentes que aparecen en la pantalla mediante el uso de los Layouts.
Finalmente, en la columna Components, puede verse una lista de los componentes utilizados en la aplica-
ción.

1
 Figura 1: Aspecto de la pestaña Designer de la aplicación web MIT App Inventor.

En Blocks, creamos el programa en el cual indicamos las instrucciones que efectuará la aplicación. Una
captura de cómo se ve esta pestaña puede apreciarse en la Figura 2.
El nombre de esta pestaña se debe a que la programación se hace por medio de fragmentos de colores (fun-
ciones) que se ensamblan unos con otros como piezas de un rompecabezas, formando bloques. La ejecución
de los bloques se detona por eventos, es decir, por acciones que ocurran con los componentes declarados en
Design.
En la columna de la izquierda, vemos una lista de categorías de funciones. Aparece una lista Built-in con
distintas clases de funciones incluidas en el App Inventor, así como distintas listas de funciones asociadas a
cada uno de los componentes utilizados. Si damos un click en cada una de estas categorías, se despliega una
lista de piezas y bloques (funciones) que podemos arrastrar hacia el lienzo de Viewer, para embonarlas unas
con otras.

Figura 2: Aspecto de la pestaña Blocks de la aplicación web MIT App Inventor.

Hay que cuidar que las piezas ensambladas o los valores introducidos a las funciones, sean los espera-
dos, para no tener errores en el programa. En caso de que existan estos errores, aparecerán en donde se lee
Show Warnings.

2
 Más adelante, en la sección de Desarrollo experimental, se detallarán los bloques construidos y las funcio-
nes utilizadas en cada uno de los programas.

Desarrollo experimental
Materiales
Pagina web MIT app invetor y aplicacion para sistema operativo android.

Telefono con sistema operativo android.

Programa 1: Contador de clicks

Primero se insertó un botón en la pantalla principal de la aplicación y una etiqueta de texto. Al botón,
declarado como Button1 se le colocó encima el texto AUMENTAR CONTADOR. La etiqueta se insertó en el
centro de la pantalla y se configuró para mostrar inicialmente el valor 0. La disposición de la pantalla creada
se muestra en la Figura 3.

Figura 3: Disposición de la pantalla mostrada al usuario en la aplicación de contador de clicks. Esta es la distribución de
elementos que el usuario ve en la pantalla de su teléfono justo al iniciar la aplicación.

Después se realizó la programación por bloques como se muestra en la Figura 4. Primero se inicializó la
variable contador en 0 y luego se estableció una estructura condicional en forma de un bloque de comandos.
El bloque de código se ejecutaba si el botón con texto AUMENTAR CONTADOR se presionaba, aumentando
consecuentemente la variable contador en 1 unidad y cambiando la etiqueta central de la pantalla para mostrar
el nuevo valor de contador. Además, el fondo de la pantalla cambiaba a un color aleatorio cada vez que se
apretaba dicho botón.

3
Figura 4: La programación de la aplicación de contador de clicks se realizó ensamblando los siguientes bloques estruc-
turales.

Programa 2: Simulador de ruleta

Se comenzó el desarrollo de esta aplicación con la construcción gráfica de una ruleta virtual; paro ello,
en el menú de diseñador de la pantalla de usuario, se insertaron 12 círculos de color negro separados entre
sí la misma distancia y acomodados formando una circunferencia, como se muestra en la Figura 5. Luego, al
círculo central superior de la figura se le cambió color a rojo. El efecto de hacer girar la ruleta se realiza en
esta aplicación cambiando progresivamente cuál de los círculos se colorea de rojo. Se colocó también un botón,
que se inicializó con el nombre Button1 y se le colocó el texto Girar ruleta!. Además, se configuró el reloj del
teléfono para estar disponible para la aplicación, pues, como se explicará más adelante, el programa emplea
su función de temporizador.

Figura 5: Disposición de la pantalla mostrada al usuario en la aplicación de la ruleta. Esta es la distribución de elementos
que el usuario ve en la pantalla de su teléfono justo al iniciar la aplicación.

Después se realizó la programación de bloques. El código se basa en activar el temporizador del reloj cuan-
do se comienza a presionar el botón para posteriormente dar un giro a la ruleta cada vez que se cumple el
intervalo de tiempo indicado. Además, tras cada giro, si el botón sigue presionado, el temporizador reducirá
su intervalo de tiempo, produciendo giros más rápidos. Por otra parte, cuando el botón se suelta, el tem-
porizador va regresando paulatinamente a su intervalo de tiempo original, logrando el efecto visual de que
la ruleta vaya frenándose, como si se tratara de una ruleta real que disminuye su velocidad debido a la fricción.

Se crearon tres funciones para facilitar el desarrollo del código. Su programación mediante bloques estruc-
turales gráficos se muestra en la Figura 6. La función all_balls_black establece el color de todos los círculos
en la pantalla en negro y es empleada en la función spin para cambiar la bola roja actual por la siguiente de

4
acuerdo al sentido de las manecillas del reloj. La lógica de esa función es, cuando se invoca, verificar cuál de
las bolas es roja actualmente, luego poner todas las bolas en color negro y posteriormente colorear la siguiente
bola en rojo. La función timeInterval_fraction_decrease_function, cuya definición se muestra en la parte inferior
de la Figura 6, corresponde simplemente a la función matemática
9x
f (x) = 1 −
50 + 10x
En el programa se usó dicha función para controlar la fracción de reducción f (x) por la que se multiplicaría
al intervalo de tiempo del temporizador para reducirlo después del x-ésimo doceavo de giro. Se empleo esta
función porque así, en las primeras fracciones de giro realizadas, el intervalo de tiempo del temporizador es
casi como el original, pero a medida que la ruleta avanza, el intervalo de tiempo tiende asintóticamente a un
décimo del original.

Figura 6: Estas son las definiciones de las funciones empleadas en el programa principal de la aplicación simuladora de
una ruleta.

Para el programa principal se inicializaron las variables pressed = false, original_TimeInterval = 200, contador =

5
0 y timeInterval_fraction = 1. La primera se usó para llevar registro de cuando el botón se estuviera presiona-
do, la segunda corresponde al intervalo de tiempo original del temporizador (en milisegundos), la tercera se
empleó para contar cada doceavo de giro que la ruleta daría cuando se dejara presionado el botón y la última
indicaba la fracción de reducción por la que se multiplicaría al intervalo de tiempo para reducirlo. Como se
muestra en la Figura 7, el programa principal consta de 3 estructuras condicionales. La primera de ellas se
ejecuta apenas el usuario toque el botón. Cuando eso ocurre, el temporizador del reloj del teléfono se habili-
ta y la variable pressed se cambia a true. Luego, mientras el usuario siga presionando el botón, cada vez que
transcurra el intervalo de tiempo establecido, se llevan a cabo las siguientes acciones:

1. Se ejecuta la función girar, haciendo avanzar a la ruleta un doceavo de vuelta.

2. Se incrementa el contador en 1 unidad (si es menor a 250).

3. Se evalúa la función timeInterval_fraction_decrease_function en el contador para obtener una nueva frac-

ción de decrecimiento.

4. Se multiplica al intervalo de tiempo original por dicha fracción, reduciéndolo.

De esta forma, la función girar se ejecutará más pronto la próxima vez, produciendo el efecto deseado de
que el usuario consiga hacer girar cada vez más rápido la ruleta al dejar presionado el botón. Por otro lado,
cuando el usuario suelta el botón, la variable pressed cambia a false; la secuencia de pasos que hacían aumentar
la velocidad de giro de la ruleta se dejan de ejecutar y en su lugar se realiza la siguiente serie se acciones
mientras el contador es mayor 0:

1. Se ejecuta la función girar, haciendo avanzar a la ruleta un doceavo de vuelta.

2. Se disminuye el contador en 1 unidad.

3. Se evalúa la función timeInterval_fraction_decrease_function en el contador para obtener una nueva frac-

ción. Nótese que en este caso cada fracción es mayor a la anterior.

4. Se multiplica al intervalo de tiempo original por dicha fracción, aumentando el intervalo de tiempo
actual.

De esta forma, la función girar tardará más en ejecutarse en la próxima ocasión, produciendo el efecto deseado
de que la ruleta empiece a detenerse cuando el usuario deja de presionar el botón. Una vez que el contador
llega a 0, se deshabilita el temporizador del reloj del teléfono. No ocurre nada más en la aplicación hasta que
el usuario vuelve a presionar el botón, y, cuando eso ocurre, todo el proceso descrito comienza de nuevo.

6
Figura 7: Así se ensamblaron los bloques estructurales que conformaron el programa principal mediante el cual funciona
la aplicación simuladora de una ruleta.

Resultados
En este primer vídeo se muestra el funcionamiento de la primer aplicación, en la que a través de un botón
se aumentaba el valor de un contador y se cambia aleatoramiente el color de la pantalla

https://youtu.be/qjQDvrmREg4o

En este segundo programa se muestra el funcionamiento de la segunda aplicación, la cual simulaba el giro
de una ruleta. El usuario podía hacer que girara la ruleta a una velocidad que dependía de cuanto tiempo
estuviera apretado el botón.

https://youtu.be/Z9lp6L3crDk

Conclusion
Gracias a lo relativamente simple que es escribir un programa a través de la plataforma App Inventor,
nos fue sencillo desarrollar las aplicaciones requeridas para este experimento. Con solo el uso de un botón y
una variable global fue posible realizar la tarea de contar las veces que el primero había sido presionado. Es
claro que las posibilidades para el desarrollo de aplicaciones con esta plataforma son muy grandes debido a
la diversa cantidad de elementos que es posible incorporar: los varios bloques estructurales de programación,
los archivos externos que se pueden agregar, los sensores del teléfono que sen pueden usar y la capacidad de
lectura y escritura sobre otros archivos. Adicionalmente el que sea tan sencillo compilar y compartir cada una
de las aplicaciones puede permitir una amplia distribución entre la comunidad académica.

Respecto a la segunda parte de la práctica, esta nos permitió entender cómo es posible realizar una anima-
ción básica a partir del uso de un lienzo y puntos que pueden cambiar de color en cierto intervalo de tiempo
medido por el temporizador del reloj de un teléfono.

7
Referencias
[1] MIT App Inventor. (s. f.). EcuRed. Recuperado 22 de octubre de 2021, de https://www.ecured.cu/MIT_
App_Inventor