Firebase
Platform Firebase dari Google memberikan banyak kemudahan developer dalam mengembangkan aplikasi web mulai dari hosting, database maupun analitik.
Salah satu yang Saya pakai adalah Cloud Firestore.
Init
Untuk memakai data pada Cloud Firestore kamu harus mempunyai app yang sudah dibuat di halaman proyek di Firebase console dan kemudian pilih app Web
Setelah aplikasi web ter-registrasi, kunci penting yang harus kamu lihat adalah konfigurasi firebase
atau firebase config
yang bisa dilihat pada Project Settings (gambar gear sebelah Project Overview pada gambar diatas).
Firebase Config
firebase config
diperlukan untuk menghubungkan aplikasi web yang kamu buat dengan layanan dari Firebase seperti Cloud Firestore.
Firebase menyediakan 2 tipe konfigurasi yaitu CDN dan Config.
firebase config
berupa Config cocok untuk aplikasi yang di-generate oleh skrip seperti proyek Node.js dengan React, Vue dsb, sedangkan CDN cocok untuk aplikasi web yang jauh lebih sederhana dalam pengembangannya.
Cloud Firestore
Cloud Firestore sebenarnya adalah database tetapi bedanya tidak seperti MySQL ataupun MongoDB, Cloud Firestore banyak memberikan fitur yang lebih seperti API, realtime update, data sync dan terintegrasi dengan layanan Cloud Google. Jadi kalau memang dibutuhkan integrasi dengan Google maka database ini cukup cocok.
Lalu bagaimana cara meng-upload data ke Cloud Firestore?
Ada banyak cara, data bisa didapat dari inisialisasi yang dilakukan secara otomatis maupun manual. Secara otomatis adalah melalui skrip dan secara manual adalah menambah data langsung melalui User Interface dari Cloud Firestore.
Untuk upload data secara otomatis melalui skrip, silahkan lihat postingan berikut Upload JSON ke Firestore.
Komponen Vue
Klien web yang akan mengkonsumsi data dari Cloud Firestore ini adalah komponen yang dibuat dari Vue.
Beberapa variabel yang perlu di ambil secara runtime adalahkaos_title
, kaos_addr
dan kaos_img
, ketiga variabel tersebut akan melengkapi data pada komponen kaos.vue
yang kodenya adalah sebagai berikut,
kaos.vue
<template>
<div class="card kaos-showcase">
<div class="card-content" v-if="dataLoaded">
<h1 class="has-text-centered has-text-weight-normal neon">
<span class="underline-magical"
><a href="https://www.designbyhumans.com/shop/equan">{{
kaos_title
}}</a></span
>
</h1>
<div class="pembatas"></div>
<div class="has-text-centered">
<img loading="lazy" alt="equan's dbh tee" v-bind:src="kaos_img" />
</div>
<p class="has-text-centered buy-button">
<a v-bind:href="kaos_addr" class="button is-success">Buy Now</a>
</p>
<div class="has-text-centered shop-all-scoped">
<a
class="has-text-weight-medium shop-all-link"
href="https://www.designbyhumans.com/shop/equan"
>Shop All Designs</a
>
</div>
</div>
</div>
</template>
<script>
const DEFAULT_DBH_ADDR = "https://www.designbyhumans.com/shop/stratovolcano/1545593/";
const DEFAULT_DBH_TITLE = "Stratovolcano";
const DEFAULT_DBH_IMG =
"https://cdn.designbyhumans.com/product_images/p/1545593.65.094f3S7YyNAAA-650x650-b-p.png";
export default {
data() {
return {
kaos_addr: DEFAULT_DBH_ADDR,
kaos_img: DEAFULT_DBH_IMG,
kaos_title: DEFAULT_DBH_TITLE,
dataLoaded: true,
};
},
};
Secara default data untuk ketiga variabel diatas di inisialisasi dengan data DEFAULT_DBH_TITLE
, DEFAULT_DBH_IMG
& DEFAULT_DBH_ADDR
.
Sepertinya tidak perlu Saya jelaskan mengenai komponen vue diatas, silahkan baca Vue.js Components Basics.
Baca Data
Untuk membaca data dari Cloud Firestore sangatlah mudah, instal paket firebase
melalui npm pada proyekmu
npm install firebase@8.2.4 --save
Kemudian inisialisasi Firebase dengan memakai konfigurasi firebase config
sebelumnya
import { firebaseConfig } from './config/firebaseconfig.js'
Ada baiknya kamu meletakkan konnfigurasi pada file tersendiri dan kemudian di import jika dibutuhkan
firebaseconfig.js
const firebaseConfig = {
apiKey: "<API_KEY>",
authDomain: "<APP_NAME>.firebaseapp.com",
databaseURL: "https://<APP_NAME>.firebaseio.com",
projectId: "<APP_ID>",
storageBucket: "APP_NAME.appspot.com",
messagingSenderId: "APP_MESS_ID",
appId: "APP_ID",
}
export { firebaseConfig }
Kemudian inisialisasi Firebase dan Cloud Firestore
import firebase from "firebase/app";
import "firebase/firestore";
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
firebase.firestore().enablePersistence();
}
const kaosFirestoreDb = firebase.firestore();
enablePersistence()
hanya dibutuhkan jika aplikasi yang kamu buat akan memanfatkan fitur offline artinya data akan tetap ada meskipun tidak ada jaringan, lebih lengkapnya silahkan baca di access data offline. Pada aplikasi Android dan iOS fungsi satu ini default-nya adalah true
.
kaosFirestoreDb
adalah nama referensi dari Cloud Firestore yang akan kita pakai.
Integrasi baca atau query
data di komponen Vue bisa dilakukan pada saat mounted()
dengan kode seperti berikut,
mounted() {
const kaosku = [];
kaosFirestoreDb
.collection("kaos")
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
kaosku.push(doc.data());
});
if (kaosku.length > 1) {
let r = Math.floor(Math.random() * kaosku.length);
this.kaos_addr = kaosku[r]["href"];
this.kaos_img = kaosku[r]["data_img"];
this.kaos_title = kaosku[r]["nama"];
} else {
this.kaos_addr = DEFAULT_DBH_ADDR;
this.kaos_img = DEFAULT_DBH_IMG;
this.kaos_title = DEFAULT_DBH_TITLE;
}
this.dataLoaded = true;
});
},
Prinsip pembacaan data pada Cloud Firestore adalah membaca data collection
yang isinya adalah koleksi dari dokumen dan dari dokumen tersebut kita bisa membaca data yang berisi key value
.
Value pada isi dokumen Cloud Firestore bisa berupa string, number, boolean, map, array, timestamp, geopoint,reference, null. Penjelasannya silahkan lihat supported data types .
Sehingga untuk membaca collection
bernama kaos
maka kamu bisa membacanya memakai fungsi collection()
dan hasilnya kita simpan pada array kaosku
.
v-if="dataLoaded"
akan mendeteksi apakah data sudah ada atau tidak sehingga data-data yang dibaca dari Cloud Firestore bisa ditampilkn pada komponen vue.
Ok. Cukup sekian.
Happy Coding! 😎