Cara Implementasi Sederhana Retrofit dan RxJava di Android Studio + Source Code

kali ini Rival akan membahas mengenai Implementasi Sederhana Retrofit dan RxJava. Seperti banyak yang kita ketahui, Library retrofit ini untuk menangani kasus disaat kamu request url API dan Library RxJava bertujuan untuk melakukan proses asynchronous pada sebuah program dengan kosep observables sequence. Untuk contoh implementasi pada tutorial ini kita akan menggabungkan 2 library yang sudah saya sebutkan, dan untuk APInya kita akan menggunakan API dari layanan Github.

Cara Implementasi Sederhana Retrofit dan RxJava Android Studio

Penjelasan singkat tentang apa sih itu RxJava, RxAndroid itu apa? Kalau dikutip saka kaca resmi iku: RxJava minangka implementasine VM Java Reactive Extensions: perpustakaan kanggo nyusun program asynchronous lan acara-acara kanthi nggunakake urutan sing bisa ditemokake.

Iku ngluwihi pola pangamat kanggo ndhukung urutan data / acara lan nambah operator sing ngidini sampeyan nyipta urutan bebarengan declaratively nalika abstracting langsung uneg-uneg babagan kaya threading tingkat rendah, sinkronisasi, thread-safety lan data bebarengan data.

Persiapan Implementasi Retrofit dan RxJava Android

Kita akan menggunakan API dari Github : https://api.github.com/users/farizdotid/repos
Buat project dengan nama SampleRetrofitRx
Aplikasi postman
Plugin RoboPojoGenerator sudah terinstall di Android Studio kamu.

Eksekusi Implementasi Retrofit dan RxJava

Pertama,

Buka file build.gradle ( Module:app ) lalu tambahahkan library-library berikut :

implementation 'com.android.support:support-vector-drawable:27.1.1'
implementation 'com.android.support:support-v4:27.1.1'
implementation 'com.android.support:cardview-v7:27.1.1'
implementation 'com.android.support:recyclerview-v7:27.1.1'

implementation 'com.squareup.retrofit2:retrofit:2.3.0'
implementation 'com.squareup.retrofit2:converter-gson:2.3.0'
implementation 'com.squareup.okhttp3:logging-interceptor:3.9.0'

implementation 'io.reactivex.rxjava2:rxandroid:2.0.1'
implementation 'io.reactivex.rxjava2:rxjava:2.1.6'
implementation 'com.squareup.retrofit2:adapter-rxjava2:2.3.0'

implementation 'com.jakewharton:butterknife:8.8.1'
annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'

Untuk full source code di build.gradle ( Module:app ) seperti ini :

apply plugin: 'com.android.application'

android {

compileSdkVersion 27

defaultConfig {

applicationId "com.farizdotid.sampleretrofitrx"

minSdkVersion 19

targetSdkVersion 27

versionCode 1

versionName "1.0"

testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"

vectorDrawables.useSupportLibrary = true

}

buildTypes {

release {

minifyEnabled false

proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

}

dependencies {

implementation fileTree(dir: 'libs', include: ['*.jar'])

implementation 'com.android.support:appcompat-v7:27.1.1'

implementation 'com.android.support.constraint:constraint-layout:1.1.2'

implementation 'com.android.support:design:27.1.1'

implementation 'com.android.support:support-vector-drawable:27.1.1'

implementation 'com.android.support:support-v4:27.1.1'

implementation 'com.android.support:cardview-v7:27.1.1'

implementation 'com.android.support:recyclerview-v7:27.1.1'

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

implementation 'com.squareup.retrofit2:converter-gson:2.3.0'

implementation 'com.squareup.okhttp3:logging-interceptor:3.9.0'

implementation 'io.reactivex.rxjava2:rxandroid:2.0.1'

implementation 'io.reactivex.rxjava2:rxjava:2.1.6'

implementation 'com.squareup.retrofit2:adapter-rxjava2:2.3.0'

implementation 'com.jakewharton:butterknife:8.8.1'

annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'

testImplementation 'junit:junit:4.12'

androidTestImplementation 'com.android.support.test:runner:1.0.2'

androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

}

Kedua,

Buka file AndroidManifest.xml lalu tambahkan permission untuk Internet, karena pada tutorial implementasi retrofit dan rxjava ini kita akan berurusan dengan internet. Tambahkan kode berikut :

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

Ketiga,

Buatlah struktur directory package seperti ini :

Directory package apiservice : untuk menampung class class yang berhubungan dengan network / ngehit API.

Directory package model : untuk menampung class class yang kita butuhkan keperluan data.

Keempat,

Buatlah class baru dengan nama RetrofitClient pada directory package apiservice seperti dibawah ini

private static Retrofit retrofit = null;
public static Retrofit getClient(String baseUrl){
HttpLoggingInterceptor interceptor = new HttpLoggingInterceptor();
interceptor.setLevel(HttpLoggingInterceptor.Level.BODY);
OkHttpClient client = new OkHttpClient
.Builder()
.addInterceptor(interceptor)
.readTimeout(10, TimeUnit.SECONDS)
.connectTimeout(30, TimeUnit.SECONDS)
.build();
if (retrofit == null){
retrofit = new Retrofit.Builder()
.baseUrl(baseUrl)
.addConverterFactory(GsonConverterFactory.create())
.addCallAdapterFactory(RxJava2CallAdapterFactory.create())
.client(client)
.build();
}
return retrofit;
}

Kelima,

Buatlah interface baru dengan nama BaseApiService pada directory package apiservice buat seperti dibawah ini:

/*
Fungsi @Path disini adalah untuk mengisi value yang sudah kita set.
Contoh : {username} disini nantinya akan diisi dengan kebutuhan yang disesuaikan.
Observable disini ialah dari RxJava. Karena pada contoh disini kita akan menggabungkan
Retrofit dengan RxJava.
*/
@GET("users/{username}/repos")
Observable<List<ResponseRepos>> requestRepos(@Path("username") String username);

Keenam,

Buatlah class baru dengan nama UtilsApi pada directory package apiservice lalu buatlah seperti dibawah ini.

Ketujuh,

Buka url API berikut di browser ataupun aplikasi postman : https://api.github.com/users/farizdotid/repos dan hasil dari API berikut berupa format Json. Copy hasil dari hit API tersebut lalu klik kanan pada directory package model ➝ New ➝ Generate POJO from JSON ➝ Paste hasil dari hit API ➝ ok.

Cara Implementasi Sederhana Retrofit dan RxJava Android Studio lengkap dengan Source Code

Pastikan kamu memilih GSON dan jangan lupa untuk memberi nama file tersebut. Contoh disini saya memberikan nama dengan ResponseRepos. Kegunaan plugin tersebut pada saat kita generate plugin akan otomatis membuat file sesuai dengan hasil json yang sudah kita paste.

Kedelapan,

Buat layout baru dengan nama item_repo. Caranya dengan res ➝ layout ➝ klik kanan pada directory layout ➝ new. Untuk kode layout tersebut adalah sebagai berikut :

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
app:contentPadding="8dp"
app:cardCornerRadius="4dp"
android:layout_marginBottom="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="Nama Repo"
android:textSize="16sp"
android:textColor="@color/primary_text"/>
<TextView
android:id="@+id/tvDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
tools:text="Desc Repo"
android:textSize="14sp"
android:textColor="@color/secondary_text"/>
</LinearLayout>
</android.support.v7.widget.CardView>

Layout item_repo ini berfungsi untuk tampilan pada list RecyclerView. Jadi sebelum membuat adapter untuk RecyclerView alangkah lebih baiknya kita membuat layout itemnya terlebih dahulu.

Kesembilan,

Buat class dengan nama ReposAdapter. Lalu isi dengan kode berikut :

public class ReposAdapter extends
RecyclerView.Adapter<ReposAdapter.ViewHolder> {
private static final String TAG = ReposAdapter.class.getSimpleName();
private Context context;
private List<Repo> list;
private AdapterCallback mAdapterCallback;
public ReposAdapter(Context context, List<Repo> list, AdapterCallback adapterCallback) {
this.context = context;
this.list = list;
this.mAdapterCallback = adapterCallback;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_repo,
parent, false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
Repo item = list.get(position);

String name = item.getName();
String description = item.getDescription();
holder.tvName.setText(name);
holder.tvDesc.setText(description);
}
@Override
public int getItemCount() {
return list.size();
}
public void clear() {
int size = this.list.size();
this.list.clear();
notifyItemRangeRemoved(0, size);
}
public class ViewHolder extends RecyclerView.ViewHolder {
@BindView(R.id.tvName)
TextView tvName;
@BindView(R.id.tvDesc)
TextView tvDesc;
public ViewHolder(View itemView) {
super(itemView);
ButterKnife.bind(this, itemView);
}
}
public interface AdapterCallback {
void onRowClicked(int position);
}
}

Kesepuluh,

Buka file activity_main.xml lalu tambahkan komponen seperti ini :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
android:focusable="true"
android:focusableInTouchMode="true"
tools:context=".MainActivity">
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginTop="16dp"
app:srcCompat="@drawable/ic_github"
android:layout_gravity="center"
tools:ignore="ContentDescription" />
<EditText
android:id="@+id/etUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:fontFamily="sans-serif-light"
android:textColor="@color/primary_text"
android:textColorHint="@color/primary_text"
android:inputType="text"
android:imeOptions="actionSearch"
android:hint="@string/username_github"/>
<ProgressBar
android:id="@+id/pbLoading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:visibility="gone"
android:layout_gravity="center"/>
<android.support.v7.widget.RecyclerView
android:id="@+id/rvRepos"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"/>
</LinearLayout>

Jika ada yang error pada bagian @drawable/ic_github kalian bisa menambahkan terlebih dahulu file drawablenya dengan cara res ➝ drawable ➝ klik kanan pada package drawable ➝ new ➝ Drawable Resource File ➝ buat dengan nama ic_github ➝ OK. Isi dengan kode berikut :

<vektor xmlns: android = "http://schemas.android.com/apk/res/android"
android: width = "24dp"
Android: dhuwur = "24dp"
Android: viewportWidth = "24"
Android: viewportHeight = "24">
<path
Android: fillColor = "# FF000000"
android: pathData = "M12,0.297c-6.63,0 -12,5.373 -12,12 0,5.303 3.438,9.8 8.205,11.385 0.6,0.113 0.82, -0.258 0.82, -0.577 0, -0.285 -0.01, -1.04 -0.015, -2.04 -3.338,0.724 -4.042, -1.61 -4.042, -1.61C4.422,18.07 3.633,17.7 3.633,17.7c-1.087, -0.744 0.084, -0.729 0.084, -0.729 1.205,0.084 1.838,1.236 1.838,1.236 1.07,1.835 2.809,1.305 3.495,0.998 0.108, -0.776 0.417, -1.305 0.76, -1.605 -2.665, -0.3 -5.466, -1.332 -5.466, -5.93 0, -1.31 0.465, -2.38 1.235, - 3.22 -0.135, -0.303 -0.54, -1.523 0.105, -3.176 0,0 1.005, -0.322 3.3,1.23 0.96, -0.267 1.98, -0.399 3, -0.405 1.02.0.006 2.04,0.138 3,0.405 2.28, -1.552 3.285, -1.23 3.285, -1.23 0.645,1.653 0.24,2.873 0.12,3.176 0.765,0.84 1.23,1.91 1.23,3.22 0,4.61 -2.805,5.625 -5.475,5.92 0.42,0.36 0.81,1.096 0.81,2.22 0,1.606 - 0.015,2.896 -0.015,3.286 0,0.315 0.21,0.69 0.825,0.57C20.565,22.092 24,17.592 24,12.297c0, -6.627 -5.373, -12 -12, -12 "/>
</ vector>

Kesebelas,

Buka MainActivity.java lalu inisialisasi komponen-komponen yang sudah kamu buat terlebih dahulu.

@BindView(R.id.pbLoading)
ProgressBar pbLoading;
@BindView(R.id.rvRepos)
RecyclerView rvRepos;
@BindView(R.id.etUsername)
EditText etUsername;

Lalu inisialisasi file-file pembantu seperti BaseApiService dan ReposAdapter.

BaseApiService mApiService;
ReposAdapter mRepoAdapter;

Pada method onCreate isi dengan kode berikut :

ButterKnife.bind(this);
mApiService = UtilsApi.getAPIService();
/*
inisialisasi adapter dan recyclerview
*/
mRepoAdapter = new ReposAdapter(this, repoList, null);
rvRepos.setLayoutManager(new LinearLayoutManager(this));
rvRepos.setItemAnimator(new DefaultItemAnimator());
rvRepos.setHasFixedSize(true);
rvRepos.setAdapter(mRepoAdapter);
etUsername.setOnEditorActionListener(new TextView.OnEditorActionListener() {
@Override
public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
/*
EditorInfo.IME_ACTION_SEARCH ini berfungsi untuk men-set keyboard kamu
agar enter di keyboard menjadi search.
*/
if (actionId == EditorInfo.IME_ACTION_SEARCH) {
String username = etUsername.getText().toString();
requestRepos(username);
return true;
}
return false;
}
});

Jika ada error pada bagian requestRepos(username); biarkan saja karena kamu belum membuat fungsi tersebut.

Keduabelas,

Buatlah sebuah fungsi dengan nama requestRepos dan tambahkan fungsi tersebut dengan parameter String username. Untuk kodenya seperti berikut :

private void requestRepos(String username) {
pbLoading.setVisibility(View.VISIBLE);

mApiService.requestRepos(username)
.subscribeOn(Schedulers.io())
.observeOn(AndroidSchedulers.mainThread())
.subscribe(new Observer<List<ResponseRepos>>() {
@Override
public void onSubscribe(Disposable d) {

}

@Override
public void onNext(List<ResponseRepos> responseRepos) {
/*
onNext disini ketika data sudah masuk dan biasanya kita memasukan data API
ke lokal ataupun sesuai kebutuhan kamu. Di contoh ini data dari API Server dimasukan
dalam List repoList.
*/
for (int i = 0; i < responseRepos.size(); i++) {
String name = responseRepos.get(i).getName();
String description = responseRepos.get(i).getDescription();

repoList.add(new Repo(name, description));
}
}

@Override
public void onError(Throwable e) {
Toast.makeText(MainActivity.this, e.getMessage(), Toast.LENGTH_SHORT).show();
}

@Override
public void onComplete() {
pbLoading.setVisibility(View.GONE);
Toast.makeText(MainActivity.this, "Berhasil mengambil data", Toast.LENGTH_SHORT).show();

mRepoAdapter = new ReposAdapter(MainActivity.this, repoList, null);
rvRepos.setAdapter(mRepoAdapter);
mRepoAdapter.notifyDataSetChanged();
}
});
}

Kegunaan fungsi tersebut adalah untuk meng-request hit ke API yang sudah kita persiapkan dan hasil data dari request hit tersebut kita olah menggunakan RxJava. Parameter username disini untuk kebutuhan user input username githubnya karena pada contoh implementasi retrofit dan rxjava disini url API kita set dynamic yang artinya berubah-ubah.

Untuk full source code di MainActivity.java adalah sebagai berikut :

public class MainActivity extends AppCompatActivity {
/*
inisialisasi komponen komponen yang sudah kita buat di layout activity_main.xml
*/
@BindView(R.id.pbLoading)
ProgressBar pbLoading;
@BindView(R.id.rvRepos)
RecyclerView rvRepos;
@BindView(R.id.etUsername)
EditText etUsername;
/*
inisialisasi file pembantu yang sudah kita buat.
BaseApiService : untuk persoalan request API
ReposAdapter : untuk kebutuhan adapter RecyclerView
*/
BaseApiService mApiService;
ReposAdapter mRepoAdapter;
List<Repo> repoList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
mApiService = UtilsApi.getAPIService();
/*
inisialisasi adapter dan recyclerview
*/
mRepoAdapter = new ReposAdapter(this, repoList, null);
rvRepos.setLayoutManager(new LinearLayoutManager(this));
rvRepos.setItemAnimator(new DefaultItemAnimator());
rvRepos.setHasFixedSize(true);
rvRepos.setAdapter(mRepoAdapter);
etUsername.setOnEditorActionListener(new TextView.OnEditorActionListener() {
@Override
public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
/*
EditorInfo.IME_ACTION_SEARCH ini berfungsi untuk men-set keyboard kamu
agar enter di keyboard menjadi search.
*/
if (actionId == EditorInfo.IME_ACTION_SEARCH) {
String username = etUsername.getText().toString();
requestRepos(username);
return true;
}
return false;
}
});
}
/*
Fungsi untuk berkomunikasi dengan API Server menggunakan library Retrofit dan RxJava.
*/
private void requestRepos(String username) {
pbLoading.setVisibility(View.VISIBLE);
mApiService.requestRepos(username)
.subscribeOn(Schedulers.io())
.observeOn(AndroidSchedulers.mainThread())
.subscribe(new Observer<List<ResponseRepos>>() {
@Override
public void onSubscribe(Disposable d) {
}
@Override
public void onNext(List<ResponseRepos> responseRepos) {
/*
onNext disini ketika data sudah masuk dan biasanya kita memasukan data API
ke lokal ataupun sesuai kebutuhan kamu. Di contoh ini data dari API Server dimasukan
dalam List repoList.
*/
for (int i = 0; i < responseRepos.size(); i++) {
String name = responseRepos.get(i).getName();
String description = responseRepos.get(i).getDescription();
repoList.add(new Repo(name, description));
}
}
@Override
public void onError(Throwable e) {
Toast.makeText(MainActivity.this, e.getMessage(), Toast.LENGTH_SHORT).show();
}
@Override
public void onComplete() {
pbLoading.setVisibility(View.GONE);
Toast.makeText(MainActivity.this, "Berhasil mengambil data", Toast.LENGTH_SHORT).show();
mRepoAdapter = new ReposAdapter(MainActivity.this, repoList, null);
rvRepos.setAdapter(mRepoAdapter);
mRepoAdapter.notifyDataSetChanged();
}
});
}
}

Ketigabelas,

SIlahkan jalankan aplikasi dan semoga berjalan dengan lancar.

Cara Implementasi Sederhana Retrofit dan RxJava di Android Studio

Donwload Source Code Sample Retrofix Rx

Search This Blog

Cara Implementasi Sederhana Retrofit dan RxJava di Android Studio + Source Code

Ditulis pada: Juni 28, 2018

Persiapan Implementasi Retrofit dan RxJava Android

Eksekusi Implementasi Retrofit dan RxJava

Lihat Juga Artikel menarik lainnya dibawah Ini:

Adsense Right Sidebar

Yang Paling Banyak Dibaca

Pilihan Editor

Kategori

Search This Blog

Cara Implementasi Sederhana Retrofit dan RxJava di Android Studio + Source Code

Ditulis pada: Juni 28, 2018

Persiapan Implementasi Retrofit dan RxJava Android

Eksekusi Implementasi Retrofit dan RxJava

Lihat Juga Artikel menarik lainnya dibawah Ini:

You Might Also Like:

Adsense Right Sidebar

Yang Paling Banyak Dibaca

Pilihan Editor

Kategori