Cara Mengakses Data Realtime Database Firebase Menggunakan JavaScript

Aha.. Kali ini penulis iseng-iseng mencoba bagaimana cara mengakses data secara real-time dari database Firebase milik Google didalam laman web kita sendiri menggunakan JavaScript. Sebenarnya cara pengaksesan data ini bukan serta merta murni menggunakan JavaScript, tetapi Google-lah merilis library SDK JavaScript untuk mengakses data dari database Firebase dan dapat diakses melalui laman web https://www.gstatic.com/firebasejs tetapi, apabila kita akses secara manual yang muncul hanyalah tulisan "404. That's an error." Baik, tanpa panjang lebar lagi, marilah kita ulas bagaimana cara membaca data dari database Firebase ini..

Pertama yang penulisan lakukan adalah mendesain database di Firebase terlebih dahulu dengan desain seperti berikut ini:

{
  "sensor_suhu" :
    {
      "gudang1" :
        {
          "suhu_min":24,
          "suhu_max":29,
          "suhu":25,
          "kelembaban":78,
          "status_ac":"\"OTO\"",
          "kondisi_ac":"\"OFF\""
        }
    },
  "sensor_cahaya" :
    {
      "gudang1":
        {
          "cahaya":25,
          "cahaya_min":800,
          "rechek":1,
          "status_lampu":"\"OTO\""
        }
    },
  "sensor_gerakan" :
    {
      "pintu_depan_gudang1":
        {
          "gerakan":1,
          "recheck":1,
          "status_gerakan":"\"ON\""
        }
    }
}

Kedua,  penulisan mendesain "tempat untuk" menampung data yang diperoleh dari hasil membaca data dari database Firebase.

 

Tampilan Desain Untuk Menampung Data

Berikut ini contoh potongan kode tempat menampung data:

<table style="width:100%; text-align:center">
  <tr>
  <center><h1>SmartGudang Real-Time Monitoring Website</h1></center>
  </tr>
  <tr>
  <center><b><a href="http://anwarez96.blogspot.com" target="_blank" style="text-decoration: none">(C) 2021, @nWaREZ</a></b></center>
  </tr>
  <tr>
    <table style="border: 2px solid black; text-align:center">
      <tr>
     <td style="text-align:left"><font size="6"><b>Sensor</b></font></td>
        <td><font size="6"><b>Nilai</b></font></td>
        <td><font size="6"><b>Status</b></font></td>
      </tr>
      <tr>
        <td style="text-align:left"><b>Suhu</b></td>
        <td>Suhu saat ini <font id='suhu'>Tidak terbaca</font> dengan kelembaban <font id='kelembaban'>Tidak terbaca.</font></td>
        <td>AC <font id='ac'>Tidak terbaca.</font></td>
      </tr>
      <tr>
        <td style="text-align:left"><b>Cahaya</b></td>
        <td>Itensitas cahaya saat ini: <font id='cahaya'>Tidak terbaca.</font></td>
        <td>LAMPU <font id='lampu'>Tidak terbaca.</font></td>
      </tr>
      <tr>
        <td style="text-align:left"><b>Gerakan</b></td>
        <td><b id='gerakan'>TIDAK TERDETEKSI GERAKAN.</b></td>
        <td>ALARM <font id='alarm'>Tidak terbaca.</font></td>
      </tr>
    </table>
</table>

 

Ketiga, penulis menggunakan library JavaScript dari https://www.gstatic.com/firebasejs/[versi library]/firebase.js ini dan harus anda tempatkan paling atas sebelum kode JavaScript lainnya. Versi terakhir dari library ini adalah 8.4.3. Berikut ini contoh potongan kodenya:

<script src="https://www.gstatic.com/firebasejs/8.4.3/firebase.js"></script>

 

Setelah menginisialisasi library ini, barulah kita masukkan API Key, database URL, projectId dari database kita di Firebase melalui potongan kode dibawah ini:

var firebaseConfig = {
  apiKey: "xxxx",
  authDomain: "",
  databaseURL: "https://xxxxx-default-rtdb.firebaseio.com",
  projectId: "SmartGudang",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: "SmartGudang"
};

 

firebase.initializeApp(firebaseConfig);

 

Ganti xxxxx dan SmartGudang dengan database milik anda sendiri. Langkah selanjutnya adalah melakukan pengaksesan data dari database Firebase ini melalui contoh potongan kode berikut ini:

var rootSmartGudang = firebase.database().ref();

 

// Pembacaan nilai Sensor Suhu
var refSuhuGudang1 = rootSmartGudang.child('sensor_suhu/gudang1');
refSuhuGudang1.on('value', function(snapSuhu) {
  document.getElementById("suhu").innerHTML = "Tidak terbaca";
  document.getElementById("kelembaban").innerHTML = "Tidak terbaca.";
  document.getElementById("suhu").innerHTML = "<b>" + snapSuhu.val().suhu + " C</b>";
  document.getElementById("kelembaban").innerHTML = "<b>" + snapSuhu.val().kelembaban + " %</b>.";

  // Baca status penyalaan AC
  if (snapSuhu.val().status_ac.replace(/"/g,'') == "OTO") {
    document.getElementById("ac").innerHTML = "<b>otomatis menyala</b> disuhu <font color=\"red\"><b>" + snapSuhu.val().suhu_max + "</b></font>, padam disuhu <font color=\"green\"><b>" + snapSuhu.val().suhu_min + "</b></font>.";
  } else if (snapSuhu.val().status_ac.replace(/"/g,'') == "ON") {
    document.getElementById("ac").innerHTML = "<b>menyala terus</b>.";
  } else if (snapSuhu.val().status_ac.replace(/"/g,'') == "OFF") {
    document.getElementById("ac").innerHTML = "<b>dipadamkan</b>.";
  }
});

Penulis memberikan contoh hanya pembacaan data suhu, tetapi untuk pembacaan data lainnya juga sama caranya. Selain itu, penulis memberi warna merah pada kode-kode tersebut untuk memberitahukan korelasi antara desain database, "tempat" untuk menampung data dan pembacaan data di Firebase. Penulis menggunakan metode on() untuk pembacaan data agar ketika data didalam database berubah, maka yang tampilan di "tempat" menampung data akan ikut berubah secara real-time. Hasil dari pembacaan data datap dilihat dibawah ini:

 

Tampilan Hasil Pembacaan Data Dari Database Firebase

Cukup mudah bukan cara pembacaan data dari database Firebase? Semoga tulisan singkat ini bermanfaat bagi anda sekalian.. Silahkan mencoba dan semoga berhasil..