Interactive Mall Directory

masalah

Pengunjung mal besar berlantai banyak perlu menemukan toko dan sampai ke sana, dari kiosk atau dari ponsel sendiri. Tim mal, di sisi lain, perlu menjaga data lantai, tenant, dan rute tetap terkini tanpa memanggil engineer.

pendekatan

• Rute dihitung di server dengan Dijkstra pada graf waypoint dan koridor. Rute antarlantai melewati lift, eskalator, dan tangga yang diberi bobot waktu tempuh, tidak pernah melewati lantai yang sama dua kali, dan mengabaikan segmen koridor yang akan memotong sebuah unit.
• Tampilan bawaan adalah peta 2D di atas Leaflet, dengan pencarian lewat keyboard di layar, penelusuran kategori, dan rute sekali ketuk ke fasilitas terdekat. Rute digambar dan dianimasikan lantai demi lantai.
• Tampilan 3D dengan three.js diekstrusi dari denah lantai yang sama dan baru dimuat saat dibuka, dengan karakter berjalan yang mengikuti rute. Geometri digabung dan label diambil dari satu texture atlas, sehingga tetap berjalan baik di perangkat kiosk.
• Panel admin membuat tim mal bisa mengerjakan sisanya sendiri: editor visual waypoint dan koridor, pengelola koneksi antarlantai, editor geometri 3D, perancang denah lantai, pengelolaan tenant, iklan, dan kiosk, serta dashboard kesehatan aplikasi.
• Setiap kiosk tahu posisinya, sehingga setiap rute berawal dari posisi kiosk itu. Kode QR bertanda tangan memindahkan rute ke ponsel pengunjung, dan antarmukanya tersedia dalam bahasa Inggris, Melayu, dan Mandarin.

hasil

• Berjalan di production di beberapa mal milik sebuah grup ritel besar di Malaysia, dilayani dari satu instalasi.
• Penunjuk arah 2D dan 3D di tujuh lantai, dari kiosk dan ponsel.
• Routing, geometri, dan editor-editornya tercakup oleh test suite PHPUnit dan Vitest.