Tutorial CRUD di Vue.js: Buat Aplikasi dengan Firebase dan Vue 3

Tutorial CRUD di Vue.js: Membuat Aplikasi dengan Firebase dan Vue 3

Vue.js adalah framework JavaScript yang populer untuk membangun antarmuka pengguna interaktif. Dalam tutorial ini, kita akan mempelajari cara membuat aplikasi CRUD (Create, Read, Update, Delete) menggunakan Vue 3 dan Firebase sebagai backend. Firebase menyediakan layanan database real-time yang memudahkan pengembangan aplikasi tanpa perlu mengelola server.

Baca juga: Buat Aplikasi Todo List Sederhana dengan Vue 3 dan Composition API dalam 10 Menit!

Langkah 1: Persiapan Proyek

1. Pastikan Anda telah menginstal Node.js dan Vue CLI. Jika belum, ikuti panduan instalasi di dokumentasi resmi masing-masing.

2. Buat proyek Vue baru dengan perintah:

   Bash

   vue create vue-firebase-crud
   

3. Pilih Vue 3 sebagai versi yang akan digunakan.

Langkah 2: Menghubungkan Firebase

1. Buka Firebase Console dan buat proyek baru.

2. Tambahkan Firebase ke proyek Vue dengan menginstal SDK Firebase:

   Bash

   npm install firebase
   

3. Buat file firebase.js di folder src dan konfigurasikan Firebase:

   JavaScript

   import { initializeApp } from "firebase/app";
   import { getDatabase } from "firebase/database";
   
   const firebaseConfig = {
     apiKey: "YOUR_API_KEY",
     authDomain: "YOUR_AUTH_DOMAIN",
     databaseURL: "YOUR_DATABASE_URL",
     projectId: "YOUR_PROJECT_ID",
     storageBucket: "YOUR_STORAGE_BUCKET",
     messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
     appId: "YOUR_APP_ID",
   };
   
   const app = initializeApp(firebaseConfig);
   const db = getDatabase(app);
   
   export { db };
   

   • Ganti YOUR_API_KEY, YOUR_AUTH_DOMAIN, dll. dengan konfigurasi proyek Firebase Anda.

Langkah 3: Membuat Komponen CRUD

1. Buat komponen baru, misalnya TodoList.vue, di folder src/components.

2. Gunakan Firebase Realtime Database untuk menyimpan dan mengambil data:

   JavaScript

   <template>
     <div>
       <input v-model="newTodo" placeholder="Tambah todo baru" />
       <button @click="addTodo">Tambah</button>
       <ul>
         <li v-for="todo in todos" :key="todo.id">
           <span :class="{ completed: todo.completed }" @click="toggleTodo(todo.id, todo.completed)">
             {{ todo.text }}
           </span>
           <button @click="deleteTodo(todo.id)">Hapus</button>
         </li>
       </ul>
     </div>
   </template>
   
   <script>
   import { ref, onMounted } from 'vue';
   import { db } from '../firebase';
   import { push, ref as dbRef, onValue, remove, update } from 'firebase/database';
   
   export default {
     setup() {
       const todos = ref([]);
       const newTodo = ref('');
   
       const fetchTodos = () => {
         const todosRef = dbRef(db, 'todos');
         onValue(todosRef, (snapshot) => {
           const data = snapshot.val();
           todos.value = data ? Object.keys(data).map(key => ({ id: key, ...data[key] })) : [];
         });
       };
   
       const addTodo = () => {
         push(dbRef(db, 'todos'), { text: newTodo.value, completed: false });
         newTodo.value = '';
       };
   
       const deleteTodo = (id) => {
         remove(dbRef(db, `todos/${id}`));
       };
   
       const toggleTodo = (id, completed) => {
         update(dbRef(db, `todos/${id}`), { completed: !completed });
       };
   
       onMounted(fetchTodos);
   
       return { todos, newTodo, addTodo, deleteTodo, toggleTodo };
     },
   };
   </script>
   
   <style scoped>
   .completed {
       text-decoration: line-through;
   }
   </style>
   
   

Langkah 4: Menjalankan Aplikasi

1. Jalankan aplikasi dengan perintah:

   Bash

   npm run serve
   

2. Buka browser dan akses http://localhost:8080 untuk melihat aplikasi CRUD yang telah dibuat.

Kesimpulan

Dengan Vue 3 dan Firebase, Anda dapat dengan mudah membuat aplikasi CRUD yang powerful dan real-time. Untuk mempelajari lebih lanjut tentang Vue 3, Anda dapat membaca dokumentasi resmi Vue 3.

Deskripsi Pencarian (150 karakter):

Tutorial lengkap membuat aplikasi CRUD dengan Vue 3 dan Firebase. Pelajari cara integrasi Firebase dan buat aplikasi real-time dengan Vue.js.