Blazor ile Web Uygulaması Geliştirme 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 ile C# kullanarak etkileşimli web arayüzü geliştirmeyi uçtan uca anlatır. Barındırma modelleri, Razor bileşenleri ve yaşam döngüsü, EditForm doğrulama, yönlendirme, DI ve typed HttpClient, JavaScript interop, AuthorizeView ile kimlik, bileşen şablonları ve dağıtım adımları küçük bir yönetim paneli projesi üzerinde ele alını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, Servisler, HttpClient ve durum yönetimi 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 ile web uygulaması geliştirme 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, Bileşenler ve yaşam döngüsü, Veri bağlama ve formlar ve Yönlendirme ve gezinme başlıklarını çalışan örnek kod üzerinde uygulayarak "Blazor temelleri, bileşenler ve formlar" 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

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 3

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 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 Servisler, HttpClient ve durum yönetimi, JavaScript birlikte çalışabilirliği, Blazor kimlik doğrulama ve yetkilendirme ve Gelişmiş bileşen teknikleri başlıklarını çalışan örnek kod üzerinde uygulayarak "Servisler, JS interop, kimlik ve gelişmiş bileşenler" konusunda bağımsız çalışabilir hale gelir.

Modül 1

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 2

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 3

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ı

Modül 4

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

Günün hedefiKatılımcı gün sonunda Blazor WebAssembly çalışma zamanı, 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 "WebAssembly, performans ve proje yayını" konusunda bağımsız çalışabilir hale gelir.

Modül 1

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

C# bilen ve JavaScript çatılarına alternatif arayan web geliştiriciler
.NET ekipleri
masaüstünden web'e geçen yazılımcılar için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

C# bilen ve JavaScript çatılarına alternatif arayan web geliştiriciler, .NET ekipleri ve masaüstünden web'e geçen yazılımcılar 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 COURSE: BUILDING WEB APPLICATIONS 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

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

Veri bağlama ve formlar

Yönlendirme ve gezinme

Servisler, HttpClient ve durum yönetimi

JavaScript birlikte çalışabilirliği

Blazor kimlik doğrulama ve yetkilendirme

Gelişmiş bileşen teknikleri

Blazor WebAssembly çalışma zamanı

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

Blazor WebAssembly Eğitimi

Blazor'e Giriş Eğitimi

Building a Microservice in .NET Core Eğitimi

Building an API Project in ASP.NET Eğitimi

Building and Migrating .NET Core Libraries Eğitimi