# Menyiapkan WATERGUARD

## Menjalankan secara lokal

1. Aktifkan **Apache** dan ekstensi **cURL** di XAMPP.
2. Client ID Google sudah dipasang di `config.js`. Kelola asal domain yang diizinkan pada proyek OAuth pemilik Client ID tersebut melalui [Google Cloud Console Credentials](https://console.cloud.google.com/apis/credentials).
3. Tambahkan origin JavaScript yang diizinkan:
   - `http://localhost`
   - `http://localhost:80` jika port ditulis eksplisit
   - `https://waterguardian.web.id`
4. Jika memakai Client ID milik proyek lain, ganti nilainya di `config.js`:

   ```js
   window.WATERGUARD_CONFIG = {
     googleClientId: "CLIENT_ID_ANDA.apps.googleusercontent.com"
   };
   ```

5. Buka `http://localhost/waterguardian.web.id/` melalui Apache, bukan `file:///`. Jika Google menolak origin localhost, pastikan `http://localhost` juga masuk daftar origin; gunakan `https://waterguardian.web.id` untuk situs produksi.

Google Client ID adalah pengenal publik, bukan Client Secret. Jangan taruh Client Secret di `config.js` atau berkas browser. `auth.php` memverifikasi token Google di server, memeriksa audience, penerbit, masa berlaku dan email terverifikasi, lalu membuat sesi PHP dengan cookie `HttpOnly` dan `SameSite=Lax`.

## Peta dan data

Peta lapangan memakai OpenStreetMap dan Leaflet, berpusat pada Danau Limboto di Kabupaten Gorontalo. Batas DAS, titik pengamatan dan zona risiko pada demo ini merupakan lapisan **simulasi/ilustrasi**, bukan data pengukuran maupun batas administrasi resmi. Data peta memerlukan koneksi internet.

Peta menyediakan tombol **Jelajah 3D** untuk melihat model WebGL interaktif. Seret untuk memutar, gunakan roda gulir/tombol zoom untuk mengatur jarak, dan pilih penanda atau nomor pos untuk melihat petunjuk misi. Tombol risiko banjir juga memperbarui lapisan simulasi pada model 3D. Tampilan ini adalah ilustrasi prosedural—bukan fotogrametri, model elevasi, atau representasi geografis presisi—dan memerlukan browser dengan WebGL serta koneksi untuk memuat Three.js dari CDN. Jika WebGL tidak tersedia, gunakan peta 2D.

Pastikan PHP cURL aktif dan situs produksi menggunakan HTTPS. Angka kesehatan DAS, cuaca, banjir, XP, dan koin di purwarupa ini merupakan data simulasi; jangan menafsirkannya sebagai peringatan atau pengamatan real-time.

Progres permainan disimpan di browser perangkat pemain dan dipisahkan menurut ID akun Google; progres ini belum disinkronkan lintas perangkat. Pengumpulan catatan evaluasi **nonaktif secara default**. Setelah server dikonfigurasi dan izin penelitian/sekolah serta persetujuan yang diperlukan tersedia, siswa yang masuk dapat memilih ikut secara sukarela. Tanpa persetujuan eksplisit, endpoint tidak merekam event permainan. Game tetap dapat dimainkan jika siswa menolak.

Jika diaktifkan, server menyimpan ID HMAC pseudonim (dapat menghubungkan sesi akun yang sama, tetapi tidak berisi nama/email), pilihan terstruktur, hasil/percobaan cek pemahaman, perubahan indikator simulasi, kategori refleksi, dan waktu tab game terlihat. Jawaban teks bebas, nama, email, serta IP tidak masuk ke data belajar. Hash IP untuk pembatasan percobaan login admin disimpan terpisah dan dibersihkan setelah 24 jam. API menghapus data permainan yang tidak aktif lebih dari 180 hari saat ada permintaan berikutnya (bukan melalui scheduler terpisah); peserta dapat menarik persetujuan dari sidebar game untuk menghapus catatan pseudonim akun. Database SQLite harus berada di luar document root.

**Batas instrumen:** metrik dashboard bersifat deskriptif dan eksploratif. Pertanyaan misi memberi umpan balik serta mengizinkan percobaan ulang, sehingga tingkat benar akhir tidak membuktikan peningkatan pemahaman maupun literasi yang tervalidasi. Jangan membuat klaim efektivitas atau memakai skor sebagai asesmen berisiko tinggi dari metrik ini. Untuk mengukur dampak belajar, rancang/validasi instrumen yang sesuai dengan ahli, baseline dan pengukuran pascaintervensi, protokol pembanding bila diperlukan, serta tinjauan etik dan izin institusi.

### Menyiapkan login admin dan database evaluasi

1. Gunakan PHP 8 dengan `PDO_SQLITE` aktif (tersedia pada XAMPP yang diuji) dan HTTPS untuk deployment. Pastikan akun layanan Apache mempunyai hak tulis pada folder data yang berada **di luar** `htdocs`.
2. Buat username admin khusus dan kata sandi kuat (disarankan minimal 14 karakter). Hasilkan hash dan kunci pseudonim lewat PHP CLI; gunakan nilai acak, jangan memakai contoh atau memasukkan kata sandi asli ke source code:

   ```powershell
   php -r "echo password_hash('GANTI_DENGAN_PASSWORD_KUAT', PASSWORD_DEFAULT), PHP_EOL;"
   php -r "echo bin2hex(random_bytes(32)), PHP_EOL;"
   ```

   Jalankan dari terminal lokal; masukkan hasil hash password dan kunci kedua ke konfigurasi Apache, bukan `config.js`, JavaScript, atau file yang dilayani publik.
3. Tambahkan konfigurasi environment pada konfigurasi Apache lokal yang terlindungi (misalnya blok `<IfModule env_module>` pada konfigurasi XAMPP), sesuaikan username/hash/kunci dan pastikan folder data ada serta dapat ditulis Apache:

   ```apache
   SetEnv WATERGUARD_ADMIN_USERNAME "admin-evaluasi"
   SetEnv WATERGUARD_ADMIN_PASSWORD_HASH "HASIL_PASSWORD_HASH"
   SetEnv WATERGUARD_EVALUATION_HMAC_KEY "KUNCI_ACAK_64_KARAKTER_HEKS"
   SetEnv WATERGUARD_EVALUATION_DATA_DIR "C:/xampp/private/waterguardian-evaluation"
   SetEnv WATERGUARD_EVALUATION_ENABLED "0"
   ```

   Restart Apache setelah konfigurasi berubah. API menolak folder database di dalam document root. Simpan kunci HMAC dengan aman dan pertahankan nilainya selama masih ada data yang perlu dihubungkan ke akun untuk penarikan persetujuan; mengganti kunci membuat ID pseudonim lama tidak dapat diturunkan lagi. Jangan membagikan file ekspor; file CSV memuat data pseudonim dan strategi permainan.
4. Uji login admin lokal di `http://localhost/waterguardian.web.id/admin.html`. Login admin berbeda dari login siswa. Percobaan login dibatasi; setelah lima kegagalan, alamat tersebut dikunci selama 15 menit. Jangan memakai kredensial lemah dan jangan mengekspos situs penelitian tanpa HTTPS.
5. Pertahankan `WATERGUARD_EVALUATION_ENABLED "0"` selama persiapan. Ubah ke `"1"` **hanya setelah** protokol dan izin institusi/sekolah, informasi siswa/wali, perlindungan peserta, dan mekanisme persetujuan yang berlaku siap. Setelah restart, siswa yang login akan melihat pilihan ikut/menolak; menarik persetujuan menghapus seluruh event untuk ID pseudonim akun tersebut.

## Alur kampanye dan tujuan belajar

Akun yang belum memiliki progres WATERGUARD versi 3 memulai dari Prolog dan Level 01. Delapan misi kampanye berurutan:

1. **Water Detective** — siklus air, hubungan hulu–hilir dalam DAS, serta cara membaca bukti kualitas air.
2. **Save the Watershed** — tutupan lahan, limpasan, resapan, dan pemilihan infrastruktur sesuai konteks.
3. **Disaster Attack** — bahaya, paparan, kerentanan, peringatan dini, dan pengurangan risiko bencana.
4. **Drought Mode** — kebutuhan dan keadilan alokasi air, efisiensi irigasi, serta kebutuhan ekosistem.
5. **Climate Attack** — dampak panas/hujan, adaptasi berbasis risiko, dan keputusan di tengah ketidakpastian.
6. **WEF Nexus Boss** — keterkaitan air–energi–pangan, trade-off, indikator, dan evaluasi bukti.
7. **Community Recovery** — jasa lahan basah, pemulihan ekosistem, dan pemantauan partisipatif.
8. **Year 2050** — air aman, pengelolaan DAS terpadu, evaluasi program, dan refleksi.

Setiap misi menggabungkan pengamatan atau keputusan simulasi dengan **tiga cek pemahaman**. Layar cek pemahaman menampilkan ilustrasi lapangan DAS beranimasi dan pilihan strategi berbentuk kartu; jawaban langsung ditandai, diberi alasan, dan jawaban yang belum tepat dapat dicoba lagi tanpa kehilangan progres. Kampanye berisi 24 pertanyaan formatif dengan urutan pilihan diacak. Siswa perlu menjawab tepat untuk menguasai konsep dan membuka badge misi. Progres pertanyaan tersimpan, sehingga permainan dapat dilanjutkan setelah halaman ditutup. Ringkasan akhir menampilkan jawaban tepat dan jumlah percobaan.

Kampanye dirancang untuk sesi kelas sekitar **30–45 menit**, bukan sebagai pengukur durasi wajib: guru dapat membagi siswa menjadi kelompok, meminta mereka menjelaskan alasan keputusan, dan membandingkan trade-off sebelum melanjutkan. Statistik dunia dan nilai dampak adalah model pembelajaran, bukan prakiraan, data pengukuran atau rekomendasi teknis. Jawaban terbaik pada isu pengelolaan air bergantung pada bukti dan konteks lokal.

### Saran fasilitasi kelas

- **Pembuka (3–5 menit):** minta siswa menyebutkan dari mana air yang digunakan sehari-hari berasal dan ke mana air mengalir setelah hujan.
- **Eksplorasi dan keputusan (20–25 menit):** jalankan kampanye berpasangan/kelompok. Minta siswa bergiliran menjadi pengamat, pencatat, dan penyaji alasan.
- **Cek pemahaman (tertanam di tiap misi):** baca umpan balik, minta siswa menerangkan konsep dengan kata-kata sendiri, dan bandingkan jawaban kelompok.
- **Refleksi (5–10 menit):** diskusikan siapa yang diuntungkan/terdampak oleh keputusan, bukti lapangan yang masih dibutuhkan, dan satu tindakan menjaga air yang realistis di sekolah atau rumah.

Gunakan sebagai bahan pengantar diskusi, bukan pengganti praktikum kualitas air, data resmi, atau kurikulum dan panduan keselamatan sekolah.

## Teman perjalanan

Nara (peneliti air) dan Pak Rahmat (warga tepian danau) menemani pemain melalui percakapan singkat yang berubah sesuai misi. Gunakan tombol **Dengar cerita** untuk bergantian mendengar perspektif mereka. Avatar Water Guardian bergerak di antara delapan pos ekspedisi pada peta; gunakan **Temukan misi** atau **Menuju titik misi** untuk memusatkan peta ke lokasi aktif. Buka popup pos atau titik lapangan lalu pilih **Buka misi** untuk menuju misi yang sesuai; misi terkunci memberi penjelasan, sedangkan pos yang sudah selesai membuka jurnal keputusan. Tombol **Risiko banjir** menyalakan atau menyembunyikan lapisan simulasi. Aliran sungai, jalur ekspedisi, titik misi, dan sorotan risiko memiliki gerak visual halus; animasi berhenti atau dikurangi saat perangkat mengaktifkan preferensi pengurangan gerak. Setelah keputusan, adegan dampak dirender sebagai model WebGL dengan Three.js: medan yang diperluas dan bergelombang, tekstur permukaan prosedural, danau dengan riak, arus sungai, jalan, permukiman, variasi vegetasi, bayangan, serta bangunan atau respons yang dipengaruhi pilihan. Pemain dapat menyeret atau menyentuh adegan untuk memutar kamera dan memakai tombol zoom/putar/reset. Three.js dimuat dari CDN; jika WebGL tidak tersedia atau pustaka gagal dimuat, game menampilkan visual alternatif CSS dan tetap dapat dimainkan. Scene 3D adalah ilustrasi pembelajaran, bukan pengukuran atau prediksi lapangan. Tampilan dirancang responsif untuk komputer dan ponsel; pada ponsel peta dapat dijelajahi dengan gestur sentuh. Dialog dan titik peta merupakan bagian dari simulasi pembelajaran, bukan kesaksian lapangan.

### Bacaan lanjutan untuk guru

- [USGS Water Science School — The Water Cycle](https://www.usgs.gov/water-science-school/water-cycle)
- [WHO — Guidelines for drinking-water quality, fourth edition incorporating the first and second addenda](https://www.who.int/publications/i/item/9789240045064)

Gunakan panduan otoritas Indonesia dan data setempat saat membahas keselamatan air minum atau mengambil keputusan nyata.