Photo by Shaun Bell on Unsplash

React ile Admin Tool Geliştirelim-Login Ekranı

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.

Tabi amacımız komple bir admin (yönetici) aracı tasarlamak değil. Birbirinden farklı konuları bir arada bütünleştirecek bir senaryo oluşturmaya çalışacağız.

Not 1: Amacımız UI Mekanik öğrenmek odaklı olduğu için Backend servislerinin kalitesini ve gerçekçi olmasına değil , basit ve iş görür fake servisler kullanıyor olacağız.

Not 2: Amacımız görsel güzel kullanılabilir bir araç yapmak olmadığından stiller ile ilgilenmeyeceğiz.

Not 3: Bu yapıyı Evolutionary Model ile gerçekleştireceğiz. Yani Analiz → Tasarım → Geliştirim → Deploy (Yazıyı Yayınlama) döngüsü her seferinde mevcut yapının üzerine biraz daha geliştirerek eklemek şeklinde olacak.

İlk önce basitten düşünelim. 2 Ekranımız olsun

  • Login ekranımızın yer aldığı→ Landing Page
  • Login sonrasında giriş yaptığımız ekran → Admin Page

Bu konuyu React Geliştirme Ortamının Oluşturulması yazımda anlatmıştım. Konuyu detaylı öğrenmek için bu yazımı okuyun.

npx create-react-app admin-tool
cd admin-tool
yarn start

React projesini çalıştırıp ekranda dönen React Logosunu görelim.

Dönen React Logosu.

Bu konuyu React’da Sayfalar Arası Navigasyon konusunda anlatmıştım. Bu kısımda yapacağımız davranış oldukça basit. 2 Tane ekran bileşeni oluşturacağız. Buradaki düğmeler sayfaların birbiri arasında geçişini sağlasın.

Landing Page ve Admin Page

1nci Adım

2 farklı URL imiz bulunuyor. Bir tanesi / root path diğeride /admin path. Bu path ve bu path ilgili bilgiler için routes.js oluşturup içerisine yapıları kuruyoruz.

Routes Yapısı

2nci Adım

Bu 2 route içerisinde 2 tane sayfa bileşeni olması gerekiyor. components klasörü açıp içerisine sayfa bileşenlerini eklememiz gerekiyor.

Not: index.js kafanızı karıştırmasın sadece components klasöründeki bileşenlere daha hızlı tek bir file import ederek ulaşmamızı sağlayan bir altyapı sunar.

Admin ve Landing Page Detayı

Admin ve Landing Page bileşenleri şu aşamada nerdeyse birbirinin aynısı. Sadece Title ve düğmeye basınca yönlendirdikleri URL adresleri birbirinden farklı.

3ncü Adım

React Router install edelim. React Router sayfalar arası navigasyonu URL üzerinden yapmamızı, dinamik sayfa url oluşturmamızı sağlar.

Not: URL konusunu bilmeyenler için URL Nedir ? yazımı okuyabilirler.

 yarn add react-router-dom

Daha sonra App.js içerisini ayarlamamız gerekiyor. Burda jsconfig içerisinde compiler config aşağıdaki resimdeki gibi verirseniz bileşen import tüm dosya adresini (full path) yerine src üzerinden pathları kullanabilirsiniz. (Detay)

App.js

App.js içerisindeki Router ve Switch mekanizması içerisindeki sayfa geçişlerini görebilirsiniz. handlePageChange ise ilgili sayfaya redirection için history.push kullanır.

Not: Önceden history.push gibi bir API tarayıcılar tarafından desteklenmezken, Twitter vb.. Web uygulamaları #follower vb path SPA (Single Page App) sağlıyordu. Çünkü diğer Location API üzerinden çalışan yöntemler sayfanın yeniden yüklenmesine neden oluyordu.

//window.location
href,hostname,protocol,hash, origin, search, pathname
=> erişmenizi sağlar
assign(), replace(), reload() => sayfayı yeniden yüklemeyi veya farklı sayfalara yönelmeyi sağlar.

history.push ise url güncellerken yeni sayfa çağrımı yapmıyor. Ama kullanıcı tarayıcısında çalışan Javascript bu URL değişikliğini algılayarak sayfa güncellemelerini gerçekleştirebiliyor. React Router bu altyapıyı sunan kütüphanelerden bir tanesidir.

Landing içerisinde bir Login ekranı olacağını varsayarsak. Bunun için aşağıdaki bileşenleri geliştirmemiz lazım. Bunun için çok basit anlamda input , button gibi HTML yapısındaki bileşenleri kullanabiliriz. ama bu projede biraz daha detaylı bir şeyler için Metarial UI Kütüphanesinden faydalanacağım

  • Kullanıcı Adı,
  • Şifre bilgisi
  • Bilgileri Sunucuya İletecek Bir Düğmeye

Kütüphaneleri aşağıdaki komutlar ile ekleyelim.

yarn add @material-ui/core
yarn add @material-ui/icons

Kaynak Linklerini public/index.html dosyasına ekleyelim. Benzer eklemeleri html → head kısmında göreceksiniz

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" /><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

Tasarımını yapmak istediğimiz ekran Metarial UI ile çok kolay bir şekilde geliştirebiliyoruz. LandingPage içerisinde bir LoginPanel tutuyor..

Birde bunun ekranın ortalamak , elemanların styling güncellemek için useStyles kullanabilirsiniz, ben SASS kullanmayı tercih ediyorum, ve styling işlemlerini scss dosyaları içerisinde halletmek kodu daha temiz tuttuğunu düşünüyorum.

yarn add sass 

Bu aşamada amacımız Login Panel içerisindeki username ve password bilgisini State tutarak Login düğmesine basınca alert içerisinde uyarı vermek olacak.

State tutma kavramlarını State ve Props ve Form blog yazılarında anlatmıştım.

Login Panel State tutuyor..

Amacımız UI Mekanikleri tasarlamak olduğu için Sunucu tarafını olabildiğince basit şekilde cevap verebilen bir mekanizma kullanacağım.

GitHub JSON-Server aracından faydalanıyor olacağım. Proje klasörünün altına bir tane db.json dosyası ekleyip…

//Toolu indir
npm install -g json-server
//JSon Server ilgili port kendi db.json ile calistir.
json-server --watch db.json --port 3004

Biz users objesi tanımlayıp içerisine kendi kaydımızı koyalım.

Fake Sunucuyu Çalıştıralım

Konuları önceden daha detaylı anlattığım için tekrar detaylı anlatmadan direk gerçekleştirim işine başlayacağım. Bu konuya aşina değilseniz aşağıdaki yazılarımı okuyabilirsiniz.

Öncelikle gerekli kütüphaneleri kuralım.

yarn add redux
yarn add react-redux
yarn add redux-thunk
yarn add redux-promise-middleware
yarn add axios
Container Mekanizmasını Oluşturduk

Container Mekanizması bizim bileşenlerimizin Pure Yapıda olmasını sağlayan yapılardı.. React Örnek Proje Mimarisi yazısında bu konuyu detaylıca anlatmıştım. LoginPanel Container üzerinden store ile bağlantı kurma işlemini gerçekleştiriyor.

React Proje Mimarisi

Bu sayede bizim LoginPanel başlayan Login düğmesine basılınca → LoginPanelContainer üzerinden → komutlar → dispatcher üzerinden → store erişim gerçekleştireceğiz.

Flux Mimarisi

Sunucuya yapılan istek sırasında ekranın

  • inProgress/Waiting State geçmesi,
  • Sunucuya Bağlantıda Problem Olması Durumu
  • Sunucudan Cevap Gelmesi

Sunucudan users bilgisi geldiğinde bu bilgilerin kontrol edilerek doğru ise AdminPage sayfasına yönlendirme, yanlış ise LandingPage sayfasında kullanıcıya uyarı verilmesi işlemlerini gerçekleştirelim.

fetched, fetching, error ve normal durumlara göre ekranın farklı render edilmesi ile farklı farklı gösterilmesini sağlamamız gerekiyor

UI State Göre Ekranın Farklı Farklı Render Edilmesi

Not: Yazıyı bir seri halinde yazacağım için bu kısım birinci bölüm, yazının devamı gelecek 😃

Gerçek bir OAuth mekanizmamız olmadığı için şu aşamada Logout bizim için Redux’taki kullanıcı bilgisinin resetlenmesi anlamına geliyor.. Bunun için aşağıdaki yapıya benzer bir yapı oluşturduk

Logout / Reset

  • resetUser (kullanıcı bilgisini temizliyor)
  • URL → / root path yönlendirimemiz yeterli

Login ise

  • getUser sonrasında password check edilmesi
  • doğru ise URL → /admin URL yönlendirilmesi
Logout Mechanism

Demo

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