Comment générer un code QR dans .NET MAUI

Dans cet article, nous verrons comment créer un générateur de code QR à l'aide de .NET MAUI, un cadre moderne pour la création d'applications multiplateformes. Nous nous appuierons sur la bibliothèque IronBarcode pour générer des codes QR et les afficher à l'écran.

Qu'est-ce que .NET MAUI ?

.NET MAUI (Multi-platform App UI) est une évolution du framework Xamarin Forms qui permet aux développeurs de créer des interfaces utilisateur natives pour plusieurs plateformes à partir d'une base de code unique. Avec .NET MAUI, vous pouvez créer des applications Android, iOS, macOS, Windows et plus encore, en réduisant le temps et les efforts de développement.

Présentation d'IronBarcode

IronBarcode est une bibliothèque puissante de génération de codes-barres et de codes QR pour les applications .NET. Il fournit une API facile à utiliser pour créer différents types de codes-barres, y compris des codes QR, avec des paramètres personnalisables tels que la taille, la correction d'erreur et les options d'encodage.

Configuration du projet .NET MAUI

Pour commencer, nous devons créer un nouveau projet .NET MAUI dans Microsoft Visual Studio 2022. Vous pouvez également utiliser Microsoft Visual Studio Code, mais les étapes varieront. Il est toutefois recommandé d'utiliser Visual Studio. Suivez les étapes suivantes pour créer le projet.

Ouvrez Visual Studio 2022. L'écran suivant s'affiche comme indiqué ci-dessous.

Cliquez sur Créer un nouveau projet et recherchez le modèle MAUI comme indiqué ci-dessous.

Sélectionnez .NET MAUI App Template et cliquez sur le bouton Next. La fenêtre suivante apparaît.

Nommez votre projet, sélectionnez l'emplacement, et cliquez sur le bouton Suivant, la fenêtre suivante apparaîtra comme indiqué ci-dessous.

Sélectionnez .NET Framework. J'ai sélectionné .NET 7, vous pouvez également sélectionner .NET 6.0. Le projet sera créé comme indiqué ci-dessous.

Ce tutoriel se concentre principalement sur le déploiement initial d'une application .NET MAUI sur une machine Windows locale. Vous pouvez la configurer sur un simulateur Android ou iOS selon vos besoins avec la même base de code.

Pour déployer une application .NET MAUI sur votre machine Windows locale, vous pouvez suivre les étapes suivantes à l'aide de Visual Studio :

1. Assurez-vous que la cible de débogage est définie sur "Windows Machine" Si ce n'est pas le cas, sélectionnez "Windows Machine" dans le menu déroulant de la barre d'outils.

2. Cliquez sur le bouton "Start Debugging" ou appuyez sur F5 pour créer et exécuter l'application sur votre machine Windows.

   

   Si le mode développeur n'est pas activé sur votre machine Windows, Visual Studio vous demandera de l'activer. Pour ce faire, suivez les étapes suivantes :

3. Dans la boîte de dialogue "Enable Developer Mode for Windows" affichée par Visual Studio, localisez le lien intitulé "settings for developers" (paramètres pour les développeurs)

   

4. Cliquez sur le lien "settings for developers". Cela ouvrira l'application Paramètres sur votre machine Windows.

5. Activez la bascule sous le mode développeur comme indiqué ci-dessous.

   

   Exécutez le projet une fois que le mode développeur est activé. La fenêtre suivante apparaît :

   

   Il s'agit de l'application modèle qui est automatiquement créée par Visual Studio 2022 lors de la création du projet. Nous allons maintenant installer IronBarcode et modifier le code en fonction de nos besoins.

Installer IronBarcode

Pour installer IronBarcode, ouvrez la Console du Gestionnaire de Packages NuGet. Pour ouvrir la console du gestionnaire de paquets dans Visual Studio, procédez comme suit :

1. Lancez Visual Studio sur votre machine Windows.

2. Ouvrez le projet sur lequel vous souhaitez travailler ou créez un nouveau projet.

3. Dans le menu Visual Studio, cliquez sur "Outils".

4. Dans le menu déroulant, cliquez sur "NuGet Package Manager".

5. Un autre menu déroulant apparaît, et vous devez sélectionner "Package Manager Console".

   La fenêtre de la console du gestionnaire de paquets s'ouvre, vous offrant une interface de ligne de commande pour gérer les paquets NuGet dans votre projet. Ecrivez la commande suivante Package Manager Console.

:PackageInstall

Cela ajoutera la bibliothèque IronBarcode à votre projet et la rendra utilisable.

.NET MAUI QR Code Generator using IronBarcode for .NET

Maintenant, écrivons le code pour créer notre propre application mobile QR Code Generator. Pour afficher le code QR généré sur l'écran, nous allons exploiter les capacités de .NET MAUI. Ouvrez le fichier MainPage.xaml et remplacez-le par le code suivant.

<?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>

Le code XAML ci-dessus représente une page MAUI .NET qui génère des codes QR. Voici une explication simple des composants .NET MAUI :

• <Label> : Le but du composant <Label> est d'afficher du texte à l'écran. Dans cette application, il est utilisé pour afficher un message de bienvenue et un titre pour fournir des informations et des instructions à l'utilisateur.
• <Entry> : Le composant <Entry> est utilisé pour fournir un champ de saisie de texte à l'utilisateur. Dans cette application, il permet à l'utilisateur de saisir le contenu qu'il souhaite encoder dans un code QR.
• <Image> : Le composant <Image> est utilisé pour afficher une image à l'écran. Dans cette application, il est utilisé pour montrer l'image du code QR généré à l'utilisateur après qu'il ait cliqué sur le bouton de génération.

• <Button> : Le composant <Button> représente un bouton cliquable. Il permet à l'utilisateur de déclencher une action lorsqu'il clique dessus. Dans cette application, le bouton est utilisé pour initier la génération du code QR basé sur le contenu saisi par l'utilisateur dans le champ <Entry>.

  L'ensemble de ces composants crée une interface où l'utilisateur peut saisir un texte, cliquer sur un bouton et voir le code QR correspondant s'afficher à l'écran.

  Maintenant, écrivons le code backend pour générer le code QR. Ouvrez maintenant le fichier MainPage.xaml.cs et mettez à jour la classe code-behind comme suit :

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

Voici l'explication du code.

1. La méthode OnButtonClicked est un gestionnaire d'événements pour l'événement de clic d'un bouton. Lorsque le bouton est cliqué, cette méthode est exécutée.

2. À l'intérieur de la méthode OnButtonClicked, le texte contenu dans le champ d'entrée qrCodeText est assigné à la variable texte.

3. QRCodeWriter.CreateQrCode(text) est utilisé pour créer un code QR basé sur le texte saisi.

4. qrCode.ToJpegBinaryData() convertit le code QR en données JPEG binaires.

5. qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes)) définit la source du contrôle qrCodeImage pour afficher l'image du code QR générée.

Exécuter l'application .NET MAUI

Exécutons le projet pour en tester la fonctionnalité. Appuyez sur F5 pour lancer l'application sur la machine Windows. L'écran suivant apparaît lors de l'exécution du projet.

Saisissez le texte que vous souhaitez encoder dans le fichier texte et appuyez sur le bouton Générer un code QR. Le code QR sera généré et affiché à l'écran comme indiqué ci-dessous.

Ajouter une annotation et une valeur de code QR

Nous avons développé un générateur de code QR avec des fonctionnalités de base. Rendons-le plus fonctionnel en ajoutant l'annotation et la valeur du code QR à notre code QR. Modifiez la méthode OnButtonClicked comme indiqué dans le code source suivant.

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() ajoute le texte de la valeur du code QR sous le code-barres généré.

• qrCode.AddAnnotationTextAboveBarcode("My QR Code Generated by .NET MAUI App") ajoute un texte d'annotation au-dessus du code-barres, indiquant qu'il a été généré par une application .NET MAUI.

  Visual Studio 2022 offre une option de rechargement à chaud pour .NET MAUI App. Après avoir modifié le OnButtonClicked, vous pouvez cliquer sur le rechargement à chaud, et les modifications apparaîtront, vous n'aurez peut-être pas besoin de fermer et de reconstruire l'application.

  Saisissez le texte que vous souhaitez encoder et appuyez sur le bouton Générer un code QR. Le code QR sera généré comme indiqué ci-dessous.

  

  IronBarcode offre d'autres fonctionnalités utiles telles que l'ajout d'images, la colorisation et le redimensionnement du code QR, etc. Pour des tutoriels et des exemples de code plus détaillés, vous pouvez vous référer à leur documentation officielle.

.NET MAUI Barcode Generator (Générateur de code-barres MAUI)

Vous pouvez également créer un générateur de codes-barres IronBarcode for .NET à l'aide de la bibliothèque IronBarcode. Il suffit de modifier un peu le code, et nous sommes prêts, comme le montre l'exemple de code suivant.

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

Sortie

Outre l'apprentissage de la création d'un générateur de code QR à l'aide de .NET MAUI et de la bibliothèque IronBarcode, il convient de mentionner l'aspect tarifaire d'IronBarcode.

IronBarcode est gratuit pour le développement et offre une version d'essai gratuite ainsi que différents plans tarifaires pour répondre à divers besoins à des fins commerciales. La tarification est basée sur les options de licence, qui incluent des licences perpétuelles pour le déploiement sur site ainsi que des licences basées sur un abonnement pour les déploiements dans le cloud.

Conclusion

Dans cet article, nous avons appris comment créer un générateur de code QR et un générateur de code-barres en utilisant .NET MAUI et la bibliothèque IronBarcode. Nous avons exploré les étapes pour installer IronBarcode, créer des codes QR et les afficher à l'écran en utilisant le contrôle d'image de .NET MAUI.

.NET MAUI fournit un cadre puissant pour la création d'applications multiplateformes, et IronBarcode simplifie le processus de génération de codes-barres et de codes QR. En combinant ces technologies, vous pouvez créer des applications polyvalentes et efficaces qui exploitent les capacités des appareils modernes.