Mulai bangun Toko Kue Online dengan Next.js & TypeScript! Tahap pertama: merencanakan fitur-fitur dasar aplikasi dan membuat struktur data dummy untuk produk kue kita dalam format JSON.
Udah siap ngoding aplikasi Next.js yang lebih dari sekadar "Halo Dunia"? Di beberapa materi ke depan, kita bakal ngebangun Studi Kasus: Toko Kue Online Sederhana pake Next.js dan TypeScript. Ini bakal jadi ajang kita buat nerapin semua konsep yang udah (dan bakal) kita pelajari, dari routing, komponen, data fetching, sampe styling.
Sebelum langsung ngoding, kayak mau bikin kue beneran, kita perlu rencana dan bahan baku dulu!
Fitur Dasar Toko Kue Online Kita
Biar gak terlalu ribet buat awal, ini fitur-fitur utama yang mau kita bikin:
Halaman Utama (Daftar Produk): Nampilin semua produk kue yang kita jual dalam bentuk kartu-kartu yang menarik.
Halaman Detail Produk: Pas salah satu kue diklik, kita bakal nampilin halaman yang isinya info lebih detail soal kue itu (deskripsi, harga, mungkin gambar lebih gede).
Keranjang Belanja (Sederhana): Pengguna bisa nambahin kue ke keranjang. Isi keranjang ini bakal kita simpen sementara pake localStorage biar gak ilang pas pindah halaman atau refresh.
Halaman Keranjang: Nampilin semua item yang ada di keranjang, total harga, dan mungkin opsi buat ngubah jumlah atau ngapus item.
Form Checkout (Sangat Sederhana): Form buat pengguna masukin info dasar (misal, nama & alamat – kita gak bakal proses pembayaran beneran ya!).
Halaman Terima Kasih: Halaman yang ditampilin setelah pengguna "nyelesaiin" checkout.
Gimana, udah kebayang kan serunya?
"Bahan Baku" Data: Produk Kue Kita (Data Dummy JSON)
Karena kita belum mau pusing sama database beneran, kita bakal pake data dummy (data bohongan) yang kita simpen di file JSON. File ini bakal jadi "gudang" informasi produk kue kita.
Yuk, kita tentuin dulu "KTP" atau struktur data buat satu item kue. Kita bisa pake interface TypeScript buat ngedefinisiin ini.
1. Bikin Folder data:
Di dalam folder src/ proyek Next.js-mu, bikin folder baru namanya data.
2. Bikin File kue.ts (Buat Definisi Tipe):
Di dalam src/types/, bikin file baru bernama kue.ts (pake .ts karena cuma isi definisi tipe, gak ada JSX).
Isinya:
typescript
// src/types/kue.tsexport interface Kue { id: string; // Kita pake string buat ID biar bisa lebih fleksibel (misal, 'kue-coklat-01') nama: string; deskripsiSingkat: string; deskripsiLengkap: string; harga: number; gambarUrl: string; // Path ke gambar kue kategori: string; // Misal: 'Cake', 'Roti', 'Cookies' rating?: number; // Opsional, dari 1-5 bahanUtama?: string[]; // Opsional, array of string}
Kita bikin interface Kue yang ngedefinisiin properti apa aja yang ada di tiap objek kue dan tipe datanya.
Beberapa properti kita bikin opsional (?) kayak rating dan bahanUtama.
3. Bikin File daftar-kue.json (Data Dummy Produk):
Masih di dalam src/data/, bikin file baru bernama daftar-kue.json. Ini yang bakal jadi "database" kita. Isi dengan beberapa data kue bohongan, pastikan strukturnya ngikutin interface Kue yang udah kita buat (meskipun JSON sendiri gak ngecek tipe secara langsung, tapi ini buat konsistensi kita nanti).
File src/data/daftar-kue.json (Contoh Isi):
json
[ { "id": "kue-coklat-klasik-01", "nama": "Kue Coklat Klasik", "deskripsiSingkat": "Kue coklat lembut dengan ganache mewah.", "deskripsiLengkap": "Kue coklat klasik kami dibuat dengan bahan-bahan premium, menghasilkan tekstur yang lembut dan rasa coklat yang kaya. Dilapisi dengan ganache coklat Belgia yang mewah, sempurna untuk segala suasana.", "harga": 250000, "gambarUrl": "/images/kue/kue-coklat-klasik.jpg", "kategori": "Cake", "rating": 4.8, "bahanUtama": ["Coklat Bubuk", "Tepung Terigu", "Telur", "Gula", "Butter"] }, { "id": "roti-tawar-gandum-02", "nama": "Roti Tawar Gandum", "deskripsiSingkat": "Roti tawar sehat dari gandum utuh.", "deskripsiLengkap": "Nikmati sarapan sehat dengan roti tawar gandum kami. Dibuat dari 100% gandum utuh, kaya serat dan nutrisi. Cocok untuk sandwich atau dinikmati dengan selai favoritmu.", "harga": 25000, "gambarUrl": "/images/kue/roti-gandum.jpg", "kategori": "Roti", "rating": 4.5 }, { "id": "cookies-choco-chip-03", "nama": "Cookies Choco Chip", "deskripsiSingkat": "Cookies renyah dengan taburan choco chip melimpah.", "deskripsiLengkap": "Siapa bisa menolak cookies choco chip klasik? Dibuat dengan resep rahasia kami, menghasilkan cookies yang renyah di luar dan chewy di dalam, dengan choco chip berkualitas yang meleleh di mulut.", "harga": 45000, "gambarUrl": "/images/kue/cookies-choco-chip.jpg", "kategori": "Cookies", "bahanUtama": ["Tepung Terigu", "Choco Chips", "Butter", "Gula Palem"] }, { "id": "red-velvet-cupcake-04", "nama": "Red Velvet Cupcake", "deskripsiSingkat": "Cupcake red velvet lembut dengan cream cheese frosting.", "deskripsiLengkap": "Manjakan dirimu dengan Red Velvet Cupcake kami! Tekstur cakenya yang lembut dengan warna merah menawan, dipadukan sempurna dengan cream cheese frosting yang creamy dan sedikit asam. Bikin nagih!", "harga": 30000, "gambarUrl": "/images/kue/red-velvet-cupcake.jpg", "kategori": "Cupcake", "rating": 4.9 } // Tambahkan data kue lain sesuai imajinasimu!]
PENTING soal gambarUrl: Path gambar di sini (/images/kue/...) mengasumsikan kamu bakal menyimpan file-file gambar kue di folder public/images/kue/ di proyek Next.js-mu. File di folder public bisa diakses langsung dari root URL. Jadi, kamu perlu bikin folder public di root proyekmu (kalau belum ada), terus di dalamnya bikin folder images, terus di dalamnya lagi bikin folder kue, baru taro file-file gambarmu di situ. Ganti nama file gambarnya sesuai data di JSON ya! (Buat sekarang, kamu bisa pake URL placeholder dulu kalau belum punya gambar).
Rencana Struktur Halaman (Rute)
Berdasarkan fitur yang kita mau, ini kira-kira struktur rute (dan folder di src/app/) yang bakal kita bikin:
/ (Root / Halaman Utama): src/app/page.tsx -> Nampilin daftar semua produk kue.
/kue/[idKue]: src/app/kue/[idKue]/page.tsx -> Nampilin halaman detail buat satu kue spesifik. [idKue] ini rute dinamis.
/checkout: src/app/checkout/page.tsx -> Nampilin form checkout.
/terima-kasih: src/app/terima-kasih/page.tsx -> Halaman setelah checkout berhasil (pura-puranya).
Kita juga bakal punya layout utama di src/app/layout.tsx yang mungkin isinya header (dengan link ke keranjang) dan footer.
Persiapan awal kita udah beres! Kita udah punya rencana fitur, "KTP" data (interface Kue), dan "gudang" data dummy (daftar-kue.json). Ini bakal jadi fondasi kita buat mulai ngebangun komponen-komponen Toko Kue Online kita.
Di bagian berikutnya, kita bakal mulai bikin "backend mini" pake API Routes (Route Handlers) di Next.js buat ngelayanin data produk kue ini ke frontend kita. Makin seru nih!
Checkpoint KuisTarget: 70%
Kuis Studi Kasus Toko Kue (Perencanaan & Data)
Kuis ini wajib untuk sertifikat. Kamu tetap bisa lanjut ke pelajaran berikutnya dan mengerjakannya nanti.
