DESARROLLO DE LA ACTIVIDAD 4 DEL “TALLER PRÁCTICO:

APLICACIÓN MÓVIL”

Romero Laguado Miguel Andrés

SERVICIO NACIONAL DE APRENDIZAJE (SENA)

Análisis para el desarrollo móvil con App Inventor (2481327)

Ing. Barrera Noy Milton Oswaldo

Curso Virtual

2022
 1

Tabla de Contenido

Introducción 1

Pasos para el desarrollo de la App 2

Paso 1: Crear la Intro 2
Paso 2: Crear el juego 6

Glosario 12

Referencias bibliográficas 12

Introducción

El desarrollo de las aplicaciones móviles es un área que, en la actualidad, ha

adquirido gran importancia en diferentes sectores de la sociedad: económico, político,

salud, entretenimiento, entre otros. Alcanzando un amplio número de personas de todo

el mundo, siempre y cuando, posean un smartphone capaz de soportar tales aplicativos

móviles.

Además, conforme aumenta el nivel tecnológico, se mejora la inteligencia

artificial y disminuye la brecha digital. El número de usuarios de smartphones

incrementará considerablemente a la par de nuevas exigencias, demandas de los

consumidores potenciales para los expertos del área de Marketing Digital.

El presente documento, tiene la finalidad de mostrar el funcionamiento operativo

de una App creada en App Inventor 2 —un entorno de desarrollo de software

mantenido por el Instituto de Tecnología de Massachusetts (MIT)—, creado por Google

 2

Labs, demostrando la creación de un juego táctil, totalmente funcionable, cuyo objetivo

es entretener a una sola persona con golpear la imagen de un ratón, cada golpe

generará un sonido que representa dicha acción al igual que se generará otro sonido

cuando falla en tocarlo en la pantalla del smartphone, dicho roedor se encontrará

constantemente apareciendo y desapareciendo en el cuadro blanco designado por el

aplicativo móvil.

Pasos para el desarrollo de la App

Paso 1: Crear la Intro

El desarrollo de la aplicación móvil fue posible con seguir las indicaciones vistas

en el vídeo de “Cómo crear una Pantalla de Inicio o Splash Screen - MIT App Inventor

2” (VaidrollTeam, 2019), obteniendo en la Figura 1 lo siguiente:

Figura 1

Modo diseñador de GolpearAlRaton en Screen1

 3

En la primera pantalla (Screen1), se colocó tanto en la “DispHorizontal” como

“DispVertical” la opción “Centro”; el color de fondo: Gris claro; se deshabilito las

opciones “Enrollable” y “TitleVisible”.

De la Paleta se seleccionaron los siguientes elementos con sus características:

1. Imagen1: Sacado de Interfaz de usuario. El alto y ancho se digitaron 150

píxeles, se subió una imagen tipo PNG del logo del SENA con el nombre

de “Logo_SENA.png”.

2. DisposiciónHorizontal1: Sacado de Disposición. se ajustó “DispHorizontal”

en izquierda y en el centro a “DispVertical”, el color de fondo es gris. El

ancho es de 200 píxeles. Este elemento se usa para dar una sensación

de una barra que necesita cargarse al 100%.

2.1. lblCarga: Sacado de Interfaz de usuario. El fondo es de color negro

con tamaño de letra 14, la psición se ajusto a la izquierda, en el cuadro de

texto se digito la letra “l” para que aparezca una barra negra pequeña.

Ese elemento se usa para dar el aspecto visual de estar llenándose la

barra cuando se ejecuta.

3. DisposiciónHorizontal2: Sacado de Disposición. Las disposiciones

horizontal y vertical se encuentran en el centro.

3.1. Etiqueta2: Sacado de Interfaz de usuario. Se digitó en el cuadro de

texto lo siguiente “Cargando…”, la disposición de la misma está en el

centro. Su tamaño de letra es 20. Se aplica la negrita para resaltar el

texto.
 4

3.2. lblNumero: Sacado de Interfaz de usuario. Se digitó en el cuadro de

texto lo siguiente “0”, la disposición de la misma está en el centro. Su

tamaño de letra es 20. Se aplica la negrita para resaltar el texto; la

etiqueta se colocó al lado derecho de Etiqueta2 para mostrar el

porcentaje de carga que se visualiza en la pantalla a medida que avanza

lblCarga ocupando todo el espacio de DisposiciónHorizontal1.

4. lblHechoPor: Sacado de Interfaz usuario. Se digitó en el cuadro de texto

lo siguiente “Hecho por:”, la disposición de la misma está en el centro. Su

tamaño de letra es 14. Se aplica la negrita para resaltar el texto.

5. lblNombre: Sacado de Interfaz usuario. Se digitó en el cuadro de texto lo

siguiente “Miguel Andrés Romero Laguado”, la disposición de la misma

está en el centro. Su tamaño de letra es 14. Ese elemento se usa para

decir quién desarrolló la aplicación.

6. Reloj1: Sacado de Sensores. El intervalo del temporizador se dejó a 200

para que la carga no tarde en llegar al 100%.

Como se muestra en la Figura 2, cuando se selecciona el bloque que aparece

del elemento Screen1, se encuentra la opción de cuando la aplicación empieza a

ejecutarse en la primera pantalla, usando la etiqueta lblNumero iniciando su valor con

cero —sacado del bloque matemático—, luego se busca el bloque de Reloj1 para

colocar los bloques correctos que representa la visualización de una carga llegando al

100 por ciento.

Figura 2

Lógica de la pantalla principal, Screen1

 5

Se selecciona un bloque de control con una condición sencilla —se agrega la

condición “sino” con dar clic al engranaje del cuadro morado—, usando un bloque

matemático de “menor que” para comparar el valor inicializado de la etiqueta

lblNumero. Eso se hace con el fin de ir sumándole un uno (1) a dicha etiqueta y cuyo

valor es multiplicado por dos (2) para ser adicionado en la etiqueta lblCarga.

El motivo de la multiplicación en la etiqueta lblCarga, se debe a su ancho de

200 píxeles, es decir, si fuera solo 100 píxeles no habría necesidad de multiplicarlo por

dos porque, cuando la etiqueta lblNumero obtiene un valor de 100, es cuando la

primera etiqueta anteriormente nombrada terminó de recorrer todo el espacio de

DisposiciónHorizoltal1.

Una vez terminado el bucle cuando la etiqueta lblNumero es mayor a 100, es

cuando se abre la última pantalla (Screen2) al usar otro bloque de control que permite

abrir una pantalla a otra junto a un bloque de texto por defecto para seleccionar el

nombre de la pantalla deseada.

En la Figura 3 se evidencia el progreso de la carga de la pantalla principal:

Figura 3
 6

Progreso de carga en Screen1

Paso 2: Crear el juego

Este último paso se hizo con la guía del vídeo “Atrapa al Ratón o Pégale al Topo

- MIT App Inventor 2”(VaidrollTeam, 2019). Consiguiendo el resultado de la Figura 4:

Figura 4

Modo diseñador de GolpearAlRaton en Screen2

 7

En la última pantalla (Screen2), se colocó en ambas disposiciones horizontal y

vertical en el centro, un color fondo igual a Screen1. Se deshabilitó nuevamente las

opciones Enrollable y TitleVisible.

De la Paleta se seleccionaron los siguientes elementos con sus características:

1. DisposiciónHorizontal1: Sacado de Disposición. La disposición horizontal

es izquierda mientras que, la disposición vertical es hacia arriba. Este

elemento se usa para mostrar el puntaje de golpear o no al ratón.

1.1. DisposiciónHorizontal2: Sacado de Disposición. La disposición

horizontal es izquierda mientras que, la disposición vertical es hacia

arriba. Este elemento se usa para alojar el puntaje generado por golpear

al ratón.

1.1.1. lblPuntaje: Sacado de Interfaz usuario. Tamaño de letra 14, en

negrita, posicionado en el centro y se digitó en el campo de texto

“Puntaje:”.
 8

1.1.2. lblNumPuntaje: Sacado de Interfaz usuario. Tamaño de letra 14,

posicionado en el centro y se digitó en el campo de texto “0”; este

elemento sirve para mostrar el acumulado exitoso de golpear al ratón.

1.2. DisposiciónHorizontal3: Sacado de Disposición. La disposición

horizontal es izquierda mientras que, la disposición vertical es hacia

arriba. Este elemento se usa para alojar el puntaje generado por no poder

golpear al ratón.

1.2.1. lblPerdida: Sacado de Interfaz usuario. Tamaño de letra 14, en

negrita, posicionado en el centro y se digitó en el campo de texto

“Perdida:”.

1.2.2. lblNumPerdida: Sacado de Interfaz usuario. Tamaño de letra 14,

posicionado en el centro y se digitó en el campo de texto “0”; este

elemento sirve para mostrar el acumulado de no golpear al ratón.

2. Lienzo1: Sacado de Dibujo y animación. El alto y el ancho están

ajustados al contenedor. Este elemento es la pizarra que permite la

interacción táctil con los elementos alojados en ella.

2.1. sprRaton: Sacado de Dibujo y animación. Se selecciona la imagen

subida “RatonFreePNG.png” con 40 píxeles de alto y ancho para no

acaparar toda la pantalla de Screen2.

3. DisposiciónHorizontal4: Sacado de Disposición. La disposición horizontal

es en el centro mientras que, la disposición vertical es hacia abajo. Este

elemento se usa para alojar los botones Reiniciar o Salir.

 9

3.1. btnReiniciar: Sacado de Interfaz de usuario. Se digitó “Reiniciar”

como el nombre del botón en negrita, con forma redondeada, posicionado

en el centro y con un tamaño de letra 14. Este elemento se usa para

reiniciar el conteo de los golpes recibidos y perdidos hacia el ratón.

3.2. btnSalir: Sacado de Interfaz de usuario. Se digitó “Salirr” como el

nombre del botón en negrita, con forma redondeada, posicionado en el

centro y con un tamaño de letra 14. Este elemento se usa para cerrar la

aplicación.

4. Reloj1: Sacado de Sensores. El intervalo del temporizador se dejó a 1000

para dar la oportunidad de atrapar/golpear el ratón (sprRaton).

5. sndGolpe: Sacado de Medios. Se selecciono el archivo de audio “sfx-

punch.mp3” para generar el sonido de un golpe al tocar la imagen del

ratón (sprRaton).

6. sndEsquivar: Sacado de Medios. Se selecciono el archivo de audio “sfx-

swoosh6.mp3” para generar el sonido del ratón (sprRaton) cuando no lo

golpean.

En la Figura 5, se observa que, para generar el proceso de los movimientos

aleatorios del ratón (sprRaton). Primero, se debe limitar sus movimientos en los límites

establecidos en Lienzo1, usando el bloque de procedimientos que se renombro como

“proc_MovRaton”; luego, se llama otro bloque de procedimiento de la imagen del ratón

para definir sus movimientos aleatorios —usando el eje x y el eje y— con el bloque de

la función matemática de números enteros aleatorios, comenzando desde el número

 10

cero hasta el ancho/alto entre la resta de Lienzo1 y sprRaton respectivamente, esto se

hace con el fin de que la imagen del ratón no se salga del lienzo.

Figura 5

Lógica de la última pantalla, Screen2

Para activar el bloque “proc_MovRaton”, se debe elegir otrol bloque de control

generado por Reloj1; con eso, se elige el un nuevo bloque de procedimiento creado

para llamar al encargado de generar los movimientos aleatorios del ratón.

El bloque del botón Reiniciar se crea con un bloque de control de dicho botón, se

coloca dos bloques de los puntajes lblNumPuntaje y lblNumPerdida para asignarles un

valor igual a cero. De esa forma se vuelve a empezar nuevamente el conteo en la

aplicación móvil como sucede en la Figura 6:

Figura 6

Reinicio de los puntos

 11

Para salir de la aplicación basta con generar un bloque de control en el elemento

btnSalir. Luego, en bloques de control, se eligió el que permite cerrar la aplicación.

Para generar los puntos por atrapar al ratón, evidenciado en la Figura 6, se hace

uso del bloque de control del Lienzo1 que contenga “touchedAnySprite”, debido al ser

el responsable de generar la función de reconocer la presión ejercida en la pantalla al

tocar la imagen del ratón en el lienzo.

 12

Se utiliza un bloque de control con condicionales. Se toma el valor

“touchedAnySprite” para verificar si en algún la imagen del ratón ha sido tocado, de ser

cierto, el bloque lblNumPuntaje se le suma un entero positivo junto a la activación del

sonido sndGolpe —sacado del elemento del mismo nombre—, en caso contrario, el

entero positivo se suma al bloque lblNumPerdida junto a la activación de su sonido

sndEsquivar.

Glosario

App: Es la abreviatura inglesa de Application. Para el caso de este documento,

hace referencia a las aplicaciones móviles o derivados que pueden ser encontrados o

descargados en la tienda de Google Play, la Play Store.

Referencias bibliográficas

VaidrollTeam. (12 de Noviembre de 2019). ATRAPA AL RATÓN O PÉGALE AL TOPO -

MIT APP INVENTOR 2. [Archivo de Vídeo]. YouTube.

https://www.youtube.com/watch?v=yWQs3Ia_snE

VaidrollTeam. (5 de Marzo de 2019). Cómo crear una PANTALLA DE INICIO o

SPLASH SCREEN - MIT App Inventor 2. [Archivo de Vídeo]. YouTube.

https://www.youtube.com/watch?v=cw5Db2NzY2Y&t=14s