Flood Forecasting and Warning System

Bagaimana kalau lokasi stasiun, riwayat muka air, dan hasil prediksi bisa dibaca dalam satu alur? Pertanyaan itu menjadi titik berangkat dashboard Flood Forecasting Warning System (FFWS). Di sini aku ingin bercerita tentang fitur yang dibangun, pilihan desainnya, dan pekerjaan di balik layar agar angka yang ditampilkan tetap bisa ditelusuri.

Proyek ini dikembangkan dalam program riset Departemen Teknik Sipil, Institut Teknologi Sepuluh Nopember. Wilayah kajiannya mencakup DAS Welang di Pasuruan dan lokasi monitoring di Surabaya. Dashboard ini merupakan prototipe monitoring dan riset.

Dashboard lokal dengan peta stasiun dan panel ringkasan. Pembacaan sensor pada screenshot berasal dari arsip lokal.

Mengenal Dashboard FFWS

Screenshot fitur berikut diambil dari build lokal dengan arsip Surabaya. Angka yang terlihat merupakan riwayat pengamatan, bukan kondisi live. Build ini menampilkan rata-rata dan rentang minimum–maksimum, sedangkan mode penyimpanan terpusat yang dibahas di bagian belakang menggunakan median valid untuk muka air.

Memilih Informasi pada Peta

Peta menjadi pintu masuk utama. Dari panel Lapisan peta, pengguna dapat mengatur nama stasiun, informasi hujan, kualitas air, batas wilayah, dan jaringan sungai. Peta dasar juga bisa dipilih sesuai kebutuhan, mulai dari jalan sampai citra satelit. Aku memisahkan kontrol ini dari informasi sensor agar pengguna bisa memilih konteks yang ingin dibaca terlebih dahulu.

Panel lapisan mengumpulkan kontrol tampilan tanpa memenuhi area utama peta.

Mencari Stasiun dan Membaca Statusnya

Saat nama stasiun sudah diketahui, pencarian lebih cepat daripada menelusuri peta satu per satu. Mengetik “Pucang” menampilkan hasil Rumah Pompa Pucang beserta status datanya. Pada contoh ini tertulis Data terlambat, sehingga pengguna sudah mendapat konteks sebelum membuka angkanya.

Hasil pencarian menampilkan nama stasiun bersama status ketersediaan datanya.

Drawer Preview

Setelah stasiun dipilih, peta mendekat ke lokasinya dan panel detail terbuka di kanan. Pengguna tetap dapat melihat hubungan antara stasiun, sungai, dan kawasan sekitarnya. Untuk Pucang, panel menyediakan pilihan kanal Pompa 1 dan Pompa 2.

Contoh pembacaan Pompa 1 menunjukkan jarak sensor ke permukaan air sekitar 342,3 cm. Dengan acuan 530 cm, tinggi muka air yang ditampilkan menjadi 187,7 cm, atau sekitar 35% dari acuan. Persentase ini mengikuti acuan konfigurasi sensor, bukan volume air yang tersimpan atau probabilitas banjir.

Lokasi dan detail sensor dibaca berdampingan. Angka pada panel berasal dari arsip, dengan pengamatan terakhir pada 22 Oktober 2026.

Menelusuri Perubahan pada Grafik

Halaman stasiun menyediakan pilihan rentang 6 jam, 24 jam, dan 7 hari, serta pilihan sensor. Pada grafik berikut, sumbu horizontal menunjukkan waktu dan sumbu vertikal menunjukkan muka air dalam meter. Garis biru menggambarkan rata-rata pengamatan, sedangkan area biru muda menunjukkan rentang minimum–maksimum pada interval agregasi.

Rentang tersebut membantu memperlihatkan variasi yang bisa tersembunyi di balik satu angka rata-rata. Bagian garis yang terputus menunjukkan jeda pembacaan yang tersedia, sehingga pengguna tidak diberi kesan bahwa kondisi air diketahui sepanjang waktu.

Riwayat 24 jam Pompa 1. Build arsip ini menampilkan interval rata-rata 15 menit dan rentang minimum–maksimum.

Mengunduh Rentang Data

Tombol Unduh data membuka pilihan tanggal awal dan akhir. Dengan begitu, pengguna dapat mengambil periode yang ingin diperiksa lagi di Excel tanpa harus menyalin angka dari grafik. Screenshot ini memperlihatkan pemilihan rentang 21–22 Oktober 2026; pengambilan gambar tidak menjalankan ekspor.

Pilihan rentang tanggal berada dekat grafik agar perpindahan dari membaca ke mengolah data tetap singkat.

Pada mode penyimpanan terpusat, unduhan memisahkan data pengamatan dan riwayat prediksi, sehingga hasil model tidak tercampur dengan pengukuran.

Melihat Prediksi Bersama Konteksnya

Ketersediaan prediksi mengikuti konfigurasi dan kesiapan data. Mode monitoring terpusat menyediakan baseline persistensi serta tren teredam untuk horizon satu sampai lima jam. Preview berdasarkan riwayat terakhir dibedakan dari prediksi yang benar-benar diterbitkan pada waktunya.

Model forecasting yang dipakai adalah tren dengan peredaman eksponensial. Aku mengambil tinggi muka air terakhir dan memperkirakan laju perubahannya dari satu jam terakhir dalam jendela input enam jam. Laju itu diteruskan ke depan, tetapi pengaruhnya makin berkurang seiring bertambahnya horizon prediksi.

Di sini, $H_t$ adalah tinggi air terakhir, $b$ adalah laju perubahan dalam cm per jam, dan $h$ adalah jarak waktu prediksi dalam jam. Parameter $\tau$ mengatur seberapa cepat pengaruh tren mereda; implementasi saat ini memakai $\tau =1$ jam. Hasil akhirnya dibatasi antara nol dan tinggi acuan sensor.

Misalnya, jika tinggi air terakhir 200 cm dan lajunya naik 10 cm per jam, prediksi satu jam ke depan sekitar 206,3 cm. Model ini tidak menganggap kenaikan akan berlanjut dengan kecepatan tetap. Perhitungan memakai riwayat muka air dari sensor yang sama; hujan dan kondisi hulu belum menjadi input.

Di Balik Layar

Frontend terbaru memakai Next.js, TypeScript, MapLibre GL, dan Recharts. Halaman diekspor secara statis, sementara data monitoring diminta melalui API FastAPI. GeoJSON menyediakan konteks batas wilayah, jaringan sungai, dan lokasi stasiun.

Sumber sensor MySQL / riwayat Welang
                  ↓
          Worker pengumpulan data
                  ↓
     Supabase PostgreSQL → FastAPI
                              ↓
                   Dashboard + GeoJSON

Worker membaca sumber sensor secara read-only dan menyimpan agregat, status sumber, serta riwayat prediksi ke penyimpanan terpusat. API masih mengakses sampel mentah untuk kebutuhan model dan unduhan. Dengan begitu, pergantian mesin API tidak mengharuskan pemindahan seluruh arsip lokal.

Untuk muka air, grafik memakai median sampel valid per lima menit. Pemeriksaannya mencakup kelengkapan timestamp, rentang sensor, duplikat, dan pembacaan yang menetap terlalu lama. Frontend menerima hasil serta statusnya dari API, sehingga aturan kalibrasi tidak perlu dihitung ulang di browser.

Bacaan Lanjutan

Untuk melihat penurunan persamaan matematis, asumsi, dan contoh perhitungan model forecasting, baca Tren Muka Air Teredam Eksponensial dengan Data Terbatas.