Angular 9 ve .Net Core Wep API ile Product Card Geliştirme
Merhabalar,
Bu yazımda hepimizin aşina olduğu E-Ticaret sitelerindeki product card listeleme özelliğini Angular 9 ve .Net Core API ile birlikte kodlayacağız.
Ben kodlama yaparken Visual Studio Code kullanacağım.
PRODUCT API Oluşturalım
dotnet new webapi -o ProductsApi
Projemizi oluşturduktan sonra proje dizinine girelim ve IDE üzerinde proje klasörünü açalım.
cd ProductsApi
code .
İlk önce Product.cs sınıfını oluşturalım.
Daha sonra Mock bir ProductList döndüren ProductService.cs servisini yazalım.
Yazdığımız servisi kullanacağımız ProductsController.cs controller’ını oluşturalım.
Ardından aşağıdaki komutları terminalde çalıştıralım.
dotnet build
dotnet run
API ayağa kalktıktan sonra servisimizi çağıralım, response olarak JSON product listemizi alalım.
https://localhost:5001/api/products
https://codebeautify.org/jsonviewer kullanarak JSON’ı beautify edelim.
UI tarafını besleyecek servisimiz tamamlanmış oldu.
UI Template Oluşturalım
UI tarafında Angular CLI kullanarak Angular projesi açalım.
ng new ECommerce
Bu aşamada bize routing ve kullanacağımız stylesheet format’ı soruluyor olacak.
Daha sonra projemizi açalım.
cd ECommerce
code .
Servis ve componentimizi oluşturalım.
ng g service Service/ProductApi
ng g c ProductCard
Daha sonra product card url oluşturalım. Ve app-routing-module.ts dosyasına aşağıdaki şekilde ekleyelim.
http://localhost:4200/product-card url’i üzerinden sayfamıza erişeceğiz.
ng g class Model/Product
Product sınıfını API Response olarak dönen listeyi map etmek için oluşturuyoruz ve aşağıdaki şekilde kullanıyoruz. Burada Product tipinde bir liste döneceğini belirtiyoruz.
Product Card componentinin typescript kısmı içerisinde productService’ in ilgili metodunu çağırarak product listemizi alıyoruz.
NOT : CORS hatasını önlemek için webapi projesinde CORS ile ilgili config eklemeniz gerekiyor.
Product Card componentinin html kısmı içerisinde productList datasını aşağıdaki şekilde ekrana basıyoruz.
ng build
ng serve -o
Sonuç :
Kaynak kodları Github hesabımdan inceleyebilirsiniz.
İyi Çalışmalar :)
