Kodumuzun her parçasını tanımlarken belirli bir amaca hizmet verecek ve birbirine uyacak şekilde tasarlanması önemlidir. Buna temelde yazılım mimarisi diyoruz. İyi mimari, bir ürünü başarılı yapan şey değildir, ancak bir ürünü sürdürülebilir kılar.
Bu durum mobil uygulamlarda da geçerlidir. Uygulamalarda projenin boyutu büyüdükçe ve karmaşıklığı artıkça farklı dizayn mimarilerine ihtiyaç duyarız. Projeye başlamadan önce, gereksinimlerimize göre en iyi mimariyi tercih etmemiz gerekiyor. VIPER mimarisi de bu yaklaşımlardan biridir.
Bu yazımda sizlere şirket içindeki IOS uygulamalarımızda kullandığımız VIPER mimarisinden bahsediyor olacağım.
Clean Code
VIPER NEDİR?
VIPER; View, Interactor, Presenter, Entity ve Router kelimelerinin ilk haflerinden adını alıyor.
VIPER mimari modeli, MVC veya MVVM’e bir alternatiftir. VIPER, katmanlar arasındaki bağımlılıkları azaltmayı ve kolay bakım yapmayı hedefler.
VIPER bileşenlerini inceleyelim.
View: View’ın sorumluluğu user actionlarını presentera gönderip, Presenter’ın isteklerini karşılar.
Interactor: Business logic yer aldığı kısımdır ve API çağrılarından sorumludur.
Presenter: Interactor’dan aldığı datayı View katmanına iletir. İki katman arasında köprü görevini üstlenir.
Entity: Interactor tarafından kullanılan objenin modellenmiş halidir.
Router: Router sadece Presenter ile iletişim kurarak sayfalar arası geçiş ve animasyonların yönetildiği kısımdır. Wireframe olarakta adlandırılır.
Genel yapısı aşağıdaki gibidir.
Genel tanımları yaptıktan sonra basit bir uygulama geliştirerek yazdıklarımızı pekiştirelim.
Hava Durumu Uygulaması- WeatherApp
Uygulamamız girilen konuma göre hava durumunu bilgilerini listeleyecektir.
İlk olarak hava durum bilgilerini getiren bir Web API bulalım. OpenWeather API bizim ihtiyacımızı karşılayacaktır. Siteye kaydolup ardından API key almamız gerekiyor.
[visual-link-preview encoded=”eyJ0eXBlIjoiZXh0ZXJuYWwiLCJwb3N0IjowLCJwb3N0X2xhYmVsIjoiIiwidXJsIjoiaHR0cHM6Ly9vcGVud2VhdGhlcm1hcC5vcmcvIiwiaW1hZ2VfaWQiOi0xLCJpbWFnZV91cmwiOiJodHRwczovL29wZW53ZWF0aGVybWFwLm9yZy90aGVtZXMvb3BlbndlYXRoZXJtYXAvYXNzZXRzL2ltZy9tb2JpbGVfYXBwL2FuZHJvaWQtYXBwLXRvcC1iYW5uZXIucG5nIiwidGl0bGUiOiIgT3BlbldlYXRoZXJNYXAiLCJzdW1tYXJ5IjoiR2V0IGN1cnJlbnQgd2VhdGhlciwgaG91cmx5IGZvcmVjYXN0LCBkYWlseSBmb3JlY2FzdCBmb3IgMTYgZGF5cywgYW5kIDMtaG91cmx5IGZvcmVjYXN0IDUgZGF5cyBmb3IgeW91ciBjaXR5LiBIaXN0b3JpY2FsIHdlYXRoZXIgZGF0YSBmb3IgNDAgeWVhcnMgYmFjayBmb3IgYW55IGNvb3JkaW5hdGUuIEhlbHBmdWwgc3RhdHMsIGdyYXBoaWNzLCBhbmQgdGhpcyBkYXkgaW4gaGlzdG9yeSBjaGFydHMgYXJlIGF2YWlsYWJsZSBmb3IgeW91ciByZWZlcmVuY2UuICIsInRlbXBsYXRlIjoidXNlX2RlZmF1bHRfZnJvbV9zZXR0aW5ncyJ9″]
API keyi aldıktan sonra Postman uygulaması üzerinden API keymizi kotrol edelim.
Postman
İstanbul hava durumu bilgilerini Web API den başarılı bir şekilde aldığımızı gördük. Şimdi kod yazmaya başlayabiliriz.
İlk olarak API den gelen json formatını temsil edecek WeatherResponse isimli modelimizi oluşturmamız gerekiyor. Bunun için postman ile aldığımız json datasından aşağıdaki site vasıtasıyla model swift classları oluşturalım.
[visual-link-preview encoded=”eyJ0eXBlIjoiZXh0ZXJuYWwiLCJwb3N0IjowLCJwb3N0X2xhYmVsIjoiIiwidXJsIjoiaHR0cDovL3d3dy5qc29uNHN3aWZ0LmNvbS8iLCJpbWFnZV9pZCI6LTEsImltYWdlX3VybCI6Imh0dHA6Ly93d3cuanNvbjRzd2lmdC5jb20vYXNzZXRzL2ltZy9Mb2dvZGFyay5wbmciLCJ0aXRsZSI6Ik9ubGluZSBKU09OIHRvIFN3aWZ0IE1vZGVscyBHZW5lcmF0b3IiLCJzdW1tYXJ5IjoiVGhpcyBvbmxpbmUgZnJlZSB1dGlsaXR5IGdlbmVyYXRlcyBhIFN3aWZ0IDIuMCBhbmQgNC4wIGNvbXBhdGlibGUgbW9kZWxzIGZyb20gYSBzYW1wbGUganNvbiByZXNwb25zZSwgYm90aCBkaWN0aW9uYXJ5IGNsYXNzZXMgb3IgY29kYWJsZSBzdHJ1Y3RzLiIsInRlbXBsYXRlIjoidXNlX2RlZmF1bHRfZnJvbV9zZXR0aW5ncyJ9″]
Oluşan dosyaları projemize ekliyoruz.
Viper bileşenlerinin protokollerini tanımlamamız gerekiyor. Projemize aşağıdaki gibi protokol dosyası ekleyelim.
İlk açılışta İstanbul hava durum bilgisini ve ardından da kullanıcının girdiği konumun hava durum bilgisini ekrana listelemesi istiyoruz. Bunun için aşağıdaki View’ı projemize ekleyelim.
View dosyasını eklendikten sonra hava durumu bilgisini almak için Presenter eklemek gerekiyor. Presenter, View den gelen isteği Interactor’a iletiyor olacaktır. WeatherListPresenterProtocol ile View ile iletişim kurulurken WeatherListInteractorOutputProtocol protokolüyle Interactor’la iletişim kurulup, gelen datayı View sınıfımıza iletiyor olacağız.
Interactor, gelen şehir bilgisini web servisten alıp tekrar Presenter vasıtasıyla View’e ulaştırması gerekiyor. Bunun için projemize aşağıdaki Interactor’u ekleyelim.
Viper bileşenlerinin arasındaki bağlantı protokollerini tanımlamıştık. Şimdi de bu protokollerin ilişkilerini belirleyelim. Bunun içinde Router veya Wireframe adını verdiğimiz katmanımızı projemize ekleyelim.
Genel olarak viper bileşenlerini oluşturduk.
Uygulamanın çıktısı aşağıdaki gibi oldu. Girilen şehir bilgisini Viper mimari tasarımına bağlı kalarak Web API dan alıp ekrana listelettik.
Weather App — Demo
Viper kullanırken ilk başta çok fazla vakit kaybediyor gibi gözüksek de proje büyüdükçe uygulamaya yeni özellikler eklemek çok daha kolay olacaktır. Ayrıca kodun test edilebilirliği ve projeye dahil olacak yazımcıların adaptasyonu açısından bir çok kolaylıklar sağlayacaktır. Nispeten küçük uygulamarda tercih nedeni olmasa da uygulama büyüdükçe karmaşıklığı azalttığı için viper mimarisi tercih nedenlerinden biri olmaktadır.
Demo uygulaması kodlarına buradan erişebilirsiniz.
Bir sonraki yazımızda görüşmek üzere ..