Sistem Informasi Risiko Banjir Rob Terpadu
SAIBA adalah Sistem Informasi Geografis (SIG) berbasis WebGIS terpadu yang memanfaatkan kecerdasan buatan (Machine Learning) untuk memproyeksikan, memantau, dan memitigasi bencana banjir rob (genangan pasang air laut) secara real-time di wilayah pesisir Provinsi Lampung.
| Lapisan (Layer) | Teknologi Utama | Deskripsi Peran |
|---|---|---|
| Frontend | React 18, TypeScript, MapLibre GL JS, CSS Vanilla | Aplikasi SPA responsif dengan visualisasi peta interaktif berkinerja tinggi. |
| Backend | Laravel 11, PHP 8.4, Sanctum, Database Queue | REST API terpusat, pengelola otorisasi (RBAC), audit logs, dan cron worker. |
| Database | Supabase (PostgreSQL 17), PostGIS Extension | Penyimpan data spasial wilayah pesisir dan koordinat laporan warga. |
| ML Engine | Python 3.11, XGBoost, Pandas, imbalanced-learn | Pipeline data cuaca ERA5, model XGBoost Classifier, dan balancing SMOTE. |
| CI/CD & Jobs | GitHub Actions, hPanel Cron Scheduler | Otomasi deployment, uji integrasi (CI), dan Retraining/Prediction ML harian. |
Aplikasi dideploy dengan topologi hemat biaya (cost-effective) dan redundansi tinggi menggunakan kombinasi cloud resources:
graph TD
%% Nodes
warga[Warga & Publik]
bpbd[Operator & Pimpinan BPBD]
peneliti[Peneliti Akademik]
hostinger[Hostinger Shared Hosting<br>PHP 8.4 + Node.js 24]
supabase[Supabase Cloud Database<br>PostgreSQL 17 + PostGIS]
github[GitHub Actions Runner]
openmeteo[Open-Meteo API]
%% Styles
style hostinger fill:#1e293b,stroke:#3b82f6,stroke-width:2px,color:#fff
style supabase fill:#022c22,stroke:#10b981,stroke-width:2px,color:#fff
style github fill:#171515,stroke:#a855f7,stroke-width:2px,color:#fff
style openmeteo fill:#1e3a8a,stroke:#3b82f6,stroke-width:1px,color:#fff
%% Connections
warga -- "Akses Peta & Kirim Laporan (SPA)" --> hostinger
bpbd -- "Dashboard & Verifikasi" --> hostinger
peneliti -- "Akses Dataset / API Key" --> hostinger
hostinger -- "Query Data / Simpan Laporan" --> supabase
github -- "Trigger Harian / ML Predict" --> hostinger
github -- "Menulis Hasil Prediksi" --> supabase
openmeteo -- "Data Pasut & Cuaca" --> github
Prakiraan risiko bencana rob diperbarui setiap hari melalui tahapan pipeline otomatis berikut:
sequenceDiagram
autonumber
participant GH as GitHub Actions
participant OM as Open-Meteo API
participant DB as Supabase DB
participant API as Hostinger API
GH->>DB: Tarik Parameter Model Pasut (beta) & Koordinat Pesisir
DB-->>GH: Parameter Harmonik & Wilayah
GH->>OM: Tarik Prakiraan Cuaca, Angin, & Gelombang
OM-->>GH: Data Prakiraan Meteorologi
Note over GH: Jalankan Model Machine Learning<br>(XGBoost Classifier)
GH->>DB: Batch Insert Hasil Prediksi H+0 s.d. H+30 (predictions)
DB-->>GH: Berhasil Ditulis
API->>DB: Query Prediksi untuk Peta WebGIS / Mode Awam
DB-->>API: Data Spasial Terklasifikasi
Seluruh modul dan dokumentasi resmi tugas akhir dikompilasi secara rapi di dalam portal ini:
| Berkas Utama | Kode Blok | Deskripsi Utama |
| :--- | :---: | :--- |
| 📖 [Panduan Deployment Produksi](docs/operations/deployment.md) | `D1` | Prosedur deploy Hostinger + Supabase + cron worker. |
| 📋 [Matriks Ketertelusuran SKPL](docs/academic/skpl.md) | `D2` | Pemetaan Kebutuhan FR ke UI, API, dan berkas pengujian. |
| 🔌 [Kontrak & Referensi API Peneliti](docs/operations/api-contract.md) | `D3` | API key, rate limit, dan endpoint penelitian v1. |
| 🗄� [Diagram Skema Database (ERD)](docs/academic/erd.md) | `D4` | Diagram relasi entitas PostgreSQL/PostGIS. |
<!-- slide -->
| Berkas Panduan & Hasil | Kode Blok | Deskripsi Utama |
| :--- | :---: | :--- |
| 👤 [Panduan Pengguna per Peran](docs/operations/user-guide.md) | `D5` | Cara pakai aplikasi untuk Warga, Operator, dan Provinsi. |
| ⚙� [Runbook Operasional & Insiden](docs/operations/admin-runbook.md) | `D6` | Langkah taktis jika API down, DB down, dan prosedur backup. |
| 🧪 [Laporan Pengujian UAT](docs/academic/uat-results.md) | `D7` | Hasil pengujian skenario E2E Playwright. |
| � [Standardisasi Copywriting & Istilah](docs/review/copywriting.md) | `D8` | Penyeragaman glosarium status dan level risiko UI. |
- 🗺� Visualisasi WebGIS Interaktif: Zonasi bahaya rob 4 kelas per kelurahan dengan clustering berbasis MapLibre GL.
- 📱 Mode Awam (Geolocated EWS): Deteksi titik koordinat otomatis menggunakan sensor GPS perangkat pengguna untuk menyajikan ringkasan risiko non-teknis secara instan.
- 📸 Pelaporan Ground Truth Warga: Pengiriman laporan kejadian banjir rob terintegrasi dengan penentuan koordinat peta dan kompresi WebP gambar otomatis di sisi klien.
- 🔔 Notifikasi Multi-Kanal dengan Quiet Hours: Pengiriman alert via Email dan Push Browser dengan opsi penahanan pengiriman di jam sunyi personal.
- 🛡� Audit Logs Transparansi: Pencatatan riwayat transaksi sensitif untuk keperluan audit (otorisasi, ekspor data, validasi operator).
Note
Logika Pewarnaan Klaster Peta (EWS): Lingkaran klaster pada peta menampilkan rata-rata persentase probabilitas wilayah, namun diwarnai berdasarkan risiko tertinggi (maxRank) desa di dalamnya. Hal ini memicu kewaspadaan dini bagi pimpinan/warga sebelum melakukan zoom-in ke tingkat kelurahan individual.
- Node.js >= 20
- PHP >= 8.4 (ekstensi
pdo_pgsql,pgsqlwajib aktif) - PostgreSQL dengan ekstensi PostGIS terpasang.
- Pindah ke direktori backend:
cd backend composer install - Salin
.env.exampleke.envdan masukkan kredensial database Supabase/PostgreSQL Anda. - Jalankan migrasi database:
php artisan migrate --seed
- Jalankan server lokal:
php artisan serve
- Pindah ke direktori frontend:
cd ../frontend npm ci npm run dev - Buka browser pada alamat
http://localhost:5173.