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

April 28, 2019

Part 1 : Pengenalan MVP Design Pattern dan Persiapan

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


Salah satu trend pengembangan aplikasi android yaitu mengenai arsitektur atau design pattern. Tujuan menggunakan design pattern adalah untuk pengembangan aplikasi yang scalable dan maintenable, memudahkan developer dalam struktur kode yang lebih tertata sehingga apabila terjadi bug / error akan lebih mudah untuk ditelusuri.
Baca Juga :


Salah satu design pattern yang akan dibahas di tutorial ini yaitu MVP (Model, View, Presenter). Secara singkatnya aplikasi tersusun dari 3 komponen utama yaitu :

 Model : sebagai source data yang berkomunikasi dengan repository atau API
Presenter : sebagai penghubung antara Model dengan View, didalamnya berisi proses bisnis, tujuannya adalah memisahkan antara bisnis logic dengan view
View : tampilan, yaitu menampilkan data mentah dari Model yang kemudian diolah di Presenter baru di tampilkan pada View

Relasi pada 3 komponen tersebut yaitu ketika view menampilkan data akan melakukan request kepada Presenter, tidak bisa langsung dengan Model. Setelah Presenter menerima request dari View kemudian Presenter memanggil Model yang isinya adalah data yang masih mentah dan belum diolah. Kemudian Model mengembalikan responsenya ke Presenter baru dilakukan proses bisnis didalam Presenter. Proses bisnis ini contohnya seperti pengecekan login, validasi, pengolahan data yang akan ditampilkan pada view, baru dari presenter data ditampilkan di View.

Belajar Android MVP Design Pattern – Aplikasi Quotes Sederhana (Part I)
Model dapat berupa data class atau POJO dari data yang akan diolah, Presenter dapat diimplementasikan dengan menggunakan interface yang diimplementasikan pada class Presenter. Interface yang diimplementasikan oleh Presenter juga diimplement kepada View sehingga didalam View akan terdapat contract dari interface.

Untuk best practicenya bahwa setiap 1 view mengimplementasikan 1 presenter dan contract, hal itu bertujuan agar kode yang ditulis menjadi lebih tersusun dan pemisahan antara view dengan proses bisnis.

Selanjutnya untuk memulai belajar menerapkan MVP kita persiapkan dulu untuk membuat project di Android seperti biasanya, untuk penamaan aplikasinya bebas, disini saya namakan QuotesApp. 

Berikut hasil dari aplikasi yang akan kita bua menggunakan desain Pattern MVP  :
Belajar Android MVP Design Pattern – Aplikasi Quotes Sederhana (Part I)

Langkah-langkah :

1. Buka build.gradle (Module: app)


Tambahkan kode berikut untuk mengaktifkan kotlin extension, Kotlin extension fungsinya mirip dengan findViewById atau butter knife namun lebih simple, hanya perlu menambahkan id pada xml layout dan memanggilnya pada file Kotlinnya.

Tambahkan kodenya didalam :

2.Menambahkan Library

Kemudian pada dependencies tambahkan library-library yang akan digunakan dalam membuat aplikasi Quotes. Tambahkan kode berikut :



3. Membuat Layout

Buat untuk layoutnya terlebih dahulu, pertama buka folder res, kemudian rename activity_main.xml menjadi activity_quotes.xml. Dan tulis kodenya seperti berikut :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.didik.mvpquotesapp.presentation.QuotesActivity">

    <ProgressBar
            android:id="@+id/progress_bar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:visibility="invisible"/>

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:orientation="vertical">

        <TextView
                android:id="@+id/content_quotes"
                android:layout_width="match_parent"
                android:textSize="24sp"
                android:textStyle="italic"
                android:layout_height="wrap_content"/>

        <TextView
                android:id="@+id/title_quotes"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="18sp"
                android:textStyle="bold"
                android:layout_marginTop="8dp"/>

    </LinearLayout>

    <Button
            android:id="@+id/refetch_quote_button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Refetch Quotes"
            android:textAllCaps="true"
            android:textColor="@android:color/white"
           android:background="@color/colorPrimary"
           android:layout_alignParentBottom="true"/>

</RelativeLayout>


4.Membuat Model

Buat package baru dengan nama model, buat file caranya klik kanan pada package model, pilih New > Kotlin File / Class dan beri nama Quote


Lalu tulis kode untuk data class didalam file Quote : 

package com.didik.mvpquotesapp.model

data class Quotes(
    val title: String,
    val content: String
)

5. Membuat Rest.kt


Buat package baru dan beri nama rest, dan buat 2 file baru didalam package rest, dan beri nama RestApiClient.kt, dan QuotesGetResponseResult.kt.

package com.didik.mvpquotesapp.rest

import com.didik.mvpquotesapp.model.Quotes
import io.reactivex.Single
import retrofit2.Retrofit
import retrofit2.adapter.rxjava2.RxJava2CallAdapterFactory
import retrofit2.converter.gson.GsonConverterFactory
import retrofit2.http.GET
import retrofit2.http.Query

interface RestApiClient {

    @GET("posts")
    fun getRandomQuotes(
        @Query("filter[orderby]") filter: String
    ): Single<List<Quotes>>

    companion object {

        fun create(): RestApiClient {
            val retrofit = Retrofit.Builder()
                .addCallAdapterFactory(RxJava2CallAdapterFactory.create())
                .addConverterFactory(GsonConverterFactory.create())
                .baseUrl("http://quotesondesign.com/wp-json/")
                .build()
            return retrofit.create(RestApiClient::class.java)
        }
    }
}


package com.didik.mvpquotesapp.rest

import com.didik.mvpquotesapp.model.Quotes
import com.google.gson.annotations.Expose
import com.google.gson.annotations.SerializedName

data class QuotesGetResponseResult(
    @Expose @SerializedName("result")
    val result: List<Quotes>
)



File RestApiClient.kt digunakan sebagai interface dari Retrofit yang berisi method pemanggilan request ke API. SedangkanQuotesGetResponseResult.kt digunakan sebagai data class untuk mendapatkan hasil response dari api yang ditampung pada variable result berupa list dari model Quotes.


Sekian pada tutorial part 1, untuk tutorial berikutnya kita akan membuat view dan presenter dari aplikasi quotesnya. Terima kasih 

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

Baca Juga :

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