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:

 

Sobre la Screen1 vamos a desplegar un Layout de tipo HorizontalArrengement (esto lo encuentras en la categoría Layout), de esta forma podemos incluir elementos en horizontal.

Sobre el HorizontalArrengement vamos a incluir 3 elementos de tipo Label (o etiquetas), que se encuentran en la sección User Interface

Asegúrate de que todas las etiquetas se encuentren dentro del HorizontalArrengement

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 Components, y utilizando el botón Rename, modifica el nombre de cada una de las etiquetas como NUM1, SUMA, NUM2.

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

Bajo las etiquetas que acabamos de colocar, incluye un TexBox para que el usuario introduzca su respuesta y un elemento Button como interface de la misma. 

Renombra los dos elementos para que tengan nombres descriptivos:

  • El TextBox será Respuesta

  • El Button será BotonResponder con el texto RESPONDER

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

Pulsa sobre el botón Add Screen 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 Label que indique al usuario que respondió correctamente a la pregunta, y un elemento Button que le permita generar otra pregunta a la que debe responder.

Nuevamente renombraremos los dos elementos para que tengan nombres descriptivos:

  • El label será "MensajeCorrecto"

  • El Button será "BotonVolver"

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

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 set NUM1.Text to, esto nos permitirá asignar un nuevo texto.

Vamos a asignar un valor numérico aleatorio a la etiqueta, para ello utilizamos el bloque random integer que encontraremos dentro de la categoría Math.

 

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 Label NUM2.

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

 

Seleccionamos el elemento BotonResponder y el bloque when BotonResponder.click do.

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

Dentro de la parte del if, 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 Math.

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

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 if se ejecutará la lógica de la parte then, 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 open another screen.screenName

Este bloque requiere el nombre de la pantalla que se desea abrir, para ello es necesario incluir un literal textual con el 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 Text.

Para ello nos dirigimos al editor de bloques.

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 BotonVolver e incluimos el bloque When.BotonVolver.ClickDo

Dentro del bloque incluimos el elemento open another screen screenName y a continuación le agregamos el texto literal con el nombre de la ventana Screen1.

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. 

Bibliografía:

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

- Cabello, J.M. (2014). Crea tus aplicaciones Android con App Inventor 2. España: IC

contáctame: 

  • w-facebook
  • Twitter Clean