# SMAN1 Mobile Device Client (Web/PWA)

Aplikasi web mobile-first untuk **perangkat absensi** yang terhubung ke backend CodeIgniter 4.

> Fokusnya: mempermudah testing dan penggunaan awal di Android (Chrome) tanpa perlu build APK native dulu. Nantinya bisa dibungkus jadi aplikasi Android (WebView / TWA) jika dibutuhkan.

## Struktur

- `index.html` — halaman utama device absensi
- `styles.css` — styling mobile-first (tombol besar, UI simpel untuk layar sentuh)
- `app.js` — logic pemanggilan API backend `/api/attendance/checkin`

## Fitur

- Simpan **Backend URL**, `device_code`, dan `api_key` di localStorage.
- Ambil lokasi GPS lewat `navigator.geolocation` dan kirim ke backend.
- Form sederhana untuk input `student_id` (sementara, menunggu integrasi Face Recognition / QR).
- Tampilkan hasil status:
  - `PRESENT`, `LATE`, `OUTSIDE_ZONE`, `NO_SCHEDULE`, `INVALID_DEVICE`, dll.
- Desain UI:
  - Satu kolom, tombol besar, teks jelas, nyaman dipakai di HP Android (Chrome).

## Cara Menjalankan (dev)

1. Pastikan backend jalan di misalnya:
   - `http://localhost/sman1/backend/public`
   - atau IP di jaringan lokal, misal `http://192.168.1.10/sman1/backend/public`

2. Buka folder `mobile` di VSCode / editor.

3. Jalankan static server sederhana (opsi):

   - Dengan PHP:

     ```bash
     cd mobile
     php -S localhost:8001
     ```

     Lalu buka `http://localhost:8001` di browser Android.

   - Atau cukup buka `index.html` langsung di browser (double click), tapi lebih baik lewat HTTP.

4. Di HP Android (Chrome):

   - Akses: `http://IP_LAPTOP:8001` (misal `http://192.168.1.10:8001`).
   - Masukkan:
     - **Backend URL**: `http://IP_LAPTOP/sman1/backend/public`
     - **Device Code** dan **API Key** dari halaman **Device Absen** di dashboard.
   - Isi `ID Siswa`, pastikan ada jadwal aktif dan zona device sudah diatur.
   - Tekan **Check-in Sekarang**.

## Integrasi Lanjutan

Ke depan, layar ini bisa dikembangkan menjadi:

- Integrasi kamera + Face Recognition (panggil external engine, hanya kirim `student_id` ke backend).
- Scan QR code untuk `student_id`.
- Pembatasan UI (mode kiosk) untuk dipasang di tablet di gerbang sekolah.