Flowchart Cara Kerja Aplikasi

Visualisasi ringkas alur API (Laravel) dan MOBILE (Vue 3 + Capacitor). Base URL: /api (otomatis mengikuti domain).

📱 MOBILE ⚙️ API Laravel
💡 Klik tab untuk ganti diagram.

Notifikasi: Polling & Push Native

MOBILE tarik notifikasi berkala (interval dari GET /app-config, disimpan di localStorage), lalu tampilkan push native untuk pesan baru.

flowchart TD
    A["Polling (default 10 detik)"] --> B["MOBILE GET /notifications · Bearer access_token"]
    B --> R{"HTTP 401?"}
    R -- "ya" --> X["Hapus token lokal + login ulang"]
    R -- "tidak" --> C{"Notifikasi baru?"}
    C -- "tidak" --> A
    C -- "ya" --> D["LocalNotifications.schedule()"]
    D --> E["Tampil di status bar"]
    E --> F["Buka daftar atau detail"]
    F --> G["POST /notifications/id/acknowledge"]
    G --> A
    

Kirim / Broadcast Notifikasi

Admin atau API kirim ke semua device atau daftar NUP.

flowchart TD
    A["POST /notifications/broadcast"] --> B{"title dan body terisi?"}
    B -- "tidak" --> C["400 title and body required"]
    B -- "ya" --> D["Simpan notification"]
    D --> E{"Jenis tujuan?"}
    E -- "semua device" --> F["is_broadcast = 1"]
    E -- "target_nups" --> I["kunci NUP di notification_nups"]
    F --> J["Catat device_notifications"]
    I --> K["HP tarik saat polling (by NUP)"]
    J --> K
    K --> L["201 devices_targeted"]
    L --> M["HP tarik saat polling berikutnya"]
    

Siklus Hidup MOBILE (Runtime)

Dari app dibuka sampai push diterima. Token akses permanen sampai logout; satu akun boleh punya banyak token (multi-login).

flowchart TD
    A["App dibuka"] --> B{"Token akses tersimpan?"}
    B -- "tidak" --> C["Login SSO"]
    C --> D["POST /auth/login ke backend"]
    D --> E["Backend panggil myauth + simpan auth_sessions"]
    E --> E2["Terima Bearer token dari objek bearer"]
    E2 --> F
    B -- "ya" --> F["Tampil Beranda"]
    F --> G["onMounted: cek koneksi + validasi /me + fetch notifikasi"]
    G --> H["Mulai polling"]
    G --> I["Start native service"]
    H --> J["Push diterima"]
    I --> J
    J --> K["Tap push ke detail"]
    K --> L["Tandai dibaca"]
    L --> M["401? logout + token revoked"]
    

Login SSO & Sesi

Sederhana: HP hanya bicara ke Laravel, dan server auth hanya dipanggil saat login. Setelah token tersimpan, request dicek ke sesi lokal, bukan ke myauth.

flowchart TD
    A["MOBILE: username dan password"] --> B["POST /auth/login ke Laravel"]
    B --> C["Laravel panggil myauth"]
    C --> D{"bearer token ada?"}
    D -- "tidak" --> E["401 / 422 / 429"]
    D -- "ya" --> F["Mapping data_pegawai_sisdm + absensi_sikap"]
    F --> G["Simpan pegawai + sesi (hash bearer)"]
    G --> H["Kirim Bearer token dari objek bearer"]
    H --> I["MOBILE simpan token di localStorage"]
    I --> J["Request API dengan Bearer token"]
    J --> K{"Bearer token valid?"}
    K -- "tidak" --> L["401 lalu logout"]
    K -- "ya" --> M["Data ditampilkan"]
    

Endpoint Kunci

Notifikasi: GET /notifications · GET /notifications/{id} · POST /notifications/{id}/acknowledge · POST /notifications/broadcast

Auth: POST /auth/login (mobile → backend → myauth) · GET /auth/userinfo · POST /auth/refresh · POST /auth/logout

Absensi: GET /attendance/today — dibaca langsung dari absensi_sikap.data hanya saat halaman beranda (jam masuk/pulang) dibuka; polling/background service tidak memanggil /me

Sesi: tabel auth_sessions — multi-login, token per perangkat, revoke saat logout · admin bisa cabut per sesi / semua per user

Detail lengkap + contoh respons di /doc.

App Notifikasi · flowchart API & MOBILE · Laravel 10 + Vue 3/Capacitor · Mermaid