Thursday Code : Ambil Data Api dengan Retrofit ( Part 1 )
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.
Apa itu Retrofit ?
Retrofit merupakan salah satu library android yang digunakan untuk mempermudah berinteraksi dengan server. Retrofit bisa menghandle request sederhana dari Rest Api sampai request Restful Api.
Retrofit tercipta karena untuk menghemat waktu dalam pembuatan aplikasi kita dan code dari Retrofit merupakan salah satu yang developer friendly atau mudah untuk dibaca oleh developer lain.
Implementasi
Kali ini kita akan membuat aplikasi yang menampilkan list film populer dengan api dari Movie DB.
Pertama, tambahkan library Data Binding terlebih dahulu. Jika kalian masih belum mengetahui Data Binding dan penggunaannya, kalian bisa membaca di serial Thursday Code kemarin.
Tambahkan library yang akan kita gunakan yaitu RecyclerView, Retrofit, Gson, OKHttp, Glide dan CardView pada gradle module. Glide merupakan library untuk memanajemen gambar seperti pengambilan gambar dari internet, loading saat gambar disetup, set gambar ke ImageView, atau manajemen dalam proses menampilkan gambar. Dokumentasi Glide kalian bisa membaca disini.
Gson merupakan library untuk mencovert data string json ke menjadi object Java atau Kotlin. Dokumentasi Gson bisa kalian dibaca disini.
OKHttp merupakan library untuk menghandle jaringan saat kita melakukan komunikasi dengan server. Dokumentasi OKHttp bisa kalian baca disini.
Dan CardView merupakan library untuk membuat card layout pada tampilan Android.
Untuk RecyclerView sendiri bisa kalian baca di artikel Thursday Code sebelumnya.
dependencies { //library untuk Glide
implementation 'com.github.bumptech.glide:glide:4.11.0'
kapt 'com.github.bumptech.glide:compiler:4.11.0' // library untuk CardView
implementation 'com.android.support:cardview-v7:28.0.0' // Retrofit
implementation 'com.squareup.retrofit2:retrofit:2.7.1'
implementation 'com.squareup.retrofit2:converter-gson:2.6.1'
implementation 'com.jakewharton.retrofit:retrofit2-kotlin- coroutines-adapter:0.9.2'
implementation 'com.squareup.okhttp3:okhttp:3.14.4'
implementation 'com.squareup.okhttp3:logging-interceptor:3.10.0'
// Gson
implementation 'com.google.code.gson:gson:2.8.6'
}
Setelah itu sync ulang dan tunggu hingga selesai. Jika terjadi error maka cek penulisan pada gradle kalian atau cek koneksi internet kalian apakah terhubung atau tidak.
Tambahkan satu buah layout sebagai layout item RecyclerView kita. Layout ini terdiri dari satu ImageView dan 2 TextView sebagai judul dan overview.
Perlu diperhatikan adalah didalam CardView kalian harus menambahkan satu layout ( Linear, Relative atau Constraint ) karena CardView hanya sebagai container item yang dimasukkan ke layout card.
Masukkan ke tag layout agar data binding berjalan.
Selesainya akan seperti ini atau kalian bisa berkreasi sendiri untuk layoutingnya.
Jika kalian ingin meniru seperti contoh yang diatas kalian bisa copy kodenya dibawah ini dengan nama layout item_movie.xml.
<?xml version="1.0" encoding="utf-8"?>
<layout
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android">
<androidx.cardview.widget.CardView
android:layout_width="match_parent" android:layout_height="wrap_content"
android:layout_margin="8dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp">
<ImageView
android:id="@+id/img_poster"
android:layout_width="150dp"
android:layout_height="150dp"/>
<TextView
android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Judul Movie"
android:textAppearance="@style/TextAppearance.AppCompat.Medium"
android:layout_toEndOf="@id/img_poster"
android:layout_marginStart="8dp"
android:maxLines="2"
android:ellipsize="end"/>
<TextView
android:id="@+id/tv_overview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="@tools:sample/lorem/random"
android:layout_toEndOf="@id/img_poster"
android:layout_below="@id/tv_title"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:maxLines="6"
android:ellipsize="end"/>
</RelativeLayout>
</androidx.cardview.widget.CardView>
</layout>Edit main_activity.xml menjadi seperti ini.
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_movie"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:listitem="@layout/item_movie"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>Untuk alamat server kita kali ini sudah saya sediakan beserta api key nya. Untuk alamat server utama kita adalah “https://api.themoviedb.org/3/”. Dan kita mencari film populer dengan path “movie/popular” dengan method Get. Dan api key nya adalah “b63e4d8ae86a370699745b910ff01fad”.
Sekarang tambahkan class dengan nama Movie dan Result.
data class Movie(
val page: Int?,
val results: List<Result>?,
val total_pages: Int?,
val total_results: Int?
)data class Movie(
val page: Int?,
val results: List<Result>?,
val total_pages: Int?,
val total_results: Int?
)Kedua class tersebut digunakan tempat hasil converter json kita tadi. Jika kalian menggunakan java kalian bisa mengenerate class yang dibutuhkan oleh converter secara otomatis dengan mengunjungi jsonschema2pojo.
Sedangkan jika kalian menggunakan bahasa kotlin maka kalian bisa mengenerate otomatis dengan tambahan plugin android studio yang bernama Json to Kotlin Class.
Untuk pembahasan Converter Json ke Kotlin atau Java akan dibahas di artikel Thursday Code lain hari karena pembahasan terbilang cukup panjang, jadi kali ini kalian ikuti yang diatas saja dulu.
Tambahkan interface sebagai deklarasi fungsi Retrofit kita.
interface Service {
@GET("movie/popular")
fun getPopular(@Query("api_key") apiKey: String) : Call<Movie>
}Dari interface, kita mendeklarasikan apa saja yang bisa dihandle oleh server kita. Contoh kali kita akan mengambil film populer dari Movie DB, maka buatlah satu fungsi dengan mencermin tugas dari function tersebut. Berilah anotasi sesuai server seperti Get, Put, Delete, Post, atau lain — lainya.
Dalam anotasi, definisikan path untuk merequest film populer. Sedangkan dalam parameter function kita, terdapat anotasi Query yang berfungsi untuk memberikan param pada link dengan nama api_key. Jika dicontohkan pada web, param adalah parameter yang tercantum pada link yang terletak habis path dan tanda tanya.
https://api.themoviedb.org/3/movie/popular?api_key=b63e4d8ae86a370699745b910ff01fad
Sekarang tambahkan satu class untuk inisiator Retrofit kita.
class BaseApi : Application(){
private val client = OkHttpClient().newBuilder()
.addInterceptor(HttpLoggingInterceptor().apply {
level = if (BuildConfig.DEBUG) HttpLoggingInterceptor.Level.BODY
else HttpLoggingInterceptor.Level.NONE
})
.readTimeout(30, TimeUnit.SECONDS)
.writeTimeout(30, TimeUnit.SECONDS)
.build()
private val retrofit = Retrofit.Builder()
.baseUrl("https://api.themoviedb.org/3/")
.client(client)
.addConverterFactory(GsonConverterFactory.create())
.build()
val services = retrofit.create(Service::class.java)
}Variable client merupakan setup OKHttp kita untuk Retrofit yang akan kita pakai. Kode client tersebut berfungsi untuk log terhadap aktivitas Retrofit kita agar memudahkan dalam mendeteksi masalah atau error.
Variable retrofit merupakan builder dari Retrofit. BaseUrl adalah alamat utama / home dari server kita. addConverterFactory digunakan untuk menambahkan converter json ke kotlin maupun java.
Dan cukup sampai disini saja artikel kali ini karena pembahasannya yang terbilang panjang. Jika langsung digabungkan takutnya kalian benci ngoding android :-)
Untuk part 2 insyaallah akan rilis kamis depan jika sempat karena writer sedang melaksanakan Kerja Praktek yang berangkat jam 6 pulang jam 6.
Sedih kali hidup saya
Sekian dari Thurday Code kali ini dengan judul Ambil Data Api dengan Retrofit ( Part 1 ). 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.
