Belajar Membuat Aplikasi Android Dengan Teknik MVP (Part 2)

Last Updated on 9 years by Mas Herdi

Hi all, melanjutkan dari postingan saya sebelumnya tentang belajar membuat aplikasi Android menggunakan metode Model View Presenter atau dikenal juga dengan MVP, kali ini saya akan masuk ke bagian kedua dimana kita langsung belajar bagaimana cara mengcoding aplikasi Android dengan menggunakan metode MVP dengan menerapkannya pada sebuah project aplikasi login sederhana di Android 🙂

Belajar Membuat Aplikasi Android Menggunakan MVP

Contoh diagram MVP

Oke, pertama-tama seperti yang sudah saya tulis di postingan pertama, teknik MVP bertujuan untuk memisahkan code pada suatu Activity antara mana yang bertugas untuk mengatur layout dan code logic yang bertugas untuk mengolah data. Dengan MVP kita membuat suatu Activity benar-benar hanya menjadi view saja, untuk menampilkan data sehingga tidak boleh ada codingan untuk pengolahan data di situ, sebagai gantinya code logic aplikasi semuanya ditempatkan pada presenter. MVP dengan abstractionnya memudahkan kita dalam mengelola dan memanage logic pada suatu Activity sehingga apabila kita ingin menambah atau mengurangi fungsi di suatu Activity kita bisa melakukannya dengan rapi dan terstruktur.

Kita akan belajar membuat sebuah activity dengan menggunakan teknik MVP. Activity ini berupa halaman login yang sederhana, bernama LoginActivity.

Untuk memulai, pertama-tama buatlah sebuah project di Android Studio, untuk caranya kalian bisa membaca tutorial berikut ini.

Setelah itu, buatlah sebuah file xml bernama activity_main.xml, kodenya seperti di bawah ini. File ini adalah layout untuk LoginActivity yang akan kita gunakan :

<?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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="id.web.twoh.mvpsample.LoginActivity"
    tools:showIn="@layout/activity_main">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_user"
        android:layout_alignParentTop="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:id="@+id/et_username"
            android:hint="username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_pass"
        android:layout_below="@id/til_user"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:id="@+id/et_pass"
            android:hint="password"
            android:inputType="textPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </android.support.design.widget.TextInputLayout>

    <Button
        android:id="@+id/bt_login"
        android:text="login"
        android:layout_below="@id/til_pass"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

Setelah itu kita akan membuat sebuah interface bernama LoginPresenter.java, interface ini berisi nama-nama fungsi yang nantinya bisa kita lakukan pada Activity tersebut. Karena ini adalah activity Login, maka salah satu fungsi yang bisa kita lakukan adalah fungsi untuk login:

package id.web.twoh.mvpsample.presenter;

/**
 * Created by Hafizh Herdi on 11/26/2015.
 */
public interface LoginPresenter {
    /**
     * Login.
     * @param username the username
     * @param password the password
     */
    void login(String username, String password);
}

Kemudian kita akan membuat interface untuk melakukan abstraction pada kelas LoginActivity bernama LoginView.java. Interface ini berisi nama fungsi-fungsi yang merupakan response logic dari view apabila fungsi login pada Activity dijalankan. Ketika kita melakukan login, ada tiga skenario response general yang bisa didapatkan, yaitu :

• do login > validasi error (misal format email salah)
• do login > login error (misal username & password tidak cocok)
• do login > login success (skenario ideal, user bisa langsung masuk karena login berhasil)

Maka, tiga fungsi tersebut yang akan kita masukkan pada interface LoginView, interface inilah yang bertugas mengatur bagaimana tampilan view Activity apabila login berhasil, atau login gagal.

package id.web.twoh.mvpsample.presenter;

/**
 * Created by Hafizh Herdi on 11/26/2015.
 */
public interface LoginView {
    /**
     * Menampilkan toast validation error.
     */
    void showValidationError();
    /**
     * Login success.
     */
    void loginSuccess();
    /**
     * Menampilkan toast login error.
     */
    void loginError();
}

Implementasi Interface

Langkah selanjutnya, adalah kita akan mengimplementasi interface-interface di atas ke dalam kelas Java. Interface pertama yang kita akan implementasikan adalah LoginPresenter.java yang akan diimplementasikan pada kelas LoginPresenterImp.java.

package id.web.twoh.mvpsample.presenter;

import android.text.TextUtils;

/**
 * Created by Hafizh Herdi on 11/26/2015.
 */
public class LoginPresenterImp implements LoginPresenter {
    /**
     * The login view.
     */
    private LoginView loginView;

    /**
     * Membuat sebuah login presenter impl baru.
     *
     * @param loginView the login view
     */
    public LoginPresenterImp(LoginView loginView) {
        this.loginView = loginView;
    }

    @Override
    public void login(String username, String password) {
        if (TextUtils.isEmpty(username) || TextUtils.isEmpty(password)) {
            loginView.showValidationError();
        } else {
            if (username.equals("admin") && password.equals("admin")) {
                loginView.loginSuccess();
            } else {
                loginView.loginError();
            }
        }
    }
}

Pada kelas di atas, kita akan mengimplementasikan fungsi login(), untuk keperluan tutorial di sini kita hanya mengecek apakah password dan username yang dimasukkan sudah benar, yaitu sama dengan admin. Namun dalam real world practice nya ini akan lebih kompleks dan melibatkan callback ke server untuk proses pengecekan login.

Terlihat juga pada kelas di atas, mana saja fungsi-fungsi yang akan dijalankan pada view ketika proses login berhasil, gagal, atau validasi error. Contohnya ketika login berhasil maka kelas akan memanggil fungsi loginSuccess() pada view.

Kemudian kita akan mengimplementasikan interface yang kedua yaitu LoginView interface. Dimana? Kita akan mengimplementasikan interface tersebut langsung pada LoginActivity.java 🙂

package id.web.twoh.mvpsample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

import id.web.twoh.mvpsample.presenter.LoginPresenter;
import id.web.twoh.mvpsample.presenter.LoginPresenterImp;
import id.web.twoh.mvpsample.presenter.LoginView;

/**
 * Created by Hafizh Herdi on 11/26/2015.
 */
public class LoginActivity extends AppCompatActivity implements LoginView {

    private LoginPresenter presenter;
    private EditText etUsername;
    private EditText etPass;
    private Button btLogin;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // inisialisasi view standar
        etUsername = (EditText) findViewById(R.id.et_username);
        etPass = (EditText) findViewById(R.id.et_pass);
        btLogin = (Button) findViewById(R.id.bt_login);

        presenter = new LoginPresenterImp(this);

        btLogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                presenter.login(etUsername.getText().toString(), etPass.getText().toString());
            }
        });

    }

    // fungsi yang dipanggil saat validasi error
    @Override
    public void showValidationError() {
        Toast.makeText(this, "Please enter valid username and password!", Toast.LENGTH_SHORT).show();
    }

    // fungsi yang dipanggil saat login sukses
    @Override
    public void loginSuccess() {
        Toast.makeText(this, "You are successfully logged in!", Toast.LENGTH_SHORT).show();
    }

    // fungsi yang dipanggil saat login error
    @Override
    public void loginError() {
        Toast.makeText(this, "Invalid login credentials!", Toast.LENGTH_SHORT).show();
    }
}

Bisa dilihat, kelas di atas sebenarnya sangatlah simpel, kita membuat kelas LoginActivity implement fungsi2 dari LoginView.java, sehingga kita kemudian menambahkan tiga fungsi baru untuk menghandle response2 dari Login presenter yang sebelumnya kita buat. Yaitu skenario apabila login gagal, atau berhasil. Di tutorial ini semuanya hanyalah berupa memunculkan toast sederhana, namun real world nya kalian bisa banyak bereksperimen, seperti berpindah ke main activity apabila login berhasil. Atau melakukan block atau restrict pengguna yang sudah tiga kali gagal login.

That’s all. Source code ada di GitHub saya. Jangan lupa follow dan star projectnya ya dan jika ada yang kurang jelas silahkan ditanyakan di bagian komentar. Semoga membantu 🙂