Asrofil Vault

8. Connect Firebase Ke Nuxt3

2 min read

tech

Table of Content

Introduction

Case kali ini gue mengubah sistem dari buatan pake angular menjadi Nuxt. Alasan nya adalah karena nuxt lebih banyak automasi nya dan sangat sederhana.

Install Firebase

npm install firebase

Jangan lupa install firebase terlebih dahulu ya.

Configuration

plugins/firebase.client.ts

import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";
 
const firebaseConfig = {
    apiKey: "AIzaSyCTPysoFyHRSUE3bHkaVQvQqQ3qgvEsR8A",
    authDomain: "silo-pt-pas.firebaseapp.com",
    databaseURL: "https://silo-pt-pas-default-rtdb.firebaseio.com",
    projectId: "silo-pt-pas",
    storageBucket: "silo-pt-pas.firebasestorage.app",
    messagingSenderId: "635054227749",
    appId: "1:635054227749:web:4dfba07692b8936a161acc",
    measurementId: "G-P6X3PYV9WY"
};
 
const firebaseApp = initializeApp(firebaseConfig);
const database = getDatabase(firebaseApp);
 
export default defineNuxtPlugin(() => {
    return {
        provide: {
            firebaseApp,
            database,
        },
    };
});

nuxt.config.ts

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  css: [
		'bootstrap/dist/css/bootstrap.css'
	],
  plugins: ["~/plugins/firebase.client.ts"]
})

kita wajib mendefinisikan config nya di folder nuxt.config.ts.

Implementasi

<template>
    <div>
        <h5 class="mb-4">Silahkan masukkan NIK Anda untuk memulai aplikasi.</h5>
        <div class="form-group d-flex align-items-center">
            <input type="text" class="form-control mr-2" id="nik" placeholder="Input NIK" v-model="nik">&nbsp;&nbsp;&nbsp;
            <button class="btn btn-success" @click="login">LOGIN</button>
        </div>
    </div>
</template>
 
<script setup>
import { ref } from 'vue';
import Swal from 'sweetalert2';
import { useRouter } from 'vue-router';
import { getDatabase, ref as dbRef, get, child } from 'firebase/database';
 
const nik = ref('');
const router = useRouter();
 
async function login() {
  if (!nik.value) {
    Swal.fire('Error', 'NIK tidak boleh kosong!', 'error');
    return;
  }
 
  const db = getDatabase();
  const dbReference = dbRef(db);
 
  try {
    const snapshot = await get(child(dbReference, 'sms_driver'));
 
    if (snapshot.exists()) {
      const users = snapshot.val();
      const userExists = Object.values(users).find((user) => user.nik === nik.value);
 
      if (userExists) {
        const nama = userExists.nama;
        router.push({ path: '/home', query: { nik: nik.value, nama } });
      } else {
        Swal.fire('Gagal', 'NIK tidak terdaftar di sistem!', 'error');
      }
    } else {
      Swal.fire('Gagal', 'NIK tidak terdaftar di sistem!', 'error');
    }
  } catch (error) {
    console.error(error);
    Swal.fire('Error', 'Terjadi kesalahan saat memeriksa NIK!', 'error');
  }
}
</script>
 
<style scoped>
.form-group {
  display: flex;
  align-items: center;
}
</style>

Penjelasan:

  • ref: Digunakan untuk membuat variabel reaktif (nik) yang dapat diikat ke input menggunakan v-model.
  • Swal: SweetAlert2 digunakan untuk menampilkan notifikasi atau pesan popup kepada pengguna.
  • useRouter: Vue Router digunakan untuk mengarahkan pengguna ke halaman lain setelah login berhasil.
  • getDatabase: Mendapatkan instance database Firebase.
  • ref: Membuat referensi ke root database.
  • child: Mengakses node tertentu di database (dalam hal ini, sms_driver).
  • get: Mengambil data dari database secara asynchronous.
  • nik: Variabel reaktif yang menyimpan nilai input NIK dari pengguna.
  • router: Instance Vue Router untuk navigasi.

Date: 21-04-2025

Graph View

Recent notes