61 lines
2.1 KiB
Markdown
61 lines
2.1 KiB
Markdown
# 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.
|
|
|