REACT UI MECHANICS

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.

Onur Dayıbaşı

Published in

Frontend Development With JS

4 min readMay 7, 2021

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.

1. Login

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

React ile Admin Tool Geliştirelim-Login Ekranı

2. CRUD işlemleri

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.

React ile Admin Tool Geliştirelim-CRUD İşlemleri

3. Table Pagination(Sayfa Yönetimi) ve Search(Arama)

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.

4. Table Sort(Sıralama) ve Multi-Row Operations (Çoklu İşlem)

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ı.

5. Collapsible Table ve Navigation SideMenu

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.

React ile Admin Tool Geliştirelim — Collapsible Table Geliştirim

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

React ile Admin Tool Geliştirelim — Navigasyon Menüsü

6. Dashboard ve Feedback

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

React ile Admin Tool Geliştirelim — Dashboard Sayfası

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ı;

React ile Admin Tool Geliştirelim — Uyarı ve Hatalar için Geri Bildirimler

7. Tree View (Ağaç Yapısının) Gösterimi ve Güncellenmesi

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;

8. Listeden Seçim veya Drag-Drop(Sürükle Bırak) ile Seçim

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.

8. Takvim Üzerinde Zaman Planlama ve Gantt Chart

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.