Ana sayfa Mobil iOS RxSwift ile Reactive Programming Kullanımı

RxSwift ile Reactive Programming Kullanımı

3891
407
PAYLAŞ

Merhaba arkadaşlar, bu dersimizde RxSwift kütüphanesini kullanarak, Reactive Programming tekniğini iOS uygulaması geliştirirken nasıl kullanabileceğimizi göreceğiz.

Basitçe iki ayrı view’a sahip olan ve bir tab bar controllerdan oluşan bir uygulama yapacağız. Uygulamamızın birinci sayfasında kullanıcı bilgileri, ve ikinci sayfasında seçebileceğimiz kullanıcılar olacak. Amacımız ikinci sayfada bir kullanıcıyı seçtiğimiz anda birinci sayfadaki bilgileri otomatik olarak RxSwift yardımıyla güncellemek.

RxSwift kütüphanesi, başkaları tarafından geliştirilen bir kütüphane (3rd party library) olduğu için bunu projemize dahil etmemiz gerekiyor. Bunun farklı yolları var fakat ben cocoapods kullanmayı tercih ediyorum. Eğer daha önce cocoapods kullanmadıysanız veya emin değilseniz, terminalinizi açın ve: sudo gem install cocoapods yazdıktan sonra enter’a basın.

Cocoapods kurulumu bittikten sonra, Xcode’umuzu açıp bir “Single View Application” projesi başlatalım. Daha sonra terminalimizi açalım ve cd komutuyla uygulamamızın bulunduğu klasöre girelim. Klasöre geldikten sonra sırasıyla şu komutları yazalım:

pod init,   nano Podfile

Daha sonra terminal içerisinde karşımıza bir Podfile dosyası açılacak, bu dosyanın içerisine aşağıda gösterildiği gibi podlarımızı ekleyelim.

pod ‘RxSwift’, ‘~> 4.0’

pod ‘RxCocoa’, ‘~> 4.0’

Yazdıktan sonra sırasıyla kntrl+x -> y -> enter, tuşlarına basalım.

Not: terminalde benim uygulamamın adı RxSwiftExample olduğu için, target ‘RxSwiftExample’ do yazıyor, burada sizin kendi uygulamanızın ismi yazacak bu yüzden orayı değiştirmeyin.

Sonrasında terminale: $pod install yazıyoruz, ve RxSwift’in uygulamamıza kurulmasını bekliyoruz.

Podumuz kurulduktan sonra terminalimizde aşağıdaki gibi bir görüntüye sahip olmamız gerekiyor.

Şimdi terminalimizi ve projemizi kapatalım, tekrar projemizin olduğu dosya konumuna gidelim, bu sefer normal mavi logolu .xcodeproj uzantılı dosyayı açmak yerine beyaz logolu .xcworkspace uzantılı dosyayı açalım.

Uygulamamızı açıktan sonra öncelikle “Cmd-B” yaparak projemizi build edelim.

ViewController dosyamızı açıp yukarda import RxSwift diyelim, ve Main.storyboard dosyasını açalım.

ViewControllerimizi seçip yukardan Editor -> Embed In -> Tabbar Controller seçelim.

Sonra Object Library bölümünden tekrar bir View Controller sürükleyerek ekrana bırakalım. Ardından Tabbar Controllerdan sağ tıkla, yeni eklediğimiz View Controller üzerine gelip bırakıp; Relationship Segue -> view controllers seçelim.

Sonra her iki ViewControllerımız içinde Tab Item seçip attribute inspector bölümünden Tab Bar Item  – System Item olarak dilediğimiz itemi seçelim. (Ben birinci vc için More, ikincisi için Search seçtim, hiçbir önemi yok yalnızca boş bırakmadan tableri daha belirgin yapabilmek için seçiyoruz.)

Bu işlemler ardından storyboard aşağıdaki gibi görünmeli.

Şimdi, ikinci eklediğimiz ViewController için bir cocoa touch class dosyası oluşturalım. New File -> Cocoa Touch Class -> Class: UserViewController, Subclass of: UIViewController seçerek projemize ekleyelim.

Main.storyboard u açalım ve ikinci eklediğimiz vc’ı seçerek identity inspector kısmından Class bölümüne UserViewController ı girelim.

Şimdi tekrar New File – Swift file seçerek, User adında bir swift dosyası oluşturalım.

Bu dosyamızın içerisine aşağıdaki kodu kopyalayım, User adında name, age, city özelliklerine sahip bir class oluşturuyoruz.

ViewController dosyamızda userToDisplay ve userToDisplayObservable adında aşağıdaki gibi bir değişkenleri tanımlayalım:

Gördüğünüz gibi “userToDisplay” objemizi User sınıfından oluştururken bunu Variable() içine aldık, Variable RxSwift’in metodu ve bu objemize abone olabilmek için(subscribe) bu şekilde tanımlamamız gerekiyor. Diğer “userToDisplayObservable” ise asıl objemize subscribe olabilmek için kullanacağımız obje. “disposeBag” ise aboneliğimiz sona erdikten değerlerimizi güncelledikten sonra bu işlemi sonlandırabilmemiz için kullanacağımız bir obje. Otomatik olarak memory management yapabilmemiz için gerekli. Gördüğünüz gibi RxSwift ile memory management derdinden de kurtulabiliyoruz.

Bu objeyi uygulamamızın ilk sayfasında kullanıcı bilgilerini göstermek için kullanacağız.

Main.storyboard açalım ve ilk vcmize kullanıcı isim, yaş, ve şehir bilgilerini gösterebileceğimiz 3 adet label ekleyelim. Tüm labellerimizin constraintlerini aşağıdaki görseldeki gibi üst,sağ ve soldan 16 şeklinde ayarlayalım ve yukardan aşağıya sırayla constraintlerini atayarak ekleyelim.

Labellerimizin fontunu 24 yapalım, ve herbirine sırasıyla Name, Age, City şeklinde textler atayalım. Ardından vc mizi tıkladıktan sonra sağ üstte Assistant Editor’e tıklayalım ve storyboardımızın yanında ViewController dosyamızı açalım. Labellerimizi sırasıyla kntrl-tık yada mouse ile sağ tık yaparak ViewController dosyamıza sürükleyip bırakalım ve referanslarını sırasıyla; nameLabel, ageLabel, cityLabel şeklinde oluşturalım.

Tekrar standart editorümüze dönelim ve ViewController dosyamızı açalım.

viewDidLoad metodumuzun altında configureLabels() adında bir metod oluşturalım:

  1. Oluşturduğumuz userToDisplayObservable abone olunabilen objesine .subscribe(onNext metoduyla abone oluyoruz, ve bu objeye closure içinde “user” olarak hitap edeceğimizi söylüyoruz.
  2. Labellerimizi user’ın özellikleriyle güncelliyoruz.
  3. .disposed(by:) metodunu daha önce oluşturduğumuz disposeBag ile subscribe’ın sonuna ekliyoruz.

Ardından viewDidLoad() metodunda bu fonksiyonu çağıralım: ViewController kodumuz şuan için aşağıdaki gibi olmalı:

Şimdi uygulamamızı simülatörde çalıştıralım ve gördüğünüz gibi uygulamamız açılır açılmaz subscribe metodu sayesinde oluşturduğumuz objenin özelliklerini görebiliyoruz. Buna ne gerek var? Direk subscribe olmadan labelleri objenin özelliklerine ekleyebilirdik zaten diyebilirsiniz ama buradaki subscribe metodunun amacı, userToDisplay değişir değişmez eş zamanlı olarak label değerlerini güncel userToDisplay’in değerlerine eşitlemek. Yani abone olduğunuz obje ne zaman değiştirilirse onNextten sonraki kod bloğu çalışıyor. İkinci tab şu an için boş, sıra ikinci tab’imizde kullanıcılar görüntülemekte 🙂

Tekrar storyboard açalım ve ikinci eklediğimiz vc içerisine bir table view ekleyelim, constraintlerini 0-0-0-0 olarak tüm ekranı kaplamasını sağlayalım. Ardından Attributes Inspectore gelip Prototype cells sayısını 0 dan 1 e yükseltelim.

Sonra cell’e tıklayıp sağda Identifier kısmına “cell” yazalım.

Şimdi tableView a sağ tıklayıp VC üzerindeki sarı ViewController ikonunun üzerine çekerek delegate, ve dataSource işaretleyelim.

Ardından sağ üstten tekrar Assistant Editor’ü seçelim, ve sağ tarafta UserViewController dosyamızı açalım. Table View’dan sağ tıklayıp dosyamıza bırakalım ve tableView referansı oluşturalım. Sonra tekrar Standart Editor’e dönelim ve UserViewController dosyamızı açalım.

Öncelikle UserViewController dosyamızda da import RxSwift diyelim.

Bir user objesi ve user arrayi oluşturuyoruz, user objesi birinci vc de hangi kullanıcının bilgilerinin gösterileceğini belirlemek için kullanılırken, userArray objesi ise tableView’da kullanıcılarımızı sergilemekte ve herhangi bir kullanıcı seçildiğinde user objesini güncellemek için kullanılacak.

deployUsers adında bir metod oluşturalım ve userArray objemizi dolduralım. Dikkat ederseniz direk userArray’e değil, userArray.value’ e erişerek arrayimizi güncelleyebiliyoruz. RxSwift objelerinde .value şeklinde erişim sağlayabiliyoruz.

Yukarda class UserViewController: kısmında sınıfımızın tableview delegate ve dataSource protocollerine conform olmasını sağlayalım.

Ardından Table view metodlarımızı aşağıdaki gibi ekleyelim:

Bu yazımız RxSwift üzerine olduğu için yukarıdaki tableView metodlarına değinmiyorum.

Şimdi de didSelectRowAt metodumuzu aşağıdaki gibi yazalım.

Herhangi bir satır seçildiğinde, o satırdaki kullanıcıyı, birinci tabde kullanıcıyı güncellemek için oluşturduğumuz userToShowINFirstVc’ya eşitliyoruz.

UserViewController dosyamızdaki kodlarımız aşağıdaki gibi:

 

Şuan için herşey güzel gibi, kullanıcıyı güncelleyebiliyoruz fakat birinci vc nin bundan henüz haberi olmuyor. Şimdi tekrar ViewController dosyamıza geri dönelim.

subscribeToUsers adında bir metod tanımlayalım:

  1. secondVc adında bir sabit oluşturup tabbarcontroller’ın en son vc sine erişelim ve bunu UserViewController olarak cast edelim.
  2. Birinci vc mizdeki userToDisplay objesini, ikinci vc mizden gelen seçilmiş user’a eşitleyelim.
  3. Labellerimizi güncelleyebilmek için tekrar configureLabels fonksiyonumuzu tetikleyelim.

Şimdi uygulamamızı simülatörde çalıştıralım ve biraz kurcalayalım, göreceğiniz gibi ikinci viewda bir kullanıcı seçip tekrar birinci vc ye döndüğümüzde bilgilerimiz güncelleniyor.

Rxswift GIF - Find & Share on GIPHY

Projemizin bitmiş haline buradan ulaşabilirsiniz.

Bugünkü dersimizin sonuna geldik, RxSwift oldukça büyük bir kütüphane ve birçok farklı metodu, özelliği bulunmakta. Bu dersimizde, gerçek bir uygulamada nasıl kullanabileceğimizi görebilmek için Tab Bar Controller kullanarak sizlere basitçe göstermeye çalıştım 🙂

Bir sonraki dersimizde görüşmek üzere.

BİR CEVAP BIRAK

Please enter your comment!
Please enter your name here