Komponen Vue dan Firestore

VUEFIRESTORE

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

firebase-proyek

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

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.

add-data-ke-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! 😎

Komentar