Blazor WebAssembly Eğitimi

Eğitim Hakkında

Blazor ile C# kullanarak etkileşimli web arayüzü geliştirme: bileşenler, durum, kimlik ve dağıtım

Blazor WebAssembly ile tarayıcıda doğrudan .NET çalıştıran tek sayfa uygulamaları geliştirmeyi anlatır. WASM çalışma zamanı, indirme boyutu, trimming ve AOT, lazy assembly loading, PWA ve çevrimdışı çalışma, OIDC ile kimlik doğrulama, HttpClient ile API çağrıları ve performans konuları örnek bir SPA üzerinde uygulanır.

Süre ve Format

3 Gün. Her gün dört modül; anlatımı canlı bileşen geliştirme laboratuvarları takip eder.

Seviye

Orta Seviye — 12 uygulamalı modülde Blazor barındırma modelleri, Veri bağlama ve formlar ve Blazor ile uygulama geliştirme projesi gibi konuları kapsar.

Öğrenme Metodu

Her konu çalışan bir Blazor uygulaması üzerinde canlı kodlanır; bileşenler, form doğrulama ve API entegrasyonu birlikte laboratuvarda geliştirilir.

Neden Bu Eğitim?

🧱Bileşen odaklı düşünme

UI'yı yeniden kullanılabilir Razor bileşenlerine bölmeyi, parametre ve olay akışını kodlayarak öğrenirsiniz.

🔁Tek dil, iki dünya

İstemci ve sunucu tarafında C# kullanarak JavaScript bağımlılığını azaltır, gerektiğinde JS interop ile kütüphaneleri entegre edersiniz.

🚀Doğru model seçimi

Server, WebAssembly ve Hybrid modellerinin gecikme, boyut ve ölçek yönünden farklarını ölçerek karar verirsiniz.

Anahtar Konular

blazor webassembly eğitimiblazor eğitimiblazor webassemblyblazor serverrazor componentc# frontendblazor form doğrulamablazor authenticationsignalrasp.net core blazor

“Arayüz, birbirine doğru bağlanmış küçük bileşenlerin toplamıdır.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve ortam gereksinimleri

1

C# bilgisi

Sınıf, async/await ve LINQ konularında temel C# bilgisi.

2

HTML ve CSS

Temel HTML yapısı ve CSS seçicilerine aşinalık.

3

Kurulu ortam

Güncel .NET SDK ve Visual Studio 2022 veya VS Code kurulu bilgisayar.

4

Web temelleri

HTTP, REST ve JSON kavramlarına genel hakimiyet.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı gün sonunda Blazor barındırma modelleri, Blazor WebAssembly çalışma zamanı, Bileşenler ve yaşam döngüsü ve Yönlendirme ve gezinme başlıklarını çalışan örnek kod üzerinde uygulayarak "WASM çalışma zamanı ve bileşenler" konusunda bağımsız çalışabilir hale gelir.

Modül 1

Blazor barındırma modelleri

Blazor Server, WebAssembly, Hybrid ve .NET 8 interactive render mode'ları
.razor bileşen dosyası yapısı, @code bloğu ve kod-arkası (partial class)
SignalR devresi (circuit) ve Blazor Server bağlantı yaşam döngüsü
Proje şablonları, Program.cs ve App.razor yönlendirici
wwwroot, _Imports.razor ve statik varlıklar
Hangi modelin ne zaman seçileceği: gecikme, ölçek, çevrimdışı gereksinimi

Modül 2

Blazor WebAssembly çalışma zamanı

WebAssembly üzerinde .NET çalışma zamanı ve indirme boyutu
Trimming, AOT derleme ve Brotli sıkıştırma
Lazy loading assembly ile ilk açılışı hızlandırma
PWA: service worker, manifest ve çevrimdışı çalışma
IndexedDB ile istemci tarafı veri saklama
Hosted çözüm: paylaşılan Models projesi ve ASP.NET Core API

Modül 3

Bileşenler ve yaşam döngüsü

[Parameter], [EditorRequired] ve bileşenler arası veri akışı
EventCallback<T> ile çocuktan ebeveyne olay bildirimi
RenderFragment ve ChildContent ile kapsayıcı bileşenler
Yaşam döngüsü: OnInitializedAsync, OnParametersSet, OnAfterRender, Dispose
CascadingValue ve CascadingParameter
@ref ile bileşen referansı ve StateHasChanged

Modül 4

Yönlendirme ve gezinme

@page yönergesi, rota parametreleri ve kısıtlamalar (:int, :guid)
NavigationManager.NavigateTo ve LocationChanged olayı
NavLink ve aktif bağlantı eşleştirme
Layout bileşenleri, MainLayout ve iç içe layout
Sorgu dizesi parametreleri ([SupplyParameterFromQuery])
Yönlendirme kilidi (NavigationLock) ve kaydedilmemiş değişiklik uyarısı

Günün hedefiKatılımcı gün sonunda Veri bağlama ve formlar, Servisler, HttpClient ve durum yönetimi, JavaScript birlikte çalışabilirliği ve Blazor kimlik doğrulama ve yetkilendirme başlıklarını çalışan örnek kod üzerinde uygulayarak "Formlar, API, JS interop ve kimlik" konusunda bağımsız çalışabilir hale gelir.

Modül 1

Veri bağlama ve formlar

@bind, @bind:event ve @bind:after ile iki yönlü bağlama
EditForm, EditContext ve model tabanlı form yönetimi
DataAnnotationsValidator, ValidationMessage ve ValidationSummary
InputText, InputNumber, InputSelect, InputDate ve InputFile bileşenleri
Özel doğrulama niteliği ve FieldCssClassProvider
Dosya yükleme ve büyük dosyalar için akış okuma

Modül 2

Servisler, HttpClient ve durum yönetimi

DI yaşam süreleri: Server'da Scoped = devre, WASM'de Scoped = uygulama
Typed HttpClient ile REST API çağrıları
State container deseni ve olay tabanlı durum paylaşımı
localStorage / sessionStorage ve ProtectedBrowserStorage
Fluxor ile Redux benzeri durum yönetimi
Önbellekleme ve gereksiz API çağrılarını azaltma

Modül 3

JavaScript birlikte çalışabilirliği

IJSRuntime, InvokeAsync ve InvokeVoidAsync
DotNetObjectReference ve [JSInvokable] ile JS'ten .NET çağrısı
JavaScript modülleri (IJSObjectReference) ve izole yükleme
JSImport / JSExport (WASM) ile doğrudan birlikte çalışma
Üçüncü taraf kütüphane entegrasyonu: grafik, harita, editör
Prerendering sırasında JS çağrısı hataları ve OnAfterRender çözümü

Modül 4

Blazor kimlik doğrulama ve yetkilendirme

AuthenticationStateProvider ve CascadingAuthenticationState
AuthorizeView, [Authorize] ve rol/policy tabanlı erişim
WASM'de OIDC kimlik doğrulaması (Entra ID / IdentityServer)
Access token alma ve HttpClient'a AuthorizationMessageHandler ekleme
Blazor Server'da cookie kimlik doğrulaması ve devre güvenliği
Güvenlik notları: istemci tarafı kodun güvenilmez olması

Günün hedefiKatılımcı gün sonunda Gelişmiş bileşen teknikleri, Blazor performans ve test, Yayınlama ve çalıştırma ortamları ve Blazor ile uygulama geliştirme projesi başlıklarını çalışan örnek kod üzerinde uygulayarak "Gelişmiş bileşenler, performans ve yayın" konusunda bağımsız çalışabilir hale gelir.

Modül 1

Gelişmiş bileşen teknikleri

Generic bileşenler (@typeparam) ve templated components
RenderTreeBuilder ile programatik bileşen oluşturma
DynamicComponent ve çalışma zamanında bileşen seçimi
ErrorBoundary ile bileşen hatalarını izole etme
Virtualize ile büyük listelerin sanallaştırılması
QuickGrid ve veri tablosu bileşenleri

Modül 2

Blazor performans ve test

ShouldRender, StateHasChanged ve gereksiz yeniden çizimi azaltma
Streaming rendering ve prerendering (.NET 8)
SignalR ölçekleme, Azure SignalR Service ve sticky session
bUnit ile bileşen testi: RenderComponent, Find, Click
Tarayıcı geliştirici araçları ve .NET WebAssembly hata ayıklama
Bellek sızıntıları: IDisposable ve olay aboneliği temizliği

Modül 3

Yayınlama ve çalıştırma ortamları

dotnet publish, framework-dependent ve self-contained dağıtım
Docker çok aşamalı Dockerfile ve docker-compose
IIS + ASP.NET Core Module (ANCM) ve Linux'ta nginx ters vekil
Azure App Service'e dağıtım ve yapılandırma
Health checks (AddHealthChecks) ve readiness / liveness uçları
Serilog ve Application Insights ile üretim loglaması

Modül 4

Blazor ile uygulama geliştirme projesi

Proje gereksinimleri ve bileşen ağacı tasarımı
Liste / detay / düzenleme ekranlarının bileşenlere bölünmesi
API entegrasyonu ve hata durumları için yükleniyor / hata arayüzleri
Form doğrulama ve kullanıcı geri bildirimi
Kimlik doğrulama ve sayfa koruma
Yayınlama: Azure Static Web Apps veya IIS

Eğitim Kazanımları

Program sonunda katılımcılar:

🧩

Bileşen geliştirme

Parametre, EventCallback ve RenderFragment ile esnek bileşenler yazabilirsiniz.

📋

Formlar

EditForm ve doğrulama ile güvenli veri girişi ekranları oluşturabilirsiniz.

🧭

Yönlendirme

Layout, rota parametresi ve NavigationManager ile uygulama içi gezinmeyi kurgulayabilirsiniz.

🌐

API entegrasyonu

Typed HttpClient ile REST API'lerden veri çekip yönetebilirsiniz.

🔐

Kimlik doğrulama

AuthorizeView ve OIDC ile sayfa ve bileşen koruması yapabilirsiniz.

🔌

JS interop

IJSRuntime ile JavaScript kütüphanelerini güvenli şekilde entegre edebilirsiniz.

⚡

Performans

Yeniden çizimi azaltıp büyük listeleri sanallaştırarak performansı iyileştirebilirsiniz.

📦

Yayınlama

Blazor uygulamasını IIS, Azure veya statik barındırmada yayınlayabilirsiniz.

Kimler İçin Uygundur?

SPA geliştiren .NET ekipleri
Angular/React yerine C# kullanmayı değerlendiren geliştiriciler
mimarlar için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

SPA geliştiren .NET ekipleri, Angular/React yerine C# kullanmayı değerlendiren geliştiriciler ve mimarlar için uygundur.

Blazor için JavaScript bilmem gerekir mi?

Hayır; temel JS bilgisi yararlıdır ancak eğitim ağırlıkla C# ve Razor ile ilerler. JS interop ayrı bir modülde işlenir.

Blazor Server mı WebAssembly mi öğretiliyor?

İkisi de ele alınır; render modları, ölçek ve güvenlik farkları karşılaştırmalı olarak gösterilir.

Örnek projeler hazır mı?

Başlangıç iskeleti sağlanır, bileşenleri birlikte yazarak geliştirirsiniz.

Eğitim sonunda sertifika alacak mıyım?

Eğitimi tamamlayan katılımcılara Digital Vizyon Akademi Katılım ve Başarı Sertifikası verilir. Üçüncü taraf kurumların resmi sınavları (varsa) ayrı olup başvurusu ve ücreti ilgili kuruma aittir.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika

BLAZOR WEBASSEMBLY EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

Blazor barındırma modelleri

Blazor WebAssembly çalışma zamanı

Bileşenler ve yaşam döngüsü

Yönlendirme ve gezinme

Veri bağlama ve formlar

Servisler, HttpClient ve durum yönetimi

JavaScript birlikte çalışabilirliği

Blazor kimlik doğrulama ve yetkilendirme

Gelişmiş bileşen teknikleri

Blazor performans ve test

Yayınlama ve çalıştırma ortamları

Blazor ile uygulama geliştirme projesi

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

ASP.NET MVC Web Applications: Adaptive UI Layout & Caching Strategy Eğitimi

ASP.NET MVC Web Applications: Asynchronous Tasks Eğitimi

ASP.NET MVC Web Applications: Authorization & Exception Handling Eğitimi

ASP.NET MVC Web Applications: Claims-Based Authentication Eğitimi

ASP.NET MVC Web Applications: Composing the UI Layout Eğitimi