Mengenal Firebase Google dan Cara Membuatnya dengan JavaScript

Last Updated on April 1, 2022 by

Database adalah suatu tempat di dalam komputer yang berfungsi sebagai tempat mengumpulkan dan menyimpan data.

Penyimpanan ini pun dilakukan secara sistemik di dalam komputer sehingga dapat diperiksa menggunakan suatu program komputer guna memperoleh informasi dari database tersebut.

Saat ini ada banyak sekali jenis database, beberapa diantaranya, operational database, analytical database, data warehouse, dan masih banyak lagi.

Belakangan ini database berbasis NoSQL sedang banyak muncul. Firebase adalah salah satu database yang sedang banyak digunakan oleh developer.

Firebase sendiri merupakan layanan dari Google. Firebase atau dikenal juga dengan Firebase Google adalah Backend as a Service untuk membuat aplikasi mobile maupun web.

Produk dari Firebase Google sendiri saat ini terdapat dua produk yakni, pertama adalah Firebase Realtime Database, kedua adalah Remote Config.

Namun pada artikel kali ini khusus membahas Firebase Realtime Database. Beberapa keuntungan menggunakan Firebase:

1. Terdapat versi free yang dapat diakses secara unlimited.
2. Dapat melakukan sinkronisasi data menggunakan Realtime Database.
3. Dapat diakses secara offline dan aplikasi ini tetap responsive saat offline karena adanya SDK Firebase Realtime.
4. User friendly.
5. Bisa diakses melalui seluler atau browser.

Sebelum lebih lanjut membahas mengenai Firebase Realtime Database, perlu diketahui mengapa database itu sangat penting. Database berfungsi untuk menyimpan data-data yang digunakan oleh suatu aplikasi atau website. Contoh, dalam website, database menyimpan data-data seperti jumlah visitor, konten yang diunggah, atau konten yang diedit.

Pada aplikasi atau website, database adalah inti dari seluruh aplikasi dan website, karena database menyimpan berbagai data terkait dengan aplikasi maupun website tersebut. Pada database juga disimpan data-data pengguna, yang mana data-data pengguna ini sangatlah penting mengingat banyaknya kejahatan yang memanfaatkan data pengguna aplikasi.

Pada dunia bisnis, database juga menyimpan data-data yang berkaitan dengan usaha, seperti stok produk, siapa pembelinya, data karyawan, dan masih banyak lagi.

Lalu apa bedanya Firebase Realtime Database dengan database lain yang ada saat ini ? Seperti yang sudah dijelaskan sebelumnya, Firebase Realtime Database adalah produk layanan dari Google. Firebase Realtime Database ada di dalam host pada cloud.

Data-data tersebut akan disimpan sebagai JSON dan disinkronkan secara realtime ke setiap klien ketika mereka terhubung. Saat Anda membangun aplikasi bersifat cross-platform dengan aplikasi dan software apapun, maka semua klien yang ada akan berbagi sebuah instance Realtime Database serta menerima update secara otomatis. Berikut beberapa keunggulan Firebase Realtime Database:

1. Realtime, artinya seluruh perangkat yang terhubung akan menerima update dalam waktu milidetik.

2. Firebase Google dapat diakses secara offline. Pengguna akan menerima notifikasi terkait hal-hal yang terlewat setelah dapat terhubung ke internet kembali.
3. Perangkat klien dapat mengakses, serta dapat diakses langsung dari perangkat seluler.
4. Firebase Realtime Database menjawab kebutuhan data aplikasi Anda pada skala tertentu dan membagi data di beberapa instance. Layanan ini akan menyederhanakan autentikasi pada project Anda dan mengautentikasi pengguna di instance database yang Anda miliki.

Firebase Google menjamin keamanan data-data Anda dengan sejumlah aturan- aturan keamanan yang dimiliki. Ini merupakan salah satu keunggulan lainnya dari Firebase Realtime Database yang memiliki sejumlah aturan keamanan. Aturan keamanan ini pun memiliki sintaksis mirip dengan JavaScript.

Ada beberapa jenis aturan pada Firebase Realtime Database yaitu; .read untuk menjelaskan apa dan kapan data boleh dibaca oleh user; .write berfungsi untuk menjelaskan apa dan kapan data boleh ditulis; .validate untuk menentukan tampilan nilai yang diformat dengan benar; indexOn untuk menetapkan turunan ke indeks guna mendukung pengurutan dan pembuatan query.

Tutorial Membuat Realtime Database dari Firebase Google

Dari segi keamanan, Realtime Database yang dimiliki oleh Firebase Google ini membantu Anda dalam mengidentifikasi pengguna atau autentifikasi, mengontrol akses pengguna ke database, serta memvalidasi data pengguna.

Lalu bagaimana cara membuat Realtime Database dari Firebase Google ini? Caranya mudah sekali! Anda dapat melakukannya dengan menggunakan ReactJS. Sebelum membuatnya di ReactJS, Anda perlu membuat akun firebase terlebih dahulu. Caranya:

1. Anda perlu mendaftar di firebase.google.com.
2. Setelah mendaftar, lalu buatlah proyek Firebase, pada Firebase Console, klik Buat Project. Anda juga dapat menonton project demo dengan mengklik Pelajari Project Demo yang ada di bawahnya.
3. Buat Nama Project Anda. Pada artikel ini project dinamai dengan proyek saya. Lalu jangan lupa mengklik centang persetujuan layanan di bawahnya.

4. Setelah itu Anda akan diarahkan ke halaman berikut ini. Silakan klik lanjutkan.

5. Selanjutnya konfigurasikan Google Analytics Anda. Lalu sesuaikan negara yang ingin Anda gunakan. Setelah menyetujui seluruh persyaratan klik Buat Project.
6. Setelah itu Anda akan mendapatkan halaman seperti berikut ini. Klik Build, lalu klik Realtime Database.

7. Buat database baru lalu pilih mode uji.

8.  Setelah itu klik ringkasan project. Klik tambahkan aplikasi. Ketik nama aplikasi Anda. Anda boleh menggunakan nama yang sama dengan project Anda boleh juga berbeda. Di sini saya menggunakan nama aplikasi ‘have fun’ Jika sudah selesai salin kode yang Anda dapat dari Firebase SDK.

apiKey: "AIzaSyBxJ6FphDVE_XXXXX ",
authDomain: "proyek-saya-XXXXXX",
databaseURL: "https://proyek-saya-XXXXXXXX",
projectId: "proyek-saya-XXXXX",
storageBucket: "proyek-saya-XXXXXX",
messagingSenderId: "1543XXXXX",
appId: "1:154301220947:XXXXXXXX",
measurementId: "G-XXXXXXX"

9. Implementasikan Firebase Anda pada React. Buat project baru atau pakai yang sudah ada. Contoh kode:

npx create-react-app react-db

10. Instal package firebase dalam project Anda.

npm i firebase

11. Setelah itu buatlah file baru. Beri nama firebase.js di dalam folder src dan tambahkan kode yang Anda dapatkan pada SDK.

import firebase from 'firebase';var firebaseConfig = {
apiKey: "AIzaSyBxJ6FphDVE_XXXXX ",
authDomain: "proyek-saya-XXXXXX",
databaseURL: "https://proyek-saya-XXXXXXXX",
projectId: "proyek-saya-XXXXX",
storageBucket: "proyek-saya-XXXXXX",
messagingSenderId: "1543XXXXX",
appId: "1:154301220947:XXXXXXXX",
measurementId: "G-XXXXXXX"
};export default firebase.initializeApp(firebaseConfig);

12. Apabila seluruh setup firebase sudah selesai, buatlah tampilan dan memanggil data yang berada di database kita. Ubah kode di dalam file App.js menjadi kode seperti dibawah ini:

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>
);
}
}

13. Tambahkan table untuk menampilkan hasil database.

<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&gt;

14. Insert data. Buat form input di bawah table yang sudah dibuat.

<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 insert data, Anda perlu menambhkan function dibawah component.Didmount.
createData = (val) => {
val.preventDefault();
const { fullname, email, photo } = this.state;
firebase.database()
.ref('/user')
.push()
.set({ fullname, email, photo })
.then(() => console.log('Data set.'));
}

Kemudian Save. Anda bsa mencoba insert beberapa data. Anda juga dapat melakukan menambah dan menghapus data. Berikut contoh functionnya:
a. Update Data
editData = (id) => {
const data = {
email: 'murnioktaviani@gmail.com',
fullname: 'Murni Oktaviani',
photo: 'https://cdn.myanimelist.net/images/characters/11/48547.jpg',
} firebase.database()
.ref(`/user/${id}`)
.update(data);}

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

Itulah penjelasan singkat tentang Realtime Database dari Firebase Google. Realtime Database ini cukup recommended untuk digunakan dalam web maupun aplikasi Anda.

Selain karena keamanannya cukup terjamin, penggunaannya pun tergolong cukup mudah karena menggunakan basis bahasa pemrograman JavaScript yang saat ini banyak digunakan oleh para developer di seluruh dunia.

Jangan lupa kunjungi Web App di https://appkey.id/ dan nyalakan notifikasi dari website kami agar Anda tidak ketinggalan artikel terbaru.