Como gerar um código QR em .NET MAUI

O que é .NET MAUI?

.NET MAUI (Multi-platform App UI) é uma evolução do framework Xamarin Forms que permite aos desenvolvedores criar interfaces de usuário nativas para várias plataformas usando uma única base de código. Com o .NET MAUI, você pode criar aplicativos para Android, iOS, macOS, Windows e mais, reduzindo o tempo e esforço de desenvolvimento.

Apresentando IronBarcode

IronBarcode é uma poderosa biblioteca de geração de código de barras e QR para aplicativos .NET. Ela oferece uma API fácil de usar para criar vários tipos de códigos de barras, incluindo códigos QR, com configurações personalizáveis como tamanho, correção de erros e opções de codificação.

Configurando o Projeto .NET MAUI

Para começar, precisamos criar um novo projeto .NET MAUI no Microsoft Visual Studio 2022. Você também pode usar o Microsoft Visual Studio Code, mas os passos serão diferentes. No entanto, é recomendado usar o Visual Studio. Siga os passos a seguir para criar o projeto.

Abra o Visual Studio 2022. A seguinte tela aparecerá conforme mostrado abaixo.

Clique em Criar um Novo Projeto e Pesquise o modelo MAUI conforme mostrado abaixo.

Selecione o Modelo de Aplicativo .NET MAUI e clique no botão Avançar. A seguinte janela será exibida.

Nomeie seu projeto, selecione o local e clique no botão Avançar, a janela seguinte aparecerá conforme mostrado abaixo.

Selecione .NET Framework. Eu selecionei .NET 7, você também pode selecionar .NET 6.0. O projeto será criado conforme mostrado abaixo.

Este tutorial foca principalmente na implantação inicial de uma aplicação .NET MAUI em uma máquina local com Windows. Você pode configurá-la em um simulador Android ou iOS conforme seu requisito com a mesma base de código.

Para implantar uma aplicação .NET MAUI na sua máquina local com Windows, você pode seguir estes passos usando o Visual Studio:

1. Certifique-se de que o destino de depuração está definido para "Máquina do Windows". Se não estiver, selecione "Máquina do Windows" no menu suspenso na barra de ferramentas.

2. Clique no botão "Iniciar Depuração" ou pressione F5 para compilar e executar o aplicativo em sua máquina com Windows.

   

Se o Modo Desenvolvedor não estiver ativado na sua máquina com Windows, o Visual Studio irá solicitar que você o ative. Para fazer isso, siga estes passos:

1. Na caixa de diálogo "Ativar Modo Desenvolvedor para Windows" exibida pelo Visual Studio, localize o link rotulado "configurações para desenvolvedores."

   

2. Clique no link "configurações para desenvolvedores". Isso abrirá o aplicativo Configurações na sua máquina com Windows.

3. Ative a chave sob Modo Desenvolvedor conforme mostrado abaixo.

   

Execute o Projeto uma vez que o modo desenvolvedor está ativado. A seguinte janela será exibida:

Este é o aplicativo modelo que é automaticamente criado pelo Visual Studio 2022 ao criar o projeto. Agora vamos instalar o IronBarcode e alterar o código conforme nossa necessidade.

Instalar IronBarcode

Para instalar IronBarcode, abra o Console do Gerenciador de Pacotes NuGet. Para abrir o Console do Gerenciador de Pacotes no Visual Studio, você pode seguir estes passos:

1. Inicie o Visual Studio na sua máquina Windows.
2. Abra o projeto com o qual deseja trabalhar ou crie um novo projeto.
3. No menu do Visual Studio, vá para "Ferramentas".
4. No menu suspenso, clique em "Gerenciador de Pacotes NuGet".
5. Outro menu suspenso aparecerá, e você deve selecionar "Console do Gerenciador de Pacotes".

A janela do Console do Gerenciador de Pacotes será aberta, fornecendo a você uma interface de linha de comando para gerenciar pacotes NuGet em seu projeto. Escreva o seguinte comando no Console do Gerenciador de Pacotes para instalar o IronBarcode.

Install-Package BarCode

Isso adicionará a biblioteca IronBarcode ao seu projeto e a tornará disponível para uso.

Gerador de Código QR .NET MAUI usando IronBarcode

Agora, vamos escrever o código para criar nosso próprio aplicativo móvel Gerador de Código QR. Para exibir o código QR gerado na tela, vamos aproveitar as capacidades do .NET MAUI. Abra o arquivo MainPage.xaml e substitua-o pelo seguinte 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>

O código XAML acima representa uma página .NET MAUI que gera códigos QR. Aqui está uma explicação simples dos componentes .NET MAUI:

• <Label>: Exibe texto na tela. Neste aplicativo, é usado para mostrar uma mensagem de boas-vindas e um cabeçalho para fornecer informações e instruções ao usuário.
• <Entry>: Fornece um campo de entrada de texto para o usuário. Neste aplicativo, permite que o usuário insira o conteúdo que deseja codificar em um código QR.
• <Image>: Exibe uma imagem na tela. Neste aplicativo, é usado para mostrar a imagem do código QR gerado ao usuário após eles clicarem no botão gerar.
• <Button>: Representa um botão clicável. Permite que o usuário dispare uma ação ao ser clicado. Nesta aplicação, o botão é usado para iniciar a geração do código QR com base no conteúdo inserido pelo usuário no campo <Entry>.

Esses componentes juntos criam uma interface onde o usuário pode inserir texto, clicar em um botão e ver o código QR correspondente exibido na tela.

Agora, vamos escrever o código de backend para gerar o Código QR. Abra o arquivo MainPage.xaml.cs e atualize a classe de código-por-trás conforme segue:

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));
        }
    }
}

Aqui está a explicação do código.

1. O método OnButtonClicked é um manipulador de eventos para o evento de clique de um botão. Quando o botão é clicado, este método é executado.
2. Dentro do método OnButtonClicked, o texto contido no campo de entrada qrCodeText é atribuído à variável texto.
3. QRCodeWriter.CreateQrCode(text) é usado para criar um código QR com base no texto inserido.
4. qrCode.ToJpegBinaryData() converte o código QR em dados binários JPEG.
5. qrCodeImage.Source = ImageSource.FromStream(() => new MemoryStream(qrCodeBytes)) define a fonte do controle qrCodeImage para exibir a imagem do código QR gerado.

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));
}

Gerador de Código de Barras .NET MAUI

Você também pode criar um gerador de Código de Barras .NET MAUI com a ajuda da biblioteca IronBarcode. Você só precisa fazer uma pequena alteração no código, e estará pronto para começar, conforme mostrado no exemplo de código a seguir.

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));
}

Conclusão

Neste artigo, aprendemos como criar um gerador de código QR e um Gerador de Código de Barras usando .NET MAUI e a biblioteca IronBarcode. Exploramos as etapas para instalar o IronBarcode, criar códigos QR e exibi-los na tela usando o controle de imagem do .NET MAUI.

.NET MAUI oferece um poderoso framework para construção de aplicativos multiplataforma, e o IronBarcode simplifica o processo de geração de códigos de barras e códigos QR. Combinando essas tecnologias, você pode criar aplicativos versáteis e eficientes que aproveitam os recursos de dispositivos modernos.