Blazor QR 코드 스캐너 만드는 방법

Blazor Server란 무엇인가요?

Blazor Server는 ASP.NET Core 플랫폼의 일부인 웹 애플리케이션 프레임워크입니다. 개발자가 JavaScript 대신 C#을 사용하여 인터랙티브한 웹 UI를 구축할 수 있도록 합니다. 이 서버 측 모델은 사용자 상호 작용을 SignalR 연결을 통해 처리하여 실시간 웹 기능을 제공합니다. 이는 개발자가 효과적이고 상호적으로 작동하는 웹 앱을 만들 수 있게 도와줍니다.

IronQR 소개

IronQR은 .NET 라이브러리로, 높은 정확도로 QR 코드를 읽고, 해석하고, 생성할 수 있도록 한다는 점에서 두드러집니다. 다양한 유형의 QR 코드 콘텐츠를 처리할 수 있는 기능을 포함한 다양한 기능을 제공합니다. IronQR의 강점은 간단함과 .NET 애플리케이션에 대한 용이한 통합에 있으며, QR 코드 기능을 통합하고 생성하려는 개발자에게 기본 선택이 됩니다.

새 Blazor 서버 애플리케이션 만들기

Visual Studio를 시작하고 '새 프로젝트 만들기'를 선택합니다. 프로젝트 템플릿 선택 화면에서 'Blazor Server App' 템플릿을 찾아 선택합니다. 다음을 클릭합니다.

템플릿을 선택한 후 프로젝트 이름 및 위치를 입력하고 (기타 모든 것은 기본값으로 유지) 다음 버튼을 클릭합니다.

원하는 .NET Framework를 선택하고 생성 버튼을 누릅니다. Blazor 서버 응용 프로그램이 생성됩니다.

IronQR 라이브러리 설치

메뉴 바에서 도구를 클릭합니다. 드롭다운 메뉴에서 NuGet 패키지 관리자를 선택합니다. 컨텍스트 메뉴에서 '솔루션용 NuGet 패키지 관리'를 선택합니다. 이는 NuGet 패키지 관리자 탭을 엽니다.

NuGet 패키지 관리자에서 'IronQR'을 '탐색' 탭에서 검색합니다. 그런 다음 목록에서 'IronQR' 패키지를 찾습니다. '설치' 버튼을 클릭합니다.

이제 모든 것을 설치했으니 프로젝트 구조를 살펴보고 모든 것을 당신의 프로젝트에 구현할 수 있습니다.

사용자 인터페이스 구축

QR 코드 스캐너의 사용자 인터페이스는 주로 Index.razor 파일에서 구축됩니다. 이 파일은 Blazor 서버 프로젝트의 일부로, HTML과 Razor 문법의 조합을 사용하여 동적이고 상호작용하는 웹 페이지를 만듭니다. 구조는 다음을 포함합니다:

@page "/"
@using System.IO
@using Microsoft.AspNetCore.Components.Forms
@using IronQr
@using IronSoftware.Drawing
@inject IJSRuntime JSRuntime
<PageTitle>QR Code Scanner</PageTitle>
<div>
    <h1>QR Code Scanner</h1> 
    <InputFile OnChange="HandleSelectedFile" accept="image/*" class="file-input" />
    @if (!string.IsNullOrEmpty(qrImageSrcForDisplay))
    {
        <img src="@qrImageSrcForDisplay" alt="QR Code Image" class="qr-image" />
    }
    <button @onclick="ScanQRCode" disabled="@(!fileSelected)" class="button scan-button">Scan QR Code</button>
    @if (!string.IsNullOrEmpty(scannedText))
    {
        <div class="result-section">
            <input type="text" value="@scannedText" readonly class="result-input" />
            <button @onclick="CopyToClipboard" class="button copy-button">Copy</button>
        </div>
    }
</div>

제목 및 제목: <PageTitle> 및 <h1> 태그는 각각 페이지의 제목과 주요 제목을 정의하여 사용자에게 문맥을 설정합니다.

이미지 업로드 컨트롤: <InputFile> 구성 요소는 QR 코드 이미지를 업로드하는 데 사용됩니다. 이 요소는 주로 이미지 파일만 허용하도록 설계되어, 관련 없는 파일 유형을 필터링하여 사용자 경험을 향상시킵니다.

이미지 표시: 이미지를 업로드하면 <img> 태그를 사용하여 표시됩니다. 이 시각적 피드백은 올바른 파일이 업로드되었음을 사용자가 확인하는 데 매우 중요합니다.

스캔 버튼: @onclick="ScanQRCode" 태그가 있는 버튼이 스캔 프로세스를 시작합니다. 파일이 선택되었는지 여부에 따라 사용 가능하며, 인터페이스의 직관성을 높여줍니다.

결과 표시: 스캔된 QR 코드의 텍스트가 텍스트 입력 필드에 표시되어 쉽게 볼 수 있습니다. 사용자가 이 텍스트를 클립보드에 복사할 수 있는 별도 버튼이 제공됩니다.

site.css에서의 CSS 스타일링

QR 코드 스캐너의 시각적 미학과 레이아웃은 site.css 파일에서 정의됩니다.

.content {
    padding: 20px;
    margin: 10px auto; /* Centers the content */
    max-width: 500px; /* Sets a max width for the content */
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-align: center;
}

.file-input, .result-input {
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    width: 100%;
}

.button {
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    transition: background-color 0.3s, box-shadow 0.3s;
    width: auto; /* Adjusts button width */
    display: inline-block; /* Allows the width to adjust to content */
}

.button:hover {
    background-color: #45a049;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
} 

.qr-image {
    max-width: 300px;
    max-height: 300px;
    display: block;
    margin: 10px auto;
    border-radius: 10px;
}

.result-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.result-input {
    width: 100%;
    box-sizing: border-box;
}

.copy-button {
    margin-top: 10px;
    white-space: nowrap;
}

.content: 이 클래스는 메인 콘텐츠 영역의 스타일을 설정하여, 정의된 너비, 중앙 정렬 및 깊이를 위한 섬세한 그림자를 부여합니다.

.file-input, .result-input: 이 클래스는 파일 입력 및 결과 표시 요소를 스타일링하여 시각적으로 일관되게 하고 컨테이너의 너비를 완전히 차지하도록 보장합니다.

.button: 버튼은 뚜렷한 녹색 배경, 둥근 모서리 및 더 나은 사용자 상호작용을 위한 호버 효과로 스타일링됩니다.

.qr-image: QR 코드 이미지에 적용된 스타일은 크기 제약 및 중앙 정렬을 위한 자동 마진을 포함하여 이미지를 두드러지게 하면서도 지나치게 강하지 않게 만듭니다.

.result-section: 이 클래스는 결과 섹션의 요소들이 중앙에 정렬되고 적절하게 간격이 유지되도록 보장합니다.

파일 업로드 처리

HandleSelectedFile 메서드는 QR 코드 스캔 프로세스의 중요한 부분으로, 사용자의 파일 업로드를 처리하고 스캔 준비를 수행합니다. 이 메서드는 사용자가 <InputFile> 구성 요소를 통해 파일을 선택할 때 트리거됩니다. 다음 코드에서 보여줍니다:

private async Task HandleSelectedFile(InputFileChangeEventArgs e)
{
    selectedFile = e.File;
    fileSelected = true;
    var imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages");
    Directory.CreateDirectory(imagesDirectory); // Ensure the directory exists

    // Use a GUID as the unique file name
    var uniqueFileName = Guid.NewGuid().ToString() + Path.GetExtension(selectedFile.Name);
    var fullPath = Path.Combine(imagesDirectory, uniqueFileName);

    await using (var fileStream = new FileStream(fullPath, FileMode.Create))
    {
        await selectedFile.OpenReadStream().CopyToAsync(fileStream);
    }

    // Store the full path in qrImageSrc for scanning
    qrImageSrc = fullPath;

    // Optionally, create a base64 string for displaying the image (if needed)
    byte[] imageBytes = await File.ReadAllBytesAsync(fullPath);
    var base64String = Convert.ToBase64String(imageBytes);
    qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart('.')};base64,{base64String}";
}

private async Task HandleSelectedFile(InputFileChangeEventArgs e)
{
    selectedFile = e.File;
    fileSelected = true;
    var imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages");
    Directory.CreateDirectory(imagesDirectory); // Ensure the directory exists

    // Use a GUID as the unique file name
    var uniqueFileName = Guid.NewGuid().ToString() + Path.GetExtension(selectedFile.Name);
    var fullPath = Path.Combine(imagesDirectory, uniqueFileName);

    await using (var fileStream = new FileStream(fullPath, FileMode.Create))
    {
        await selectedFile.OpenReadStream().CopyToAsync(fileStream);
    }

    // Store the full path in qrImageSrc for scanning
    qrImageSrc = fullPath;

    // Optionally, create a base64 string for displaying the image (if needed)
    byte[] imageBytes = await File.ReadAllBytesAsync(fullPath);
    var base64String = Convert.ToBase64String(imageBytes);
    qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart('.')};base64,{base64String}";
}

여기에 그 기능에 대한 자세한 분석이 있습니다:

파일 선택 및 검증: 사용자가 파일을 업로드할 때, 이 메서드는 InputFileChangeEventArgs e를 사용하여 파일의 세부 정보를 캡처합니다. selectedFile 변수는 이 파일에 할당되고, 부울 fileSelected이(가) 참으로 설정되어 입력 데이터/파일이 처리 준비가 되었음을 나타냅니다.

파일 경로 생성: 메소드는 업로드된 이미지를 저장할 디렉토리를 준비합니다. Path.Combine를 사용하여 'UploadedImages' 디렉토리의 경로를 생성하고, Directory.CreateDirectory을 통해 존재 확인을 합니다. 이 단계는 업로드된 파일을 체계적으로 정리하는 데 중요합니다.

고유 파일명 생성: 기존 파일과의 충돌을 피하기 위해, 원본 파일의 확장자가 추가된 GUID(전역 고유 식별자)를 사용하여 고유 파일명이 생성됩니다. 이는 각 업로드 파일이 고유하게 식별되도록 보장합니다.

파일 저장: 파일은 서버에 저장됩니다. 이 메서드는 새로 생성된 파일 경로를 가리키는 파일 스트림을 생성하고 업로드된 파일의 내용을 await selectedFile.OpenReadStream().CopyToAsync(fileStream)을 사용하여 이 스트림에 복사합니다. 이 단계는 업로드 과정을 완료합니다.

디스플레이를 위한 이미지 준비: 파일이 저장된 후 사용자가 확인할 수 있도록 이미지를 다시 제공해야 합니다. 이 메서드는 파일을 바이트 배열로 읽고 <img> 태그의 src 속성에 직접 포함할 수 있는 base64 문자열로 변환합니다. 이 변환을 통해 이미지 파일을 서버에서 별도로 요청하지 않고 이미지를 표시할 수 있습니다.

QR 코드 스캔

ScanQRCode 메서드는 Blazor 서버 애플리케이션의 QR 코드 스캔 기능의 핵심입니다. 이 메소드는 업로드된 이미지를 가져와 IronQR을 사용하여 QR 코드 데이터를 추출합니다.

private async Task ScanQRCode()
{
    // Check if there is a valid image to work with
    if (string.IsNullOrEmpty(qrImageSrc)) return;

    try
    {
        var inputBmp = AnyBitmap.FromFile(qrImageSrc);
        QrImageInput imageInput = new QrImageInput(inputBmp);
        QrReader reader = new QrReader();
        IEnumerable<QrResult> results = reader.Read(imageInput);

        // Check if there are any results and if the first result contains text
        var firstResult = results.FirstOrDefault();
        if (firstResult != null && !string.IsNullOrWhiteSpace(firstResult.Value.ToString()))
        {
            scannedText = firstResult.Value.ToString();
        }
        else
        {
            scannedText = "QR value not found!";
        }
    }
    catch (Exception ex)
    {
        scannedText = "Error scanning QR code: " + ex.Message;
    }
}

private async Task ScanQRCode()
{
    // Check if there is a valid image to work with
    if (string.IsNullOrEmpty(qrImageSrc)) return;

    try
    {
        var inputBmp = AnyBitmap.FromFile(qrImageSrc);
        QrImageInput imageInput = new QrImageInput(inputBmp);
        QrReader reader = new QrReader();
        IEnumerable<QrResult> results = reader.Read(imageInput);

        // Check if there are any results and if the first result contains text
        var firstResult = results.FirstOrDefault();
        if (firstResult != null && !string.IsNullOrWhiteSpace(firstResult.Value.ToString()))
        {
            scannedText = firstResult.Value.ToString();
        }
        else
        {
            scannedText = "QR value not found!";
        }
    }
    catch (Exception ex)
    {
        scannedText = "Error scanning QR code: " + ex.Message;
    }
}

처음에는 업로드된 이미지의 경로를 보유하는 qrImageSrc 변수가 비어 있지 않은지 확인합니다. 이 검사로 처리할 유효한 이미지가 있는지 확인합니다.

이미지가 처리 준비가 되었음을 확인하면, 메소드는 QR 코드 읽기의 핵심 기능으로 진행합니다. 이 과정은 저장된 위치에서 이미지를 로드하여 QR 코드 분석에 적합한 형식으로 변환하는 것부터 시작됩니다. 이 전환은 이미지 스캔 프로세스를 준비하는 AnyBitmap.FromFile(qrImageSrc) 메서드를 통해 가능합니다.

다음 단계는 QrReader 객체를 생성하는 것입니다. 이 객체는 이미지에서 QR 코드를 디코딩하기 위한 주요 도구로서 IronQR 라이브러리에 중요한 역할을 합니다. QrReader 인스턴스를 준비한 후, 애플리케이션은 업로드된 이미지를 스캔합니다. reader.Read(imageInput) 함수가 이 작업을 책임지고, 이미지를 체계적으로 검색하여 QR 코드를 찾아내고 데이터를 추출합니다.

스캔 결과는 IEnumerable<QrResult> 컬렉션에 저장됩니다. 이 컬렉션은 처음 QR 코드 결과를 찾기 위해 분석됩니다. QR 코드가 감지되고 읽을 수 있는 텍스트가 포함되어 있다면 이 텍스트는 scannedText 변수에 캡처되어 저장됩니다. 그러나 QR 코드가 발견되지 않거나 텍스트가 포함되어 있지 않은 경우, 애플리케이션은 사용자에게 QR 값이 감지되지 않았음을 알리는 기본 메시지를 설정합니다.

QR 코드가 성공적으로 스캔된 후, 텍스트 문자열은 Blazor의 양방향 데이터 바인딩 기능 덕분에 텍스트 입력 필드에 표시됩니다. 이는 scannedText 변수를 텍스트 입력 요소에 바인딩함으로써 달성됩니다. 입력 필드는 읽기 전용으로 설정되어 비활성화됩니다. 이 디자인 선택은 사용자 상호작용을 결과 보기 및 복사에 집중시키고 콘텐츠 편집이 아닌 방향으로 유도합니다.

전체 스캔 과정은 예기치 않은 오류로부터 보호하는 try-catch 블록 안에 포함되어 있습니다. 이는 이미지 파일 포맷과 관련된 문제나 읽기 과정에서 발생할 수 있는 예기치 않은 오류 등을 포함할 수 있습니다. 예외가 발생하면, 포착되어 사용자에게 표시할 오류 메시지가 작성됩니다. 이 접근법은 사용자와의 투명성을 유지하면서 문제를 추적하고 애플리케이션의 신뢰성을 향상시킵니다.

결과 복사하기

클립보드로 복사 기능을 활성화하려면, _Host.cshtml 파일에 copyTextToClipboard라는 JavaScript 함수를 정의합니다. 이 스크립트는 클립보드와 상호작용하는 간단하면서도 효과적인 방법입니다:

<script>
    function copyTextToClipboard(text) {
        navigator.clipboard.writeText(text).then(function () {
            console.log('Copying to clipboard was successful!');
        }, function (err) {
            console.error('Could not copy text: ', err);
        });
    }
</script>

<script>
    function copyTextToClipboard(text) {
        navigator.clipboard.writeText(text).then(function () {
            console.log('Copying to clipboard was successful!');
        }, function (err) {
            console.error('Could not copy text: ', err);
        });
    }
</script>

이 함수는 복사할 텍스트인 텍스트 매개변수를 수락합니다. 클립보드와 상호작용하는 현대적인 접근 방식인 navigator.clipboard.writeText 메서드를 사용합니다. 이 메소드는 그 간단함과 웹 표준 준수로 인해 선호됩니다. 성공적으로 복사되면 콘솔에 성공 메시지를 기록하여 디버깅을 돕고 원활한 기능을 보장하도록 설계되었습니다. 오류가 발생한 경우, 오류 메시지가 콘솔에 기록되어 작업 중 발생한 문제에 대한 통찰력을 제공합니다.

index.razor의 @code 부분에 있는 CopyToClipboard 메서드는 Blazor 앱과 JavaScript 함수 사이의 다리 역할을 합니다. 버튼을 클릭하면 사용자 인터페이스에서 이 메서드가 실행됩니다. 활성화되면 Blazor의 JavaScript InterOp 기능을 사용하여 copyTextToClipboard JavaScript 함수를 호출합니다. scannedText은 이 함수에 인수로 전달되어 사용자의 클립보드에 텍스트를 효과적으로 복사합니다.

private async Task CopyToClipboard()
{
    await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText);
}

private async Task CopyToClipboard()
{
    await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText);
}

응용 프로그램 실행

프로젝트를 실행하면 사용자는 다음과 같은 깔끔하고 간단한 인터페이스를 볼 수 있습니다. 초기 화면은 QR 코드 스캐너 모듈이 두드러져 보입니다. 이 모듈에는 QR 코드 이미지 파일을 업로드하는 버튼('파일 선택')과 스캔 프로세스를 시작하는 다른 버튼('QR 코드 스캔')이 포함되어 있습니다. 초기에는 파일이 선택되지 않았으며 스캔 영역이 비어 있어 사용자 입력을 기다리고 있습니다.

사용자는 '파일 선택' 버튼을 사용하여 QR 코드 이미지를 선택하고 업로드하며, 이제 선택된 파일의 이름(예: 'qrvalue.png')을 표시합니다. 업로드된 QR 코드는 인터페이스의 지정된 영역에 보여져 이미지가 스캔 준비가 되었음을 사용자에게 확인시킵니다.

사용자가 'QR 코드 스캔' 버튼을 클릭한 후, 응용 프로그램은 이미지를 처리합니다. 스캔이 성공하면 QR 코드 내부에 인코딩된 텍스트가 이미지 바로 아래에 표시됩니다. 이 경우, 스캔된 결과 ('<https://ironsoftware.com/csharp/qr/>')는 QR 코드가 QR 리더기로 스캔되었을 때 사용자를 안내할 위치를 나타내는 URL입니다. 결과 옆에는 사용자가 스캔된 텍스트를 클립보드에 쉽게 복사할 수 있도록 복사 버튼이 나타납니다.