π― MASTER PROMPT
Langkah-Langkah Membuat Aplikasi Web (Front-End)
Dari Requirement Sampai Implementasi
Silakan copy dan gunakan prompt ini ke AI atau jadikan sebagai panduan pengembangan.
π§ 1️⃣ PHASE 1 — REQUIREMENT ANALYSIS
✅ Prompt:
Bertindaklah sebagai System Analyst dan Front-End Architect.
Bantu saya mengidentifikasi kebutuhan aplikasi web bagian front-end berdasarkan studi kasus berikut:[Tuliskan studi kasus di sini]
Identifikasi:
User Persona
User Journey
Functional Requirements
Non-Functional Requirements
Pain Points
UI/UX Goals
Sajikan dalam format tabel dan penjelasan terstruktur.
π Output yang Diharapkan:
Problem Statement
Business Goal
Target User
Fitur utama UI
Performance requirement
𧩠2️⃣ PHASE 2 — FEATURE BREAKDOWN & USER STORY
✅ Prompt:
Ubah requirement di atas menjadi:
User Stories (format: As a ___, I want ___, so that ___)
Acceptance Criteria
Prioritas fitur (MoSCoW method)
Buatkan juga breakdown komponen front-end yang dibutuhkan.
π Output:
Backlog Front-End
Struktur fitur modular
Roadmap sprint
π¨ 3️⃣ PHASE 3 — UI/UX DESIGN PLAN
✅ Prompt:
Bertindaklah sebagai UI/UX Designer.
Buatkan:
Sitemap aplikasi
Wireframe deskripsi tiap halaman
Komponen UI utama
Design System (color, typography, spacing)
UX Flow diagram penjelasan
Fokus pada usability dan responsive design.
π Output:
Struktur halaman
Navigasi
Layout logic
Konsistensi UI
π 4️⃣ PHASE 4 — FRONT-END ARCHITECTURE
✅ Prompt:
Bertindak sebagai Front-End Software Architect.
Tentukan:
Struktur folder project
Arsitektur (MVC / Component-Based / SPA)
State management strategy
API integration pattern
Reusable component strategy
Security di sisi front-end
Gunakan pendekatan best practice modern.
π Output:
Contoh struktur:
src/
├── components/
├── pages/
├── services/
├── utils/
├── assets/
├── styles/
└── hooks/
π» 5️⃣ PHASE 5 — TECHNOLOGY STACK DECISION
✅ Prompt:
Rekomendasikan teknologi front-end terbaik untuk aplikasi ini dengan mempertimbangkan:
Skalabilitas
Kemudahan maintenance
Kebutuhan performa
Tim developer kecil
Bandingkan:
HTML/CSS/JS Vanilla
Bootstrap
React
Vue
Next.js
Buatkan tabel perbandingan dan rekomendasi final.
π§ͺ 6️⃣ PHASE 6 — PROTOTYPING & IMPLEMENTATION PLAN
✅ Prompt:
Buatkan langkah implementasi front-end secara bertahap:
Setup project
Install dependency
Buat layout utama
Buat reusable components
Integrasi API
Error handling
Loading state
Responsive testing
Sertakan contoh kode struktur dasar.
π 7️⃣ PHASE 7 — TESTING & OPTIMIZATION
✅ Prompt:
Buatkan checklist testing front-end meliputi:
Functional testing
UI testing
Responsive testing
Accessibility testing
Performance optimization
SEO basic
Sertakan tools yang direkomendasikan.
π 8️⃣ PHASE 8 — DEPLOYMENT
✅ Prompt:
Jelaskan langkah deployment front-end ke:
GitHub Pages
Vercel
Netlify
Firebase Hosting
Sertakan best practice CI/CD sederhana.
π₯ BONUS – PROMPT ENTERPRISE LEVEL
Jika ingin lebih advance (cocok untuk mahasiswa tingkat akhir):
Tambahkan:
Clean code practice
Component documentation
Git branching strategy
Code review checklist
UI scalability strategy
Front-end security best practice
π Jika Digunakan Untuk Mengajar
Struktur ini bisa dijadikan:
| Pertemuan | Topik |
|---|---|
| 1 | Requirement & User Story |
| 2 | UI/UX Design |
| 3 | Arsitektur Front-End |
| 4 | Setup & Layout |
| 5 | Component Development |
| 6 | API Integration |
| 7 | Testing |
| 8 | Deployment |
π§ Insight Penting untuk Mahasiswa
Tekankan bahwa:
Front-End bukan hanya soal tampilan,
tetapi tentang:
Struktur
Arsitektur
Experience
Maintainability
Scalability
Kalau Bapak mau, saya bisa lanjutkan menjadi:
π Modul kuliah 100+ halaman
π Slide presentasi 15–20 slide
π§ͺ Studi kasus UMKM / Marketplace SMK
π» Contoh project lengkap React / Bootstrap
π RPS 16 pertemuan khusus Front-End Engineering
1️⃣ Sistem Pemesanan Makanan UMKM
π― Latar Belakang
Sebuah UMKM ayam goreng ingin menerima pesanan online tanpa marketplace.
π₯ Target User
-
Pelanggan
-
Admin UMKM
𧩠Fitur Front-End
-
Landing page produk
-
Keranjang belanja
-
Checkout form
-
Status pesanan
-
Dashboard admin sederhana
π Tantangan
-
Validasi form
-
State management keranjang
-
UI mobile-friendly
2️⃣ Marketplace Produk Siswa SMK
π― Latar Belakang
Sekolah ingin menampilkan produk hasil karya siswa secara online.
π₯ Target User
-
Pembeli
-
Siswa (seller)
-
Admin sekolah
𧩠Fitur Front-End
-
Katalog produk
-
Filter kategori
-
Detail produk
-
Rating & review
-
Form upload produk
π Tantangan
-
Dynamic rendering data
-
Component reusable card
-
Pagination
3️⃣ Sistem Absensi Online Sekolah
π― Latar Belakang
Sekolah ingin absensi berbasis web tanpa kertas.
π₯ Target User
-
Siswa
-
Guru
-
Admin
𧩠Fitur Front-End
-
Login
-
Dashboard siswa
-
Form absensi
-
Rekap kehadiran
-
Grafik statistik
π Tantangan
-
Role-based UI
-
Chart integration
-
Session handling (front-end side)
4️⃣ Aplikasi Manajemen RT/RW Digital
π― Latar Belakang
Lingkungan RT ingin sistem pengelolaan data warga dan iuran.
π₯ Target User
-
Warga
-
Ketua RT
-
Bendahara
𧩠Fitur Front-End
-
Data warga
-
Input pembayaran iuran
-
Pengumuman
-
Laporan keuangan sederhana
π Tantangan
-
Dashboard interaktif
-
Filter data
-
UI tabel kompleks
5️⃣ Sistem Booking Lapangan Futsal
π― Latar Belakang
Pengelola lapangan ingin sistem booking online.
π₯ Target User
-
Customer
-
Admin
𧩠Fitur Front-End
-
Kalender jadwal
-
Pilih jam booking
-
Pembayaran simulasi
-
Notifikasi booking
π Tantangan
-
Kalender interaktif
-
Slot time validation
-
Responsive layout
6️⃣ Portal Lowongan Kerja Lulusan SMK
π― Latar Belakang
Sekolah ingin mempertemukan alumni dengan industri.
π₯ Target User
-
Alumni
-
HRD perusahaan
-
Admin
𧩠Fitur Front-End
-
List lowongan
-
Filter berdasarkan bidang
-
Detail lowongan
-
Upload CV
-
Profil kandidat
π Tantangan
-
File upload UI
-
Card layout profesional
-
Search & filter realtime
7️⃣ Sistem E-Learning Sederhana
π― Latar Belakang
Guru ingin membagikan materi dan tugas secara online.
π₯ Target User
-
Siswa
-
Guru
𧩠Fitur Front-End
-
Daftar kelas
-
Video pembelajaran
-
Upload tugas
-
Progress bar
-
Quiz interaktif
π Tantangan
-
State progress
-
UI interaktif
-
UX sederhana untuk siswa
8️⃣ Aplikasi Event Organizer Sekolah
π― Latar Belakang
Sekolah sering mengadakan event dan butuh sistem pendaftaran online.
π₯ Target User
-
Peserta
-
Panitia
𧩠Fitur Front-End
-
Landing page event
-
Form registrasi
-
Ticket preview
-
QR code preview
-
Dashboard peserta
π Tantangan
-
Form validation kompleks
-
UI menarik & modern
-
Countdown timer
9️⃣ Sistem Inventory Barang Sekolah
π― Latar Belakang
Sekolah ingin mendigitalisasi pencatatan aset.
π₯ Target User
-
Admin inventaris
-
Kepala sekolah
𧩠Fitur Front-End
-
Tabel data barang
-
Filter kategori
-
Input barang baru
-
Grafik kondisi barang
π Tantangan
-
Data table kompleks
-
Sorting & filtering
-
UI dashboard clean
π Aplikasi Personal Finance Sederhana
π― Latar Belakang
Mahasiswa ingin mencatat pemasukan dan pengeluaran.
π₯ Target User
-
Mahasiswa / individu
𧩠Fitur Front-End
-
Input transaksi
-
List transaksi
-
Filter bulanan
-
Grafik pengeluaran
-
Summary saldo
π Tantangan
-
Chart integration
-
Local storage
-
UX minimalis
π Jika Digunakan untuk Perkuliahan
Bisa dibuat skema:
| Tingkat | Studi Kasus |
|---|---|
| Dasar | Absensi, UMKM |
| Menengah | Booking, Inventory |
| Lanjut | Marketplace, Job Portal |
Jika Bapak mau, saya bisa lanjutkan menjadi:
-
π Detail requirement lengkap salah satu studi kasus
-
π Breakdown user story + backlog
-
π» Desain arsitektur front-end
