CRUD Firebase App Inventor Kodular

Pada postingan kali ini saya akan menjelaskan bagimana cara membuat aplikasi CRUD firebase dengan App Inventor dan Kodular. Konsep CRUD firebase App Inventor atau Kodular ini tidak jauh beda dengan konsep CRUD TinyDB dan CRUD MySQL yang sudah saya jelaskan sebelumnya, dimana aplikasi yang dibuat dapat menyimpan data, merubah data, dan mengahapus data ke database.

namun yang sedikit membedakan kali ini yaitu penggunaan tempat untuk menyimpan datanya (database), ya postingan kali ini menggunakan database Realtime database dari firebase untuk menyimpan data-data.

Apa itu firebase?

firebase adalah suatu layanan milik google yang memiliki banyak fitur yang dapat membantu pengembang aplikasi dalam meningkatkan peforma pada aplikasi yang sedang dibuat.

firebase memiliki banyak fitur yang bisa digunakan oleh para pengembang aplikasi, seperti authentication yang digunakan untuk mengelola pengguna dengan cara yang mudah dan aman yang disertai dengan penawaran beberapa metode autentikasi. Kemudian fitur lainnya Hosting dan Cloud Storage, hosting hanya khusus untuk aplikasi web modern yang digunakan untuk menyimpan asset web dan Cloud Storage digunakan untuk menyimpan atau membagikan gambar, video ataupun audio.

Kemudian fitur terakhir yang paling sering digunakan pada firebase yaitu database, firebase memberikan 2 pilihan jenis database ada Cloud firestore dan Realtime Database. Kedua jenis database ini merupakan database NoSQL yang dihosting secara cloud.

oke setelah kamu paham sedikit tentang database. Selanjutnya yaitu database firebase mana yang akan digunakan untuk aplikasi yang akan kita buat?

Tentunya Realtime Database. Mengapa? karena untuk saat ini App Inventor hanya bisa mendukung untuk penggunaan Realtime database. Peryataan ini diambil dari steve yang menjawab pertanyaan di community app inventor, kamu bisa baca lebih lanjut di sini.

Cara membuat aplikasi CRUD firebase App Inventor Kodular

Membuat Realtime database di firebase

Hal pertama yang wajib dilakukan adalah membuat database sebagai tempat menyimpan data-data. Kamu dapat membuatnya langsung di firebase. Masuk ke situs firebase kemudian klik mulai, login dengan menggunakan akun google.

Kemudian buat project dan masukkan nama projek yang akan dibuat. Pada tutorial kali ini saya membuat projek aplikasi arsip surat masuk. Maka nama projeknya yaitu “arsip surat masuk”. Setelah meberikan nama projek kamu selanjutnya akan diberikan pilihan untuk mengaktifkan google analytic atau tidak.

Baca juga : Upload gambar ke firebase App Inventor Kodular

Jika tidak ingin menautkan, klik untuk menonaktifkannya dan lanjut klik buat project. Google analytic berguna untuk memantau lalu lintas dalam mengakses database firebase dari aplikasi yang kamu buat.

Tunggu sampai prosesnya selesai, sampai nanti kamu akan secara otomatis masuk ke halaman seperti di bawah ini.

Setelah masuk ke halaman konsol firebase, selanjutnya adalah klik “Database” pada menu side bar sebelah kiri, kemudian scroll kebawah lalu pilih Realtime Database untuk membuat databasenya. Selanjutnya kamu akan diminta untuk membuat aturan kemanan untuk Realtime Database.

Kamu dapat memilih aturan sesuai dengan keinginan kamu, tetapi pada tutorial CRUD firebase dengan App Inventor Kodular ini, saya memilih aturan “mode pengujian”. Aturan ini mengizinkan siapa saja dapat membaca, merubah ataupun menambah data ke database.

Setelah selesai memilih aturan untuk database, maka kamu telah selesai membuat databasenya. Sekarang lanjut ke tahap selanjutnya.

Mendesain aplikasi CRUD firebase di App Inventor atau Kodular

Setelah membuat database di firebase, sekarang saatnya membuat desain aplikasinya. Untuk proses ini kamu dapat menggunakan App Inventor atau Kodular untuk membuat aplikasinya, disini saya membuat aplikasinya dengan App Inventor.

Login terlebih dahulu ke App Inventor, selanjutnya buat project dengan nama “Arsip Surat Masuk”. Aplikasi yang dibuat akan menyimpan bagian-bagian penting surat seperti Nomor surat, Pengirim, Perihal, dan Waktu masuk. Berikut dibawah ini adalah desain interface sederhana yang sudah dibuat.

Pada desain aplikasi CRUD firebase yang dibuat dengan App Inventor, disini saya menggunakan 3 komponen TextBox dan komponen DatePicker sebagai form untuk input data surat masuk. 3 TextBox terdiri dari TextBox Nomor Surat, TextBox Pengirim dan TextBox Perihal. Untuk komponen DatePicker digunakan untuk memilih tanggal yang akan di inputkan.

Selanjutnya ada 3 komponen Button yang masing-masing berfungsi untuk save data, update data, dan delete data. Kemudian komponen Listview digunakan untuk menampilkan data yang ada di database firebase. Kemudian ada juga komponen Notifier yang digunakan sebagai notifikasi pada aplikasi.

Terakhir, komponen paling penting yaitu firebase. Komponen ini digunakan untuk menghubungkan aplikasi dengan database di firebase.

Menghubungkan aplikasi dengan database firebase

untuk komponen firebase pada App Inventor agar dapat terhubung dengan database di firebase, kamu harus memasukkan firebaseURL dan FirebaseToken. Keduanya dapat kamu dapatkan di tampilan console firebase. Lihat gambar dibawah ini.

firebaseURL dapat kamu temukan di sidebar kiri, klik Database maka kamu akan melihat firabaseURL mu, kemudian untuk mendapatkan firebaseToken kamu bisa klik roda gear disebelah tulisan “Ringkasan Project” lalu klik setelan project kemudian salin kunci API web.

Apabila kunci API web-nya belum muncul, kamu dapat menambahkan aplikasi kedalam project. Di halaman Settings kamu dapat klik logo android untuk menambahkan aplikasi android.

masukan Nama paket android dan juga Nama aplikasi dengan nama bebas sesuai dengan keinginan kamu. Kamu dapat melihat gambar dibawah ini

untuk nama paket android, kamu bisa isi seperti ini com.namakamu.namaaplikasi . Lalu kemudian pada inputan kedua masukkan nama aplikasi, dan inputan yang ketiga sertifikat penandatanganan debug SHA tidak wajib diisi. Setela itu klik daftarkan aplikasi.

Setelah mendaftarkan aplikasi, kamu akan diminta untuk download file konfigurasi, silahkan download file konfigurasi tersebut yang bernama google-service.json yang mana didalam file tersebut terdapat kunci API web, Kemudian pada tahap “tambahkan firebase SDK” scroll kebawah klik “berikutnya” lagi sampai masuk ketahap ke empat yaitu tahap “Baca panduan memulai untuk android”, jika kamu ingin membaca panduannya kamu dapat mengikuti link arahan untuk membaca panduannya, atau kamu bisa langsung klik Lanjutkan ke console untuk masuk ke console firebase.

Setelah selesai, kamu dapat melihat kunci API web pada file google-service.json yang sudah didownload tadi. Kamu dapat membuka file tersebut dengan menggunakan aplikasi notepad windows. Kemudian cari tulisan “api -key”. Lihat gambar di bawah ini

Kode Program aplikasi CRUD firebase App Inventor Kodular

Agar aplikasi CRUD firebase dengan App Inventor atau Kodular ini dapat berjalan dengan baik, maka diperlukan program yang dapat membaca data, merubah data, menyimpan data, dan menghapus data pada database firebase.

Kode Program inisialisasi

Pada kode program inisialisasi diawali dengan membuat sebuah variabel baru “container database” yang di deklarasikan sebagai list kosong, yang mana variabel ini akan digunakan untuk menampung nilai tag list dari database firebase dan kemudian akan di jadikan nilai untuk element pada komponen ListView.

Selanjutnya kode blok program “when screen1 initialize” merupakan perintah yang dilakukan ketika pertamakali aplikasi terbuka akan mengerjakan perintah apa? nah disini saya memasukkan kode blok program “call firebaseDB1 GetTagList” yang berfungsi untuk memanggil firebase untuk mendapatkan Tag dalam bentuk list.

Setelah TagList didapat maka value pada TagList akan dimasukkan ke variabel list “container database”.

Prosedur clear berfungsi untuk membersihkan sisa text yang masih menempel pada TextBox ketika kamu sudah selesai input data, update data, ataupun delete data.

Kemudian ada juga kode blok program komponen DatePicker yang nantinya ketika tombol di tap akan menampilkan tanggal untuk input kapan waktu surat tersebut masuk keperusahaan.

Kode program menampilkan data ke textbox

Selenjutnya terdapat prosedur “tampilkan data to TextBox” ini berfungsi untuk menguraikan data yang sudah di pilih di ListView untuk ditampilkan pada komponen TextBox dan komponen DatePicker.

Kode program update dan delete CRUD firebase app inventor kodular

Adapun penjelasan dari kode program di atas, prosedur “save” merupakan sebuah fungsi save yang tidak mengembalikan hasil, pada prosedur ini berisi perintah untuk menyimpan data ke firebase. Prosedur ini juga akan di panggil ketika button save dan button update di tekan.

Pada button “Update” berisi perintah program untuk merubah data, kemudian pada button “Delete” berisi perintah untuk menghapus data.

Kode program save data CRUD firebase app inventor kodular

Build Aplikasi

Setelah proses pemrograman selesai maka dilanjutkan untuk menguji aplikasi yang dibuat, apakah sudah sesuai dengan harapan atau tidak. Klik build to apk untuk menjadikan project ini menjadi sebuah aplikasi yang siap dipakai.

Baiklah mungkin segitu saja untuk CRUD firebase dengan App Inventor atau Kodular, jika ada yang ingin ditanyakan silahkan beri komentar dibawah..