Perancangan dan Implementasi Antarmuka Web Interaktif untuk Visualisasi dan Analisis Data Monitoring Kualitas Air Berbasis IoT

Rizky, Naufal Khairul (2025) Perancangan dan Implementasi Antarmuka Web Interaktif untuk Visualisasi dan Analisis Data Monitoring Kualitas Air Berbasis IoT. Project Report. [s.n.], [s.l.]. (Unpublished)

Text 5025221127-Project_Report.pdf - Accepted Version Restricted to Repository staff only Download (3MB) | Request a copy

Abstract

Laporan kerja praktik ini membahas proses perancangan dan implementasi antarmuka web interaktif untuk LecSens, sebuah sistem pemantauan kualitas air berbasis Internet of Things (IoT) yang dirancang untuk mendeteksi kontaminan seperti timbal dan mikroplastik secara real-time. Pengembangan difokuskan pada pembuatan antarmuka frontend menggunakan Next.js 13 (App Router), TypeScript, dan Redux Toolkit guna menciptakan sistem yang modern, skalabel, dan mudah dipelihara. Modul utama yang dikembangkan meliputi Dashboard Monitoring dengan visualisasi analisis siklus voltametri menggunakan ApexCharts, serta sistem manajemen untuk pengguna, tenant, aset, dan sensor. Implementasi kontrol akses berbasis peran (Role-Based Access Control) juga diterapkan guna memastikan keamanan data dan diferensiasi hak akses antara SUPERADMIN, ADMIN, dan USER. Hasil pengujian membuktikan bahwa fungsionalitas utama berhasil diimplementasikan sesuai skenario. Kualitas aplikasi divalidasi melalui pengujian kebergunaan (usability) expert review yang menghasilkan skor rata-rata 4.66 dari 5, serta lolos uji kompatibilitas di berbagai peramban dan perangkat. Evaluasi teknis Google Lighthouse menunjukkan skor rata-rata Kinerja (Performance) 91,1 dan Aksesibilitas 83,6. Aspek keamanan dasar sisi klien dan kualitas kode terbukti sangat baik dengan skor Best Practices yang konsisten di angka 93–100, yang mengonfirmasi tidak adanya kerentanan library atau praktik yang buruk. Meskipun Halaman Pelanggaran (skor Kinerja 78) teridentifikasi sebagai area optimasi, hasil keseluruhan membuktikan antarmuka LecSens telah fungsional dan menyajikan data saintifik berupa voltametri sehingga menyediakan alat bantu yang siap pakai untuk mendukung pengelolaan kualitas air.
================================================================================================================================
This internship report discusses the design and implementation process of an interactive web interface for LecSens, an Internet of Things (IoT)-based water quality monitoring system designed to detect contaminants such as lead and microplastics in real time. The development focuses on building the frontend interface using Next.js 13 (App Router), TypeScript, and Redux Toolkit to create a system that is modern, scalable, and easy to maintain. The main modules developed include a Monitoring Dashboard with voltammetry cycle analysis visualizations using ApexCharts, as well as management systems for users, tenants, assets, and sensors. Role-Based Access Control (RBAC) was also implemented to ensure data security and enforce differentiated access rights between SUPERADMIN, ADMIN, and USER. Testing results show that the core functionalities were successfully implemented according to the defined scenarios. The application’s quality was validated through usability expert review, resulting in an average score of 4.66 out of 5, and it also passed compatibility testing across various browsers and devices. Technical evaluation using Google Lighthouse demonstrated average scores of 91.1 for Performance and 83.6 for Accessibility. Client-side security aspects and code quality proved to be excellent, with consistent Best Practices scores between 93–100, confirming the absence of library vulnerabilities or poor practices. Although the Violations Page (Performance score 78) was identified as an area for optimization, the overall results confirm that the LecSens interface is fully functional and capable of presenting scientific voltammetry data, providing a ready-to-use tool to support water quality management.

Item Type:	Monograph (Project Report)
Uncontrolled Keywords:	IoT, Kualitas Air, LecSens, Next.js, Visualisasi Data, Voltametri
Subjects:	T Technology > T Technology (General) > T57.5 Data Processing T Technology > T Technology (General) > T58.5 Information technology. IT--Auditing T Technology > T Technology (General) > T58.64 Information resources management
Divisions:	Faculty of Information and Communication Technology > Informatics > 55201-(S1) Undergraduate Thesis
Depositing User:	Naufal Khairul Rizky
Date Deposited:	15 Dec 2025 04:26
Last Modified:	15 Dec 2025 04:26
URI:	http://repository.its.ac.id/id/eprint/128951

Actions (login required)

View Item