From Idea to Production
Peserta mampu mengubah ide menjadi aplikasi nyata dengan frontend responsive, backend/API, database, dan deploy production.
From Idea to Flow & Mockup
Mengubah kebutuhan bisnis menjadi alur dan tampilan aplikasi.
- 1Gambar Idemu di Kertas
Sketsa ide aplikasi secara sederhana di atas kertas sebelum masuk ke AI.
- 2Upload ke ChatGPT dan Isikan Prompt 1
Upload foto sketsa ke ChatGPT, lalu jalankan prompt di bawah ini.
PROMPT YANG DIGUNAKANDari Gambar yang aku upload, buatkan: 1. Gambaran Umum Aplikasi 2. Alur Aplikasi Per Pengguna 3. Daftar Halaman Per Pengguna 4. Tampilan Aplikasi di Laptop dan di Handphone 5. Dokumentasi Aplikasi Lengkap Catatan: 1. Ringkas dan sederhana 2. Gunakan istilah atau bahasa yang mudah dipahami oleh pemula 3. Aplikasi ini tidak perlu terlalu banyak informasi, fokus pada kebutuhan 4. Tampilan aplikasi mudah dipahami 5. Tampilan aplikasi Clean 6. Aplikasi mudah digunakan 7. Gunakan layout dan tata letak yang sesuai kebiasaan orang Indonesia
- 3Buatkan Tampilan Laptop dan Handphone
Minta ChatGPT membuat gambar tampilan untuk masing-masing role.
PROMPT 2 — TAMPILAN ADMINBuatkan Gambar Tampilan Aplikasi Untuk Admin
PROMPT 3 — TAMPILAN PESERTABuatkan Tampilan untuk Peserta
- 4Buat Prompt ke V0.dev
Susun prompt final untuk digenerate menjadi frontend di V0.dev.
PROMPT YANG DIGUNAKANSekarang buatkan Prompt ke V0.dev untuk membuat Aplikasi dengan Prinsip: Ringkas dan sederhana Istilah di Aplikasi yang mudah dipahami oleh orang awam Aplikasi ini tidak perlu terlalu banyak informasi, fokus pada kebutuhan Tampilan aplikasi mudah dipahami Tampilan aplikasi Clean Aplikasi mudah digunakan Gunakan layout dan tata letak yang sesuai kebiasaan orang Indonesia Aplikasi Responsive (Tampilan Laptop dan HP)
CONTOH HASIL PROMPT DARI CHATGPTDipakai sebagai prompting ke Google AI Studio / V0.dev.
# Buat Aplikasi Registrasi Peserta Online Buat sebuah **aplikasi registrasi peserta online** yang sederhana, bersih, mudah dipahami oleh orang awam, dan responsive untuk **Laptop/Desktop maupun Handphone**. Aplikasi memiliki 2 jenis pengguna: 1. **Peserta** 2. **Admin** Fokus aplikasi hanya pada kebutuhan utama registrasi: **Peserta mengisi data → melakukan pembayaran → upload bukti pembayaran → menunggu verifikasi → mendapatkan kartu pendaftaran.** Admin: **Membuat registrasi → mendapatkan link → melihat peserta → memeriksa pembayaran → menyetujui → peserta mendapatkan kartu pendaftaran.** --- # 1. Prinsip Desain Gunakan prinsip berikut: * Ringkas dan sederhana. * Jangan menampilkan informasi yang tidak diperlukan. * Gunakan bahasa Indonesia. * Gunakan istilah yang mudah dipahami orang awam. * Jangan menggunakan istilah teknis seperti "transaction", "payment gateway", "submission", "verification queue", dan istilah teknis lainnya pada tampilan pengguna. * Gunakan kata-kata sederhana seperti: * "Daftar Sekarang" * "Data Diri" * "Pembayaran" * "Upload Bukti Pembayaran" * "Kirim Pendaftaran" * "Menunggu Verifikasi" * "Sudah Disetujui" * "Kartu Pendaftaran" * Tampilan harus clean, modern, profesional, tetapi tidak terlihat rumit. * Gunakan banyak white space. * Gunakan card dengan sudut sedikit rounded. * Gunakan icon sederhana. * Gunakan typography yang mudah dibaca. * Hindari terlalu banyak warna. * Gunakan warna utama hijau atau biru sebagai warna aksi utama. * Tombol utama harus terlihat jelas. * Gunakan layout yang umum digunakan oleh pengguna Indonesia. * Mobile-first. * Semua halaman harus responsive. --- # 2. Teknologi Gunakan: * Next.js * React * TypeScript * Tailwind CSS * shadcn/ui * Lucide Icons Buat struktur component yang rapi dan mudah dikembangkan. Untuk tahap awal gunakan **dummy/mock data** dan local state. Jangan membuat backend terlebih dahulu. --- # 3. Struktur Pengguna ## PESERTA Peserta tidak perlu login menggunakan username/password. Peserta cukup membuka **Link Registrasi** yang diberikan oleh Admin. Alurnya: ```text Link Registrasi ↓ Informasi Pendaftaran ↓ Data Diri ↓ Pembayaran ↓ Upload Bukti Pembayaran ↓ Status Pendaftaran ↓ Kartu Pendaftaran ``` --- # 4. Halaman Peserta Buat 5 tahap registrasi. Gunakan progress indicator sederhana di bagian atas: ```text 1 Informasi → 2 Data Diri → 3 Pembayaran → 4 Upload Bukti → 5 Selesai ``` Pada HP, progress indicator boleh dibuat lebih sederhana agar tidak memenuhi layar. --- ## Halaman 1 — Informasi Pendaftaran Tampilkan: * Logo * Nama acara * Deskripsi singkat * Tanggal * Jam * Tempat * Biaya pendaftaran * Fasilitas Contoh: **SEMINAR DIGITAL MARKETING ORGANIK SYSTEM** Strategi digital marketing organik untuk meningkatkan penjualan dan profit bisnis. Tanggal: 23 Mei 2026 Waktu: 09.00 - 16.00 WIB Tempat: Hotel Grand Indonesia, Jakarta Biaya: Rp150.000 / peserta Fasilitas: * Materi seminar * Sertifikat * Konsumsi * Doorprize Tombol besar: **Daftar Sekarang** Jangan tampilkan terlalu banyak informasi. --- # 5. Halaman Data Diri Judul: **Lengkapi Data Diri** Subjudul: "Silakan isi data diri Anda dengan benar." Field: * Nama Lengkap * * Nomor WhatsApp * * Email * Instansi / Asal * Pilihan Kategori * Tombol: **Kembali** **Lanjutkan** Validasi sederhana: * Nama wajib diisi. * Nomor WhatsApp wajib diisi. * Kategori wajib dipilih. Jangan menggunakan form yang terlalu panjang. --- # 6. Halaman Pembayaran Judul: **Pembayaran** Tampilkan nominal dengan sangat jelas: ### Rp150.000 per peserta Berikan pilihan: **Transfer Bank | QRIS** Jika Transfer Bank: Bank BCA 1234 5678 90 a.n. PT Seven Class Indonesia Sediakan tombol: **Salin Nomor Rekening** Tambahkan informasi sederhana: "Silakan lakukan pembayaran sesuai jumlah yang tertera." Kemudian tombol: **Saya Sudah Bayar** --- # 7. Halaman Upload Bukti Pembayaran Judul: **Upload Bukti Pembayaran** Subjudul: "Upload bukti pembayaran yang sudah Anda lakukan." Buat area upload yang besar dan mudah dipahami: **Klik untuk upload** atau **Tarik file ke sini** Format: JPG, JPEG, PNG, PDF Ukuran maksimal 5 MB. Setelah file dipilih: Tampilkan preview file. Tampilkan nama file. Tombol: **Ganti File** dan: **Kirim Pendaftaran** Sebelum submit, tampilkan ringkasan: Nama: Budi Santoso No. WhatsApp: 0812-3456-7890 Biaya: Rp150.000 Bukti: bukti-transfer.jpg --- # 8. Halaman Status Pendaftaran Setelah peserta mengirim pendaftaran, tampilkan halaman sederhana: Icon check atau icon status. Judul: **Pendaftaran Diterima** Teks: "Terima kasih, Budi Santoso." "Pendaftaran Anda sudah kami terima." Status: **Menunggu Verifikasi** Teks: "Bukti pembayaran Anda sedang diperiksa oleh admin." Tampilkan: Nomor Pendaftaran: REG-000125 Tanggal Daftar: 23 Mei 2026, 10:25 Jangan tampilkan terlalu banyak informasi. Tombol: **Lihat Kartu Pendaftaran** Jika belum disetujui, tombol tersebut disabled atau beri keterangan: "Kartu tersedia setelah pembayaran disetujui." --- # 9. Halaman Kartu Pendaftaran Setelah admin menyetujui pembayaran, peserta dapat melihat kartu. Buat kartu yang terlihat seperti tiket/e-ticket. Isi: **KARTU PENDAFTARAN** SEMINAR DIGITAL MARKETING ORGANIK SYSTEM Nama: BUDI SANTOSO No. Peserta: REG-000125 Tanggal: 23 Mei 2026 Tempat: Hotel Grand Indonesia, Jakarta Status: **TERDAFTAR** Tambahkan QR Code dummy. Di bawah kartu: **Simpan kartu ini untuk keperluan registrasi saat acara.** Tombol: **Download Kartu** Tombol: **Cetak Kartu** Pada HP tombol harus full width. --- # 10. ADMIN Admin menggunakan login. Buat halaman: **Login Admin** Field: Email Password Tombol: **Masuk** Tampilan login sederhana dan clean. --- # 11. Dashboard Admin Setelah login tampilkan Dashboard. Gunakan sidebar pada laptop. Menu: * Dashboard * Registrasi * Peserta * Pembayaran * Kartu Pendaftaran * Pengaturan * Keluar Pada HP, sidebar berubah menjadi: * hamburger menu * drawer/mobile navigation --- # 12. Dashboard Admin Judul: **Dashboard** Subjudul: "Ringkasan pendaftaran." Tampilkan 4 card sederhana: **Total Peserta** 125 **Sudah Disetujui** 100 **Menunggu Verifikasi** 15 **Ditolak** 10 Kemudian: ### Peserta Terbaru Table: | Nama | Tanggal | Status | Aksi | | ------------ | ----------- | ------------------- | ----- | | Andi Pratama | 28 Mei 2026 | Sudah Disetujui | Lihat | | Siti Aisyah | 28 Mei 2026 | Menunggu Verifikasi | Lihat | | Budi Santoso | 28 Mei 2026 | Sudah Disetujui | Lihat | Pada mobile, ubah table menjadi card/list agar tidak terlalu sempit. --- # 13. Halaman Buat Registrasi Admin dapat membuat pendaftaran baru. Judul: **Buat Registrasi** Form: ### Informasi Pendaftaran * Nama Acara * Deskripsi * Tanggal * Jam * Tempat * Kuota Peserta * Biaya Pendaftaran ### Informasi Pembayaran * Metode pembayaran * Nama Bank * Nomor Rekening * Atas Nama Tombol: **Simpan & Dapatkan Link** Setelah disimpan tampilkan: ### Link Registrasi `https://registrasi.example.com/seminar-digital-marketing` Tombol: **Salin Link** dan: **Bagikan** Jangan membuat form terlalu kompleks. --- # 14. Halaman Daftar Peserta Judul: **Daftar Peserta** Fitur: * Search nama * Search nomor WhatsApp * Filter status Table: | No | Nama | WhatsApp | Tanggal Daftar | Status | Aksi | | -- | ------------ | -------- | -------------- | ------------------- | ----- | | 1 | Andi Pratama | 0812... | 28 Mei | Sudah Disetujui | Lihat | | 2 | Siti Aisyah | 0813... | 28 Mei | Menunggu Verifikasi | Lihat | | 3 | Budi Santoso | 0814... | 28 Mei | Sudah Disetujui | Lihat | Tambahkan tombol: **Export Excel** Jika di mobile, gunakan card list. --- # 15. Halaman Detail Peserta Ketika Admin klik "Lihat", tampilkan: ### Data Peserta Nama: Andi Pratama WhatsApp: 0812-1234-5678 Email: [andi@example.com](mailto:andi@example.com) Instansi: PT. Maju Bersama Tanggal Daftar: 28 Mei 2026 Status: Menunggu Verifikasi ### Bukti Pembayaran Tampilkan preview gambar bukti pembayaran. Di bawahnya: **Setujui Pembayaran** **Tolak Pembayaran** **Minta Upload Ulang** Gunakan confirmation dialog sebelum menyetujui atau menolak. --- # 16. Halaman Pembayaran Buat halaman khusus untuk mempermudah Admin melihat pembayaran yang perlu diperiksa. Gunakan 3 tab: **Menunggu Verifikasi** **Sudah Disetujui** **Ditolak** Prioritaskan peserta yang masih membutuhkan tindakan Admin. Pada tab "Menunggu Verifikasi", tampilkan: * Nama peserta * Nomor pendaftaran * Tanggal upload * Bukti pembayaran * Tombol "Periksa" --- # 17. Halaman Kartu Pendaftaran Admin dapat melihat peserta yang sudah disetujui. Tampilkan: * Nama * Nomor peserta * Status * Tombol "Lihat Kartu" Ketika klik "Lihat Kartu": Tampilkan preview kartu pendaftaran. Tombol: **Cetak** **Download** --- # 18. Status Warna Gunakan warna status yang mudah dipahami: 🟢 **Sudah Disetujui** 🟠 **Menunggu Verifikasi** 🔴 **Ditolak** Jangan menggunakan terlalu banyak warna lain. --- # 19. Responsive Design Ini sangat penting. Aplikasi harus dibuat **mobile-first**. ## Desktop / Laptop Gunakan: * Sidebar kiri * Content area * Table untuk data * Card dashboard * Form dengan 2 kolom jika memungkinkan ## Tablet Sidebar dapat diperkecil atau menggunakan menu yang lebih ringkas. ## Mobile Gunakan: * Header sederhana * Hamburger menu * Content full width * Card * Form satu kolom * Button full width * Table berubah menjadi card/list * Font tetap nyaman dibaca * Spacing cukup besar agar mudah disentuh Target ukuran: **Mobile: 360px – 430px** **Tablet: 768px** **Laptop/Desktop: 1024px ke atas** Pastikan tidak ada horizontal scrolling. --- # 20. UX / Kemudahan Penggunaan Gunakan aturan berikut: 1. Satu halaman memiliki satu tujuan utama. 2. Jangan membuat form terlalu panjang. 3. Tombol utama selalu mudah ditemukan. 4. Gunakan bahasa Indonesia. 5. Jangan menggunakan istilah teknis. 6. Berikan feedback setelah aksi. 7. Gunakan loading state. 8. Gunakan empty state. 9. Gunakan confirmation dialog untuk aksi penting. 10. Gunakan error message yang mudah dipahami. Contoh: Jangan: "Invalid payment proof." Gunakan: **"Bukti pembayaran belum dapat diproses. Silakan upload kembali."** Jangan: "Submission successful." Gunakan: **"Pendaftaran berhasil dikirim."** --- # 21. Navigasi Peserta Peserta tidak perlu melihat sidebar. Gunakan header sederhana: Logo | Nama Acara | Bantuan Untuk HP: Logo | Menu --- # 22. Navigasi Admin Desktop: ```text Dashboard Registrasi Peserta Pembayaran Kartu Pendaftaran Pengaturan Keluar ``` Mobile: Gunakan hamburger menu. --- # 23. Visual Style Buat tampilan seperti aplikasi SaaS modern tetapi sederhana. Gunakan: * Background abu-abu sangat muda atau putih * Card putih * Border tipis * Border radius sedang * Shadow sangat ringan * Typography modern * Icon sederhana * Warna utama hijau atau biru * Tidak menggunakan gradient berlebihan * Tidak menggunakan animasi berlebihan Hindari: * Dashboard yang terlalu ramai * Banyak grafik * Banyak warna * Banyak popup * Banyak menu * Informasi yang tidak diperlukan * Font dekoratif * Animasi berlebihan --- # 24. Komponen yang Harus Dibuat Buat reusable components: * Header * AdminSidebar * MobileMenu * Button * Input * Select * FileUpload * StatusBadge * ProgressSteps * SummaryCard * ParticipantCard * ParticipantTable * PaymentProof * RegistrationCard * ConfirmationDialog * EmptyState * LoadingState * Toast notification --- # 25. Dummy Data Gunakan data contoh Indonesia: Nama: * Andi Pratama * Siti Aisyah * Budi Santoso * Dewi Lestari * Rudi Hermawan Nomor: * 0812-1234-5678 * 0813-2345-6789 * 0814-3456-7890 Gunakan format Rupiah: **Rp150.000** Tanggal menggunakan format Indonesia: **28 Mei 2026** Jam: **09.00 WIB** --- # 26. Demo Interaksi Karena belum menggunakan backend, buat aplikasi tetap terasa seperti aplikasi nyata menggunakan mock/local state. Contoh: * Klik "Daftar Sekarang" → masuk ke Data Diri. * Klik "Lanjutkan" → masuk Pembayaran. * Klik "Saya Sudah Bayar" → masuk Upload Bukti. * Upload file → tampilkan nama dan preview. * Klik "Kirim Pendaftaran" → tampilkan halaman Status. * Admin menyetujui pembayaran → status berubah menjadi "Sudah Disetujui". * Kartu pendaftaran kemudian dapat dibuka. * Search peserta harus bekerja. * Filter status harus bekerja. * Tombol salin link harus bekerja. * Tombol download/cetak kartu dibuat berfungsi dalam demo. --- # 27. Halaman yang Harus Dihasilkan Buat semua halaman berikut: ### Peserta 1. Informasi Pendaftaran 2. Data Diri 3. Pembayaran 4. Upload Bukti Pembayaran 5. Status Pendaftaran 6. Kartu Pendaftaran ### Admin 7. Login Admin 8. Dashboard 9. Buat Registrasi 10. Daftar Peserta 11. Detail Peserta 12. Pembayaran 13. Kartu Pendaftaran 14. Pengaturan sederhana --- # 28. Prioritas Utama Jangan mencoba membuat aplikasi dengan terlalu banyak fitur. Prioritaskan: **MUDAH DIPAHAMI → MUDAH DIGUNAKAN → CEPAT → CLEAN → RESPONSIVE** Aplikasi harus terasa seperti aplikasi yang dibuat untuk orang Indonesia yang tidak terlalu terbiasa dengan teknologi. Ketika pengguna membuka aplikasi, mereka harus langsung tahu: **"Saya harus klik apa?"** Gunakan tombol dan instruksi yang jelas. Hasil akhir harus terlihat seperti aplikasi produksi yang siap dikembangkan lebih lanjut, bukan sekadar prototype yang penuh informasi.