Cara mudah belajar CRUD di Android Studio menggunakan API dari Reqres.in

Crud yaitu Create read update delete adalah sebuah metode untuk kita dapat membuat aplikasi yang interaktif, aplikasi kita dapat menampilkan, mengubah, menambah, dan menghapus data, disini kita akan menggunakan API yang sudah di sediakan oleh website reqres.in, yang artinya kita tidak perlu lagi untuk membuat API sendiri, karena API ini sangat cocok untuk kita belajar metode CRUD tanpa harus belajar dulu tentang teknologi yang ada di Backend seperti bahasa PHP dan lain-lain

Hands On

Pertama silahkan akses website https://reqres.in/ di browser, tinggal scroll ke bawah nanti kita kan melihat bagian dengan judul Give it try, disana kita akan diberikan contoh response yang diberikan oleh API reqres.in

oke selanjutnya kita akan memulai tahapan-tahapan pengerjaan di Android Studio nya:

1. Silahkan buat new project dengan nama “CRUD API”
2. Tambahkan library yang dibutuhkan seperti RecyclerView, ButterKnife, Glide, Retrofit, OkHTTP

Library RecycerView untuk kita dapat menggunakan widget RecyclerView, ButterKnife untuk kita dapat otomatis menginisiasi widget ke dalam Java, Glide digunakan untuk dapat menampilkan gambar lebih efisien, Retrofit digunakan untuk networking ke API sama dengan OkHTTP

// Butterknife
implementation 'com.jakewharton:butterknife:9.0.0-rc2'
annotationProcessor 'com.jakewharton:butterknife-compiler:9.0.0-rc2'

// Recyclerview
implementation 'com.android.support:recyclerview-v7:28.0.0'

// Design
implementation 'com.android.support:design:28.0.0'

// Retrofit
implementation 'com.squareup.retrofit2:retrofit:2.5.0'
implementation 'com.squareup.retrofit2:converter-gson:2.5.0'

// Okhttp
implementation 'com.squareup.okhttp3:okhttp:3.12.0'
implementation 'com.github.bumptech.glide:glide:4.8.0'

Cara memasukkan library nya, tinggal copas kode di atas, buka Gradle scripts → buka build.gradle (Module app), masukkan ke dalam dependencies, seperti screen shot di bawah ini

Setelah berhasil di paste, jangan lupa untuk melakukan Sync Now terlebih dahulu, ada button Sync Now di atas

3. Lalu buat java class baru dengan nama “RestClient”

4. di dalamnya kita masukkan code untuk mensetting alamat url API dan retrofit kita, silahkan ketikkan code dibawah ini ke dalam class RestClient

public class RestClient {

    // Membuat base URL
    String BASE_URL =  "https://reqres.in/";

    OkHttpClient.Builder httpClient = new OkHttpClient.Builder();
    Retrofit.Builder builder = new Retrofit.Builder()
            .baseUrl(BASE_URL)
            .addConverterFactory(GsonConverterFactory.create());

    Retrofit retrofit = builder.client(httpClient.build()).build();
}

5. Lalu kita akan membuat Java class dengan Kind Interface untuk memasukkan Endpoint API kedalamnya, silahkan buat class interface baru dengan nama “MainInterface”

6. Setelah interface jadi, sebelumnya kita harus tahu dulu endpoint mana yang akan kita ambil, disini kita akan mulai dengan membuat endpoint login, endpoint nya bisa di dapatkan di web reqres.in ada pada POST Login :

Request : /api/login

{
    "email": "peter@klaven",
    "password": "cityslicka"
}

Response : 200

{
    "token": "QpwL5tke4Pnpja7X"
}

nah di atas ada request, alamat request itu adalah enpoint nya yaitu : /api/login, dan akan menghasilkan Response 200 seperti diatas, response API kebanyak dalam bentuk JSON

Lalu kita convert hasil response dari API yang berbentuk JSON tadi ke object Java menggunakan Robo generator

cara nya menggunakan Robo generator adalah, klik kanan pada nama package kita, lalu pilih new →Pilih “Generate POJO From JSON”, maka akan tampil jendela baru, di dalam sana kita pastekan response 200 dari hasil endpoint /api/login, dan jangan lupa kita pilih GSON, klik generate

Maka hasilnya akan seperti ini :

Pasti ada yang merah kan pada @Generate silahkan hapus saja merah pada koding nya serta import yang merah hapus

Lalu kalau sudah, silahkan new generate POJO lagi seperti cara diatas, kita akan membuat POJO untuk response Body Login, kasih nama “BodyLogin”

seperti di atas setelah di generate pasti akan ada merah, silahkan dihapus merahnya sampai ke import

7. Lalu kita isikan class interface yang sudah kita buat tadi

silahkan ketikkan code dibawah ini :

public interface MainInterface {

    // TODO Memasukkan Endpoint
    @POST("api/login")
    Call<LoginResponse> postLogin(@Body BodyLogin bodyLogin);

}

8. Karena MainInterface kita sudah siap, maka pada RestClient akan kita tambahkan inisiasi MainInterface, silahkan ubah code RestClient seperti dibawah ini :

public class RestClient {

    // TODO menginisiasi MainInterface
    private static MainInterface service;

    public static MainInterface getService() {

        if (service == null) {
            // Membuat base URL
            String BASE_URL = "https://reqres.in/";

            OkHttpClient.Builder httpClient = new OkHttpClient.Builder();
            Retrofit.Builder builder = new Retrofit.Builder()
                    .baseUrl(BASE_URL)
                    .addConverterFactory(GsonConverterFactory.create());

            Retrofit retrofit = builder.client(httpClient.build()).build();

            service = retrofit.create(MainInterface.class);
        }
        return service;
    }
}

9. Selanjutnya buat Empty Activity baru dengan nama “LoginActivity”

10. Silahkan buat design layout login nya dengan 2 buah EditText dan 1 Button, atau silahkan menggunakan koding seperti dibawah 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"
    tools:context=".LoginActivity"
    android:orientation="vertical"
    android:layout_margin="25dp"
    android:gravity="center">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Username"
        android:id="@+id/tvUsername"/>

    <EditText
    android:inputType="textPassword"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Password"
    android:id="@+id/edtPassword"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Login"
        android:id="@+id/btnLogin"
        style="@style/Widget.AppCompat.Button.Colored"/>

</LinearLayout>

11. lalu kita generat butter knife pada LoginActivity.java nya, jangan lupa untuk cheklist OnClick pada Button btnLogin nya untuk kita gunakan untuk aksi klik pada Button Login

12. Maka hasil koding pada LoginActivity.Java akan seperti ini

13. Lalu kita tambahkan koding ke dalam LoginActivity.java untuk mengesekusi login

14. setelah selesai, pada AndroidManifest tambahkan coding dibawah ini :

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

15. Lalu pada <intent-filter> yang berada di dalam AndroidManifest dari MainActivity kita pindah ke LoginActivity, hasil dari AndroidManifest akan seperti ini

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="me.firdaus1453.crudapi">

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">

        </activity>
        <activity android:name=".LoginActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

16. Kalau sudah silahkan coba Run, dan masukkan username serta password terserah, pada saat menekan tombol login maka toast akan menampilkan token, itu tandanya API sudah berhasil merespon

Selamat, kamu sudah berhasil membuat koneksi dengan API menggunakan method POST, selanjutnya kita akan menggunakan method GET

Method GET

1. Pertama-tama cari dulu endpoint GET pada web reqres.in, pilih GET List user

2. seperti biasa, kita harus membuat response JSON dari API ke bentuk object di Java atau POJO, silahkan copas response dari API GET List Users

{
    "page": 2,
    "per_page": 3,
    "total": 12,
    "total_pages": 4,
    "data": [
        {
            "id": 4,
            "first_name": "Eve",
            "last_name": "Holt",
            "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"
        },
        {
            "id": 5,
            "first_name": "Charles",
            "last_name": "Morris",
            "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg"
        },
        {
            "id": 6,
            "first_name": "Tracey",
            "last_name": "Ramos",
            "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"
        }
    ]
}

3. lalau klik kanan pada package, pilih new → pilih “Generate POJO from Json”, pastekan response get list user api yang di atas ke dalam kolom POJO generator, lalu kasih nama “ListUserResponse”, Klik generate

Maka akan otomatis kita mendapatkan 2 class baru yaitu ListUserResponse dan DataItem

4. setelah itu kita akan menambahkan method GET pada class MainInterface, tambahkan koding dibawah ini ke dalam MainInterface.java

@GET("api/users?page=2")
Call<ListUserResponse> getList();

disana kita akan mendapatkan response berupa struktur data seperti class ListUserResponse

tampilan seluruh koding class MainInterface akan seperti ini :

public interface MainInterface {

    // TODO Memasukkan Endpoint
    @POST("api/login")
    Call<LoginResponse> postLogin(@Body BodyLogin bodyLogin);

    @GET("api/users?page=2")
    Call<ListUserResponse> getList();
}

Nah dengan ini maka kita sudah siap untuk mengambil data dengan memanggil method getList dari MainInterface

5. Selanjutnya kita akan mempersiapkan tampilan untuk menampilkan data-data yang kita inginkan

6. Pertama kita akan membuat layout untuk menampilkan data kita dengan menggunakan adapter dari recycleview, silahkan buat layout baru dengan nama “list_item”, lalu isikan koding layout list_item seperti dibawah ini :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_margin="25dp">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@+id/img_avatar"
        android:src="@mipmap/ic_launcher"/>

        <TextView
            android:paddingLeft="10dp"
            android:textSize="20dp"
            android:textStyle="bold"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/tv_name"
            android:text="Nama"
            android:layout_centerInParent="true"
            android:layout_toRightOf="@+id/img_avatar"/>

        <TextView
            android:layout_marginTop="30dp"
            android:layout_below="@+id/tv_name"
            android:layout_weight="1"
            android:paddingLeft="10dp"
            android:textSize="18dp"
            android:layout_toRightOf="@+id/img_avatar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/tv_last_name"
            android:text="Last Nama"
            android:layout_gravity="center"/>


</RelativeLayout>

7. Selanjutnya kita akan membuat class baru untuk menampung adapter, buat class java baru dengan nama ”RecycleAdapter”

8. Lalu ketikkan koding di bawah ini ke dalam class RecycleAdapter.java

public class RecycleAdapter extends RecyclerView.Adapter<RecycleAdapter.ViewHolder> {
    private List<DataItem> dataUser;
    private Context mContext;


    public RecycleAdapter(List<DataItem> dataUser, Context mContext) {
        this.dataUser = dataUser;
        this.mContext = mContext;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.list_item, viewGroup, false);
        return new ViewHolder(v);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder viewHolder, int i) {
        viewHolder.tvName.setText(dataUser.get(i).getFirstName());
        viewHolder.tvLastName.setText(dataUser.get(i).getLastName());
        Glide.with(mContext).load(dataUser.get(i).getAvatar()).into(viewHolder.imgAvatar);
    }

    @Override
    public int getItemCount() {
        return dataUser.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        @BindView(R.id.img_avatar)
        ImageView imgAvatar;
        @BindView(R.id.tv_name)
        TextView tvName;
        @BindView(R.id.tv_last_name)
        TextView tvLastName;
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            ButterKnife.bind(this,itemView);
        }
    }
}

9. Setelah adapter sudah siap, maka kita akan mempersiapkan MainActivity, diawali dengan menambahkan widget recyclerview ke dalam layout MainActivity, silahkan tamabahkan widget recyclerview ke dalam layout activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:context=".MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rvListUser"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v7.widget.RecyclerView>


</android.support.constraint.ConstraintLayout>

10. Lalu apabila layout activity_main sudah siap maka kita lanjut untuk menambahkan koding logic ke dalam MainActivity.java, masukkan koding dibawah ini ke dalam MainActivity.java

11. Nah kalau sudah semua tidak ada error, kamu bisa langsung Run aplikasi kamu, silahkan di Run, maka hasil dari tampilannya akan menjadi seperti ini :

Selamat kamu sudah berhasil menampilkan data dari API dengan menggunakan method GET, selanjutanya masih ada method PUT dan DELETE

Full source code yang sudah jadi bisa teman-teman clone di github saya disini https://github.com/firdaus1453/CRUDAPI

Tapi karena keterbatasan waktu, artikel ini sampai disini dulu, nanti kita lanjutkan untuk Part 2 nya ya 😃

Terima kasih banyak atas perhatiannya, keep learning and don’t give up, see you ❤