ICSS - Platform Digital Terintegrasi untuk Edukasi, Mitigasi Bencana, dan Ekonomi Desa Air Kemuning

CSS (Integrated Circuit Sport Science) bukan sekadar aplikasi olahraga seperti namanya. Di balik akronim itu, ICSS adalah super-app yang dirancang sebagai single point of access untuk seluruh kebutuhan digital warga Desa Air Kemuning, Kec. Sukaraja, Kab. Seluma, Bengkulu — mulai dari menonton video desa, mengikuti kelas virtual, memesan layanan desa, hingga memantau peringatan dini BMKG.

Konsep "Integrated Circuit" diambil dari arsitektur sirkuit terintegrasi: berbagai komponen dengan fungsi berbeda disatukan dalam satu papan. Begitu juga ICSS — modul edukasi sport science, mitigasi bencana, marketplace, dan ruang kelas virtual yang biasanya tersebar di beberapa aplikasi berbeda, di sini disatukan dalam satu antarmuka konsisten dengan dark theme bertema sirkuit elektronik.

Fitur Utama

1. Sistem Autentikasi Sistem login & registrasi dengan tema sport-science: dark teal background, accent garis-garis sirkuit yang menyala lembut, dan formulir yang clean. Pendaftaran baru langsung mengarahkan ke halaman Home tanpa langkah ekstra — onboarding minimal friction.

2. Home Dashboard Multi-Banner Pusat informasi yang menyatukan tiga jenis konten dalam satu scroll:

• Banner Info Bencana (atas) untuk peringatan terkini yang clickable

• Jelajahi Menu dengan 6 ikon akses cepat (Sejarah, Video Desa, Materi, Ruang Kelas, Cuaca, Peta)

• Banner Hotline darurat untuk kontak darurat instant

• Berita Terkini dari Ikatan Guru Indonesia (4 berita preview + Lihat Semua)

Bottom navigation membagi aplikasi menjadi 3 area utama: Home, Produk, dan Pesanan.

3. Info Bencana — Integrasi Real-time BMKG Modul mitigasi bencana yang menarik data live dari BMKG (Badan Meteorologi, Klimatologi, dan Geofisika). Dua jenis informasi disajikan:

• Peringatan Dini Cuaca dengan card detail (jenis, tingkat keparahan, area terdampak, masa berlaku, sumber pengirim, kontak BMKG)

• Riwayat Gempa Terkini lengkap dengan magnitudo, lokasi, kedalaman, koordinat, waktu, dan status potensi tsunami

Filter Bengkulu/Indonesia memungkinkan user fokus ke area lokal atau melihat skala nasional. Klik Info Detail membuka halaman dengan peta wilayah resmi BMKG.

4. Sejarah Desa — Timeline Interaktif Modul yang menelusuri perjalanan Desa Air Kemuning dari cikal bakal "Talang Kedurang" (1982) hingga menjadi desa definitif (2010-an). Disajikan dalam timeline vertikal dengan ikon titik hijau, label tahun, dan deskripsi setiap milestone — dari era PIR Plasma Karet, pemekaran desa, hingga pergantian kepala desa.

5. Video Desa Galeri video aktivitas dan suasana desa dengan player embedded. Setiap video punya thumbnail, judul, dan halaman detail dengan deskripsi konteks.

6. Materi Pembelajaran — 3 Kategori Modul edukasi dengan tiga jalur:

• Mitigasi Bencana (animasi BMKG, video edukasi)

• Olahraga (sport science materials — sesuai latar belakang riset)

• Kuis (akses langsung ke modul kuis)

Setiap materi memiliki halaman detail dengan video pembelajaran embed, dokumen PDF pendukung, dan kolom diskusi & komentar untuk interaksi user.

7. Kuis Interaktif dengan Timer Sistem kuis dengan flow lengkap:

• Daftar kuis tersedia

• Informasi Kuis: durasi (mis. 10 menit), jumlah soal, panduan pengerjaan

• Halaman soal dengan progress bar, timer countdown, multiple choice 4 opsi (A-D)

• Modal konfirmasi "Kumpulkan Kuis?" sebelum submit

• Hasil skor dengan persentase, jumlah benar/total, dan feedback motivasional ("Jangan Menyerah, Coba Lagi!" atau sukses)

• Riwayat Kuis lengkap dengan tinjau jawaban + kunci jawaban

8. Ruang Kelas Virtual — Mini Google Classroom Salah satu fitur paling kompleks. User bisa:

• Membuat kelas baru dengan nama & deskripsi → sistem auto-generate kode unik 4 digit

• Bergabung ke kelas orang lain dengan memasukkan kode 4 digit tersebut

• Di dalam kelas (sebagai pemilik): tambah materi (judul, deskripsi, link YouTube opsional, PDF opsional), tambah kuis dengan soal kustom

• 4 tab dalam kelas: Materi, Kuis, Anggota (dengan label Pemilik/Anggota), Riwayat (skor anggota)

• Anggota bisa mengerjakan kuis kelas dengan flow identik kuis utama

Pendekatan kode 4 digit (mirip Kahoot/Google Meet PIN) sengaja dipilih untuk kemudahan berbagi verbal di kelas tatap muka.

9. Cuaca BMKG Prakiraan cuaca 3 hari (Hari Ini, Besok, Lusa) untuk lokasi Desa Air Kemuning, Seluma, dari BMKG. Halaman utama menampilkan ringkasan suhu + kondisi + kelembapan + angin + presipitasi + jarak pandang. Halaman detail menampilkan prakiraan per jam lengkap (11:00, 14:00, 17:00, 20:00, dst.) dengan semua parameter cuaca.

10. Peta Desa Interaktif Google Maps dengan marker titik-titik penting (Kantor Desa, Pustu, Kebun Durian, Anjung Pika, dll). Bottom sheet daftar lokasi yang bisa di-swipe ke atas, klik salah satu lokasi otomatis menggerakkan map ke titik tersebut + opsi routing langsung via Google Maps native.

11. Hotline Darurat Daftar kontak penting (Pemadam, dll.) dengan dual-action button: tap untuk WhatsApp atau tap untuk telepon langsung. Designed untuk situasi panik — minimal langkah, langsung action.

12. Berita IGI Feed berita terbaru dari Ikatan Guru Indonesia (IGI) — tampilan card dengan thumbnail, judul, tanggal. Tap untuk detail berita lengkap dengan formatting yang readable.

13. Marketplace Produk Desa Katalog produk/layanan dari Desa Air Kemuning (mis. Pelayanan Desa — surat keterangan, dll.) dengan:

• Search + filter kategori + sort (A-Z, harga)

• Halaman detail produk: rating bintang, lokasi, harga, deskripsi

• Add to Cart dengan notifikasi konfirmasi

14. Keranjang & Checkout Multi-Step

• Daftar item dengan quantity controls (+/-), auto-remove saat 0

• Tombol hapus semua (clear cart)

• Total Harga dinamis di footer

• Checkout → form data diri (nama, alamat, no. HP, email, tanggal kunjungan)

15. Pembayaran QRIS + Upload Bukti

• Halaman ringkasan: rincian pesanan, data pelanggan, jadwal

• Instruksi Pembayaran menampilkan QR Code QRIS (toko: AZVADENSTORE, NMID, A01) + opsi transfer rekening

• Upload Bukti Pembayaran dengan camera/gallery picker

• Submit → tiket otomatis dibuat dengan status Menunggu Verifikasi

16. Manajemen Tiket QR Code — Lifecycle Lengkap Setiap pesanan menghasilkan tiket dengan state machine 3 tahap:

• Pending / Menunggu Verifikasi → tampil notice kuning "Pesanan Anda sedang diverifikasi oleh admin"

• Verified / Aktif → QR Code muncul dengan instruksi "Tunjukkan QR Code ini saat check-in"

• Used / Telah Digunakan → ikon centang hijau + timestamp penggunaan

Setelah tiket digunakan, user diarahkan ke halaman Beri Ulasan dengan rating bintang 1-5 + textarea opsional.