Yayvip

bench get-app https://github.com/erickmo/yayvip

[![Listed on Frappe Gems](https://frappegems.com/api/method/frappe_gems.seo.badge?app=erickmo%2Fyayvip)](https://frappegems.com/gems/apps/erickmo/yayvip)

# Yayvip - Yayasan Vernon Indonesia Pintar 🎓 Aplikasi Frappe custom untuk mengelola website dan operasional **Yayasan Vernon Indonesia Pintar** - sebuah yayasan yang fokus pada pemberian beasiswa dan pelatihan vokasional untuk masyarakat kurang mampu. ## 📖 Tentang Modul Ini Yayvip adalah aplikasi full-stack berbasis **Frappe Framework** yang menyediakan: ### 🎯 Fitur Utama 1. **Content Management System (CMS)** - Manajemen konten halaman utama (Homepage) - Manajemen halaman donasi dengan transparansi dana - Manajemen halaman beasiswa dengan informasi lengkap - Semua konten dapat diedit melalui Frappe Desk tanpa coding 2. **Sistem Manajemen Beasiswa** - Master data program beasiswa (Barista, Digital Marketing, Admin Perkantoran, Customer Service) - Form pendaftaran beasiswa online dengan validasi lengkap - Tracking status pendaftar (Pending, Diproses, Diterima, Ditolak) - Upload link video motivasi untuk seleksi 3. **Sistem Manajemen Donasi** - Pencatatan data donatur dengan detail lengkap - Opsi donasi anonim - Tracking jumlah dan tanggal donasi - Transparansi alokasi dana ke berbagai program 4. **API REST untuk Frontend** - Semua data dapat diakses via REST API - Permissions sudah dikonfigurasi (Guest dapat create untuk form publik) - Siap untuk integrasi dengan frontend modern (React, Vue, Next.js, dll) ### 🏗️ Arsitektur Aplikasi ini menggunakan arsitektur modular Frappe dengan **17 DocTypes**: - **3 Single DocTypes** - CMS Pages (Homepage, Halaman Donatur, Halaman Beasiswa) - **3 Master DocTypes** - Data Utama (Program Beasiswa, Donatur, Pendaftar Beasiswa) - **11 Child Tables** - Supporting tables untuk parent DocTypes ### 📊 Entity Relationship Diagram Lihat dokumentasi lengkap di folder [docs/](docs/): - **[docs/ERD.md](docs/ERD.md)** - ERD diagram Mermaid dengan semua fields - **[docs/README.md](docs/README.md)** - Visualisasi ASCII sederhana & panduan **Ringkasan Struktur:** ``` Master DocTypes (Independent) ├── Program Beasiswa ├── Donatur └── Pendaftar Beasiswa CMS Single DocTypes ├── Homepage │ ├── Homepage Program (child) │ ├── Homepage Checklist Item (child) │ ├── Homepage Alur Step (child) │ └── Homepage Testimoni (child) ├── Halaman Donatur │ ├── Donatur Alokasi (child) │ ├── Donatur Nominal Chip (child) │ ├── Donatur Benefit Item (child) │ └── Donatur FAQ (child) └── Halaman Beasiswa ├── Beasiswa Hero Badge (child) ├── Beasiswa Kriteria Item (child) └── Beasiswa Alur Step (child) ``` ## ✅ Status: Ready to Use Aplikasi ini sudah **siap pakai** dengan **17 DocTypes** yang sudah di-setup dengan struktur direktori Frappe yang standar. ## 🚀 Quick Start ### Installation ```bash cd /home/frappe/frappe-bench # Install app bench --site [nama-site] install-app yayvip # Atau jika sudah terinstall, jalankan migrate bench --site [nama-site] migrate # Clear cache & restart bench --site [nama-site] clear-cache bench restart ``` ### Verify Installation ```bash bench --site [nama-site] console ``` ```python # Check DocTypes frappe.get_all('DocType', filters={'module': 'Yayvip'}) # Test access frappe.get_doc('DocType', 'Homepage') ``` ## 📚 Dokumentasi - **[SETUP_COMPLETE.md](SETUP_COMPLETE.md)** - Panduan lengkap instalasi & kustomisasi - **[docs/ERD.md](docs/ERD.md)** - Entity Relationship Diagram lengkap (Mermaid) - **[docs/ARCHITECTURE.md](docs/ARCHITECTURE.md)** - Arsitektur aplikasi & alur data - **[yayvip/import/README.md](yayvip/import/README.md)** - Spesifikasi detail setiap DocType ## 📋 Detail DocTypes ### Master DocTypes #### 1. Program Beasiswa Master data untuk program-program beasiswa yang tersedia. **Fields:** - `nama_program` (Data, Required, Unique) - Nama program - `deskripsi` (Text Editor) - Deskripsi lengkap program - `durasi` (Data) - Durasi program (misal: "6 bulan") - `kategori` (Data) - Kategori program - `kuota` (Int) - Jumlah kuota peserta - `aktif` (Check) - Status aktif/non-aktif program **Permissions:** System Manager (full), All (read) #### 2. Donatur Data donatur yang telah berdonasi. **Fields:** - `nama_donatur` (Data, Required) - Nama donatur - `email` (Email) - Email donatur - `nomor_hp` (Phone) - Nomor HP/WhatsApp - `kota` (Data) - Kota asal donatur - `jumlah_donasi` (Currency) - Jumlah donasi - `tanggal_donasi` (Date) - Tanggal donasi - `anonim` (Check) - Opsi donasi anonim **Auto-naming:** `DN-#####` (contoh: DN-00001) **Permissions:** System Manager (full), Guest (create, read) - untuk form publik #### 3. Pendaftar Beasiswa Data pendaftar beasiswa dari form online. **Fields:** - `nama_lengkap` (Data, Required) - Nama lengkap - `tanggal_lahir` (Data, Required) - Format dd/mm/yyyy - `alamat_lengkap` (Text, Required) - Alamat lengkap - `pendidikan_terakhir` (Select, Required) - SD/SMP/SMA/SMK - `nomor_hp` (Phone, Required) - Nomor HP/WhatsApp - `email` (Email) - Email pendaftar - `kondisi_keluarga` (Text Editor, Required) - Kondisi ekonomi keluarga - `minat_program` (Select, Required) - Barista/Digital Marketing/Admin/CS - `alasan_beasiswa` (Text Editor, Required) - Alasan layak menerima - `link_video` (Data) - URL video motivasi (YouTube/GDrive) - `status` (Select, Read-only) - Pending/Diproses/Diterima/Ditolak **Auto-naming:** `PB-#####` (contoh: PB-00001) **Permissions:** System Manager (full), Guest (create, read) - untuk form publik ### Single DocTypes (CMS) #### 1. Homepage Konten untuk halaman utama website. **Sections:** - Hero Section (label, headline, subheadline, 2 notifikasi) - Program Section (label, heading, subtext, + child table programs) - Narasi Section (label, heading, body, + child table checklist) - Alur Section (+ child table steps) - Testimoni Section (label, heading, + child table testimoni) - CTA Section (heading, subtext) **Child Tables:** - `Homepage Program` - Daftar program (icon, title, description) - `Homepage Checklist Item` - Item checklist - `Homepage Alur Step` - Langkah-langkah (number, title, description) - `Homepage Testimoni` - Testimoni (name, role, text, photo) #### 2. Halaman Donatur Konten untuk halaman donasi. **Sections:** - Hero Section (label, headline, subheadline) - Transparansi Section (label, heading, subtext, note, + child table alokasi) - Cara Donasi Section (heading, subtext, + child table nominal chips, security note) - Registrasi Section (label, heading, subtext, + child table benefits) - FAQ Section (heading, + child table FAQs) **Child Tables:** - `Donatur Alokasi` - Alokasi dana (category, percentage, description, icon) - `Donatur Nominal Chip` - Pilihan nominal cepat - `Donatur Benefit Item` - Benefit untuk donatur - `Donatur FAQ` - Pertanyaan & jawaban #### 3. Halaman Beasiswa Konten untuk halaman beasiswa. **Sections:** - Hero Section (label, headline, subheadline, + child table badges) - Program Section (label, heading) - Kriteria Section (label, heading, subtext, + child table kriteria) - Alur Section (label, heading, + child table steps) - Form Section (label, heading, subtext, video note, consent) **Child Tables:** - `Beasiswa Hero Badge` - Badge di hero section - `Beasiswa Kriteria Item` - Item kriteria (title, description) - `Beasiswa Alur Step` - Tahapan seleksi (number, title, description) ## 🔧 API Endpoints Semua DocType dapat diakses melalui REST API Frappe: ### CMS Content (Read Only) ```bash # Get Homepage content GET /api/resource/Homepage # Get Halaman Donatur content GET /api/resource/Halaman Donatur # Get Halaman Beasiswa content GET /api/resource/Halaman Beasiswa # Get list of active programs GET /api/resource/Program Beasiswa?filters=[["aktif","=",1]] # Get specific program GET /api/resource/Program Beasiswa/{nama_program} ``` ### Public Forms (Create & Read) ```bash # Submit donasi form POST /api/resource/Donatur Content-Type: application/json { "nama_donatur": "John Doe", "email": "john@example.com", "nomor_hp": "081234567890", "kota": "Jakarta", "jumlah_donasi": 500000, "tanggal_donasi": "2026-03-11", "anonim": 0 } # Submit beasiswa form POST /api/resource/Pendaftar Beasiswa Content-Type: application/json { "nama_lengkap": "Jane Doe", "tanggal_lahir": "01/01/2000", "alamat_lengkap": "Jl. Example No. 123, Jakarta", "pendidikan_terakhir": "SMA / sederajat", "nomor_hp": "081234567890", "email": "jane@example.com", "kondisi_keluarga": "

Deskripsi kondisi keluarga...

", "minat_program": "Barista Profesional", "alasan_beasiswa": "

Alasan mengapa layak...

", "link_video": "https://youtube.com/watch?v=..." } # Get list of donors (for transparency page) GET /api/resource/Donatur?fields=["nama_donatur","jumlah_donasi","tanggal_donasi","kota"]&filters=[["anonim","=",0]] # Get donor detail GET /api/resource/Donatur/{DN-00001} ``` ### Admin Only ```bash # Get all scholarship applicants GET /api/resource/Pendaftar Beasiswa # Update applicant status PUT /api/resource/Pendaftar Beasiswa/{PB-00001} { "status": "Diterima" } # Create/Update program beasiswa POST /api/resource/Program Beasiswa PUT /api/resource/Program Beasiswa/{nama_program} ``` **Authentication:** - Public forms (Donatur, Pendaftar Beasiswa) - No auth required (Guest role) - Read-only endpoints - No auth for public data, API key/token for private - Admin endpoints - Requires API key/token with System Manager role ## 💡 Use Cases ### Scenario 1: Website Yayasan dengan Frontend Modern Frontend developer dapat membuat website modern (React/Vue/Next.js) yang mengambil data dari Frappe: 1. **Homepage** - Fetch konten dari API `/api/resource/Homepage` 2. **Halaman Donasi** - Fetch konten dari `/api/resource/Halaman Donatur`, submit form ke `/api/resource/Donatur` 3. **Halaman Beasiswa** - Fetch konten dari `/api/resource/Halaman Beasiswa`, submit form ke `/api/resource/Pendaftar Beasiswa` 4. **Transparansi** - Tampilkan list donatur yang bukan anonim 5. **Program List** - Tampilkan program beasiswa yang aktif **Keuntungan:** - Admin kelola konten via Frappe Desk (user-friendly) - Frontend fokus pada UI/UX - Data tersinkron real-time - Permissions & validation sudah di-handle backend ### Scenario 2: Dashboard Admin Frappe Desk sudah menyediakan dashboard lengkap untuk admin: 1. **Kelola Konten** - Edit Homepage, Halaman Donatur, Halaman Beasiswa 2. **Review Pendaftar** - Lihat & update status pendaftar beasiswa 3. **Tracking Donasi** - Monitoring donasi yang masuk 4. **Manajemen Program** - CRUD program beasiswa ### Scenario 3: API Integration dengan Payment Gateway Developer dapat membuat custom server script untuk: 1. Terima notifikasi dari payment gateway (Midtrans, Xendit, dll) 2. Create record Donatur secara otomatis 3. Send email terima kasih ke donatur 4. Update statistik donasi real-time ## 📁 Struktur Direktori ``` yayvip/ ├── yayvip/ │ ├── __init__.py │ ├── hooks.py # App hooks & configuration │ ├── modules.txt # Module definition │ └── yayvip/ # Main module │ ├── __init__.py │ └── doctype/ # All DocTypes │ ├── beasiswa_alur_step/ │ │ ├── __init__.py │ │ ├── beasiswa_alur_step.json │ │ ├── beasiswa_alur_step.py │ │ └── beasiswa_alur_step.js │ ├── donatur/ │ │ ├── __init__.py │ │ ├── donatur.json │ │ ├── donatur.py │ │ └── donatur.js │ ├── homepage/ │ │ ├── __init__.py │ │ ├── homepage.json │ │ ├── homepage.py │ │ └── homepage.js │ ├── pendaftar_beasiswa/ │ ├── program_beasiswa/ │ └── ... (12 more DocTypes) ├── docs/ │ └── ERD.md # Entity Relationship Diagram ├── .pre-commit-config.yaml # Code quality checks ├── pyproject.toml # Python project config ├── package.json # Node.js dependencies └── README.md