Photo by Jan Meeus on Unsplash

REACT UI MECHANICS

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

Öncesinde Anlattıklarımız;

Admin Tool ilgili aşağıdaki önceki yazılarda Login, CRUD ve Pagination mekanizmalarına bakmıştık.

Table işlevlerini biraz daha geliştirerek bu Tabloda arama, sıralama ve çoklu satır seçerek aksiyon gerçekleştirme işlemlerine bakmıştık.

SideMenu yapısını oluşturarak birden fazla iç sayfa yapısı arasında geçiş yapabileceğimiz altyapı oluşturmuştuk.

Product sayfasında kullanıcının yapmış olduğu güncelleme, silme ve yeni kayıt oluşturma işlemlerini, product/ürünün altında history listesi olarak gösterilmesini gerçekleştirdik.

Dashboard ve Chart sayfası oluşturmanın karmaşıklığından biraz bahsettikten sonra Chart kütüphanelerinden birisini Grid Layout nasıl göstereceğimizi anlattık.

Bu Yazıda Anlatacaklarımız;

Bu yazıda ekranda Kullanıcıyı bir takım uyarı, hata ve bilgilendirme mesajları ile Admin Aracını daha iyi ve efektif kullanabilmesini sağlayacağımız üzerinde duracağız.

Öncelikle bu geribildirim yapısına neden ihtiyaç var ?

  • Kullanıcının yapmış olduğu işlemlerin sonucunda bilgilendirme, uyarı veya hata durumlarını kullanıcıya göstermek isteyebiliriz.
  • Backend Sunucu ile iletişim problemleri olduğunda kullanıcıya bilgilendirme yapmak istenebilir.

Bu durumlarda kullanılacak yöntemlerden birisi Snackbar, bir diğeride Toast dediğimiz yöntemdir.

Snackbars contain a single line of text directly related to the operation performed. They may contain a text action, but no icons.

Toasts (Android only) are primarily used for system messaging. They also display at the bottom of the screen, but may not be swiped off-screen.

Bu 2 yöntem için yine benzer şekilde bir çok kütüphane bulunuyor.

Adım 1 Biz bu Admin Tool örneklerinde Material UI üzerinden ilerliyoruz. Önce Feedback sayfasını boş olarak oluşturalım.

Boş bir Feedback Sayfası

Adım 2 Daha sonra ekranımıza 4 farklı düğme ekliyoruz. Bu düğmeler aşağıdaki severity durumları için ekranda Toast/Snackbar gösterilmesini sağlayacaklar.

  • Info
  • Warning
  • Error
  • Success
Feedback Mesajlarımızı Ekleyecek Düğmeler

Adım 3. Bu düğmelere basıldığında ekranda ilgili geribildirim mesajlarının gösterileceği SnackBar yapılarını ekleyelim. Bunun için yukarıdaki oluşturduğumuz state bilgilerini CustomizedSnackbars bileşine props olarak geçeceğiz.

<CustomizedSnackbars severity={severity} open={isSnackBarOpen} handleOpen={this.handleOpen}/>

Artık düğmelere basınca ilgili Feedback mesajlarının çalıştığını görebilirsiniz.

Feedback Page Success, Info, Error, Warning Mesajları

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