Menggunakan Komponen Firebase di Appybuilder, Thunkable, MIT Inventor

Sebelum melanjutkan saya anggap kamu sudah tahu cara menghubungkan Firebase ke Appy builder dan sebagai tambahan untuk melanjutkan tutorial ini, sebaiknya kalian pelajari terlebih dahulu cara menggunakan TinyDB di AppyBuilder karena pada bahasan tersebut sudah saya beri contoh tentang mengelola form pengisian data (Save, Edit, Update).

Dengan mempelajari bahasan di bawah ini, saya yakin kalian juga akan mengerti tentang penggunaan Project Bucket di AppyBuilder, Thunkable, dan Inventor lainnya.

Baiklah, kita langsung memulai dengan memasukkan komponen-komponen yang dibutuhkan seperti gambar di bawah ini:

1. Save Data

Jika sudah menambah komponen, maka mari kita lanjutkan dengan membuat block.

Block - 1 (Project bucket)

Perhatikan block pertama (project bucket), ini untuk memisahkan data di dalam firebase yang akan berbentuk seperti folder. Dengan membuat block seperti itu, berarti kita memerintahkan agar data yang akan disimpan ditempatkan pada folder List_User

Block - 2 (StoreValue)

Pengiriman data ke firebase sama caranya dengan TinyDB, kita hanya butuh TAG dan VALUE.

TAG yang saya gunakan adalah dari Textbox NIK, kalian bisa menggunakan TAG secara random yang contohnya ada pada bahasan tinyDB.

VALUE pada block di atas adalah penggabungan beberapa data dalam satu Value yang dipisahkan dengan tanda |.

Block - 3 (Project bucket)

Disini kita perintahkan firebase agar data yang akan kita kirim, akan disimpan dalam folder berbeda yang nama foldernya disesuaikan dengan NIK.

Block 4 - 5 (Store Value)

disini kita mengirim data ke firebase dengan setiap data punya masing-masing TAG .

Tampilkan Data di LISTVIEW

Lanjutkan dengan membuat block untuk menampilkan data di listview agar bisa diedit/dihapus.

Perhatikan gambar block di atas, disini kita membuat 3 variabel yang akan digunakan, berikut penjelasannya

KodeFirebase. Karena untuk mengambil nilai dari sebuah TAG tidak dapat diambil secara langsung seperti pada TinyDB, maka kita membutuhkan sebuah kode agar saat kita dapat menentukan apa yang dilakukan pada sebuah Value (Data yang diambil). Pada contoh diatas belum digunakan.
ListNIK dan ListNama. Adalah variabel dalam bentuk tabel 1 kolom dimana kita akan mengirim data dari Firebase ke daftar tersebut, sebelum menampilkan ke ListView

Pada Block CMDLoad.Click, kita perintahkan untuk mengosongkan ListNIK dan ListNama, menentukan project bucket ke "List_User", membuat kode untuk Firebase lalu diakhiri dengan perintah GetTagList (Memerintahkan firebase untuk mengambil daftar TAG yang ada pada folder List_User.

Pada block FirebaseDB.Taglist adalah apa yang dilakukan setelah firebase mendapatkan daftar TAG yang kita maksud. disini kita memerintahkan untuk mengambil Value dari setiap TAG dalam daftar TAG yang didapat. Lalu diakhiri dengan menetapkan Elements dari componen ListView1 berasal dari ListNama.

Pada Block FirebaseDB.GotValue, disini adalah perintah untuk apa yang dilakukan firebase setelah mendapat sebuah Value.

Perhatikan InitializeLocal_Potong. tadi saat kita mengirim data ke firebase kita menggunakan tanda "|" antara isi datanya. maka disini kita kembali memotongnya/memisahkan data tersebut menggunakan perintah split (Hasil dari Split berbentuk list, dimana List tersebut bernama "Potong")

Setelah itu list yang bernama "Potong" tersebut kita ambil datanya menggunakan block "SelectItemInList" lalu untuk menghilangkan teks "NIK=" dan "NAMA=" kita gunakan perintah "ReplaceAllText" dan nilai dari hasil tersebut kita namakan dengan NIK dan NAMA (InitializeLocalNama dan InitializeLocalNIK).

Setelah mendapatkan data yang kita inginkan (NIK dan NAMA), kita mengirimkan data tersebut ke ListNIK dan LISTNama, dimana akan ditampilkan di Listview.

Menampilkan Data ke TextBox

pada Block Listview1.AfterPicking disinilah gunanya variabel "KodeFirebase". Pada firebaseDB1.GotValue kita tambahkan block IF dan ELSE IF untuk membedakan perintah yang akan dilakukan saat firebase mendapatkan sebuah Value dari TAG yang kita tentukan.

Menghapus Data

Setelah menampilkan data dari listview ke Textbox, maka kita dapat mengedit, ataupun menghapus data tersebut. (Untuk mengelola tombol save, edit, delete, Silahkan lihat tutorial tentang cara menggunakan TinyDB di AppyBuilder ).

Berikut adalah block untuk menghapus data :

Pada perintah cmddelete.Click, kita harus menghapus dari kedua folder (folder List_User dan folder NIKnya.
Pada fireDB1.Taglist kita tambahkan perintah IF dan ELSE, untuk membedakan perintah yang akan dilakukan firebase saat mendapatkan sebuah daftarTag (gunanya kita membuat variabel "KodeFirebase" pada block pertama di atas).

Oke. kawan-kawan... cukup sekian bahasan kali ini, jangan lupa tinggalkan komentar jika postingan ini bermanfaat untuk kamu. Terima kasih telah berkunjung!!!