Ejemplo Aplicación de adivinanzas con códigos QR con AppInventor - BarcodeScanner

Hoy vamos a aprender a crear nuestra propia aplicación móvil con AppInventor en la que retaremos a los usuarios a resolver varias adivinanzas y leer códigos QR. Es una aplicación muy adecuada para hacer con niños en el aula, ya que tiene un componente de gimkana, pero utilizando nuestros móviles o tablets para resolver las pistas.



Empezamos con la descripción general de la aplicación a desarrollar:

• Nivel de dificultad: ** (¡fácil!)
• Utilizamos:
• BarcodeScanner
• Botones
• Variables globales
• Botones
• Condiciones
• Listados
• Alertas
• Usos:
• Aplicación para realizar con niños o con mayores, en un espacio en el que tienen que buscar pistas y resolver adivinanzas.

Cómo utilizar esta aplicación:

La propuesta para utilizar en el aula es esconder varios códigos QR en diferentes sitios de la misma. Por ejemplo, ponemos un código pegado en la ventana, uno en la puerta, ... iremos dando las diferentes pistas para que los alumnos adivinen y vayan allí. Cuando encuentran el código QR escondido, lo escanean con la aplicación que vamos a desarrollar, y, si es el código correcto, la aplicación les ofrecerá la siguiente pista.

Esta aplicación puede servir también para ayudar a los alumnos a descubrir un museo, un jardín con diferentes plantas, ... ¡seguro que se te ocurren más cosas!.

En nuestro ejemplo concreto, vamos a esconder en el aula 4 códigos: uno en la pizarra, otro al lado de la cerradura de la puerta, otro en la botella de agua de la profe y otro en la papelera.

Así pues, lo primero que hago es ir a un generador de códigos QR (por ejemplo: http://www.codigos-qr.com/generador-de-codigos-qr/ y selecciono el modo "Texto") y genero un código QR que contenga la palabra "Pizarra", otro que contenga "Agua", ...

Igualmente, pienso las pistas que les voy a dar para intentar averiguar cada elemento, en mi caso van a ser adivinanzas para niños.

Éste ha sido mi resultado:

Como veis tengo 4 adivinanzas y los 4 códigos QR que contienen las palabras de la respuesta: "Agua", "Cerradura", "Pizarra" y "Papelera". ¡Ya tengo todo listo para empezar!, manos a la obra.

Desarrollo de la aplicación con AppInventor:

Voy a AppInventor y empiezo a crear mi aplicación.

Esta aplicación va a ser muy sencillita, y constará de una única pantalla.

En ella pongo:

• Un Label con el título de la aplicación.
• Una imagen.
• Un Label, que lo llamo LAdivinanza en donde escribiré en cada caso el texto de la adivinanza actual.
• Dos botones alineados dentro de una tabla (HorizontalArrangement):
• Uno para llamar al escáner QR, lo llamo BEscanear.
• Otro para salir de la aplicación, lo llamo BSalir.
• Un BarcodeScanner, que me permitirá escanear los códigos QR.
• Un Notifier, que me permitirá mostrar avisos con el resultado del escaneo.

¡Vamos a por los bloques!.

No os asustéis si veis muchos bloques, que verás que es muy sencillita realmente.

Primero voy a crear 3 variables globales, en las que tendré información que voy a utilizar después:

• lista_adivinanzas: contendrá una lista con todas las adivinanzas a utilizar.
• lista_respuestas: contendrá una lista con las respuestas a esas adivinanzas. OJO: en el mismo orden que las adivinanzas.
• num_pista_actual: aquí guardaré el índice de la adivinanza que está intentando resolver el usuario en ese momento. Inicio con 1, y conforme vaya resolviendo las adivinanzas, iré pasando al 2, al 3 y al 4.

Una vez creadas, le indico que, al iniciar la pantalla, inicialice las dos listas con mis adivinanzas y mis respuestas (en el mismo orden en ambos casos), y que llame a mi función actualiza_adivinanza, que será la encargada de mostrar la adivinanza actual.

Como ya he dicho en el paso anterior, voy a tener una función llamada actualiza_adivinanza, que será la encargada de mostrar la adivinanza actual.

He sacado esto a una función nueva porque le voy a llamar desde dos puntos diferentes (al iniciar la aplicación y luego cada vez que el usuario acierte una adivinanza), y así le puedo llamar desde ambos sitios sin repetir estos pasos cada vez.

Esta aplicación simplemente muestra en el label de la adivinanza la adivinanza actual. Para ello, selecciona de la lista de adivinanzas la que esté en la posición num_pista_actual.

Otorgo también a los botones sus funcionalidades:

• Cuando hagan clic en el botón de salir que cierre la aplicación.
• Cuando hagan clic en el botón de escanear, que llame al BarcodeScanner para escanear el código QR.

Y por último, tengo que indicarle qué quiero que haga cuando termine de escanear. Para eso utilizo el bloque "when BarcodeScanner. AfterScan".

Así pues cuando termina de escanear compruebo si el código que ha escaneado se corresponde con la respuesta a la adivinanza. Si no es así, entonces mostraré el mensaje de error con el Notifier.

Si sí que ha adivinado, compruebo si estaba en la última adivinanza (en mi caso la que corresponde a num_pista_actual=4), y si era la última le doy la enhorabuena con un mensaje mostrado en el Notifier. Además aprovecho para hacer invisible el botón de escanear (ya no quedan más códigos que escanear).

Si no estaba en la última, entonces tengo que pasar a la siguiente adivinanza:

• Aumento el valor de num_pista_actual
• Muestro mensaje de acierto (¡Muy bien, has adivinado!).
• Cambio el texto de la adivinanza por la siguiente. Aprovecho que tengo esa función de actualiza_adivinanza que me lo hace.

Y ¡ya está!. ¿A que paso a paso resulta fácil?

¿Se te ocurren otros usos para esta aplicación dentro del aula?

¿Has desarrollado esta aplicación? ¿qué uso le has dado? ¿qué tipo de adivinanzas has utilizado?. Dínoslo en los comentarios.