Membuat Project Firebase Realtime Database CRUD untuk Android App

Kali ini kita akan mencoba untuk membuat sebuah project aplikasi android sederhana untuk operasi CRUD (Create, Read, Update, Delete) dengan menggunakan database NoSQL Firebase. Mengapa Firebase? Karena Firebase dapat membantu kita untuk membangun aplikasi mobile secara cepat, tanpa perlu melakukan pengaturan infrastruktur server. Firebase juga mendukung pengembangan aplikasi iOS, android, web, Unity, dan C++. Salah satu fitur yang dapat kita manfaatkan adalah Realtime Database. Firebase Realtime Database dapat kita gunakan untuk penyimpanan dan sinkronisasi data aplikasi dalam satuan milidetik. Pembuatan autentikasi pengguna juga cukup sederhana dan aman. Untuk dapat menggunakan layanan Realtime Database maka dapat login menggunakan akun gmail ke http://console.firebase.google.com, selanjutnya klik pada Add Project.

   

Selanjutnya pilih Add Firebase to your Android app.

    

Ikuti langkah 1, 2, 3. Langkah 1 Register app. Isi nama paket Android sesuai dengan nama paket aplikasi Android yang kamu buat.

Langkah 2. Download config file google-service.json dan copy-kan ke project Android dengan cara drag and drop.

Langkah 3. Tambahkan Firebase SDK. Caranya modifikasi file build.grade untuk menggunakan plugin Google services.
1. Pada build.gradle (Project) tambahkan baris skrip berikut:

dependencies {
    //tambahkan baris berikut
    classpath 'com.google.gms:google-services:4.3.2'
}

2. Pada build.gradle (Module App) pada baris terakhir tambahkan baris skrip berikut:

apply plugin: 'com.google.gms.google-services'

Selanjutnya tekan Sync Now untuk melakukan sinkronisasi.

Selanjutnya pada Firebase klik pada Agenda Project yang telah dibuat dan akan masuk ke console Firebase. Pada console Firebase inilah kita dapat memanage project aplikasi kita. Untuk menggunakan Database Realtime, klik pada Database.

Selanjutnya akan kita atur RULES dari aplikasi. Untuk dapat menggunakan aplikasi tanpa login maka ubah RULES untuk read dan write ke mode true. Kemudian klik PUBLISH. Tentunya ini menjadi tidak aman. Supaya aman maka default autentikasinya adalah harus auth != null.

Selanjutnya masuk ke aplikasi Android untuk membuat aplikasi Agenda sederhana dengan operasi CRUD.

Buat layout activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="id.ac.akprind.staf.erma.app.agendaapp.MainActivity">

    <EditText
        android:id="@+id/editAgenda"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Tulis agenda disini" />

    <Button
        android:id="@+id/buttonAgenda"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="simpanAgenda"
        android:text="Simpan" />

    <ListView
        android:id="@+id/listAgenda"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></ListView>

</LinearLayout>

Buat layout agenda_list.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/teksItem"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

Buat layout agenda_update.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <EditText
        android:id="@+id/editAgenda"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Edit agenda disini" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <Button
            android:id="@+id/buttonUpdate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Update" />

        <Button
            android:id="@+id/buttonDelete"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Delete" />
    </LinearLayout>

</LinearLayout>

Kemudian masuk ke build.grade (Module app), tambahkan dependency berikut:

implementation 'com.google.firebase:firebase-database:19.2.0'

Klik Sync Now.

Pada MainActivity.java definisikan FirebaseDatabase dan FirebaseReference.

private FirebaseDatabase mFirebaseDatabase;
private DatabaseReference mFirebaseReference;

Untuk dapat menggunakan Database Reference pada Firebase maka pada method OnCreate pada MainActivity.java tambahkan reference berikut

mFirebaseDatabase = FirebaseDatabase.getInstance();
mFirebaseReference = mFirebaseDatabase.getReference();

Berikut file MainActivity.java

public class MainActivity extends AppCompatActivity {
    private FirebaseDatabase mFirebaseDatabase;
    private DatabaseReference mFirebaseReference;

    EditText editAgenda;
    Button buttonSimpan;
    ListView listAgenda;
    List<Agenda> agendas;

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

        editAgenda = (EditText) findViewById(R.id.editAgenda);
        buttonSimpan = (Button) findViewById(R.id.buttonAgenda);
        listAgenda = (ListView) findViewById(R.id.listAgenda);

        agendas = new ArrayList<>();

        mFirebaseDatabase = FirebaseDatabase.getInstance();
        mFirebaseReference = mFirebaseDatabase.getReference();
    }
}

But class Agenda.java

public class Agenda {
    public String id, item;

    public Agenda(){

    }

    public Agenda(String id, String item){
        this.id = id;
        this.item = item;
    }

    public String getId(){
        return id;
    }

    public String getItem(){
        return item;
    }
}

Untuk menyimpan agenda maka pada MainActivity tambahkan method simpanAgenda. Untuk operasi write ke database Firebase maka gunakan method setValue() untuk mengambil object java class pada variabel yang akan disimpan pada reference. Method ini akan digunakan juga untuk melakukan update value pada saat kita melakukan overwrites (menimpa data pada reference tertentu).

public void simpanAgenda(View view) {
    String item = editAgenda.getText().toString();
    String id = mFirebaseReference.push().getKey();

    Agenda agenda = new Agenda(id, item);

    mFirebaseReference.child(id).setValue(agenda);
    Toast.makeText(this, "Agenda ditambahkan", Toast.LENGTH_LONG).show();

}

Jalankan aplikasi menggunakan emulator.

Lihat isi dari Database Firebase telah terisi data.

Selanjutnya untuk View  list item yang telah ditambahkan maka buat class AgendaList.java

public class AgendaList extends ArrayAdapter<Agenda> {
    private Activity context;
    List<Agenda> agendas;

    public AgendaList(Activity context, List<Agenda> agendas){
        super(context, R.layout.agenda_list, agendas);
        this.context = context;
        this.agendas = agendas;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent){
        LayoutInflater inflater = context.getLayoutInflater();
        View listAgenda = inflater.inflate(R.layout.agenda_list, null, true);

        TextView isiAgenda = (TextView) listAgenda.findViewById(R.id.teksItem);

        Agenda agenda = agendas.get(position);
        isiAgenda.setText(agenda.getItem());

        return listAgenda;
    }
}

Buat method onStart pada MainActivity.java untuk menampilkan ListView Agenda yang telah ditambahkan ke database.

@Override
protected void onStart(){
    super.onStart();

    mFirebaseReference.addValueEventListener(new ValueEventListener() {
        @Override
        public void onDataChange(DataSnapshot dataSnapshot) {
            agendas.clear();

            for (DataSnapshot postSnapshot : dataSnapshot.getChildren()){
                Agenda agenda = postSnapshot.getValue(Agenda.class);
                agendas.add(agenda);
            }

            AgendaList agendaAdapter = new AgendaList(MainActivity.this, agendas);
            listAgenda.setAdapter(agendaAdapter);
        }

        @Override
        public void onCancelled(DatabaseError databaseError) {

        }
    });
}

Buat konstanta untuk mempassing data id dan item dari agenda pada MainActivity.java di luar method OnCreate

public static final String AGENDA_ID = "com.ermaweb.agendafirebaseapp.Agenda.agendaId";
public static final String AGENDA_ITEM = "com.ermaweb.agendafirebaseapp.Agenda.agendaItem";

Pada Agenda yang telah ditambahkan maka secara otomotasi data agenda baru akan ditambahkan ke dalam ListAgenda sebagai method onDataChange(). Kemudian tambahkan kode berikut ke dalam method OnCreate()

listAgenda.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        Agenda agenda = agendas.get(position);
        Intent intent = new Intent(getApplicationContext(),Agenda.class);
        intent.putExtra(AGENDA_ID, agenda.getId());
        intent.putExtra(AGENDA_ITEM, agenda.getItem());

        startActivity(intent);
    }
});

Selanjutnya pada method OnCreate MainActivity tambahkan OnItemClickListener ke ListAgenda. Dan pada onItemClick kita akan memanggil method showUpdateDeleteDialog().

listAgenda.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        Agenda agenda = agendas.get(position);
        showUpdateDeleteDialog(agenda.getId(), agenda.getItem());
    }
});

kemudian buat method showUpdateDeleteDialog() untuk membuat sebuah Dialog dan pada saat button update di klik maka akan memanggil method updateAgenda untuk melakukan update data agenda.

private void showUpdateDeleteDialog(final String id, String item){
    final EditText editText;
    final Button buttonUpdate;
    final Button buttonDelete;

    AlertDialog.Builder dialogBuilder = new AlertDialog.Builder(this);
    LayoutInflater inflater = getLayoutInflater();
    final View dialogView = inflater.inflate(R.layout.agenda_update, null);
    dialogBuilder.setView(dialogView);

    editText = (EditText) dialogView.findViewById(R.id.editAgenda);
    buttonUpdate = (Button) dialogView.findViewById(R.id.buttonUpdate);
    buttonDelete = (Button) dialogView.findViewById(R.id.buttonDelete);

    dialogBuilder.setTitle(item);
    final AlertDialog b = dialogBuilder.create();
    b.show();

    buttonUpdate.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            String item = editText.getText().toString().trim();
            if (!TextUtils.isEmpty(item)){
                updateAgenda(id, item);
                b.dismiss();
            }
        }
    });

    buttonDelete.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            deleteAgenda(id);
            b.dismiss();
        }
    });

}

Untuk mengupdate definisikan method updateAgenda dalam MainActivity.

private boolean updateAgenda(String id, String item) {
    Agenda agenda = new Agenda(id, item);
    mFirebaseReference.child(id).setValue(agenda);
    Toast.makeText(getApplicationContext(), "Agenda terupdate", Toast.LENGTH_LONG).show();
    return true;
}

untuk mendelete definisikan method deleteAgenda dalam MainActivity

private boolean deleteAgenda(String id) {
    mFirebaseReference.child(id).removeValue();
    Toast.makeText(getApplicationContext(),"Agenda telah dihapus", Toast.LENGTH_LONG).show();
    return true;
}

Coba jalankan aplikasi, klik pada salah satu data pada list untuk mengupdate data.