Storyboard ve SwiftUI Arasındaki Farklar

Uygulama üzerinden Storyboard ve SwiftUI

Merhaba. Bu yazımda sizlere Swift ile geliştirmekte olduğum bir uygulamanın iki ayrı yöntem ile arasındaki farkları örnekler üzerinde anlatmaya çalışacağım.

Her iki görselde şuan üzerinde çalıştığım uygulamanın nihai hali değil. Hatta çok değişti.

Öncelikle kısaca uygulamadan bahsedelim. Geliştirmekte oldğum bu uygulama yukarıdaki görselden de anlaşılacağı üzere bir parola üretici.

Şimdi diyebilirsiniz buna ihtiyaç mı vardı? Zaten daha iyilerini kullanıyoruz. Sen mi kurtarıcaksın bizi kardeşim?

Ben Swift dilini öğrenmeye çalışan biri olarak kendimi bu tarz yapılmış ya da yapılmamış uygulamalar yazarak geliştirmeye çalışıyorum.

İlerleyen bölümlerde vereceğim örnekleri bir profesyonel olarak değilde yeni başlayan bir öğrenci gibi parçaları yeni yeni gören ve uygulayan, bakış açısıyla değerlendirilmesini rica ederim. Umarım faydalı olur.

SwiftUI Apple tarafından duyurulduktan sonra hemen kullanan biri değildim. Swift dili ile ilgili aldığım Udemy kurslarında Storyboard üzerinden uygulamalar yapılıyordu. Kursların son bölümlerinde de kısaca SwiftUI nedir? neler yapabilirsiniz ya da kısaca farklarına değinilip geçiliyordu.

Çünkü eğitimini veren insanlar yıllarca Objective-C ve ardından gelen Swift ile çalıştıktan sonra birden birede SwiftUI hakkında kurs, kitap yapmaları beklenemezdi elbet. Tabi birde işin eğitimini aldığın derslerin ana dili var.

Türkçede Swift üzerine kaynak kitap bulmak bir elin beş parmağını geçmezken youtube gibi ücretsiz platformlarda da benim başladığım dönemlerde çok fazla kaynak yoktu. İngilizce kaynak ise başta Apple’ın kitapları ve geliştici sayfası ve ardından youtube ve yine ardından Udemy de istenilen kaynaklara ulaşılabiliyor.

Ben Storyboard üzerinden aldığım kurslarda belirli bir aşamaya gelmiş ve kursların dışında nasıl uygulamalar yaparım, Swift dili ile neler entegre çalışyor gibi parça çalışmlar yapıyordum.

Benim daha öncesinde C#, Python, JavaScript dilleriyle tecrübem olduğundan orada geliştirdiğim uygulamaları burada nasıl yaprım işlerindeyim.

Kısaca neden Swifit? Bana kolay geldiğinden :) İlerleyen bir zamanda bu soruya daha anlamlı ve detaylı bir cevap vereceğim.(Bkz: İnsanlık, Sorun ne?)

Parola üretici bir uygulama yapmak istedim. Ya da bir kaç işlev öğrendim onları denemek için basit ama amaçlarımı yerine getirecek bir uygulma.

Amaçlarım arasında veri tabanı yönetimi, veri türleri arasında dönüşümler, import-export işlevleri, listelemeler, kullanıcı kayıtları, veri güvenliği gibi başlıklar.

Uygulamanın şuan için tam detaylarına değinmek istemiyorum ama umarım bitirdiğimde App Store koyacak bir düzeye erişmiş, bir çözüm sunan uygulama olacak.

Uygulamanın ilk halini github hesabımda bulabilirsiniz. İlk halinde gerçekten tasarıma dair çok bir detay yoktu. Sadece bir fikirden ibaretti.

Ugulamanın Storyboard ile yapılmış ilk hali.

Peki Storyboard ve SwiftUI arasında farklar olayına neden geldim? Kısaca Storyboard kullanıp daha sonra SwiftUI ile çalıştıktan sonra Storyboard’un beni zorladığını düşünmeye başladım.

Aslında Swift öğrenmek istiyenlerin kesinlikle Storyboard ile başlamalarını tavsiye ediyorum çünkü SB. zorluklarını ve UI kolaylıklarını daha iyi anlayacaksınız.

Önce manuel arabada pişip otomatik vitese geçmek gibi bir hissi var UI’ın.

Şimdi şu duruma da değineyim. Storyboard diyorum sürekli çünkü kod tarafında dil aynı UI’la, tabi yazım farklılıklar var elbet ama ben işin daha çok tasarım tarafına değineceğimden Storyboard kısmına fokusluyorum.

İlk örnekle başlayalım.

Storyboard ortamında bir butonu ekrana eklemek istiyorsak ne yaparız?

Resim 1: Storyboard’da ekrana bir butonu sadece bu yöntemle değil aynı zamanda kodlada ekleyebilirsiniz.

Bu işlemi yaptıktan sonra birde butona işlev kazandırabilmek için çalıştığımız sayfaya sürkle bırak yapmamız gerekmekte.

Resim 2: Burada ayrıca dikkatiniz çekmek istediğim yer, butonun çevresinde oluşan beyaz noktalar. İleride buna değineceğim.

Bu işlemden sonrada süslü parantezler arasına butona katmak istediğiniz işlevleri yazarsınız.

Peki aynı işlemi Storyboard kullanmadan SwiftUI ile nasıl yapardık.

Resim 3: Burada kod ile buton ekliyoruz.

Resim 4: SwiftUI’da da nesneleri, tasarım ekranına Storyboard’da olduğu gibide ekleyebiliriz.

Farklı yollardan bir butonu ekrana nasıl ekleriz gördük. Şimdi burada hangisiyle daha kolay iş yapıyoruz, hangisi daha işlevsel orası size kalmış. Ama benim için SwiftUI ile iş yapmak Storyboard’dan daha kolay oluyor diyebilirim.

Storyboard’un en zorlandığım kısmı ekranda neslerin konumlarıyla uğraşmaktı. İkinci resimin altında belirttiğim butonun beyaz noktaları Storyboard’da bir nesnenin fiziksel görünümüne yön verebileceğiniz işlevleri barındıryor.

Ayrıca yine ikinci resimde sol pencedere ekranın alt çubuğunda sağ tarafta bulunan beş adet işaret var. Ordaki seçeneklerlede bir nesnenin farklı ekran boyutlarında hangi konumlarda nasıl duracağına dair ayarlar yapıyoruz. (Bkz: Setting Constraints with Auto Layout)

İşte ben o ayarlarda halen zorlanıyorum. Farklı ekranlara geçişler yaptığımda örneğin iphone 8 cihazında nasıl görünüyor, 12 pro max’te nasıl dediğimde işte nesneleri yerlerine iyi oturtmadıysanız aldınız başınıza belayı. Tabi bu başlangıçta benim gibi yeni işi öğrenenler için geçerli olabilecek bir durum. Her işte ne kadar çok pratik o kadar uzmanlık.

SwiftUI ile bir kaç deneme yanılma ve bir kaç videodan sonra dedimki benim bu Storyboard ile yaptığım ekranı SwiftUI ile nasıl ve ne kadar sürede yaparım acaba? Storyboard’da uğraştığım zamanın 2–3 kat daha azını SwiftUI ile çok hızlı bir şekilde ekranı tamamladım.

SwiftUI ile kodu yazıp aynı zamanda Preview ekranında değişikleri görmek benim çok daha hoşuma gitmişti ve daha hızlı sonuç alıyordum. Ve en büyük artısı ekran konumlandırması.

SwiftUI’da nesleri Stack’ler içerisinde çok daha iyi konumluyorsunuz ve tüm ekran boyutlarına cuk diye oturtmak büyük kolaylık sağlıyor. Aynı şekilde Section’lara ayırmak, Form alanı içerisinde hareket etmek. Tıpkı bir web sitesi yazıyormuşsunuz hissi veriyor size.

Şimdi birde SwiftUI ve Storyboard’da tasarladığım parola üretme ekranı kaç satır koddan oluşuyor ona bakalım.

SwiftUI 177 Satır. Storyboard 238 Satır. Olabildiğince boşlukları alarak düzenledim.

Yukarıdaki kod ekranlarında, her iki taraf içinde daha pratik yazımlar olabilir. Örneğin bir nesneye vereceğiniz fonksiyoneli direkt nesneden sonrada yazarsınız, sayfa sonunada yazarsınız ya da ayrı bir swift dosyasına yazıp işe dahil edebilirsiniz.

Yine bana göre SwiftUI ortamında yazınlan kodların derdli toplu ve bir ağaç mantığında dal-dal yazılıyormuş hissi, hızlı ve daha anlaşılır yapıyor.

Burada da görüldüğü üzere hep bir alt başlık altında topluyoruz ya da bölümlere ayırabiliyoruz.

Buraya kadar derdim, SwiftUI daha iyi, Storyboard ile iş yapmak zor demek değil. Örneklerime devam etmek istiyorum ama şimdilik bu yazıyı çok uzatmadan bitirip yeni bir yazıda devam etmek istiyorum.

Bir sonraki yazıda görüşmek üzere. Esenlikle kalın.