SMARTMIND - Guide Book & Dokumentasi Sistem Lengkap

📖 Bab 1: Gambaran Umum & Teknologi

SMARTMIND adalah ruang belajar digital interaktif khusus santri. Memadukan edukasi, Al-Qur'an, gamifikasi, dan dukungan kesehatan mental (relaksasi & AI).

Tech Stack:

Frontend: React.js, Vite, Tailwind CSS.
Backend: PHP 8+ (PDO), MySQL/MariaDB.
API Pihak Ketiga: api.alquran.cloud (Data Qur'an & Audio Qori), YouTube API, Google Gemini AI.

👥 Bab 2: Sistem Akun, Registrasi & Pembina

1. Cara Daftar (Sign Up) & Bergabung dengan Pembina

Untuk menggunakan aplikasi, santri baru mendaftar melalui menu Daftar. Terdapat dua jalur:

Santri Umum / Mandiri: Belajar secara mandiri tanpa pengawasan khusus. Cukup memasukkan Nama dan Kata Sandi.
Santri Binaan (Konseling): Diperuntukkan bagi santri dalam masa pendampingan. Wajib memasukkan ID Pembina (Kode dari ustadz/konselor) agar akun tertaut.

2. Fitur Pembina & Cara Kerjanya

Pembina bertugas memantau perkembangan santri binaannya. Sistem akan mendata progres poin (XP), rutinitas, dan Mood/Emosi harian santri. Pembina dapat mengetahui kapan santri sedang "Cemas" atau "Tertekan" agar dapat memberikan sesi konseling di dunia nyata secara tepat waktu.

3. Pelacakan Emosi Harian

Setiap Login (Masuk), santri wajib memilih Emosi Saat Ini. Sistem akan memberikan sapaan khusus dan lencana (Misal: 🍂 Santri Butuh Ketenangan).

⭐ Bab 3: Modul & Fitur Utama Web

1. List Video Edukatif & Perpustakaan E-Book

Video Edukatif: Memutar video YouTube edukasi secara internal (melalui iframe API) agar santri fokus tanpa gangguan/algoritma luar.
Perpustakaan E-Book: Penampil PDF internal (Viewer). Santri membaca koleksi buku PDF langsung di browser.

2. Al-Qur'an Digital & Suara Qori

Teks Arab Tajwid: Font Noto Naskh Arabic yang jelas. Lengkap dengan filter per-Juz.
Suara Qori (Misyari Rasyid): Fitur Play Audio per ayat secara realtime menggunakan API untuk membantu tahsin & muraja'ah.

3. Asisten AI (Kecerdasan Buatan)

Chatbot bertenaga Google Gemini AI. Menjawab pertanyaan fiqih ringan, agama, serta memotivasi layaknya ustadz/konselor digital pendamping.

4. Fitur Relaksasi Audio

Musik relaksasi otomatis (backsound alam/instrumen damai) berputar saat santri login untuk meredakan stres (healing). Tersedia tombol toggle 🔊 Musik On / Off di Header web.

🎮 Bab 4: Gamifikasi, Game & Sistem Poin

1. Sistem Poin Santri (Koin / XP)

Santri mendapatkan Koin & XP setiap kali belajar atau menebak soal di dalam game dengan benar. Poin ini digunakan untuk meningkatkan peringkat (Leaderboard), memicu efek reward gamifikasi, dan menjadi metrik bagi Pembina untuk menilai keaktifan belajar santri.

2. Daftar Game Edukatif (Termasuk Santri Runner)

SMARTMIND menyediakan 4 mode permainan interaktif:

🏃‍♂️ Santri Runner (Arcade)

Game ketangkasan *Endless Runner* 2D. Santri berlari dan harus melompat menghindari rintangan. Sangat cocok sebagai "Brain Break" / jeda santai usai mengaji. Skor jarak jauh diakumulasi menjadi Koin.

⚔️ Babak 1: Ketangkasan Al-Qur'an

Berisi Tebak Surah dan Susun Ayat. Sistem mengambil ayat acak dari API. Jika tebakan benar, santri mendapat +XP. Efektif untuk melatih kelancaran hafalan.

💡 Babak 2: Pengujian Makna

Mode Tebak Terjemahan melatih santri tidak hanya menghafal lafaz, tapi memahami arti ayat sesuai Juz yang diplih.

🤝 Babak 3: Merawat Ukhuwah

Game Roleplay Resolusi Konflik Asrama (Bullying, Ghasab, Geng). Santri bertindak sebagai penengah, wajib menjaga keseimbangan Bar Tensi (Amarah) dan Bar Ukhuwah.

🛡️ Bab 5: Portal Super Admin

Akses Admin dikhususkan bagi tim IT/Kepala Asrama. Login aman melalui halaman spesifik dengan sistem Bcrypt Password Hashing.

Kelola Video YouTube: Admin memasukkan link video YouTube edukasi ke dalam database secara langsung.
Kelola E-Book (PDF): Admin dapat mengunggah file `.pdf` ke sistem `public/ebooks`, lengkap beserta cover dan judulnya.
Kelola Pengaturan & API: Menyimpan Gemini API Key dari database untuk mengatur kecerdasan AI web.

🗄️ Bab 6: Struktur Database & ERD

Sistem SMARTMIND (Database: smartmind_db) terdiri dari 10 Tabel Utama. Berikut adalah Entity Relationship Diagram (Ilustrasi Relasi Tabel):

erDiagram users { int id PK enum role "pembimbing, santri" int pembimbing_id FK int xp int coin } users ||--o{ users : "Dibimbing oleh (pembimbing_id)" users ||--o{ evaluasi_game_santri : "Memiliki" users ||--o{ aktivitas_santri : "Melakukan" users ||--o{ game_logs : "Merekam skor" users ||--o{ mood_tracker : "Mencatat emosi harian" users ||--o{ daily_missions : "Menjalankan misi" evaluasi_game_santri { int id PK int santri_id FK varchar status_mental text saran_ai } mood_tracker { int id PK int user_id FK varchar emosi_pilihan } admins { int id PK varchar email } settings { varchar setting_key PK text setting_value } education_videos { int id PK varchar youtube_id } education_ebooks { int id PK varchar file_path }

Detail 10 Tabel MySQL:

`users`: Pusat data akun, menyimpan role santri dan pembimbing. Memiliki relasi self-referencing (`pembimbing_id`).
`evaluasi_game_santri`: Mencatat analisis mental & saran dari AI saat santri bermain game Babak 3.
`aktivitas_santri`: Log aktivitas general untuk menyumbang jumlah Koin dan XP.
`game_logs`: Riwayat skor setiap permainan game (Santri Runner, Ketangkasan Qur'an, dll).
`mood_tracker`: Pencatatan emosi pilihan santri setiap kali mereka login di hari yang berbeda.
`daily_missions`: Misi harian santri (membaca Qur'an, main 1 game).
`admins`: Data login eksklusif untuk portal Super Admin pengelola konten web.
`settings`: Penyimpanan global konfig dinamis, seperti kunci API Gemini.
`education_videos` & `education_ebooks`: Tabel konten materi video Youtube & file PDF (modul edukasi).

🔄 Bab 7: Flowchart Sistem (Alur Pengguna)

Berikut adalah diagram alur (Flowchart) perjalanan pengguna yang dipisah berdasarkan ketiga peran utama (Santri, Pembimbing, dan Admin).

1. Flowchart Santri (Student Journey)

flowchart TD A([Buka Aplikasi]) --> B{Sudah Punya Akun?} B -- Belum --> C[Pilih Menu Daftar] C --> D{Pilih Tipe Santri} D -- Santri Umum --> E[Isi Nama & Password] D -- Santri Binaan --> F[Isi Nama, Password & Masukkan ID Pembimbing] E --> G[Login Aplikasi] F --> G B -- Sudah --> G G --> H[Pilih Emosi Hari Ini Mood Tracker] H --> I([Dashboard Utama & Audio Relaksasi Menyala]) I --> J[Modul Edukasi: Baca PDF & Nonton Video] I --> K[Modul Spiritual: Baca Al-Qur'an & Play Qori] I --> L[Modul Gamifikasi: Main Game & Kumpulkan Poin] I --> M[Modul Asisten: Chat dengan Gemini AI] J --> N([Kumpulkan Koin & XP]) K --> N L --> N

2. Flowchart Pembimbing (Counselor Journey)

flowchart TD A([Buka Aplikasi]) --> B[Login Akun Pembimbing] B --> C([Dashboard Pembimbing]) C --> D[Akses Daftar Santri Binaan] D --> E[Pantau Poin Koin & XP Santri] D --> F[Pantau Riwayat Emosi / Mood Tracker Harian] D --> G[Lihat Laporan Evaluasi Game Resolusi Konflik] F --> H{Perlu Pendampingan?} G --> H H -- Ya --> I[Jadwalkan Konseling Offline di Pesantren] H -- Tidak --> J([Lanjutkan Pemantauan])

3. Flowchart Super Admin

flowchart TD A([Buka URL Khusus /admin]) --> B[Login Super Admin] B --> C([Dashboard Super Admin]) C --> D[Kelola Video Edukasi] D --> D1[Tambah/Hapus Link YouTube] C --> E[Kelola E-Book PDF] E --> E1[Upload File PDF & Cover Buku] C --> F[Pengaturan Sistem] F --> F1[Update Gemini API Key] D1 --> G([Tersimpan di Database]) E1 --> G F1 --> G