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

Blazor Sunucu Nedir?

Blazor Sunucu, ASP.NET Core platformunun bir parçası olan bir web uygulama çerçevesidir. Geliştiricilerin JavaScript yerine C# kullanarak etkileşimli web UI'ları oluşturmasına olanak tanır. 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. Geliştiricilerin etkili ve etkileşimli web uygulamaları yaratmasına yardımcı olur.

IronQR Tanıtımı

IronQR, yüksek doğrulukla QR kodları oluşturan ve okuyabilen, .NET üzerinde çalışan bir kütüphanedir. Farklı türde QR kodu içeriğiyle başa çıkma yeteneği de dahil olmak üzere çeşitli özellikler sunar. IronQR'nin gücü, sadeliğinde ve .NET uygulamalarına entegrasyonun kolaylığında yatar, QR kodu işlevselliğini dahil etmeyi ve oluşturmayı arayan geliştiriciler için başvurulacak tercihtir.

Yeni Bir Blazor Sunucu Uygulaması Oluşturma

Visual Studio'yu başlatın ve 'Yeni bir proje oluştur' seçeneğini seçin. Proje şablonu seçim ekranında 'Blazor Sunucu Uygulaması' şablonunu bulun ve seçin. İleri'ye tıklayın.

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

Şimdi istenen .NET Framework'ü seçin ve oluştur düğmesine basın. Bir Blazor Sunucu uygulaması oluşturulacaktır.

IronQR Kütüphanesi Kurulumu

Menü çubuğundan Araçlar'a tıklayın. Açılır menüden NuGet Paket Yöneticisi'ni seçin. Bağlam menüsünden "Çözüm İçin NuGet Paketlerini Yönet" seçeneğini seçin. Bu, NuGet Paket Yöneticisi sekmesini açacaktır.

NuGet Paket Yöneticisi'nde, 'Göz at' sekmesi altında 'IronQR' için arama yapın. Sonra listede 'IronQR' paketini bulun. 'Install' düğmesine tıklayın.

Şimdi her şeyi kurduğunuzda, proje yapısını gözden geçirip her şeyi projenize uygulayabilirsiniz.

Kullanıcı Arayüzünü İnşa Etme

QR Kod Tarayıcı için kullanıcı arayüzü esasen Index.razor dosyası içinde oluşturulmuştur. Blazor Sunucu projesinin bir parçası olan bu dosya, dinamik ve etkileşimli bir web sayfası oluşturmak için HTML ve Razor Söz Dizimi'nin bir kombinasyonunu 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 Ana Başlık: Sayfanın başlığını ve ana başlığı sırasıyla tanımlayan <PageTitle> ve <h1> etiketleri, kullanıcı için bağlamı belirler.

Görüntü Yükleme Kontrolü: QR kod görüntülerini yüklemek için bir <InputFile> bileşeni kullanılır. Bu eleman, yalnızca resim dosyalarını kabul etmek üzere düzenlenmiştir ve kullanıcı deneyimini, alakasız dosya türlerini filtreleyerek iyileştirir.

Görüntü Gösterimi: Bir görüntü yüklendikten sonra, <img> etiketi kullanılarak gösterilir. Bu görsel geri bildirim, doğru dosyanın yüklendiği konusunda kullanıcıya güven sağlayan temel bir unsurdur.

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

Sonuç Gösterimi: Taranan QR kodunun metni, kolay görüntüleme için bir metin giriş alanında görüntülenir. Kullanıcıların bu metni panoya kopyalamasına olanak tanıyan ayrı bir düğme mevcuttur.

site.css'de CSS Stil Çalışmaları

QR Kod Tarayıcısının görsel estetiği ve düzeni site.css dosyasında tanımlanı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, merkezlenmiş hizalama ve derinlik için hafif bir gölge verir.

.file-input, .result-input: Bu sınıflar, dosya girişi ve sonuç gösterim elemanlarını stilize eder, görsel olarak tutarlı olmalarını ve kaplarının genişliğini tamamen kaplamalarını sağlar.

.button: Düğmeler, belirgin bir yeşil arka plan, yuvarlak köşeler ve daha iyi kullanıcı etkileşimi için bir hover efekti ile stilize edilmiştir.

.qr-image: QR kodu görüntüsüne uygulanan stiller, boyut kısıtlamalarını ve ortalama için otomatik marjı içerir, böylece görüntü dikkat çekici, ancak aşırıya kaçmayan bir hale gelir.

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

Dosya Yüklemelerini Yönetme

HandleSelectedFile yöntemi, QR kod tarama sürecinin önemli bir parçasıdır, kullanıcının dosya yüklemesini işler ve tarama için hazırlar. 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: Bir kullanıcı dosya yüklediğinde, yöntem InputFileChangeEventArgs e kullanarak dosyanın ayrıntılarını yakalar. selectedFile değişkeni daha sonra bu dosyaya atanır ve bir boolean fileSelected, işlenmeye hazır olduğunu belirtmek için true'ya ayarlanır.

Dosya Yolunun Oluşturulması: Yöntem, yüklenen resmi depolayacak bir dizin hazırlar. 'UploadedImages' dizinine bir yol oluşturmak için Path.Combine kullanılır, Directory.CreateDirectory ile varlığı sağlanır. Bu adım, yüklenen dosyaları düzenleyici bir şekilde sıralamak için önemlidir.

Benzersiz Bir Dosya Adı Üretme: Var olan dosyalarla çakışmaları önlemek için, orijinal dosyanın uzantısı ile birlikte eklenen bir GUID (Evrensel Benzersiz Tanımlayıcı) kullanılarak benzersiz bir dosya adı üretilir. Bu, her yüklenen dosyanın benzersiz olarak tanınmasını sağlar.

Dosyanın Kaydedilmesi: 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ünün Gösterimi İçin Hazırlama: Dosya kaydedildikten sonra, kullanıcıya doğrulama için görüntüyü geri göstermek gerekir. Yöntem, dosyayı bir bayt dizisine okur ve bir <img> etiketinin src özniteliğine doğrudan gömülmeye uygun bir base64 dizesine dönüştürür. Bu dönüşüm, görüntüyü dosya için sunucuya ayrı bir istek gerektirmeden görüntülenmesine olanak tanır.

QR Kodunun Taranması

ScanQRCode yöntemi, Blazor Sunucu uygulamasındaki QR kod tarama işlevinin kalbidir. Bu yöntem, yüklenen resmi alır ve IronQR'yi kullanarak QR kodu verilerini çıkarı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öntemin qrImageSrc değişkenini kontrol eder, bu değişken yüklenen görüntünün yolunu tutar ve boş değilse işleme başlar. Bu kontrol, işleme geçmeden önce kullanılabilir bir resmin olduğundan emin olur.

Bir resmin işleme hazır olduğu onaylandıktan sonra, yöntem QR kodunu okuma işlevselliğine geçer. Bu, resmin depolanmış konumundan alınarak QR kodu analizi için uygun bir formata dönüştürülmesi ile başlar. Bu dönüşüm, görüntüyü tarama süreci için hazırlayan AnyBitmap.FromFile(qrImageSrc) yöntemi ile mümkün hale gelir.

Sonraki adım, bir QrReader nesnesi oluşturmaktır. IronQR kütüphanesi için bu nesne, resimlerden QR kodlarını çözmek için birincil araç olarak hizmet eder. QrReader örneği hazır olduğunda, uygulama yüklenen görüntüyü taramaya devam eder. reader.Read(imageInput) fonksiyonu, bu işlemi gerçekleştirir, görüntüyü metodik olarak tarar ve QR kodlarını bularak verilerini çıkarır.

Taramanın sonuçları, bir IEnumerable<QrResult> koleksiyonunda saklanır. Bu koleksiyon, ilk QR kodu sonucunu bulmak için araştırılır. Bir QR kodu tespit edilirse ve okunabilir metin içeriyorsa, bu metin yakalanır ve scannedText değişkeninde saklanır. Ancak, bir QR kodunun bulunamadığı veya metin içermediği senaryolarında, uygulama kullanıcıyı bilgilendirmek için herhangi bir QR değeri tespit edilemediğini belirten varsayılan bir mesaj ayarlar.

QR kodu başarıyla tarandıktan sonra, metin dizesi, Blazor'un iki yönlü veri bağlama yetenekleri sayesinde bir metin giriş alanında gösterilir. Bu, scannedText değişkenini bir metin giriş elemanına bağlayarak gerçekleştirilir. Giriş alanı devre dışı bırakılır ve salt okuma olarak ayarlanır. Bu tasarım seçimi, kullanıcıların sonucu görme ve kopyalamaya odaklanmalarını sağlar, içeriği düzenlememelerini hedefler.

Tüm tarama işlemi, beklenmeyen herhangi bir hata karşısında koruma sağlayan bir try-catch bloğu içinde çevrelenmiştir. Bu, resim dosyası formatı ile ilgili sorunları veya okuma işlemi sırasında beklenmeyen hataları içerebilir. Bir istisna meydana gelirse, yakalanır ve kullanıcıya bir hata mesajı oluşturularak gösterilir. Bu yaklaşım, kullanıcıya karşı şeffaflığı korurken, sorunları takip etmede yardımcı olur ve uygulamanın güvenilirliğini artırır.

Sonucu Kopyalama

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

<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 metni text parametresi olarak alır. Modern bir yaklaşımla panoyla etkileşim kuran navigator.clipboard.writeText yöntemi kullanılır. Bu yöntem, basitliği ve web standartları ile uyumluluğu nedeniyle tercih edilir. Başarıyla kopyalama yapıldığında, hata ayıklama ve pürüzsüz işlevselliği sağlamak amacıyla konsolda başarı mesajı loglamak için tasarlanmıştır. Bir hata durumunda, operasyon sırasında karşılaşılan herhangi bir sorun hakkında içgörü sağlayan bir hata mesajı konsola loglanır.

index.razor dosyasının @code kısmındaki CopyToClipboard yöntemi, Blazor uygulaması ile JavaScript fonksiyonu arasında bir köprü görevi görür. Bir düğme, kullanıcı arayüzünde bu yöntemi tetikler. Aktive edildiğinde, Blazor'un JavaScript InterOp yeteneklerini kullanarak copyTextToClipboard JavaScript fonksiyonunu çağırır. scannedText bu fonksiyona bir argüman olarak geçilir, böylece metni kullanıcının panosuna etkili bir şekilde kopyalar.

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ında QR Kod Tarayıcı modülü belirgin bir şekilde sergilenmektedir. Bu modül, QR kodu resim dosyasını yüklemek için bir ('Dosya Seç') düğmesi ve tarama sürecini başlatmak için bir diğerini ('QR Kod Tarama') içermektedir. Başlangıçta, hiçbir dosya seçilmemiştir ve tarama alanı, kullanıcı girdisini bekleyerek boştur.

Kullanıcı 'Dosya Seç' düğmesini kullanarak bir QR kodu resmi seçer ve yükler, bu durumda seçilen dosyanın adı artık gösterilmektedir (örneğin, 'qrvalue.png'). Yüklenen QR kodu, arayüzde belirlenmiş alanda görünür ve kullanıcıya resmin taranmaya hazır olduğunu onaylar.

Kullanıcı 'QR Kod Tarama' düğmesine tıkladıktan sonra, uygulama resmi işler. Tarama başarılı olursa, QR kodunun içine kodlanmış metin resmin hemen altında görüntülenir. Bu durumda, taranmış sonuç ('<https://ironsoftware.com/csharp/qr/>'), bir QR okuyucuyla tarandığında kullanıcının yönlendirileceği URL'yi gösterir. Sonucun yanında bir kopyala düğmesi belirir, bu da kullanıcının taranan metni further kullanımlar için kolaylıkla panoya kopyalamasını sağlar.