Tutorial Vibe Coding untuk Non-Teknis: Bikin BookingKu Sampai Live + Dashboard Admin

Tutorial ini beda dari kebanyakan panduan vibe coding. Kebanyakan panduan berhenti di "tulis prompt, AI bikinin aplikasi". Tutorial ini menuntun sampai tuntas: app benar-benar live di internet, punya dashboard admin yang jalan, lengkap dengan langkah klik demi klik dan solusi untuk error yang paling sering muncul. Tidak perlu paham coding sama sekali. Studi kasus yang dipakai dari awal sampai akhir: BookingKu, aplikasi booking untuk bisnis jasa lokal.

Studi Kasus: BookingKu

BookingKu adalah aplikasi booking untuk bisnis jasa lokal, seperti salon, klinik kecantikan, bengkel, atau jasa servis AC.

Target user: pemilik bisnis jasa kecil dengan 1 sampai 5 cabang.

Masalah: booking masih dicatat manual lewat chat WhatsApp, sering bentrok jadwal, dan pemilik bisnis kesulitan melihat jadwal hari ini dalam satu tampilan.

Core value: klien bisa booking layanan lewat halaman publik, pemilik bisnis mengelola semua jadwal dari satu dashboard admin. Sampai akhir tutorial ini, BookingKu akan live di internet, bisa diakses siapa saja lewat link, dan punya dashboard admin tempat pemilik bisnis mengelola layanan serta booking yang masuk.

STEP 0 — Atur Pola Pikir Dulu

Kesalahan paling umum dalam vibe coding: membuka AI app builder lalu langsung menulis satu prompt raksasa berisi semua fitur sekaligus (login, payment, dashboard, notifikasi WhatsApp, semuanya jadi satu). Masalah dari pendekatan ini:

• Scope terlalu besar sehingga AI membuat banyak asumsi sendiri
• Struktur database tidak pernah didesain secara sadar
• Sulit melacak bagian mana yang menyebabkan error ketika semuanya dibangun sekaligus
• Setiap perubahan berikutnya berisiko merusak fitur yang sudah berjalan Urutan kerja yang dipakai di tutorial ini: Problem, Lean PRD, Blueprint (termasuk schema), Pilih Tool, Build, Test, Admin CMS, Deploy. Setiap tahap punya prompt siap tempel dan hasil yang bisa dicek sebelum lanjut ke tahap berikutnya.

STEP 1 — Validate the Problem

Jangan mulai dari pertanyaan "fitur apa yang harus ada". Mulai dari "masalah siapa yang ingin diselesaikan".

Prompt ke AI (tempel di ChatGPT atau Claude, bukan di app builder):

Jangan membuat aplikasi atau kode dulu.

Saya ingin membangun aplikasi booking untuk bisnis jasa lokal (salon, klinik kecantikan, bengkel) yang kesulitan mengelola jadwal karena booking masih manual lewat WhatsApp dan sering terjadi bentrok jadwal.

Bantu saya menganalisis:
1. Masalah utama yang dialami pemilik bisnis
2. Target user paling spesifik
3. Outcome yang paling mereka inginkan
4. Alternatif yang mereka pakai sekarang

Setelah itu, buatkan Problem Statement yang sederhana dan jelas.

Output yang harus didapat, satu kalimat sederhana:

"BookingKu membantu bisnis jasa lokal mengelola booking dari satu dashboard, tanpa bentrok jadwal."

STEP 2 — Buat Lean PRD

Struktur minimal: Product Summary, Target User, User Problem, Primary Goal, MVP Features, Non-Goals, Primary User Flow, Acceptance Criteria.

Prompt Lean PRD:

Berdasarkan Problem Statement berikut:

"BookingKu membantu bisnis jasa lokal mengelola booking dari satu dashboard, tanpa bentrok jadwal."

Buatkan Lean PRD untuk MVP dengan struktur:
1. Product Summary
2. Target User
3. User Problem
4. Primary Goal
5. MVP Features
6. Non-Goals
7. Primary User Flow
8. Acceptance Criteria

Batasi MVP hanya pada fitur yang diperlukan untuk membuktikan bahwa pemilik bisnis jasa lokal benar-benar membutuhkan produk ini.

MVP Features BookingKu di tutorial ini:

• Daftar akun bisnis (sign up dan login)
• Tambah layanan (nama, durasi, harga)
• Halaman booking publik untuk klien
• Dashboard admin untuk melihat dan mengelola booking
• Ubah status booking (Menunggu, Dikonfirmasi, Selesai, Batal)

Non-Goals di tutorial ini (sengaja belum dibangun, dijelaskan di bagian penutup):

• Reminder WhatsApp otomatis ke klien
• Payment DP
• Multi-cabang dalam satu akun
• Laporan analytics pendapatan

STEP 3 — Blueprint dan Approval Schema

Ini bagian yang paling sering dilewati, dan paling sering jadi sumber masalah belakangan: banyak orang langsung minta AI "tambahkan database" tanpa pernah melihat schema-nya lebih dulu.

Prompt Blueprint:

Berdasarkan Lean PRD ini, buatkan technical blueprint untuk MVP.

Jangan menulis kode.

Jelaskan:
1. Semua halaman yang diperlukan
2. Primary user flow
3. Database entities dan tipe datanya
4. Relationship antar entity
5. Data ownership: pastikan satu akun bisnis tidak bisa melihat data booking milik akun bisnis lain

Tampilkan schema database secara lengkap.

Schema BookingKu:

Businesses
  id, name, whatsapp_number, slug, created_at

Services
  id, business_id (FK), name, duration_minutes, price

Bookings
  id, business_id (FK), service_id (FK), client_name,
  client_whatsapp, scheduled_at, status, created_at

Setiap booking wajib menyimpan business_id secara eksplisit, bukan cuma diturunkan dari service_id. Ini bukan detail teknis kosmetik, bagian STEP 9 nanti akan menunjukkan kenapa ini krusial untuk mencegah satu bisnis melihat data bisnis lain.

STEP 4 — Pilih Tool dan Siapkan Akun

Dua tool yang dipakai di tutorial ini: Bolt.new dan Lovable. Keduanya sama-sama menghasilkan aplikasi lengkap dengan database dan hosting jadi satu paket, tanpa perlu setup server sendiri. Pilih salah satu, jangan dua-duanya sekaligus supaya tidak bingung.

Soal biaya, jujur di awal: free tier cukup untuk menyelesaikan sampai STEP 6 (core flow jalan). Begitu masuk STEP 7 (admin CMS) dan STEP 8 (deploy dengan domain sendiri), kemungkinan besar kuota gratis sudah menipis atau habis, dan custom domain memang cuma tersedia di paid plan. Siapkan budget sekitar Rp 400 ribu untuk satu bulan kalau target akhirnya app benar-benar live dengan domain sendiri.

Cara daftar:

1. Buka bolt.new atau lovable.dev
2. Daftar pakai akun Google atau GitHub, lebih cepat dari daftar email manual
3. Setelah masuk ke dashboard, klik tombol untuk membuat project baru ("New Project" atau kotak chat kosong di halaman utama)

STEP 5 — Build Core Flow

Belum semua fitur dibangun. Fokus ke satu alur utama yang benar-benar selesai dari ujung ke ujung, disebut Happy Path: Sign Up Bisnis, Login, Tambah Layanan, Klien Buka Halaman Booking Publik, Klien Pilih Layanan dan Jam, Booking Tersimpan

Langkah klik demi klik:

1. Di kotak chat project baru, tempel prompt di bawah ini
2. Tunggu proses generate selesai, biasanya 1-3 menit, tampil progress bar atau log di layar
3. Setelah selesai, klik tombol Preview (Bolt) atau lihat panel kanan yang otomatis menampilkan tampilan aplikasi (Lovable)
4. Coba jalankan flow-nya sendiri: sign up dengan email percobaan, tambah satu layanan, buka link booking publik di tab baru, coba booking sebagai klien

Prompt Build Core Flow:

Buatkan aplikasi web booking untuk bisnis jasa lokal, dengan database dan authentication bawaan (bukan cuma frontend statis).

Schema database:
Businesses: id, name, whatsapp_number, slug, created_at
Services: id, business_id, name, duration_minutes, price
Bookings: id, business_id, service_id, client_name, client_whatsapp, scheduled_at, status, created_at

Implementasikan flow berikut:
1. Sign up dan login untuk pemilik bisnis
2. Setelah login, pemilik bisa menambahkan layanan (nama, durasi, harga)
3. Setiap bisnis punya halaman booking publik yang bisa diakses tanpa login, lewat URL berisi slug bisnis
4. Di halaman publik, klien memilih layanan, memilih jam yang tersedia, mengisi nama dan nomor WhatsApp, lalu submit
5. Booking tersimpan ke database dengan status "Menunggu"

Aturan:
- Jangan menambahkan fitur di luar flow ini
- Jangan menambahkan payment atau reminder WhatsApp otomatis dulu
- Pastikan satu akun bisnis tidak bisa mengakses data milik bisnis lain lewat query apa pun

Jalankan dan tunjukkan preview-nya.

Kalau hasilnya belum sesuai di percobaan pertama, jangan langsung tulis prompt baru yang panjang. Tunjukkan persis apa yang salah, contoh: "tombol submit booking tidak menyimpan data, coba diperbaiki", bukan menulis ulang requirement dari awal.

STEP 6 — Test Core Flow

Prompt kalau ada yang belum jalan:

Bertindak sebagai QA engineer. Test flow: Sign Up, Login, Tambah Layanan, Klien Booking di Halaman Publik, Tersimpan.

Identifikasi broken flow, error state yang belum ditangani, dan data yang tidak tersimpan dengan benar. Jangan menambahkan fitur baru, cukup perbaiki yang sudah ada.

STEP 7 — Bangun Dashboard Admin

Ini bagian yang membedakan BookingKu dari sekadar form booking: pemilik bisnis butuh tempat melihat semua booking yang masuk dan mengubah statusnya.

Prompt Dashboard Admin:

Tambahkan dashboard admin di halaman setelah login, dengan:
1. Daftar semua booking milik bisnis ini, diurutkan dari jadwal terdekat
2. Setiap baris booking menampilkan nama klien, nomor WhatsApp, layanan, jam, dan status
3. Dropdown untuk mengubah status: Menunggu, Dikonfirmasi, Selesai, Batal
4. Filter berdasarkan status di bagian atas
5. Halaman kelola layanan: tambah, edit, hapus layanan

Sebelum implementasi, jelaskan perubahan database jika ada. Jangan mengubah flow booking publik yang sudah berjalan.

Setelah ini jalan, coba lagi seluruh flow dari STEP 6, plus: ubah status salah satu booking dari dashboard, refresh, pastikan status barunya tersimpan.

STEP 8 — Deploy: Bikin App-nya Benar-Benar Live

Kalau pakai Bolt.new:

1. Klik tombol Publish di pojok kanan atas editor
2. Tunggu sekitar 30 detik, Bolt otomatis memberi URL berbentuk nama-app.bolt.host
3. Klik link yang muncul di jendela chat untuk membuka app di tab baru, ini sudah bisa diakses siapa pun
4. Opsional, butuh paid plan, untuk custom domain: klik ikon gear di bagian tengah atas, buka All Project Settings kemudian Domains and Hosting, masukkan nama domain yang sudah dibeli dari Niagahoster, Namecheap, dan sejenisnya, lalu ikuti instruksi DNS yang ditampilkan (biasanya tambah record CNAME atau A di pengaturan domain)

Kalau pakai Lovable:

1. Klik Share di pojok kanan atas, lalu klik Publish
2. App otomatis live di URL berbentuk nama-app.lovable.app
3. Opsional, butuh paid plan, untuk custom domain: buka Project kemudian Settings kemudian Domains, klik Connect Domain, masukkan domain yang sudah dibeli, ikuti instruksi DNS yang ditampilkan DNS butuh waktu propagasi dari beberapa menit sampai beberapa jam sebelum domain benar-benar aktif. Ini normal, bukan tanda ada yang salah. Setiap kali ada perubahan setelah publish pertama, ulangi klik Publish (Bolt) atau Update (Lovable) supaya perubahan ikut ter-deploy. Perubahan di editor tidak otomatis live sampai tombol ini diklik lagi.

STEP 9 — Troubleshooting: Masalah yang Paling Sering Muncul

Bagian ini yang paling sering hilang dari tutorial vibe coding lain, padahal ini yang bikin orang non-teknis berhenti di tengah jalan.

Masalah 1: Satu bisnis bisa melihat data bisnis lain

Ini bukan kasus langka. Audit menunjukkan sebagian besar aplikasi hasil Bolt dan Lovable yang memakai Supabase sebagai database ternyata mengirim seluruh data tanpa pembatasan akses per akun, dikenal sebagai Row Level Security atau RLS yang tidak diaktifkan, artinya secara default satu akun bisa membaca data akun lain lewat API. Cek ini secara eksplisit, jangan diasumsikan sudah aman:

Cek apakah Row Level Security sudah aktif di semua table (Businesses, Services, Bookings). Kalau belum, aktifkan dan buat policy supaya satu akun bisnis hanya bisa membaca dan mengubah data miliknya sendiri. Uji dengan dua akun berbeda dan tunjukkan hasilnya.

Masalah 2: Setelah login, halaman balik lagi ke halaman login (login loop)

Biasanya karena aplikasi mengecek status login sebelum sesi selesai diproses. Prompt perbaikannya:

Setelah login berhasil, halaman kembali ke halaman login. Perbaiki auth flow supaya menunggu sesi selesai divalidasi dulu sebelum mengecek status login, dan tambahkan loading state selama proses ini.

Masalah 3: AI terjebak loop memperbaiki error yang sama berulang-ulang

Setiap kali AI mencoba memperbaiki dan gagal, itu tetap memakai token atau credit, termasuk yang gagal. Kalau sudah 2-3 kali percobaan perbaikan tidak berhasil untuk masalah yang sama, berhenti dan ganti pendekatan:

• Salin persis pesan error yang muncul, jangan cuma bilang "error" atau "gagal"
• Minta perbaikan sekecil mungkin, contoh: "perbaiki hanya fungsi submit booking, jangan ubah bagian lain"
• Kalau masih gagal setelah itu, duplicate project (fitur bawaan Bolt dan Lovable) untuk memberi AI konteks yang bersih, lalu coba lagi dari titik itu

Masalah 4: Kuota token atau credit habis di tengah build

Tanda kalau ini terjadi: AI berhenti merespons atau muncul notifikasi limit tercapai. Cek sisa kuota di halaman billing atau usage masing-masing tool. Kalau habis di free tier, tunggu reset bulanan atau upgrade ke paid plan untuk lanjut.

Sampai di Sini, BookingKu Sudah Live

App bisa diakses siapa saja lewat link, punya dashboard admin yang berfungsi, dan datanya aman antar akun bisnis. Ini sudah lebih jauh dari kebanyakan hasil coba-coba vibe coding yang berhenti di preview lokal doang. Tapi BookingKu versi ini masih manual di dua hal: pemilik bisnis harus mengecek dashboard sendiri untuk tahu ada booking baru karena belum ada reminder WhatsApp otomatis ke klien, dan belum ada cara menagih DP di muka lewat payment gateway. Dua hal itu, plus cara membangun 3 varian app lain dengan pola yang sama (booking klinik dengan multi-cabang, tracker klien untuk konsultan, dan sistem antrian untuk bengkel), dibahas di produk lanjutan.

Master Prompt Template

Untuk perubahan apa pun setelah tutorial ini, pakai struktur ini supaya AI tidak membuat asumsi di luar scope:

Context:
[Jelaskan aplikasi dan fitur yang sudah ada]

Goal:
[Jelaskan hasil yang ingin dicapai]

Task:
[Jelaskan satu pekerjaan spesifik]

Constraints:
[Jelaskan apa yang tidak boleh diubah]

Acceptance Criteria:
[Jelaskan hasil yang harus berhasil]

Jelaskan pendekatan implementasi secara singkat sebelum melakukan perubahan. Fokus hanya pada task ini.