Hallo semuanya kali ini saya ingin share tentang salah satu fitur keren dari firebase yaitu Firebase Realtime Database. Oke tapi sebelumnya apa itu ?

Jadi sederhananya Firebase Realtime Database ini adalah sebuah layanan dari Firebase yang membuat kita memungkinkan menggunakan database secara real time dan juga kita dapat mengaksesnya secara offline ketika tidak ada akses internet.

Gimana keren banget kan salah satu layanan dari Firebase ini. Dan nantinya kita akan membuat sebuah CRUD menggunakan Firebase Realtime Database.

Oke langsung aja kita mulai.

Persiapan

Pertama, Pastikan kalian sudah punya akun firebase terlebih dahulu jika belum silahkan daftar disini.

Kedua, Buat project firebase baru disni dengan nama project bebas saja namun disini saya akan memberi nama pada project saya react-database.

Ketiga, Setelah itu masuk ke halaman Realtime Database pada sidebar kanan, klik mulai dan klik next juga atur region kalian.

Keempat, Buat Database baru dan pilih mode uji

Kelima, Tambahkan aplikasi kalian ke firebase dan tulis nama aplikasi kalian sesuai nama project kalian atau jika berbeda juga tidak apa-apa.

Jika sudah selesai salin kode yang di dapat dari Firebase SDK

var firebaseConfig = {
 apiKey: "AIzaXXXXXXX",
 authDomain: "reactjsauthXXXX",
 databaseURL: "https://reactjsauthXXXX.com",
 projectId: "reactjsauth-e345b",
 storageBucket: "reactjsauthxxxxxx",
 messagingSenderId: "531xxxxx",
 appId: "1:5312xxxxxxxxx",
 measurementId: "G-xxxxxxx"
};

Implementasi Firebase

Pertama silahkan buat project baru atau jika sudah ada boleh di pakai saja.

npx create-react-app react-db

Setelah itu install package firebase di dalam project kalian

npm i firebase

Jika sudah buat file baru bernama firebase.js di dalam folder src lalu tambahkan kode yang di dapat dari Firebase SDK tadi.

import firebase from 'firebase';var firebaseConfig = {
 apiKey: "AIzaXXXXXXX",
 authDomain: "reactjsauthXXXX",
 databaseURL: "https://reactjsauthXXXX.com",
 projectId: "reactjsauth-e345b",
 storageBucket: "reactjsauthxxxxxx",
 messagingSenderId: "531xxxxx",
 appId: "1:5312xxxxxxxxx",
 measurementId: "G-xxxxxxx"
};export default firebase.initializeApp(firebaseConfig);

Read Data

Jika semua setup firebase telah selesai maka kita akan membuat tampilan dan memanggil data yang berada di database kita.

Silahkan ubah kode di dalam file App.js seperti kode dibawah.

import React, { Component } from 'react';
import firebase from './firebase';export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      fullname: null,
      email: null,
      photo: null,
      isLoading: null,
    }
  }  componentDidMount() {
    firebase.database().ref('/user')
      .on('value', snapshot => {
        const data = snapshot.val();
        this.setState({ data: data, isLoading: false });
      });
  }

  render() {
    const { data, isLoading } = this.state;
    return(
      <div>
        <center>
          <br/><br/><br/>
          <h3>List Member</h3>
          {/* Table List Member */}
        </center>
      </div>
    );
  }
}

Setelah itu tambahkan table untuk menampilkan hasil dari database dibawah tag h3.

<table border="1">
  <thead>
    <tr>
      <th>Image</th>
      <th>Fullname</th>
      <th>Email</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    {!isLoading && data !== null && (
     Object.keys(data).map((val, key) => (
       <tr key={key}>
         <td>
           <img
             src={data[val].photo}
             alt={data[val].fullname}
             width="100"
           />
         </td>
         <td>{data[val].fullname}</td>
         <td>{data[val].email}</td>
         <td>
           <button onClick={() => this.editData(val)}>
             Edit
           </button>
           <button onClick={() => this.deleteData(val)}>
             Delete
           </button>
         </td>
      </tr>
      ))
    )}
  </tbody>
</table>

Jika kita save maka tampilannya akan seperti ini karena data masih kosong karena belum ada data pada database kita, Nah jadi kita buat fitur untuk insert datanya.

Insert Data

Kita buat form input terlebih dahulu dibawah table yang sudah kita buat tadi dengan kode berikut.

<br /><br /><br /><h3>Tambah Data</h3>
<form onSubmit={this.createData}>
  <label htmlFor="fullname">Fullname</label><br />
  <input
    id="fullname"
    type="text"
    name="fullname"
    required
    onChange={(e) => {
      this.setState({
        fullname: e.target.value
      })
    }}
  /><br /><br />  <label htmlFor="email">Email</label><br />
  <input
    id="email"
    type="email"
    name="email"
    required
    onChange={(e) => {
      this.setState({
        email: e.target.value
      })
    }}
  /><br /><br />  <label htmlFor="image">Link Photo</label><br />
  <input
    id="image"
    type="text"
    name="image"
    required
    onChange={(e) => {
      this.setState({
        photo: e.target.value })
      }}
  /><br /><br />

  <button type="submit">Tambah</button></form>

Setelah itu kita tambahkan function dibawah componentDidmount

createData = (val) => {
  val.preventDefault();
  const { fullname, email, photo } = this.state;
  firebase.database()
  .ref('/user')
  .push()
  .set({ fullname, email, photo })
  .then(() => console.log('Data set.'));
}

Silahkan kalian save dan coba insert beberapa data.

Update Data

Tambahkan function ini dibawah function createData

editData = (id) => {
  const data = {
   email: 'yuisenpai@gmail.com',
   fullname: 'Yui Hirasawa Senpai',
   photo: 'https://cdn.myanimelist.net/images/characters/11/48547.jpg',
  }  firebase.database()
  .ref(`/user/${id}`)
  .update(data);}

Delete Data

Tambahkan function ini dibawah function editData

deleteData = (id) => {
  firebase.database()
  .ref(`/user/${id}`).remove();
}

Nah dengan begini semua fitur crud kita sudah complete dan silahkan kalian save dan coba compile ulang.

Gimana gimana keren banget kan kita bisa melakukan operasi crud secara real time, nah coba nanti kalian perbaiki lagi tampilannya dengan menggunakan framework css seperti bootstrap atau tailwind.

Oke sampai jumpa sharing session berikutnya.

Source Code disini