Tutorial Retrofit Menggunakan Kotlin & Design Pattern : MVP

Published in

Udacoding

3 min readOct 28, 2019

Assalamualaikum,

Pada kesempatan kali ini kita akan belajar cara membuat aplikasi wisata berbasis android dengan memanfaatkan API yang sudah ada, untuk tampilan nya nanti akan menjadi seperti ini :

langsung saja ke tutorialnya :D

1. Buat Project Android Studio

Buatlah project baru beri nama Wisata API dan pilihlah kotlin sebagai bahasa pemrograman nya.

2. Tambahkan beberapa library

Buka file build.gradle (module:app) tambahkan library nya :

implementation 'com.squareup.retrofit2:retrofit:2.6.1'

implementation 'com.squareup.retrofit2:converter-gson:2.6.1'
implementation 'androidx.recyclerview:recyclerview:1.0.0'
implementation("com.squareup.okhttp3:logging-interceptor:4.2.0")
//todo 11 load gambar
implementation 'com.github.bumptech.glide:glide:4.9.0'
// Skip this if you don't want to use integration libraries or configure Glide.
annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'

Setelah itu klik Sync Now di pojok kanan atas.

2. Tambahkan Permission Internet

Karena kita mengambil data dari internet maka kita harus menambahkan permission internet juga, buka AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET"/>

3. Membuat POJO

buatlah package baru, beri nama data kemudian didalam package tersebut ada 2 class yaitu ResponseWisata dan Wisata.

Buka ResponseWisata, tambahkan beberapa kode :

class ResponseWisata {
    var status_code : Int? = null
    var message : String? = null
    val data : List<Wisata>? = null
}

2. Buka class Wisata, tambahkan juga kode nya seperti dibawah ini :

class Wisata {
    var id : String? = null
    var nama_tempat : String? = null
    var lokasi : String? = null
    var deskripsi : String? = null
    var gambar : String? = null

}

4. Konfigurasi Layout

Buka layout activity_main.xml tambahkan recyclerview di dalam layout :

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

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/listWisata"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

</RelativeLayout>

Setelah itu buat layout baru lagi beri nama wisata_item.xml , tambahkan beberapa kode seperti dibawah ini :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/itemImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:contentDescription="@string/gambar_wisata" />

    <TextView
        android:id="@+id/itemLokasi"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:layout_alignParentBottom="true"
        android:textColor="@android:color/white"
        android:textSize="12sp" />

    <TextView
        android:id="@+id/itemNama"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/itemLokasi"
        android:textSize="16sp"
        android:padding="5dp"
        android:textStyle="bold"
        android:textColor="@android:color/white"
        android:fontFamily="sans-serif-light"
        android:textAllCaps="true"
        />

</RelativeLayout>

5. Membuat Adapter

Adapter ini berfungsi untuk menghubungkan wisata_item ke recyclerview, buat package baru beri nama adapter , buat class baru namanya WisataAdapter sesuaikan kode seperti dibawah ini :

class WisataAdapter(val data: List<Wisata>?) : RecyclerView.Adapter<WisataAdapter.MyHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyHolder {

        val view = LayoutInflater.from(parent.context).inflate(R.layout.wisata_item, parent, false)

        return MyHolder(view)

    }

    override fun getItemCount() = data?.size ?:0

    override fun onBindViewHolder(holder: MyHolder, position: Int) {

        holder.textNama.text = data?.get(position)?.nama_tempat
        holder.textLokasi.text = data?.get(position)?.lokasi
        Glide.with(holder.itemView.context).load(data?.get(position)?.gambar).into(holder.image)
    }

    class MyHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

        val textNama = itemView.findViewById<TextView>(R.id.itemNama)
        val textLokasi = itemView.findViewById<TextView>(R.id.itemLokasi)
        val image = itemView.findViewById<ImageView>(R.id.itemImage)



    }

6. Membuat Presenter

buatlah package presenter didalamnya terdapat 2 file yaitu WisataPresenter dan WisataView

WisataPresenter

class WisataPresenter(val wisataView: WisataView) {

    fun getData(){
        fun httpClient(): OkHttpClient {
            val logging = HttpLoggingInterceptor()
            logging.level = HttpLoggingInterceptor.Level.BODY

            val httpClient = OkHttpClient.Builder()
                .addInterceptor(logging)
                .build()
            return httpClient
        }

        val retrofit = Retrofit.Builder()
            .baseUrl("http://udacoding.com/api/")
            .addConverterFactory(GsonConverterFactory.create())
            .client(httpClient())
            .build()
        val wisataService = retrofit.create(WisataService::class.java)
        wisataService.getWisata().enqueue(object : Callback<ResponseWisata> {
            override fun onFailure(call: Call<ResponseWisata>, t: Throwable) {

                Log.d("error e",t.localizedMessage)

                wisataView.onError(t.localizedMessage)
            }

            override fun onResponse(
                call: Call<ResponseWisata>,
                response: Response<ResponseWisata>
            ) {

                //todo 8 cek response
                if(response.isSuccessful){
                    val status = response.body()?.status_code
                    if (status == 200){
                        //todo 9 show data to recyclerview
                        wisataView.onSuccess(response.body()?.data)
                    }else{
                        Log.d("no data", "true")

                        wisataView.onError("No Data !")
                    }
                }


            }

        })
    }
}

2. WisataView

interface WisataView {

    fun onSuccess(data : List<Wisata>?)
    fun onError(msg : String)
}

7. Membuat Service

buatlah package baru, beri nama netwok didalamnya buat interface baru beri nama WisataService

interface WisataService {

    
    @GET("?action=findAll")
    fun getWisata():Call<ResponseWisata>

}

8. Memanggil Fungsi

Langkah terakhir yaitu kita perlu memanggil fungsi yang telah kita buat sebelumnya, buka class MainActivity

class MainActivity : AppCompatActivity(), WisataView {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val presenter = WisataPresenter(this)
        presenter.getData()

    }

    private fun showData(data: List<Wisata>?) {
        listWisata.adapter = WisataAdapter(data)
    }


    override fun onSuccess(data: List<Wisata>?) {
        showData(data)
    }

    override fun onError(msg: String) {

    }

}

9. Menjalankan Program

Langkah terakhir yaitu coba jalankan di emulator / di hape anda.

Terimakasih,