Blazor QR Kod Tarayıcı Nasıl Oluşturulur

Blazor Server Nedir?

Blazor Server, ASP.NET Core platformunun bir parçası olan bir web uygulama çerçevesidir. JavaScript yerine C# kullanarak etkileşimli web kullanıcı arayüzleri oluşturmayı mümkün kılar. Bu sunucu tarafı model, gerçek zamanlı web işlevselliği sağlayan bir SignalR bağlantısı üzerinden kullanıcı etkileşimlerini yöneterek çalışır. Bu, geliştiricilerin etkili ve etkileşimli web uygulamaları oluşturmasına yardımcı olur.

IronQR'ye Giriş

IronQR, yüksek hassasiyetle QR kodlarını okuma, yorumlama ve oluşturma yeteneği ile öne çıkan bir .NET kütüphanesidir. Farklı türde QR kodu içeriğini yönetme yeteneği de dahil olmak üzere çeşitli özellikler sunar. IronQR'nin gücü, sadeliği ve .NET uygulamalarına entegrasyon kolaylığına dayanır, bu da onu QR kodu işlevselliği eklemek ve oluşturmak isteyen geliştiriciler için başvurulacak bir tercih yapar.

Yeni Bir Blazor Server Uygulaması Oluşturun

Visual Studio başlatın ve "Yeni bir proje oluştur" seçeneğini seçin. Proje şablonu seçim ekranında "Blazor Server App" şablonunu bulun ve seçin. Sonraki'ye tıklayın.

Şablonu seçtikten sonra bir Proje Adı ve Konumu girin (diğer her şeyi varsayılan değerlerde bırakın) ve Sonraki düğmesine tıklayın.

Şimdi istenen .NET Framework'ü seçin ve oluştur düğmesine basın. Bu, bir Blazor Server uygulaması oluşturacaktır.

IronQR Kütüphanesinin Yüklenmesi

Araçlar menü çubuğundan tıklayın. Açılır menüden NuGet Package Manager'ı seçin. Bağlam menüsünden "Manage NuGet Packages for Solution" seçeneğini seçin. Bu, NuGet Package Manager sekmesini açacaktır.

NuGet Package Manager'da, "IronQR" için "Browse" sekmesinde arama yapın. Sonra liste içinde "IronQR" paketini bulun. "Install" düğmesine tıklayın.

Artık her şeyi yüklediniz, proje yapısını geliştirebilir ve her şeyi projenize uygulayabilirsiniz.

Kullanıcı Arayüzü Oluşturma

QR Kod Tarayıcısının kullanıcı arayüzü öncelikle Index.razor dosyasında oluşturulur. Bu dosya, bir Blazor Server projesinin parçası olup dinamik ve etkileşimli bir web sayfası oluşturmak için HTML ve Razor Söz Dizimi kombinasyonu kullanır. Yapı şunları içerir:

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

Başlık ve Başlık: <PageTitle> ve <h1> etiketleri sayfanın başlığını ve ana başlığı tanımlar, kullanıcı için bağlamı ayarlar.

Resim Yükleme Kontrolü: Bir <InputFile> bileşeni, QR kodu görüntülerini yüklemek için kullanılır. Bu öğe, yalnızca görüntü dosyalarını kabul edecek şekilde özelleştirilmiştir ve ilgili olmayan dosya türlerini filtreleyerek kullanıcı deneyimini artırır.

Görüntü Gösterimi: Bir görüntü yüklendikten sonra, bir <img> etiketi kullanılarak görüntülenir. Bu görsel geribildirim, kullanıcının doğru dosyanın yüklendiğine emin olmasını sağlar.

Tara Butonu: @onclick="ScanQRCode" ile etiketlenmiş bir buton tarama işlemini başlatır. Bir dosyanın seçilip seçilmediğine bağlı olarak kullanılabilirliği, arayüzün sezgiselliğini artırır.

Sonuç Gösterimi: Tarama yapılan QR kodunun metni kolay görüntüleme için bir metin giriş alanında gösterilir. Ayrı bir buton, kullanıcıların bu metni panoya kopyalamasına olanak tanır.

site.css içindeki CSS Stili

QR Kodu Tarayıcının görsel estetiği ve düzeni site.css dosyasında tanımlanmıştır.

.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: Bu sınıf, ana içerik alanını stilize eder, belirli bir genişlik, merkezi hizalama ve derinlik için hafif gölge verir.

.file-input, .result-input: Bu sınıflar, dosya girişi ve sonuç gösterim elemanlarını stilize eder, bunların görsel olarak uyumlu ve kaplarının genişliğini tamamen kapsadığından emin olur.

.button: Butonlar, belirgin yeşil arka plan, yuvarlatılmış köşeler ve gelişmiş bir kullanıcı etkileşimi için hover efekti ile stilize edilir.

.qr-image: QR kodu görüntüsüne uygulanan stiller, boyut kısıtlamaları ve merkezi konum için otomatik marjin dahil eder, görseli öncelikli kılar ancak bunaltıcı olmaz.

.result-section: Bu sınıf, sonuç bölümündeki elemanların merkezi olarak hizalanmasını ve uygun şekilde aralık bırakılmasını sağlar.

Dosya Yüklemelerini Yönetme

HandleSelectedFile yöntemi, kullanıcının dosya yüklemesi ile ilgilenir ve tarama için hazırlar. QR kodu tarama işleminin önemli bir parçasıdır. Bu yöntem, kullanıcı <InputFile> bileşeni aracılığıyla bir dosya seçtiğinde tetiklenir. Bu, aşağıdaki kodda gösterilmiştir:

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

Private Async Function HandleSelectedFile(ByVal e As InputFileChangeEventArgs) As Task
	selectedFile = e.File
	fileSelected = True
	Dim imagesDirectory = Path.Combine(Directory.GetCurrentDirectory(), "UploadedImages")
	Directory.CreateDirectory(imagesDirectory) ' Ensure the directory exists

	' Use a GUID as the unique file name
	Dim uniqueFileName = Guid.NewGuid().ToString() & Path.GetExtension(selectedFile.Name)
	Dim fullPath = Path.Combine(imagesDirectory, uniqueFileName)

'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	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)
	Dim imageBytes() As Byte = Await File.ReadAllBytesAsync(fullPath)
	Dim base64String = Convert.ToBase64String(imageBytes)
	qrImageSrcForDisplay = $"data:image/{Path.GetExtension(selectedFile.Name).TrimStart("."c)};base64,{base64String}"
End Function

İşte işlevselliğinin ayrıntılı bir dökümü:

Dosya Seçimi ve Doğrulama: Kullanıcı bir dosya yüklediğinde, yöntem InputFileChangeEventArgs e kullanarak dosyanın detaylarını yakalar. selectedFile değişkeni daha sonra bu dosyaya atanır ve bir boolean fileSelected işlenmek üzere giriş verisinin/dosyasının hazır olduğunu belirtmek için true ayarlanır.

Dosya Yolunu Oluşturma: Yöntem, yüklenen görüntüyü depolamak için bir dizin hazırlar. 'UploadedImages' dizinine yol oluşturmak için Path.Combine kullanır; Directory.CreateDirectory ile var olduğundan emin olur. Bu adım, yüklenen dosyaların sistematik bir şekilde organize edilmesi için çok önemlidir.

Benzersiz Bir Dosya Adı Üretme: Mevcut dosyalarla çakışmaları önlemek için, orijinal dosyanın uzantısıyla birleşik bir GUID (Evrensel Benzersiz Tanımlayıcı) kullanılarak benzersiz bir dosya adı üretilir. Bu, her yüklenen dosyanın benzersiz bir şekilde tanımlanmasını sağlar.

Dosyayı Kaydetme: Dosya daha sonra sunucuya kaydedilir. Yöntem, yeni oluşturulan dosya yoluna işaret eden bir dosya akışı oluşturur ve yüklenen dosyanın içeriği await selectedFile.OpenReadStream().CopyToAsync(fileStream) kullanılarak bu akışa kopyalanır. Bu adım, yükleme işlemini tamamlar.

Görüntüyü Görüntüleme için Hazırlama: Dosya kaydedildikten sonra, kullanıcının doğrulaması için görüntünün tekrar görüntülenmesi gereklidir. Yöntem, dosyayı bir bayt dizisine okur ve <img> etiketinin src özelliğine doğrudan yerleştirmeye uygun bir base64 string'e dönüştürür. Bu dönüşüm, görüntü dosyası için sunucuya ayrı bir istek gerektirmeden görüntünün sergilenmesine olanak tanır.

QR Kodunu Tarama

ScanQRCode yöntemi, Blazor Server uygulamasındaki QR kodu tarama özelliğinin kalbidir. Bu yöntem yüklenen görüntüyü alır ve QR kodu verilerini çıkartmak için IronQR kullanır.

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

Private Async Function ScanQRCode() As Task
	' Check if there is a valid image to work with
	If String.IsNullOrEmpty(qrImageSrc) Then
		Return
	End If

	Try
		Dim inputBmp = AnyBitmap.FromFile(qrImageSrc)
		Dim imageInput As New QrImageInput(inputBmp)
		Dim reader As New QrReader()
		Dim results As IEnumerable(Of QrResult) = reader.Read(imageInput)

		' Check if there are any results and if the first result contains text
		Dim firstResult = results.FirstOrDefault()
		If firstResult IsNot Nothing AndAlso Not String.IsNullOrWhiteSpace(firstResult.Value.ToString()) Then
			scannedText = firstResult.Value.ToString()
		Else
			scannedText = "QR value not found!"
		End If
	Catch ex As Exception
		scannedText = "Error scanning QR code: " & ex.Message
	End Try
End Function

Başlangıçta, yöntem yüklenen görüntüye ait yolu tutan qrImageSrc değişkeninin boş olup olmadığını kontrol eder. Bu kontrol, işleme başlamadan önce üzerinde çalışılacak geçerli bir görüntü olduğundan emin olunmasını sağlar.

Bir görüntünün işlenmeye hazır olduğunun onaylanması üzerine, yöntem QR kodu okuma işleminin temel işlevselliğine devam eder. Bu, depolanmış konumundan analiz için uygun bir formata getirilerek görüntünün yüklenmesini içeren birkaç önemli adımı kapsamaktadır. Bu dönüşüm, görüntüyü tarama süreci için hazırlayan AnyBitmap.FromFile(qrImageSrc) yöntemiyle mümkün kılınmıştır.

Bir QrReader nesnesi oluşturmayı içerir. Bu nesne, görsellerden QR kodları çözmek için temel araç olarak hizmet eden IronQR kütüphanesi için entegre edicidir. QrReader örneği hazır olduğunda, uygulama yüklenen görüntüyü taramaya devam eder. reader.Read(imageInput) fonksiyonu bu eylemi gerçekleştirir; görüntü üzerinde QR kodları metotlu bir şekilde arar ve verilerini çıkarır.

Tarama sonuçları IEnumerable<QrResult> koleksiyonunda saklanır. Bu koleksiyon daha sonra, ilk QR kodu sonucunu bulmak için titizlikle incelenir. Eğer bir QR kodu tespit edilir ve okunabilir metin içeriyorsa, bu metin yakalanır ve scannedText değişkenine depolanır. Ancak, bir QR kodu bulunmadığında veya metin içermediğinde, uygulama kullanıcının QR değeri algılanmadığını bilgilendiren varsayılan bir mesaj ayarlar.

QR kodu başarıyla tarandığında, metin dizesi Blazor'un iki yönlü veri bağlama yetenekleri sayesinde bir metin giriş alanında gösterilir. Bu, scannedText değişkeninin bir metin girişi elemanına bağlanmasıyla gerçekleştirilir. Giriş alanı devre dışı bırakılmış olarak ayarlanır, bu da onu salt okunur yapar. Bu tasarım seçimi, kullanıcıyı içeriği düzenlemek yerine sonucu görmeye ve kopyalamaya yönlendirmeye odaklanır.

Tüm tarama işlemi, tarama sırasında beklenmedik hatalara karşı korunmak için bir try-catch bloğu içerisinde yer alır. Bu, resim dosyası formatıyla ilgili sorunları veya okuma sırasında beklenmedik hataları içerebilir. Bir istisna meydana gelirse, yakalanır ve bir hata mesajı oluşturularak kullanıcıya gösterilir. Bu yaklaşım, kullanıcıya karşı şeffaflığı korurken sorunları takip etmeye yardımcı olur ve uygulamanın güvenilirliğini artırır.

Sonucu Kopyalamak

Panoya kopyalama özelliğini etkinleştirmek için, copyTextToClipboard adlı bir JavaScript fonksiyonu _Host.cshtml dosyasında tanımlanmıştır. Bu script, panoyla etkileşim kurmanın basit ancak etkili bir yoludur:

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

Bu fonksiyon, kopyalanacak olan metin parametresini kabul eder. Modern bir panoyla etkileşim kurma yöntemi olan navigator.clipboard.writeText metodunu kullanır. Bu yöntem, basitliği ve web standartlarıyla uyumluluğu nedeniyle tercih edilir. Başarılı kopyalamada konsola bir başarı mesajı kaydedecek şekilde tasarlanmıştır, bu da hata ayıklama ve sorunsuz işlevsellik sağlar. Bir hata durumunda, karşılaşılan sorunlara dair içgörüler sağlamak için konsola bir hata mesajı kaydedilir.

CopyToClipboard yöntemi, index.razor'un @code kısmında, Blazor uygulamasıyla JavaScript fonksiyonu arasında bir köprü olarak görev yapar. Kullanıcı arayüzünde bir düğme bu yöntemi tetikler. Etkinleştirildiğinde, copyTextToClipboard JavaScript fonksiyonunu Blazor'un JavaScript InterOp yeteneklerini kullanarak çağırır. scannedText kullanıcının panosuna metni kopyalayarak bu fonksiyona bir argüman olarak iletilir.

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

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

Private Async Function CopyToClipboard() As Task
	Await JSRuntime.InvokeVoidAsync("copyTextToClipboard", scannedText)
End Function

Uygulamayı Çalıştırma

Projeyi çalıştırdığınızda, kullanıcı aşağıdaki temiz ve basit arayüzü görecektir. Başlangıç ekranı, QR Kod Tarayıcı modülünü belirgin bir şekilde sergiler. Bu modül, QR kod resim dosyasını yüklemek için bir düğme ('Dosya Seç') ve tarama işlemini başlatmak için bir diğerini ('QR Kod Tarama') içerir. Başlangıçta hiçbir dosya seçilmez ve tarama alanı, kullanıcı girişini bekleyen boş bir alan olarak kalır.

Kullanıcı, 'Dosya Seç' düğmesini kullanarak bir QR kod resmi seçer ve yükler, bu aşamada seçilen dosyanın adı (örneğin, 'qrvalue.png') gösterilir. Yüklenen QR kodu, arayüzde belirlenmiş alanda görünür ve kullanıcıya resmin tarama için hazır olduğunu doğrular.

Kullanıcı 'QR Kod Tarama' düğmesine tıkladıktan sonra, uygulama resmi işler. Tarama başarılı olursa, QR kodunda kodlanmış metin, resmin hemen altında görüntülenir. Bu durumda, taranan sonuç ('<https://ironsoftware.com/csharp/qr/>') kullanıcıyı bir QR okuyucu ile tarandığında yönlendirecek olan URL'dir. Sonucun yanında, kullanıcıya taranan metni panoya kolayca kopyalama olanağı sağlayan bir kopyala düğmesi belirir.