Pengembangan User Interface Aplikasi S2p-mobile Hse Berbasis Ionic Framework pada Fitur Login, Panic Button, dan Notifikasi

Abstract

Penelitian ini membahas implementasi sisi frontend aplikasi S2P-Mobile, yang mencakup pengelolaan antarmuka pengguna, logika interaksi, integrasi API, serta pemanfaatan fitur perangkat menggunakan Ionic Framework. Pada aplikasi S2P-Mobile, sebuah aplikasi yang digunakan untuk mendukung digitalisasi sistem Health, Safety, and Environment (HSE) di PT Sumber Segara Primadaya (S2P). Pengembangan dilakukan sebagai bagian dari kegiatan magang di PT Nocola IoT Solution, dengan fokus pada tiga fitur utama, yaitu halaman login dengan CAPTCHA, fitur Panic Button untuk pelaporan darurat, serta sistem notifikasi real-time. Seluruh proses pengembangan menggunakan Ionic Framework berbasis Angular dan Capacitor untuk mendukung kemampuan lintas platform pada perangkat Android dan iOS. Metode pengembangan yang digunakan adalah Agile Development yang diimplementasikan dalam tiga sprint utama. Setiap sprint mencakup perencanaan, implementasi antarmuka, integrasi logika frontend, dan pengujian fungsional. Desain UI/UX diperoleh dari tim desain melalui Figma dan diadaptasi secara modular agar mudah diuji serta dapat berfungsi stabil di berbagai ukuran layar. Pengujian fungsional dilakukan menggunakan simulator iOS melalui Xcode dan perangkat fisik iPhone XR untuk memastikan konsistensi tampilan, akurasi interaksi antarmuka, serta respons aplikasi terhadap fitur perangkat seperti GPS dan penyimpanan lokal. Hasil pengujian menunjukkan bahwa seluruh fitur berjalan sesuai desain dan spesifikasi. Halaman login dengan CAPTCHA berhasil memvalidasi input pengguna dan menampilkan elemen antarmuka secara responsif. Fitur Panic Button mampu menampilkan form secara stabil serta memperoleh koordinat lokasi perangkat dengan akurat melalui integrasi Capacitor Geolocation. Sistem notifikasi real-time dapat menampilkan daftar pesan, memperbarui status notifikasi, dan menyimpan data secara lokal sehingga tetap dapat diakses meski tanpa koneksi internet. Penelitian ini menyimpulkan bahwa penggunaan Ionic Framework dan Angular terbukti efektif dalam pengembangan aplikasi lintas platform yang membutuhkan integrasi fitur perangkat keras. Selain itu, penerapan metode Agile membantu proses pengembangan menjadi lebih terstruktur dan adaptif. Kegiatan magang ini juga memberikan manfaat akademik dan profesional bagi penulis, terutama dalam memahami penerapan teori perkuliahan dalam lingkungan industri serta meningkatkan keterampilan teknis, komunikasi, dan pemecahan masalah dalam pengembangan aplikasi mobile modern.