Real Time Data SPA Menggunakan Vue JS dan Firebase Database

Database real-time adalah sistem basis data yang menggunakan pemrosesan real-time untuk menangani beban kerja yang keadaannya terus berubah. Database real-time berguna untuk akuntansi, perbankan, hukum, rekam medis, multi media, pengendalian proses, sistem reservasi, dan analisis data ilmiah, permainan (game) dan lain-lain. dimana datanya berubah dengan sangat cepat dan dinamis. dan Firebase menyediakan sebuah layanan database real time, mari kita sinkronkan data dengan cloud-hosted database  tanpa SQL dari Firebase ini. Sehingga data disinkronkan ke semua klien secara realtime. Bagaimana caranya yuk ikuti tahapan langkah demi langkah pada catatan kali ini.

Pastikan Vue JS sudah terinstallasi, Installasi Vue JS seperti video berikut ini

setelah penginstallan vue js seperti video diatas, buka browser merujuk pada alamat:

http://localhost:8080

maka akan terbuka halaman utama atau index dari vue js tersebut.

dan isi paket file dari vue js yang telah diinstall adalah sebagai berikut:

Selanjutnya untuk menggunakan firebase real-time database kita membutuhkan paket firebase vuefire untuk mengikat vue dengan firebase. installasinya sebagai berikut, ketik:

npm install firebase vuefire --save

setelah selesai dan komplit buka file main.js:

kemudian didalam file main.js tersebut import vuefire dan gunakan vuefire untuk mengikat.

berikut main.js script lengkapnya:

selanjutnya kita buat dulu sebuah proyek dan tabel database dalam hal ini kita akan membuat tabel customers yang berisi data-data customer, baik langsung saja buka pada browser:

 https://firebase.google.com

dan silahkan masuk ke console untuk membuat proyek baru atau melihat proyek yg sudah ada. kemudian buat satu buah proyek yang namanya tergantung proyek yang kita bangun.

kemudian ambil snippet pada menu:

Add Firebase to your web app

berikut snippet nya yang akan kita copy:

setelah di copy selanjutnya buka file app.vue

tempelkan pada kode pada bagian config, sekaligus juga membaca database tabel customers dan design tabel dengan menggunakan bootstrap 4 untuk menampilkannya.

selanjutnya buka file index.html

untuk menambahkan bootstrap 4 melalui layanan CDN

berikut script index.html nya

selanjutnya untuk mencoba kita buat sebuah tabel customers dan data sebagaimana gambar berikut ini:

cara membuatnya bisa dilihat melalui video berikut ini

setelah itu lihat aplikasi pada browser http://localhost:8080 maka data yang dibuat pada firebase sudah terhubung dan tampil.

untuk melihat proses penambahan data dan menghapus data secara real time dan bahkan ketika kita offline pun data dapat melakukan sinkronisasi ketika kita sudah online, demo bisa dilihat melalui video berikut ini.