Media Pengembangan Web & App | by APPKEY

Pembuatan Website Backend Mengenal Firebase Realtime Database dan Cara Membuatnya dengan JavaScript

Mengenal Firebase Realtime Database dan Cara Membuatnya dengan JavaScript

-

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.
  1. Firebase Google dapat diakses secara offline. Pengguna akan menerima notifikasi terkait hal-hal yang terlewat setelah dapat terhubung ke internet kembali.
  2. Perangkat klien dapat mengakses, serta dapat diakses langsung dari perangkat seluler.
  3. 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

Artikel Terkait  Cara Membuat Database Baru | Xampp, MySQL, Access

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.

firebase-google-1

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

firebase-google-2

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

firebase-google-3

  1. 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"

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

npx create-react-app react-db

  1. Instal package firebase dalam project Anda.

npm i firebase

  1. 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);

  1. 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
;

Artikel Terkait  10 Pilihan Framework Node.Js yang dapat Anda Gunakan di Tahun Ini

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.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Pengertian Internet & Dampak Positif dan Negatif Internet

Internet mungkin bukan sesuatu yang asing lagi, sebab semua kalangan pasti tahu apa itu internet. Hanya saja jika ditanya...

Rekomendasi 10 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Proses Komunikasi: Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Jasa Pembuatan Website Untuk Toko Online

Perusahaan yang menyediakan Jasa pembuatan website untuk toko online bisa kita temukan dengan mudah di internet. Masing-masing dari perusahaan...

8 Contoh Search Engine Terbaik yang Paling Banyak Digunakan di Indonesia

Dulu jika ingin mencari informasi tentang apapun biasanya kita akan menanyakan kepada seseorang yang lebih mengetahui informasi, atau datang...

Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

7 Aplikasi Membuat Aplikasi Android Secara Offline

Aplikasi membuat aplikasi android saat ini banyak dicari penekun IT untuk membuat aplikasi Android secara offline tanpa harus menggunakan...

Jasa Web

Bisnis online

Pengembangan

Murah

Profesional

Toko online

SEO

Pemasaran

Tips

Jasa Aplikasi

Pembuatan Aplikasi

Bisnis online

Pemasaran

Istilah IT

TIPS

TOOLS

JASA

HARGA

Jasa Marketing

Istilah SEO

Teknik SEO

Tips Marketing

Paling Sering dibaca
Mungkin Anda Menyukainya