• Buradasın

    ASP.NET Core Web API ve Blazor ile Tek Sayfa Uygulaması Oluşturma Eğitimi

    youtube.com/watch?v=SAkUBSIsvzI

    Yapay zekadan makale özeti

    • Bu video, bir eğitmen tarafından sunulan yazılım geliştirme eğitim serisinin üçüncü bölümüdür. Eğitmen, ASP.NET Core Web API ve Blazor teknolojilerini kullanarak tek sayfa uygulaması (SPA) oluşturma sürecini adım adım anlatmaktadır.
    • Video, to-do list uygulaması örneği üzerinden Web API'lerin JavaScript ve Blazor ile nasıl tüketileceğini göstermektedir. İçerikte, API servisi oluşturma, HTTP istekleri (GET, POST, PUT, DELETE, PATCH), CORS ayarları, veritabanı işlemleri ve Razor bileşenlerinin nasıl kullanılacağı detaylı olarak anlatılmaktadır. Ayrıca, JWT kullanarak API'lerin nasıl korunacağı ve rol yönetimi konuları da ele alınmaktadır.
    • Eğitim, hem JavaScript ile hem de Blazor kullanarak API tüketimi yöntemlerini karşılaştırmakta, Blazor'ın tek sayfa uygulamaları için sunduğu avantajları vurgulamaktadır. Video yaklaşık 1 saat 43 dakika sürmekte ve son bölümde Web API'lerde CRUD işlemleri ile ilgili bilgiler verilmektedir.
    00:02Web API Kullanımı ve Tek Sayfa Uygulaması Oluşturma
    • Dersin üçüncü bölümünde Vappy'ye giriş yapılmış, Jason formatı ve to do list örneği oluşturulmuştur.
    • Önceki derste HTML, HTTP fiilleri ve CRUD işlemleri (Create, Read, Update, Delete) uygulanmış, arka planda çalışan bir web API uygulaması oluşturulmuştur.
    • Bu derste, API'yi tüketen ayrı bir uygulama yazılacak ve bu uygulama tek sayfa uygulaması şeklinde tasarlanacaktır.
    01:38JavaScript ile API Tüketimi
    • JavaScript'in API'leri çekebilen ve işlem yapabilen kendi bir fonksiyonu (fetch) vardır.
    • Ham JavaScript kullanarak API tüketimi yapılacak, ayrıca jQuery, React, Angular gibi frameworkler de kullanılabilir.
    • Microsoft'un sitesinden örnek alınacak ve daha sonra Blazor ile aynı API'ye bağlanma denenecektir.
    02:13CORS Ayarları ve Uygulama Oluşturma
    • Uygulamalar arasında izin verme durumları olduğu için CORS ayarlarına bakılacaktır.
    • Microsoft'un sitesinden örnek alınırken, aynı projenin üzerine tek sayfalık bir index.html oluşturulmuş ve WW root klasörü statik hale getirilmiştir.
    • Farklı bir siteden bağlandığımızda CORS ayarlarına ihtiyaç duyulacağından, farklı bir uygulama üzerinden bağlanma gösterilecektir.
    04:47Yeni Uygulama Oluşturma ve Tasarım
    • Yeni bir uygulama (ToDoList veya Tüketimi) oluşturulacak ve HomeController indeksi kullanılacaktır.
    • Projenin arayüzü için bir form tasarımı alınacak ve body'nin içine kopyalanacaktır.
    • Tek sayfa uygulaması olduğu için ekleme ve düzenleme işlemleri için ayrı formlar tasarlanmıştır.
    09:31JavaScript Dosyalarının Konumlandırılması
    • JavaScript dosyalarının sayfanın ortasına yerleştirilmesi istenmez, body'nin alt kısmında veya üstünde olmalıdır.
    • Layout'taki script section'ına JavaScript dosyaları eklenmelidir.
    • ASP.NET Core projelerinde genellikle js klasörünün içinde site.js adında bir JavaScript dosyası oluşturulur ve buraya kodlar yazılır.
    13:27JavaScript ve API Entegrasyonu
    • Sayfa yüklendiğinde "get items" adlı bir JavaScript metodu çağrılıyor ve bu metot fetch API'sini kullanarak verileri çekiyor.
    • Fetch API, veri çekmek için kullanılan bir komuttur ve URI (api/to-the-items) adresine istek gönderiyor.
    • Get items metodu verileri JSON formatında alıp, başarılı olursa "display data" adlı başka bir metoda gönderiyor, başarısız olursa hata mesajı gösteriyor.
    16:05Verilerin Gösterilmesi
    • Display items metodu, DOM ağacından "todos" id'sine sahip table body elementini seçerek içini boşaltıyor.
    • Alınan verileri kullanarak tabloya elemanlar ekliyor, butonlar ve inputlar oluşturuyor.
    • Tabloya yapılacak işleri gösteriyor ve toplam eleman sayısını "display count" adlı başka bir metoda gönderiyor.
    18:04Uygulama Çalıştırma ve CORS Sorunu
    • Hem arka plan API hem de ön taraf uygulaması aynı anda çalıştırılmalı, ancak aynı port numarası kullanılamıyor.
    • Port numarası değiştirilerek (5000-5001 yerine 6000-6001) uygulama çalıştırılıyor.
    • CORS (Cross-Origin Resource Sharing) sorunu nedeniyle API, farklı kaynaklardan gelen istekleri kabul etmiyor.
    21:18CORS Ayarları ve Uygulama Tamamlama
    • CORS ayarları için "app.use(cors())" komutu kullanılıyor ve sadece "http://localhost:6001" adresinden gelen istekler kabul ediliyor.
    • Tüm başlıklar ve metotlar için izin verilerek CORS sorunu çözülüyor.
    • Uygulama yeniden başlatıldıktan sonra API'den veriler çekiliyor ve tabloya eklenecek işler, edit ve delete butonları oluşturuluyor.
    27:14Tek Sayfa Uygulamalarında API Kullanımı
    • TextBox'a yazılan eleman DOM ağacından okunup, API tarafından ihtiyaç duyulan body olarak bir JavaScript item'ına dönüştürülüyor.
    • Fetch API'si kullanılarak POST isteği gönderiliyor ve geri dönen cevap get items metodu ile ekrana yazdırılıyor.
    • Hata oluşursa catch bloğu çalışarak hatayı yakalıyor, işlem gerçekleşirse textbox içeriği sıfırlanıyor.
    29:45Tek Sayfa Uygulaması Örneği
    • Ekle butonuna basıldığında sayfa gidip gelmeden, API ile veriler ekrana yazdırılıyor.
    • Silme işlemi de benzer şekilde API ile gerçekleştiriliyor ve değişiklikler get items ile ekrana yansıtılıyor.
    • Veritabanına bakıldığında eklenen ve silinen elemanların değişikliklerinin kaydedildiği görülüyor.
    31:12Tek Sayfa Uygulamaları Kavramı
    • Tek sayfa uygulamaları (Single Page Application) sayfalar arasında git-gel yapmadan, arka plandaki iletişim JavaScript ile sağlanan uygulamalardır.
    • Önceki örnekte bilgi alınıp başka bir yerde işlenip geri dönüyordu, ancak tek sayfa uygulamalarında bu git-gel olmuyor.
    • Deneme iki adlı eleman eklendiğinde veritabanında da değişiklik gerçekleşiyor.
    33:41API Tüketim Yöntemleri
    • API'yi tüketmek için JavaScript'in fetch API'si kullanılabilir, ayrıca jQuery veya Angular gibi kütüphaneler de tercih edilebilir.
    • Angular ilk başlangıçta zor gelebilir, Vue daha kolay öğrenilebilir.
    • .NET Core tarafında tek sayfa uygulamaları için Blazor uygulamaları geliştirilmiş durumda.
    35:05Blazor ve WebAssembly
    • Blazor ile tek sayfa uygulamaları geliştirilebiliyor ve JavaScript kullanmadan ön ve arka plan inşa edilebiliyor.
    • Blazor henüz deneme sürümünde olup, WebAssembly (WebSM) üzerinde çalışmak üzere yapılandırılmış.
    • WebAssembly, tarayıcıda C, Delphi, Java gibi dillerin çalıştırılabilmesini sağlayan bir teknolojidir.
    37:25Blazor'da Component Mantığı
    • Blazor komponent mantığı ile çalışıyor, örneğin bir counter programlandıktan sonra her yerde kullanılabilir.
    • Blazor ile dinamik sayfalar oluşturulabilir, veriler hemen eklenip görüntülenebilir.
    • Blazor'da bir servis oluşturmak için interface tanımlanabilir ve asenkron metotlar kullanılabilir.
    46:22Blazor'da Servis Oluşturma
    • Blazor uygulamasında "To The Item" modeli oluşturuldu ve diğer projeden aktarıldı.
    • "To Do List Service" adında bir sınıf oluşturuldu ve "IToDoListService" arayüzü uygulandı.
    • HTTP Client nesnesi, servise enjekte edildi ve servis, API'lerle iletişim kurmak için kullanıldı.
    49:14HTTP Client Kurulumu ve Yapılandırma
    • HTTP Client'in yeni sürümü NuGet üzerinden projeye kuruldu.
    • Startup.cs dosyasında HTTP Client servisi eklendi ve base API adresi URI formatında belirlendi.
    • Servis, HTTP Client'ı kullanarak API'den verileri asenkron olarak çekmeyi sağladı.
    54:04Blazor Komponentleri ve Sayfa Yapısı
    • Blazor'da sayfalar (page'ler) programlanmış komponentler olarak çalışır ve diğer sayfalara gömülerek kullanılabilir.
    • App.razor dosyası işlemlerin başladığı yerdir ve MainLayout komponentini kullanır.
    • MainLayout komponenti, navigation bar ve body içeriği oluşturan bir yapıya sahiptir.
    55:21Blazor Komponentlerinin Özellikleri
    • Blazor komponentlerinde HTML kodu ve C# kodu aynı dosyada bulunabilir veya farklı dosyalarda tutulabilir.
    • Counter komponentinde buton tıklaması olayı C# kodunda kontrol edilir ve sayfa yenilenmeden güncellenir.
    • Blazor tek sayfa uygulaması olarak çalışır, sayfalar arasında gidip gelme olmadan veri güncellenir.
    57:29Yeni Komponent Oluşturma
    • "To Do List" adında yeni bir Razor bileşeni oluşturuldu ve page belirteci ile isimlendirildi.
    • Navigation bar'a "Yapılacak İşler" bağlantısı eklendi ve tıklandığında To Do List komponenti çalışacak şekilde yapılandırıldı.
    • Servis, komponente enjekte edildi ve verileri çekme işlemi gerçekleştirilecek şekilde hazırlandı.
    1:02:28Blazor Uygulamasında API Verilerini Gösterme
    • Blazor uygulamasında sayfa oluşurken "OnInitializedAsync" metodu override edilerek API'den verileri çekme işlemi gerçekleştirilir.
    • "TodoItems" adında bir liste oluşturulup, sayfa initialize edilirken servisten "GetTodoItems" metodu ile veriler bu listeye doldurulur.
    • Razor kuralları kullanılarak "foreach" döngüsü ile liste elemanları ekrana yazdırılır.
    1:08:58CORS Sorunları ve Yüklenme Durumu
    • CORS ayarları değiştirilerek farklı orijinlere izin verilmesi sağlanır.
    • Veriler henüz API'den çekilmemişken liste boş olduğundan "null reference" hatası oluşur.
    • Eğer "TodoItems" boşsa ekranda "Yükleniyor" yazısı gösterilir, aksi halde liste elemanları görüntülenir.
    1:15:18Blazor'ın Özellikleri ve Kullanımı
    • Blazor ile API'ye bağlanarak verileri çekme işlemi gerçekleştirilir.
    • Razor dilinde "checkbox" gibi inputlar kullanılarak verilerle bağlanabilir.
    • C# kodu kullanılarak "TodoItems" listesindeki tamamlanan işlerin sayısı hesaplanabilir.
    1:22:06MVC Uygulamasına API Controller Ekleme
    • MVC uygulamasına API ile ilgili controller eklemek için Code Generator kullanılır.
    • "KategoriYönetimi" adında bir API controller oluşturulur ve "E-TicaretContext" ile bağlanır.
    • Oluşturulan controller "api/KategoriYönetimi" adresi üzerinden erişilebilir.
    1:26:29API Kullanımı ve Kategori Yönetimi
    • Uygulama admin olarak çalıştırılarak kategoriler görüntüleniyor ve bu kategoriler API olarak dışarıya açılmış durumda.
    • Postman kullanılarak API çağrısı yapılıyor ve kategori yönetimi için GET metodu ile kategoriler listeleniyor.
    • API ile kategori id'si verilerek tek bir kategori de çekilebiliyor.
    1:29:14Yeni Kategori Oluşturma
    • Post metodu ile yeni kategori oluşturulmak için JSON formatında gövde bilgisi gönderiliyor.
    • Kategori oluşturma işlemi başarılı olduğunda 201 Created durum kodu döndürüyor ve veritabanına kaydediliyor.
    • API ile dışarıdan kategori oluşturulabiliyor ancak normal kullanıcı arayüzünde admin olmayanlar kategori işlemleri yapamıyor.
    1:32:34API Güvenliği
    • API'ler için yetki kontrolü eklenerek sadece admin rollerine sahip kullanıcıların erişimine izin veriliyor.
    • Yetkisiz kullanıcılar API'ye erişmeye çalıştığında "erişim engellendi" hatası alıyor.
    • Dışarıdan Postman gibi araçlarla yapılan API çağrısında da yetki kontrolü çalışıyor ve kullanıcıya giriş ekranı gösteriliyor.
    1:35:47JSON Web Token Kullanımı
    • Farklı platformlardan çalıştırılan uygulamalarda API'ler arka planda çalışarak diğer arayüzlerine hizmet veriyor.
    • JSON Web Token (JWT) kullanılarak kullanıcı yetkileri yönetiliyor, kullanıcı adı ve şifre ile giriş yapıldığında token gönderiliyor.
    • Diğer işlemler için token kullanıcının elinde olması gerekiyor, token içinde kullanıcı rolleri gibi bilgiler bulunuyor.
    1:41:22Tek Sayfa Uygulaması Önerisi
    • Kullanıcılar ve roller için tek sayfa uygulaması geliştirilmesi öneriliyor.
    • Mevcut uygulama tek sayfa değil, sayfalar arasında gidip geliyor.
    • Rol yönetimi ve kullanıcı yönetimi için tek sayfa uygulaması geliştirilebilir, böylece sayfa yenilenmesi olmadan işlemleri yapabilirsiniz.
    1:43:17Web API İşlemleri
    • Web API'lerde gerçekleştirilebilen temel işlemler: GET, POST, PUT, DELETE ve PATCH'tir.
    • PUT ve PATCH işlemlerinin kullanımı nadiren olup, genellikle GET ve POST ile çoğu iş yapılabilir.
    • PUT işlemi nesnenin tamamını değiştirmek için, PATCH işlemi ise nesnenin sadece bir kısmını değiştirmek için kullanılır.
    1:44:16Dersin Sonu ve Öneriler
    • Dersin sonuna gelindi ve haftaya sessionlar konusuna bakılacak.
    • ASP.NET'te daha fazla konu olduğunu ve web API ve Identity konularının üzerine kitaplar yazılabilme potansiyeli olduğunu belirtti.
    • JSON formatı, yönlendirme ve API'yi tek sayfa uygulamalarda tüketme konularında derinlemesine bilgi verildiği ifade edildi.
    1:45:48Ek Bilgiler ve Öneriler
    • API'ler başka bir arayüz programlamak için kullanılabilir, bu arayüzün mobil olması zorunlu değildir.
    • Blazer'ın mobil uygulama geliştirme özelliği olduğunu ve hem iOS hem Android için mobil uygulama geliştirilebileceğini belirtti.
    • Blazer'ın şu anda deneme sürümünde olduğunu ve tam olarak çıktığında web uygulaması geliştirme gibi mobil uygulama geliştirme imkanı sağlayacağını belirtti.

    Yanıtı değerlendir

  • Yazeka sinir ağı makaleleri veya videoları özetliyor