Blazor Framework Nedir (Geliştiriciler İçin Nasıl Çalışır Öğretici)

WebAssembly Nedir?

Blazor WebAssembly, .NET ile etkileşimli istemci taraflı web uygulamaları geliştirmek için bir Tek Sayfa Uygulama (SPA) frameworkudur. Blazor WebAssembly, kodu başka dillere yeniden derlemeye veya eklenti kullanmaya ihtiyaç duymadan geliştirme imkanı tanıyan açık web standartları kullanır. Blazor WebAssembly tüm modern web tarayıcılarında çalışır.

Web tarayıcılarında .NET kodu çalıştırmak, WebAssembly tarafından mümkün kılınır. WebAssembly hızlı indirme ve maksimum yürütme hızları için optimize edilmiş kompakt bir bytecode formatıdır. WebAssembly bir açık web standardı olup, eklentilere ihtiyaç duymadan web tarayıcılarında desteklenir.

WebAssembly kodu, JavaScript aracılığıyla tarayıcının tam işlevselliğine erişebilir. JavaScript İş birliği olarak bilinen bu ilişki genellikle JavaScript Interop veya JS interop olarak kısaltılır. WebAssembly üzerinde yürütülen .NET kodu, tarayıcının JavaScript sanal alanında çalışır ve sanal alan, istemci makinede kötü niyetli işlemlere karşı koruma sağlar.

Yerel Uygulamalar Geliştirin

Mevcut Blazor Web UI bileşenlerini kullanarak, Blazor Hybrid ile yerel istemci uygulamalarını geliştirebiliriz. Blazor bileşenleri, yerel istemci yeteneklerine tam erişim avantajlarından yararlanarak mobil, masaüstü ve web üzerinde paylaşılabilir. .NET Çoklu Platform Uygulama UI'sı (MAUI) ile, veya mevcut Windows Presentation Foundation (WPF) ve Windows Forms uygulamalarını modernize etmek için Blazor Hybrid kullanabiliriz.

Blazor Hybrid uygulamasında, Razor bileşenleri cihazda yerel olarak çalıştırılır. Bileşenler, yerel bir entegrasyon kanalı aracılığıyla gömülü bir Web Görselleştirme kontrolüne renderlanır. Bileşenler tarayıcıda çalışmaz ve WebAssembly işin içinde değildir. Razor bileşenleri hızlıca yüklenir ve kodu çalıştırır, ayrıca bileşenler, .NET platformu aracılığıyla cihazın yerel yeteneklerine tam erişim sağlar.

Blazor uygulamalarının nasıl çalıştığını daha iyi anlamak için bir demo uygulaması oluşturalım.

Blazor Sunucu Uygulaması Oluşturma

İlk Blazor uygulamamızı oluşturmak için yeni bir Visual Studio projesi oluşturmamız gerekiyor.

• Visual Studio'yu açın.
• Yeni Proje Oluştur butonuna tıklayın.
• Blazor Sunucu Uygulama Şablonunu seçin.
• İleri butonuna tıklayın.
• Uygulamanıza bir isim verin.
• İleri butonuna tıklayın.
• Hedef bir Framework seçin.
• Proje Oluştur butonuna tıklayın.

Aşağıda gösterildiği gibi Yeni Bir Proje oluşturulacaktır.

Çalışmaya hazır basit bir Blazor uygulaması sunmak için birkaç dosya oluşturuldu.

• Program.cs, sunucuyu başlatan ve uygulama servisleri ile ara yazılımını yapılandırdığınız uygulamanın giriş noktasıdır.
• App.razor, uygulamanın ana bileşenidir.
• Pages dizini, uygulama için bazı örnek web sayfalarını içerir.
• launchSettings.json dosyası, Properties dizininde farklı profil ayarlarını yerel geliştirme ortamı için tanımlar. Proje oluşturulurken otomatik olarak bir port numarası atanır ve bu dosyaya kaydedilir.

Bu şablon uygulamayı çalıştırın.

Blazor Uygulamasını Çalıştırma

Şablonda otomatik olarak oluşturulan üç Blazor bileşeni vardır.

Ana Sayfa Bileşeni

Yan menüdeki Sayaç'a tıklayın. Butonu tıkladığınızda sayacın, sayfayı değiştirmeden veya yeniden yüklemeden arttığını göreceksiniz. Web uygulamasında sayaç artırma genellikle JavaScript gerektirir, ancak Blazor ile bunu C# kullanarak başarabiliriz. Bu nedenle ASP.NET geliştiricileri Blazor'u çok seviyor. .NET geliştiricilerinin web uygulamalarını hızlı ve kolay bir şekilde oluşturmasına yardımcı olur.

Sayaç Bileşeni

Çözümümüzün Pages klasörü içindeki Counter.razor dosyasında Sayıcı bileşeninin kodunu görebiliriz.

@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
    private int currentCount = 0;

    // This method increments the counter value when the button is clicked
    private void IncrementCount()
    {
        currentCount++;
    }
}

Tarayıcıda /counter isteği, tepedeki @page direktifiyle belirtildiği gibi, Sayıcı bileşeninin içeriğini render eder.

Her Beni Tıkla butonu seçildikçe:

• onclick olayı yürütülür.
• IncrementCount metodu çağrılır.
• currentCount arttırılır.
• Güncellenen sayıyı göstermek için bileşen render edilir.

Her .razor dosyası, yeniden kullanılabilir bir UI bileşeni tanımlar.

Visual Studio'da Index.razor dosyasını açın. Index.razor dosyası, projeyi oluşturduğunuzda yaratıldığı için zaten mevcut. Daha önce oluşturulan BlazorApp dizini içindeki Pages klasöründe bulunur.

URL'den PDF Oluşturma

Öncelikle PDF dosyaları oluşturmak için bir üçüncü parti kütüphane yüklememiz gerekiyor. Kullanacağımız kütüphane IronPDF - PDF Generation .NET için olacak. Kullanımı kolaydır, birçok özellik içerir ve geliştirme için ücretsizdir. IronPDF'yi Blazor Uygulamanızda kullanmayı öğrenmek için IronPDF Blazor Dokümantasyonu makalesini okuyabilirsiniz.

IronPDF NuGet Paketi Yükle

Blazor WebAssembly uygulamasına IronPDF NuGet paketi, normal ASP.NET Core uygulamasında olduğu gibi yüklenebilir.

NuGet Paket Yöneticisi Konsolunu açın ve aşağıdaki komutu yazın:

Install-Package IronPdf

Aşağıda gösterildiği gibi kütüphane yüklenecek.

FetchData.razor dosyasındaki mevcut tüm kodları silin ve şu kod örneğini ekleyin:

@page "/fetchdata"

@using myBlazorAPP.Data
@inject WeatherForecastService ForecastService

<h1>Generate PDF FROM URL</h1>
<p>This component demonstrates generating PDF from URL using IronPDF in Blazor Application</p>
<input type="text" @bind="URL" placeholder="URL HERE..."/>
<button @onclick="GeneratePDF">Generate PDF</button>

@code {
    private string URL { get; set; }

    // This method calls the service to generate a PDF document from a given URL
    protected async Task GeneratePDF()
    {
        await ForecastService.GeneratePDFfromURL(URL);
    }
}

Yukarıda PDF dosyaları oluşturmak için istemci-tarafı Blazor kodu bulunuyor. Bir buton ve bir giriş kutusunu tanımlar. Girdi alanı, URL değişkenine bağlıdır.

Şimdi uygulamamız için sunucu-tarafı kod yazalım.

WeatherForecastService.cs dosyasını açın ve mevcut tüm kodu aşağıdaki kod parçacığı ile değiştirin:

using System;
using System.Threading.Tasks;
using IronPdf;

namespace myBlazorAPP.Data
{
    public class WeatherForecastService
    {
        // This method generates a PDF file asynchronously from a provided URL
        public async Task GeneratePDFfromURL(string URL)
        {
            ChromePdfRenderer renderer = new ChromePdfRenderer();
            var pdfDoc = await renderer.RenderUrlAsPdfAsync(URL);
            pdfDoc.SaveAs(@"myFile.pdf");
        }
    }
}

using System;
using System.Threading.Tasks;
using IronPdf;

namespace myBlazorAPP.Data
{
    public class WeatherForecastService
    {
        // This method generates a PDF file asynchronously from a provided URL
        public async Task GeneratePDFfromURL(string URL)
        {
            ChromePdfRenderer renderer = new ChromePdfRenderer();
            var pdfDoc = await renderer.RenderUrlAsPdfAsync(URL);
            pdfDoc.SaveAs(@"myFile.pdf");
        }
    }
}

Imports System
Imports System.Threading.Tasks
Imports IronPdf

Namespace myBlazorAPP.Data
	Public Class WeatherForecastService
		' This method generates a PDF file asynchronously from a provided URL
		Public Async Function GeneratePDFfromURL(ByVal URL As String) As Task
			Dim renderer As New ChromePdfRenderer()
			Dim pdfDoc = Await renderer.RenderUrlAsPdfAsync(URL)
			pdfDoc.SaveAs("myFile.pdf")
		End Function
	End Class
End Namespace

$vbLabelText   $csharpLabel

Çıktıyı görmek için uygulamamızı çalıştıralım.

Giriş kutusuna bir URL yapıştırın ve PDF'yi oluştur'a tıklayın. PDF dosyası oluşturulacak ve dosya uygulama klasöründe görülebilir.

Aşağıda gösterildiği gibi PDF dosyasını açın.

Yalnızca üç satır kodla URL'den PDF oluşturduk. Bu, IronPDF'nin gücüdür.

IronPDF, Iron Software tarafından sağlanır ve Iron Software'in Iron Suite Ürünleri'nin bir parçasıdır. Tam Iron Suite'i ediniz, iki ürünün maliyetine beş ürün satın alarak tasarruf edebilirsiniz.

Özet

Blazor, Microsoft'un .NET Framework'ü ile interaktif istemci-tarafı web UI oluşturan bir çerçevedir.

• JavaScript yerine C# kullanarak zengin etkileşimli Uİ'ler oluşturun.
• .NET'de yazılmış sunucu-tarafı ve istemci-tarafı uygulama mantığını paylaşın.
• HTML ve CSS olarak UI'yi geniş tarayıcı desteği için render edin, mobil tarayıcılar dahil.
• Docker gibi modern barındırma platformlarıyla bütünleşin.
• .NET ve Blazor ile hibrit masaüstü ve mobil uygulamalar oluşturun.

İstemci-tarafı web geliştirmede .NET kullanmanın şu avantajları vardır:

• JavaScript yerine C# ile kod yazın.
• Mevcut .NET kütüphanelerinin ekosisteminden yararlanın.
• Uygulama mantığını sunucu ve istemci arasında paylaşın.
• .NET'in performans, güvenilirlik ve güvenliğine yetişin.
• Windows, Linux veya macOS'ta Visual Studio veya Visual Studio Code gibi bir geliştirme ortamı ile üretken kalın.
• Kararlı, zengin özelliklere sahip ve kullanımı kolay bir dizi dil, çerçeve ve araç üzerinde geliştirin.