Vibe coding Toko Online

Sebelum mulai vibe coding perlu dipahami bahwa:Pemrograman Tradisional: "menulis sintaks sendiri", Vibe Coding adalah "mendeskripsikan fitur yang Anda inginkan, perintahkan AI yang menulis kode". Misalnya, tidak perlu mengatakan "buat div dengan lebar 200px", cukup katakan "buat halaman beranda kafe bergaya Muji, dengan nuansa cool dan profesional". Dalam Vibe Coding kualitas Prompt langsung menentukan kualitas hasil.

Langkah Pertama:

Buka Chrome lalu Login dahulu akun Gmail (untuk login ke AI Studio), dan memastikan akses jaringan normal. Kunjungi aistudio.google.com, login menggunakan akun Google untuk masuk.
Langkah Kedua: Pada Google AI Studio, klik "Build" di pojok kiri atas untuk masuk ke mode build. Pilih model (disarankan Gemini 3.0 Flash atau Pro), lalu masukkan Prompt pertama di kotak dialog. 

Contoh struktur Prompt:

"Buat toko online satu halaman menggunakan HTML+CSS+JavaScript. Tema: toko perlengkapan olahraga anak muda, gaya bersih dan dinamis, warna utama oranye dan putih. Fitur: bagian atas adalah banner toko dan judul; bagian tengah adalah grid produk (6 produk, setiap produk berisi gambar placeholder, nama, harga, dan tombol 'Tambah ke Keranjang'); klik tombol untuk menambah ke keranjang, di sudut kanan atas keranjang menampilkan jumlah dan total harga; klik ikon keranjang untuk membuka panel samping yang menampilkan daftar produk, dapat mengubah jumlah dan menghapus. Bagian bawah setiap produk memiliki tombol 'Pesan Sekarang', setelah diklik muncul formulir yang sudah diisi dengan informasi produk, setelah diisi dapat membuka tautan WhatsApp. Gunakan data simulasi untuk semua data, jangan sambungkan ke database sungguhan."

Setelah memasukkan Prompt, klik Build atau tekan Cmd+Enter, AI akan menghasilkan kode dan menampilkan preview secara real-time di sisi kanan. Perhatika proses yang dilakukan AI mengubah "dari teks menjadi aplikasi". Sabar tunggu proses yang sedang berjalan. Kadang-kadang kita harus menunggu app dibuatkan 3-4 menit.
AI Studio memiliki fitur "Design Variations" yang dapat menghasilkan beberapa alternatif gaya visual untuk dipilih.

Langkah Ketiga: Iterasi dan Penyempurnaan (Keterampilan Inti)

Ini adalah bagian paling penting dari Vibe Coding. Setelah hasil pertama keluar, pasti ada bagian yang tidak memuaskan atau mungkin ada error. Lakukan perintah untuk memperbaiki error atau beri perintah untuk memperbaiki kekurangan melalui perchat, bukan mengubah kode secara manual. Misalnya:"Warna tombol saat ini terlalu mencolok, aku tak suka, ubah menjadi warna utama oranye yang seragam dengan banner, dan tambahkan efek hover. Buat jarak antar produk sedikit lebih longgar, judul produk gunakan font yang lebih tebal."

AI Studio juga menyediakan Mode Anotasi (Annotation Mode): Kita dapat menggambar kotak langsung pada preview, menandai area mana yang ingin diubah, lalu memasukkan perintah di kotak komentar. Misalnya, menggambar kotak di sekitar tombol dan menulis "ubah menjadi ikon neon yang menyala". Cara visual ini sangat ramah bagi vibe coder pemula, tidak perlu memikirkan bagaimana mendeskripsikan posisi dengan kata-kata.

Perbaiki hasil dengan misalnya menambahkan fitur: Interaksi Keranjang Belanja
Ini adalah bagian inti dari fungsionalitas toko online. Periksa apakah setelah menambahkan produk ke keranjang, jumlah benar, total harga diperbarui, dan apakah produk dapat dihapus:

"Saat ini setelah menambahkan produk ke keranjang, ikon keranjang tidak menampilkan jumlah. Tolong tambahkan boks jumlah di sudut kanan atas ikon keranjang; setelah membuka panel keranjang, setiap produk harus memiliki tombol +/− untuk mengubah jumlah dan tautan hapus, total harga harus diperbarui secara real-time."

Sempurnakan fitur interaksi pesanan:

"Tambahkan tombol 'Pesan Sekarang' di bagian bawah setiap kartu produk, setelah diklik muncul formulir dengan nama produk yang sudah diisi, berisi kolom nama, telepon, alamat. Setelah diisi, klik 'Kirim Pesanan' untuk menampilkan prompt 'Pesanan diterima', dan kosongkan keranjang belanja."

Jika ingin lebih realistis, dapat meminta AI untuk mengarahkan tombol ke link WhatsApp (menggunakan format https://wa.me/), ini adalah pendekatan umum untuk toko online pemula.Tambahkan fitur lain seperti fitur tombol untuk mencetak booklet dalam format PDF.

Langkah Keempat: Perbaiki Detail (Sesuaikan Waktu)

Jika waktu memungkinkan, gunakan iterasi terakhir untuk memperbaiki "rasa profesional":"Ubah semua gambar placeholder produk menjadi gambar abu-abu solid dengan teks 'Gambar Produk'. Tambahkan status hover pada tombol (warna latar berubah gelap). Di bagian bawah halaman tambahkan baris teks hak cipta '© 2026 Toko Olahraga Anak Muda'."

Terakhir: Ekspor dan Presentasi

Jangan lupa beri nama project. Setelah aplikasi selesai, klik tombol Download di AI Studio untuk mengunduh kode sebagai file ZIP, ekstrak dan buka file index.html untuk melihat efeknya. Atau langsung bagikan link preview di kelas dan tunjukkan mencoba karya masing-masing. Jelaskan "bagaimana saya mendeskripsikan ide saya" dan "bagaimana saya melakukan iterasi", dengan fokus pada proses berpikir, bukan hasil akhir.

Hal-hal yang Perlu DiperhatikanBatasan Prompt berbahasa Inggris: Hasil pencarian menunjukkan bahwa efek Prompt dalam bahasa Inggris umumnya lebih baik maka gunakan "terjemahan dua arah Indonesia ke Inggris": tulis kebutuhan dalam bahasa Indonesia terlebih dahulu, biarkan AI menerjemahkan menjadi Prompt bahasa Inggris, lalu lakukan Build; atau setelah hasil keluar, minta AI "ubah antarmuka menjadi bahasa Indonesia".

 
Penilaian Hasil: Fokus penilaian bukan pada apakah aplikasi cukup sempurna, tetapi pada: apakah Prompt cukup jelas, apakah dapat melakukan iterasi berdasarkan hasil dengan efektif, apakah dapat menjelaskan ide desainnya sendiri. Ini sejalan dengan tujuan pendidikan Vibe Coding—melatih pemikiran komputasional dan ekspresi bahasa, bukan menghafal sintaks.



Kumpulkan tugas Vibe Coding di sini 

Kelas XII 1 SMA

Kelas XII 2 SMA

Kelas XII 3 SMA

Kelas XII 4 SMA