Dinda mau bikin website toko online.
Dia buka ChatGPT, ketik:
"Buatin aku website jualan baju"
AI kasih code panjang. HTML, CSS, JavaScript. Ratusan baris.
Dinda copy-paste. Buka di browser.
Error.
Dinda balik ke ChatGPT:
"Kok error? Fix dong"
AI fix. Dinda coba lagi.
Error beda.
"Masih error nih"
AI fix lagi.
Error lain muncul.
Loop ini terus berulang.
Dinda frustrasi. AI-nya bodoh? Atau Dinda yang bodoh?
Jawabannya: nggak ada yang bodoh.
Masalahnya bukan di kemampuan.
Masalahnya di komunikasi.
The Real Problem
Coba perhatiin prompt Dinda:
"Buatin aku website jualan baju"
Ini kayak masuk restoran terus bilang ke pelayan:
"Aku mau makan yang enak"
Pelayan bingung.
Enak yang kayak gimana? Nasi? Mie? Steak? Pedas? Manis? Porsi besar? Porsi kecil?
Akhirnya pelayan bawa sesuatu. Random.
Kamu komplain: "Bukan ini yang aku mau!"
Pelayan: "Tapi kan kamu cuma bilang 'yang enak'..."
Sama persis dengan Dinda.
"Website jualan baju" itu terlalu vague.
Website yang gimana? Ada login? Ada keranjang? Bayar gimana? Data disimpan di mana? Tampilan kayak apa?
Dinda nggak bisa jawab pertanyaan-pertanyaan ini.
Bukan karena bodoh.
Tapi karena nggak tau istilah-istilahnya.
Vocabulary > Syntax
Banyak orang pikir belajar coding = hapal syntax.
Titik koma di mana. Kurung buka kurung tutup. If else while for.
Itu penting kalau kamu mau jadi programmer beneran.
Tapi untuk vibe coding? Nggak perlu.
Yang kamu perlu untuk vibe coding adalah vocabulary.
Bukan cara nulis code.
Tapi cara ngomong tentang code.
Bedanya gini:
❌ Tanpa vocabulary:"Bikin halaman login"
✅ Dengan vocabulary:"Bikin halaman login dengan form email dan password di frontend. Setelah submit, kirim request POST ke backend endpoint /api/login. Di backend, cek apakah credentials cocok dengan database. Kalau cocok, bikin session dan redirect ke dashboard. Kalau nggak, return error message."
Prompt kedua jauh lebih panjang.
Tapi hasilnya? Exactly what you want.
Nggak perlu bolak-balik fix error.
Analogi: Traveling ke Luar Negeri
Bayangin kamu mau ke Jepang.
Nggak bisa bahasa Jepang sama sekali.
Kamu bisa survive? Bisa. Pakai Google Translate, pointing, gestures.
Tapi ribet. Sering salah paham. Makan waktu.
Sekarang bayangin kamu tau 50 kata kunci:
- Eki (stasiun)
- Toire (toilet)
- Ikura (berapa harga)
- Kore (ini)
- Oishii (enak)
- Arigatou (terima kasih)
Kamu nggak fasih.
Tapi kamu bisa komunikasi basic.
Perjalanan jadi lebih smooth.
Vibe coding sama persis.
Kamu nggak perlu jadi programmer.
Cukup tau vocabulary kunci biar bisa komunikasi dengan AI.
50 Istilah, 5 Kategori
Di artikel ini, aku kasih kamu 50 istilah yang paling penting untuk vibe coding.
Dibagi jadi 5 kategori:
- Arsitektur Dasar (12 istilah) — struktur website/app
- Data & Penyimpanan (10 istilah) — cara simpan dan ambil data
- Security & Auth (10 istilah) — login dan keamanan
- Development Process (10 istilah) — proses bikin dan launch
- UI/UX Terms (8 istilah) — tampilan dan interaksi
Setiap istilah ada:
- Artinya — definisi simple, 1-2 kalimat
- Analogi — perbandingan dengan sesuatu sehari-hari
- Contoh prompt — cara pakai dalam prompt ke AI
Let's go.
KATEGORI 1: Arsitektur Dasar
12 istilah tentang struktur dan bagian-bagian website/aplikasi
Sebelum bangun rumah, kamu perlu tau: mana ruang tamu, mana dapur, mana kamar mandi.
Sebelum bikin website, kamu perlu tau: mana frontend, mana backend, mana database.
1. Frontend
Artinya: Bagian yang dilihat dan disentuh user. Tampilan, tombol, form, gambar — semua yang visible di layar.
Analogi: Interior restoran — dekorasi, meja kursi, menu yang dipegang customer. Yang customer lihat dan rasakan langsung.
Contoh prompt:"Bikin frontend halaman login dengan form email dan password, tombol submit warna biru, ada link 'Lupa Password' di bawahnya"
2. Backend
Artinya: Bagian "di balik layar" yang user nggak lihat. Logic, perhitungan, penyimpanan data, keamanan — semua yang terjadi di server.
Analogi: Dapur restoran — tempat masak, nyimpen bahan, ngitung bill. Customer nggak lihat, tapi tanpa ini restoran nggak jalan.
Contoh prompt:"Di backend, cek apakah email dan password cocok dengan data di database. Kalau cocok, bikin session. Kalau nggak, return error message."
3. Full-stack
Artinya: Frontend + Backend. Keseluruhan sistem dari depan sampai belakang.
Analogi: Seluruh restoran — dari interior sampai dapur, dari menu sampai kasir, dari parkiran sampai toilet.
Contoh prompt:"Bikin aplikasi to-do list full-stack. Frontend pakai React, backend pakai Node.js, database pakai PostgreSQL."
4. API (Application Programming Interface)
Artinya: "Jembatan" yang menghubungkan frontend dan backend, atau menghubungkan sistem yang berbeda. Cara mereka "ngobrol".
Analogi: Pelayan restoran — dia yang bawa pesanan dari customer (frontend) ke dapur (backend), terus bawa makanan balik ke meja customer.
Contoh prompt:"Bikin API endpoint untuk register user baru. Terima data nama, email, password dari frontend, validasi, terus simpan ke database."
5. Server
Artinya: Komputer yang "melayani" — tempat backend berjalan, tempat website di-host, yang merespons permintaan dari user.
Analogi: Gedung restoran itu sendiri — tempat semua aktivitas terjadi. Tanpa gedung, nggak ada restoran.
Contoh prompt:"Gimana cara deploy aplikasi ini ke server? Aku mau pakai DigitalOcean atau Vercel."
6. Client
Artinya: Sisi user — browser, aplikasi di HP, atau apapun yang dipakai user untuk mengakses sistem kamu.
Analogi: Customer yang datang ke restoran — mereka yang minta layanan, mereka yang menerima hasil.
Contoh prompt:"Validasi input di sisi client dulu sebelum kirim ke server, biar ngurangin request yang nggak perlu."
7. Request
Artinya: "Permintaan" dari client ke server. Kayak bilang: "Hey server, aku mau data ini" atau "Hey server, tolong simpan data ini."
Analogi: Pesanan customer ke pelayan — "Saya mau nasi goreng satu, es teh dua."
Contoh prompt:"Kalau user klik tombol Submit, kirim request ke backend dengan semua data dari form."
8. Response
Artinya: "Jawaban" dari server ke client. Hasil dari request — bisa berupa data, pesan sukses, atau pesan error.
Analogi: Pelayan balik ke meja — bawa makanan pesanan (sukses) atau bilang "maaf, stoknya habis" (error).
Contoh prompt:"Kalau registrasi sukses, response-nya kasih message 'Akun berhasil dibuat' dan redirect ke halaman login. Kalau gagal, kasih error yang jelas."
9. Endpoint
Artinya: "Alamat" spesifik di API untuk fungsi tertentu. Misalnya /login untuk login, /register untuk daftar, /products untuk lihat produk.
Analogi: Loket berbeda di kantor pemerintah — loket 1 untuk KTP, loket 2 untuk SIM, loket 3 untuk paspor. Beda kebutuhan, beda loket.
Contoh prompt:"Bikin endpoint /api/products untuk ambil semua produk, dan /api/products/:id untuk ambil detail satu produk berdasarkan ID-nya."
10. HTTP Methods (GET, POST, PUT, DELETE)
Artinya: "Jenis" request — nunjukin kamu mau ngapain:
- GET = ambil/lihat data
- POST = kirim/bikin data baru
- PUT = update data yang sudah ada
- DELETE = hapus data
Analogi: Di restoran:
- GET = "Mau lihat menu" (cuma lihat, nggak ngubah apa-apa)
- POST = "Pesan nasi goreng" (bikin pesanan baru)
- PUT = "Ganti jadi mie goreng" (ubah pesanan yang sudah ada)
- DELETE = "Cancel pesanannya" (hapus)
Contoh prompt:"Endpoint /api/users: GET untuk ambil semua user, POST untuk bikin user baru, PUT untuk update user, DELETE untuk hapus user."
11. URL / Route
Artinya: Alamat halaman atau resource. Kayak /home, /about, /products/123, /dashboard.
Analogi: Alamat rumah — biar orang (atau browser) tau harus ke mana untuk dapat apa.
Contoh prompt:"Setup routing: / untuk homepage, /login untuk halaman login, /dashboard untuk halaman setelah login, /products/:id untuk detail produk."
12. Framework / Library
Artinya:
- Framework = "Kerangka" yang sudah jadi, ada aturan mainnya, tinggal kamu isi (contoh: React, Laravel, Next.js)
- Library = "Alat bantu" untuk tugas spesifik, lebih fleksibel (contoh: Axios untuk request API, Lodash untuk manipulasi data)
Analogi:
- Framework = Franchise restoran (sistem udah ada — menu, SOP, interior — kamu tinggal jalanin)
- Library = Alat dapur spesifik (blender untuk smoothie, oven untuk baking — kamu pilih yang kamu butuh)
Contoh prompt:"Aku mau pakai Next.js sebagai framework. Untuk styling, pakai Tailwind CSS. Untuk state management, pakai Zustand."
Quick Recap: Arsitektur Dasar
| Istilah | Satu Kalimat |
|---|---|
| Frontend | Yang user lihat |
| Backend | Yang user nggak lihat |
| Full-stack | Frontend + Backend |
| API | Jembatan antar sistem |
| Server | Komputer yang melayani |
| Client | Sisi user (browser/app) |
| Request | Permintaan ke server |
| Response | Jawaban dari server |
| Endpoint | Alamat spesifik di API |
| HTTP Methods | Jenis aksi (GET/POST/PUT/DELETE) |
| URL/Route | Alamat halaman |
| Framework/Library | Kerangka atau alat bantu |
KATEGORI 2: Data & Penyimpanan
10 istilah tentang cara menyimpan, mengambil, dan mengelola data
Website tanpa data itu kayak toko tanpa barang.
Kamu perlu tempat simpan data user, produk, transaksi, dan semua informasi penting lainnya.
13. Database
Artinya: Tempat menyimpan data secara terstruktur dan permanen. Semua info user, produk, pesanan — disimpan di sini.
Analogi: Gudang arsip kantor — semua dokumen penting disimpan rapi di sana, bisa dicari dan diambil kapan aja.
Contoh prompt:"Simpan data user ke database. Field yang dibutuhkan: id, nama, email, password (yang sudah di-hash), tanggal_daftar."
14. Table / Collection
Artinya: "Lemari" dalam database untuk kategori data tertentu. Table users untuk data user, table products untuk produk, table orders untuk pesanan.
Analogi: Lemari arsip yang berbeda untuk dokumen berbeda — satu lemari untuk data karyawan, satu untuk data keuangan, satu untuk data customer.
Contoh prompt:"Bikin table orders dengan field: id, user_id, total_amount, status (pending/paid/shipped/completed), created_at."
15. Query
Artinya: "Pertanyaan" atau perintah ke database — untuk minta data, cari data, atau filter data sesuai kriteria.
Analogi: Minta arsip ke admin gudang — "Cari dokumen karyawan yang masuk tahun 2023 dan gajinya di atas 10 juta."
Contoh prompt:"Query untuk ambil semua produk dengan harga di bawah 100rb, kategori 'elektronik', urutkan dari yang terbaru."
16. CRUD
Artinya: Singkatan dari 4 operasi dasar untuk data:
- Create = bikin data baru
- Read = baca/ambil data
- Update = ubah data yang ada
- Delete = hapus data
Analogi: 4 hal yang bisa kamu lakukan dengan file di komputer:
- Create = bikin file baru
- Read = buka dan baca file
- Update = edit isi file
- Delete = hapus file
Contoh prompt:"Bikin CRUD lengkap untuk entity Product. User bisa tambah produk baru, lihat daftar produk, edit detail produk, dan hapus produk."
17. Schema
Artinya: "Blueprint" atau struktur dari data — field apa aja yang ada, tipe datanya apa, mana yang wajib diisi.
Analogi: Formulir kosong — udah ada kolom nama, alamat, tanggal lahir, nomor telepon. Kamu tinggal isi sesuai kolomnya.
Contoh prompt:"Schema untuk User: id (integer, auto increment), name (string, required), email (string, unique, required), password (string, required), role (enum: admin/user, default: user), created_at (timestamp)."
18. Relasi
Artinya: Hubungan antar data di table yang berbeda:
- One-to-Many: 1 data punya banyak data terkait (1 user punya banyak orders)
- Many-to-Many: Banyak data saling terhubung (1 produk bisa di banyak kategori, 1 kategori punya banyak produk)
Analogi:
- One-to-Many: 1 ibu punya banyak anak
- Many-to-Many: 1 murid ikut banyak ekstrakurikuler, 1 ekstrakurikuler punya banyak murid
Contoh prompt:"Relasi User dan Order adalah one-to-many — 1 user bisa punya banyak orders. Tambahin foreign key user_id di table orders yang reference ke table users."
19. Migration
Artinya: Cara membuat atau mengubah struktur database secara tercatat — kayak version control untuk database. Bisa di-rollback kalau salah.
Analogi: Log renovasi rumah — dicatat kapan nambah kamar, kapan ganti lantai, kapan pasang AC. Kalau ada masalah, bisa lihat history-nya.
Contoh prompt:"Bikin migration untuk menambahkan field phone_number (string, nullable) ke table users."
20. Seed / Seeding
Artinya: Mengisi database dengan data dummy atau contoh untuk keperluan testing dan development.
Analogi: Mengisi rumah contoh dengan furniture dummy sebelum dijual — biar calon pembeli bisa lihat gimana tampilan rumah kalau sudah ada isinya.
Contoh prompt:"Bikin seeder untuk generate 20 dummy users dan 100 dummy products dengan data yang realistis untuk testing."
21. Cache
Artinya: Menyimpan data sementara di tempat yang lebih cepat diakses — supaya nggak perlu query database berulang-ulang untuk data yang sama.
Analogi: Nyimpen nomor telepon yang sering dihubungi di speed dial — nggak perlu buka buku telepon setiap kali mau nelpon orang yang sama.
Contoh prompt:"Cache daftar produk populer selama 10 menit. Kalau ada request, ambil dari cache dulu. Kalau cache expired, baru query database dan update cache."
22. JSON
Artinya: Format data yang umum dipakai untuk kirim-terima data — readable oleh manusia dan mesin. Bentuknya kayak {"key": "value"}.
Analogi: Bahasa universal untuk pertukaran informasi — kayak bahasa Inggris di bisnis internasional. Semua sistem bisa baca dan tulis format ini.
Contoh prompt:"Response API-nya dalam format JSON. Contoh struktur: {success: true, message: 'Data berhasil diambil', data: [{id: 1, name: 'Produk A'}]}"
Quick Recap: Data & Penyimpanan
| Istilah | Satu Kalimat |
|---|---|
| Database | Gudang penyimpanan data |
| Table | Lemari untuk kategori data tertentu |
| Query | Pertanyaan/perintah ke database |
| CRUD | Create, Read, Update, Delete |
| Schema | Blueprint struktur data |
| Relasi | Hubungan antar data |
| Migration | Version control untuk struktur database |
| Seed | Isi data dummy untuk testing |
| Cache | Simpan sementara biar lebih cepat |
| JSON | Format standar pertukaran data |
KATEGORI 3: Security & Authentication
10 istilah tentang keamanan, login, dan perlindungan data
Website tanpa security itu kayak rumah tanpa kunci.
Siapa aja bisa masuk. Data user bisa dicuri. Bisa dirusak orang.
23. Authentication (Auth)
Artinya: Proses verifikasi "kamu siapa?" — memastikan orang yang login beneran orang yang dia klaim. Biasanya lewat email + password, Google login, fingerprint, dll.
Analogi: Security di lobby gedung yang cek ID card — "Boleh lihat KTP-nya? Oh oke, Pak Budi. Silakan masuk."
Contoh prompt:"Bikin authentication pakai email dan password. Password harus di-hash sebelum disimpan. Saat login, verifikasi hash-nya cocok."
24. Authorization
Artinya: Proses cek "kamu boleh ngapain?" — setelah tau siapa orangnya, cek apa yang boleh dia akses atau lakukan.
Analogi: Setelah masuk gedung, kamu cuma boleh ke lantai tertentu sesuai level akses — karyawan biasa cuma bisa ke lantai 1-3, manager bisa ke lantai 4-5, direktur bisa ke semua lantai.
Contoh prompt:"Tambahkan authorization: user biasa cuma bisa lihat dan edit data milik sendiri, admin bisa lihat dan edit semua data user."
25. Session
Artinya: "Ingatan" server bahwa user sudah login — disimpan di server, berlaku sampai user logout atau session expired.
Analogi: Gelang tangan di waterpark — sekali dapat gelang setelah bayar tiket, kamu nggak perlu bayar lagi selama masih di dalam waterpark dan gelangnya belum dilepas.
Contoh prompt:"Setelah login berhasil, bikin session yang expired dalam 24 jam. Simpan session ID di server."
26. Cookie
Artinya: Data kecil yang disimpan di browser user — sering dipakai untuk menyimpan session ID, preferences, atau tracking info.
Analogi: Kartu member yang kamu bawa ke mana-mana — toko tinggal scan kartunya, langsung tau kamu member dan dapat diskon.
Contoh prompt:"Simpan session ID di cookie dengan flag httpOnly (biar nggak bisa diakses JavaScript) dan secure (cuma jalan di HTTPS)."
27. Token (JWT)
Artinya: "Tiket digital" yang membuktikan identitas — alternatif dari session. Disimpan di client (biasanya di localStorage atau cookie), dikirim setiap request.
Analogi: Boarding pass pesawat — kamu yang pegang sendiri, ditunjukin setiap kali lewat checkpoint, tanpa perlu airline cek ke database terus-terusan.
Contoh prompt:"Pakai JWT untuk authentication. Setelah login sukses, kasih access token yang expired dalam 15 menit dan refresh token yang expired dalam 7 hari."
28. Hashing
Artinya: Mengubah data (biasanya password) jadi kode acak yang nggak bisa dibalik. Untuk keamanan — bahkan developer pun nggak tau password asli user.
Analogi: Menghancurkan dokumen dengan mesin shredder — dokumen asli sudah nggak bisa dibaca atau disusun ulang lagi, tapi potongannya bisa dicocokkan dengan pola tertentu.
Contoh prompt:"Password harus di-hash pakai bcrypt dengan cost factor 12 sebelum disimpan ke database. Jangan pernah simpan password dalam bentuk plain text."
29. Encryption
Artinya: Mengubah data jadi kode rahasia yang bisa dibalik (dengan key yang benar). Untuk data sensitif yang suatu saat perlu dibaca lagi.
Analogi: Brankas dengan kunci kombinasi — isinya aman dari orang lain, tapi yang punya kunci bisa buka kapan aja.
Contoh prompt:"Encrypt data nomor kartu kredit sebelum simpan ke database. Decrypt hanya saat memproses pembayaran."
30. HTTPS / SSL
Artinya: Koneksi aman antara browser dan server — semua data yang dikirim di-encrypt selama perjalanan, nggak bisa dibaca orang yang "menguping".
Analogi: Amplop tertutup vs kartu pos — kalau pakai amplop (HTTPS), isi surat cuma bisa dibaca penerima. Kalau kartu pos (HTTP), siapa aja yang megang bisa baca isinya.
Contoh prompt:"Pastikan website pakai HTTPS. Setup redirect otomatis dari HTTP ke HTTPS."
31. Validation
Artinya: Mengecek apakah input dari user valid dan sesuai aturan sebelum diproses — email harus format email beneran, umur harus angka positif, dll.
Analogi: Petugas bank yang cek kelengkapan formulir sebelum diproses — "Pak, kolom tanggal lahirnya belum diisi. TTD-nya juga kurang satu."
Contoh prompt:"Validasi form registrasi: email harus format email valid, password minimal 8 karakter dengan kombinasi huruf dan angka, nama nggak boleh kosong."
32. Sanitization
Artinya: Membersihkan input dari karakter atau kode berbahaya — mencegah serangan hacking seperti SQL injection atau XSS.
Analogi: Scanner bagasi di bandara — menghapus barang berbahaya sebelum masuk ke pesawat, meskipun pemiliknya klaim itu aman.
Contoh prompt:"Sanitize semua input dari user sebelum dipakai di query database atau ditampilkan di HTML. Cegah SQL injection dan XSS attack."
Quick Recap: Security & Auth
| Istilah | Satu Kalimat |
|---|---|
| Authentication | Verifikasi siapa kamu |
| Authorization | Verifikasi boleh ngapain |
| Session | Ingatan server bahwa user sudah login |
| Cookie | Data kecil di browser user |
| Token/JWT | Tiket digital pembuktian identitas |
| Hashing | Ubah password jadi kode (nggak bisa dibalik) |
| Encryption | Ubah data jadi kode (bisa dibalik) |
| HTTPS/SSL | Koneksi aman dan terenkripsi |
| Validation | Cek input sesuai aturan |
| Sanitization | Bersihkan input dari kode berbahaya |
Lanjut ke Kategori 4: Development Process → -e
KATEGORI 4: Development Process
10 istilah tentang proses membuat, testing, dan meluncurkan aplikasi
Bikin aplikasi bukan cuma nulis code.
Ada proses testing, fixing error, tracking perubahan, sampai akhirnya "go live".
33. Deploy
Artinya: Membuat aplikasi "live" dan bisa diakses publik — memindahkan dari komputer lokal ke server yang online 24/7.
Analogi: Grand opening restoran — setelah berbulan-bulan persiapan di balik layar, akhirnya buka pintu untuk customer beneran.
Contoh prompt:"Gimana cara deploy aplikasi Next.js ini ke Vercel? Aku mau website-nya bisa diakses publik dengan domain sendiri."
34. Production vs Development
Artinya:
- Development = versi untuk coding dan testing (di komputer sendiri, bebas eksperimen)
- Production = versi live yang dipakai user beneran (harus stabil, nggak boleh error)
Analogi:
- Development = latihan masak di dapur rumah (bebas gagal, bebas eksperimen)
- Production = masak untuk tamu di pesta pernikahan (harus sempurna, nggak ada ruang untuk error)
Contoh prompt:"Setup environment berbeda untuk development dan production. Di development, tampilkan error detail. Di production, tampilkan halaman error yang user-friendly."
35. Environment Variables
Artinya: Konfigurasi yang disimpan terpisah dari code — biasanya info sensitif seperti API key, password database, secret key. Bisa beda nilai untuk development dan production.
Analogi: PIN ATM — nggak ditulis di kartu ATM-nya, kamu simpan sendiri secara terpisah. Kalau kartu hilang, PIN tetap aman.
Contoh prompt:"Simpan DATABASE_URL dan API_SECRET_KEY di environment variables. Jangan pernah hardcode langsung di source code atau commit ke Git."
36. Debug / Debugging
Artinya: Proses mencari dan memperbaiki error atau bug dalam code — investigasi kenapa sesuatu nggak jalan sesuai harapan.
Analogi: Mekanik bengkel yang cari kenapa mobil mogok — cek satu per satu komponen sampai ketemu sumber masalahnya.
Contoh prompt:"Ada error 'Cannot read property of undefined' di line 45. Ini code-nya: [paste code]. Bisa bantu debug kenapa error ini muncul dan cara fix-nya?"
37. Console Log
Artinya: Menampilkan pesan atau nilai di console (layar khusus developer) — untuk tracking apa yang terjadi dalam code saat dijalankan.
Analogi: Nulis catatan di setiap langkah resep — "Sampe sini bawang udah ditumis ✓, lanjut masukkin ayam..." Jadi tau progress-nya sampai mana.
Contoh prompt:"Tambahin console.log di setiap step proses checkout untuk tracking: setelah validasi cart, setelah hitung total, setelah proses payment, setelah simpan order."
38. Error Handling
Artinya: Cara menangani error dengan baik — supaya aplikasi nggak langsung crash dan user dapat informasi yang jelas tentang apa yang salah.
Analogi: Plan B kalau acara outdoor kena hujan — acaranya tetap jalan, cuma pindah ke indoor. Nggak langsung batal total.
Contoh prompt:"Tambahin error handling yang proper. Kalau database error, tampilkan pesan 'Sedang ada gangguan, coba lagi nanti' ke user, bukan error code mentah."
39. Testing
Artinya: Memastikan code berjalan sesuai harapan — bisa manual (coba sendiri) atau automated (tulis code untuk test code).
Analogi: Test drive mobil sebelum beli — cek rem berfungsi, AC dingin, mesin halus, semua fitur jalan normal.
Contoh prompt:"Bikin unit test untuk fungsi calculateTotal(). Test case: keranjang kosong harus return 0, keranjang dengan 1 item, keranjang dengan diskon, keranjang dengan ongkir."
40. Git
Artinya: Sistem untuk tracking semua perubahan code — bisa lihat history, siapa ubah apa kapan, dan bisa kembali ke versi sebelumnya kalau ada masalah.
Analogi: Google Docs dengan version history — bisa lihat semua perubahan yang pernah dibuat, siapa yang edit, dan bisa restore ke versi lama.
Contoh prompt:"Gimana cara setup Git untuk project ini dan push ke repository GitHub?"
41. Commit
Artinya: "Save point" dalam Git — menyimpan perubahan dengan pesan yang menjelaskan apa yang diubah.
Analogi: Save game di checkpoint — kalau nanti ada masalah, bisa load ulang dari save point ini.
Contoh prompt:"Aku mau commit perubahan ini dengan message yang descriptive. Perubahan: nambahin fitur user registration dengan email verification."
42. Branch
Artinya: "Cabang" dalam Git — untuk develop fitur baru secara terpisah tanpa mengganggu code utama. Setelah selesai dan tested, baru digabung (merge).
Analogi: Ruang eksperimen terpisah — coba resep baru di dapur experiment, kalau berhasil baru masuk menu utama restoran.
Contoh prompt:"Bikin branch baru dengan nama 'feature/payment-integration' untuk develop fitur payment tanpa ganggu main branch."
Quick Recap: Development Process
| Istilah | Satu Kalimat |
|---|---|
| Deploy | Bikin aplikasi live untuk publik |
| Production/Development | Versi live vs versi untuk ngoding |
| Environment Variables | Config sensitif yang disimpan terpisah |
| Debug | Cari dan perbaiki error |
| Console Log | Cetak pesan untuk tracking |
| Error Handling | Tangani error dengan graceful |
| Testing | Pastikan code jalan sesuai harapan |
| Git | Tracking semua perubahan code |
| Commit | Save point dengan pesan |
| Branch | Cabang untuk develop fitur terpisah |
KATEGORI 5: UI/UX Terms
8 istilah tentang tampilan dan interaksi user
Tampilan dan user experience itu penting.
Aplikasi yang powerful tapi susah dipakai = gagal.
43. Component
Artinya: Bagian UI yang bisa dipakai berulang-ulang — tombol, card, navbar, form input, modal. Sekali bikin, bisa dipasang di banyak tempat.
Analogi: Lego blocks — sekali cetak satu bentuk, bisa dipasang di berbagai bangunan Lego yang berbeda.
Contoh prompt:"Bikin component Button yang reusable dengan props: label (text), variant (primary/secondary/danger), size (small/medium/large), onClick (function), disabled (boolean)."
44. Responsive
Artinya: Desain yang otomatis menyesuaikan ukuran layar — tampil bagus di HP, tablet, dan desktop tanpa perlu bikin versi terpisah.
Analogi: Air yang menyesuaikan bentuk wadahnya — mau dituang ke gelas, botol, atau ember, tetap ngisi dengan pas.
Contoh prompt:"Bikin layout responsive: di desktop tampilkan 4 kolom grid, di tablet 2 kolom, di HP 1 kolom. Navbar jadi hamburger menu di HP."
45. State
Artinya: "Kondisi" atau data yang disimpan dalam component — yang menentukan apa yang ditampilkan sekarang. Kalau state berubah, tampilan ikut berubah.
Analogi: Saklar lampu punya state: ON atau OFF. Kondisi saklar menentukan lampu nyala atau mati.
Contoh prompt:"Component ProductList punya state: isLoading (boolean, default true), error (string atau null), products (array, default kosong). Tampilan berubah sesuai state."
46. Props
Artinya: Data yang dikirim ke component dari parent-nya — cara untuk customize component tanpa ubah code component-nya.
Analogi: Topping pizza — bentuk pizza-nya sama, tapi kamu bisa pilih topping berbeda (keju, pepperoni, mushroom) sesuai selera.
Contoh prompt:"Component ProductCard terima props: name (string), price (number), imageUrl (string), onAddToCart (function). Tampilkan data sesuai props yang dikirim."
47. Event
Artinya: Aksi yang terjadi di UI — user klik tombol (click), ketik di form (input), hover mouse (mouseenter), scroll halaman (scroll), submit form (submit).
Analogi: Sensor trigger — kalau pintu dibuka (event: open), alarm berbunyi (action: ring). Kalau tombol ditekan (event), sesuatu terjadi (action).
Contoh prompt:"Kalau user klik tombol 'Add to Cart' (event onClick), jalankan fungsi addToCart() yang menambahkan produk ke keranjang dan update state."
48. Modal
Artinya: Pop-up window yang muncul di atas halaman utama — biasanya untuk konfirmasi, form singkat, atau pesan penting yang butuh perhatian.
Analogi: Jendela kecil yang minta perhatian sebelum lanjut — "Yakin mau hapus? Data nggak bisa dikembalikan lho."
Contoh prompt:"Tampilkan modal konfirmasi sebelum delete item. Isi modal: pesan 'Yakin mau hapus produk ini?', tombol Cancel (tutup modal), tombol Delete (hapus dan tutup modal)."
49. Form
Artinya: Kumpulan input untuk mengumpulkan data dari user — form login, form registrasi, form checkout, form contact.
Analogi: Formulir yang harus diisi — ada kolom-kolom yang harus dilengkapi sebelum bisa diproses.
Contoh prompt:"Bikin form checkout dengan field: nama lengkap, nomor HP, alamat lengkap, kota (dropdown), kode pos, metode pembayaran (radio button: transfer/e-wallet/COD)."
50. Loading State
Artinya: Tampilan khusus saat menunggu proses selesai — spinner berputar, skeleton loading, progress bar, atau pesan "Mohon tunggu..."
Analogi: Lampu "OCCUPIED" di toilet — ngasih tau ada proses yang sedang berjalan, sabar tunggu sampai selesai.
Contoh prompt:"Tambahin loading state: saat fetch data dari API, tampilkan spinner di tengah layar. Setelah data ready, ganti spinner dengan content. Kalau error, tampilkan pesan error."
Quick Recap: UI/UX Terms
| Istilah | Satu Kalimat |
|---|---|
| Component | Bagian UI yang reusable |
| Responsive | Otomatis menyesuaikan ukuran layar |
| State | Kondisi/data dalam component |
| Props | Data dari parent ke child component |
| Event | Aksi user (click, input, submit) |
| Modal | Pop-up window untuk konfirmasi/info |
| Form | Kumpulan input untuk collect data |
| Loading State | Tampilan saat proses loading |
BONUS: 10 Prompt Patterns
Cara mengkombinasikan vocabulary dalam prompt
Sekarang kamu tau 50 istilah.
Tapi gimana cara pakainya dalam prompt ke AI?
Ini 10 pattern yang bisa kamu kombinasikan:
Pattern 1: Tech Stack Declaration
Format: "Bikin [fitur] dengan [frontend] dan [backend]"
Contoh:"Bikin sistem e-commerce dengan React untuk frontend dan Node.js + Express untuk backend"
Pattern 2: Frontend-Backend Split
Format: "Di frontend, [aksi]. Di backend, [aksi]"
Contoh:"Di frontend, validasi format email dan password minimal 8 karakter. Di backend, cek email belum terdaftar dan hash password sebelum simpan."
Pattern 3: State Definition
Format: "Component [nama] punya state: [list state dengan tipe]"
Contoh:"Component CartPage punya state: items (array of product), isLoading (boolean), totalPrice (number), promoCode (string atau null)."
Pattern 4: API Endpoint Specification
Format: "Bikin endpoint [method] [route] untuk [fungsi]"
Contoh:"Bikin endpoint POST /api/orders untuk create order baru dengan data dari cart, kurangi stock, dan kirim email konfirmasi."
Pattern 5: Database Relation
Format: "Relasi antara [table A] dan [table B] adalah [tipe relasi]"
Contoh:"Relasi antara Product dan Category adalah many-to-many. Satu produk bisa di banyak kategori, satu kategori punya banyak produk."
Pattern 6: Error Handling
Format: "Tambahin error handling untuk [skenario]"
Contoh:"Tambahin error handling untuk: database connection gagal, user input tidak valid, payment gateway timeout, file upload terlalu besar."
Pattern 7: Validation Rules
Format: "Validasi: [field] harus [aturan]"
Contoh:"Validasi: email harus format valid dan unique, password minimal 8 karakter dengan huruf besar-kecil dan angka, phone harus format Indonesia (+62)."
Pattern 8: Storage Configuration
Format: "Simpan [data] di [storage] dengan [konfigurasi]"
Contoh:"Simpan access token di cookie dengan httpOnly, secure flag, SameSite strict, dan expired dalam 15 menit."
Pattern 9: Responsive Breakpoints
Format: "Responsive layout: desktop [x], tablet [y], mobile [z]"
Contoh:"Responsive layout: desktop 4 kolom dengan sidebar, tablet 2 kolom tanpa sidebar, mobile 1 kolom dengan hamburger menu."
Pattern 10: Conditional Logic
Format: "Sebelum [action], cek dulu [kondisi]"
Contoh:"Sebelum proses checkout, cek dulu: user sudah login, cart tidak kosong, semua item masih ada stock, alamat pengiriman sudah lengkap."
Closing: From Vocabulary to Action
50 Istilah, 1 Cheatsheet
Ini ringkasan semua yang sudah kamu pelajari:
| Kategori | Istilah Kunci |
|---|---|
| Arsitektur | Frontend, Backend, API, Server, Request, Response, Endpoint, HTTP Methods |
| Data | Database, Table, Query, CRUD, Schema, Relasi, Migration, Cache, JSON |
| Security | Auth, Authorization, Session, Cookie, Token, Hashing, Encryption, Validation |
| Development | Deploy, Production, Environment Variables, Debug, Git, Commit, Branch |
| UI/UX | Component, Responsive, State, Props, Event, Modal, Form, Loading State |
What's Next?
1. Save artikel ini Bookmark atau screenshot — jadiin reference setiap kali mau vibe coding.
2. Praktik langsung Buka AI (ChatGPT, Claude, dll), coba bikin sesuatu. Pakai vocabulary baru.
3. Expand vocabulary Kalau ketemu istilah baru, tanya AI: "Jelaskan [istilah] dengan analogi sederhana dan contoh penggunaannya."
4. Iterate Makin sering pakai, makin natural. Vocabulary akan jadi bagian dari cara kamu berpikir.
Final Message
Ingat Dinda di awal?
Yang prompt-nya "Buatin website jualan baju" dan dapat hasil yang nggak sesuai harapan?
Dengan 50 istilah ini, Dinda sekarang bisa bilang:
"Bikin e-commerce full-stack dengan Next.js. Frontend: halaman home dengan product grid yang responsive, halaman product detail, cart page, dan checkout form. Backend: API endpoints untuk CRUD products, authentication dengan JWT, dan order management. Database: PostgreSQL dengan table users, products, orders, dan order_items dengan relasi yang proper. Tambahin validation di frontend dan backend, error handling yang user-friendly, dan loading states."
Masih butuh iterasi? Pasti.
Tapi starting point-nya jauh lebih solid.
Komunikasi dengan AI jauh lebih efektif.
Hasil yang didapat jauh lebih sesuai ekspektasi.
Kamu nggak perlu jadi programmer.
Kamu cuma perlu bisa komunikasi dengan AI.
Dan komunikasi yang baik dimulai dari vocabulary.
Sekarang kamu punya vocabulary-nya.
Go build something. 🚀
Artikel ini adalah bagian dari Vibe Coding Mastery series di BuildWithAngga — membantu kamu belajar coding dengan cara yang lebih efektif di era AI.
