Firebase Realtime Database For Web Tutorial + Video Youtube


Firebase Realtime Database For Web Basis data pada sebuah web dapat dikatakan sebagai fungsi yang sangat penting dari sebuah aplikasi yang dirancang khusus dan bertujuan untuk diproses dan diakses melalui sistem internet. Biasanya database ini dikelola oleh admin website untuk mengumpulkan berbagai data dan menyajikannya sesuai dengan fungsi yang saling terkait dari data yang ada dalam sebuah aplikasi berbasis database.

Postingan ini sangat cocok bagi pemula untuk mempelajari dasar-dasar Firebase Realtime Database sehingga Anda dapat menerapkannya di proyek aplikasi web Anda berikutnya. Melalui tutorial langkah demi langkah ini Anda akan belajar cara menulis, memperbarui, membaca data dari database, pendengar, peristiwa, komponen kueri, cara membuat kueri database menggunakan fungsi pemesanan, dan beberapa fungsi kueri seperti limitToFirst(), limitiToLast(), startAt( ) dan banyak lagi.


Apa itu Firebase Realtime Database?


Firebase Realtime Database adalah database NoSQL yang dihosting di cloud yang memungkinkan Anda untuk menyimpan dan menyinkronkan data antar pengguna secara realtime dan terhubung langsung oleh sistem database di firebase.

Pada dasarnya ini berarti pengguna yang menggunakan dan berlangganan database mendapatkan pemberitahuan dalam milidetik setelah memperbaruinya. Anda dapat melihat skenario atau ikhtisar khusus dari data yang disinkronkan secara realtime ke setiap klien yang terhubung.


Pada deskripsi gambar di atas, kita dapat melihat bahwa data disinkronkan secara real time ke setiap klien yang terhubung. Sekarang Anda dapat memulai dengan firebase realtime database pricing gratis, kemudian menskalakan di seluruh dunia ke jutaan pengguna, hanya membayar untuk apa yang Anda gunakan.

Hal lain yang perlu disebutkan adalah bahwa data disimpan dalam format JSON, bukan tabel dan baris seperti dalam database relasional seperti pada kode FORMAT JSON berikut.


{
  "key1": value,
  "key2": value,
  "key3": {
    "key3-1": value,
    "key3-2": value
  }
}

Firebase Realtime Database Web


Pada postingan kali ini kami akan menjelaskan cara membuat firebase realtime web database yang bekerja dengan baik untuk sebuah project sederhana yang sangat penting. Secara umum firebase ini banyak digunakan oleh developer untuk aplikasi mobile android. 

Tapi jangan khawatir, tidak semuanya harus seperti itu! kita juga bisa menggunakan firebase untuk proyek web dengan menggunakan html, css, dan javascript disana. Untuk itu simak ulasan lengkapnya dibawah ini tentang firebase realtime web database.

Setting Up Project


Pertama, Anda harus membuat proyek di firebase console. Setelah Anda membuat proyek, buka tab "database" dan tekan tombol "buat database". Pilih "mulai dalam mode uji", tekan "berikutnya" dan "kemudian" selesai. Sekarang, pilih opsi "database waktu nyata" di dropdown. Dan begitulah, sekarang Anda memiliki database kosong baru.

Jika Anda masih bingung ikuti tutorial langkah-langkah dibawah ini untuk membuat project di firebase. Berikut ini cara membuat project di firebase:

  • Pertama login ke Firebase > Klik tombol Mulai.
  • Pada halaman "Your Firebase projects" klik + Add project.
  • Buat nama project example: db-firebs > klik tombol Continue.
  • Pada halaman "Configure Google Analytics" klik tab Select an account > Create a new account. Sesuaikan nama dengan nama project yang Anda buat.
  • Kemudian klik tombol Save.
  • Centang kotak yang berisi keterangan "I accept the Google Analytics terms" > Kemudia klik tombol Create project.
  • Tunggu proses Creating your project loading...
  • Terakhir klik tombol Continue.
  • Selesai...

Sekarang Anda memiliki proyek baru di firebase. Sebelum membuat project di firebase, tentunya harus ada aplikasi sederhana yang Anda buat berbasis web. Jika Anda tidak memilikinya jangan khawatir! karena kami juga menyediakan source code gratis yang bisa anda pelajari untuk membuat project di firebase.


Crud Firebase Web (Html, CSS, Javascript)


Ada 3 file kode pemrograman yang kita buat untuk membuat tampilan web sederhana seperti input data tabel yang dibuat dengan html, css, dan javascript.

Berikut ini kode html, css, dan javascript untuk membuat firebase realtime database for web tutorial - cliend side:

1. Kode HTML


Sekarang mari kita mulai membuat file proyek. Anda dapat membuka editor kode yang biasa Anda gunakan untuk membuat kode pemrograman. Kami menyarankan Anda untuk menggunakan editor kode "visual studio code" karena memiliki berbagai fitur dan fungsi yang berjalan secara optimal dan sangat baik untuk Anda gunakan sebagai pemula.

Untuk memulai membuat web view sederhana yang akan kita sinkronkan ke firebase disini kita buat dulu framework htmlnya. Sebelumnya kita harus membuat folder baru terlebih dahulu yang akan kita isi file-file di dalamnya. Sekarang buat folder baru tepatnya di komputer Anda dengan lokasi penyimpanan yang Anda sesuaikan sendiri.

Kemudian anda bisa membuka code editor yang anda gunakan dengan cara klik File > Open folder > lalu sesuaikan dengan folder yang anda buat tadi. Setelah itu, buat file baru bernama index.html. Berikut adalah kode HTML yang telah kami siapkan. Copy kode html berikut dan paste di code editor yang Anda gunakan.


2. Kode CSS


Setelah membuat kode html, sekarang kita berikan sedikit style pada tampilannya. Sekarang Anda dapat membuat file baru dan beri nama style.css. Berikut adalah kode CSS yang telah kami siapkan. Salin kode CSS berikut dan tempel di editor kode yang Anda gunakan.


3. Kode JavaScript


Setelah membuat kode css, sekarang kita berikan fungsi untuk membuat sistem bekerja dengan baik. Sekarang Anda dapat membuat fike baru dan beri nama functions.js. Berikut adalah kode JS yang telah kami siapkan. Salin kode JS berikut dan tempel di editor kode yang Anda gunakan.


Sekarang Anda dapat melihat hasil tampilan web sederhana yang dibuat dengan html, css dan javascript. Anda dapat melihat tampilannya dengan membuat file "index.html" di folder penyimpanan tempat Anda menyimpannya.

Hasil Tampilan


Berikut ini hasil tampilan dari kode sumber diatas:



Tapi itu hanya tampilan web biasa! dan itu tidak bekerja dengan sempurna. Di sini kita akan membuat app tersebut terhubung ke database firebase realtime. Untuk keterampilan yang berguna dari kami, baca sampai akhir tutorial database firebase realtime untuk web di bawah ini.

Firebase Realtime Database For Web Tutorial - Client Side


Sekarang Anda sudah mempunyai bahan atau source code yang akan ditautkan di firebase. Saatnya memulai mengkoneksikan program berbasis web tersebut ke firebase untuk membuat databasenya.

1. Membuat Firestore Database


Berikut ini adalah cara membuat firestore database:

  • Pertama buka firebase project yang Anda buat tadi.
  • Pada dashboard firebase pilih menu Firestore Database > Create Database.
  • Pada form "Create Database" pilih Start in test mode > kemudian klik tomnol Next.
  • Selanjutnya langsung saja klik tombol Enable.
  • Tunggu Provisioning Cloud Firestore selesai...

Sekarang Anda sudah memiliki database kosong baru di firebase. Selanjutnya kita akan membuat Realtime Database.

2. Membuat Realtime Database


Perhatikan bahwa aturan ini mewakili bagian terpenting dari keamanan database Anda. Oleh karena itu, Anda harus sangat berhati-hati dalam mengetik peran keamanan dan memberikan akses ke aplikasi Anda.

Berikut ini adalah cara membuat realtime database:

  • Pada dashboard firebase pilih menu Realtime Database > Create Database.
  • Pada form yang ditampilkan Set up database bagian "Database options" klik tombol Next.
  • Selanjutnya pada bagian "Security rules" pilih Start in locked mode > klik tombol Enable.
  • Tunggu proses selesai...

Sampai disini Anda harus sangat berhati-hati mengetik peran keamanan dan memberikan akses ke aplikasi Anda, pengguna sekarang pergi ke ikhtisar proyek dan buat aplikasi penolak hit aplikasi web baru dan kemudian lanjutkan.

3. Setelan Project Overview


Sekarang buka ikhtisar proyek dan buat aplikasi web baru tekan project overview dan kemudian lanjutkan. Kalau sampai disini Anda merasa sudah bingung jangan khawatir! Anda bisa mengikuti tips singkat padat dan jelas di bawah ini.

Berikut ini adalah cara membuat project overview di firebase:

  • Pada halaman firebase klik Project Overview.
  • Sekarang untuk menambahkan firebase ke aplikasi Anda bisa klik dan pilih melalui </> web untuk Get started by adding Firebase to your app.
  • Pada halaman overview "Add Firebase to your web app" isikan nama web app anda. Example: firebase app / nama project yang kami buat.
  • Setelah itu klik tombol Register app.
  • Scroll ke bawah dan klik tombol Continue to console.
  • Kemudian klik tab setelan Project Overview > Project settings.
  • Pada halaman "Project sttings" scroll ke bawah dan lihat keterangan pada Your apps. 
  • Selanjutnya pada bagian SDK setup and configuration pilih CDN.
  • Salin dan tempel skrip yang diberikan ke bagian bawah tag <body> atau tepat diatas tag </body> di file HTML.

Setelah kami mengamati dari kode yang di salin disana ternyata kode tersebut tidak bekerja dan kami memodifikasi kode tersebut agar program berjalan di firebase. Sekarang Anda bisa menyalin kode yang telah kami riset untuk mengoneksikannya ke firebase database.

Salin kode berikut ini dan tempelkan di file "index.html" tepat di atas tag penutup </body>.


<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-database.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "AIzaSyANv58FSKun5k5JaCNMTDM8I0IZtATgsVY",
    authDomain: "db-firebs.firebaseapp.com",
    databaseURL: "https://db-firebs-default-rtdb.firebaseio.com",
    projectId: "db-firebs",
    storageBucket: "db-firebs.appspot.com",
    messagingSenderId: "1042574511318",
    appId: "1:1042574511318:web:e6c54021e531fc4c11cd77"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>
  <script src="./functions.js"></script>
</body>
</html>

Ganti tulisan yang saya tandai warna merah dari kode diatas dengan kode yang di SDK setup and configuration > CDN Anda di firebase > Project settings tadi. 

Sekarang kembali ke firebase dan pada dashboard pilih menu "Realtime Database" dan klik tab Rules. Rubah kode dari false menjadi true seperti kode berikut ini.


{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Kemudian klik tombol Publish.

Sampai tahap ini kita akan membuat program yang berfungsi dengan baik. Salin kode functions.js berikut ini dan ganti dengan kode sebelumnya.


Sekarang buka file index.html kembali dan input data sesuai yang ada pada aplikasi di web. Untuk melihat sistem yang terkoneksi ke database Anda bisa melihat data yang masuk ke database pada Firebase di menu Realtime Database > Data.


Selamat sekarang Anda telah berhasil membuat database di firebase. Untuk langkah selanjutnya kita akan menyimpan, memperbarui, dan menghapus data di firebase realtime database.


Cara Menyimpan, Memperbarui, dan Menghapus Data Di Firebase Realtime Database


Hal penting lainnya adalah menambahkan link dn ke database firebase untuk tujuan membuat firebase bekerja dengan baik. Sekarang mari tambahkan event klik ke tombol tambahkan Anda sekarang untuk mengakses fungsi firebase yang kita perlukan untuk membuat instance dari database firebase sebelumnya.

Pertama-tama, untuk memanfaatkan berbagai fungsi Firebase, kita perlu membuat instance database.


const database = firebase.database();

References and Children


Seperti yang saya sebutkan sebelumnya, data di Firebase Realtime Database disimpan dalam format JSON, dan setiap node dari pohon JSON adalah reference. Dengan kata lain, referensi adalah tempat tertentu di mana data disimpan dalam database. Kita dapat menyimpan referensi dalam sebuah konstanta sehingga kita dapat menambahkan data ke dalamnya dengan sintaks berikut:


const usersRef = database.ref('/users');

Referensi dapat menyimpan berbagai jenis data seperti string atau angka, dan yang paling penting adalah objek. Objek atau node ini yang menyimpan data pada gilirannya disebut children (nested references). Sama seperti referensi, kita dapat menyimpan anak-anak ini dalam konstanta menggunakan sintaks berikut:


const usersRef = database.ref('/users');
const normalUsersRef = usersRef.child('normal_users');
const superUsersRef = usersRef.child('super_users');

Simpan Data


Untuk menyimpan data di Firebase Realtime Database, kita perlu menggunakan metode yang ditetapkan pada referensi (di mana dalam database kita ingin data ditambahkan). Kemudian lewati objek yang berisi data sebagai parameter.


const database = firebase.database();
const usersRef = database.ref('/users');
addBtn.addEventListener('click', e => {
  e.preventDefault();
  usersRef.child(userId.value).set({
    first_name: firstName.value,
    last_name: lastName.value,
    age: age.value
  });
});

Sekarang jika Anda mencoba mengisi data di formulir dan mengklik tombol tambah, pesan kesalahan akan ditampilkan di konsol browser Anda.


Saat ini, Anda dapat menyimpan dan memperbarui data di database Anda dari konsol, tetapi tidak seorang pun termasuk Anda yang dapat melakukannya dari aplikasi Anda. Mengapa ? Anda mungkin bertanya. Yah, itu karena aturan database menolak akses eksternal ke database untuk saat ini.

Aturan database adalah bagian terpenting dari keamanan di Firebase Realtime Database. Karena aturan memutuskan siapa yang memiliki akses ke bagian mana dari database dan hak istimewa apa yang mereka miliki apakah itu dibaca atau diperbarui.

Karena kami sedang bereksperimen dengan database, kami akan menggunakan seperangkat aturan sementara sehingga kami dapat menerapkan operasi yang berbeda. Namun di masa mendatang, setelah aplikasi Anda siap untuk didistribusikan, Anda harus mempelajari dan menetapkan aturan dengan cara yang benar!

Oleh karena itu, kembali ke konsol Firebase, buka tab "database", aturan dan atur seperti berikut ini:


{
   "rules": {
     ".read": true,
     ".write": true
   }
 }

Sekarang, kembali ke browser dan isi formulir, lalu kembali ke konsol dan ini dia! Data pertama Anda telah berhasil disimpan!

Sampai sekarang, id pengguna hard-coding yang merupakan praktik buruk. Biasanya, Anda ingin id dibuat secara otomatis. Oleh karena itu kita perlu menggunakan push method dan key property.


const database = firebase.database();
const usersRef = database.ref('/users');
addBtn.addEventListener('click', e => {
  e.preventDefault();
  const autoId = usersRef.push().key
  usersRef.child(autoId).set({
    first_name: firstName.value,
    last_name: lastName.value,
    age: age.value
  });
});

Metode push ini menghasilkan lokasi anak baru menggunakan kunci unik dan mengembalikan referensinya. Sedangkan key property berisi kunci tersebut.

Perbaharui data


Untuk memperbarui data, kita perlu menggunakan update metode. Metode ini mengambil objek sebagai parameter, yang berisi data baru yang ingin kita tempatkan di lokasi (referensi) tertentu dalam database.


const database = firebase.database();
const usersRef = database.ref('/users');
updateBtn.addEventListener('click', e => {
  e.preventDefault();
  const newData = {
      first_name: firstName.value,
      last_name: lastName.value,
      age: age.value
  };
  usersRef.child(userId.value).update(newData);
});

Dengan update metode ini kita juga bisa menambahkan nilai dalam database ke lebih dari satu referensi sekaligus. Untuk melakukan itu, kita perlu membuat objek dengan data baru. Kita juga perlu membuat satu lagi yang berisi referensi ke tempat kita ingin menulis nilainya.


const database = firebase.database();
const usersRef = database.ref('/users');
addBtn.addEventListener('click', e => {
  e.preventDefault();
  const newData = {
      first_name: firstName.value,
      last_name: lastName.value,
      age: age.value
  };
  const autoId = usersRef.push().key;
  const updates = {};
  updates['/users/' + autoId] = newData;
  updates['/super-users/' + autoId] = newData;
  database.ref().update(updates);
});

Hapus data


Menghapus nilai dari database cukup sederhana, kita hanya perlu memanggil metode remove pada referensi ke nilai itu. Perlu diingat bahwa dengan metode ini kita dapat menghapus kunci sederhana dan nilainya serta referensi lengkap dengan children.


const database = firebase.database();
const usersRef = database.ref('/users');
removeBtn.addEventListener('click', e => {
    e.preventDefault();
    usersRef.child(userId.value).remove();
});

Hal lain yang perlu disebutkan adalah bahwa kita dapat menggunakan janji untuk mengetahui apakah operasi penghapusan berjalan dengan benar atau tidak.


const database = firebase.database();
const usersRef = database.ref('/users');
removeBtn.addEventListener('click', e => {
    e.preventDefault();
    usersRef.child(userId.value).remove()
    .then(()=> { console.log('User Deleted !'); })
    .catch(error => { console.error(error); });
});

Cara Membaca Data Di Firebase Realtime Database


Untuk membaca data di Firebase Realtime Database, kita perlu melampirkan listener ke reference atau referensi di database. Oleh karena itu kita perlu menggunakan metode on ini, maka kita dapat mengatur events yang berbeda untuk didengarkan.

Events


Jadi mari kita mulai dengan child_added. Peristiwa ini akan memicu fungsi panggilan balik setiap kali simpul atau kunci dan nilai ditambahkan ke referensi.


const database = firebase.database();
const usersRef = database.ref('/users');
usersRef.on('child_add', snapshot => {
    console.log('Child added !');
});

child_changed akan memicu fungsi panggilan balik setiap kali pembaruan terjadi pada referensi.


const database = firebase.database();
const usersRef = database.ref('/users');
usersRef.on('child_changed', snapshot => {
    console.log('Child updated !');
});

child_removed akan memicu fungsi panggilan balik setiap kali anak dihapus dari referensi.


const database = firebase.database();
const usersRef = database.ref('/users');
usersRef.on('child_removed', snapshot => {
    console.log('Child removed !');
});

Dan akhiran value yang akan melakukan hal yang sama dari semua acara yang telah disebutkan ditambah acara lain yang juga disebut child_moved.


const database = firebase.database();
const usersRef = database.ref('/users');
usersRef.on('value', snapshot => {
    console.log('An event occured !');
});

Metode on terus menunggu event terjadi, lalu memicu fungsi callback. Namun, ada metode once sekali yang seperti namanya, hanya mendengarkan suatu peristiwa sekali dan kemudian memicu fungsi panggilan balik. Jadi jika peristiwa itu terjadi lagi, fungsi panggilan balik tidak akan dipicu untuk kedua kalinya.


const database = firebase.database();
const usersRef = database.ref('/users');
usersRef.once('child_removed', snapshot => {
    console.log('Child removed !');
});

Snapshot


Parameter fungsi panggilan balik yang saya panggil snapshot berisi informasi yang berbeda seperti nilai data baru, anak, dan kunci. Jadi, misalkan kita ingin mendapatkan nilai baru yang diberikan saat child_changed event terjadi. Untuk melakukan itu kita dapat menggunakan metode val dari objek snapshot.


const database = firebase.database();
const usersRef = database.ref('/users');
usersRef.on('child_added', snapshot => {
    console.log(snapshot.val());
});

Cara Query Database di Firebase Realtime Database


Kueri di Firebase Realtime Database cukup sederhana. Kueri terdiri dari referensi, fungsi pemesanan, dan fungsi kueri. Maksudnya adalah awalnya data diurutkan berdasarkan kriteria tertentu, kemudian disaring oleh fungsi query juga berdasarkan kriteria lainnya.

orderByKey


Fungsi ini mengurutkan data referensi setelah perbandingan berdasarkan tombol. Jika kunci dibuat secara otomatis, kunci yang dihasilkan paling baru dianggap yang terbesar.

Agar lebih jelas mari kita ambil database ini sebagai contoh:


{
    users: {
        -Ln71n0f3c5pndQie2fo: {
            age: 32,
            first_name: "Adelina",
            last_name: "Pasaribu"
        },
        -Lt51n0f3c5pndRie2fp: {
            age: 28,
            first_name: "Wilson",
            last_name: "Pasaribu"
        },
        -Zt71n0f366pndQie2fo: {
            age: 24,
            first_name: "Elisabeth",
            last_name: "Pasaribu"
        },
        -Mt29nf03c5pndQie23f: {
            age: 30,
            first_name: "Awiel",
            last_name: "Pasaribu"
        }
    }
}

Sekarang mari kita pertimbangkan dengan kueri berikut ini:


usersRef.orderByKey().limitToLast(2).on('value', snapshot => {
    console.log(snapshot.val());
});

Kueri ini mengembalikan 2 pengguna terbaru dalam referensi pengguna karena kami menggunakan fungsi pemesanan limitToLast(2). Namun, jika kita menggunakan limitToFirst(2) kita akan mendapatkan pengguna tertua (berdasarkan kapan mereka ditambahkan ke referensi, bukan usia).

orderByChild

Fungsi ini sangat mirip dengan klausa where dalam SQL, sehingga mengurutkan hasil berdasarkan nilai kunci tertentu dalam referensi.

Contoh kode pertama:


usersRef.orderByChild('age').limitToFirst(2).on('value', snapshot => {
    console.log(snapshot.val());
});

Kueri ini akan mengembalikan 2 pengguna termuda (Adelina Pasaribu dan Awiel Pasaribu).

Contoh kode kedua:


usersRef.orderByChild('first_name').startAt('P').on('value', snapshot => {
    console.log(snapshot.val());
});

Hasilnya hanya akan berisi pengguna yang nama depannya adalah Wilson dan Awiel. Nah, jika Anda sedikit bingung dengan hasilnya, jangan khawatir, karena fungsi query startAt sedikit rumit. Faktanya, startAt mengambil seluruh rentang data sebagai kriteria, bukan hanya satu. Jadi dalam contoh di atas, fungsi ini mengembalikan pengguna yang nama depannya dimulai dengan huruf P dan setiap huruf yang muncul setelahnya. Kita juga bisa melakukan kebalikannya menggunakan endAt. Jadi jika kita menggunakan endAt('K'), dalam hal ini hanya pengguna yang nama depannya adalah Adelina yang akan dipilih.

Contoh kode ketiga:


usersRef.orderByChild('last_name').equalTo('Doe').on('value', snapshot => {
    console.log(snapshot.val());
});

Seperti yang Anda duga, hasilnya akan berisi setiap pengguna yang memiliki Pasaribu sebagai nama belakang mereka.

orderByValue


Fungsi pemanggilan ini hanya berfungsi pada referensi yang berisi nilai yang sebanding.

Contoh referensi:


{
  communities: {
    com1: 265,
    com2: 700,
    com3: 20,
    com4: 301,
    com5: 532
  }
}

Contoh query:


usersRef.orderByValue().limitToFirst(3).on('value', snapshot => {
    console.log(snapshot.val());
});

Hasil query ini akan berisi 3 komunitas dengan jumlah terendah, sehingga hasilnya adalah com3, com1, dan com4.

Kesimpulan


Beberapa orang mungkin bertanya seperti ini: Apakah Ini Yang Perlu Saya Ketahui Tentang Firebase Realtime Database? Saya dapat mengatakan ya kepada pemula yang ingin mengetahui bagaimana data terstruktur, dan bagaimana operasi yang berbeda bekerja (menyimpan, memperbarui, menghapus, dan membaca data).

Namun, untuk seseorang yang serius berpikir untuk membangun produk dunia nyata, jawabannya pasti tidak. Karena masih banyak lagi yang harus dipelajari, seperti praktik terbaik untuk menyusun data dalam database untuk kueri yang lebih mudah dan terorganisir. Dan yang paling penting aturan keamanan yang pada gilirannya terkait dengan komponen penting lainnya dari keseluruhan SDK Firebase yang merupakan bagian otentikasi.

Jika Anda tertarik untuk mempelajari cara berinteraksi dengan database dari server node, pastikan untuk membaca artikel ini ini terlebih dahulu. Demikian postingan kali ini tentang Firebase Realtime Database For Web Tutorial. Semoga artikel ini bermanfaat dan dapat membantu Anda. Yuk bagikan artikel ini untuk membantu teman-teman yang lain. Terima kasih!
Next Post Previous Post
5 Comments
  • Unknown
    Unknown April 8, 2022 at 9:35 PM

    ada contoh full codingnya ga kak??

    • Admin
      Admin April 10, 2022 at 7:21 PM

      Ada

  • supratman
    supratman May 26, 2022 at 9:12 AM

    Ketemu error : Uncaught ReferenceError: Firebase is not defined
    boleh di-share bos full coding-nya

    • Admin
      Admin May 26, 2022 at 6:42 PM

      Itu sudah ada di Hasil Tampilan dan kode sumber. Klik saja HTML, CSS, dan JS pada Hasil Tampilan Codepen diatas.

Add Comment
comment url