Thursday Code: Ambil Data Api Dengan Retrofit ( Part 2 )

Hallo semuanyaa..

Selamat datang pada serial Thursday Code. Serial ini rilis tiap hari kamis yang berisikan tentang tutorial atau pengetahuan tentang development Android dari beginner sampai advance. Kali ini Thurday Code akan membahas tentang Retrofit.

Artikel ini merupakan kelanjutan dari Thursday Code sebelumnya yang bisa kalian klik link dibawah ini.

Thursday Code : Ambil Data Api dengan Retrofit ( Part 1 )

Buatlah satu class untuk adapter RecyclerView kalian. Data yang kalian ambil adalah dari class Result jangan Movie. Karena class Movie tidak berisikan informasi film.

Isi dari adapter intinya sama hanya beda nama layout, tipe data dan set data dengan view kita. Untuk menset data seperti TextView seperti biasa tapi untuk set gambar dengan glide maka kalian bisa melihat kode dibawah.

Glide.with(context)
    .load("https://image.tmdb.org/t/p/w500/${data.poster_path}")
    .override(150, 150)
    .into(binding.imgPoster)

context sendiri diambil dari context activity dimana view akan ditampilkan. Salah satu caranya tambahkan parameter dengan tipe Context pada class adapter RecyclerView kita.

load digunakan untuk mengambil gambar bisa dari url atau lokal, tapi kita akan menggunakan url maka isikan parameter dengan link gambar yang sudah diberikan oleh Api.

overidde digunakan untuk mengganti ukuran gambar. Jika kalian menggunakan 2 parameter maka menggunakan width dan height. Jika satu maka menggunakan size, tapi kali ini tutorial menggunakan ukuran width dan height.

into digunakan menentukan ImageView mana yang akan dipasang gambar.

Jika kalian menyamakan kode anda dengan tutorial kali ini. Maka adapter akan menjadi seperti ini.

class MyAdapter(val context: Context, val clickListener : (Result) -> Unit) : RecyclerView.Adapter<MyAdapter.MovieViewHolder>() {
    var listData : List<Result> = mutableListOf()
        set(value) {
            field = value
            notifyDataSetChanged()
        }
    inner class MovieViewHolder(val binding: ItemMovieBinding) : RecyclerView.ViewHolder(binding.root){
        fun bind(data : Result){
            binding.root.setOnClickListener { clickListener(data) }
            binding.tvTitle.text = data.original_title
            binding.tvOverview.text = data.overview
            Glide.with(context)
                .load("https://image.tmdb.org/t/p/w500/${data.poster_path}")
                .override(150, 150)
                .into(binding.imgPoster)
        }
    }
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MovieViewHolder = MovieViewHolder(
        DataBindingUtil.inflate(LayoutInflater.from(parent.context), R.layout.item_movie, parent, false)
    )
    override fun getItemCount(): Int = listData.size
    override fun onBindViewHolder(holder: MovieViewHolder, position: Int) {
        holder.bind(listData[position])
    }
}

Diatas terdapat parameter sebagai berikut

val clickListener : (Result) -> Unit

Parameter tersebut digunakan untuk method OnClickListener pada kelas adapter kita. Result menjelaskan bahwa tipe data yang kita bawa adalah tipe data Result yaitu info movie kita. Sedangkan Unit sendiri menjelaskan bahwa variable tersebut merupakan fungsi bukan tipe data seperti pada umumnya. Atau bisa dibilang kita memasukkan suatu fungsi ke parameter agar fungsi itu bisa digunakan pada kelas yang dituju.

Setelah pindah ke Main Activity dan panggillah retrofit yang telah kita buat pada artikel sebelumnya dengan seperti dibawah ini.

BaseApi().services.getPopular("b63e4d8ae86a370699745b910ff01fad").enqueue(object : Callback<Movie>{
    override fun onFailure(call: Call<Movie>, t: Throwable) {
        Log.e("GetPopular Error", t.message.toString())
    }
    override fun onResponse(call: Call<Movie>, response: Response<Movie>) {
        if (response.isSuccessful){
            listData = response.body()?.results!!
            setupRvMovie(listData)
        }
    }
})

services merupakan variable yang telah kita buat di class penampung retrofit sebagai tempat interface server (Get, Post, Put, dll.). Setelah itu panggil fungsi yang telah kalian definisikan. Masukkan apikey pada parameter dan sesuaikan untuk code terakhir sampai Callback.

onFailure akan berjalan jika terjadi error dan onResponse akan berjalan jika ada respon dari server.

onResponse akan selalu berjalan walaupun respon yang dikembalikan adalah gagal baik berupa query yang salah atau yang lainnya. Jika kita ingin mengambil data yang benar maka berikan kondisi if responses.isSuccessful agar kita mengambil data saat respon berhasil.

Untuk mengambil data dari onResponse dengan cara response.body() setelah itu carilah data yang ingin kalian ambil. Strukturnya akan sama dengan kelas response yang telah kita buat yaitu Movie dan Result.

Karena kita ingin mengambil data list movie maka results yang kalian pilih.

Buatlah satu function untuk memunculkan Toast yang berisi judul film. Function ini akan digunakan oleh onClickListener yang telah didefinisikan di kelas adapter.

private fun onClick(data : Result){
    Toast.makeText(this, data.title, Toast.LENGTH_LONG).show()
}

Buatlah satu function untuk mensetup adapter RecyclerView kita.

private fun setupRvMovie(listData : List<Result>){
    binding.rvMovie.apply {
        this.adapter = MyAdapter(this@MainActivity){ result: Result -> onClick(result) }.apply { this.listData = listData }
        this.layoutManager = LinearLayoutManager(this@MainActivity)
    }
}

Cara memasukkan function dalam parameter dalam kotlin bisa kalian lihat diatas yaitu menggunakan kurung kurawal.

Dibawah merukapan seluruh hasil code di Main Activity

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    private var listData : List<Result> = mutableListOf()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        BaseApi().services.getPopular("b63e4d8ae86a370699745b910ff01fad").enqueue(object : Callback<Movie>{
            override fun onFailure(call: Call<Movie>, t: Throwable) {
                Log.e("GetPopular Error", t.message.toString())
            }

            override fun onResponse(call: Call<Movie>, response: Response<Movie>) {
                if (response.isSuccessful){
                    listData = response.body()?.results!!
                    setupRvMovie(listData)
                }
            }
        })
    }

    private fun setupRvMovie(listData : List<Result>){
        binding.rvMovie.apply {
            this.adapter = MyAdapter(this@MainActivity){ result: Result -> onClick(result) }.apply { this.listData = listData }
            this.layoutManager = LinearLayoutManager(this@MainActivity)
        }
    }

    private fun onClick(data : Result){
        Toast.makeText(this, data.title, Toast.LENGTH_LONG).show()
    }
}

Setelah itu coba kalian jalankan project yang kalian kerjakan selama 2 artikel Thursday Code ini. Semoga tidak ada yang error, jika terjadi error kalian bisa tuliskan errornya apa di kolom response pada artikel ini biar writer bisa bantu menjawab :-).

Untuk project yang berhasil bisa kalian lihat di link dibawah ini

chevalierlab-sas/ThursdayCode-Retrofit

Sekian dari Thurday Code kali ini dengan judul Ambil Data Api dengan Retrofit ( Part 2). Pantengin terus hari kamis pada Medium kami Chevalier Lab atau media sosial kami untuk update selanjutnya. Dan jangan lupa kritik dan saran buat Thurday Code agar semakin baik lagi. Sekian dari saya, Terima kasih.