[3. 값 보여주기] RxJava+MVVM+Hilt+Papago API를 이용한 번역 앱 만들기 (feat.Kotlin)

저번 글에 이어서 작성하도록 하겠습니다, 아래 글을 보지 않으셨다면 참고해 주세요

2022.04.14 - [Project example/번역 앱] - [2. API 호출, 모듈] RxJava+MVVM+Hilt+Papago API를 이용한 번역 앱 만들기 (feat.Kotlin)

[2. API 호출, 모듈] RxJava+MVVM+Hilt+Papago API를 이용한 번역 앱 만들기 (feat.Kotlin)

 

전체 코드는 이곳에서 확인할 수 있습니다

https://github.com/ParkSangSun1/RxAppExample

GitHub - ParkSangSun1/RxAppExample: RxJava + Papago API + MVVM + Hilt

 

바로 MainActivity에서 어떻게 이용되는지 봐보겠습니다

@AndroidEntryPoint
class MainActivity : BaseActivity<ActivityMainBinding>(R.layout.activity_main) {
    private val mainViewModel by viewModels<MainViewModel>()
    //구독 해제를 위해
    private val compositeDisposable = io.reactivex.disposables.CompositeDisposable()
    private val compositeRx3Disposable = io.reactivex.rxjava3.disposables.CompositeDisposable()


    override fun init() {
        changeTranslationLanguageClickEvent()
        translationButtonClickEvent()
    }

    //번역하기 버튼 클릭 시
    private fun translationButtonClickEvent() {

        val translationClickObservable = Observable.create<TranslationDataDelivery> { emitter ->
            binding.translationBtn.setOnClickListener {
                emitter.onNext(TranslationDataDelivery(binding.translationEditTxt.text.toString(), mainViewModel.language))
            }

            emitter.setCancellable {
                binding.translationBtn.setOnClickListener(null)
            }
        }
            .subscribeOn(Schedulers.io())
            .observeOn(AndroidSchedulers.mainThread())
            .subscribe({ data ->
                val source = if (data.languageState) "en" else "ko"
                val target = if (data.languageState) "ko" else "en"
                val papagoTranslationObservable = mainViewModel.getPapagoTranslationText(text = data.text, source = source, target = target)
                    .subscribeOn(Schedulers.io())
                    .observeOn(AndroidSchedulers.mainThread())
                    .subscribe({ response ->
                        binding.translationAfterText.text = response.message.result.translatedText
                    }, { error ->
                        shortShowToast(error.toString())
                    })
                compositeRx3Disposable.add(papagoTranslationObservable)
            }, { error ->

                shortShowToast(error.toString())

            })
        compositeRx3Disposable.add(translationClickObservable)

    }

    //번역 언어 변경 클릭 시
    private fun changeTranslationLanguageClickEvent(){
       val changeTranslationLanguageClickObservable = binding.change.clicks()
           .subscribe {
               mainViewModel.language = !mainViewModel.language
               if (mainViewModel.language){
                   binding.beforeTxt.text = "영어"
                   binding.afterTxt.text = "한국어"
               }else{
                   binding.beforeTxt.text = "한국어"
                   binding.afterTxt.text = "영어"
               }
           }
        compositeDisposable.add(changeTranslationLanguageClickObservable)
    }

	//Destory될 때 모두 구독 해제
    override fun onDestroy() {
        super.onDestroy()
        compositeDisposable.dispose()
        compositeRx3Disposable.dispose()
    }
}

translationButtonClickEvent() 메서드에서는 translationBtn을 클릭 시 translationEditTxt의 text를 가져와 데이터를 발생시킵니다

그리고 그 아래에서 구독자가 발행한 데이터를 받아 또다시 API를 비동기 방식으로 호출하고 결과를 화면에 표시해줍니다

changeTranslationLanguageClickEvent() 메서드에서는 한국어를 영어로 변환할 건지 영어를 한국어로 변환할 건지 정하는 mainViewModel.language를 설정합니다

rxbinding clicks()를 이용해 change가 클릭되었을 때 이벤트를 발생시켜줍니다. 그리고 구독해 발생될 때마다 위에 말한 언어 설정을 변경해줍니다

이렇게 구독자가 구독을 하여 발생된 이벤트에 따라 처리하게 되어있는데 구독을 해제해야 할 때도 있습니다

때문에 화면이 파괴될 때(onDestroy()) 구독을 해제하게 하였습니다

이제 완성된 번역 앱을 실행해 봅시다!

최종 실행 화면