Swift ile Uygulama Geliştirme: İlk Uygulama

Sıfırdan ilk uygulamanızı yaparak Swift ve iOS dünyasına mükemmel bir giriş yapın ve uygulama geliştirme yeteneğinizi geliştirin!

Merhaba TurkishKit okuyucuları! 👋🏻 Bugünkü yazımızda sıfırdan başlayarak ilk iOS uygulamamızı geliştireceğiz ve bunu yaparken önceki bilgilerimizi tazelemenin yanı sıra çok değerli şeyler de öğreneceğiz! Bu sayede kendi uygulamalarınızı yapmak için gerekli olan tecrübeyi kazanacaksınız.

Hadi Başlayalım! 🚀

Bir el feneri uygulaması yapacağız. Uygulamayı yaparken storyboard kullanacağız. Uygulamamız içinde bir adet buton olacak ve butona tıklanıldığı zaman siyah ve beyaz olarak ekranın arka plan rengini değiştireceğiz. Şimdi bir Xcode projesi açalım. Projeye başlarken ben her zaman storyboard ve tasarım ile başlama taraftarıyım. Bunun nedeni ise insanlar olarak görsel odaklı olmamız ve görselini gördüğümüz şeyi çok daha rahat yapabilmemiz.

Bir projeye başlamadan önce ilk yapmamız gereken şey kod yazmak değildir. Aklınızda bir fikir var ve kod yazmayı biliyorsunuz fakat direkt kod yazmak ile başlamak ileride büyük problemlere yol açabilir. Bunun yerine projeyi yaparken kullanacağınız teknolojileri belirlemek, süreci bölümlere ayırmak ve uygulamayı hangi yöntemlerle yapacağımızı seçmek gibi şeyleri başlamadan önce belirlemek ileride işimizi çok daha fazla kolaylaştıracaktır.

• Adım 1: Object Library ( CMD + Shift + L) üzerinden butonu alıp storyboard’ımıza ekliyoruz.

• Adım 2: ViewController.swift içerisinde daha önceki makalemizde öğrendiğimiz @IBAction türünden ve UIButton tipinden bir parametre alan buttonTapped adında bir fonksiyon oluşturuyoruz.

@IBAction func buttonTapped(_ button: UIButton) {
 
}

• Adım 3: Oluşturduğumuz fonksiyonu button ile bağlıyoruz. Bunu yapmak için ViewController nesnemizin üzerine tıkladıktan sonra sağ taraftaki kısımdan Connection Inspector bölümünü seçip, oluşturduğumuz fonksiyonu sürükleyerek butonumuza bırakıyoruz. Karşımıza çıkan aksiyon seçme ekranında ise Touch Up Inside seçeneğini seçiyoruz.

• Adım 4: ViewController.swift dosyamızda oluşturduğumuz fonksiyonun içine sol tarafa tıklayarak bir debugger ekleyip emülatörü açıp butona basarak butonumuzun çalışıp çalışmadığını test ediyoruz. Aşağıda göreceğiniz gibi kodumuz sorunsuz bir şekilde çalışıyor.

• Adım 5: Yapmayı istediğimiz şey, eğer ışığımız açıksa arka planımızın rengini beyaz, kapalı ise siyah yapmak. Bunu yapmanın güzel yollarından birisi ışığın açık veya kapalı olduğunu bir değişken içerisinde tutmaktır. Bunun için uygulamamızda ışığın açık veya kapalı olduğunun değerini tutan lightOn türünde Boolean türünde bir değişken oluşturalım ve başlangıç değerini true yapalım.

var lightOn = true

• Adım 6: Butona her tıklandığında eğer ışık açık ise kapalı kapalı ise açık olacağı için buton içerisine lightOn değişkenin değerini tersine çevirecek bir kod yazmamız lazım. Bunu yapmanın en iyi yolu toggle() fonksiyonunu kullanmaktır. Bunun için butonumuzun aksiyonunun içine şu kodu ekliyoruz:

lightOn.toggle()  // true ise false, false ise true

• Adım 7: lightOn değişkeninin değerine göre arka plan rengini değiştirmek istiyoruz. lightOn değişkeninin değerini bir if-else yapısı ile kontrol edeceğiz ve açık veya kapalılık durumuna göre ekranımızdaki view’in backgroundColor özelliğini değiştireceğiz. Bunun için butonumuzun aksiyonunun içine şu kodu eklemeliyiz:

if lightOn {
 //ışık açık olmalı
 view.backgroundColor = .white
} else {
//ışık kapalı olmalı
 view.backgroundColor = .black
}

Şu an butonumuzun aksiyonu içerisindeki kodlar şu şekilde gözüküyor:

@IBAction func buttonTapped(_ button: UIButton){
 lightOn.toggle() // true ise false, false ise true
 
 if lightOn{
 //ışık açık olmalı
 view.backgroundColor = .white
 }else{
 //ışık kapalı olmalı
 view.backgroundColor = .black
   }
 }

• Adım 8: Gördüğünüz gibi biraz karmaşık gözüküyor. Bu yüzden içerideki kodları bir fonksiyona yazalım ve bu fonksiyonu butonumuzun içerisinde çağıralım ve bu sayede aşağıda gördüğünüz daha okunabilir ve anlaşılabilir kodu elde edelim.

@IBAction func buttonTapped(_ button: UIButton){         lightOn.toggle() // true ise false, false ise true
updateUI()
 }
 func updateUI(){
 if lightOn{
 //ışık açık olmalı
 view.backgroundColor = .white
 }else{
 //ışık kapalı olmalı
 view.backgroundColor = .black
   }
 }

• Adım 9: Butonun isim gibi özelliklerini değiştirmek istediğimiz için bir @IBOutlet değişkeni oluşturalım ve bu oluşturduğumuz @IBOutlet değişkenini bir action bağlarmış gibi sağ taraftaki Outlets kısmından oluşturduğumuz değişkeni butonumuza sürükleyerek bağlayalım. Bunun için kodumuza aşağıdaki değişkeni eklememiz gerekiyor:

@IBOutlet var lightButton:UIButton!

• Adım 10: Butonumuzun text özelliğini değiştirmemiz için en uygun yer updateUI() fonksiyonu olduğu için bu fonksiyon içerisinde setTitle fonksiyonunu kullanarak butonumuzun text özelliğini değiştirelim. Fonksiyonumuzun yeni hali bu şekilde gözüküyor.

func updateUI() {
    if lightOn {
        //ışık açık olmalı
        view.backgroundColor = .white
        lightButton.setTitle(“Off”, for: .normal)
    } else {
        //ışık kapalı olmalı
        view.backgroundColor = .black
        lightButton.setTitle(“On”, for: .normal)
    }
}

• Adım 11: Farkettiğiniz üzere uygulama açıldığında butonumuzun title özelliği değişmemiş oluyor. Çünkü biz updateUI() fonksiyonunu yalnızca butona tıklandığında çalıştırdık. Bu sorunun önüne geçmek için uygulama henüz ayağa kalkmadan çalışan ViewDidLoad fonksiyonu içerisinde updateUI() fonksiyonunu çalıştırmalıyız. Bu işlem sonrasında ViewDidLoad fonksiyonu şu şekilde gözükecek:

override func viewDidLoad() {
    super.viewDidLoad()
    updateUI()
}

• Adım 12: Uygulamamızda butonun çok küçük olduğunu fark etmiş olabilirsiniz. Bunun için butonu köşelerinden tutarak ekran büyüklüğü kadar büyütüyoruz. Daha sonra, kullanıcı ekranın neresine tıklarsa tıklasın butona tıklayacağı için butonun yazısını sağ taraftaki bölümden siliyoruz.

• Adım 13: Artık butonumuzda bir text olmayacağı için updateUI() içerisindeki title değiştirmeye yarayan kodları daha sonra kullanabilme ihtimaline karşı komut satırı haline getiriyoruz. Farkedeceğiniz üzere if kontrolünde sadece birer satır kod kaldığı için kodları uzun bir şekilde yazmak yerine küçük bir söz dizimi taktiği yaparak kodumuzu oldukça kısa ve güzel bir hale getirerek programımızı sonlandırıyoruz. updateUI() fonksiyonumuzun son hali aşağıdaki gibi oluyor:

func updateUI() {
 view.backgroundColor = lightOn ? .white : .black
 
// if lightOn {
//     // ışık açık olmalı
//     view.backgroundColor = .white
//     lightButton.setTitle(“Off”, for: .normal)
//   } else {
//       //ışık kapalı olmalı
//       view.backgroundColor = .black
//       lightButton.setTitle(“On”, for: .normal)
//   }
 }

Bu makalemizde bir uygulamayı baştan sonra nasıl yapabileceğimizi, boolean veri türü kullanımını, kod ile arayüz değiştirmeyi ve daha birçok konuyu pekiştirdik ve öğrendik. Umarım bu makale kendi uygulamanızı yapmanıza yardımcı olacaktır. Sonraki makalelerde görüşmek üzere. Bol kodlu günler diliyorum! 💻

Swift Öğrenin. Uygulama Geliştirin. Sınırların Ötesine Geçin.

Hem kod yazmaya yeni başlayanların hem de profesyonellerin rahatlıkla takip edebilecekleri 38 saatlik videolu eğitim ile Swift programlama dilini derinlemesine keşfedin. iOS geliştiricisi olma yolundaki ilk ve güçlü adımı atın. Kendi iPhone uygulamalarınızı geliştirmeye başlayın.

Birebir Mentorluk Desteği

İhtiyaç duyduğunuz her an desteğe hazır TurkishKit mentorları ile eğitim boyunca karşılaşacağınız problemleri birebir online görüşmelerde çözün.

Tanıtım Videosu

Daha Fazla Bilgi Edinin & Eğitime Katılın

Bizi daha yakından takip etmek istiyorsanız, sosyal medya hesaplarımıza aşağıdan ulaşabilirsiniz!

Twitter | Instagram | Facebook