Rancang Bangun Antarmuka Aplikasi Webgis berbasi React dan Vite untuk Sistem Informasi Ketahanan Pangan dan Mitigasi Risiko Pertanian
Abstract
Sektor pertanian di Kabupaten Wonosobo menghadapi kendala dalam integrasi data serta penyajian informasi yang masih tersebar sehingga menyulitkan pengguna dalam memahami kondisi wilayah secara menyeluruh. Penelitian ini bertujuan untuk mengembangkan antarmuka WebGIS berbasis React dan Vite sebagai media penyajian informasi pertanian yang terstruktur. Metode yang digunakan adalah prototype melalui tahapan communication, quick plan, modeling, construction, serta deployment dan feedback. Data yang digunakan meliputi batas administrasi, kemiringan lereng, curah hujan, dan harga komoditas. Evaluasi sistem dilakukan melalui pengujian usability menggunakan System Usability Scale (SUS) serta validasi menggunakan User Acceptance Testing (UAT). Hasil pengujian menunjukkan nilai SUS sebesar 76,75 yang termasuk dalam kategori acceptable serta seluruh fitur sistem dapat berjalan sesuai kebutuhan pengguna. Sistem yang dikembangkan mampu menyajikan informasi secara terstruktur dan membantu pengguna dalam memahami kondisi pertanian serta mendukung pengambilan keputusan. Kata kunci— webgis, react, vite, pertanian, mitigasi risiko
Downloads
References
[1] M. G. K. Wijaya, I. Destiyani, and R. Rahayu, “Identifikasi Dampak Perubahan Suhu Pada Dataran Tinggi Dieng, Jawa Tengah,” *J. Ekol. Masy. dan Sains*, vol. 5, no. 1, pp. 19–30, 2024, doi: 10.55448/ems.
[2] W. M. Siagian, G. V. Pardosi, W. A. Manalu, R. A. Saptati, and A. B. Santoso, “Hubungan Harga Komoditas Hortikultura Antar Pasar di Provinsi Sumatera Utara, Indonesia,” *Agro Bali Agric. J.*, vol. 6, no. 3, pp. 670–680, Nov. 2023, doi: 10.37637/ab.v6i3.1358.
[3] J. [Informasi referensi tidak lengkap].
[4] A. Saban and R. N. Na’atonis, “Sistem Informasi Geografis Pemetaan Lahan Pertanian Di Kecamatan Taebenu,” *JITET (Jurnal Informatika dan Teknik Elektro Terapan)*, vol. 3, no. 4, pp. 165–172, 2020.
[5] C. Willmes *et al*., “The Technology Stack and System Architecture of the University of Cologne Virtual Campus,” *Int. Arch. Photogramm. Remote Sens. Spat. Inf. Sci. - ISPRS Arch.*, vol. 48, no. 4/W11-2024, pp. 153–160, 2024, doi: 10.5194/isprs-archives-XLVIII-4-W11-2024-153_2024.
[6] T. A. Rizzi, R. A. Abdillah, Y. E. Yancandra, and M. Wijaya, “Implementasi React Vite dalam Pengembangan Antarmuka Sistem,” *Jurnal Processor*, vol. 20, no. 1, pp. 121–130, 2025.
[7] A. R. Annaram, “Leveraging React Components in Business Process Management (BPM) Applications,” *J. Comput. Commun.*, vol. 12, no. 4, pp. 86–94, 2024, doi: 10.4236/jcc.2024.124008.
[8] K. V. Vlasenko *et al*., “UI/UX Design of Educational On-line Courses,” *CTE Workshop Proc.*, vol. 9, pp. 184–199, 2022.
[9] C. Diehl *et al*., “Defining Recommendations to Guide User Interface Design: Multimethod Approach,” *JMIR Hum. Factors*, vol. 9, no. 3, pp. 1–12, 2022, doi: 10.2196/37894.
[10] R. Nacheva and A. Jansone, “Usability Evaluation of Business Process Modelling Tools Through Software Quality Metrics,” *Balt. J. Mod. Comput.*, vol. 8, no. 4, pp. 534–542, 2021, doi: 10.22364/BJMC.2020.8.4.04.
[11] E. N. Hayati, “Artificial Intelligence in Web-Based Geographic Information Systems: A Cross-Disciplinary Review,” 2024.
[12] L. Battistella, F. Gianoli, M. Minghini, and G. Duveiller, “WebGIS: Status, Trends and Potential Uptake in Agroecology,” in *Drones, Geographic Information Technologies, and Agroecology: Contributions to Technological Sovereignty*, pp. 151–173, 2022, doi: 10.1201/9780429052842-10.
[13] V. Komperla, P. Deenadhayalan, P. Ghuli, and R. Pattar, “React: A Detailed Survey,” *Indones. J. Electr. Eng. Comput. Sci.*, vol. 27, no. 1, pp. 1710–1717, 2022, doi: 10.11591/ijeecs.v26.i3.pp1710-1717.
[14] M. A. Varma, “The Evolution of Frontend Architecture: From Virtual DOM to Server Components,” *Int. J. Comput. Eng. Technol.*, vol. 16, no. 1, pp. 3714–3732, 2025, doi: 10.34218/IJCET_16_01_256.
[15] B. Lando and W. Hasselbring, “Toward Bundler-Independent Module Federations: Enabling Typed Micro Frontend Architectures,” in *Proc. 2025 IEEE 22nd Int. Conf. Softw. Archit. (ICSA-C)*, pp. 36–40, 2025, doi: 10.1109/ICSA-C65153.2025.00013.
[16] Vinueza-Martinez, M. Correa-Peralta, R. Ramirez-Anormaliza, O. Franco Arias, and D. Vera Paredes, “Geographic Information Systems (GISs) Based on WebGIS Architecture: Bibliometric Analysis of the Current Status and Research Trends,” *Sustainability*, vol. 16, no. 15, 2024, doi: 10.3390/su16156439.
[17] B. Faghih, M. R. Azadehfar, and S. D. Katebi, “User Interface Design for E-Learning Software,” *Int. J. Soft Comput. Softw. Eng.*, vol. 3, no. 3, pp. 786–794, 2013, doi: 10.7321/jscse.v3.n3.119.
[18] A. Fuggetta, “Software Process,” 2000, doi: 10.1145/336512.336521.
[19] A. Roman, *Black-Box Testing Techniques*, 2018.
[20] Zulkarnaini, A. Firdhayanti, T. Taufik, and B. Bachry, “User Acceptance Testing through Blackbox Evaluation for Corn Distribution Information System,” *bit-Tech*, vol. 6, no. 2, pp. 208–215, 2023, doi: 10.32877/bt.v6i2.1065.
[21] M. Hyzy *et al*., “System Usability Scale Benchmarking for Digital Health Apps: Meta-analysis,” *JMIR mHealth uHealth*, vol. 10, no. 8, pp. 1–11, 2022, doi: 10.2196/37290.
