REACT UI MECHANICS

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.

Onur Dayıbaşı

Published in

Frontend Development With JS

6 min readApr 17, 2021

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

Basit Bir React App Oluşturalım

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.

React Router ile Landing ve Admin Page Hazırlayalım.

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.

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.

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 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 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ğlarassign(), 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 Sayfamızda Login Panel’imizi Tasarlayalım.

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

Login Panelimize State Ekleyelim

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.

Sunucu Tarafını Geliştirmek Yerine Fake JSON Server Kullanalım.

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.

Container, Component, Redux Store Yapımızı Oluşturalı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ı 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.

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

Sunucudan Gelen Durumlar (fetching, fetched, error)

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 😃

LandingPage (Login) → AdminPage (Logout) mekanizmasının Kurulması

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