Cómo generar código QR en .NET MAUI

En este artículo, vamos a explorar cómo crear un generador de código QR utilizando .NET MAUI, un marco moderno para la construcción de aplicaciones multiplataforma. Aprovecharemos la librería IronBarcode para generar códigos QR y mostrarlos en pantalla.

¿Qué es .NET MAUI?

.NET MAUI (Interfaz de usuario multiplataforma) es una evolución del marco Xamarin Forms que permite a los desarrolladores crear interfaces de usuario nativas para varias plataformas utilizando un único código base. Con .NET MAUI, puede crear aplicaciones para Android, iOS, macOS, Windows y más, reduciendo el tiempo y el esfuerzo de desarrollo.

Presentación de IronBarcode

IronBarcode es una potente biblioteca de 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 ajustes personalizables como tamaño, corrección de errores y opciones de codificación.

Configuración del proyecto .NET MAUI

Para empezar, necesitamos crear un nuevo proyecto .NET MAUI en Microsoft Visual Studio 2022. También puede utilizar Microsoft Visual Studio Code, pero los pasos variarán. Sin embargo, se recomienda utilizar Visual Studio. Siga los siguientes pasos para crear el proyecto.

Abra 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 .NET MAUI App Template y haz clic en el botón Next. Aparecerá la siguiente ventana.

Nombre su proyecto, seleccione la ubicación y haga clic en el botón Siguiente, aparecerá la siguiente ventana como se muestra a continuación.

Seleccione .NET Framework. Yo he seleccionado .NET 7, usted también puede seleccionar .NET 6.0. El proyecto se creará como se muestra a continuación.

Este tutorial se centra principalmente en el despliegue inicial de una aplicación .NET MAUI en una máquina Windows local. Puede configurarlo en Android o iOS simulador según su requisito con la misma base de código.

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

1. Asegúrate de que el objetivo de depuración está configurado como "Máquina Windows". Si no lo está, selecciona "Máquina Windows" en el desplegable de la barra de herramientas.

2. Haga clic en el botón "Iniciar depuración" o pulse F5 para compilar y ejecutar la aplicación en su máquina Windows.

   

   Si el modo de desarrollador no está activado en su equipo Windows, Visual Studio le pedirá que lo active. Para ello, sigue estos pasos:

3. En el cuadro de diálogo "Activar el modo de desarrollador para Windows" que muestra Visual Studio, localice el enlace "configuración para desarrolladores".

   

4. Haga clic en el enlace "Configuración para desarrolladores". Esto abrirá la aplicación Configuración en su máquina Windows.

5. Encienda el interruptor en el modo de desarrollador como se muestra a continuación.

   

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

   

   Es la plantilla de aplicación que crea automáticamente Visual Studio 2022 al crear el proyecto. Ahora instalaremos IronBarcode y cambiaremos el código según nuestras necesidades.

Instalar IronBarcode

Para instalar IronBarcode Abra la consola del gestor de paquetes NuGet. Para abrir la consola del gestor de paquetes en Visual Studio, siga estos pasos:

1. Inicie Visual Studio en su equipo Windows.
2. Abra el proyecto con el que desea trabajar o cree uno nuevo.
3. En el menú de Visual Studio, vaya a "Herramientas".
4. En el menú desplegable, haga clic en "NuGet Package Manager".

5. Aparecerá otro menú desplegable y deberá seleccionar "Package Manager Console".

   Se abrirá la ventana Package Manager Console, que le proporciona una interfaz de línea de comandos para gestionar los paquetes NuGet en su proyecto. Escriba el siguiente comando Package Manager Console.

:PackageInstall

Esto añadirá la librería IronBarcode a su proyecto y la hará disponible para su uso.

.NET MAUI Generador de Códigos QR usando IronBarcode

Ahora, vamos a escribir el código para crear nuestra propia aplicación móvil QR Code Generator. Para mostrar el código QR generado en la pantalla, aprovecharemos las capacidades de .NET MAUI. Abra el archivo MainPage.xaml y sustitúyalo por 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 .NET MAUI que genera códigos QR. Aquí tienes una sencilla explicación de los componentes MAUI de .NET:

• <Label>: El propósito de la `.es mostrar 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>: El `Este componente se utiliza para proporcionar un campo de entrada de texto al usuario. En esta aplicación, permite al usuario introducir el contenido que desea codificar en un código QR.
• <Image>: El <Image>El componente se utiliza para mostrar 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 haga clic en el botón generar.

• <Button>: El <Button>representa un botón sobre el que se puede hacer clic. Permite al usuario desencadenar una acción al hacer clic. En esta aplicación, el botón se utiliza para iniciar la generación del código QR a partir del contenido introducido por el usuario en el campo` campo.

  El conjunto de estos componentes crea una interfaz en la que el usuario puede introducir texto, pulsar un botón y ver el código QR correspondiente en la pantalla.

  Ahora, vamos a escribir el código backend para generar el código QR. Ahora, abra el archivo MainPage.xaml.cs y actualice la clase code-behind de la siguiente manera:

using IronBarCode;

namespace QrCodeGeneratorMAUI;

public partial class MainPage : ContentPage
{

    public MainPage()
    {
        InitializeComponent();
    }

    private void OnButtonClicked(object sender, EventArgs e)
    {
        string text = qrCodeText.Text;
        var qrCode = QRCodeWriter.CreateQrCode(text);
        var qrCodeBytes = qrCode.ToJpegBinaryData();
        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)
    {
        string text = qrCodeText.Text;
        var qrCode = QRCodeWriter.CreateQrCode(text);
        var qrCodeBytes = qrCode.ToJpegBinaryData();
        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)
			Dim text As String = qrCodeText.Text
			Dim qrCode = QRCodeWriter.CreateQrCode(text)
			Dim qrCodeBytes = qrCode.ToJpegBinaryData()
			qrCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
		End Sub
	End Class
End Namespace

He aquí la explicación del código.

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

Ejecutar la aplicación .NET MAUI

Vamos a ejecutar el proyecto para probar la funcionalidad. Pulse F5 para ejecutar la aplicación en la máquina Windows. Al ejecutar el proyecto aparecerá la siguiente pantalla.

Introduzca el texto que desea codificar en el archivo de texto y pulse el botón Generar código QR. El código QR se generará y se mostrará en la pantalla como se muestra a continuación.

Añadir anotación y valor de código QR

Ahora, hemos desarrollado QR Code Generator con funcionalidades básicas. Hagámoslo más funcional añadiendo Anotación de Código QR y Valor de Código QR a nuestro Código QR. Altere el método OnButtonClicked como se muestra en el siguiente código fuente.

private void OnButtonClicked(object sender, EventArgs e)
{
    string text = qrCodeText.Text;
    var qrCode = QRCodeWriter.CreateQrCode(text);
    qrCode.AddBarcodeValueTextBelowBarcode();
    qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");
    var qrCodeBytes = qrCode.ToJpegBinaryData();
    qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

private void OnButtonClicked(object sender, EventArgs e)
{
    string text = qrCodeText.Text;
    var qrCode = QRCodeWriter.CreateQrCode(text);
    qrCode.AddBarcodeValueTextBelowBarcode();
    qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");
    var qrCodeBytes = qrCode.ToJpegBinaryData();
    qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
}

Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
	Dim text As String = qrCodeText.Text
	Dim qrCode = QRCodeWriter.CreateQrCode(text)
	qrCode.AddBarcodeValueTextBelowBarcode()
	qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App")
	Dim qrCodeBytes = qrCode.ToJpegBinaryData()
	qrCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
End Sub

• qrCode.AddBarcodeValueTextBelowBarcode() añade el texto del valor del código QR debajo del código de barras generado.

• qrCode.AddAnnotationTextAboveBarcode("Mi código QR generado por la aplicación .NET MAUI") añade un texto de anotación encima del código de barras, especificando que fue generado por una aplicación .NET MAUI.

  Visual Studio 2022 proporciona una opción de recarga en caliente para .NET MAUI App. Después de cambiar el OnButtonClicked, puede hacer clic en Hot reload, y los cambios aparecerán, puede que no necesite cerrar y reconstruir la aplicación.

  Introduzca el texto que desea codificar y pulse el botón Generar código QR. El código QR se generará como se muestra a continuación.

  

  IronBarcode proporciona otras funcionalidades útiles como añadir imágenes, colorear y redimensionar el código QR, etc. Para obtener más información tutoriales y ejemplos de código puede consultar su documentación oficial.

Generador de código de barras .NET MAUI

También puede crear un generador de código de barras .NET MAUI con la ayuda de la librería IronBarcode. Sólo tienes que cambiar un poco en un código, y estamos listos para ir como se muestra en el siguiente ejemplo de código.

private void OnButtonClicked(object sender, EventArgs e)
    {
        string text = barCodeText.Text;
        var barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128);
        barCode.AddBarcodeValueTextBelowBarcode();
        barCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");
        var qrCodeBytes = barCode.ToJpegBinaryData();
        barCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
    }

private void OnButtonClicked(object sender, EventArgs e)
    {
        string text = barCodeText.Text;
        var barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128);
        barCode.AddBarcodeValueTextBelowBarcode();
        barCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App");
        var qrCodeBytes = barCode.ToJpegBinaryData();
        barCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes));
    }

Private Sub OnButtonClicked(ByVal sender As Object, ByVal e As EventArgs)
		Dim text As String = barCodeText.Text
		Dim barCode = BarcodeWriter.CreateBarcode(text, BarcodeEncoding.Code128)
		barCode.AddBarcodeValueTextBelowBarcode()
		barCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App")
		Dim qrCodeBytes = barCode.ToJpegBinaryData()
		barCodeImage.Source = ImageSource.FromStream(Function() New MemoryStream(qrCodeBytes))
End Sub

Salida

Además de aprender a crear un generador de códigos QR utilizando .NET MAUI y la biblioteca IronBarcode, merece la pena mencionar el aspecto del precio de IronBarcode.

IronBarcode es gratuito para el desarrollo y ofrece un prueba gratuita y diferentes planes de precios que se adaptan a las distintas necesidades con fines comerciales. Los precios se basan en opciones de licencia que incluyen licencias perpetuas para la implantación local y licencias por suscripción para la implantación en la nube.

Conclusión

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

.NET MAUI proporciona un potente marco para crear aplicaciones multiplataforma, e IronBarcode simplifica el proceso de generación de códigos de barras y códigos QR. La combinación de estas tecnologías permite crear aplicaciones versátiles y eficaces que aprovechan las capacidades de los dispositivos modernos.