Wilson Vargas
Wilson Vargas

Un programador enamorado de su código.

Wilson Vargas
Author

Un chico con una gran experiencia en el arte del desarrollo software. Desarrollador de aplicaciones de móviles, especialista en ASP.Net, Xamarin y tecnologías de computo en la Nube en especial Azure.

Share


Suscribete


Mantente al tanto de mis nuevos artículos

Tags


Featured on Planet Xamarin badge

Twitter


Generando y leyendo códigos QR con Xamarin.Form

Wilson VargasWilson Vargas

Qué tal gente? Han pasado algunos días desde mi último post como les dije iba a escribir más seguido, también he empezado hacer algunos videos. Básicamente la rutina será que iré subiendo un video y escribiendo un post cada semana, por el momento estoy esperando un micrófono profesional que adquirí, pero aún no ha llegado xD me han dicho que llega a inicios de Agosto así que espero tenerlo para esa fecha. Compré el micrófono debido a que no me gustó mucho el audio del primer video.

Si deseas ver el primer video aquí te lo dejo:

Bueno, hoy voy a mostrarles como generar y leer códigos QR esta función es muy útil en algunos registros de asistentes o simplemente para identificarse en algunas ocasiones. Te puede servir en varios aspectos dentro de tu aplicación.

Vamos a utilizar un componente para Xamarin.Form llamado ZXing.Net.Mobile for Forms este componente no solo te permite generar y leer códigos de tipo QR, sino también códigos de barras, Data Matrix, Aztec (beta) y un gran etcétera, para saber más sobre los formatos de este componente te invito a revisar la documentación en su repositorio de github.

Empecemos…

Primero lo primero, y todos saben esto: Debemos crear un nuevo proyecto de tipo Cross Platform en Visual Studio.

En la siguiente ventana elegimos una aplicación en blanco o de tipo Master Detail Page según sea tu necesidad, para efectos de este tutorial vamos a elegir una aplicación en blanco y nuestra estrategia de código compartido será la de biblioteca de clases portable.

Lo que crea Visual Studio es una plantilla lista para compilar y ejecutar, normalmente la estructura del proyecto es la siguiente:

Como muchos saben y para los que aún no saben, trabajar con Xamarin.Forms es prácticamente realizar todo en la Biblioteca de clases portables (PCL por sus siglas en inglés) entonces lo que yo normalmente realizo en todos mis proyectos es estructurar mi PCL de manera que pueda separar mis modelos, mis vistas y mis “vistas-modelos” como recomienda el patrón de diseño MVVM.

Instalando nuestro componente

Este componente se puede encontrar en el gestor de paquetes de Visual Studio (NuGet), para esto vamos a instalar desde nuestro IDE.

Debemos hacer clic derecho en nuestra solución e ir a la opción que dice “Administrar paquetes NuGet para esta solución”

En la nueva ventana debemos ir a la opción “Explorar” y escribir el nombre de nuestro componente ZXing.Net.Mobile for Forms

Ahora simplemente seleccionamos el primer resultado de la búsqueda y seleccionamos todos los proyectos en donde se instalará este componente, finalmente instalaremos este componente.

Nuestra interface

El diseño de nuestra interfaz estará basada en un master detail o un menú hamburguesa como varios lo conocen. Yo no entraré en detalles de cómo realizar el master detail, tal vez podría ser tema para otro tutorial, pero de todas maneras el código de este ejemplo está en mi repositorio de github.
Bueno, en general nuestro diseño va a tener dos interfaces (la que genera los códigos QR y la que los lee)

Generador de códigos QR

Bien, ahora vamos a trabajar en la opción que genera códigos QR, primero tendremos que crear nuestra vista, vamos a agregar un archivo .xaml llamado QRGeneratorPage que será la vista que generará los códigos QR, en ella veremos un control llamado QRResult que hace referencia a un control creado en otro archivo.

El código de nuestra primera interfaz será el siguiente:

Como ves QRResult hace referencia a un control creado en la carpeta de Vistas y que solo será un ContentView donde se asignará el código QR creado.

Ahora en nuestro archivo QRGeneratorPage.xaml.cs le daremos una funcionabilidad al evento de nuestro botón.

Básicamente lo que haremos será crear el código QR usando la librería, primero tendremos que declarar una variable de la clase ZXingBarcodeImageView y luego asignar algunas propiedades necesarias, sobre todo la propiedad llamada BarcodeFormat asignándole ZXing.BarcodeFormat.QR_CODE y obviamente el texto de nuestro control Entry, finalmente solo asignamos esta variable a nuestro contenview de nuestra vista.

El código de nuestro evento es el siguiente:

Lector de códigos QR

Bueno ahora vamos a trabajar en la opción que lee los códigos QR, como en el primer ejemplo, primero tenemos que crear la vista que básicamente tendrá un control llamado QRScan en donde pondremos la función de escanear, propio del componente.
Creamos un archivo .xaml llamado QRReaderPage que será la vista que leerá los códigos QR, aquí vamos a ver un control llamado QRScan que es referenciado desde otro archivo llamado QRScanner que solo tendrá un ContentView.

El código de nuestra interfaz es el siguiente:

El siguiente paso es crear un método que usaremos en el constructor de nuestra vista ubicado en el archivo QRReaderPage.xaml.cs. Este método analizará el código QR que necesitamos leer, primero tenemos que crear una variable de tipo ZXingScannerPage y proceder a instanciarla luego navegar hacia el scanner que básicamente lanza la cámara.

Una vez que la cámara analice el código QR procederá a mostrar una alerta en el dispositivo con el mensaje analizado.
El código del método es el siguiente:

Configuraciones adicionales según cada plataforma

Android

En cada plataforma tendremos que inicializar este componente, en el caso de Android tendremos que llamar al método Init dentro del método OnCreate en la clase MainActivity.cs quedando de la siguiente manera:

ZXing.Net.Mobile.Forms.Android.Platform.Init();

Además de esto tendremos que agregar ciertos permisos en la aplicación para poder acceder a algunas características del dispositivo. Este componente administra el nuevo modelo de solicitud de permiso de Android por ti, pero tendrás que sobrescribir el siguiente método:

public override void OnRequestPermissionsResult(int requestCode, string[] permissions, Permission[] grantResults) { global::ZXing.Net.Mobile.Forms.Android.PermissionsHandler.OnRequestPermissionsResult (requestCode, permissions, grantResults); }

El permiso de la cámara deberá estar incluido automáticamente con este componente en el archivo AndroidManifest.xml, sin embargo, si necesitas acceder al flash del dispositivo tendrás que agregar el permiso Flashlight tú mismo, puedes hacerlo utilizando el siguiente atributo de nivel ensamblado:

[assembly: UsesPermission (Android.Manifest.Permission.Flashlight)]

iOS

En iOS tenemos que hacer lo mismo, agregar el método Init del componente, en el método FinishedLaunching, en la clase AppDelegate.cs:

ZXing.Net.Mobile.Forms.iOS.Platform.Init();

Y agregar el permiso de la cámara en nuestro archivo Info.plist:

<key>NSCameraUsageDescription</key> <string>Can we use your camera</string>

UWP

Al igual que en las otras dos plataformas debemos iniciar el componente haciendo el llamado al método Init en el constructor de la clase Page.

ZXing.Net.Mobile.Forms.WindowsUniversal.ZXingScannerViewRenderer.Init();

Demostración

Aquí les dejo una pequeña imagen de cómo funciona la aplicación:

Conclusión

Como puedes ver hemos utilizado este fantástico componente que nos ayuda a generar y leer códigos QR usando Xamarin.Form, bueno ya sabes si tienes cualquier duda o sugerencia puedes echarme un tweet sin problemas, enviarme un correo o buscar la mejor manera de comunicarte conmigo, estaré encantado de ayudarte en cualquier duda que tengas.

Un chico con una gran experiencia en el arte del desarrollo software. Desarrollador de aplicaciones de móviles, especialista en ASP.Net, Xamarin y tecnologías de computo en la Nube en especial Azure.

Comentarios