Sign in Subscribe

Gimana Cara Bikin Aplikasi Kontak Pakai Svelte?

Gimana Cara Bikin Aplikasi Kontak Pakai Svelte?
Photo by Sebastian Laverde/Unsplash

Svelte itu ibarat developer experience yang mulus abis buat bikin web app. Bayangin aja, kamu nulis kode, terus Svelte 'masak' kode kamu jadi JavaScript biasa yang super efisien waktu di-compile. Jadi, pas aplikasi kamu jalan di browser, bebannya ringan banget. Makanya, Svelte ini lagi naik daun, terutama buat yang pengen performa tinggi tapi nggak mau pusing sama konsep-konsep rumit kayak di framework lain.

Nah, ngomongin aplikasi simpel yang sering kita butuhkan, aplikasi kontak pasti masuk daftar. Biar lebih asik dan belajar Svelte sambil praktek, yuk kita coba bikin aplikasi kontak super basic pakai Svelte. Ini bukan cuma buat nyimpen nama sama nomor, tapi juga buat latihan gimana Svelte handling data, bikin komponen, sama interaksi antar komponen. Seru kan?

Sebelum Mulai, Siapin Ini Dulu Ya:

Nggak perlu jago banget, tapi ada beberapa hal dasar yang perlu kamu punya atau siapin:

  1. Node.js dan npm (atau yarn/pnpm): Ini semacam "mesin" buat jalanin tools pengembangan JavaScript. Kamu bisa download dan install dari nodejs.org. Pastiin udah ter-install dengan ketik node -v dan npm -v di terminal atau Command Prompt.
  2. Code Editor: Bebas, mau VS Code (paling populer), Sublime Text, atau Atom. VS Code direkomendasiin banget karena banyak extension buat Svelte.
  3. Dasar HTML, CSS, JavaScript: Nggak perlu ahli, tapi ngerti tag HTML, sedikit CSS buat styling, dan logika dasar JavaScript (variabel, fungsi, array) udah cukup banget.

Bikin Proyek Svelte Baru: Start Simple, Go Far

Oke, kalau semuanya udah siap, buka terminal atau Command Prompt kamu. Cari folder di mana kamu mau nyimpen proyek ini. Terus, jalanin perintah sakti ini:

bash
npm create svelte@latest my-contact-app
  • npm create svelte@latest: Perintah buat bikin proyek Svelte baru pakai versi terbaru.
  • my-contact-app: Ini nama folder proyek kamu. Ganti aja kalau mau nama lain.

Nanti kamu bakal ditanya beberapa hal kayak gini:

✔ Which Svelte app template? › SvelteKit Demo App
✔ Add type checking with TypeScript? › No
✔ Add ESLint for code linting? › Yes
✔ Add Prettier for code formatting? › Yes
✔ Add Playwright for browser testing? › No

Pilih sesuai preferensi. Buat pemula, pilih SvelteKit Demo App, terus No buat TypeScript dan testing biar nggak terlalu kompleks di awal. Yes buat ESLint dan Prettier bagus buat jaga kualitas kode dan format.

Setelah prosesnya selesai, masuk ke folder proyek yang baru dibikin:

bash
cd my-contact-app

Terus, install dependensi yang dibutuhkan:

bash
npm install

Kalau udah, coba jalanin proyeknya:

bash
npm run dev

Buka browser kamu dan ketik http://localhost:5173 (atau port lain yang muncul di terminal). Harusnya kamu lihat halaman awal SvelteKit. Ini tandanya proyek Svelte kamu udah siap dimodifikasi!

Struktur Proyek SvelteKit (Basic):

Pas kamu buka folder my-contact-app di code editor, kamu bakal lihat struktur kira-kira kayak gini:

my-contact-app/
├── src/
│   ├── lib/           # Buat komponen atau modul yang bisa dipakai ulang
│   ├── routes/        # Buat halaman-halaman aplikasi kamu (pakai routing berbasis folder)
│   │   ├── +layout.svelte # Layout utama (header, footer, dll)
│   │   └── +page.svelte   # Halaman utama (Home)
│   ├── app.css        # Global CSS
│   └── app.html       # HTML dasar
├── static/          # Aset statis (gambar, font)
├── package.json     # Info proyek & daftar dependensi
├── svelte.config.js # Konfigurasi Svelte
└── ... file lainnya

Di SvelteKit, setiap folder di dalam src/routes/ jadi segmen URL, dan file +page.svelte di dalamnya jadi halaman yang dirender. File +layout.svelte buat layout yang sama di banyak halaman.

Karena kita mau bikin aplikasi kontak simpel di satu halaman, kita bakal banyak main di src/routes/+page.svelte atau mungkin bikin komponen-komponen baru di src/lib/.

Memikirkan Struktur Aplikasi Kontak Kita

Aplikasi kontak kita bakal punya beberapa bagian utama:

  1. Tempat Nambah Kontak: Sebuah form buat masukin nama, nomor telepon, sama email.
  2. Daftar Kontak: Bagian yang nampilin semua kontak yang udah disimpen.
  3. Data Kontak: Gimana cara nyimpen data semua kontak ini biar bisa diakses sama form (buat nambah) dan daftar (buat nampilin).

Di Svelte, kita bisa pecah ini jadi beberapa komponen:

  • +page.svelte: Halaman utama yang jadi "wadah" buat semuanya. Di sini kita bakal nampilin form dan daftar kontak, serta ngatur data kontaknya.
  • AddContactForm.svelte: Komponen cuma buat nampilin form tambah kontak.
  • ContactList.svelte: Komponen cuma buat nampilin daftar kontak.
  • ContactItem.svelte: Komponen kecil buat nampilin satu baris data kontak (nama, nomor, email).

State Management Sederhana: Pakai Svelte Store

Gimana cara komponen AddContactForm "ngasih tahu" ContactList kalau ada kontak baru? Atau gimana ContactList bisa dapet data kontak yang mau ditampilin? Di Svelte, ada cara gampang buat ngatur data yang dibagi-bagi antar komponen, namanya Store.

Svelte Store itu objek yang bisa disubscribe. Artinya, komponen mana pun bisa "dengerin" perubahan di Store, dan Svelte akan otomatis update tampilan kalau Store-nya berubah.

Kita bikin Store baru buat nyimpen daftar kontak. Buat file baru, misalnya di src/lib/stores.js:

javascript
// src/lib/stores.js
import { writable } from 'svelte/store';// Kita bikin store namanya contacts
// isinya array kosong di awal
export const contacts = writable([]);// Fungsi helper buat nambah kontak
export function addContact(contact) {
    // Update store dengan nambah kontak baru ke array
    contacts.update(currentContacts => {
        // Pastikan contact punya id unik (penting buat nanti kalau mau hapus)
        return [...currentContacts, { ...contact, id: Date.now() }];
    });
}// Fungsi helper buat hapus kontak
export function deleteContact(id) {
    contacts.update(currentContacts => {
        // Filter array, buang kontak yang id-nya sesuai
        return currentContacts.filter(contact => contact.id !== id);
    });
}// Optional: Load contacts dari localStorage pas aplikasi pertama kali jalan
// Ini biar data gak ilang pas refresh (akan kita bahas nanti)
// let initialContacts = [];
// if (typeof window !== 'undefined') { // Cek biar kode ini jalan di browser
//     const storedContacts = localStorage.getItem('contacts');
//     if (storedContacts) {
//         try {
//             initialContacts = JSON.parse(storedContacts);
//         } catch (e) {
//             console.error("Failed to parse contacts from localStorage", e);
//         }
//     }
// }
// export const contacts = writable(initialContacts);

Penjelasan singkat:

  • writable([]): Bikin store yang datanya bisa diubah-ubah (writable), nilai awalnya array kosong.
  • export const contacts: Bikin store ini bisa dipake di file lain.

addContact dan deleteContact: Fungsi buat ngubah isi store. Pakai .update() buat ngubah nilai store berdasarkan nilai yang sekarang. Kita nggak* boleh langsung ngubah nilai store-nya (contacts = [...]), harus pakai .set() atau .update().

Bikin Komponen AddContactForm.svelte

Kita bikin komponen form buat nambah kontak. Buat file baru di src/lib/AddContactForm.svelte:

svelte


    // Import fungsi addContact dari store
    import { addContact } from './stores';<p>// Variabel buat nyimpen input dari form
    let name = '';
    let phone = '';
    let email = '';</p><p>// Fungsi yang jalan pas form disubmit
    function handleSubmit() {
        // Validasi sederhana (opsional)
        if (!name || !phone) {
            alert('Nama dan Nomor Telepon harus diisi!');
            return;
        }</p><p>// Panggil fungsi addContact di store
        addContact({ name, phone, email });</p><p>// Reset form setelah berhasil nambah
        name = '';
        phone = '';
        email = '';
    }

    Tambah Kontak Baru
    
        Nama:
        
        
    
    
        Nomor Telepon:
        
    
    
        Email:
        
    
    Tambah Kontak
    • export let contact;: Ini cara Svelte mendeklarasikan "prop". Artinya, komponen ini expects properti bernama contact dari komponen induknya.
    • {contact.name} dll: Cara nampilin nilai variabel di HTML Svelte (pakai kurung kurawal).
    • {#if ...}: Blok kondisional Svelte. Konten di dalamnya cuma dirender kalau kondisinya true.
    • on:click={handleDelete}: Pas tombol diklik, jalankan fungsi handleDelete.
    • export let contacts = [];: Komponen ini menerima array kontak.
    • {#if ...}{:else}...{/if}: Blok if/else Svelte.
    • {#each contacts as contact (contact.id)}...{/each}: Blok looping Svelte.
    • : Merender komponen ContactItem dan ngasih prop contact yang isinya data kontak saat ini di dalam loop. {contact} itu shorthand Svelte buat contact={contact}.
      • import AddContactForm from '$lib/AddContactForm.svelte';: Import komponen yang tadi kita bikin. $lib itu alias di SvelteKit buat folder src/lib.
      • import { contacts } from '$lib/stores';: Import store contacts.
      • $contacts: Nah, ini magic-nya Svelte Store! Dengan import store contacts, Svelte otomatis menyediakan variabel reaktif $contacts yang isinya nilai terbaru dari store itu. Kalau store-nya berubah, $contacts berubah, dan semua yang pakai $contacts di template (ContactList contacts={$contacts}) akan otomatis update. Gampang kan?
      • onMount(...): Ini lifecycle function Svelte. Kode di dalamnya jalan pas komponen selesai dirender pertama kali di browser. Kita pakai ini buat logic localStorage karena localStorage cuma ada di lingkungan browser, bukan server.
      • contacts.subscribe(...): Ini cara tradisional buat "mendengarkan" perubahan store. Setiap kali store contacts berubah, fungsi di dalamnya jalan. Kita pakai ini buat nyimpen data terbaru ke localStorage. Fungsi ini mengembalikan fungsi unsubscribe yang penting buat membersihkan "pendengar" ini pas komponen dihapus dari DOM, mencegah memory leak.
      • JSON.stringify() dan JSON.parse(): localStorage cuma bisa nyimpen string. Jadi, array objek kontak kita harus diubah jadi string (stringify) pas mau disimpen, dan diubah lagi jadi array objek (parse) pas mau diload.
      • Saving: Setiap $contacts berubah (setelah nambah atau hapus), subscriber kita jalan, ngambil nilai terbaru (value), ngubahnya jadi string JSON (JSON.stringify(value)), terus nyimpen di localStorage dengan key 'contacts'.
      1. Pastikan terminal masih di folder proyek my-contact-app.
      2. Jalanin lagi kalau belum: npm run dev.
      3. Buka browser ke alamat yang muncul (biasanya http://localhost:5173).
      • Komponen (.svelte file): Memecah UI jadi bagian-bagian kecil yang bisa dipakai ulang dan lebih gampang diurus.
      • Props (export let): Cara komponen induk ngirim data ke komponen anak.

Aplikasi Kontakku Svelte

Nambahin Fitur Persistence (Data Nggak Ilang Pas Refresh)Kode onMount untuk localStorage yang udah kita masukin ke +page.svelte tadi udah jalanin logic buat nyimpen data kontak ke localStorage setiap kali ada perubahan, dan nge-load data dari localStorage pas aplikasi pertama kali dibuka.Loading: Pas halaman pertama kali di-mount* (onMount), kita cek localStorage ada key 'contacts' nggak. Kalau ada, ambil nilainya, parse jadi array objek pakai JSON.parse, terus set nilai store contacts pakai data itu (contacts.set(parsedContacts)). Ini bikin data lama muncul lagi pas aplikasi dibuka.Fitur ini simpel tapi penting biar aplikasi kontak kita nggak stateless (datanya ilang tiap refresh).Udah Jadi? Coba Jalanin!Kalau semua file udah dibuat dan kodenya udah dimasukin, harusnya kamu bisa coba aplikasi kontak basic kamu.Kamu bakal lihat form "Tambah Kontak Baru" dan "Daftar Kontak" yang masih kosong. Coba isi form, klik tombol "Tambah Kontak". Harusnya kontak yang baru kamu tambahin muncul di daftar bawahnya. Coba tambahin beberapa kontak lagi.Terus, coba klik tombol "Hapus" di salah satu kontak. Kontak itu harusnya langsung ilang dari daftar.Yang keren, coba refresh halaman browser kamu. Data kontak yang tadi kamu tambahin harusnya nggak ilang karena udah disimpen di localStorage. Yay!Review Kode dan Konsep Penting di SvelteKita udah pakai beberapa konsep inti Svelte:Reactivity: Svelte bikin UI otomatis update pas state (variabel di

{contact.name}
{contact.phone}
{#if contact.email} {contact.email} {/if}HapusBikin Komponen ContactList.svelteIni komponen yang bakal nampilin semua ContactItem. Buat file baru di src/lib/ContactList.svelte:

svelte


    // Komponen ini akan menerima daftar kontak (array) sebagai prop
    export let contacts = []; // Beri nilai default array kosong<p>// Import store (kalau mau subscribe langsung di sini, tapi lebih rapi di parent)
    // atau kalau mau manggil fungsi store dari sini (kalau ada tombol di ContactList)
    // Karena hapus ada di ContactItem, kita gak perlu import store di sini.
    // Data contact sudah dikirim lewat prop.

    Daftar Kontak
    {#if contacts.length === 0} 
        Belum ada kontak nih. Yuk, tambahin dulu!
    {:else}
        {#each contacts as contact (contact.id)} 
            
             
        {/each}
    {/if}

    // Import ContactItem di sini, bukan di script utama
    // Ini trik Svelte Kit buat menghindari circular dependency
    // Kalau ContactList import ContactItem, dan ContactItem juga import sesuatu
    // yang akhirnya balik ke ContactList (meskipun nggak langsung), bisa error.
    // context="module" bikin import ini di-handle beda.
    import ContactItem from './ContactItem.svelte';

* contacts: Array yang mau di-loop. * as contact: Untuk setiap item di array, kasih nama variabel contact. * (contact.id): Ini "key" buat Svelte. Penting banget biar Svelte bisa ngacak data dengan efisien pas ada perubahan (kayak nambah atau hapus item). Pakai ID unik dari setiap kontak.