Apa itu Vibe Coding?

Vibe Coding adalah gaya pengembangan aplikasi di mana kamu bertindak sebagai arsitek dan pengarah (director), sementara AI (seperti Antigravity, Cursor, ChatGPT, atau Claude) bertindak sebagai eksekutor penulisan kode teknis.

Istilah ini dipopulerkan oleh Andrej Karpathy untuk menggambarkan bagaimana pengembang modern dapat membangun produk perangkat lunak secara cepat dengan fokus pada aliran ide, desain antarmuka, dan pengalaman pengguna (the vibe), tanpa terhambat oleh hafalan sintaksis teknis.

Perbedaan Cara Kerja Konvensional vs Vibe Coding

Aspek	Cara Kerja Tradisional	Vibe Coding
Aktivitas Utama	Mengetik sintaks baris demi baris secara manual	Merumuskan instruksi spesifik dan memvalidasi hasil
Keahlian Utama	Menghafal API, struktur sintaks, dan konfigurasi	Problem decomposition, logika alur, dan review kode
Kecepatan Iterasi	Lambat (jam hingga hari per fitur)	Cepat (menit per iterasi fitur)
Teknologi yang Cocok	Semua stack	Stack ringan, bersih, dan minim dependensi (HTML/CSS & GS)

Mengapa Memilih Stack HTML, CSS & Google Apps Script (GS)?

Banyak pemula terjebak mencoba framework full-stack modern (seperti Next.js, Docker, Prisma, atau PostgreSQL) saat pertama kali belajar dengan AI. Hal ini sering menimbulkan masalah:

Dependency build yang mudah rusak (break).
Konfigurasi environment yang rumit (node version, environment variables, bundler errors).
Biaya server dan database cloud yang mahal.

Sebaliknya, HTML + CSS + Google Apps Script (GS) memberikan:

Zero Setup: File HTML & CSS dapat langsung dibuka di browser tanpa perlu server lokal.
Zero Cost: Google Apps Script dan Google Sheets sepenuhnya gratis.
Mudah Di-debug: Semua kode transparan dan mudah dimengerti.

Contoh Prompt Pertama dengan Framework T-C-R-E-I

Salin prompt terstruktur di bawah ini ke asisten AI untuk memulai:

[TASK & PERSONA]
Bertindaklah sebagai asisten AI pembuat aplikasi web. Bantu saya membuat aplikasi absensi karyawan sederhana di Google Apps Script.

[CONTEXT & KEBUTUHAN]
- Ada formulir untuk mencatat kehadiran (Nama, Status: Hadir/Izin/Sakit, Catatan).
- Ada tabel daftar riwayat kehadiran yang tersimpan di Google Sheets.
- Desain modern bertema gelap (charcoal dark #121212 - #181818) yang responsif untuk HP dan laptop.

[REFERENCES & FORMAT]
Tolong buatkan dalam 3 file untuk editor Google Apps Script:
1. Schema.gs -> Definisi nama sheet, kolom database, dan inisialisasi tabel otomatis.
2. Code.gs -> Logika backend CRUD dan penyaji Web App (doGet & doPost).
3. Index.html -> Struktur formulir, tabel riwayat presensi, dan styling CSS (di dalam tag <style>).

Checkpoint

Memahami perbedaan peran antara programmer manual dan AI director.
Mengetahui alasan memilih stack sederhana (HTML/CSS + GS) daripada full-stack framework yang rumit.
Siap melanjutkan ke bab cara berpikir sebagai director.