Android Reactive Programming (Part 2)

Pada artikel sebelumnya, Saya telah menjelaskan konsep dasar dalam pemrograman berbasis reactive menggunakan salah satu library yang cukup populer saat ini, yaitu ReactiveX.

Dan pada kesempatan kali ini, Saya akan coba melanjutkan implementasi dari reactive programming tersebut dengan mencoba melakukan calling REST API menggunakan Retrofit dan ReactiveX…

Pertama-tama, mari kita siapkan bahan-bahannya ya :)

dependencies {
    compile 'io.reactivex:rxandroid:1.2.1'
    compile 'io.reactivex:rxjava:1.2.4'
    compile 'com.squareup.retrofit2:retrofit:2.1.0'
    compile 'com.squareup.retrofit2:converter-jackson:2.1.0'
    compile 'com.squareup.retrofit2:adapter-rxjava:2.1.0'
    compile 'com.squareup.okhttp3:okhttp:3.5.0'
    compile 'com.squareup.okhttp3:logging-interceptor:3.5.0'
}

Jangan lupa untuk menambahkan Internet Permission, karena kita akan menggunakan protokol http untuk melakukan komunikasi ke API…

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

Adapun API yang Saya gunakan pada artikel kali ini memanfaatkan salah satu API public dengan endpoint http://ibacor.com/api#bcr-jadwal-bioskop

Untuk konfigurasi dari OkHttp dan Retrofit pada umumnya, pembaca dapat melihat langsung dalam dokumentasi library tersebut… yang perlu kita tambahkan adalah beberapa baris kode saja agar ReactiveX dapat mengenali Network Adapter yang digunakan, dalam hal ini yaitu Retrofit Adapter.

public Api getApi() {
    final Retrofit retrofit = new Retrofit.Builder().client(getOkHttpClient()).baseUrl(Constants.Api.BASE_URL).addCallAdapterFactory(RxJavaCallAdapterFactory.create()).addConverterFactory(JacksonConverterFactory.create()).build();

    return retrofit.create(Api.class);
}

Untuk JSON Converter di sini Saya coba menggunakan library Jackson… dan untuk implementasi dari converter tersebut adalah sebagai berikut:

@JsonIgnoreProperties(ignoreUnknown = true)
public class JadwalBioskop {

    @JsonProperty(value = "data")
    public List<Data> data;

    @JsonIgnoreProperties(ignoreUnknown = true)
    public static class Data {

        @JsonProperty(value = "id")
        public String id;

        @JsonProperty(value = "kota")
        public String kota;
    }
}

Setelah kita menambahkan model data dari API kita, maka kita wajib untuk registrasi API tersebut pada interface retrofit, dan pada interface ini juga kita coba melakukan implementasi terhadap ReactiveX…

public interface Api {

    @GET(Constants.Api.JADWAL_BIOSKOP)
    Observable<Response<JadwalBioskop>> jadwalBioskop(@Query("k") String key);
}

Nah, untuk proses implementasi boilerplate antara Retrofit dan ReactiveX sudah selesai. sekarang kita coba masuk ke tahap implementasi dari sisi View ya :)

Pertama, tentu saja kita buatkan terlebih dahulu layout nya…

<?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:targetApi="LOLLIPOP">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_rest"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="@color/colorAccent"
        android:elevation="4dp"
        app:theme="@style/AppTheme.Toolbar" />

    <ProgressBar
        android:id="@+id/pb_rest"
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:visibility="gone" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_rest"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar_rest"
        android:scrollbars="vertical" />

    <FrameLayout
        android:id="@+id/fl_rest"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar_rest"
        android:visibility="gone" />
</RelativeLayout>

Setelah itu baru kita tambahkan implementasi dari java class nya…

public class RestActivity extends AppCompatActivity {
    Subscription subscription;
    RecyclerView recyclerView;

    @Override
    protected void onCreate(@Nullable final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_rest);
        loadCity();
    }

    @Override
    protected void onDestroy() {
        if (null != subscription && !subscription.isUnsubscribed()){
            subscription.unsubscribe();
        }

        super.onDestroy();
    }

    private void loadCity() {
        subscription = Connections.get().getApi().jadwalBioskop(Constants.KEY).observeOn(AndroidSchedulers.mainThread()).subscribeOn(Schedulers.io()).subscribe(new Observer<Response<JadwalBioskop>>() {
            @Override
            public void onCompleted() {
            }

            @Override
            public void onError(final Throwable e) {
                e.printStackTrace();
            }

            @Override
            public void onNext(final Response<JadwalBioskop> response) {
                final List<JadwalBioskop.Data> data = response.body().data;
                final RestAdapter adapter = new RestAdapter(data, listener);
                final LinearLayoutManager linearLayoutManager = new LinearLayoutManager(RestActivity.this);

                recyclerView = (RecyclerView) findViewById(R.id.rv_rest);
                recyclerView.setLayoutManager(linearLayoutManager);
                recyclerView.smoothScrollToPosition(recyclerView.getBottom());
                recyclerView.setAdapter(adapter);
            }
        });
    }

Pada class di atas, Observer untuk melakukan call ke API dipanggil ketika aplikasi atau UI di create (onCreate) …

Apakah cukup mudah diimplementasikan ? Jika masih mengalami kesulitan, silahkan di lihat pada sample berikut ini

[UPDATE] Setelah sekian lama menunggu, akhirnya Saya bisa melanjutkan tulisan yang sempat tertunda hampir 1 tahun (lama juga ya #lol). Baiklah, kali ini Saya akan membahas sedikit saja tentang RxJava2. Silahkan klik pada tautan berikut