Ejercicio 2

Realizaremos una segunda aplicación donde se le solicitará al usuario que realice una suma, con números aleatorios. Sí el resultado introducido es correcto, dirigirá al usuario a una segunda pantalla.

Este segundo proyecto lo llamaremos SUMA:

27.jpg
28.jpg

DISEÑO

Sobre la Screen1 vamos a desplegar una composición de tipo DisposiciónHorizontal (esto lo encuentras en la Paleta en la categoría Disposición), de esta forma podemos incluir elementos en horizontal.

29.jpg

Sobre la composición DisposiciónHorizontal vamos a incluir 3 elementos del tipo Etiqueta, que se encuentra en la sección Interfaz del usuario

Asegúrate de que todas las etiquetas se encuentren dentro de la DisposiciónHorozontal

30.jpg

La primera etiqueta representará al primer número de la suma, la segunda el signo "+" y la tercera el segundo número de la suma.

En Componentes, y utilizando el botón Cambiar nombre, modifica el nombre de cada una de las etiquetas como NUM1, SIGNO, NUM2.

Así mismo, cambia el correspondiente texto de los dos números por el signo de interrogación y el de suma. Con Tamaño de letra, aumenta su tamaño a 50 puntos.

31.jpg

Bajo las etiquetas que acabamos de colocar, incluye un CampoDeTexto para que el usuario introduzca su respuesta y un elemento Botón como interface de la misma. 

32.jpg

Renombra los dos elementos para que tengan nombres descriptivos:

  • El CampoDeTexto será Respuesta

  • Botón será BotónResponder con el texto RESPONDER

33.jpg

Con esto hemos finalizado el diseño de la primera pantalla. Ahora, nos abocaremos al diseño de la pantalla que se mostrará cuando el usuario responda correctamente a la pregunta.

Pulsa sobre el botón Añadir ventana y asigna el nombre la pantalla como "CORRECTO". Este nombre será muy importante ya que será el identificador de la pantalla.

34.jpg
35.jpg

Automáticamente el editor nos dirigirá a la nueva pantalla "CORRECTO", pero podremos movernos entre todas las pantallas de nuestra aplicación utilizando el menú desplegable que se encuentra en la parte superior:

36.jpg

En la pantalla "CORRECTO" vamos a incluir un elemento Etiqueta que indique al usuario que respondió correctamente a la pregunta, y un elemento Botón que le permita generar otra pregunta para responder.

Nuevamente renombraremos los dos elementos para que tengan nombres descriptivos:

  • La Etiqueta será "MensajeCorrecto"

  • El Botón será "BotónVolver"

37.jpg
38.jpg

PROGRAMACIÓN DE EVENTOS

Una vez finalizada la definición de las interfaces gráficas, nos avocaremos a realizar la programación de la app desde el editor de Bloques.

39.jpg

Primeramente editaremos la lógica de la pantalla Screen1.

 

Para tal efecto selecciona dicha pantalla. La lógica será simple: cuando se inicializa la pantalla introducimos dos números aleatorios en las Labels NUM1 y NUM2.

40.jpg

Seleccionamos el elemento NUM1 y posteriormente el bloque poner.NUM1.Texto.como, esto nos permitirá asignar un nuevo texto.

41.jpg

Vamos a asignar un valor numérico aleatorio a la etiqueta, para ello utilizamos el bloque entero aleatorio entre que encontraremos dentro de la categoría Matemáticas

Este bloque permite elegir el rango a utilizar en la generación de los números aleatorios. En nuestro caso estableceremos el rango de 1 a 10.

42.jpg

Repetimos la misma operación para la etiqueta NUM2.

error01.jpg

A continuación implementaremos la lógica del botón (BotónResponder), al pulsarlo se valida si el valor introducido en Respuesta se corresponde realmente con la suma de NUM1 y NUM2.

 

Seleccionamos el elemento BotónResponder y el bloque cuando.BotónResponder.Clic.ejecutar.

44.jpg

Ya que al pulsar el botón se realizará la comprobación, utilizaremos el bloque si entonces que está dentro de la categoría Control.

45.jpg

Dentro de la parte del si, estableceremos la condición que comprueba si el Texto introducido en el elemento Respuesta, se corresponde con la suma de los textos NUM1 + NUM2

Para realizar esta comparación matemática se utiliza el bloque de comparación localizado en la categoría Matemáticas.

46.jpg
47.jpg

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

48.jpg

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

49.jpg

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.

50.jpg

Si se cumple la condición expresada en el si se ejecutará la lógica de la parte entonces, esto es, sí se cumple la condición, la aplicación pasará de la pantalla Screen1 a la pantalla CORRECTO.

En la categoría Control está el bloque que nos permite abrir una nueva ventana, ese bloque es el abrir otra pantalla Nombre de la pantalla. A este cadena añadiremos el texto del 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 Texto.

La pantalla que queremos abrir en caso de que el usuario responda correctamente a la pregunta es la pantalla "CORRECTO".

51.jpg
52.jpg
53.jpg

Con esto hemos finalizado la lógica de la pantalla Screen1, ahora construiremos la lógica del botón VOLVER de la pantalla CORRECTO que al darle clic, nos regrese a la pantalla principal.

Primeramente, selecciona la pantalla donde se encuentra el botón VOLVER.

54.jpg

El procedimiento es prácticamente parecido al ya realizado 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 BotónVolver e incluimos el bloque cuando.BotónVolver.Clic.ejecutar

55.jpg

Dentro del bloque incluimos el elemento abrir otra pantalla Nombre de la pantalla y a continuación le agregamos el texto literal con el nombre de la ventana Screen1. Asegúrate de escribirlo correctamente (mayúscula, minúsculas, para que el programa funcione correctamente).

56.jpg
57.jpg

Con esto finalizamos el desarrollo de la aplicación y ésta ya es completamente funcional. Hay que colocar la aplicación en la pantalla Screen1 para poder ejecutarla de forma lógica.

58.jpg
39b.jpg
36.jpg

Vista de la app funcionando en el celular:

40b.jpg
45b.jpg
46b.jpg
43b.jpg

Recuerda que como definimos números aleatorios para la suma, cada vez que se ejecute aparecerán cifras distintas. 

VIDEO DE APOYO

Referencias:

- Pascual, J. García V. & González R. (2014). Desarrollo de aplicaciones android con App Inventor, Paso a paso. México: Jordán Pascual Estrada. Adaptado para fines educativos por Rasso, H. (2021).

- Cabello, J.M. (2014). Crea tus aplicaciones Android con App Inventor 2. España: IC. Adaptado para fines educativos por Rasso, H. (2021).