Pluralsight'tan aldığım Blazor:Getting Started eğitimini çalıştığım Repo.
Örnek uygulama Burağın dünya çapında ün yapmış plak dükkanlarının insan kaynakları yönetimi için kullanılıyor :) Kurstaki CSS giydirme gibi tasarım konularını atladım. Uygulama ortak bir kütüphane dışında data için birde Web API kullanıyor.
Kursun 5nci modülüne kadar Client Side çalışan bir Blazor uygulamasının geliştirilmesi söz konusu. Veriye erişim için API kullanılması sonraki aşamadaki işleri kolaylaştırıyor. Nitekim App isimli ana uygulama minimum eforla bir Razor Library'ye dönüştürülüp hem Server Side hem de Client Side çalışan iki ayrı Blazor uygulamasında ortaklaşa kullanılıyor. Tek kod parçası ile hem Client Side hem Serve Side çalışan Blazor app desteğinin nasıl yapılacağını öğrenmiş oluyoruz.
- Windows 10
- Visual Studio 2019 Community Edition
- Api tarafı veritabanı olarak Local SQL Db kullanıyor (Pekala farklı bir veritabanı sistemi de seçilebilir) Buna erişmek içinse Entity Framework Core'dan yararlanıyor (Api projesinde kullanılan Nuget paketlerine bakın) İlk başta Migration planı oluşturup veritabanını üretmek için, Package Manager Console üstünde Api projesi seçili iken aşağıdaki terminal komutlarını çalıştırmak yeterli. İşlemde bir sorun olmazsa appsettings.json içindeki Connection String bilgisine göre bir veritabanı üretilmiş olmalı.
Add-Migration InitialCreate
Update-Databaseİşler yolunda gitti ve hem veritabanı oluştu
hem de API çalışır hale geldi.
- App uygulamasında DataService'ler IHttpClientFactory'yi kullanmakta. Bu nedenle program sınıfındaki DI register işleminde yer alan AddHttpClient metodu için Microsoft.Extensions.Http Nuget paketine ihtiyaç var.
- Web API entegrasyonu sonrası çözümü çalıştırırken Multiple Startup Projects kısmında önce Api sonrasında App uygulamalarının ayağa kalkacağını belirtmemiz işimizi kolaylaştırır. Özetle önce Api sonrasında App uygulamaları ayağa kalkmalı.
Bugün itibariyle eğitimin ilk dört modülünü tamamladım. Şu an itibariyle uygulamada aşağıdaki fonksiyonellikler bulunuyor.
- Çalışanlar listelenebiliyor.
- Bir çalışanın detay bilgisine bakılabiliyor.
- Detay sayfasında çalışanın Longtitude, Latitude değerlerini baz alarak harici Javascript paketi çağırılıp bir harita gösterilebiliyor. (.Net Razor sayfasından harici Javascript fonksiyonu çağırma)
- Bir çalışan Modal Dialog yardımıyla Ad, Soyad ve Email gibi sadece zorunlu alanlar içerecek şekilde eklenebiliyor. (Modal Dialog ile haberleşme)
- Çalışan ekleme sayfasından daha fazla bilgiye ekleme yapılabiliyor.
- Çalışan verisini silme ve güncelleme fonksiyonları da işliyor.
Çalışma ile ilgili genel sonuçlara ait ekran görüntüleri ise aşağıdaki gibi.
5nci modülü tamamladıktan sonra BuraksRecordShopHRM.App isimli Razor Components Library'ye dönüştürülmüş projeyi kullanabilen Client ve Server Side Blazor uygulamaları ortaya çıktı. Az bir eforla ortak kütüphane üstüne oturmuş iki farklı Blazor çalışma modeli.
Client modelde gerekli dll'ler istemci tarafına indirilip Web Assembly üzerinden çalışırken, Server Side modelde sunucu tarafında Asp.Net Core uygulaması yürümekte ve istemciye inen parçalar onunla SignalR kanalı üstünden haberleşmekte.
