Rancang Bangun Frontend Iot Monitoring Berbasis Progressive Web Application: Studi Kasus Pemantauan Baku Mutu Pome

Lekatompessy, Steven Gerard Nathaniel (2026) Rancang Bangun Frontend Iot Monitoring Berbasis Progressive Web Application: Studi Kasus Pemantauan Baku Mutu Pome. Other thesis, Institut Teknologi Sepuluh Nopember.

Text 5025221045-Undergraduate_Thesis.pdf - Accepted Version Restricted to Repository staff only Download (1MB) | Request a copy

Abstract

Industri kelapa sawit menghasilkan limbah cair Palm Oil Mill Effluent (POME) yang memerlukan pengolahan dan pemantauan agar tetap memenuhi baku mutu air limbah. Praktik pemantauan yang masih mengandalkan pengambilan sampel manual menghasilkan data yang tertunda, sementara dashboard IoT yang ada umumnya belum menyediakan akses mobile, notifikasi alert operasional, dan pengelolaan akses terpusat yang dibutuhkan operator lapangan dengan konektivitas terbatas. Ketiadaan ketiganya menghambat respons cepat operator terhadap penyimpangan kondisi kolam di lapangan. Penelitian ini bertujuan merancang dan membangun frontend pada platform IoT monitoring berbasis Progressive Web Application (PWA) dengan studi kasus pemantauan baku mutu POME, yang mencakup penyajian kondisi kolam pengolahan, pengelolaan pekerjaan monitoring data sensor, visualisasi time-series, implementasi kapabilitas PWA berupa instalasi dari peramban, notifikasi alert operasional, dan akses offline terbatas, integrasi autentikasi Single Sign-On (SSO) dan otorisasi Role-Based Access Control (RBAC) IoT Portal, serta evaluasi kelayakan framework Next.js sebagai fondasi frontend. Pengembangan dilakukan dengan model iteratif dan inkremental yang selaras dengan nilai Agile, dalam tim tiga peran dengan iterasi mingguan, sedangkan evaluasi dilakukan melalui verifikasi kebutuhan fungsional dan non-fungsional, pengujian otomatis dengan Jest dan React Testing Library, audit performa Lighthouse, checklist PWA pada macOS, iOS, dan Android, lima skenario alert operasional pada deployment laboratorium dengan data sensor dan MQTT aktual, serta evaluasi komparatif performa terhadap platform ThingsBoard dan Ubidots pada kondisi jaringan terbatas. Hasil evaluasi menunjukkan seluruh kebutuhan fungsional terpenuhi (tujuh dari tujuh), seluruh kebutuhan non-fungsional tercapai, pass rate pengujian otomatis 100% dengan coverage modul kritis 95,8%, checklist PWA lulus 6 dari 6 kriteria, median Largest Contentful Paint 1,61--1,83 detik, dan kelima skenario alert lulus end-to-end dengan latensi tampil alert 2,1 detik (p95). Next.js terbukti layak sebagai fondasi frontend dengan skor Performance Lighthouse 96--100 dan bobot halaman 0,5--0,8 MB, unggul signifikan dibandingkan kedua platform pembanding pada kondisi jaringan terbatas.
====================================================================================================================================
The palm oil industry produces Palm Oil Mill Effluent (POME), which requires treatment and monitoring to stay within wastewater quality standards. Monitoring practices that still rely on manual sampling produce delayed data, while existing IoT dashboards generally lack mobile access, operational alert notifications, and centralized access management required by field operators with limited connectivity. The absence of these three capabilities slows operators' response to deviations in pond conditions. This study aims to design and develop a frontend for a Progressive Web Application (PWA)-based IoT monitoring platform with a case study of POME quality standard monitoring, covering the presentation of treatment pond conditions, the management of sensor monitoring jobs, time-series visualization, the implementation of PWA capabilities in the form of browser installation, operational alert notifications, and limited offline access, the integration of Single Sign-On (SSO) authentication and Role-Based Access Control (RBAC) authorization from the IoT Portal, and the evaluation of the feasibility of Next.js as the frontend foundation. Development followed an iterative and incremental approach aligned with Agile values, carried out by a three-role team with weekly iterations, while evaluation was conducted through functional and non-functional requirement verification, automated testing with Jest and React Testing Library, Lighthouse performance audits, a PWA checklist on macOS, iOS, and Android, five operational alert scenarios on a laboratory deployment with live sensor and MQTT data, and a comparative performance evaluation against the ThingsBoard and Ubidots platforms under constrained network conditions. The evaluation results show that all functional requirements were fulfilled (seven of seven), the non-functional requirements were met, the automated test pass rate reached 100% with 95.8% critical-module coverage, the PWA checklist passed 6 out of 6 criteria, the median Largest Contentful Paint ranged from 1.61 to 1.83 seconds, and all five alert scenarios passed end-to-end with an in-app alert display latency of 2.1 seconds (p95). Next.js proved feasible as the frontend foundation, achieving Lighthouse Performance scores of 96--100 with page weights of 0.5--0.8 MB, significantly outperforming both comparison platforms under constrained network conditions.

Item Type:	Thesis (Other)
Uncontrolled Keywords:	Frontend IoT, Next.js, Pemantauan baku mutu, POME, Progressive Web Application IoT frontend, Next.js, POME, Progressive Web Application, Quality standard monitoring
Subjects:	T Technology > T Technology (General) > T385 Visualization--Technique T Technology > T Technology (General) > T57.5 Data Processing T Technology > T Technology (General) > T58.6 Management information systems T Technology > T Technology (General) > T58.64 Information resources management
Divisions:	Faculty of Intelligent Electrical and Informatics Technology (ELECTICS) > Informatics Engineering > 55201-(S1) Undergraduate Thesis
Depositing User:	Steven Gerard Nathaniel Lekatompessy
Date Deposited:	27 Jul 2026 03:21
Last Modified:	27 Jul 2026 03:21
URI:	http://repository.its.ac.id/id/eprint/137654

Actions (login required)

View Item