√ Belajar Android MVP Design Pattern – Aplikasi Quotes Sederhana (Part II)

May 06, 2019

Part 2 : Aplikasi Quotes Sederhana - Menerapkan View dan Presenter


√ Belajar Android MVP Design Pattern – Aplikasi Quotes Sederhana (Part II)

Pada tutorial belajar membuat aplikasi quotes sederhana dengan MVP kali ini topik yang dibahas pada part 2 yaitu, menerapkan View dan Presenter dari Model dan Api Client yang sudah kita siapkan. Sebagai pengingat bahwa Presenter berisi bisnis proses sehingga diharapkan pada View atau Activity sudah tidak ada lagi bisnis proses, karena View hanya menghandle yang berurusan dengan tampilan.

Untuk langkah-langkah yang dapat kalian ikuti sebagai berikut :

 1. Buat package baru dengan nama presentation, dan rename MainActivity.kt menjadi QuotesActivity.kt caranya dengan klik kanan MainActivity.kt dan pilih refactor > rename. Setelah di rename pindahkan file QuotesActivity.kt kedalam package presentation.

2. Buat 2 file baru didalam package presentation dan beri nama QuotesUI.kt dan QuotesPresenter.kt. Sehingga sekarang struktur packagenya menjadi seperti berikut:



3. Buka file QuotesUI, dan kita buat untuk contract dan interface dari presenter, tulis kodenya seperti berikut :

package com.didik.mvpquotesapp.presentation

import com.didik.mvpquotesapp.model.Quotes

interface QuotesUI {
    interface View {
        fun showProgress()
        fun hideProgress()
        fun showFailedLoad()
        fun showQuotes(quotes: List<Quotes>)
    }

    interface Presenter {
        fun getRandomQuotes(filter: String)
        fun onViewDetached()
    }
}
Dari kode diatas, bahwa interface untuk View berisi method-method yang isinya untuk menghandle dari sisi tampilan, contohnya seperti menampilkan loading, menyembunyikan loading, handle ketika quotes berhasil ditampilkan dan gagal ditampilkan. Sedangkan interface dari Presenter berisi method yang akan diimplement pada file QuotesPresenter. Isinya berupa bisnis proses seperti melakukan request ke API, dan onViewDetached() digunakan ketika activity pada tahap onDestroy maka view akan memanggil onViewDetached() dan menghentikan proses yang berjalan di RxJava.


4. Untuk lebih jelasnya kita buka file QuotesPresenter.kt, kemudian tulis kodenya seperti berikut :
package com.didik.mvpquotesapp.presentation
import android.util.Log
import com.didik.mvpquotesapp.model.Quotes
import com.didik.mvpquotesapp.rest.QuotesGetResponseResult
import com.didik.mvpquotesapp.rest.RestApiClient
import io.reactivex.SingleObserver
import io.reactivex.android.schedulers.AndroidSchedulers
import io.reactivex.disposables.Disposable
import io.reactivex.schedulers.Schedulers

class QuotesPresenter(
    private val view: QuotesUI.View,
    private val apiClient: RestApiClient,
    private var disposable: Disposable?
) : QuotesUI.Presenter {

    override fun getRandomQuotes(filter: String) {
        view.showProgress()
        apiClient.getRandomQuotes(filter)
            .subscribeOn(Schedulers.io())
            .observeOn(AndroidSchedulers.mainThread())
            .subscribe(object : SingleObserver<List<Quotes>> {
                override fun onSuccess(quotes: List<Quotes>) {
                    view.showQuotes(quotes)
                }

                override fun onSubscribe(d: Disposable) {
                    disposable = d
                }

                override fun onError(e: Throwable) {
                    view.showFailedLoad()
                    Log.e("error", "$e")
                }
            })
        view.hideProgress()
    }

    override fun onViewDetached() {
        disposable?.dispose()
    }

}

 Pada presenter mengimplementasikan interface pada QuotesUI.Presenter sehingga isi dari presenter berupa implementasi dari method pada interface tersebut, untuk method getRandomQuotes() menggunakan RxJava, untuk kalian yang belum mempelajarinya saya sarankan untuk belajar mulai dari sekarang. Intinya RxJava merupakan library dari Reactive Extention dengan menggunakan Reactive Programming. Pada method onViewDetached() berisi disposable?.dispose() artinya ketika activity sudah tidak ditampilkan maka seharusnya proses yang sedang berjalan harus dihentikan. Hal ini untuk mencegah terjadinya pembengkakan memori atau yang dikenal dengan memory leaks. Nah kapan method onViewDetached() dipanggil ?

5. Oke kita buka file QuotesActivity, dan hubungkan antara interface UI dan presenter yang sudah kita buat sebelumnya. Tulis kodenya seperti berikut : 

package com.didik.mvpquotesapp.presentation
import android.support.v7.app.AppCompatActivity

import android.os.Bundle

import android.text.Html

import android.view.View

import android.widget.Toast

import com.didik.mvpquotesapp.R

import com.didik.mvpquotesapp.model.Quotes

import com.didik.mvpquotesapp.rest.RestApiClient

import io.reactivex.disposables.Disposable

import kotlinx.android.synthetic.main.activity_quotes.*

    class QuotesActivity : AppCompatActivity(), QuotesUI.View {


        private val apiClient by lazy { RestApiClient.create() }


        private var disposable: Disposable? = null

        private lateinit var presenter: QuotesUI.Presenter


        override fun onCreate(savedInstanceState: Bundle?) {

            super.onCreate(savedInstanceState)

            setContentView(R.layout.activity_quotes)


            presenter = QuotesPresenter(

                this,

                apiClient,

                disposable

            )


            presenter.getRandomQuotes("rand")


            refetch_quote_button.setOnClickListener {

                presenter.getRandomQuotes("rand")

            }

        }

    override fun onDestroy() {

            super.onDestroy()

            presenter.onViewDetached()

        }


        override fun showProgress() {

            progress_bar.visibility = View.VISIBLE

        }


        override fun hideProgress() {

            progress_bar.visibility = View.INVISIBLE

        }


        override fun showFailedLoad() {

            Toast.makeText(this, "", Toast.LENGTH_LONG).show()

        }


        override fun showQuotes(quotes: List<Quotes>) {

            val quote = quotes.map { it }.first()

            title_quotes.text = quote.title

            content_quotes.text = Html.fromHtml(quote.content)

        }

    }
 
Dari kode diatas, QuotesActivity mengimplementasikan interface QuotesUI.View sehingga didalam activity berisi implementasi untuk handle tampilan seperti didalam interface tersebut. Didalam onCreate berisi inisiasi dari presenternya dan pemanggilan presenter untuk method getRandomQuotes(). Dan method onViewDetached() dipanggil pada saat activity onDestroy. Nah tips untuk kalian, penempatan dispose() untuk disposable yang baik untuk Activity dan Fragment lifecycle, yaitu onDestroy() pada Activity, dan onDetach() pada Fragment.

Untuk implementasi view seperti showProgress, hideProgress, showFailedLoad, dan showQuotes berisi handle yang dilakukan terhadap yang ditampilkan dari proses bisnis yang dilakukan di presenter.

Oke sudah selesai untuk belajar membuat aplikasi quotes sederhana dengan menerapkan MVP pattern dan RxJava. Hasilnya akan seperti berikut :


Untuk source code lengkapnya dapat didownload disini https://github.com/didik-maulana/quotesapp-mvp

Terima kasih, semoga bermanfaat, Semoga artikel ini dapat membantu kamu yang sedang belajar MVP kotlin.

 Baca Juga :

Artikel Programing Lainnya :



Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Disqus
Tambahkan komentar Anda