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:

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.

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

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.

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. 

Renombra los dos elementos para que tengan nombres descriptivos:

  • El CampoDeTexto será Respuesta

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

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.

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:

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"

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.

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.

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

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.

Repetimos la misma operación para la etiqueta NUM2.

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.

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.

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.

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

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.

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.

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".

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.

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

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).

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.

Vista de la app funcionando en el celular:

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).

contáctame: 

  • w-facebook
  • Twitter Clean