Photo by David Clode on Unsplash

React ile Admin Tool Geliştirelim — 0 (Sıfır Noktası)

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.

React ile Admin Tool Geliştirelim yazı serisindeki her bir yazıda önceden şunu şunu anlatmıştık diye ön indeks ve kapsam koymaya çalışıyordum. Yazı sayısı arttıkça bu anlamsızlaşmaya ve her yazının önünde bir tekrar olmaya başladı. Okuyucu esas yazıyı okumaya başlayamıyor özetle 😅

En iyisi bunun için ayrı bir kapsam yazısı oluşturayım diye düşündüm ve aşağıda Admin Tool Mekaniklerinde, Kod örnekleri ile neler anlatacağımı görsel olarak listeledim.

Login uygulamaya ilk giriş yaptığımız kısım. Burada Backend bir Fake sunucu ile bağlantı, verileri DB üzerinde kaydetme/okuma. Login ekranında Başarılı ve başarız durumları handle etme

Part -1

Admin Tool içerisinde genelde Kullanıcı, Ürün, Kampanya vb.. entity türleri için Kayıtları listeleme, yeni kayıt oluşturma, var olan kaydı güncelleme veya silme işlemleri gerçekleştiririz. Aşağıdaki yazıda bu konuya değiniyor.

CRUD işlemleri

Diğer bir önemli konuda yukarıda bahsettiğim kayıtların çok olduğu durumda bunu UI olarak kullanıcılara nasıl kullandırabileceğimiz. Birincisi sayfa yapısı ile sayfada görüntülenecek yazıları sınırlandırabiliriz. İkinci olarak tüm kayıtlar içerisinde arama yapmasına izin verip, kullanıcının kayda hızlı bir şekilde erişmesini sağlayabiliriz.

Table Pagination ve Search

Tablodan devam ediyoruz. Tablo kullanımını arttıran diğer özellikler ise Tablonun istenen kolona göre sıralanması veya aynı işlemi yapacağınız birden çok satır için işlem yapabilme imkanı.

Table Sort ve Multi-Row Operations

Tablo’larda bazen daha ileri özellikleri özelliklere ihtiyaç duyarız. Örneğin bir satırın detayını o satırın altında gösterebilmek o kısımda işlemler yapabilmek gibi. Bunun için Collapsible Table yapısı kullanılır.

Bir diğer konuda Admin Tool (Yönetici Aracındaki) sayfalar arttıkça bunların SideMenu’den hızlı bir şekilde nasıl erişebileceğimiz konusu

CollapsibleTable ve Navigation

Basit bir Dashboard nasıl oluşturabiliriz. Sayfamıza Line, Bar vb Chartları nasıl entegre edebiliriz konusunu işlediğim yazı;

Bir diğer konuda Kullanıcının veya Sistemdeki bir durum hakkında kullanıcıyı uyarmak, bilgilendirmek için kullandığımız Feedback mekanizma yazısı;

Dashboard ve Feedback

Bazı nesne bağlantıları ağaç veri yapısındadır. Örneğin Organizasyon, Grup, Kişiler, Yetkiler vb.. bunlar için TreeView yapılarını kullanabiliyor ve bunlar üzerinde güncelleme yapabiliyor olmanız gerekir. Aşağıdaki yazılar bu konu üzerine;

TreeView Structure

Bazı veri yapıları Listeden seçim yaparız. Klasik yöntem liste üzerinde elemanları seçip karşıda bulunan hedef listeye düğmelere basarak aktarmaktır. Bir diğer yöntemde dokunmatik ekranlarında gelişmesi ile iyice yaygınlaşan Drag-Drop (Sürükle-Bırak) yöntemi ile aktarmaktır.

Listeden Seçim ve Drag-Drop

Belli zaman aralıklarında planlama yapmak istediğimizde zaman aralıklarını tanımlamak için Takvim veya Gantt Chart bileşeninden faydalanırız. Takvim bileşeni ile ilgili yazıya aşağıdan erişebilirsiniz. Gantt Chart için ise ayrıca bir yazı yazmadım. Admin Tool içerisinden Gantt tabından erişim sağlanabilir.

Takvim ve Gantt Chart

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store