Crear una app macOS capaz de generar y reconocer códigos QR

Mira a tu alrededor: códigos QR, de barras o de cualquier otro tipo por todas partes; desde los billetes de avión a los medicamentos o cualquier producto por trivial que sea. No cabe duda de que especialmente los códigos QR han sufrido una verdadera eclosión, especialmente motivada por la maldita pandemia del Covid. Ahora bien, ¿cuánto esfuerzo requiere crear una aplicación de macOS capaz de leer o incluso crear estos tipos de códigos?

Ya te anticipo que no se trata de una tarea nada trivial si optas por crearla con Xcode y Swift o bien Objective-C como lenguajes de programación; y aun más esfuerzo si eres recién llegado al mundo de la programación o si no te consideras un programador a tiempo completo.

Eso sí, con Xojo la cosa cambia… ¡y mucho! Con arrastrar y soltar un control desde la Libreria sobre la ventana de tu interfaz de usuario, añadir un par de eventos y añadir un par de líneas… ¡listo! Sí, así de sencillo.

Pero antes de crear una pequeña aplicación de ejemplo para demostrarlo, veamos qué capacidades te ofrece la clase Barcode de Xojo (ah, importante, también puedes utilizar el mismo código para crear la versión de Windows o de iOS y, próximamente, de Linux si te interesa).

Con la clase Barcode de Xojo puedes:

Crear códigos QR y de barras con el tamaño que requieras.
Reconocer hasta 12 tipos diferentes de códigos a partir de cualquier imagen que pasemos como parámetro (de hecho los más comunes tanto en el ámbito comercial e industrial); y si la imagen contiene varios códigos… reconocerá todos ellos y te los devolverá como resultado.
Escanear esa misma cantidad de diferentes tipos de códigos usando cualquiera de las cámaras compatibles que estén conectadas a tu Mac, y esto incluye también las cámaras de tu iPhone y/o iPad mediante Continuity.

Por supuesto, cuando se trata de escanear códigos con la cámara a través de la interfaz de usuario que se presenta (no tendrás que escribir ni una sola línea de código), podrás cambiar en cualquier momento la cámara que quieres usar, así como voltear la imagen previsualizada para facilitarte la colocación del objeto cuyo código deseas escanear en el encuadre de la cámara.

Creando la Interfaz de usuario de nuestra App

Descarga Xojo (es gratis) si aun no lo has hecho desde https://www.xojo.com/download. Una vez descargado y montada la imagen de disco, sólo tendrás que arrastrar su contenido a la carpeta Aplicaciones, tal y como harías con cualquier otra app.

Ejecuta Xojo y en la ventana de Nuevo Proyecto, selecciona la opción Desktop en la barra lateral izquierda. No hace falta que rellenes ninguno de los campos que se presentan en el área principal al realizar dicha selección, o bien puedes cambiarlos para asignar el nombre que tendrá la aplicación, nombre de tu empresa, etc.

Cuando confirmes la creación del nuevo proyecto se abrirá el IDE propiamente dicho mostrando en el área principal de la ventana el Editor de Diseño. En dicha área podrás ver la ventana de tu aplicación que se añade por omisión con cada nuevo proyecto que se crea y cuyo nombre será Window1.

Haz clic en el icono Library (Librería) situado en la barra lateral derecha del IDE. Al hacerlo podrás ver listados todos los controles IU (Interfaz de usuario o UX, si lo prefieres) que se incluyen por omisión.

Ubica el icono correspondiente a Barcode… estoy convencido que no te costará mucho encontrarlo… y arrástralo desde la Librería sobre el Editor de Diseño.

Cuando lo sueltes comprobarás que se ha añadido el control tanto en la bandeja inferior del Editor de Diseño como bajo la jerarquía de la ventana Window1 en el Navegador (el Navegador es donde puedes ver todos los elementos que se van añadiendo al proyecto, mediante una representación jerárquica que te permite ver qué controles contiene a otros). En este caso, puedes ver que la nueva instancia con el nuevo Barcode1 está asociada a la ventana Window1.

Si no ves la instancia Barcode1 en el Navegador es probable que debas desplegar la jerarquía de Window1. Cuando lo hagas verás Barcode1 listado bajo Window1 > Controls.

Selecciona Barcode1, y selecciona la opción “Add to ‘Barcode1’ > Event Handler” en el menú contextual. Al hacerlo aparecerá la siguiente ventana:

Selecciona los siguientes eventos

ScanCancelled. Este evento ejecutará el código asociado cuando el usuario pulse el botón “OK” en la ventana de escaneo o bien cuando se cancele por cualquier otro motivo.
ScanCompleted. Este evento ejecutará el código asociado cada vez que la cámara detecte un código en el encuadre. Como puedes, dicho evento recibe como parámetro el código detectado como una cadena de texto (tipo de dato String en el lenguaje de programación Xojo).
ScanFailed. Este evento se produce cuando se produce algún error, como por ejemplo al iniciar una operación de escaneo sin que el Mac tenga alguna cámara conectada o bien si se intenta ejecutar la aplicación en un Mac con una versión inferior a macOS 10.15.

Confirma la selección pulsando el botón OK. Cuando lo hagas verás que se han añadido bajo la instancia Barcode1 en el Navegador:

Ahora bien, para completar nuestra interfaz de usuario necesitamos añadir algunos controles más, como por ejemplo:

Un botón para iniciar la operación de escanear códigos mediante cualquiera de las cámaras disponibles en el Mac.
Un campo de texto en el que podamos introducir un texto a partir del cual generar un código QR como imagen.
Un control que nos permita ver la imagen resultante de la operación anterior.

Añadir el botón para iniciar el escaneo de códigos

Empecemos con el primer botón. Asegúrate de que el elemento Window1 esté seleccionado en el Navegador para que se muestre en el Editor de Diseño si aun no lo está; y vuelve a seleccionar Library (en el caso de que no esté visible) para arrastrar en esta ocasión un botón (control Button) y soltarlo sobre la esquina inferior derecha de la ventana en el Editor de Diseño. Utiliza las guías de alineación como pista sobre dónde deberías de soltar el botón para mantener los márgenes recomendables.

Al soltar el botón en el Editor de Diseño se habrá sustituido la Librería por el Panel Inspector correspondiente al Botón. Aquí es donde podremos definir algunas de sus propiedades. En este caso ajusta las siguientes con los valores indicados:

Name: ScanButton
Locking: Abre los candados superior e izquierdo, y cierra los candados derecho e inferior.
Caption: Iniciar Escaneo

En el Editor de Diseño comprobarás que el texto asignado al botón no cabe. Con el botón seleccionado en el Editor de Diseño, arrastra hacia la izquierda el manejador central izquierdo para modificar la anchura del control hasta que el texto se vea con claridad.

Añadir un campo de texto

Aquí es donde el usuario de nuestra app de ejemplo introducirá el texto que desee convertir a código QR. Desde la librería, arrastra el control TextField y suéltalo en la esquina superior izquierda de la ventana (utiliza las guías de alineación para preservar los márgenes superior e izquierdo recomendados).

Modifica los siguientes valores desde el Panel Inspector correspondiente al campo de texto:

Name: QRTextField

Añadir el botón para generar un código QR

Vuelve a seleccionar la Librería y arrastra en esta ocasión un botón para situarlo en la esquina superior derecha. Nuevamente, utiliza las guías para observar el margen que has de dejar a su derecha y para que el botón esté alineado respecto al campo de texto añadido en el paso anterior.

En el Panel Inspector correspondiente al nuevo botón, modifica los siguientes valores:

Name: GenerateQRButton
Locking: Desbloquea los candados izquierdo e inferior, y bloquea los candados superior y derecho.
Caption: Generar QR

Como puedes ver, el texto introducido no cabe en el botón… así que arrasta el manejador izquierdo central hacia la izquierda hasta que el texto se vea con claridad. Idealmente, haz que el ancho coincida con el del primer botón añadido. Cuando arrastras el manejador podrás utilizar nuevamente la guía de alineación que te indicará dicho aspecto.

Vuelve a seleccionar el control QRTextField en el Editor de Diseño y arrastra su manejador central derecho hacia la derecha hasta que aparezca la Guía de alineación sobre el botón GenerateQRButton. También modificaremos el siguiente campo en el Panel Inspector para QRTextField:

Locking: Cierra los candados izquierdo, superior e izquierdo. Asegúrate de que el candado inferior esté abierto.

Así, cuando ejecutemos la aplicación y modifiquemos el tamaño de la ventana, la anchura del campo de texto también cambiará en consecuencia manteniendo sus márgenes con respecto al resto de los controles.

Añadir un control para previsualizar imágenes

Se trata del último de los controles de nuestra interfaz de usuario. Desde la Liberaría, arrasta un control ImageViewer y suéltalo justo debajo del campo de texto. Utiliza las guías de alineación para observar los márgenes superior e izquierdo. Luego, utiliza los manejadores de tamaño para aumentar el ancho y alto del control de modo que quede alineado a la derecha con el botón superior derecho y, hacia abajo, sobre la parte superior y derecha del botón inferior derecho. Cuando termines, la interfaz de usuario debería tener un aspecto similar al mostrado en esta imagen:

Con el control ImageViewer seleccionado en el Editor de Diseño, introduce los siguientes valores en el Panel Inspector asociado:

Name: VisorQR
Locking: bloquea los candados izquierdo, superior, derecho e inferior.

Ya hemos terminado con nuestra interfaz de usuario. El siguiente paso es añadir funcionalidad.

Añadir funcionalidad a los controles

Empezaremos con la capacidad de generar códigos QR. Selecciona el botón GenerateQRButton en el Editor de Diseño y haz doble clic sobre él. En la ventana resultante, selecciona el evento Pressed y confirma la selección. Al hacerlo aparecerá el evento seleccionado bajo el Navegador del proyecto mostrando el editor de código asociado. Aquí es donde introduciremos el código que se ejecutará cuando el usuario de la app haga clic sobre el botón.

Introduce el siguiente fragmento de código en el editor de código asociado con el evento Pressed:

If QRTextField.Text <> "" Then
  
  VisorQR.Image = Barcode1.Image(QRTextField.Text, 600, 600)
  
End If

Básicamente, lo que hace el código es lo siguiente:

Comprueba que el campo de texto no esté vacío y, si es así, ejecuta las instrucciones siguientes comprendidas en el bloque If…End If
La siguiente línea se encarga de asignar a la propiedad Image del control VisorQR, la imagen generada mediante el método Image de nuestra instancia Barcode1, pasando como parámetros el texto que se utilizará para generar el código QR, así como el tamaño del mismo (ancho y altura). Como puedes ver, el texto utilizado se obtiene a partir de la propiedad Text del control QRTextField.

Selecciona ahora el control ScanButton en el Navegador de proyecto y utiliza el menú contextual para acceder a la opción de menú: Add To “ScanButton” > Event Handler…

En la ventana resultante, selecciona nuevamente el evento Pressed y confirma la selección. Al hacerlo, el evento aparecerá seleccionado en el Navegador de proyecto bajo el control ScanButton y mostrando el Editor de Código asociado.

Introduce la siguiente línea de código, que será la ejecutada cuando el usuario haga clic sobre el botón ScanButton:

Barcode1.StartScan

Y esa simple línea de código es todo lo que necesitas para que se muestre la interfaz de usuario que te permitirá escanear cualquiera de los diferentes tipos de códigos soportados mediante cualquiera de las cámaras compatibles que estén conectadas a tu Mac, incluido por ejemplo to iPhone a través de Continuity.

Ahora bien, cada vez que nuestra instancia Barcode1 reconozca un código llamará al evento ScanCompleted. Selecciona dicho evento bajo Barcode1 para introducir la siguiente línea en el Editor de Código asociado:

MessageBox(value)

Es decir, nos mostrará un mensaje con el código reconocido por la cámara y que se recibe en el evento como una cadena de texto.

Selecciona el evento ScanCancelled e introduce la siguiente línea de código:

MessageBox("Operación de Escaneo Cancelada.")

Por último, selecciona el evento ScanFailed e introduce la siguiente línea de código en el Editor de Código asociado:

MessageBox("Se ha producido un error en la operación de escaneo.")

¡Listo, nuestra app de ejemplo está lista para funcionar! Ejecútala pulsando el botón Run en la barra superior del IDE y prueba a escanear unos cuantos códigos así como a generar tus propios códigos QR a partir del texto introducido en el campo de texto.

Conclusión

Como has podido comprobar, ¡quizá has tenido que emplear más tiempo en diseñar la interfaz de usuario propiamente dicha que en añadir la funcionalidad tanto para generar como para escanear códigos mediante el control Barcode de Xojo! Además, la app creada no sólo funcionará en macOS, sino que también lo hará tanto en Windows como en Linux.

En cualquier caso, te garantizo que la cantidad de tiempo invertida habrá sido infinitamente menor que si hubieses abordado el mismo tipo de proyecto utilizando cualquier otro entorno de desarrollo.

¿Lo mejor de todo? Esta es sólo una pequeña muestra de lo que puedes crear a partir de este embrión de proyecto, estoy convencido de que tu imaginación se encargará del resto a la hora de añadir nuevas capacidades. Para ello puedes encontrar todo tipo de ayuda en la documentación disponible desde el propio IDE o bien a través de https://documentation.xojo.com

¡Feliz programación con Xojo!