Cómo Generar Código QR en .NET MAUI

¿Qué es .NET MAUI?

.NET MAUI (Interfaz de Usuario de Aplicaciones Multiplataforma) es una evolución del framework Xamarin Forms que permite a los desarrolladores construir interfaces de usuario nativas para múltiples plataformas usando una sola base de código. Con .NET MAUI, puedes crear aplicaciones para Android, iOS, macOS, Windows y más, reduciendo el tiempo y esfuerzo de desarrollo.

Presentamos IronBarcode

IronBarcode es una poderosa biblioteca para la generación de códigos de barras y códigos QR para aplicaciones .NET. Proporciona una API fácil de usar para crear varios tipos de códigos de barras, incluidos códigos QR, con configuraciones personalizables como tamaño, corrección de errores y opciones de codificación.

Configuración del proyecto .NET MAUI

Para comenzar, necesitamos crear un nuevo proyecto .NET MAUI en Microsoft Visual Studio 2022. También puedes usar Microsoft Visual Studio Code, pero los pasos variarán. Sin embargo, se recomienda usar Visual Studio. Sigue los siguientes pasos para crear el proyecto.

Abre Visual Studio 2022. Aparecerá la siguiente pantalla como se muestra a continuación.

Haz clic en Crear un Nuevo Proyecto y Busca la plantilla MAUI como se muestra a continuación.

Selecciona la Plantilla de Aplicación .NET MAUI y haz clic en el Botón Siguiente. Aparecerá la siguiente ventana.

Nombra tu proyecto, selecciona la ubicación y haz clic en el Botón Siguiente, aparecerá la siguiente ventana como se muestra a continuación.

Selecciona .NET Framework. He seleccionado .NET 7, también puedes seleccionar .NET 6.0. El proyecto se creará como se muestra a continuación.

Este tutorial se centra principalmente en la implementación inicial de una aplicación .NET MAUI en una máquina local de Windows. Puedes configurarla en un simulador de Android o iOS según tus requisitos con la misma base de código.

Para implementar una aplicación .NET MAUI en tu máquina local de Windows, puedes seguir estos pasos usando Visual Studio:

1. Asegúrate de que el objetivo de depuración esté configurado como "Windows Machine". Si no lo está, selecciona "Windows Machine" del desplegable en la barra de herramientas.
2. Haz clic en el botón "Iniciar Depuración" o presiona F5 para compilar y ejecutar la aplicación en tu máquina de Windows.

Si el modo de desarrollador no está habilitado en tu máquina de Windows, Visual Studio te pedirá que lo habilites. Para hacer esto, sigue estos pasos:

1. En el cuadro de diálogo "Habilitar el Modo de Desarrollador para Windows" mostrado por Visual Studio, localiza el enlace etiquetado como "configuración para desarrolladores".

2. Haz clic en el enlace "configuración para desarrolladores". Esto abrirá la aplicación de Configuración en tu máquina de Windows.
3. Activa el interruptor bajo Modo de Desarrollador como se muestra a continuación.

Ejecuta el Proyecto una vez activado el modo de desarrollador. Aparecerá la siguiente ventana:

Esta es la aplicación de plantilla que se crea automáticamente por Visual Studio 2022 al crear el proyecto. Ahora instalaremos IronBarcode y cambiaremos el código según nuestros requisitos.

Instalar IronBarcode

Para instalar IronBarcode, abre la Consola del Administrador de Paquetes NuGet. Para abrir la Consola del Administrador de Paquetes en Visual Studio, puedes seguir estos pasos:

1. Inicia Visual Studio en tu máquina de Windows.
2. Abre el proyecto con el que deseas trabajar o crea un nuevo proyecto.
3. En el menú de Visual Studio, ve a "Herramientas".
4. En el menú desplegable, haz clic en "Administrador de Paquetes NuGet".
5. Aparecerá otro menú desplegable, y debes seleccionar "Consola del Administrador de Paquetes".

La ventana de la Consola del Administrador de Paquetes se abrirá, proporcionándote una interfaz de línea de comandos para gestionar paquetes NuGet en tu proyecto. Escribe el siguiente comando en la Consola del Administrador de Paquetes para instalar IronBarcode.

Install-Package BarCode

Esto añadirá la biblioteca IronBarcode a tu proyecto y la hará disponible para su uso.

Generador de códigos QR .NET MAUI con IronBarcode

Ahora, escribamos el código para crear nuestra propia aplicación móvil generadora de códigos QR. Para mostrar el código QR generado en la pantalla, aprovecharemos las capacidades de .NET MAUI. Abre el archivo MainPage.xaml y reemplázalo con el siguiente código.

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="QrCodeGeneratorMAUI.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Label
                Text="Hello!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Welcome to QR Code Generator .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to QR Code Generator dot Net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Entry x:Name="qrCodeText"
                   Placeholder="Enter QR Code"/>

            <Image
                x:Name="qrCodeImage"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Button
                x:Name="CounterBtn"
                Text="Generate QR Code"
                Clicked="OnButtonClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="QrCodeGeneratorMAUI.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Label
                Text="Hello!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label
                Text="Welcome to QR Code Generator .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to QR Code Generator dot Net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

            <Entry x:Name="qrCodeText"
                   Placeholder="Enter QR Code"/>

            <Image
                x:Name="qrCodeImage"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Button
                x:Name="CounterBtn"
                Text="Generate QR Code"
                Clicked="OnButtonClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

El código XAML anterior representa una página de .NET MAUI que genera códigos QR. Aquí tienes una explicación sencilla de los componentes de .NET MAUI:

• <Label>: Muestra texto en la pantalla. En esta aplicación, se utiliza para mostrar un mensaje de bienvenida y un encabezado para proporcionar información e instrucciones al usuario.
• <Entry>: Proporciona un campo de entrada de texto para el usuario. En esta aplicación, permite al usuario ingresar el contenido que desea codificar en un código QR.
• <Image>: Muestra una imagen en la pantalla. En esta aplicación, se utiliza para mostrar la imagen del código QR generado al usuario después de que hagan clic en el botón de generar.
• <Button>: Representa un botón clicable. Permite al usuario desencadenar una acción cuando se hace clic. En esta aplicación, el botón se usa para iniciar la generación del código QR basado en el contenido ingresado por el usuario en el campo <Entry>.

Estos componentes juntos crean una interfaz donde el usuario puede ingresar texto, hacer clic en un botón y ver el código QR correspondiente mostrado en la pantalla.

Ahora, escribamos el código de backend para generar el Código QR. Abre el archivo MainPage.xaml.cs y actualiza la clase de código subyacente de la siguiente manera:

using IronBarCode;

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

        private void OnButtonClicked(object sender, EventArgs e)
        {
            // Get the text from the entry field
            string text = qrCodeText.Text;

            // Generate the QR code using the IronBarcode library
            var qrCode = QRCodeWriter.CreateQrCode(text);

            // Convert the QR code to binary JPEG data
            var qrCodeBytes = qrCode.ToJpegBinaryData();

            // Set the QR code image source to display the generated QR code on the UI
            qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
        }
    }
}

using IronBarCode;

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

        private void OnButtonClicked(object sender, EventArgs e)
        {
            // Get the text from the entry field
            string text = qrCodeText.Text;

            // Generate the QR code using the IronBarcode library
            var qrCode = QRCodeWriter.CreateQrCode(text);

            // Convert the QR code to binary JPEG data
            var qrCodeBytes = qrCode.ToJpegBinaryData();

            // Set the QR code image source to display the generated QR code on the UI
            qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
        }
    }
}

Imports IronBarCode

Namespace QrCodeGeneratorMAUI
	Partial Public Class MainPage
		Inherits ContentPage

		Public Sub New()
			InitializeComponent()
		End Sub

		Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
			' Get the text from the entry field
			Dim text As String = qrCodeText.Text

			' Generate the QR code using the IronBarcode library
			Dim qrCode = QRCodeWriter.CreateQrCode(text)

			' Convert the QR code to binary JPEG data
			Dim qrCodeBytes = qrCode.ToJpegBinaryData()

			' Set the QR code image source to display the generated QR code on the UI
			qrCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
		End Sub
	End Class
End Namespace

Aquí está la explicación del código.

1. El método OnButtonClicked es un controlador de eventos para el evento de clic de un botón. Cuando se hace clic en el botón, este método se ejecuta.
2. Dentro del método OnButtonClicked, el texto contenido en el campo de entrada qrCodeText se asigna a la variable text.
3. QRCodeWriter.CreateQrCode(text) se utiliza para crear un código QR basado en el texto ingresado.
4. qrCode.ToJpegBinaryData() convierte el código QR en datos binarios JPEG.
5. qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes)) establece la fuente del control qrCodeImage para mostrar la imagen del código QR generado.

private void OnButtonClicked(object sender, EventArgs e)
{
    // Get the text from the entry field
    string text = qrCodeText.Text;

    // Generate the QR code using the IronBarcode library
    var qrCode = QRCodeWriter.CreateQrCode(text);

    // Add the text of the QR code value below the generated barcode
    qrCode.AddBarcodeValueTextBelowBarcode();

    // Add an annotation text above the barcode
    qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");

    // Convert the QR code to binary JPEG data
    var qrCodeBytes = qrCode.ToJpegBinaryData();

    // Set the QR code image source to display the generated QR code on the UI
    qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

private void OnButtonClicked(object sender, EventArgs e)
{
    // Get the text from the entry field
    string text = qrCodeText.Text;

    // Generate the QR code using the IronBarcode library
    var qrCode = QRCodeWriter.CreateQrCode(text);

    // Add the text of the QR code value below the generated barcode
    qrCode.AddBarcodeValueTextBelowBarcode();

    // Add an annotation text above the barcode
    qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");

    // Convert the QR code to binary JPEG data
    var qrCodeBytes = qrCode.ToJpegBinaryData();

    // Set the QR code image source to display the generated QR code on the UI
    qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
	' Get the text from the entry field
	Dim text As String = qrCodeText.Text

	' Generate the QR code using the IronBarcode library
	Dim qrCode = QRCodeWriter.CreateQrCode(text)

	' Add the text of the QR code value below the generated barcode
	qrCode.AddBarcodeValueTextBelowBarcode()

	' Add an annotation text above the barcode
	qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App")

	' Convert the QR code to binary JPEG data
	Dim qrCodeBytes = qrCode.ToJpegBinaryData()

	' Set the QR code image source to display the generated QR code on the UI
	qrCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
End Sub

Generador de códigos de barras .NET MAUI

También puede crear un generador de Códigos de Barras .NET MAUI con la ayuda de la biblioteca IronBarcode. Solo necesitas cambiar un poco el código, y estás listo para comenzar como se muestra en el siguiente ejemplo de código.

private void OnButtonClicked(object sender, EventArgs e)
{
    // Get the text from the entry field
    string text = barCodeText.Text;

    // Generate the barcode using the IronBarcode library with Code128 encoding
    var barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128);

    // Add the text of the barcode value below the generated barcode
    barCode.AddBarcodeValueTextBelowBarcode();

    // Add an annotation text above the barcode
    barCode.AddAnnotationTextAboveBarcode("My Barcode Generated by .NET MAUI App");

    // Convert the barcode to binary JPEG data
    var qrCodeBytes = barCode.ToJpegBinaryData();

    // Set the barcode image source to display the generated barcode on the UI
    barCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

private void OnButtonClicked(object sender, EventArgs e)
{
    // Get the text from the entry field
    string text = barCodeText.Text;

    // Generate the barcode using the IronBarcode library with Code128 encoding
    var barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128);

    // Add the text of the barcode value below the generated barcode
    barCode.AddBarcodeValueTextBelowBarcode();

    // Add an annotation text above the barcode
    barCode.AddAnnotationTextAboveBarcode("My Barcode Generated by .NET MAUI App");

    // Convert the barcode to binary JPEG data
    var qrCodeBytes = barCode.ToJpegBinaryData();

    // Set the barcode image source to display the generated barcode on the UI
    barCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
	' Get the text from the entry field
	Dim text As String = barCodeText.Text

	' Generate the barcode using the IronBarcode library with Code128 encoding
	Dim barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128)

	' Add the text of the barcode value below the generated barcode
	barCode.AddBarcodeValueTextBelowBarcode()

	' Add an annotation text above the barcode
	barCode.AddAnnotationTextAboveBarcode("My Barcode Generated by .NET MAUI App")

	' Convert the barcode to binary JPEG data
	Dim qrCodeBytes = barCode.ToJpegBinaryData()

	' Set the barcode image source to display the generated barcode on the UI
	barCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
End Sub

Conclusión

En este artículo, aprendimos a crear un generador de códigos QR y un Generador de Códigos de Barras usando .NET MAUI y la biblioteca IronBarcode. Exploramos los pasos para instalar IronBarcode, crear códigos QR y mostrarlos en la pantalla usando el control de imagen de .NET MAUI.

.NET MAUI proporciona un poderoso framework para construir aplicaciones multiplataforma, e IronBarcode simplifica el proceso de generar códigos de barras y códigos QR. Combinando estas tecnologías, puedes crear aplicaciones versátiles y eficientes que aprovechan las capacidades de los dispositivos modernos.