Simple CRUD Pada Firestore (Firebase Database) dan Menampilkannya pada RecyclerView (Android Kotlin)

Rivaldy
4 min readJan 3, 2020

Ok Let’s starting..

Membuat database pada Cloud Firestore

Silahkan membuat project pada firebase dan menghubungkannya dengan project/aplikasi anda, karena saya tidak akan membahas cara membuat project pada firebase dan menghubungkannya dengan aplikasi, kita hanya akan langsung write and read data yang ada pada firestore.

Jika belum tahu, cara menghubukan firebase dengan aplikasi anda, silahkan kunjungi link berikut:

Atau ini

Atau dari dokumentasinya:
https://firebase.google.com/docs/android/setup?hl=id https://firebase.google.com/docs/firestore/quickstart?hl=id,

Berikut depedencies tambahan yang dibutuhkan pada project ini:

//firebase
implementation 'com.google.firebase:firebase-firestore:21.3.1'
implementation 'com.google.firebase:firebase-core:17.2.1'
implementation 'com.firebaseui:firebase-ui-firestore:5.0.0'
//material design
implementation 'com.google.android.material:material:1.0.0'

Testing Write & Read pada firestore

Sebelum kita melakukan inputan data dan menampilkan data pada RecyclerView, mari kita test terlebih dahulu, untuk langsung menulis dan membaca dokumen/data pada Firestore, kita akan membuat 2 fungsi yaitu menulis data (writeData) dan membaca data (readData), berikut codenya pada MainActivity.

MainActivity.kt

Setelah itu run aplikasi, jika Log Success write… dan Success read… tampil di Log Run/Logcat maka kita telah berhasil menulis dan membaca data pada database Firestore, atau cek langsung pada Firestore anda, berikut hasilnya.

Testing write to firestore (succes)
Log testing success write/read

Agar mudah dipahami jalankan fungsi write terlebih dahulu, setelah itu fungsi read dan jadikan komentar pada fungsi writeData() jika fungsi read dijalankan. Selanjutnya, setelah kedua fungsi testing diatas berhasil dijalankan, saatnya kita memulai…

Pada tahap ini, kita akan membuat crud sederhana dengan bantuan user interface untuk create, read, update, dan delete data dengan input data nama, alamat dan umur. adapun struktur class dan activity yang nantinya ada pada pada project yaitu :

struktur project

Step 1. Membuat Data Class Users

Buat package baru dengan nama model dan di dalamnya buat data class Users, dengan parameter strName, strAddress, intAge.

Users.kt

Agar mudah dipahami, kita akan membuat semua layout yang dibutuhkan.

Step 2. Buat Item layout untuk list item RecyclerView

Layout ini nantinya akan ditampilkan pada RecyclerView pada MainActivity dan akan berulang sesuai banyaknya data. Buat layout baru dengan nama item_list_user.

item_list_user.xml

Step 3. Tambahkan Recyclerview pada layout activity_main

Berikut xml layout pada activity_main.xml

activity_main.xml

berikut tampilan review layoutnya.

review actvity_main.xml

Step 4. Membuat Form Input (Create & Update)

Buat sebuah acitivity baru dengan nama CrudActivity, setelah itu edit layout activity_crud.xml seprti berikut:

activity_addedit.xml

untuk menggunakan material design, ubah theme pada styles.xml dan ubah parent AppTheme dengan Theme.MaterialComponents.Light.DarkActionBar berikut tampilan layoutnya:

review activity_addedit.xml

Setelah semua layout yang dibutuhkan sudah jadi, selajutnya lanjut ke file kotlinya atau proses kodingan.

Step 5. Mengubah isi MainActivity

Sebelumnya kita telah membuat testing write/read pada firestore di dalam activity ini, maka kita akan mengubah/menambahkan sedikit kodingan lagi, agar dapat difungsikan sesuai fungsinya. Pada activity ini kita akan menambahkan adapter untuk recyclerview, dialog popup untuk edit, hapus dan menfungsikan tambah data, tapi sebelumnya tambahkan object class Const.kt dimana dalam object class tersebut, nantinya berisi fungsi ataupun variabel yang yang akan digunkan pada class/activity lainnya, berikut:

Const.kt

Selanjutnya ubah MainActivity, dimana dalam kodingan tersebut, sudah saya berikan penjelasan sesuai fungsinya masing-masing agar dapat dengan mudah dimengerti.

MainActivity.kt

Jangan lupa buat class baru dengan nama UsersViewHolder untuk set data view pada item layout.

UsersViewHolder.kt

Jika ada pesan warning error untuk sementara abaikan dulu, karena kemungkinan ada beberapa variable yang belum di inisialisasi dari activity AddEditActivity.

Step 6. Menambahkan fungsi tambah dan edit pada AddEditActivity

Pada activity ini kita membuat fungsi tambah dan edit data yang ada pada firestore, seperti sebelumnya, saya akan menjelaskan fungsi masing2 di dalam kodingan agar mudah dipahami, berikut :

AddEditActivity.kt

Dan berikut adalah data yang ditampilkan oleh recyclerview dari firestore database

data recyclerview from firetore database
show data on recyclerview
data/document from firestore

Mungkin itu saja dari saya, jika ada yang masih kurang, mungkin bisa dimaklumi 😅 masih proses belajar juga. untuk kode lengkapnya silahkan kunjugi repo github saya. thankyou 😅

--

--

Rivaldy

Make it fun | Find me on my GitHub page at https://github.com/im-o. And let's connect over coffee! ☕ You can reach me on any social media at @rivaldy_o."