Tutorial CRUD Firebase Realtime Database Android (II) : Membuat Fungsi Read Data

Last Updated on 7 years by Mas Herdi

Halo semuanya. Pada bagian ketiga series tutorial menggunakan Firebase Realtime Database ini, kita akan belajar tentang bagaimana cara membaca (read) data yang sudah kita masukkan ke dalam Firebase Realtime Database di tutorial sebelumnya dan menampilkannya di aplikasi inventaris barang kita.

Pre-requisites

Tutorial ini berhubungan erat dengan tutorial-tutorial Firebase Realtime DB sebelumnya, karena itu saya sarankan untuk membaca tutorial-tutorial di bawah ini terlebih dahulu :

• Membuat CRUD dengan Firebase Realtime Database
• Membuat Fungsi Insert/Create Data pada Firebase Realtime DB

Membuat Fitur Read Data pada Firebase Realtime Database

Oke, langsung saja, pada tutorial kali ini kita akan menambahkan fitur lihat data barang pada aplikasi inventaris yang akan kita buat. Karena berbeda dengan database SQLite yang datanya disimpan di lokal, pada Firebase Realtime Database datanya disimpan secara online di cloud. Jadi pada tutorial ini kita akan belajar untuk mendownload semua data yang ada pada cloud Firebase Realtime DB, kemudian menampilkannya pada aplikasi inventaris kita menggunakan list RecyclerView.

Karena pada tutorial sebelumnya kita sudah memasukkan beberapa data, kita bisa melihat data yang sudah kita masukkan tersebut pada Firebase Console.

Data pada Firebase Console

Bisa kita lihat pada screenshot console Firebase di atas, data yang kita masukkan sebenarnya sudah ada di dalam Firebase Realtime DB dalam bentuk JSON. Selanjutnya kita hanya perlu membuat fungsi untuk membaca data tersebut dan menampilkannya di aplikasi inventaris.

Karena nanti kita akan menampilkannya pada RecyclerView, maka kita akan membuat layout untuk tiap-tiap item pada daftar barang terlebih dahulu, buat sebuah file layout XML bernama item_barang dan isikan kode di bawah ini :

item_barang.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="?android:attr/listPreferredItemHeight"
    android:orientation="vertical"
    android:padding="10dip">
    <TextView
        android:id="@+id/tv_namabarang"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:textColor="@android:color/black"
        android:textSize="16sp" />
</LinearLayout>

Jika sudah, selanjutnya kita akan membuat file XML layout untuk Activity Read Data, beri nama xml nya activity_db_read, dan isikan kode di bawah ini :

activity_db_read.xml

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

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

</LinearLayout>

Layout tersebut hanya berisi satu object RecyclerView yang nantinya digunakan untuk menampilkan data barang dari Firebase Realtime Database.

Selanjutnya, kita akan membuat kelas Adapter yang nanti akan digunakan di RecyclerView, adapter ini berguna untuk mengolah data yang kita download, dan menampilkannya pada RecyclerView. Buatlah sebuah file java bernama AdapterBarangRecyclerView, dan copy-pastekan kode di bawah ini :

AdapterBarangRecyclerView.java

package id.web.twoh.twohfirebase.adapter;

import android.app.Activity;
import android.app.Dialog;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;

import java.util.ArrayList;

import id.web.twoh.twohfirebase.R;
import id.web.twoh.twohfirebase.model.Barang;

/**
 * Created by Hafizh Herdi on 10/8/2017.
 */

public class AdapterBarangRecyclerView extends RecyclerView.Adapter<AdapterBarangRecyclerView.ViewHolder> {

    private ArrayList<Barang> daftarBarang;
    private Context context;

    public AdapterBarangRecyclerView(ArrayList<Barang> barangs, Context ctx){
        /** 
         * Inisiasi data dan variabel yang akan digunakan
         */
        daftarBarang = barangs;
        context = ctx;
    }

    class ViewHolder extends RecyclerView.ViewHolder {

        /**
         * Inisiasi View
         * Di tutorial ini kita hanya menggunakan data String untuk tiap item
         * dan juga view nya hanyalah satu TextView
         */
        TextView tvTitle;

        ViewHolder(View v) {
            super(v);
            tvTitle = (TextView) v.findViewById(R.id.tv_namabarang);
        }
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        /**
         *  Inisiasi ViewHolder
         */
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_barang, parent, false);
        // mengeset ukuran view, margin, padding, dan parameter layout lainnya
        ViewHolder vh = new ViewHolder(v);
        return vh;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, final int position) {
        /**
         *  Menampilkan data pada view
         */
        final String name = daftarBarang.get(position).getNama();
        holder.tvTitle.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                /**
                 *  Kodingan untuk tutorial Selanjutnya :p Read detail data
                 */
            }
        });
        holder.tvTitle.setOnLongClickListener(new View.OnLongClickListener() {
            @Override
            public boolean onLongClick(View view) {
                /**
                 *  Kodingan untuk tutorial Selanjutnya :p Delete dan update data
                 */
                return true;
            }
        });
        holder.tvTitle.setText(name);
    }

    @Override
    public int getItemCount() {
        /**
         * Mengembalikan jumlah item pada barang
         */
        return daftarBarang.size();
    }
}

Penjelasan untuk kelas Adapter tersebut bisa dibaca pada komentar yang sudah ada di dalam source code di atas. Untuk mengetahui cara kerja Adapter lebih lanjut bisa membaca postingan saya yang khusus membahas RecyclerView.

Setelah itu, karena kita sudah membuat layout untuk Activity Read Data di atas, maka kita akan membuat kodingan pada Read Data Activity itu sendiri. Di activity itulah nantinya akan ada kode yang berfungsi untuk membaca data dari Firebase Realtime Database dan menampilkannya di RecyclerView. Buatlah sebuah file Android activity .java bernama FirebaseDBReadActivity, dan isikan kode di bawah ini :

package id.web.twoh.twohfirebase;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.widget.Toast;

import com.google.android.gms.tasks.OnSuccessListener;
import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseError;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.google.firebase.database.ValueEventListener;

import java.util.ArrayList;

import id.web.twoh.twohfirebase.adapter.AdapterBarangRecyclerView;
import id.web.twoh.twohfirebase.model.Barang;

/**
 * Created by Herdi_WORK on 18.06.17.
 */

public class FirebaseDBReadActivity extends AppCompatActivity{

    /**
     * Mendefinisikan variable yang akan dipakai
     */
    private DatabaseReference database;
    private RecyclerView rvView;
    private RecyclerView.Adapter adapter;
    private RecyclerView.LayoutManager layoutManager;
    private ArrayList<Barang> daftarBarang;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        /**
         * Mengeset layout
         */
        setContentView(R.layout.activity_db_read);

        /**
         * Inisialisasi RecyclerView & komponennya
         */
        rvView = (RecyclerView) findViewById(R.id.rv_main);
        rvView.setHasFixedSize(true);
        layoutManager = new LinearLayoutManager(this);
        rvView.setLayoutManager(layoutManager);

        /**
         * Inisialisasi dan mengambil Firebase Database Reference
         */
        database = FirebaseDatabase.getInstance().getReference();

        /**
         * Mengambil data barang dari Firebase Realtime DB
         */
        database.child("barang").addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(DataSnapshot dataSnapshot) {

                /**
                 * Saat ada data baru, masukkan datanya ke ArrayList
                 */
                daftarBarang = new ArrayList<>();
                for (DataSnapshot noteDataSnapshot : dataSnapshot.getChildren()) {
                    /**
                     * Mapping data pada DataSnapshot ke dalam object Barang
                     * Dan juga menyimpan primary key pada object Barang
                     * untuk keperluan Edit dan Delete data
                     */
                    Barang barang = noteDataSnapshot.getValue(Barang.class);
                    barang.setKey(noteDataSnapshot.getKey());

                    /**
                     * Menambahkan object Barang yang sudah dimapping
                     * ke dalam ArrayList
                     */
                    daftarBarang.add(barang);
                }

                /**
                 * Inisialisasi adapter dan data barang dalam bentuk ArrayList
                 * dan mengeset Adapter ke dalam RecyclerView
                 */
                adapter = new AdapterBarangRecyclerView(daftarBarang, FirebaseDBReadActivity.this);
                rvView.setAdapter(adapter);
            }

            @Override
            public void onCancelled(DatabaseError databaseError) {
                /**
                 * Kode ini akan dipanggil ketika ada error dan
                 * pengambilan data gagal dan memprint error nya
                 * ke LogCat
                 */
                System.out.println(databaseError.getDetails()+" "+databaseError.getMessage());
            }
        });
    }

    public static Intent getActIntent(Activity activity){
        return new Intent(activity, FirebaseDBReadActivity.class);
    }
}

Penjelasan tentang cara kerja activity tersebut bisa dibaca pada komentar2 yang ada pada source code di atas. Gambaran besarnya kodingan di atas akan mendownload data kita pada Firebase Realtime DB, kemudian memapping data-nya ke dalam ArrayList, dan data ArrayList tersebut akan dimasukkan ke dalam Adapter, yang nantinya Adapter akan meneruskannya ke RecyclerView untuk ditampilkan.

Oke, fungsi-fungsi utamanya sudah kita buat di atas. Sekarang untuk finishingnya, pada MainActivity.java yang kita buat di tutorial sebelumnya. Tambahkan kode berikut ini, supaya ketika kita klik tombol Lihat Data, maka aplikasi akan berpindah ke Activity Read Data yang baru saja kita buat :

MainActivity.java (baca postingan sebelumnya)

        btViewDB.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // kode untuk tutorial selanjutnya
            }
        });

Setelah itu, jangan lupa juga untuk menambahkan FirebaseDBReadActivity ke dalam daftar activity di AndroidManifest.xml :

<activity android:name=".FirebaseDBReadActivity"/>

Jika sudah, langsung saja kita jalankan programnya. 🙂

Demo

Kita sudah memasukkan beberapa barang di tutorial sebelumnya :

Firebase AppInventory Flow

Tambahkan lagi beberapa data. Kemudian kembali ke Main Menu, dan pilih Lihat Data :

Firebase AppInventory Menu

Dan voila, data-data barangnya sudah ada di sana :

Firebase AppInventory Read Data

Conclusion

Postingan ini adalah bagian kedua dari fitur CRUD(Create, Read, Update, Delete) yang akan kita implementasikan pada Firebase Realtime Database. Semoga berguna, nantikan tutorial selanjutnya tentang Update Data. Bagaimana cara meng-edit data yang sudah kita masukkan pada Firebase Realtime Database.😀

Untuk source code-nya, kalian bisa download di GitHub saya. Jangan lupa untuk follow dan star ya. 😀

Jangan sungkan untuk bertanya apabila ada yang kurang mengerti, silahkan tulis lewat komentar di bawah. 😉