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

WebAssembly Nedir?

Blazor WebAssembly, .NET ile etkileşimli istemci tarafı web uygulamaları oluşturma için Tek Sayfa Uygulama (SPA) çerçevesidir. Blazor WebAssembly, diğer dillere yeniden derlemeye ihtiyaç duymadan geliştirme yapmayı sağlayan açık web standartlarını kullanır. Blazor WebAssembly tüm modern web tarayıcılarında çalışır.

Web tarayıcısı içinde .NET kodunu çalıştırmayı WebAssembly mümkün kılar. WebAssembly, hızlı indirme ve maksimum yürütme hızı için optimize edilmiş kompakt bir bytecode formatıdır. WebAssembly açık bir web standardıdır ve eklentisiz web tarayıcılarında desteklenir.

WebAssembly kodu, JavaScript aracılığıyla tarayıcının tüm işlevselliğine erişebilir. JavaScript Interoperability olarak bilinir, genellikle JavaScript interop veya JS interop olarak kısaltılır. WebAssembly aracılığıyla yürütülen .NET kodu, tarayıcının JavaScript sandbox içinde, istemci makinesindeki zararlı eylemlere karşı sağladığı koruma ile çalışır.

Yerel Uygulamalar Oluştur

Mevcut Blazor Web UI bileşenleri ile Blazor Hybrid kullanarak yerel istemci uygulamaları oluşturabiliriz. Blazor bileşenleri mobil, masaüstü ve web arasında paylaşılabilir ve yerel istemci yeteneklerine tam erişimden yararlanabilir. Blazor Hybrid ile, .NET Çok Platformlu Uygulama UI (MAUI) kullanarak çapraz platform uygulamalar oluşturabilir ya da mevcut Windows Presentation Foundation (WPF) ve Windows Forms uygulamalarını modernize edebiliriz.

Bir Blazor Hybrid uygulamasında, Razor bileşenleri cihazda yerel olarak çalışır. Bileşenler, yerel bir interop kanalı aracılığıyla gömülü bir Web View kontrolüne yönlendirilir. Bileşenler tarayıcıda çalışmaz ve WebAssembly dahil edilmez. Razor bileşenleri kodu hızlı bir şekilde yükler ve çalıştırır, ve bileşenler cihazın yerel yeteneklerine .NET platformu aracılığıyla tam erişim sağlayabilir.

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

Blazor Sunucu Uygulaması Oluştur

İlk Blazor uygulamamızı oluşturmak için, yeni bir Visual Studio projesi oluşturmalıyız.

• 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 isim verin.
• İleri butonuna tıklayın.
• Hedef bir Çerçeve seçin.
• Proje Oluştur butonuna tıklayın.

Aşağıda gösterildiği gibi Yeni bir Proje oluşturulacak.

Çalıştırılmaya hazır basit bir Blazor uygulaması vermek için birkaç dosya oluşturuldu.

• Program.cs, sunucuyu başlatan uygulamanın giriş noktası olup uygulama hizmetleri ve ara yazılımları konfigure ettiğiniz yerdir.
• App.razor, uygulamanin ana bileşenidir.
• Pages dizini, uygulama için bazı örnek web sayfaları içerir.
• launchSettings.json dosyası, Properties dizini içinde yerel geliştirme ortamı için farklı profil ayarlarını tanımlar. Proje oluşturulduğunda bir port numarası otomatik olarak atanır ve bu dosyaya kaydedilir.

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

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

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

Ana Bileşen

Yan menüde Sayacı'na tıklayın. Butona tıklamanın sayıyı değiştirmeden veya sayfayı yeniden yüklemeden artırdığını göreceksiniz. Normalde bir web uygulamasında sayacı dinamik olarak artırmak JavaScript gerektirir, ancak Blazor ile bunu C# kullanarak gerçekleştirebiliriz. ASP.NET geliştiricilerinin Blazor'u bu kadar sevmesinin nedeni budur. .NET geliştiricilerine web uygulamaları hızlı ve kolay bir şekilde oluşturmalarina yardımcı olur.

Sayaç Bileşeni

Çözümümüzün Pages klasörü içinde bulunan Counter.razor dosyasındaki Counter 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, üstte belirtilen @page yönergesi tarafından belirtilen /counter isteği, Counter bileşeninin içeriğini oluşturmasına neden olur.

Her seferinde Bana tıkla butonu seçildiğinde:

• onclick olayı yürütülür.
• IncrementCount metodu çağrılır.
• currentCount artırılır.
• Güncellenmiş sayıyı göstermek için bileşen oluşturulur.

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

Index.razor dosyasını Visual Studio'da açın. Index.razor dosyası zaten mevcut, çünkü projeyi oluşturduğunuzda oluşturulmuştu. Daha önce oluşturulan BlazorApp dizininin içinde bulunan Pages klasöründe yer alır.

URL'den PDF Oluştur

Öncelikle, PDF dosyaları oluşturmak için üçüncü taraf bir kütüphane yüklememiz gerekir. Kullanacağımız kütüphane IronPDF - PDF Generation for .NET kütüphanesidir. Kullanımı kolaydır, birçok özellik içerir ve geliştirme için ücretsizdir. Blazor Uygulamanızda IronPDF kullanımını, IronPDF Blazor Documentation okuyarak öğrenebilirsiniz.

IronPDF NuGet Paketini Yükle

IronPDF NuGet paketini Blazor WebAssembly uygulamasına, tıpkı normal ASP.NET Core uygulamasındaki gibi yükleyebiliriz.

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 kurulmuş olacaktır.

FetchData.razor dosyasındaki mevcut kodun tümünü kaldırın 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ını oluşturma için istemci tarafı Blazor kodu bulunmaktadır. Bir buton ve bir giriş kutusu tanımlar. Girdi alanı URL değişkenine bağlıdır.

Şimdi, uygulamamız için sunucu tarafı kodu yazalım.

WeatherForecastService.cs dosyasını açın ve mevcut tüm kodu aşağıdaki kod parçası 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 uygulamayı çalıştıralım.

Giriş kutusuna bir URL yapıştırın ve PDF 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.

Sadece üç satır kodla URL'den bir PDF oluşturduk. Bu, IronPDF'in gücüdür.

IronPDF, Iron Software tarafından sağlanmaktadır ve Iron Software'un Iron Suite Ürünlerinin bir parçasıdır. Tam Iron Suite'i satın alarak beş ürünü, ikisini satın alarak harcayacağınız maliyetle satın almanız mümkündür.

Özet

Blazor, interaktif istemci taraflı web UI'leri Microsoft'un .NET Framework'u ile kurmak için bir çerçevedir.

• JavaScript yerine C# kullanarak zengin interaktif UI'ler oluşturun.
• .NET'te yazılmış sunucu ve istemci taraflı uygulama mantığını paylaşın.
• UI'yi HTML ve CSS olarak render ederek mobil tarayıcılar dahil geniş tarayıcı desteği sağlayın.
• Docker gibi modern barındırma platformları ile entegre edin.
• .NET ve Blazor ile hibrit masaüstü ve mobil uygulamalar inşa edin.

.NET'i istemci taraflı web geliştirme için kullanmanın sunacağı avantajlar şunlardır:

• JavaScript yerine C# ile kod yazın.
• Mevcut .NET kütüphane ekosisteminin gücünden yararlanın.
• Uygulama mantığını sunucu ve istemci arasında paylaşın.
• .NET'in performans, güvenilirlik ve güvenliğinden faydalanın.
• Visual Studio veya Visual Studio Code gibi geliştirme ortamıyla Windows, Linux veya macOS üzerinde verimli olun.
• Kullanıcısı dostu, zengin özelliklere sahip ve kullanımı kolay diller, çerçeveler ve araçlar setine dayanan bir yapı üzerinde inşa edin.