Introducción

En la era de la informática móvil omnipresente, los códigos QR se están convirtiendo en una herramienta necesaria para compartir información de forma rápida y fluida. Los códigos QR se utilizan en todos los ámbitos, desde los pagos digitales hasta el envasado de productos. Como desarrollador, añadir la función de escaneado de códigos QR a tus aplicaciones móviles puede mejorar la experiencia del usuario y generar un sinfín de oportunidades. Este post le guiará a través de la creación de un escáner de código de barras .NET MAUI y lector de código QR con IronQR.

Cómo usar .NET MAUI para escáner de código QR

1. Instalar paquetes .NET MAUI y IronQR NuGet

2. Crear el diseño de la página principal

3. Inicializar cámara

4. Capturar imagen

5. Leer el código QR

6. Mostrar resultado

7. Gestionar permisos

Comprender .NET MAUI

Un marco llamado .NET Multi-platform App UI (.NET MAUI) permite utilizar C# y XAML para crear aplicaciones nativas multiplataforma. Con una única base de código, los desarrolladores pueden crear aplicaciones para Windows, macOS, iOS y Android. .NET MAUI ofrece una API uniforme para acceder a las funcionalidades de los dispositivos nativos, facilitando el proceso de creación de aplicaciones multiplataforma. A continuación se enumeran algunos elementos clave de .NET MAUI que lo convierten en una herramienta eficaz para los desarrolladores:

Estructura de proyecto único

Los proyectos específicos de cada plataforma se combinan en una estructura de proyecto unificada mediante .NET MAUI. Gracias a esta unificación, los desarrolladores pueden manejar todos los recursos y el código específicos de cada plataforma en un único proyecto, lo que agiliza el proceso de desarrollo.

Interfaz de usuario multiplataforma

Puede diseñar una única interfaz de usuario (INTERFAZ DE USUARIO) que funciona en varias plataformas con .NET MAUI. El framework ofrece una colección de diseños y controles compatibles con Windows, macOS, iOS y Android.

Acceso e integración nativos

Con la ayuda de .NET MAUI, los desarrolladores pueden aprovechar las API nativas y las funciones específicas de la plataforma, lo que les permite utilizar sensores, cámaras, GPS y otras funciones del dispositivo. De este modo, las aplicaciones pueden compartir gran parte del código base entre plataformas y seguir ofreciendo una experiencia de usuario nativa.

Recarga en caliente

.NET MAUI soporta Hot Reload para XAML y C#. Con la ayuda de esta funcionalidad, los desarrolladores pueden ver los cambios en la interfaz de usuario de forma instantánea sin tener que reiniciar el programa. Hot Reload facilita las iteraciones rápidas y la retroalimentación instantánea, lo que acelera el proceso de desarrollo.

Integración de Blazor

Gracias a la integración entre Blazor y .NET MAUI, los desarrolladores pueden utilizar los componentes de Blazor para crear aplicaciones híbridas. Con esta integración, la creación de aplicaciones modernas se flexibiliza al combinar las capacidades de desarrollo web de Blazor con la experiencia de MAUI en desarrollo móvil nativo.

Gestión de recursos

.NET MAUI facilita la gestión de recursos, como imágenes, fuentes y estilos, en varias plataformas. Al definir los recursos una sola vez, los desarrolladores pueden utilizarlos para todas las plataformas de destino, minimizando la redundancia y garantizando un aspecto y una sensación coherentes.

Inyección de dependencia

La inyección de dependencias es compatible con .NET MAUI, lo que ayuda a los desarrolladores a crear código más probado y fácil de mantener. Construir aplicaciones complicadas que necesitan una clara división de responsabilidades y una arquitectura modular requiere esta funcionalidad.

¿Qué es IronQR?

IronQR es una biblioteca .NET robusta y adaptable para crear y leer códigos QR. Al ofrecer funciones fiables y fáciles de usar tanto para crear como para leer códigos QR, agiliza el proceso de utilización de códigos QR en aplicaciones .NET. El paquete Iron Software, que incluye IronQR, es una colección de bibliotecas diseñadas para mejorar la programación .NET.

Características de IronQR

IronQR es una herramienta útil para los desarrolladores que trabajan con códigos QR debido a su amplio conjunto de funciones. He aquí algunos de sus atributos más destacados:

Generación de códigos QR

IronQR simplifica la creación de códigos QR. De forma rápida y eficaz, los desarrolladores pueden generar códigos QR a partir de texto, URL y otros tipos de datos.

• Códigos QR de calidad superior: La biblioteca produce códigos QR de alta calidad y resolución que resultan adecuados para diversas aplicaciones, como pantallas digitales e impresión.
• Opciones de personalización: Puedes cambiar los colores, tamaños, márgenes y otros aspectos del aspecto de los códigos QR.

Lectura de códigos QR

IronQR ofrece una potente funcionalidad para la lectura de códigos QR a partir de imágenes y secuencias.

• Compatibilidad con múltiples formatos: JPEG, PNG, BMP y GIF son sólo algunos de los formatos de imagen desde los que la biblioteca puede leer códigos QR.
• Corrección de errores: IronQR incorpora una sofisticada corrección de errores, por lo que puede leer correctamente los códigos QR aunque estén parcialmente rotos u oscurecidos.

Personalización avanzada

Con la amplia gama de posibilidades de personalización que ofrece IronQR, los desarrolladores pueden crear e interpretar códigos QR específicamente adaptados a sus necesidades.

• Estilos: Puedes añadir logotipos o fotos a los códigos QR y cambiar los colores de fondo y primer plano.
• Codificación de datos: Proporciona interoperabilidad con varios formatos de información al admitir múltiples opciones de codificación de datos.

Tratamiento por lotes

IronQR admite el procesamiento por lotes, lo que permite crear y leer varios códigos QR simultáneamente. Esta función puede resultar especialmente útil para las aplicaciones que necesitan gestionar de forma eficaz un gran número de códigos QR.

Rendimiento y eficacia

Gracias al diseño de alto rendimiento de la biblioteca, la creación y lectura de códigos QR puede hacerse rápidamente. Para las aplicaciones que necesitan procesar códigos QR en tiempo real, esto es crucial.

Integración con el ecosistema .NET

IronQR es fácil de usar con aplicaciones ASP.NET, Windows Forms, WPF y Xamarin, entre otros tipos de aplicaciones .NET, gracias a su perfecta integración con el entorno .NET.

Primeros pasos con la aplicación .NET MAUI

Es necesario instalar Visual Studio 2022 y el framework .NET 6 para crear una aplicación C#.NET MAUI. Entonces, para construir una aplicación .NET MAUI, sigue los siguientes pasos.

Abrir Visual Studio

Haga clic en el botón "Crear un nuevo proyecto" tras abrir Visual Studio. A continuación, utiliza la barra de búsqueda para buscar ".NET MAUI project"

Seleccione .NET MAUI App

Elige la plantilla de aplicación .NET MAUI de los resultados de búsqueda de Visual Studio. Una vez que lo hayas elegido, ponle un nombre apropiado y decide dónde se llevará a cabo el proyecto. Tras la configuración, pulse el botón "Siguiente".

Seleccionar marco

Elija el marco necesario; no obstante, se recomienda utilizar la versión más reciente de .NET Framework. Haga clic en "Crear" una vez que haya elegido la versión del framework en Visual Studio.

Instalar IronQR

Vaya a la consola del gestor de paquetes en Herramientas -> Gestor de paquetes NuGet. En el panel de línea de comandos que aparece, escriba el siguiente comando y pulse INTRO:

Install-Package IronQR

El comando mencionado instalará nuestra biblioteca en el proyecto en ejecución y la descargará.

Construir el escáner de códigos QR

La creación de la interfaz de usuario es la fase inicial del desarrollo del escáner de códigos QR. Un botón para iniciar el proceso de escaneado del código QR y una imagen para mostrar el código QR escaneado formarán parte de nuestra interfaz de usuario básica (INTERFAZ DE USUARIO) que construiremos usando XAML.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiQrScanner.MainPage">
    <StackLayout Padding="20" VerticalOptions="Center">
        <Button Text="Scan QR Code" Clicked="OnScanButtonClicked"/>
        <Image x:Name="QrCodeImage" WidthRequest="200" HeightRequest="200" VerticalOptions="CenterAndExpand"/>
        <Label x:Name="QrCodeResult" Text="Scan Result" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
    </StackLayout>
</ContentPage>

A continuación, debe implementarse la capacidad de utilizar IronQR para leer códigos QR. Escribiremos una función para manejar el evento de clic del botón y tomar una foto del código QR con la cámara del dispositivo.

Añada el siguiente código a MainPage.xaml.cs después de abrirlo:

using IronQr;
using IronSoftware.Drawing;
using Microsoft.Maui.Controls;
using System;
using System.IO;
using System.Threading.Tasks;

namespace MauiAppQR
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private async void OnScanButtonClicked(object sender, EventArgs e)
        {
            var result = await CaptureAndScanQrCode();
            QrCodeResult.Text = result ?? "No QR code found.";
        }

        private async Task<string> CaptureAndScanQrCode()
        {
            try
            {
                var photo = await MediaPicker.CapturePhotoAsync();
                if (photo == null)
                    return null;

                using var stream = await photo.OpenReadAsync();
                using var memoryStream = new MemoryStream();
                await stream.CopyToAsync(memoryStream);
                var imageData = memoryStream.ToArray();

                QrReader reader = new QrReader();
                var inputBmp = AnyBitmap.FromBytes(imageData);
                QrImageInput imageInput = new QrImageInput(inputBmp);

                var barcodeResult = reader.Read(imageInput);

                if (barcodeResult?.Count > 0)
                {
                    QrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(imageData));
                    return barcodeResult.First().Value;
                }
            }
            catch (Exception ex)
            {
                Console.WriteLine($"Error scanning QR code: {ex.Message}");
            }
            return null;
        }
    }
}

using IronQr;
using IronSoftware.Drawing;
using Microsoft.Maui.Controls;
using System;
using System.IO;
using System.Threading.Tasks;

namespace MauiAppQR
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private async void OnScanButtonClicked(object sender, EventArgs e)
        {
            var result = await CaptureAndScanQrCode();
            QrCodeResult.Text = result ?? "No QR code found.";
        }

        private async Task<string> CaptureAndScanQrCode()
        {
            try
            {
                var photo = await MediaPicker.CapturePhotoAsync();
                if (photo == null)
                    return null;

                using var stream = await photo.OpenReadAsync();
                using var memoryStream = new MemoryStream();
                await stream.CopyToAsync(memoryStream);
                var imageData = memoryStream.ToArray();

                QrReader reader = new QrReader();
                var inputBmp = AnyBitmap.FromBytes(imageData);
                QrImageInput imageInput = new QrImageInput(inputBmp);

                var barcodeResult = reader.Read(imageInput);

                if (barcodeResult?.Count > 0)
                {
                    QrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(imageData));
                    return barcodeResult.First().Value;
                }
            }
            catch (Exception ex)
            {
                Console.WriteLine($"Error scanning QR code: {ex.Message}");
            }
            return null;
        }
    }
}

Imports IronQr
Imports IronSoftware.Drawing
Imports Microsoft.Maui.Controls
Imports System
Imports System.IO
Imports System.Threading.Tasks

Namespace MauiAppQR
	Partial Public Class MainPage
		Inherits ContentPage

		Public Sub New()
			InitializeComponent()
		End Sub

		Private Async Sub OnScanButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
			Dim result = Await CaptureAndScanQrCode()
			QrCodeResult.Text = If(result, "No QR code found.")
		End Sub

		Private Async Function CaptureAndScanQrCode() As Task(Of String)
			Try
				Dim photo = Await MediaPicker.CapturePhotoAsync()
				If photo Is Nothing Then
					Return Nothing
				End If

				Dim stream = Await photo.OpenReadAsync()
				Dim memoryStream As New MemoryStream()
				Await stream.CopyToAsync(memoryStream)
				Dim imageData = memoryStream.ToArray()

				Dim reader As New QrReader()
				Dim inputBmp = AnyBitmap.FromBytes(imageData)
				Dim imageInput As New QrImageInput(inputBmp)

				Dim barcodeResult = reader.Read(imageInput)

				If barcodeResult?.Count > 0 Then
					QrCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(imageData))
					Return barcodeResult.First().Value
				End If
			Catch ex As Exception
				Console.WriteLine($"Error scanning QR code: {ex.Message}")
			End Try
			Return Nothing
		End Function
	End Class
End Namespace

• OnScanButtonClicked: Cuando un usuario pulsa el botón "Escanear código QR", se llama a este método. Para hacer una foto con la cámara del dispositivo y buscar códigos QR, invoca la función CaptureAndScanQrCode.

• capturar y escanear código QR: Este método utiliza la cámara del dispositivo para tomar una foto, y luego IronQR se utiliza para leer el código QR de la imagen.

  • MediaPicker.CapturePhotoAsync: Esta API utiliza la cámara del dispositivo para tomar una foto.

  • MemoryStream: Para facilitar la lectura por parte de IronQR, la imagen capturada se carga en un MemoryStream.

  • QrReader.Read: El método IronQR lee el código QR a partir de la información de la imagen.

  • imageSource: Si se localiza un código QR, el texto del código QR aparece en la etiquetaQrCodeResult, y la imagen se muestra en el elementoQrCodeImage`.

Gestión de permisos

Se necesita la autorización adecuada para acceder a la cámara del dispositivo. Realice las solicitudes de permisos necesarias actualizando los archivos del proyecto para iOS y Android.

Android

Accede a AndroidManifest.xml e incluye las autorizaciones correspondientes:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

Solicitar permisos en el MainActivity.cs:

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);
    Platform.Init(this, savedInstanceState);
    Xamarin.Essentials.Platform.RequestPermissions(this, new string[] 
    {
        Android.Manifest.Permission.Camera,
        Android.Manifest.Permission.WriteExternalStorage,
        Android.Manifest.Permission.ReadExternalStorage
    });
}

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);
    Platform.Init(this, savedInstanceState);
    Xamarin.Essentials.Platform.RequestPermissions(this, new string[] 
    {
        Android.Manifest.Permission.Camera,
        Android.Manifest.Permission.WriteExternalStorage,
        Android.Manifest.Permission.ReadExternalStorage
    });
}

Protected Overrides Sub OnCreate(ByVal savedInstanceState As Bundle)
	MyBase.OnCreate(savedInstanceState)
	Platform.Init(Me, savedInstanceState)
	Xamarin.Essentials.Platform.RequestPermissions(Me, New String() { Android.Manifest.Permission.Camera, Android.Manifest.Permission.WriteExternalStorage, Android.Manifest.Permission.ReadExternalStorage })
End Sub

A continuación se muestra la salida generada desde un entorno de máquina Windows.

Tras el escaneado, el resultado final se mostrará en la etiqueta.

Conclusión

Utilizar .NET MAUI e IronQR para crear un escáner de códigos QR .NET MAUI es un proceso sencillo que puede mejorar enormemente la funcionalidad de sus aplicaciones móviles. La sólida funcionalidad de IronQR para procesar códigos QR y las capacidades multiplataforma de .NET MAUI le permiten crear escáneres de códigos QR eficaces y fiables para Windows, iOS, macOS y Android.

IronQR y .NET MAUI juntos ofrecen un proceso de desarrollo sin problemas que le permite concentrarse en la creación de características de vanguardia y la producción de aplicaciones de primera categoría. Este tutorial ofrece una base sólida para empezar, independientemente de si está creando un sencillo escáner de códigos QR o una sofisticada aplicación con funciones de vanguardia para códigos QR.

Considere la posibilidad de utilizar IronQR para sus requisitos de código QR si desea agilizar aún más su proceso de desarrollo. Incluso en circunstancias difíciles, IronQR produce códigos QR nítidos y escalables con una gran capacidad de lectura. IronQR ofrece una solución que satisface sus necesidades específicas, con opciones de licencia personalizables adaptadas a desarrolladores individuales, pequeños equipos y grandes empresas. Visite Compre una licencia y consulte los detalles completos de precios, únase a los muchos desarrolladores que confían en Iron Software para sus herramientas de desarrollo esenciales y eleve sus aplicaciones con IronQR.

Para otros productos similares de la Iron Software Suite, el IronBarcode es la contrapartida para escanear códigos de barras. Con IronBarcode, puede integrar perfectamente en sus aplicaciones funciones de escaneado de códigos de barras de alto rendimiento, lo que lo convierte en una excelente opción para las necesidades relacionadas con el escaneado de códigos de barras.