Si no puedes esperar a tenerla terminada y quieres ver el resultado de lo que vamos a construir puedes probarlo directamente en tu móvil con la aplicación de Bitbloq Pocket que puedes descargarte de la tienda de Google Play o en el Apple Store, dependiendo del modelo de móvil que uses.
Vamos a la parte de diseño y codificación
Diseño de la aplicación
Como ya hemos mencionado, vamos a usar bitbloq.cc para programar nuestra aplicación.
Esta aplicación se va a distribuir a lo largo de cuatro pantallas
Voy a ir mostrando el contenido de los componentes de cada una
Pantalla “Intro”
Es la pantalla principal y desde la que podemos elegir si queremos generar un mensaje o leer un mensaje con la cámara trasera de nuestro móvil.
Los componentes visibles de esta pantalla son
El código de esta pantalla lo tienes a continuación
Si te fijas hemos usado una variable “Iniciar” que va a controlar si hemos de mostrar o no la pantalla de inicio “Intro” la primera vez que lancemos el programa, ya que al haberla puesto en cuarto lugar no sería la pantalla de entrada por “defecto”.
Te muestro las variables que he creado para el proyecto
El resto de opciones creo que se explican por sí mismas y cuadran con las propiedades que he definido para las opciones de la lista desplegable
También he creado una función que llamaremos desde otras partes del programa para asegurarnos que se muestre la pantalla inicial “Intro” si es la primera vez que abrimos el programa
Pantalla “Genera QR”
Esta pantalla tiene varios componentes, a saber:
El componente txt2QR contendrá el texto que le escribamos para usarlo en la generación del código QR
Cuando pulsemos en el botón 1 “Convertir” abrirá la pantalla “Muestra QR” con el código QR generado
El bótón 4 “Volver” sirve para volver a la pantalla principal “Intro”
El código de estos componentes lo tienes a continuación
Al abrir la pantalla nos aseguramos que vengamos de la pantalla de inicio “Intro”, ponemos la variable que contendrá el mensaje a utilizar para la generación del código QR en blanco y lo cargamos en la caja de texto.
Si hemos escrito algo en la caja de texto podremos ir a la pantalla “Muestra QR” cuando hagamos clic en el botón 1
Cuando hacemos clic en el botón 4, nos volvemos a la pantalla inicial “Intro”
Pantalla “Muestra QR”
En esta pantalla mostramos el código QR generado con el mensaje que hemos escrito en la pantalla anterior
Los controles de esta pantalla son los siguientes
El generador_qr mostrará el código QR
El botón 2 “Volver” nos permite volver a la pantalla anterior para generar un mensaje nuevo si queremos
El código de los controles de esta pantalla es más sencillo
Pantalla “Captura QR”
En esta pantalla vamos a manejar la cámara trasera de nuestro móvil y el componente de “escaner de código de barras” para leer un código y mostrarlo en pantalla.
Los componentes visibles que hemos usado para esta pantalla son
Y los componentes no visibles son
El componente txtLeído se usa para mostrar el resultado de haber leído un código QR con éxito
El botón 3 “Escanear” nos permite activar la cámara trasera para leer códigos QR
El botón 5 “Volver” nos llevará a la pantalla de inicio “Intro”
Vamos a ver el código de estos controles
Como has podido observar, el trabajo duro de generar un código QR y posteriormente descifrar el contenido almacenado en un código QR lo hace el propio componente, nosotros sólo hemos de llamar a las funcionalidades que nos ofrecen para poder incorporarlos a nuestros programas.
Espero que te haya salido bien y te resulte divertido programar con el entorno de Bitbloq.cc tus primeras aplicaciones para el móvil