Ini Dia Pengalaman Bikin Aplikasi Manajemen Kontak Dengan Vue.js Buat Kamu.

Photo by Evangelos Mpikakis/Unsplash

Pernah nggak sih ngerasa kontak di HP atau email itu berantakan? Ada yang nomornya ganda, nama kontaknya nggak jelas, atau bahkan ada kontak penting yang malah hilang entah ke mana? Kalau iya, berarti kamu butuh sistem manajemen kontak yang lebih proper. Nah, ngomongin sistem manajemen kontak, pernah kepikiran buat bikin sendiri? Seru lho, apalagi kalau pakai teknologi yang lagi ngehits kayak Vue.js.

Kenapa Vue.js? Oke, gini, Vue.js itu framework JavaScript buat bikin user interface (UI) yang interaktif. Singkatnya, dia ngebantu kita banget dalam ngelola apa yang dilihat sama pengguna di browser. Kelebihannya? Gampang dipelajari, performanya oke, dan fleksibel. Buat proyek sekecil aplikasi manajemen kontak pribadi atau bahkan proyek yang lebih gede, Vue.js itu pilihan yang cerdas. Dia nggak se-strict framework lain, jadi kita bisa mulai dari yang sederhana banget. Komponen-komponennya juga bikin kerja jadi terstruktur dan gampang di-manage, persis kayak gimana kita mau ngelola kontak kita supaya terstruktur.

Jadi, mari kita bedah pengalaman seru bikin aplikasi manajemen kontak pakai Vue.js. Anggap aja ini perjalanan kita ngulik bareng, dari nol sampai jadi.

Langkah Pertama: Siapkan Fondasi Vue.js

Sebelum mulai ngoding fitur kontak, kita perlu siapin proyek Vue.js-nya dulu. Sekarang ada dua cara populer buat bikin proyek Vue.js: pakai Vue CLI atau Vite.

Vue CLI: Ini cara "tradisional". Fiturnya lengkap, langsung dapat konfigurasi buat testing, linting, sampai CSS pre-processors. Agak lebih berat di awal, tapi kalau proyeknya bakal kompleks dari awal, ini bisa jadi pilihan.
Vite: Nah, ini yang lagi naik daun. Vite jauh lebih cepat buat development server-nya. Proses build-nya juga ngebut banget. Buat aplikasi yang nggak terlalu besar atau kalau kamu pengen pengalaman development yang super responsif, Vite ini jagoannya.

Buat proyek manajemen kontak yang relatif sederhana, Vite ini pas banget. Tinggal buka terminal atau command prompt, ketik perintah npm init vue@latest atau yarn create vue@latest (tergantung kamu pakai npm atau yarn), ikuti instruksi di layar, pilih Vue 3, terus enter-enter aja buat opsi default kalau kamu baru mulai. Setelah selesai, masuk ke folder proyeknya, instal dependensi pakai npm install atau yarn, terus jalanin npm run dev atau yarn dev. Bum! Server development kamu udah nyala.

Langkah Kedua: Atur Struktur Aplikasi ala Komponen

Salah satu konsep keren di Vue.js itu komponen. Anggap aja komponen itu kayak blok bangunan lego. Kamu bisa bikin blok-blok kecil yang punya tugas spesifik, terus gabungin blok-blok itu jadi aplikasi yang utuh.

Buat aplikasi manajemen kontak, kita bisa pikirin komponen-komponen dasarnya:

App.vue: Komponen utama, kayak kontainer buat semuanya.
ContactList.vue: Komponen buat nampilin daftar semua kontak. Di sini kita bakal loop data kontak dan nampilin satu per satu.
ContactItem.vue: Komponen kecil buat nampilin detail satu kontak (nama, nomor telepon, email, dll). Ini dipakai di dalam ContactList.
ContactForm.vue: Komponen buat nambahin kontak baru atau ngedit kontak yang udah ada. Isinya input field buat nama, nomor, dll.
SearchBar.vue: Komponen opsional buat fitur pencarian kontak.

Dengan struktur komponen gini, kode kita jadi rapi, gampang dibaca, dan kalau ada yang error atau mau diubah, kita tahu harus nyari di mana. Misalnya, kalau mau ganti tampilan satu item kontak, ya udah fokus aja di ContactItem.vue.

Langkah Ketiga: Gimana Data Kontak Disimpan?

Aplikasi manajemen kontak nggak ada gunanya kalau nggak bisa nyimpen data kontak. Nah, di sini kita punya beberapa pilihan buat nyimpen datanya, dari yang paling gampang sampai yang agak lebih advance:

Array dalam State Vue: Cara paling simpel buat mulai. Kita bisa punya sebuah array di dalam state (misalnya di dalam komponen App.vue atau pakai state management library kayak Pinia/Vuex kalau aplikasinya makin gede) yang isinya objek-objek kontak. Setiap objek mewakili satu kontak. Contoh: [{ id: 1, nama: 'Budi Santoso', nomor: '0812...', email: '[email protected]' }, ...]. Ini bagus buat belajar, tapi datanya bakal hilang kalau browser direfresh.
Local Storage Browser: Agak lebih baik dari sekadar array di state. Kita bisa simpan array kontak tadi ke Local Storage browser. Data yang disimpan di Local Storage nggak hilang meskipun browser ditutup, tapi cuma bisa diakses di browser yang sama. Ini lumayan oke buat aplikasi personal yang nggak butuh sinkronisasi antar perangkat. Vueuse punya composable useLocalStorage yang bikin ini gampang banget.
Fake API atau Database Beneran: Ini level paling "real". Kamu bisa bikin API sederhana pakai Node.js, Python, atau bahasa lain buat nyimpen data di database (macam MongoDB, PostgreSQL, atau bahkan file JSON sederhana). Aplikasi Vue.js kita nanti akan komunikasi sama API ini buat ambil data, nambah, edit, atau hapus. Ini yang dipakai di aplikasi profesional.

Buat mulai belajar, pakai array dalam state atau Local Storage itu udah cukup banget. Fokus dulu ke UI dan interaksi antar komponen. Nanti kalau udah lancar, baru mikirin nyimpen data secara permanen pakai API.

Langkah Keempat: Bangun Fitur Inti Aplikasi

Sekarang bagian paling seru: ngoding fitur-fitur utama!

Menampilkan Daftar Kontak (ContactList.vue):

Kita perlu ngambil data kontak (misalnya dari state atau Local Storage) terus nampilin satu per satu. Di Vue, kita bisa pakai directive v-for buat nge-loop array kontak. Setiap item di array bakal dirender pakai komponen ContactItem.

html

Di ContactItem.vue, kita cuma nampilin detail satu kontak dan tombol edit/hapus yang akan emit event ke komponen induk (ContactList.vue).

Menambahkan & Mengedit Kontak (ContactForm.vue):

Komponen ini bakal punya input field buat nama, nomor, dll. Pakai v-model di input field buat nge-bind data ke variabel di script setup. Buat nambahin, kita bikin objek kontak baru dari data di form, terus kirim data ini ke komponen induk (misalnya App.vue) lewat event. Komponen induk yang nanti nyimpen data ini ke array/Local Storage.

html

Logic edit agak lebih kompleks. Ketika tombol edit di ContactItem diklik, komponen induk akan ngasih data kontak yang mau diedit ke ContactForm lewat prop (initialContact). ContactForm akan mendeteksi ini (pakai watch) dan mengisi input field dengan data kontak tersebut. Tombol submit-nya juga diubah teksnya jadi "Update". Saat disubmit, data kontak yang udah diupdate dikirim balik ke komponen induk.

Menghapus Kontak:

Di ContactItem, ada tombol delete. Saat diklik, emit event ke komponen induk (ContactList). Komponen induk yang menerima event ini akan menghapus kontak dari array-nya (misalnya pakai method filter) berdasarkan ID kontak.

Mencari Kontak (SearchBar.vue & Logic Filter):

Komponen SearchBar cuma punya satu input field. Saat user ngetik, kita bisa emit event dengan kata kunci pencarian ke komponen induk (App.vue atau komponen yang pegang data kontak). Komponen induk ini kemudian akan nge-filter array kontak yang ditampilkan berdasarkan kata kunci tadi. Bisa filter berdasarkan nama, nomor, atau field lain.

html
    
    
    import { ref } from 'vue';</p><p>const emit = defineEmits(['search']);
    const searchTerm = ref('');</p><p>const handleInput = () => {
      emit('search', searchTerm.value);
    };

Menggunakan computed property di Vue itu powerful banget buat filtering atau sorting data. Setiap kali searchTerm berubah atau contacts berubah, filteredContacts akan otomatis dihitung ulang.

Tips Penting Selama Proses Pengembangan:

Reactivity: Vue itu magisnya di reactivity. Ketika data (yang pakai ref atau reactive) berubah, Vue secara otomatis ngupdate UI yang terkait. Pahami konsep ini biar nggak bingung kenapa UI-mu kok nggak berubah pas datanya diupdate.
Props dan Emits: Ini cara komponen berkomunikasi. Props buat ngirim data dari induk ke anak. Emits buat ngirim pesan (event) dari anak ke induk. Kuasai ini biar struktur komponenmu solid.
Form Handling & Validasi: Bikin form itu gampang, tapi ngelola input dari user dan mastiin datanya valid itu cerita lain. Vue pakai v-model buat two-way binding. Buat validasi sederhana, bisa pakai logika if/else di method submit form. Buat validasi yang lebih kompleks, ada library pihak ketiga kayak VeeValidate.
CSS Scoped: Di komponen Vue, pakai