ITS MapsMetode WebApp ITS Maps

Firebase Hosting / PWA

Metode WebApp ITS Maps

Halaman ini membedah renderer TypeScript, service worker, Firebase rules, dan pipeline AI browser RF-DETR yang menjadi basis website dan PWA.

Developer: Hanifa Septhi Larasati
Publisher: Hanifa Teams
URL: https://itstelkom.web.app/method/webapp
Updated: 21 July 2026

Firebase Hosting / PWA

Metode WebApp ITS Maps

Halaman ini membedah renderer TypeScript, service worker, Firebase rules, dan pipeline AI browser RF-DETR yang menjadi basis website dan PWA.

Semua metode Dokumentasi utama Preview PDF

Fitur

Fitur utama yang dibahas

Peta realtime

Leaflet/CARTO/OSM, marker device, POI, mode 2D/3D/satelit, dan lokasi user.

AI RF-DETR

Deteksi object dari snapshot/video, bbox, confidence, history, dan publikasi ringkasan ke RTDB.

PWA

Manifest, service worker, app-update metadata, notification click, dan install surface.

Dokumentasi

Route /documentation, /method, /method/webapp, /licence, dan print A4.

Context-aware notification

Metode peringatan perjalanan dan batas platform web

Persetujuan eksplisit

Pemantauan baru dimulai setelah pengguna mengaktifkan Peringatan perjalanan dan memberikan izin lokasi serta notifikasi. Menonaktifkan fitur menghentikan pemantauan; izin platform juga dapat dicabut kapan saja dari pengaturan browser.

Konteks GPS lokal

Saat fitur aktif, browser diminta memakai GPS berakurasi tinggi. Kecepatan, arah perjalanan, kelas moda yang bersifat perkiraan, dan dwell atau berhenti lama diturunkan di perangkat dari sampel terbaru. Klasifikasi moda adalah petunjuk kontekstual, bukan identifikasi kendaraan yang pasti.

Retry dua menit

Event konteks ringkas yang gagal dikirim dapat masuk ke outbox IndexedDB selama paling lama dua menit. Background Sync hanya dipakai sebagai progressive enhancement untuk mencoba ulang ketika koneksi kembali; dukungan dan waktu eksekusinya tetap ditentukan browser.

Suara dan background

Teks-ke-suara untuk mode motor hanya dapat diputar ketika halaman aplikasi aktif dan terlihat. Saat aplikasi berada di background atau tertutup, Web Push hanya dapat meminta notifikasi serta suara atau getaran bawaan sistem operasi, bukan TTS kustom yang andal.

Alur peringatan hanya memakai konteks turunan yang diperlukan untuk peringatan dan retry singkat. Alur ini tidak mengirim atau menyimpan raw frame kamera maupun riwayat sampel lokasi mentah.

Diagram

Alur runtime WebApp

flowchart LR
  RTDB[("Firebase RTDB")] --> Main["web/src/main.ts"]
  Main --> Map["Leaflet / MapLibre map"]
  Main --> Camera["Camera surface"]
  Camera --> AI["browserRfDetr.ts"]
  AI --> Overlay["Canvas bbox + confidence"]
  Main --> PWA["Service worker + install"]
  Main --> Docs["/documentation + /method"]

Matematika dan logika

Formulasi yang dipakai kode

Status realtime

Perangkat dianggap online jika selisih waktu heartbeat masih di bawah ambang offline.

\[\Delta t=t_{now}-t_{lastSeen}\]

\[online(d)=\begin{cases}1,&\Delta t\le T_{offline}\\0,&\Delta t>T_{offline}\end{cases}\]

Total kendaraan

Tile kendaraan menampilkan jumlah kelas yang sama di WebApp, APK, dan Windows widget.

\[N=N_{mobil}+N_{motor}+N_{bus}+N_{truk}+N_{sepeda}\]

Proyeksi bounding box

AI menggambar kotak deteksi dengan skala dari frame sumber ke canvas/tampilan.

\[x'=x\cdot\frac{W_{view}}{W_{src}},\quad y'=y\cdot\frac{H_{view}}{H_{src}}\]

\[w'=w\cdot\frac{W_{view}}{W_{src}},\quad h'=h\cdot\frac{H_{view}}{H_{src}}\]

IoU dan NMS

Deteksi ganda ditekan dengan Intersection over Union agar satu objek tidak dihitung berkali-kali.

\[IoU(A,B)=\frac{|A\cap B|}{|A\cup B|}\]

\[score'=score\cdot e^{-\frac{IoU^2}{\sigma}}\]

Grafik realtime

History grafik dibatasi ke jendela data terbaru supaya widget tetap terbaca.

\[H_t=tail_k(H_{t-1}\cup\{(t,N,color,seconds)\})\]

Jarak Haversine

Dipakai untuk memperkirakan jarak user, POI, dan device pada peta.

\[a=\sin^2\frac{\Delta\phi}{2}+\cos\phi_1\cos\phi_2\sin^2\frac{\Delta\lambda}{2}\]

\[d=2R\cdot atan2(\sqrt a,\sqrt{1-a})\]

Contoh kode yang bisa dijalankan

Contoh ini menjalankan rumus kecil yang sama konsepnya dengan kode aplikasi: freshness, total kendaraan, IoU, dan durasi lampu.

const total = car + motorcycle + bus + truck + bicycle;
const green = Math.min(120, Math.max(10, 0.85 * total + 8));

Tekan salah satu tombol Run.

Pada kode WebApp, rumus ini terlihat di browserRfDetr.ts untuk bbox/IoU dan di main.ts/windows.ts untuk status realtime, chart, jarak, dan render UI.

Screenshots

Gambar pendukung

Line-by-line source atlas

Atlas kode WebApp

Ringkasan file tetap tersedia di halaman utama. Isi kode asli dan catatan teknis per baris dimuat hanya saat diminta agar dokumentasi cepat dibuka dan tetap dapat dipelajari secara lengkap.

File Baris Baris logika Simbol utama

web/src/main.ts 22.809 21.129

web/src/browserRfDetr.ts 1.638 1.538

web/src/browserRfDetrWorker.ts 57 49

web/src/lockScreenDetector.ts 612 578

web/src/style.css 17.574 14.706

web/sw.js 289 270

web/public/sw.js 489 456

web/firebase.json 668 667 template / konfigurasi

web/database.rules.json 174 173 template / konfigurasi

web/vite.config.ts 37 33 template / konfigurasi

web/index.html 1.808 1.179 template / konfigurasi

web/src/main.ts 22.809 baris