Vibe Coding Buat Pemula: Bisa Bangun App Tanpa Ngoding? (Spoiler: Bisa, Tapi...)

"Vibe coding itu kayak order Gojek: lu bilang ke mana, driver (AI) yang nyetir. Tapi kalo driver nyasar ke jalan buntu? Lu yang kena biayanya, bukan driver."

"There's a new kind of coding where I just see stuff, say stuff, run stuff, and copy-paste stuff, and it mostly works."

• Cursor dengan Composer mode
• Claude Code (Anthropic)
• GitHub Copilot Workspace
• Windsurf (Codeium)
• v0.dev (Vercel) — khusus UI
• Bolt.new — full stack dari prompt

• HTML/CSS/JS minimal 3 bulan
• Framework (React/Vue/Svelte) 2 bulan
• Backend (Node/Go/Python) 2 bulan
• Database, auth, deployment 1 bulan

• Buka Cursor
• Ketik: "Bikin todo app pake React + Firebase, fitur: tambah, hapus, centang selesai, dark mode"
• 5 menit: app jalan.

// AI generate ini kelihatan oke
app.post('/api/users', async (req, res) => {
  const user = await db.createUser(req.body);
  res.json(user);
});

// Reality: 
// - No validation (SQL injection waiting to happen)
// - No rate limiting (spam magnet)
// - No error handling (crash = 500 blank)
// - No logging (debugging = tebak-tebakan)
// - Password plain text (security audit = gagal)

Fakta pahit: AI coding tools bikin developer 4x lebih cepat, tapi 10x lebih riskan dari sisi security (Kusari Report 2026).

• Import library yang ggak ada
• Pakai API deprecated 2 tahun lalu
• Bikin variable tapi ggak dipake (dead code)
• Logic yang salah tapi syntax benar (susah di-debug)

• File structure? Acak.
• Naming convention? Campur aduk.
• TypeScript types? any di mana-mana.
• Reusability? Nol. Copy-paste everywhere.

• Review kode AI dengan kritis
• Debug kalau AI bingung
• Arsitektur yang scalable
• Optimasi performa

• Prototype/MVP buat validasi ide (throwaway code)
• Internal tools yang cuma dipake tim kecil, low risk
• Learning sandbox — lu vibe code, LUPAIN hasilnya, terus lu baca dan pelajari kode yang AI generate
• UI components — v0.dev atau Bolt.new buat bikin landing page cepet
• Boilerplate/setup — config Tailwind, ESLint, TypeScript, CI/CD

• Production app yang handle data user, payment, auth
• System yang butuh reliability (healthcare, fintech, infra)
• Codebase yang akan di-maintain tim (orang lain harus baca kode lu)
• Kalau lu pemula dan nggak niat belajar — ini jalur paling cepet ke tutorial hell versi baru

• Lu yang nulis spec/arsitektur (bukan cuma prompt vague)
• AI generate satu file per satu — lu review sebelum lanjut
• Lu nulis test case — AI generate implementasi
• Start saying "no" ke AI suggestion yang aneh

• Lu = Senior/Lead, AI = Junior yang cepet tapi butuh arahan
• Lu desain arsitektur, AI implement detail
• Lu handle: auth, security, deployment, monitoring
• AI handle: CRUD, UI boilerplate, test writing, docs

"Bikin e-commerce deh pake Next.js"

"Bikin Next.js 14 App Router e-commerce minimal. Stack: TypeScript, Tailwind, Prisma + PostgreSQL, NextAuth (credentials + Google), Stripe untuk payment. Struktur: /app/(auth), /app/(shop), /app/api. Pakai Server Components default, Client Components hanya untuk interaktif. Semua form pakai React Hook Form + Zod. Error handling pake try-catch + toast. Jangan pakai 'any'."

• [ ] Lu baca SEMUA file yang AI generate (minimal skim)
• [ ] Ada validation di semua input user (Zod/Yup)
• [ ] Auth & authorization di-test manual (coba akses endpoint orang lain)
• [ ] Error handling nggak nge-leak stack trace ke user
• [ ] Environment variables nggak hardcoded
• [ ] TypeScript strict mode jalan tanpa error
• [ ] Lint + format pass (pnpm lint, pnpm format)
• [ ] Build production sukses (pnpm build)
• [ ] Lu bisa jelasin ke temen: "Ini alur datanya, ini kenapa pakai tabel ini"

"Vibe coding bikin lu nampak kayak developer dalam 1 jam. Tapi jadi developer beneran? Butuh 1000 jam baca error, debug, refactor, dan ngerasain sakitnya maintain kode jelek."

• Tangan tukang kayu → bikin kursi keren cepet
• Tangan orang awam → lubang di dinding, atau jari tercekik

• Berhasil bikin app utuh?
• Atau stuck di error aneh yang AI sendiri bikin?