Pengembangan Front-End Aplikasi Lomba Mewarnai menggunakan HTML Canvas dengan Library React JS
DOI:
https://doi.org/10.26418/jp.v11i2.97723Keywords:
Mewarnai Digital, Lomba Mewarnai, HTML Canvas, React Js, Pengembangan Front-EndAbstract
Aplikasi mewarnai digital (digital drawing) merupakan platform interaktif yang memungkinkan anak-anak mewarnai secara langsung melalui antarmuka web yang dirancang menggunakan HTML Canvas dan React JS. Front-end aplikasi ini berperan penting sebagai jembatan interaktif antara pengguna dan sistem back-end, sehingga kegiatan mewarnai dapat dilakukan secara digital. Kegiatan mewarnai sering dijadikan ajang lomba yang telah popular di kalangan anak-anak. Namun, lomba mewarnai yang biasanya dilakukan secara konvensional memiliki beberapa kendala, seperti resiko kerusakan pada kertas karya peserta, waktu penjurian yang lama, serta kurangnya transparansi dalam pengumuman hasil lomba. Untuk mengatasi masalah tersebut, penelitian ini mengembangkan platform lomba mewarnai berbasis website dengan fokus pada perancangan front-end yang mendukung fungsionalitas mewarnai digital. Pengembangan dilakukan dengan pendekatan metode Agile. Hasil penelitian menunjukkan bahwa aplikasi yang dikembangkan telah berfungsi dengan baik, sebagaimana diuji menggunakan metode black box testing. Pengujian System Usability Scale (SUS) menunjukkan skor rata-rata 83,5 untuk peserta dan 90 untuk panitia, dengan skor keseluruhan 86,75 yang mengindikasikan bahwa aplikasi ini sangat berhasil dan layak digunakan sebagai platform lomba mewarnai digital.References
Rizaldy, R., & Dirgahayu, R. T. (2020). Pengembangan Front-End Sistem Informasi Pendataan Pendar Foundation Yogyakarta.
Jie, B., Eric, E., Mervyn, D., Anggrianto, V., & Kelvin, K. (2023). Pemanfaatan Dan Dampak Penggunaan Teknologi Informasi Pada Bidang Sosial. Journal of Information System and Technology, 4(2), 392–397. https://doi.org/10.37253/joint.v4i2.6298
Maihani, S., Khairani, C., Ahmad Zaki Yamani, S., & Nur, I. T. (2023). PEMBERDAYAAN MASYARAKAT MELALUI KREATIVITAS LOMBA MEWARNAI TINGKAT SEKOLAH DASAR. Community Development Journal, 4(2), 5108–5113
Prawastiyo, C. A., & Hermawan, I. (2020). Pengembangan Front-End Website Perpustakaan Politeknik Negeri Jakarta Dengan Menggunakan Metode UCD (User Centered Design) Info Artikel. 1(2), 1–11. https://doi.org/10.26623/jisl
Titian Lestari, D., & Ayu Megawaty, D. (2022). SISTEM INFORMASI PKK BERBASIS WEBSITE MENGGUNAKAN FRAMEWORK CODEIGNITER (STUDI KASUS: KAMPUNG PURWOEJO). Jurnal Informatika Dan Rekayasa Perangkat Lunak (JATIKA), 3(2), 244–253. http://jim.teknokrat.ac.id/index.php/informatika
Nurhasanah, A. (2024). Definisi Perlombaan Menurut Para Ahli. Https://Redasamudera.Id/Definisi-Perlombaan-Menurut-Para-Ahli/.
Saullila, A., Aulia Rahma, A., Prasanti, A., Emorad, A. I., Lestari, C. A., Qonita, D. N., Syahidah, H., Azizah, M., & Fadhilah, N. (n.d.). Seminar Nasional Pengabdian Masyarakat LP UMJ Website: http://jurnal.umj.ac.id/index.php/semnaskat KEGIATAN LOMBA MEMPERINGATI HARI KEMERDEKAAN INDONESIA YANG KE-77. http://jurnal.umj.ac.id/index.php/semnaskat
Taufik, A., Kom, S., Bernadus Gunawan Sudarsono, M., & Kom, M. (n.d.). Pengantar Teknologi Informasi.
KBBI. (n.d.). Arti Kata Mewarnai di Kamus Besar Bahasa Indonesia (KBBI). Https://Kbbi.Lektur.Id/Mewarnai.
Aryani, D., & Zaly, N.W. “Pengaruh Terapi Bermain Mewarnai Gambar Terhadap Kecemasan Hospitaslisasi pada Anak Prasekolah.†Jurnal Akademika Baiturrahim Jambi
Chastro, C., Darmawan, E., Kom, S., & #2, M. T. (2020). Perbandingan Pengembangan Front End Menggunakan Blade Template dan Vue Js (Vol. 2).
Hadi, A. P., Kom, S., & Kom, M. (2024). Mengenal Frontend Development.
Macklon, F., Viggiato, M., Bezemer, P., Romanova, N., Buzon, C., Paas, D., & Bezemer, C.-P. (2022). A Taxonomy of HTML5 Canvas Bugs. https://doi.org/10.48550/arXiv.2201.07351
Deo, R., Putra, E., & Iuliano, C. (2022). Rancang Bangun Multiplayer Fighting Game Sederhana Berbasis Website Dengan HTML5 Canvas Menggunakan Metode Pengembangan MDLC. https://www.researchgate.net/publication/364986289
Sulistyorini, T., Sova, E., & Ramadhan, R. (2022). PEMANTAUAN KASUS PENYEBARAN COVID-19 BERBASIS WEBSITE MENGGUNAKAN FRAMEWORK REACT JS DAN API. 1(4). www.corona.jakarta.go.id.
Panjaitan, J., & Pakpahan, A. F. (2021). Perancangan Sistem E-Reporting Menggunakan ReactJS dan Firebase. Jurnal Teknik Informatika Dan Sistem Informasi, 7(1). https://doi.org/10.28932/jutisi.v7i1.3098
Nur Ichsanudin, M., Yusuf, M., Jurusan Rekayasa Sistem Komputer, S., Teknik Industri, J., AKPRIND Yogyakarta, I., & Artikel, R. (2022). PENGUJIAN FUNGSIONAL PERANGKAT LUNAK SISTEM INFORMASI PERPUSTAKAAN DENGAN METODE BLACK BOX TESTING BAGI PEMULA INFO ARTIKEL ABSTRAK. 1(2), 1–8. https://doi.org/10.55123
Budiarto, S. P., & R.L, D. Y. (2023). Evaluasi Usability pada Aplikasi Jemput Sampah Online Desa Rejosari Menggunakan Metode System Usability Scale (SUS). Jurnal Eksplora Informatika, 13(1), 100–112. https://doi.org/10.30864/eksplora.v13i1.822
Kurniawan, A. (2023). SIMPEL (Sistem Informasi Manajemen Pelatihan) Internal BRI Menggunakan Metode Agile dengan Model Extreme Programming dan Algoritma Brute Force. 7(2). https://doi.org/10.35870/jti
