REACT UI MECHANICS
Basit Bir Hesap Makinası Geliştirmek için Planlama, Analiz ve Tasarım.
Bu yazıda Hesap Makinasının geliştirmesi öncesinde yaptığımız analiz ve tasarım çalışmasından bahsetmek istiyorum.
Yazılım geliştirmenin önemli konularından bir taneside Yazılım Geliştirme sürecidir. İster Waterfall ister Agile olsun belli fazları yerine getirerek yazılım geliştirmeyi ilerletiriz. Bu ilerlemeler tek döngü olursa genelde Waterfall, çoklu döngü olursa Iterative, Incremental veya Agile olarak isimlendirilir.
Süreçler ve fazlar hakkında daha fazla bilgi almak Mimari Kavramlar yazı serisini okumanızı öneririm.
Biz daha önceden ki yazılarımızda Hesap Makinesini teknik olarak nasıl geliştireceğimizden bahsettik.
Ortamların Kurulması ve Deployment Kısmında Bahsettik
- React Geliştirme Ortamının Oluşturulması — (Detaylı Anlatım)
- React Uygulamanızın Ortamlar (Dev, Production, vb…) İçin Farklılaştırılması
- React Uygulaması Sunucuda Nasıl Çalışır (Local, AWS, Netlify ve Vercel)
Geliştirdiğimiz Uygulamayı Farklı Ortamlara Deploy Ettik
Fakat bunun öncesinde yaptığımız Planlama, Analiz ve Tasarım çalışmalarından bahsetmedik. Bu yazıda bu konulara yani Planlama, Analiz ve Tasarım konularına değinmek istiyorum.
Client Side çalışacak bir Hesap Makinesi yapmak istiyorsak. Bunun için en yakınımızda bulunan bir hesap makinesini alıp bunun üzerinden analizler yaparak işe koyulabiliriz.
MacOS kullanıcısı olarak en yakınımda işletim sisteminin sunduğu hesap makinesi bulunuyor. Bunun üzerinden analizlerimizi yaparak başlayalım.
Bu arayüzde;
- Yazdığınız rakamın gösterildiği ekran
- Ve düğmeler bulunuyor. Bu Düğmelerin farklı farklı işlevleri bulunuyor..
- Rakamlar 0…9 Kadar
- AC ve C düğmeleri bulunur. AC tüm belleği temizler iken, C sadece ekranı temizler.
- , Ondalıklı sayılar oluşturmanızı sağlar.
- bir sayı sonrasında % bastığınızda o sayıyı 100 böler.
- +/- düğmesine basarak ilgili rakamı eksi(negative) ve artı(positive) değerlere döndürür
- Sarı düğmeler ile toplama, çıkarma, çarpma, bölme ve hesaplama işlemlerini gerçekleştirir.
1ncil Olarak Hesap Makinesini Bu Şekilde Parçalara Ayıralım.
Burada birincil işlem olarak UI parçalara ayırıyoruz. Bunun nedeni Bileşen Odaklı UI Geliştirme yöntemini uyguluyor olmamız. Brad Frost Atomic Design kitabında anlattığı gibi geliştireceğimiz uygulama ve bileşenin Atomlarını çıkarma işlemini yapmamız gerekiyor.
Bizim aslında 2 bileşenimiz bulunuyor. Bir tanesi görüntülemeye(Screen), bir diğeride kullanıcının etkileşimlerini alan düğmelerden (Button) oluşuyor.
Burada 2 tip bileşeni birbirine bağlayacak
- State tutacak bir Model
- ve bu Modeli yönetecek bir Controller ihtiyacımız var.
Uygulamamız 4 tip bileşen yapısından oluşacak.
Screen (Ekran)
Kendisine verilen rakamları göstermekten sorumlu bileşen
Düğme (Button)
Kullanıcıdan etkileşimi alarak bunu Controller iletecek olan bileşenlerdir.
Model
Kullanıcından gelen etkileşimleri tutan yapıdır.
Controller
Uygulamayı yönetecek kısım. Yani kullanıcıdan gelen Inputları işleyip, Output olarak Model yazacak olan iş mantığını yöneten kısım.
Bu yapı Mimari bir örüntüyü size hatırlatıyor mu ? MVC dediğimiz Model View Controller yapısını hatırlatıyor. Bu şekilde bir yapı kurduğumuzda uygulamamız hazır olacak.
- View: Kullanıcı ile etkileşimi olan arayüzleri içeren kısımdır. Kullanıcı girdilerini dinler ve bunları yönetmesi için Controller iletir. Bu girdilere örnek vermek gerekirse Mouse, Keyboard, Ses, Dokunmatik Ekran, Hareket Sensörü olabilir bu girdiler. Aynı zamanda view içeriğinde uygulama state(durumu) içeren verileri kullanıcıya göstermekten sorumlu birimdir.
- Model: Uygulamada ekranda gösterilecek olan veriyi tutan kısımdır. Bu kısımlar uzak sistemlerden gelen güncellemeler veya kullanıcı girdilerini sonuçlarının yansıtıldığı verinin en güncel halini yapılarında tutarlar.
- Controller: Hem model , hemde view referansını tutarak ikisi arasındaki koordinasyonu sağlar. Yapılması gereken business işlemleri yerine getirir.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara (React Arayüz Mekanikleri) erişmek için bu linke tıklayabilirsiniz.
