RxSwiftの動作-リアクティブアプリケーションの作成

最新のトレンドを信じているなら、FRPは勢いを増しており、止まらないでしょう。 少し前に、FRP- ReactiveX専用のプロジェクトと、Swift- RxSwiftの実装に出会いました 。 Habréには、RxSwiftの初期理解に役立つ小さな記事がすでにありました。 このトピックを発展させたいので、興味があれば猫の下で歓迎します！

威勢のいいトラブル開始

そして、本当にそうです。 私が対処しなければならなかった最も難しいことは、プログラムコードのまったく異なる構成でした。 私の命令型プログラミングの経験では、新しい方法で再構築することは困難でした。 しかし、私の本能は、それを整理する価値があると私に言った。 ReactiveXの本質を理解するのに2週間のパニックがかかりました。私は費やした時間を後悔していません。 したがって、私はすぐに警告したいと思います-この記事では、ReactiveXの用語（Observable、Subscriberなど）を理解する必要があります。

それでは始めましょう。 Facebookで壁の簡単なリーダーを作成します。 これを行うには、 RxSwift 、データマッピング用のObjectMapper 、 Facebook iOS SDK 、および負荷を示すMBProgressHUDが必要です。 Xcodeでプロジェクトを作成し、上記のライブラリをそれに接続し（ CocoaPodsを使用）、 指示に従ってFacebookとのリンクを構成し、コーディングに進みます。

ログイン画面

ホイールを再発明するのではなく、Facebookの既製のボタンを画面の中央に配置するだけです-FBSDKLoginButton：

let loginButton = FBSDKLoginButton() loginButton.center = self.view.center loginButton.readPermissions = ["user_posts"] loginButton.delegate = self 

ログインボタンのFBSDKLoginButtonDelegateデリゲートを追加すること、およびデリゲートメソッドを実装することを忘れないでください。

 // MARK: Facebook Delegate Methods func loginButton(loginButton: FBSDKLoginButton!, didCompleteWithResult result: FBSDKLoginManagerLoginResult!, error: NSError!) { if ((error) != nil) { // Process error let alert = UIAlertController(title: "", message: error.localizedDescription, preferredStyle: .Alert) alert.addAction(UIAlertAction(title: "OK", style: .Cancel, handler: nil)) self.presentViewController(alert, animated: true, completion: nil) } else if result.isCancelled { let alert = UIAlertController(title: "", message: "Result is cancelled", preferredStyle: .Alert) alert.addAction(UIAlertAction(title: "OK", style: .Cancel, handler: nil)) self.presentViewController(alert, animated: true, completion: nil) } else { let storyboard = UIStoryboard(name: "Main", bundle: nil) let vc = storyboard.instantiateViewControllerWithIdentifier("navController") as! UINavigationController self.presentViewController(vc, animated: true, completion: nil) } } func loginButtonDidLogOut(loginButton: FBSDKLoginButton!) { print("User Logged Out") } 

ここではすべてが簡単です-ログインエラーまたはユーザーがFacebook承認画面で[キャンセル]ボタンをクリックした場合、これに関するメッセージをアラートの形式で表示します。すべてが問題なければ、ニュースリストと共に次の画面に送信します。 ログアウト機能には触れませんでした。 ご覧のとおり、これまでのところ、すべては十分に簡単であり、反応性についての話はありません。 ここにはかなり微妙な点もあります-KISSの原則を覚えておくために、 すべてのギャップに反応性を入れないでください 。

ニュース画面

Facebookウォールからニュースのリストを取得する関数を作成します。その戻り値のタイプはObservableです。

 func getFeeds() -> Observable<GetFeedsResponse> { return Observable.create { observer in let parameters = ["fields": ""] let friendsRequest = FBSDKGraphRequest.init(graphPath: "me/feed", parameters: parameters, HTTPMethod: "GET") friendsRequest.startWithCompletionHandler { (connection, result, error) -> Void in if error != nil { observer.on(.Error(error!)) } else { let getFeedsResponse = Mapper<GetFeedsResponse>().map(result)! observer.on(.Next(getFeedsResponse)) observer.on(.Completed) } } return AnonymousDisposable { } } } 

このコードはどうなりますか？ 「me / feed」ニュースを受信するためにネットワーク要求FBSDKGraphRequestが生成された後、コマンドを発行して要求を実行し、完了ブロックのステータスを監視します。 エラーが発生した場合はObservableに渡し、成功した場合は受信したデータをObservableに転送します。

注：変数をFBSDKGraphRequestに渡します

 let parameters = ["fields": ""] 

パラメータの空のセットで。 これはFacebookが泣かないようにするために必要であり、パラメーターのフィールドフィールドが必須であることをログに警告を表示します。 原則として、すべてがこのパラメータなしで機能しますが、私はとても眠いです。

アプリケーションの作成プロセスから少し戻って、データマッピングについて説明しましょう。 ObjectMapperでこの問題を解決します。これにより、非常に迅速かつ簡単にこれを行うことができます。

 class GetFeedsResponse: Mappable { var data = [Feed]() var paging: Paging! required init?(_ map: Map){ } // Mappable func mapping(map: Map) { data <- map["data"] paging <- map["paging"] } } class Feed: Mappable { var createdTime: String! var id: String! var story: String? var message: String? required init?(_ map: Map){ } // Mappable func mapping(map: Map) { createdTime <- map["created_time"] id <- map["id"] story <- map["story"] message <- map["message"] } } class Paging: Mappable { var next: String! var previous: String! required init?(_ map: Map){ } // Mappable func mapping(map: Map) { next <- map["next"] previous <- map["previous"] } } 

ニュースに関する詳細な情報を受け取るために、すぐにネットワークリクエストを作成することをお勧めします。

 func getFeedInfo(feedId: String) -> Observable<GetFeedInfoResponse> { return Observable.create { observer in let parameters = ["fields" : "id,admin_creator,application,call_to_action,caption,created_time,description,feed_targeting,from,icon,is_hidden,is_published,link,message,message_tags,name,object_id,picture,place,privacy,properties,shares,source,status_type,story,story_tags,targeting,to,type,updated_time,with_tags"] let friendsRequest = FBSDKGraphRequest.init(graphPath: "" + feedId, parameters: parameters, HTTPMethod: "GET") friendsRequest.startWithCompletionHandler { (connection, result, error) -> Void in if error != nil { observer.on(.Error(error!)) } else { print(result) let getFeedInfoResponse = Mapper<GetFeedInfoResponse>().map(result)! observer.on(.Next(getFeedInfoResponse)) observer.on(.Completed) } } return AnonymousDisposable { } } } 

ご覧のとおり、パラメーター変数に多数のフィールドを渡しました。これらはすべてドキュメントに含まれていたフィールドです。 すべてを並べ替えるのではなく、一部のみを並べ替えます。 データマッピングは次のとおりです。

 class GetFeedInfoResponse: Mappable { var createdTime: String! var from: IdName! var id: String! var isHidden: Bool! var isPublished: Bool! var message: String? var name: String? var statusType: String? var story: String? var to = [IdName]() var type: String! var updatedTime: String! required init?(_ map: Map){ } // Mappable func mapping(map: Map) { createdTime <- map["created_time"] from <- map["from"] id <- map["from"] isHidden <- map["is_hidden"] isPublished <- map["is_published"] message <- map["message"] name <- map["name"] statusType <- map["status_type"] story <- map["story"] // It necessary that Facebook API have a bad structure // buffer%varname% is a temporary variable var bufferTo = NSDictionary() bufferTo <- map["to"] if let bufferData = bufferTo["data"] as? NSArray { for bufferDataElement in bufferData { let bufferToElement = Mapper<IdName>().map(bufferDataElement) to.append(bufferToElement!) } } type <- map["type"] updatedTime <- map["updated_time"] } } class IdName: Mappable { var id: String! var name: String! required init?(_ map: Map){ } // Mappable func mapping(map: Map) { id <- map["id"] name <- map["name"] } } 

ご覧のとおり、ここにも軟膏のハエがあります。 たとえば、jsonオブジェクト「to」を解析するときに、「to」には単一のフィールド「data」が含まれ、これはjson配列であるため、次のように回避する必要がありました。

 var bufferTo = NSDictionary() bufferTo <- map["to"] if let bufferData = bufferTo["data"] as? NSArray { for bufferDataElement in bufferData { let bufferToElement = Mapper<IdName>().map(bufferDataElement) to.append(bufferToElement!) } } 

基本的に、1つの「データ」フィールドを持つファイルを作成し、そこでオブジェクトを静かにマップ解除できますが、1つのフィールドをマップするために新しいファイルを作成するのは愚かなことのように思えました。 この問題に対するよりエレガントな解決策をお持ちの方がいれば、喜びに酔いしれ、それについて知って喜んでいます。

羊に戻りましょう。 Facebookと連絡を取り、Observableの形式でニュースのリストを取得しました。このデータを表示する必要があります。 この目的のために、 MVVMパターンを使用します。 ReactiveXの使用を考慮したこのテンプレートの私の自由な解釈は次のように聞こえます。ViewModelにはイベントを生成するObservableがあり、Viewはこれらのイベントにサブスクライブして処理します。 つまり、ViewModelはフォローしているユーザーに依存しません-サブスクライバーがいる場合、Observableはデータを生成し、サブスクライバーがいない場合、Observableは何も生成しません（「ホット」なObservableの場合、このステートメントはtrueになります）常にデータを生成します）。 ニュース画面のViewModelを作成します。

 class FeedsViewModel { let feedsObservable: Observable<[Feed]> let clickObservable: Observable<GetFeedInfoResponse> // If some process in progress let indicator: Observable<Bool> init(input: ( UITableView ), dependency: ( API: APIManager, wireframe: Wireframe ) ) { let API = dependency.API let wireframe = dependency.wireframe let indicator = ViewIndicator() self.indicator = indicator.asObservable() feedsObservable = API.getFeeds() .trackView(indicator) .map { getFeedResponse in return getFeedResponse.data } .catchError { error in return wireframe.promptFor(String(error), cancelAction: "OK", actions: []) .map { _ in return error } .flatMap { error in return Observable.error(error) } } .shareReplay(1) clickObservable = input .rx_modelSelected(Feed) .flatMap { feed in return API.getFeedInfo(feed.id).trackView(indicator) } .catchError { error in return wireframe.promptFor(String(error), cancelAction: "OK", actions: []) .map { _ in return error } .flatMap { error in return Observable.error(error) } } // If error when click uitableview - set retry() if you want to click cell again .retry() .shareReplay(1) } } 

コードを解析しましょう。 入力フィールドでは、Viewのテーブル、依存関係フィールドではAPIクラスとワイヤフレームを渡します。 クラスには3つの変数があります。feedsObservableはニュースのリストを含むObservableを返し、clickObservableはテーブルセルをクリックするためのハンドラーであり、indicatorは読み込みインジケーターを表示するかどうかを決定するブール変数です。 コードには2つの好奇心once盛なクラスがあります-WireframeとViewIndicator、それらについて詳しく見ていきましょう。 ワイヤフレームは、アラートの事後対応的な実装にすぎません。 RxSwiftリポジトリの例からこの実装を取りました。 ViewIndicatorは追跡中です。チェーンで少なくとも1つのシーケンスが実行されている限り、このクラスのtrackView関数が実行されます。したがって、trackViewはロードインジケーターの表示に便利です。 この記事ではコードを提供しません。プロジェクトリポジトリで見つけることができます。リンクは記事の下部にあります。

Observableのロジックに触れてみましょう。 最初の-feedsObservable-Facebookからの応答を受信し、マップブロックでニュースリストが取得されて返されます。次に、エラー処理と、負荷を表示するtrackViewがあります。 2番目のclickObservableは、テーブルセルのクリックを監視し、その後、ニュースに関する詳細情報を求めるネットワーク要求を呼び出します。 スーパー、モデルが完成したら、直接ビューに移動します。

すぐにViewコードを提供します。その後、分析します。

 class FeedsViewController: UIViewController, UITableViewDelegate { @IBOutlet weak var feedsTableView: UITableView! var disposeBag = DisposeBag() override func viewDidLoad() { super.viewDidLoad() let viewModel = FeedsViewModel( input:feedsTableView, dependency: ( API: APIManager.sharedAPI, wireframe: DefaultWireframe.sharedInstance ) ) let progress = MBProgressHUD() progress.mode = MBProgressHUDMode.Indeterminate progress.labelText = " ..." progress.dimBackground = true viewModel.indicator .bindTo(progress.rx_mbprogresshud_animating) .addDisposableTo(self.disposeBag) feedsTableView.rx_setDelegate(self) viewModel.feedsObservable .bindTo(feedsTableView.rx_itemsWithCellFactory) { tableView, row, feed in let cell = tableView.dequeueReusableCellWithIdentifier("feedTableViewCell") as! FeedTableViewCell cell.feedCreatedTime.text = NSDate().convertFacebookTime(feed.createdTime) if let story = feed.story { cell.feedInfo.text = story } else if let message = feed.message { cell.feedInfo.text = message } cell.layoutMargins = UIEdgeInsetsZero return cell } .addDisposableTo(disposeBag) viewModel.clickObservable .subscribeNext { feed in let storyboard = UIStoryboard(name: "Main", bundle: nil) let feedInfoViewController = storyboard.instantiateViewControllerWithIdentifier("feedInfoViewController") as! FeedInfoViewController feedInfoViewController.feedInfo = feed self.navigationController?.pushViewController(feedInfoViewController, animated: true) } .addDisposableTo(disposeBag) } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } // Deselect tableView row after click func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) { tableView.deselectRowAtIndexPath(indexPath, animated: true) } } 

まず、viewModelを作成します。 次に、読み込みインジケーターを作成し、何らかの方法でそれをViewIndicatorに接続する必要があります。 これを行うには、MBProgressHUDの拡張機能を記述する必要があります。

 extension MBProgressHUD { /** Bindable sink for MBProgressHUD show/hide methods. */ public var rx_mbprogresshud_animating: AnyObserver<Bool> { return AnyObserver {event in MainScheduler.ensureExecutingOnScheduler() switch (event) { case .Next(let value): if value { let loadingNotification = MBProgressHUD.showHUDAddedTo(UIApplication.sharedApplication().keyWindow?.subviews.last, animated: true) loadingNotification.mode = self.mode loadingNotification.labelText = self.labelText loadingNotification.dimBackground = self.dimBackground } else { MBProgressHUD.hideHUDForView(UIApplication.sharedApplication().keyWindow?.subviews.last, animated: true) } case .Error(let error): let error = "Binding error to UI: \(error)" #if DEBUG rxFatalError(error) #else print(error) #endif case .Completed: break } } } } 

MBProgressHUDに値が指定されている場合、インジケーターを表示します。 値が指定されていない場合は、非表示にします。 ここで、MBProgressHUDとViewIndicatorの間のバインディングを構成する必要があります。 これは次のように行われます。

 viewModel.indicator .bindTo(progress.rx_mbprogresshud_animating) .addDisposableTo(self.disposeBag) 

その後、UITableView要素をクリックして新しい画面に移動するのと同様に、UITableViewとデータの受信の間のバインディングを構成します。 また、「反応性」のない投稿に関する詳細情報の画面を作成しました。

 override func viewDidLoad() { super.viewDidLoad() var feedDetail = "From: " + feedInfo.from.name if feedInfo.to.count > 0 { feedDetail += "\nTo: " for to in feedInfo.to { feedDetail += to.name + "\n" } } if let date = feedInfo.createdTime { feedDetail += "\nDate: " + NSDate().convertFacebookTime(date) } if let story = feedInfo.story { feedDetail += "\nStory: " + story } if let message = feedInfo.message { feedDetail += "\nMessage: " + message } if let name = feedInfo.name { feedDetail += "\nName: " + name } if let type = feedInfo.type { feedDetail += "\nType: " + type } if let updatedTime = feedInfo.updatedTime { feedDetail += "\nupdatedTime: " + NSDate().convertFacebookTime(updatedTime) } feedTextView.text = feedDetail self.navigationController?.navigationBar.tintColor = UIColor.whiteColor() } 

それだけです。 Githubのプロジェクトのソースコードは、このリンクからダウンロードできます。 私の記事が気に入ったら、私は幸福にあふれ、RxSwiftについて喜んで書き続け、より重要なタスクでその可能性を解き放とうとします。