Github Signup

Github Signup - 图1

这是一个模拟用户注册的程序，你可以在这里下载这个例子。

简介

这个 App 主要有这样几个交互：

  • 当用户输入户名时，验证用户名是否有效，是否已被占用，将验证结果显示出来。
  • 当用户输入密码时，验证密码是否有效，将验证结果显示出来。
  • 当用户输入重复密码时，验证重复密码是否相同，将验证结果显示出来。
  • 当所有验证都有效时，注册按钮才可点击。
  • 当点击注册按钮后发起注册请求（模拟），然后将结果显示出来。

Service

Github Signup - 图2

  1. // GitHub 网络服务
  2. protocol GitHubAPI {
  3.     func usernameAvailable(_ username: String) -> Observable<Bool>
  4.     func signup(_ username: String, password: String) -> Observable<Bool>
  5. }
  7. // 输入验证服务
  8. protocol GitHubValidationService {
  9.     func validateUsername(_ username: String) -> Observable<ValidationResult>
  10.     func validatePassword(_ password: String) -> ValidationResult
  11.     func validateRepeatedPassword(_ password: String, repeatedPassword: String) -> ValidationResult
  12. }
  14. // 弹框服务
  15. protocol Wireframe {
  16.     func open(url: URL)
  17.     func promptFor<Action: CustomStringConvertible>(_ message: String, cancelAction: Action, actions: [Action]) -> Observable<Action>
  18. }

这里需要集成三个服务：

  • GitHubAPI 提供 GitHub 网络服务
  • GitHubValidationService 提供输入验证服务
  • Wireframe 提供弹框服务

这个例子目前只提供了这三个服务，实际上这一层还可以包含其他的一些服务，例如：数据库，定位，蓝牙…

ViewModel

Github Signup - 图3

ViewModel 需要集成这些服务，并且将用户输入，转换为状态输出：

  1. class GithubSignupViewModel1 {
  3.     // 输出
  4.     let validatedUsername: Observable<ValidationResult>
  5.     let validatedPassword: Observable<ValidationResult>
  6.     let validatedPasswordRepeated: Observable<ValidationResult>
  7.     let signupEnabled: Observable<Bool>
  8.     let signedIn: Observable<Bool>
  9.     let signingIn: Observable<Bool>
  11.     // 输入 -> 输出
  12.     init(input: (       // 输入
  13.             username: Observable<String>,
  14.             password: Observable<String>,
  15.             repeatedPassword: Observable<String>,
  16.             loginTaps: Observable<Void>
  17.         ),
  18.         dependency: (   // 服务
  19.             API: GitHubAPI,
  20.             validationService: GitHubValidationService,
  21.             wireframe: Wireframe
  22.         )
  23.     ) {
  24.         ...
  26.         validatedUsername = ...
  28.         validatedPassword = ...
  30.         validatedPasswordRepeated = ...
  32.         ...
  34.         self.signingIn = ...
  36.         ...
  38.         signedIn = ...
  40.         signupEnabled = ...
  41.     }
  42. }

集成服务：

  • API GitHub 网络服务
  • validationService 输入验证服务
  • wireframe 弹框服务

输入：

  • username 输入的用户名
  • password 输入的密码
  • repeatedPassword 重复输入的密码
  • loginTaps 点击登录按钮

输出：

  • validatedUsername 用户名校验结果
  • validatedPassword 密码校验结果
  • validatedPasswordRepeated 重复密码校验结果
  • signupEnabled 是否允许登录
  • signedIn 登录结果
  • signingIn 是否正在登录

在 init 方法内部，将输入转换为输出。

ViewController

Github Signup - 图4

ViewController 主要负责数据绑定：

  1. ...
  2. class GitHubSignupViewController1 : ViewController {
  3.     @IBOutlet weak var usernameOutlet: UITextField!
  4.     @IBOutlet weak var usernameValidationOutlet: UILabel!
  6.     @IBOutlet weak var passwordOutlet: UITextField!
  7.     @IBOutlet weak var passwordValidationOutlet: UILabel!
  9.     @IBOutlet weak var repeatedPasswordOutlet: UITextField!
  10.     @IBOutlet weak var repeatedPasswordValidationOutlet: UILabel!
  12.     @IBOutlet weak var signupOutlet: UIButton!
  13.     @IBOutlet weak var signingUpOulet: UIActivityIndicatorView!
  15.     override func viewDidLoad() {
  16.         super.viewDidLoad()
  18.         let viewModel = GithubSignupViewModel1(
  19.             input: (
  20.                 username: usernameOutlet.rx.text.orEmpty.asObservable(),
  21.                 password: passwordOutlet.rx.text.orEmpty.asObservable(),
  22.                 repeatedPassword: repeatedPasswordOutlet.rx.text.orEmpty.asObservable(),
  23.                 loginTaps: signupOutlet.rx.tap.asObservable()
  24.             ),
  25.             dependency: (
  26.                 API: GitHubDefaultAPI.sharedAPI,
  27.                 validationService: GitHubDefaultValidationService.sharedValidationService,
  28.                 wireframe: DefaultWireframe.shared
  29.             )
  30.         )
  32.         // bind results to  {
  33.         viewModel.signupEnabled
  34.             .subscribe(onNext: { [weak self] valid  in
  35.                 self?.signupOutlet.isEnabled = valid
  36.                 self?.signupOutlet.alpha = valid ? 1.0 : 0.5
  37.             })
  38.             .disposed(by: disposeBag)
  40.         viewModel.validatedUsername
  41.             .bind(to: usernameValidationOutlet.rx.validationResult)
  42.             .disposed(by: disposeBag)
  44.         viewModel.validatedPassword
  45.             .bind(to: passwordValidationOutlet.rx.validationResult)
  46.             .disposed(by: disposeBag)
  48.         viewModel.validatedPasswordRepeated
  49.             .bind(to: repeatedPasswordValidationOutlet.rx.validationResult)
  50.             .disposed(by: disposeBag)
  52.         viewModel.signingIn
  53.             .bind(to: signingUpOulet.rx.isAnimating)
  54.             .disposed(by: disposeBag)
  56.         viewModel.signedIn
  57.             .subscribe(onNext: { signedIn in
  58.                 print("User signed in \(signedIn)")
  59.             })
  60.             .disposed(by: disposeBag)
  61.         //}
  63.         let tapBackground = UITapGestureRecognizer()
  64.         tapBackground.rx.event
  65.             .subscribe(onNext: { [weak self] _ in
  66.                 self?.view.endEditing(true)
  67.             })
  68.             .disposed(by: disposeBag)
  69.         view.addGestureRecognizer(tapBackground)
  70.     }
  71. }

将用户行为传入给 ViewModel：

  • username 将用户名输入框的当前文本传入
  • password 将密码输入框的当前文本传入
  • …

将 ViewModel 的输出状态显示出来：

  • validatedUsername 用对应的 label 将用户名验证结果显示出来
  • validatedPassword 用对应的 label 将密码验证结果显示出来
  • …

整体结构

以下是全部的核心代码：

  1. // ViewModel
  2. class GithubSignupViewModel1 {
  3.     // outputs {
  5.     let validatedUsername: Observable<ValidationResult>
  6.     let validatedPassword: Observable<ValidationResult>
  7.     let validatedPasswordRepeated: Observable<ValidationResult>
  9.     // Is signup button enabled
  10.     let signupEnabled: Observable<Bool>
  12.     // Has user signed in
  13.     let signedIn: Observable<Bool>
  15.     // Is signing process in progress
  16.     let signingIn: Observable<Bool>
  18.     // }
  20.     init(input: (
  21.             username: Observable<String>,
  22.             password: Observable<String>,
  23.             repeatedPassword: Observable<String>,
  24.             loginTaps: Observable<Void>
  25.         ),
  26.         dependency: (
  27.             API: GitHubAPI,
  28.             validationService: GitHubValidationService,
  29.             wireframe: Wireframe
  30.         )
  31.     ) {
  32.         let API = dependency.API
  33.         let validationService = dependency.validationService
  34.         let wireframe = dependency.wireframe
  36.         /**
  37.          Notice how no subscribe call is being made.
  38.          Everything is just a definition.
  40.          Pure transformation of input sequences to output sequences.
  41.         */
  43.         validatedUsername = input.username
  44.             .flatMapLatest { username in
  45.                 return validationService.validateUsername(username)
  46.                     .observeOn(MainScheduler.instance)
  47.                     .catchErrorJustReturn(.failed(message: "Error contacting server"))
  48.             }
  49.             .share(replay: 1)
  51.         validatedPassword = input.password
  52.             .map { password in
  53.                 return validationService.validatePassword(password)
  54.             }
  55.             .share(replay: 1)
  57.         validatedPasswordRepeated = Observable.combineLatest(input.password, input.repeatedPassword, resultSelector: validationService.validateRepeatedPassword)
  58.             .share(replay: 1)
  60.         let signingIn = ActivityIndicator()
  61.         self.signingIn = signingIn.asObservable()
  63.         let usernameAndPassword = Observable.combineLatest(input.username, input.password) { ($0, $1) }
  65.         signedIn = input.loginTaps.withLatestFrom(usernameAndPassword)
  66.             .flatMapLatest { (username, password) in
  67.                 return API.signup(username, password: password)
  68.                     .observeOn(MainScheduler.instance)
  69.                     .catchErrorJustReturn(false)
  70.                     .trackActivity(signingIn)
  71.             }
  72.             .flatMapLatest { loggedIn -> Observable<Bool> in
  73.                 let message = loggedIn ? "Mock: Signed in to GitHub." : "Mock: Sign in to GitHub failed"
  74.                 return wireframe.promptFor(message, cancelAction: "OK", actions: [])
  75.                     // propagate original value
  76.                     .map { _ in
  77.                         loggedIn
  78.                     }
  79.             }
  80.             .share(replay: 1)
  82.         signupEnabled = Observable.combineLatest(
  83.             validatedUsername,
  84.             validatedPassword,
  85.             validatedPasswordRepeated,
  86.             signingIn.asObservable()
  87.         )   { username, password, repeatPassword, signingIn in
  88.                 username.isValid &&
  89.                 password.isValid &&
  90.                 repeatPassword.isValid &&
  91.                 !signingIn
  92.             }
  93.             .distinctUntilChanged()
  94.             .share(replay: 1)
  95.     }
  96. }
  98. // ViewController
  99. class GitHubSignupViewController1 : ViewController {
  100.     @IBOutlet weak var usernameOutlet: UITextField!
  101.     @IBOutlet weak var usernameValidationOutlet: UILabel!
  103.     @IBOutlet weak var passwordOutlet: UITextField!
  104.     @IBOutlet weak var passwordValidationOutlet: UILabel!
  106.     @IBOutlet weak var repeatedPasswordOutlet: UITextField!
  107.     @IBOutlet weak var repeatedPasswordValidationOutlet: UILabel!
  109.     @IBOutlet weak var signupOutlet: UIButton!
  110.     @IBOutlet weak var signingUpOulet: UIActivityIndicatorView!
  112.     override func viewDidLoad() {
  113.         super.viewDidLoad()
  115.         let viewModel = GithubSignupViewModel1(
  116.             input: (
  117.                 username: usernameOutlet.rx.text.orEmpty.asObservable(),
  118.                 password: passwordOutlet.rx.text.orEmpty.asObservable(),
  119.                 repeatedPassword: repeatedPasswordOutlet.rx.text.orEmpty.asObservable(),
  120.                 loginTaps: signupOutlet.rx.tap.asObservable()
  121.             ),
  122.             dependency: (
  123.                 API: GitHubDefaultAPI.sharedAPI,
  124.                 validationService: GitHubDefaultValidationService.sharedValidationService,
  125.                 wireframe: DefaultWireframe.shared
  126.             )
  127.         )
  129.         // bind results to  {
  130.         viewModel.signupEnabled
  131.             .subscribe(onNext: { [weak self] valid  in
  132.                 self?.signupOutlet.isEnabled = valid
  133.                 self?.signupOutlet.alpha = valid ? 1.0 : 0.5
  134.             })
  135.             .disposed(by: disposeBag)
  137.         viewModel.validatedUsername
  138.             .bind(to: usernameValidationOutlet.rx.validationResult)
  139.             .disposed(by: disposeBag)
  141.         viewModel.validatedPassword
  142.             .bind(to: passwordValidationOutlet.rx.validationResult)
  143.             .disposed(by: disposeBag)
  145.         viewModel.validatedPasswordRepeated
  146.             .bind(to: repeatedPasswordValidationOutlet.rx.validationResult)
  147.             .disposed(by: disposeBag)
  149.         viewModel.signingIn
  150.             .bind(to: signingUpOulet.rx.isAnimating)
  151.             .disposed(by: disposeBag)
  153.         viewModel.signedIn
  154.             .subscribe(onNext: { signedIn in
  155.                 print("User signed in \(signedIn)")
  156.             })
  157.             .disposed(by: disposeBag)
  158.         //}
  160.         let tapBackground = UITapGestureRecognizer()
  161.         tapBackground.rx.event
  162.             .subscribe(onNext: { [weak self] _ in
  163.                 self?.view.endEditing(true)
  164.             })
  165.             .disposed(by: disposeBag)
  166.         view.addGestureRecognizer(tapBackground)
  167.     }
  168. }

这里还有一个 Driver 版的演示代码，有兴趣的同学可以了解一下。