𝗩𝗶𝗯𝗲 𝗖𝗼𝗱𝗶𝗻𝗴 𝘂𝗻𝘁𝘂𝗸 𝗣𝗲𝗺𝘂𝗹𝗮: 𝗕𝗮𝗴𝗮𝗶𝗺𝗮𝗻𝗮 𝗔𝗸𝘂 𝗠𝗲𝗺𝗯𝘂𝗮𝘁 𝗔𝗽𝗹𝗶𝗸𝗮𝘀𝗶 𝗪𝗲𝗯 𝗣𝗵𝗼𝘁𝗼 𝗕𝗼𝗼𝘁𝗵
Saya seorang penulis, bukan seorang coder. Kemampuan teknis saya berhenti di HTML dasar pada tahun 1999.
Minggu lalu, saya membangun alat nyata pertama saya. Saya menggunakan Claude untuk melakukan "vibe coding" pada aplikasi web photo booth yang berfungsi untuk MLH.
Inilah cara seorang non-coder membangun aplikasi fungsional untuk acara langsung.
𝗣𝗿𝗼𝗯𝗹𝗲𝗺 MLH menyelenggarakan banyak acara. Kami membutuhkan photo booth berbasis browser.
- Peserta membuka tautan di ponsel mereka.
- Mereka mengambil selfie atau mengunggah foto.
- Mereka menambahkan bingkai bermerek.
- Mereka menyimpan foto ke galeri kamera mereka.
- Tanpa akun. Tanpa toko aplikasi. Hanya sebuah tautan.
𝗦𝘁𝗿𝗮𝘁𝗲𝗴𝗶 𝗧𝗲𝗸𝗻𝗶𝘀 Saya ingin menggunakan framework yang kompleks. Claude meyakinkan saya untuk tidak melakukannya.
Untuk acara langsung, semakin sedikit komponen yang bergerak, semakin baik. Saya membangun seluruh alat ini dalam satu file index.html tunggal. Ini menggunakan HTML, CSS, dan JavaScript. Tidak ada langkah build yang rumit. Aplikasi ini tetap berada di GitHub Pages secara gratis.
𝗕𝗼𝗻𝘂𝘀 𝗣𝗿𝗶𝘃𝗮𝘀𝗶 Saya menggunakan HTML canvas untuk menggabungkan foto dan bingkai. Semua pemrosesan terjadi di browser pengguna. Foto tidak pernah diunggah ke server. Hal ini membuatnya privat dan aman bagi para peserta.
𝗞𝗲𝗮𝗷𝗮𝗶𝗯𝗮𝗻 𝗕𝗮𝗰𝗸𝗲𝗻𝗱 Situs statis tetap bisa memiliki backend. Saya menggunakan Supabase untuk penyimpanan.
- Penyelenggara mengunggah bingkai ke bucket Supabase.
- Peserta melihat bingkai tersebut melalui situs.
- Keamanan terletak pada kebijakan database, bukan kata sandi yang tersembunyi.
𝗝𝗲𝗯𝗮𝗸𝗮𝗻 𝗣𝗲𝗺𝘂𝗹𝗮 Vibe coding membantu dalam hal arsitektur, tetapi Anda harus memperhatikan detail operasional:
- Database bisa "tidur". Saya belajar untuk membangunkan proyek Supabase saya sehari sebelum acara.
- Keamanan gambar. Saya harus menambahkan baris kode khusus agar canvas dapat menggunakan gambar jarak jauh.
- Pengalaman pengguna. Di ponsel, tombol "unduh" sulit ditemukan. Saya mengubah kodenya untuk menggunakan fitur share sheet bawaan ponsel. Ini mengirimkan foto langsung ke galeri kamera.
𝗣𝗲𝗹𝗮𝗷𝗮𝗿𝗮𝗻 𝗨𝗻𝘁𝘂𝗸 𝗔𝗻𝗱𝗮
- Pilih proyek dengan batasan yang jelas. Photo booth memiliki garis finis yang pasti. Aplikasi sosial tidak.
- Tanyakan "mengapa" kepada AI. Penalaran lebih penting daripada kodenya.
- Baca perbedaannya (diffs). Jangan biarkan AI mengubah situs Anda tanpa peninjauan Anda.
- Ambil kendali atas keputusan. AI menangani sintaksis, tetapi Anda yang menangani batasan-batasannya.
Vibe coding bukan tentang melewatkan pekerjaan. Ini tentang fokus pada masalah yang tepat.
Vibe Coding untuk Pemula: Bagaimana Saya Membangun Aplikasi Web Photo Booth yang Berfungsi dengan Claude
Pernahkah Anda merasa ingin membangun sesuatu, tetapi Anda tidak tahu cara menulis kodenya?
Selamat datang di era Vibe Coding.
Vibe coding bukan tentang menghafal sintaksis atau memahami algoritma yang rumit. Ini tentang mendeskripsikan "vibe" atau visi Anda kepada AI, dan membiarkan AI melakukan pekerjaan beratnya.
Dalam artikel ini, saya akan menunjukkan bagaimana saya menggunakan Claude untuk membangun aplikasi web photo booth yang berfungsi penuh, tanpa menulis satu baris kode pun secara manual.
Apa itu Vibe Coding?
Secara sederhana, vibe coding adalah proses pemrograman di mana Anda bertindak lebih sebagai seorang sutradara daripada seorang penulis kode. Alih-alih menulis function handleClick() { ... }, Anda mengatakan, "Buat tombol yang terlihat keren dan memberikan efek kilatan cahaya saat diklik."
Anda memberikan arah, gaya, dan tujuan, lalu AI menerjemahkannya menjadi kode yang berfungsi.
Proyek Saya: Aplikasi Web Photo Booth
Ide saya sederhana: sebuah aplikasi web yang memungkinkan pengguna mengambil foto melalui webcam, menerapkan filter retro, dan mengunduh hasilnya.
Langkah 1: Menetapkan "Vibe"
Saya memulai dengan prompt yang sangat umum kepada Claude:
"Saya ingin membuat aplikasi web photo booth sederhana. Saya ingin pengguna bisa mengambil foto menggunakan kamera mereka, menerapkan filter hitam putih atau sepia, dan mengunduh foto tersebut. Buatlah tampilannya terlihat modern dan bersih menggunakan HTML, CSS, dan JavaScript."
Dalam hitungan detik, Claude memberikan struktur dasar aplikasi saya.
Langkah 2: Iterasi dan Penyempurnaan
Di sinilah "vibe" yang sebenarnya terjadi. Hasil pertama sudah berfungsi, tetapi "vibe"-nya belum pas. Terlihat terlalu kaku.
Jadi, saya memberikan instruksi berikutnya:
"Ini bagus, tapi buat tampilannya lebih retro. Gunakan font bergaya mesin tik dan tambahkan efek butiran (grain) pada foto agar terlihat seperti kamera film lama."
Claude langsung memperbarui CSS dan menambahkan logika JavaScript untuk efek filter tersebut.
Langkah 3: Menangani Masalah (Debugging)
Tentu saja, tidak semuanya berjalan mulus. Saat saya mencoba menjalankan kamera, muncul error di konsol. Alih-alih mencari tahu di mana letak kesalahan kodenya, saya cukup menyalin error tersebut dan memberikannya kembali ke Claude.
"Kamera tidak muncul. Ini pesan error yang saya dapatkan:
[copy-paste error]. Tolong perbaiki."
Claude menganalisis masalahnya (ternyata masalah izin akses kamera) dan memberikan solusi yang langsung bekerja.
Mengapa Ini Penting?
Vibe coding menurunkan hambatan masuk untuk kreativitas. Anda tidak lagi dibatasi oleh apa yang Anda tahu tentang sintaksis, melainkan oleh apa yang Anda bayangkan.
Ini mengubah peran pengembang dari seorang "pengetik kode" menjadi seorang "pemecah masalah" dan "arsitek visi".
Kesimpulan
Membangun aplikasi web photo booth ini membuktikan bahwa dengan alat seperti Claude, siapa pun bisa mewujudkan ide mereka. Anda hanya perlu tahu cara mengomunikasikan "vibe" Anda dengan jelas.
Jadi, apa yang akan Anda bangun hari ini?