Menggunakan Retrofit dan MVVM Architecture dengan kotlin — Bagian 1

Hallo semuanyaa..

Pada bagian ini kita bakal belajar tentang cara menggunakan salah satu library REST client untuk android yang bernama Retrofit, dan juga kita bakal menggunakan MVVM Architecture dalam pembelajaran ini. Jadi langsung aja kita mulai yahh!

Sebelum mengikuti tutorial ini, temen-temen bisa belajar dulu cara pembuatan Recyclerview dengan kotlin :

Membuat Recyclerview dengan onclick listener menggunakan kotlin

karena tutorial Menggunakan Retrofit dan MVVM Architecture dengan kotlin ini merupakan lanjutan dari tutorial diatas. Source code tutorial diatas bisa temen-temen dapatkan di sini :

azmirizkifar20/Belajar-Recyclerview

Langsung aja kita masuk ke tahap pertama, temen-temen bisa menambahkan dependency Retrofit, Glide, dan Coroutine terlebih dahulu

// Retrofit
implementation 'com.squareup.retrofit2:retrofit:2.6.0'
implementation 'com.squareup.moshi:moshi-kotlin:1.9.2'
implementation 'com.squareup.retrofit2:converter-moshi:2.6.0'

// Glide
implementation "com.github.bumptech.glide:glide:4.10.0"
annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'
// kotlinx-coroutines
implementation "org.jetbrains.kotlinx:kotlinx-coroutines-core:1.3.4"
implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:1.3.0"
// ViewModel
implementation "android.arch.lifecycle:extensions:1.1.1"

Glide sendiri merupakan salah satu library di android yang berfungsi untuk menampilkan gambar yang sumbernya berasal dari internet.
Coroutine merupakan salah satu library untuk menangani proses asynchronous

Jika sudah menambahkan dependency tersebut, temen-temen bisa lakukan sinkronisasi gradle. Kemudian buka file Negara.kt yang berisi Pojo class negara dan tambahkan data baru :

data class Negara (
    val namaNegara: String,
    val ibuKota: String,
    val jumlahPenduduk: String,
    val mataUang: String,
    val gambar: String
)

Lalu buat file kotlin dan beri nama ApiService.kt, lalu kita tambahkan kode untuk konfigurasi API nya

const val BASE_URL = "https://us-central1-rizkifar-project.cloudfunctions.net/api/"

val moshi = Moshi.Builder()
    .add(KotlinJsonAdapterFactory())
    .build()

private val retrofit = Retrofit.Builder()
    .addConverterFactory(MoshiConverterFactory.create(moshi))
    .baseUrl(BASE_URL)
    .build()

// API Data
interface ApiService {
    @GET("countries")
    suspend fun showList(): List<Negara>
}

object ApiNegara {
    val retrofitService = retrofit.create(ApiService::class.java)
}

Dalam kasus tutorial ini saya menggunakan API yang sebelumnya saya buat dan temen-temen bisa gunakan juga API tersebut. dan untuk response API nya sendiri kurang lebih seperti ini :

Link API : https://us-central1-rizkifar-project.cloudfunctions.net/api/countries

Lalu buat file kotlin dan beri nama NegaraViewModel.kt, lalu buat class NegaraViewModel dengan extend ke class ViewModel

class NegaraViewModel : ViewModel() {

}

Kemudian kita buat variabel untuk menampung data yang di ambil dari server dan response ke dalam class NegaraViewModel

private val _data = MutableLiveData<List<Negara>>()
val data : LiveData<List<Negara>>
    get() = _data

private val _response = MutableLiveData<String>()
val response : LiveData<String>
    get() = _response

Note :
Disini saya membuat variabel Mutable karena nantinya variabel ini akan kita tambahkan data ke dalamnya dan supaya kita bisa melakukan perubahan data pada variabelnya.
Dan juga saya membuat variabel Immutable karena nantinya variabel ini yang akan di observe di activity/fragment agar tidak ada perubahan atau penambahan data pada variabelnya.

Lalu kita buat Job dan CoroutineScope untuk menangani proses asynchronous

private var job = Job()
private val uiScope = CoroutineScope(job + Dispatchers.Main)

Kemudian kita buat function untuk inisialisasi data, dimana fungsi ini digunakan untuk mendapatkan data dari server lalu dimasukkan ke dalam variabel Mutable yang bernama _data dan untuk mendapatkan response apakah proses berhasil atau gagal.

Lalu masukkan fungsi tersebut kedalam scope init {} agar ketika aplikasi dijalankan, maka fungsi initData() langsung dijalankan tanpa menunggu perintah apapun.

init {
    _response.value = ""
    initData()
}
fun initData() {
    uiScope.launch {
        try {
            val result = ApiNegara.retrofitService.showList()

            if (result.isNotEmpty()) {
                _data.value = result
                _response.value = "Berhasil fetch data!"
            } else {
                _response.value = "Data negara kosong!"
            }
        } catch (t: Throwable){
            _response.value = "Tidak ada koneksi internet!"
        }
    }
}

Lalu kita override fungsi onCleared() untuk membersihkan resource/data yang kita ambil untuk membebaskan memori sistem

override fun onCleared() {
    super.onCleared()
    job.cancel()
}

Ketika digabungkan akan menjadi seperti ini

NegaraViewModel.kt

Setelah selesai dengan viewmodel, selanjutnya kita buat variabel viewModel di dalam class MainActivity

class MainActivity : AppCompatActivity(), RecyclerViewClickListener {

    // inisialisasi binding dan viewmodel
    private lateinit var binding: ActivityMainBinding
    private lateinit var viewModel: NegaraViewModel
  
    ...
}

Lalu pada method onCreate() kita inisialisasi viewModel dan kita lakukan observe pada variabel data yang sebelumnya kita buat di NegaraViewModel dan masukkan hasil observe tersebut kedalam adapter yang sebelumnya kita buat.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = DataBindingUtil.setContentView(this, 
        R.layout.activity_main)
    viewModel = ViewModelProviders.of(this)
        .get(NegaraViewModel::class.java)

    viewModel.data.observe({ lifecycle }, {
        val negaraAdapter = NegaraAdapter(it)
        val recyclerView = binding.rvNegara

        // set click listener
        negaraAdapter.listener = this

        recyclerView.apply {
            this.adapter = negaraAdapter
            this.layoutManager = 
                LinearLayoutManager(this@MainActivity)
        }
    })

}

Setelah itu kita observe variabel response yang sudah kita buat di viewmodel untuk memberikan hasil response dari pengambilan data di server

override fun onCreate(savedInstanceState: Bundle?) {
    ...
    viewModel.response.observe({ lifecycle }, {
        if (it.isNotEmpty()) {
            Toast.makeText(this, it, Toast.LENGTH_SHORT).show()
        }
    })

}

Jika sudah semuanya, isi MainActivity menjadi seperti ini

MainActivity.kt

Setelah ini kita berikan permission pada AndroidManifest.xml untuk perizinan koneksi internet

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="org.d3if4055.belajarrecyclerview">
    
    <uses-permission 
        android:name="android.permission.INTERNET" />
    <uses-permission 
        android:name="android.permission.ACCESS_NETWORK_STATE" />
    
    ...

</manifest>

Apabila sudah semua, silahkan coba jalankan projectnya. nanti hasilnya kurang lebih seperti ini

Setelah ini kita lanjut ke bagian click listenernya, yang nantinya jika salah satu item di klik akan menampilkan detail negara tersebut.

Untuk bagian selanjutnya temen-temen bisa lanjut ke tutorial bagian ini yaa

Menggunakan Retrofit dan MVVM Architecture dengan kotlin — Bagian 2