[아키텍쳐] RiBs tutorial1 따라하기

RIBs란 우버에서 만든 cross 아키텍쳐 패턴이라고 합니다

https://github.com/uber/RIBs

GitHub - uber/RIBs: Uber's cross-platform mobile architecture framework.

 

rib 이름에서 알 수 있듯이 

router, interactor, builder 이 세가지가 핵심이구 이들을 차차 살펴보도록 하겠습니다 !

 

그중 오늘은 tutorial1을 우버에서 제공한 wiki와 함께 자세히 따라 해볼거에요

https://github.com/uber/RIBs/wiki/iOS-Tutorial-1

 

파일을 열면 LoggedOut, Root 폴더가 있습니다

 

앱이 시작되면 AppDelegate가 루트 RIB를 빌드하고 애플리케이션에 대한 제어를 루트 RIB로 전송합니다.

이 부분은 에러가 나서 

이렇게 비슷한 함수 찾아 대체해 주었어요 !

 

루트 RIB의 목적은 RIB 트리의 루트 역할을 하고 필요할 때 자식에게 제어를 전달하는 것입니다.

 

우선 LoggedOut 폴더에 new File 클릭

아래로 내려 RIBs 선택한 뒤

 

이름을 LoggedOut이라 하고 Owns corresponding view 체크 박스 클릭해서 파일을 만들어줍니다. 

그리고 이제 DELETE_Me 파일은 삭제해줍니다.

 

후후 이제 생성된 파일들을 이해해봅시다ㅏ

LoggedOutBuilder 

코드를 보면 LoggedOutBuildable protocol을 준수하고 있는데 여기엔 build라는 함수가 정의되어 있습니다. 

build 함수 내에서는 ~Component, ViewController, Interactor 등등 아직은 알 수 없는 요소들을 생성하고 있네요 흠 .. 일단 여기서 넘어가고 다음 !!

 

LoggedOutInteractor

'Brain of the app' 이라고 소개하고 있네요 앱의 핵심인가봅니다.

다른 RIBs로 전환하기도 하고,  view controller의 model을 보여주기도 한다고 하네요 일단 또 넘어가 봅시다 ..

 

LoggedOutRouter

Interactor와 통신하기 위해 LoggedOutInteractable에서 필요한 것을 선언하고, LoggedOutViewControllable을 사용하여 뷰 컨트롤러와 통신합니다

LoggedOutViewController

LoggedOutPresentableListener를 사용하여 이벤트를 처리하는 곳입니다 

이제 loggedOut UI를 만들러 넘어가봅시다 !!

친절하게도 loggedoutViewController에 넣을 코드를 제공해줬어요 아래 코드를

listener 밑에 넣어줍니다

 

override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = UIColor.white
        let playerFields = buildPlayerFields()
        buildLoginButton(withPlayer1Field: playerFields.player1Field, player2Field: playerFields.player2Field)
    }

    // MARK: - Private

    private var player1Field: UITextField?
    private var player2Field: UITextField?

    private func buildPlayerFields() -> (player1Field: UITextField, player2Field: UITextField) {
        let player1Field = UITextField()
        self.player1Field = player1Field
        player1Field.borderStyle = UITextBorderStyle.line
        view.addSubview(player1Field)
        player1Field.placeholder = "Player 1 name"
        player1Field.snp.makeConstraints { (maker: ConstraintMaker) in
            maker.top.equalTo(self.view).offset(100)
            maker.leading.trailing.equalTo(self.view).inset(40)
            maker.height.equalTo(40)
        }

        let player2Field = UITextField()
        self.player2Field = player2Field
        player2Field.borderStyle = UITextBorderStyle.line
        view.addSubview(player2Field)
        player2Field.placeholder = "Player 2 name"
        player2Field.snp.makeConstraints { (maker: ConstraintMaker) in
            maker.top.equalTo(player1Field.snp.bottom).offset(20)
            maker.left.right.height.equalTo(player1Field)
        }

        return (player1Field, player2Field)
    }

    private func buildLoginButton(withPlayer1Field player1Field: UITextField, player2Field: UITextField) {
        let loginButton = UIButton()
        view.addSubview(loginButton)
        loginButton.snp.makeConstraints { (maker: ConstraintMaker) in
            maker.top.equalTo(player2Field.snp.bottom).offset(20)
            maker.left.right.height.equalTo(player1Field)
        }
        loginButton.setTitle("Login", for: .normal)
        loginButton.setTitleColor(UIColor.white, for: .normal)
        loginButton.backgroundColor = UIColor.black
        loginButton.addTarget(self, action: #selector(didTapLoginButton), for: .touchUpInside)
    }

    @objc private func didTapLoginButton() {

    }

 

그리고 build 해보면 ?

위의 화면과 같이 잘 나오네요 !

 

이제는 로그인 버튼을 클릭했을때의 로직에 대해 생각해봅시다.

login button을 클릭하면 

LoggedOutViewController는 리스너(LoggedOutPresentableListener)를 호출해야 합니다. 그러면 ? 로그인 요청을 진행하기 위해 게임에 참여하는 플레이어의 이름이 필요합니다. 그러기 위해서 뷰 컨트롤러에서 로그인 요청을 수신할 수 있도록 리스너를 업데이트해야 합니다. 

 

LoggedOutPresentableListener 프로토콜에 아래  함수를 작성해 줍니다.

protocol LoggedOutPresentableListener: AnyObject {
    // TODO: Declare properties and methods that the view controller can invoke to perform
    // business logic, such as signIn(). This protocol is implemented by the corresponding
    // interactor class.
    func login(withPlayer1Name player1Name: String?, player2Name: String?)
}

login player의 name이 옵셔널로 되어 있습니다. 이는 플레이어가 이름을 입력하지 않을수도 있기 때문이죠 !

 

따라서 LoggedOutPresentableListener을 준수하는 파일을 찾아가보면 ?

LoggedOutInteractor가 있네요  !! login 함수를 작성해줍니다.

func login(withPlayer1Name player1Name: String?, player2Name: String?) {
        let player1NameWithDefault = playerName(player1Name, withDefaultName: "Player 1")
        let player2NameWithDefault = playerName(player2Name, withDefaultName: "Player 2")

        print("\(player1NameWithDefault) vs \(player2NameWithDefault)")
    }
    
    private func playerName(_ name: String?, withDefaultName defaultName: String) -> String {
        if let name = name {
            return name.isEmpty ? defaultName : name
        } else {
            return defaultName
        }
    }

 

그리고 다시 login 클릭하는 함수로 돌아가 

 

@objc private func didTapLoginButton() {
            listener?.login(withPlayer1Name: player1Field?.text, player2Name: player2Field?.text)
        }

listener를 연결해줍니다.

 

다시 빌드해볼까요 ?

이렇게 튜토리얼 1이 끝났습니다 ㅎㅎ

뭔가 RIBs를  이루고 있는 뼈대와 이름에 따른 쓰임새를 알것 같기도 하고 아직은 구조가 얽혀 있는 느낌이 드네요 .. 

다음 튜토리얼을 보면서 더 이해해보도록 해야겠어요 

글 읽어주셔서 감사합니다 ~~