REACT UI MECHANICS
React ile Admin Tool Geliştirelim-CRUD İşlemleri
React UI Mekanikleri konusunda önceki yazı serisini içerikleri kapsayacak bir senaryo geliştirmeye karar verdim. Bu konuda bir eTicaret sitesinin yönetiminde kullanılacak bir araç tasarlamaya çalışacağız.
Admin Tool -1 yazısında Landing Page içerisinde bir Login Paneli geliştirip bu ekran ile Admin Page arasında geçiş yapmamızı sağlayan mekanizmaları oluşturmuştuk.
Bu yazıda e-Ticaret sitelerinin en önemli içeriği olan Product (Ürün) bizim ürün tanımlama , güncelleme, silme ve düzenleme yapılarını oluşturmamız gereken Arayüz geliştirmemiz gerekiyor. Tabi tüm bunlar deneysel olduğu için UI gereksinimlerini ve kontrollerini olabildiğince basit tutarak gerçekleştireceğiz.
Ürünler için basit bir CRUD işlem yapısı oluşturalım. Basitçe aklımdaki yapı aşağıdaki yeteneklere sahip olacak
- Ürünleri Ekleme Düğmesi
- Ürün Detaylarını Ekleme ve Güncellemele Form Ekranı
- Ürünlerin listelendiği Tablo
- Ürünlerin listelendiği Tabloyu Filtreleme
- Ürünlerin listelendiği Tablo üzerinden ürün silme ve güncelleme
Ürün detay ekranını basitçe aşağıdaki resim gibi düşünelim.
Admin Ekranımızda Nasıl Bir Yapı Kuracağız ?
Bu uygulamayı yaparken sunucu kısmı ile konuşan kısmındaki Loading/inProgress, Error state için ekran durumlarını tekrar anlatmayacağım. Bu kısmı Admin Tool -1 yazısında Login kapsamında anlatmıştım.
Bu yazıda CRUD işlemleri sırasında yani bir nesnenin oluşturulması, okunması, güncellenmesi ve silinmesi sürecinin UI ile etkileşimi üzerinde duruyor olacağız.
CRUD Hakkında Ekstra Bilgi
CRUD Mantıksal nesnemizin saklanması ve yönetilmesi için kullanacağımız fonksiyonel yapıdır. C- Create (Oluşturma), R- Read(Okuma), U- Update(Güncelleme), D- Delete(Silme) işlemleridir.
Bu yapının bir yansıması Kullanıcı Arayüzünde, bir yansıması HTTPReqeuest kısmında bir yansıması Veritabanında gerçekleştirilir. Tabi bu işin arkaplanı oldukça karmaşık olabiliyor.
- ACID Nedir ?
- CAP Teoremi Nedir?
- ACID vs BASE vs CAP
- HTTP Request/Response ve WebSocket
- Saga Pattern (Saga Örüntüsü)
Sunucu İle İletişim Kurma Altyapısını Oluşturalım (Redux-Store)
1nci Adım, İlk önce bu Ürün/Ürünler için UI State nasıl gerçekleşecek. Bunları bir çıkarıp bunların bir adını belirleyelim
2nci Adım Bu State arası geçisi sağlayacak Store, Dispatcher üzerinden atacağımız komutları geliştirelim
- getProducts
- addProduct
- updProduct
- delProduct
3ncü Adım Bu State arası geçiş mekanizmasını yönetecek Reducer mekanizmamızı kurgulayalım.
Sunucu Tarafına Hazır Bir Product Verisi Oluşturalım.
Admin Tool -1 yazısında JSON-Server kullandığımızı ve nasıl kullanacağımız anlatmıştım. Yapmamız gereken db.json dosyası içerisine products listesini koymak..
Product sistem tarafından atanan elemanları id,creationDate ve updatedDate diğerleri değiştirilebilir değerler ise.. name, calories, fat, carbs, price,
Yukarıdaki Redux Store Hazır, Data Hazır, Sıra Geldi Bu Listenin Bir Ekrandan Çekilip Bir Tablo İçerisinde Gösterilmesine
Önce bir Table oluşturmamız ve bu Table Component ekrana çizildiğinde componentDidMount TableContainer → Store üzerinden kurguladığımız getProducts → Reducer güncellemesi yapacaktır.
Peki bu yapı ne zaman çalışacak. Biz AdminPanel render içerisinde ProductTableContainer ekleyince… bu ekranda ProductTable render ilk ettikten sonra componentDidMount ReduxStore üzerinden veriyi çağıracak bu veride Sunucu’dan çekilerek Store yazılıp, bunu dinleyen bileşenlere iletilecek.
Product Table Oluşturalım…
Bunun için Meterial UI veya alternatifler bir UI Bileşen kütüphanesinden faydalanabilirsiniz (ChakraUI, SemanticUI, Ant, Prime, vb..) Ben Metarial UI Basic Table kullandım.. Artık bileşenimizde products listesi olduğu için bunlardan React JSX Table oluşturmanız gerekiyor. Bu kısımda aşağıdaki gibi gerçekleştiriliyor..
Şimdi Sıra Silme (Delete) İşleminde..
Delete işlemini seçtim çünkü Oluşturma(C) ve Güncelleme(U) işlemlerinde birde Form ekranı açmamız orda başka bir mekanizma kurmamız gerekiyor. Bundan dolayı Delete işlemini gerçekleştirelim.
Burada Delete işlemi sırasında JSONServer delete edilen nesneyi dönmediği için PromiseThunk yapısı yerine bu akışı kendimiz gerçekleştirip, Silme işlemine gönderdiğimiz ID değerini kullandık.
Ürün Oluşturma ve Güncelleme Kısmı Aynı Mekanizmaları Modal Ekranını Kullanacak Buraya Daha Ortak Bir Yapı Düşünmeliyiz
Oluşturma (Create) ve Güncelleme (Edit) ekranlarını düşündüğümüzde neler aynı neler farklı..
Aynı;
- Ekranın Form yapısı aynı…
- Cancel mekanizması 2 sinde de aynı ekranı kapatıyor.
Farklı;
- Tetiklendiği yerler farklı (Birisi NewProduct , Diğeri ise Tablodan Row seçilip Edit düğmesine basılacak)
- Birisinde ekran boş değerler ile açılacak, ikincisinde Row’daki değerler form içerisindeki alanlara atanarak açılacak.
- Create ve Update düğmeleri birbirinden farklı farklı işlemleri tetikleyecek. create sırasında POST … bir diğeri update sırasında PUT ile güncelleme yapılacaktır.
Önce benzerliklerden gidelim. bizim bir ProductModal ekranımız olacak ve bu ekranın içerisinde değer göstermeyi ve değer girmemizi sağlayan alanlar olacak.. Önce bunu tasarlayalım.
Ekran tasarımları için Metarial Form Dialog örneğini alıp, bunu biraz genişleterek kendi UI Bileşeninizi rahatlıkla oluşturabilirsiniz.
Bileşen içerisindeki değişiklikleri bir State nesnesinde tutup Update/Create sırasında bileşen bu bilgiyi dışarıdaki Manager yapıya aktaracak. State tutma ve Form mekanizmalarını React Forms(Temel Konseptler) yazımda anlatmıştım.
Gelelim şimdi Manager mekanizmalarına bir Oluşturma ve Güncelleme yapısının 2 farklı kısımdan yapıldığını söylemiştik.. Bu bileşenimiz Dummy olmalı ve tek bilmesi gereken;
- Kendisine verilen değerleri göstermek,
- Kullanıcı Create/Update düğmesine basınca bu veriyi dışarıya aktarmak,
Bunu props elemanları ile Manager yapılarak bu Bileşene enjekte ederek gerçekleştirebilirler. Şimdi gelin bu Modal gösterilip, gizlendiği aşağıdaki Manager üzerinden değerlendirelim.
- Admin Panel — Create New Product düğmesi
- Product Table — Edit Row düğmesi
Yukarıda görüldüğü gibi Creation için verdiğimiz handleApply yaptığımız işlem ile ProductTable handleApply yaptığımız işlemler farklı.. Aynı şekilde bunların ReduxStore kısımlarıda birbirinden farklı
- Axios üzerinden yapılan işlemde POST , PUT kullanılırken
- Dönen değerleri Reducer Create için Products listesine yeni bir eleman eklerken , Update için Products listesinde ilgili elemanı bulup güncelliyor.
GitHub Kod Örneği
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
