MAUI 시작하기 - Barcode

MAUI(.NET Multi-platform App UI)를 이용하여 바코드를 생성하고 스캔하는 기능을 구현할 수 있습니다. 이 가이드에서는 MAUI와 관련 라이브러리를 사용하여 바코드를 생성하고, 카메라로 바코드를 스캔하는 간단한 애플리케이션을 만드는 방법을 설명합니다.

MAUI 애플리케이션 설정 및 바코드 기능 구현

개발 환경 설정

필수 설치 프로그램

• .NET SDK: .NET SDK 다운로드
• Visual Studio 2022: MAUI 개발을 위한 기본 IDE (최신 버전 사용 권장)
• 바코드 라이브러리: ZXing.Net.Maui 및 ZXing.Net.Maui.Controls

프로젝트 생성

1. Visual Studio 2022를 엽니다.

2. 새 프로젝트 생성을 클릭합니다.

3. .NET MAUI App (MAUI) 템플릿을 선택하고 프로젝트 이름을 MauiBarcodeApp으로 지정합니다.

4. 프로젝트 생성 위치를 설정하고 만들기 버튼을 클릭합니다.

바코드 생성

바코드를 생성하기 위해 ZXing.Net.Maui 라이브러리를 사용합니다. 이 라이브러리는 다양한 유형의 바코드를 생성할 수 있게 해줍니다.

NuGet 패키지 설치

1. 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 NuGet 패키지 관리를 선택합니다.

2. 찾기 탭에서 다음 패키지를 검색하여 설치합니다:

   • ZXing.Net.Maui
   • ZXing.Net.Maui.Controls

dotnet add package ZXing.Net.Maui
dotnet add package ZXing.Net.Maui.Controls

Program.cs 수정

Program.cs 파일에서 ZXing을 초기화합니다.

using ZXing.Net.Maui;

namespace MauiBarcodeApp
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .UseBarcodeReader() // ZXing을 초기화
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                });

            return builder.Build();
        }
    }
}

MainPage.xaml 수정

MainPage.xaml 파일을 열고 UI를 수정하여 바코드 생성을 위한 인터페이스를 추가합니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:zxing="clr-namespace:ZXing.Net.Maui.Controls;assembly=ZXing.Net.Maui"
             x:Class="MauiBarcodeApp.MainPage">

    <VerticalStackLayout Padding="10">
        <Label Text="Barcode Generator" FontSize="24" HorizontalOptions="Center" />

        <Entry x:Name="barcodeInputEntry" Placeholder="Enter text to generate Barcode" />

        <Button Text="Generate Barcode" Clicked="OnGenerateBarcodeClicked" />

        <zxing:BarcodeGeneratorView x:Name="barcodeGeneratorView" 
                                    BarcodeFormat="Code128"
                                    Value="{Binding Source={x:Reference barcodeInputEntry}, Path=Text}" 
                                    WidthRequest="200" 
                                    HeightRequest="100" />

        <Button Text="Open Barcode Scanner" Clicked="OnOpenScannerClicked" />
    </VerticalStackLayout>

</ContentPage>

MainPage.xaml.cs 구현

MainPage.xaml.cs 파일에서 버튼 클릭 이벤트를 처리합니다.

using Microsoft.Maui.Controls;
using System;
using ZXing.Net.Maui.Controls;

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

        private async void OnGenerateBarcodeClicked(object sender, EventArgs e)
        {
            if (string.IsNullOrWhiteSpace(barcodeInputEntry.Text))
            {
                await DisplayAlert("Error", "Please enter some text to generate a Barcode.", "OK");
            }
            else
            {
                barcodeGeneratorView.IsVisible = true;
            }
        }

        private async void OnOpenScannerClicked(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new ScanPage());
        }
    }
}

바코드 스캔

QR 코드를 스캔하기 위해 ZXing.Net.Maui 라이브러리를 사용합니다. 이 라이브러리는 카메라를 사용하여 QR 코드를 스캔할 수 있는 기능을 제공합니다.

바코드 스캔 페이지 구현

바코드를 스캔할 수 있는 페이지를 추가합니다. ScanPage.xaml 및 ScanPage.xaml.cs 파일을 생성합니다.

ScanPage.xaml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:zxing="clr-namespace:ZXing.Net.Maui.Controls;assembly=ZXing.Net.Maui"
             x:Class="MauiBarcodeApp.ScanPage">

    <VerticalStackLayout>
        <Label Text="Barcode Scanner" FontSize="24" HorizontalOptions="Center" />

        <zxing:CameraBarcodeReaderView x:Name="cameraBarcodeReaderView" 
                                       BarcodeDetected="CameraBarcodeReaderView_BarcodeDetected" 
                                       IsDetecting="true" />

        <Label x:Name="resultLabel" Text="Scanned Barcode result will appear here." HorizontalOptions="Center" />
    </VerticalStackLayout>

</ContentPage>

ScanPage.xaml.cs

using Microsoft.Maui.Controls;
using ZXing.Net.Maui;

namespace MauiBarcodeApp
{
    public partial class ScanPage : ContentPage
    {
        public ScanPage()
        {
            InitializeComponent();
        }

        private void CameraBarcodeReaderView_BarcodeDetected(object sender, BarcodeDetectionEventArgs e)
        {
            // 스캔된 바코드 결과를 UI 스레드에서 처리
            MainThread.BeginInvokeOnMainThread(() =>
            {
                resultLabel.Text = $"Barcode Detected: {e.Results[0].Value}";
            });
        }
    }
}

애플리케이션 실행 및 테스트

1. 애플리케이션 실행

   Visual Studio에서 디버그 버튼을 클릭하여 애플리케이션을 실행합니다. Android 에뮬레이터 또는 Windows Machine을 선택할 수 있습니다.

2. 바코드 생성 테스트

   • 텍스트를 입력한 후 Generate Barcode 버튼을 클릭하여 바코드를 생성합니다.
   • 생성된 바코드는 아래 이미지로 표시됩니다.

3. 바코드 스캔 테스트

   • Open Barcode Scanner 버튼을 클릭하여 바코드 스캐너 페이지로 이동합니다.
   • 카메라가 바코드를 스캔하면 결과가 화면에 표시됩니다.

요약

이 예제에서는 MAUI를 사용하여 바코드를 생성하고 스캔하는 애플리케이션을 만드는 방법을 설명했습니다. ZXing.Net.Maui 라이브러리를 사용하여 바코드를 생성하고, 카메라를 통해 바코드를 스캔하는 기능을 구현했습니다.

추가 참고 자료

• .NET MAUI 공식 문서
• ZXing.Net.Maui GitHub 리포지토리

추가적인 도움이 필요하시면 언제든지 문의해 주세요!