Bölüm 2: Clean Swift ile Ekranlarımızı Geliştirelim
- Bölüm 0: Giriş
- Bölüm 1: Basit ve Temiz Network Katmanı Yazalım
- Bölüm 2: Clean Swift ile Ekranlarımızı Geliştirelim
- Bölüm 3: Ekranlarımızı Test Edelim
Selamlar Arkadaşlar,
Önceki iki yazıda temelini attığımız projemizin ekranlarını kodlamaya başlayacağız. SpaceX API içerisinde yer alan All Rockets Endpoint’ini kullanarak bir listeleme ekranı yazacağız.
Öncelikle istekten dönen response modelimizi belirleyelim. Hızlı olması için quicktype.io kullanarak json değerini bir swift sınıfına dönüştürelim. Göreceğiniz üzere json oldukça kalabalık data içeriyor. Biz sadece gerekli değerleri kullanalım. Response modelimiz aşağıdaki gibi olacaktır.
Şimdi de roketlerimizi göstereceğimiz TableViewCell’imizi oluşturalım.
Cell içerisinde roket adını, roket fotoğrafını ve roketle ilgili bir kaç cümlelik açıklamayı göstermemiz bizim için yeterli olacaktır. Oluşturduğumuz RocketTableViewCell.swift dosyamızında son hali aşağıdaki gibi olacaktır.
Ön hazırlıkları tamamladık. Şimdi gelelim ekranımızı oluşturmaya. Bu işlem için daha önce bahsettiğim Clean Swift şablonu ile New File..-> Clean Swift -> Scene yolunu izleyerek ekranımızı oluşturalım.
Tüm dosyalar bağlantıları sağlanmış halde hazır. Şimdi sadece akışı sağlayacağız.
Models
RocketsModels dosyasına baktığımızda şablon bizim için 3 tane struct oluşturmuş. İlgili endpoint Request içinde herhangi bir değer almıyor. Response olaraksa bize bir roket listesi veriyor. Roket objelerinde fazlaca data varken biz ViewModel içerisinde sadece kullanacağımız dataları (rocketId, rocketName, rocketDescription, rocketImage) alıyoruz. Dosyamızın son hali aşağıdaki gibi olacaktır.
View Controller
Bu bileşenin asli görevi View aksiyonlarını başlatmak ve görüntülemektir. Tüm view işlemleri (CNetwork içerisinde gösterdiğimiz loader olayını istisna bırakarak) bu bileşende yapılmak zorundadır.
ViewController içerisine öncelikle bir TableView tanımlayalım. Sonrasında ViewController içerisinde kullanacağımız Display Logic metodlarını tanımlayalım.
Burada metodların display ön eki ile başladığını ayrıca belirtmek isterim. Şimdi artık view yaşam döngüsünü başlatabiliriz.
Buradan sonra iş artık Interactor bileşenindedir.
Interactor
Interactor içerinde gerçekleştireceğimiz Business Logic metodunu tanımlayalım. Ardından yönlendirmelerde kullanacağımız DataStore protokolünü oluşturalım. Son olarakta Business Logic olarak belirlediğimiz metodumuzu yazıp işi Presenter’a teslim edelim. Tabi burada Worker yardımı alacağımız için hakkında bir kaç kelam etmekte fayda var. Interactor dosyamızın son hali aşağıdaki gibi olacaktır.
Worker
İlgili bileşenin görevi API veya Core Data işlemlerini gerçekleştirmek ve sonucunu Interactor’a iletmektir. Bu çerçevede oluşturduğumuz Worker içerisinde daha önce yazdığımız CNetwork’ü kullanarak API isteğini gerçekleştiriyoruz.
Presenter
Interactor, Worker aracılığı ile görevini yaptı ve elde ettiği sonucu Presenter içerisine gönderdi. Şimdi burada aldığımız response değerini daha önce belirlediğimiz ViewModel’e dönüştürerek display edilmek üzere ViewController bileşenine göndereceğiz.
Ta daaa!!!
Sonuç
Bu mimarinin temiz olmasındaki en önemli sebeplerden biri göründüğü üzere her bileşenin yaşam döngüsünde sadece 1 kere yer almasıdır. Bu sayede her hangi bir dosyada kod kalabalığı oluşmadan temiz temiz kodumuzu yazabiliyoruz. 😁 Ve ek olarak bir sonraki yazımızda değineceğimiz gibi birim testi yazma işini de oldukça basitleştiriyoruz.
Kodların son haline buradan erişebilirsiniz. Repo içerisinde şimdilik sadece roket liste ve detay ekranları olacak. Birim testi yazımızdan sonra o kısmı da ekleyeceğim.
Bir sonraki yazıda görüşmek üzere. Kolay gelsin. 👋 #stayhome
