Journal of Digital Business and Technology Innovation (DBESTI) Vol.
2 No.
2 2025, 198-205
Journal of Digital Business and Technology Innovation (DBESTI) https://journal.
id/index.
php/DBESTI P-ISSN: 3047-1028 E-ISSN: 3032-775X
PENERAPAN REACTJS DALAM PENGEMBANGAN FRONT-END APLIKASI
KOMUNITAS ZEROMATERIAL
Fakhirul Akmal1.
Nasrul2 Teknik Informatika.
Sekolah Tinggi Teknologi Terpadu Nurul Fikri Jakarta Selatan.
DKI Jakarta.
Indonesia 12640 fakh21236ti@student.
id, nasrul@nurulfikri.
Abstract The climate crisis and ongoing environmental degradation have prompted the establishment of ZeroMaterial, a community dedicated to forest conservation and sustainable environmental campaigns.
To support the communityAos collaborative activities in a digital environment, a responsive and functional web-based platform is essential.
This study aims to develop a community-oriented web application using the ReactJS framework to facilitate environmental campaigns and fundraising The development process follows the Rapid Application Development (RAD) approach, emphasizing rapid iterations and active user involvement at each stage.
The main features developed include campaign management and donation The application was built using ReactJS and Tailwind CSS, and integrated with a REST API as its data provider.
Testing results indicate that all features operated correctly, achieving a 100% success rate in Black Box Testing.
Furthermore.
User Acceptance Testing (UAT) involving 20 respondents yielded an acceptance rate of 94.
Although several minor issues were identified related to interface responsiveness, the application is considered feasible and effective in enhancing the collaborative efforts of the ZeroMaterial community in environmental conservation through digital platforms.
Keywords: Environmental Campaign.
Rapid Application Development.
ReactJS.
Web Application.
ZeroMaterial Abstrak Krisis iklim dan kerusakan lingkungan mendorong terbentuknya komunitas ZeroMaterial yang bergerak dalam bidang pelestarian hutan dan kampanye berkelanjutan.
Untuk mendukung aktivitas kolaboratif komunitas secara digital, diperlukan platform berbasis web yang responsif dan fungsional.
Penelitian ini bertujuan untuk mengembangkan aplikasi komunitas berbasis website menggunakan framework React JS guna memfasilitasi kampanye dan pengumpulan donasi.
Pengembangan aplikasi dilakukan dengan pendekatan Rapid Application Development (RAD) yang menekankan pada iterasi cepat dan keterlibatan pengguna secara aktif dalam setiap tahapannya.
Fitur utama yang dikembangkan meliputi pengelolaan kampanye dan donasi.
Aplikasi dibangun dengan menggunakan ReactJS.
Tailwind CSS, serta terintegrasi dengan REST API sebagai penyedia data.
Hasil pengujian menunjukkan bahwa seluruh fitur berfungsi sesuai skenario dalam Black Box Testing dengan tingkat keberhasilan 100%, dan pengujian User Acceptance Testing (UAT) terhadap 20 responden menghasilkan tingkat penerimaan sebesar 94,4%.
Meskipun terdapat kekurangan minor pada aspek responsivitas, aplikasi dinilai layak digunakan dan mampu meningkatkan efektivitas kolaborasi komunitas ZeroMaterial dalam upaya pelestarian lingkungan secara digital.
Kata kunci: Aplikasi Web.
Kampanye Lingkungan.
Rapid Application Development.
ReactJS.
ZeroMaterial PENDAHULUAN Isu lingkungan seperti perubahan iklim, deforestasi, dan degradasi ekosistem menjadi sorotan global karena memberikan dampak serius terhadap keberlangsungan hidup manusia serta keseimbangan bumi.
Dalam konteks ini, hutan berperan sebagai penyimpan karbon, pelindung keanekaragaman hayati, dan penopang stabilitas lingkungan .
Oleh karena itu, pengelolaan hutan secara bijak telah diamanatkan dalam Undang-Undang Nomor 41 Tahun Untuk menjawab tantangan lingkungan yang semakin kompleks, banyak muncul gerakan dan komunitas yang bergerak dalam pelestarian lingkungan.
Salah satunya adalah ZeroMaterial, sebuah komunitas yang berfokus pada kolaborasi antara pelaku kampanye lingkungan, penggalang dana, dan masyarakat luas melalui ruang digital.
Meski memiliki visi yang kuat, komunitas ZeroMaterial masih menghadapi tantangan teknis, seperti ketergantungan Diterima 10 Juli 2025.
Direvisi 1 Desember 2025.
Diterima untuk publikasi 1 Desember 2025 199 | Journal of Digital Business and Technology Innovation (DBESTI) Vol.
2 No.
2 November 2025 pada media sosial yang tersebar, kurangnya integrasi antar data kampanye, serta keterbatasan dalam hal transparansi pengelolaan donasi.
Kondisi ini menghambat efektivitas kolaborasi dan pelaksanaan aksi-aksi lingkungan.
Untuk mengatasi hal tersebut, dibutuhkan sebuah platform digital yang terpusat, fungsional, dan mudah diakses oleh semua anggota komunitas.
Solusi ini dapat diwujudkan melalui pemanfaatan teknologi web, terutama dengan menerapkan framework modern seperti ReactJS.
Dalam konteks pengembangan aplikasi web, front-end memainkan peran penting sebagai antarmuka yang berinteraksi langsung dengan pengguna.
Front-end merupakan bagian dari aplikasi web yang berfungsi sebagai antarmuka dan berhubungan langsung dengan pengguna.
Bagian ini mencakup elemen-elemen visual yang dilihat dan digunakan oleh pengguna saat mengakses situs web melalui peramban.
Dengan memanfaatkan teknologi seperti HTML.
CSS, dan JavaScript, front-end dapat membangun antarmuka pengguna (User Interfac.
yang menarik, interaktif, serta responsif .
Salah satu teknologi utama yang digunakan dalam pengembangan front-end adalah JavaScript, bahasa pemrograman yang umum dipakai untuk menciptakan interaktivitas pada halaman web.
JavaScript memungkinkan elemen-elemen halaman untuk diubah secara dinamis tanpa perlu memuat ulang seluruh halaman.
JavaScript merupakan bahasa pemrograman yang umum digunakan untuk meningkatkan interaktivitas pada halaman web, khususnya di sisi klien.
Hal ini memberikan pengalaman pengguna yang lebih baik dan mendukung manipulasi elemen melalui Document Object Model (DOM) .
Dalam penelitian ini, penulis menggunakan ReactJS, framework JavaScript yang dirancang untuk membangun antarmuka pengguna dengan pendekatan berbasis ReactJS adalah sebuah framework JavaScript yang dikembangkan oleh Jordan Walke.
React memungkinkan pengembang membangun UI secara modular dan efisien, dengan fitur virtual DOM yang memungkinkan pembaruan halaman dilakukan secara cepat tanpa mengganggu keseluruhan struktur halaman .
Dengan konsep komponen yang dapat digunakan kembali.
React sangat cocok untuk membangun aplikasi berskala besar yang menuntut konsistensi, kecepatan, dan kemudahan pemeliharaan .
Agar tampilan antarmuka dapat dibangun dengan cepat dan tetap fleksibel, penelitian ini juga menggunakan Tailwind CSS, sebuah kerangka kerja utility-first.
Tailwind disebut sebagai framework CSS yang bersifat utility-first dan dirancang untuk mempercepat pembuatan desain antarmuka .
Dengan menyediakan berbagai kelas utilitas langsung di HTML.
Tailwind memungkinkan proses desain menjadi lebih efisien, tanpa perlu membuat file CSS yang panjang dan kompleks.
Framework ini sangat cocok untuk prototipe cepat dan tetap dapat disesuaikan secara bebas.
Selain itu, interaksi antara antarmuka pengguna .
dengan data disediakan melalui REST API, yang memungkinkan komunikasi antara sistem frontend dengan Kepanjangan dari REST API adalah Representational State Transfer Application Programming Interface .
REST API menggunakan protokol HTTP untuk bertukar data antara aplikasi dan server.
Dalam konteks aplikasi ZeroMaterial.
REST API digunakan untuk mengambil data kampanye, donasi, dan pengguna dari server eksternal yang telah tersedia, sehingga ReactJS dapat menampilkan data tersebut secara dinamis.
Melalui penelitian ini.
ReactJS dimanfaatkan untuk membangun antarmuka pengguna pada aplikasi komunitas ZeroMaterial permasalahan teknis yang ada.
Aplikasi ini dikembangkan secara terstruktur dan difokuskan pada fitur kampanye serta pengelolaan donasi.
Evaluasi dilakukan berdasarkan fungsifungsi utama yang diakses oleh pengguna melalui REST API.
Penelitian ini tidak mencakup integrasi sistem backend secara penuh, dan belum melibatkan fitur relawan atau sistem pembayaran otomatis.
Meskipun demikian, penelitian ini diharapkan dapat memberikan kontribusi nyata dalam integrasi teknologi web modern untuk memperkuat gerakan komunitas berbasis lingkungan secara digital dan kolaboratif.
METODE PENELITIAN
Penelitian ini merupakan jenis Research and Development (R&D) yang difokuskan pada pengembangan aplikasi frontend berbasis website untuk mendukung aktivitas digital komunitas ZeroMaterial.
Tujuan dari pengembangan ini adalah menciptakan platform kampanye dan penggalangan dana yang efisien, terpusat, serta mudah diakses oleh masyarakat umum maupun pelaku kampanye.
Dengan memanfaatkan teknologi ReactJS dan Tailwind CSS, penelitian ini diarahkan untuk menghasilkan antarmuka yang interaktif, modular, dan dapat digunakan secara nyata oleh komunitas.
Pendekatan yang digunakan dalam penelitian bersifat kuantitatif dengan mengukur keberhasilan sistem berdasarkan pengujian fungsionalitas Black Box Testing serta penerimaan pengguna melalui metode UAT.
Untuk menunjang kecepatan dan fleksibilitas pengembangan, digunakan metode RAD, yang memungkinkan proses pembuatan prototipe secara cepat dengan keterlibatan aktif dari pengguna dalam proses validasi.
1 Tahapan Penelitian Penelitian dilaksanakan melalui tahapan-tahapan sistematis untuk memastikan pengembangan aplikasi dilakukan berdasarkan kebutuhan nyata komunitas ZeroMaterial serta mengikuti prinsip-prinsip pengembangan perangkat lunak modern yang bersifat iteratif dan partisipatif.
Setiap tahapan disusun secara logis untuk mendukung proses desain hingga implementasi aplikasi.
200 | Journal of Digital Business and Technology Innovation (DBESTI) Vol.
2 No.
2 November 2025 Implementasi Penyempurnaan aplikasi berdasarkan hasil evaluasi testing Versi final dari aplikasi disiapkan untuk digunakan secara terbatas oleh komunitas.
Evaluasi Penilaian akhir terhadap kualitas aplikasi dari segi performa, usability, dan relevansi fitur dengan kebutuhan Evaluasi ini menjadi dasar untuk mengukur keberhasilan sistem dan arah pengembangan lebih lanjut.
2 Metode Pengumpulan Data Pengumpulan data dilakukan dengan dua metode utama, yaitu observasi dan kuesioner:
Gambar 1.
Tahapan Penelitian Pada Gambar 1 menunjukkan skema langkah-langkah yang akan dilakukan sesuai dengan tujuan penelitian.
Proses tahapan penelitian ini melibatkan alur yang diuraikan secara rinci, sehingga penelitian dilaksanakan dengan jelas dan Tahapan-tahapan tersebut meliputi:
Studi Literatur Melibatkan kajian terhadap referensi ilmiah dan teknis yang berkaitan dengan pengembangan aplikasi komunitas, pemanfaatan ReactJS, serta metode RAD.
Langkah ini bertujuan membangun pemahaman terhadap teknologi yang digunakan serta merumuskan pendekatan terbaik untuk menjawab kebutuhan komunitas.
Analisis Melibatkan identifikasi kebutuhan sistem baik fungsional maupun non-fungsional.
Kebutuhan ini dirumuskan berdasarkan kondisi dan kegiatan komunitas ZeroMaterial.
Prototipe Merupakan pembuatan rancangan awal aplikasi web sebagai model visual untuk memperoleh umpan balik awal dari pengguna Konstruksi Tahapan pembangunan aplikasi dalam bentuk beta version, di mana fitur-fitur utama diimplementasikan untuk diuji secara fungsional.
Testing Meliputi pengujian terhadap fitur-fitur utama secara internal oleh pengembang, serta pengujian eksternal awal oleh pengguna komunitas.
Observasi Observasi dilakukan secara langsung terhadap kegiatan komunitas ZeroMaterial, terutama pada aspek kampanye, donasi, dan kolaborasi antar anggota.
Tujuannya adalah memahami konteks penggunaan sistem serta memperoleh insight mengenai kebutuhan digitalisasi dari kegiatan Kuesioner Kuesioner disebarkan kepada anggota komunitas ZeroMaterial yang menjadi pengguna uji coba aplikasi.
Pertanyaan dalam kuesioner mencakup kemudahan penggunaan, pemanfaatan fitur, kejelasan informasi, dan kepuasan terhadap antarmuka yang dikembangkan.
3 Metode Pengembangan Metode pengembangan yang digunakan adalah RAD, yaitu metode yang berfokus pada pembuatan aplikasi yang cepat melalui pendekatan berbasis prototipe berulang .
Metodologi ini cocok digunakan ketika tim dihadapkan pada kebutuhan pengembangan yang cepat, fleksibel, serta menginginkan hasil akhir yang positif, dengan penyesuaian pengembangan .
Model ini dipilih karena mendukung kecepatan dalam pengembangan aplikasi melalui pendekatan iteratif dan partisipatif.
Pengembangan dilakukan dengan menekankan pada pembuatan prototipe secara cepat, melibatkan pengguna secara langsung dalam proses validasi, mempercepat siklus perbaikan dari umpan RAD dianggap cocok karena aplikasi yang dikembangkan hanya berfokus pada bagian front-end dan membutuhkan banyak validasi visual serta fungsional dari pengguna komunitas.
4 Metode Pengujian dan Evaluasi Pengujian terhadap aplikasi dilakukan secara sistematis dengan pendekatan sebagai berikut:
201 | Journal of Digital Business and Technology Innovation (DBESTI) Vol.
2 No.
2 November 2025 Black Box Testing Teknik ini digunakan oleh pengembang untuk menguji fungsi aplikasi tanpa melihat struktur kode internal.
Salah satu keuntungan dari metode ini adalah kemudahan pengujiannya, karena hanya membutuhkan batas nilai minimum dan batas nilai maksimum dari data yang diharapkan, yang memungkinkan identifikasi kelemahan sistem dan memastikan hasil sesuai dengan input setelah data dieksekusi .
User Acceptance Testing (UAT) Tahap ini menguji sistem dari sisi pengguna untuk memastikan bahwa aplikasi memenuhi kebutuhan dan persyaratan yang telah ditentukan .
Pengujian ini bertujuan untuk mengevaluasi apakah aplikasi memenuhi ekspektasi pengguna dalam skenario penggunaan sebenarnya, termasuk kemudahan navigasi, kejelasan informasi, dan kenyamanan visual.
HASIL DAN PEMBAHASAN
Bagian ini memaparkan hasil dari penerapan ReactJS dalam pengembangan front-end aplikasi komunitas ZeroMaterial.
Aplikasi ini dirancang sebagai platform kolaboratif untuk mendukung kegiatan kampanye dan donasi yang berkaitan dengan isu lingkungan, hutan, dan iklim.
Hasil yang disampaikan mencakup proses implementasi, pengujian fungsional dan penerimaan pengguna, serta evaluasi berdasarkan pendekatan Rapid Application Development (RAD) yang digunakan dalam penelitian.
Selain itu, dilakukan pula pembandingan dengan studi relevan untuk mengukur efektivitas pendekatan yang diambil.
1 Analisis Kebutuhan Sistem Tahap awal dalam proses pengembangan difokuskan pada analisis kebutuhan sistem yang dilakukan melalui diskusi bersama komunitas ZeroMaterial.
Proses ini bertujuan mengidentifikasi kebutuhan inti sistem baik dari sisi fungsional maupun non-fungsional yang dibutuhkan oleh pengguna komunitas.
Kebutuhan Fungsional Autentikasi Pengguna Sistem harus menyediakan proses login dan registrasi guna memastikan bahwa hanya pengguna yang terdaftar yang dapat mengakses fitur aplikasi.
Promosi Kampanye Sistem harus menyediakan fitur untuk membuat, mengelola, dan mempromosikan kampanye, termasuk kemampuan untuk mengunggah konten multimedia.
Pengumpulan Donasi Sistem harus memungkinkan pengguna untuk melakukan donasi secara online dengan pilihan metode pembayaran yang beragam.
Manajemen Data Sistem harus memiliki fitur untuk menyimpan dan mengelola data pengguna, donasi, dan kegiatan kampanye dalam satu platform terpusat.
Kebutuhan Non-Fungsional Kinerja Sistem harus mampu menangani jumlah pengguna yang besar, memastikan waktu respons cepat, dan dapat diakses kapan saja.
Responsivitas Sistem harus dapat diakses dan digunakan dengan baik pada berbagai jenis perangkat, seperti desktop, tablet, dan mobile.
Keamanan Sistem harus menjamin keamanan data, termasuk enkripsi dan perlindungan terhadap akses tidak sah.
2 Perancangan Sistem Tahap selanjutnya adalah merancang struktur dan antarmuka aplikasi.
Proses ini bertujuan menghasilkan rancangan visual awal .
agar pengguna dapat memberikan umpan balik sebelum tahap konstruksi Arsitektur Aplikasi Arsitektur sistem dalam pengembangan aplikasi komunitas ini dirancang untuk mendukung komunikasi yang efisien antara pengguna, antarmuka web, dan penyimpanan data.
Struktur ini mengadopsi pendekatan client-server yang memisahkan tampilan antarmuka dengan proses backend.
Otorisasi Pengguna Sistem harus memiliki mekanisme hak akses untuk memberikan batasan terhadap pengguna berdasarkan peran, sehingga setiap pengguna hanya dapat mengakses fitur dan data yang sesuai dengan tingkat otorisasi yang sudah Gambar 2.
Desain Arsitektur Desain Arsitektur Aplikasi ZeroMaterial menggambarkan alur kerja dari setiap proses utama.
Pengguna memulai interaksi melalui antarmuka frontend untuk mengirim permintaan, seperti melihat kampanye atau mengirim 202 | Journal of Digital Business and Technology Innovation (DBESTI) Vol.
2 No.
2 November 2025 Permintaan ini diteruskan ke backend melalui REST API, kemudian diproses sesuai logika bisnis dan diteruskan ke basis data untuk pengambilan atau penyimpanan Hasil pemrosesan dikirim kembali ke frontend sebagai respons dan ditampilkan kepada pengguna secara real-time melalui tampilan yang interaktif.
Wireframe Dashboard Admin Wireframe Beranda Gambar 6.
Wireframe Dashboard Admin 3 Implementasi Gambar 3.
Wireframe Beranda Wireframe Kampanye Tahap implementasi merupakan bagian dari proses Konstruksi dalam metode RAD.
Prototipe yang telah divalidasi dikembangkan menjadi antarmuka yang lengkap dan dapat digunakan.
Tampilan Beranda Gambar 7.
Tampilan Halaman Beranda Gambar 4.
Wireframe Kampanye Wireframe Donasi Pada Gambar 7, terdapat tampilan beranda dari aplikasi ZeroMaterial yang menampilkan pesan motivasi dan ajakan untuk mendaftar.
Gambar 5.
Wireframe Donasi Tampilan Kampanye Gambar 8 Tampilan Halaman Kampanye Pada Gambar 8, memperlihatkan bagian fitur kampanye lingkungan dalam aplikasi ZeroMaterial.
Tampilan ini menyajikan daftar kegiatan berbentuk kartu, masing-masing 203 | Journal of Digital Business and Technology Innovation (DBESTI) Vol.
2 No.
2 November 2025 menampilkan judul kampanye, narasumber, dan data Pada halaman ini, ditampilkan berbagai data statistik yang merangkum aktivitas sistem.
4 Pengujian Sistem Tampilan Donasi Hasil Pengujian Black Box Testing Pengujian Black Box Testing dilakukan oleh peneliti dengan total 42 skenario pengujian yang telah dirancang untuk menguji setiap fitur utama aplikasi komunitas ZeroMaterial.
Pengujian ini dilakukan tanpa melihat struktur internal kode, tetapi hanya berdasarkan input dan output dari sistem.
Hasil dari seluruh pengujian menunjukkan bahwa semua skenario dapat dijalankan dan berfungsi sesuai dengan spesifikasi fungsional.
Gambar 9.
Tampilan Halaman Donasi Pada Gambar 9, memperlihatkan formulir donasi ZeroMaterial dengan beberapa bagian utama: pemilihan nominal donasi, metode pembayaran, jenis donasi, dan kolom opsional untuk harapan donor.
Informasi donor .
ama, konta.
serta ringkasan pembayaran ditampilkan secara terstruktur.
Tampilan Riwayat Donasi ycNycnycuyciycoycayc ycoyceycayceycEaycaycycnycoycaycu = Jumlah pengujian yang berhasil Total skenario pengujian ) y 100% ycNycnycuyciycoycayc ycoyceycayceycEaycaycycnycoycaycu = ( ) y 100% ycNycnycuyciycoycayc ycoyceycayceycEaycaycycnycoycaycu = 100% Berdasarkan hasil pengujian, tingkat keberhasilan aplikasi dalam Black Box Testing mencapai 100%, yang menunjukkan bahwa seluruh fitur dapat berjalan sebagaimana mestinya.
Keberhasilan ini menandakan bahwa aplikasi telah memenuhi standar dasar dari sisi Hasil Pengujian UAT Pengujian UAT dilakukan kepada 20 responden, terdiri dari 15 pengguna .
dan 5 admin.
Setiap responden diberikan sejumlah pertanyaan pengujian sesuai dengan perannya, yaitu 13 pertanyaan untuk user dan 15 pertanyaan untuk admin.
Sehingga total pengujian mencapai 270 item.
Gambar 10.
Tampilan Halaman Riwayat Donasi Pada Gambar 10, menampilkan daftar riwayat donasi pengguna dalam format kartu.
Setiap entri mencakup judul kampanye, lokasi kampanye, detail donasi, dan status pembayaran donasi.
Tampilan Dashboard Admin ycNycnycuyciycoycayc ycoyceycayceycEaycaycycnycoycaycu = Jumlah pengujian yang berhasil Total pengujian ) y 100% ycNycnycuyciycoycayc ycoyceycayceycEaycaycycnycoycaycu = ( ycNycnycuyciycoycayc ycoyceycayceycEaycaycycnycoycaycu = 94.
) y 100% Dari total tersebut, sebanyak 255 pengujian dinyatakan AupassAy dan 15 pengujian AufailAy, dengan kegagalan terutama terjadi pada aspek responsivitas tampilan antarmuka di berbagai perangkat.
Secara kuantitatif, tingkat keberhasilan UAT mencapai 94,4%.
Hasil ini menunjukkan bahwa aplikasi secara umum dapat diterima oleh pengguna dan telah memenuhi kebutuhan komunitas, meskipun masih memerlukan peningkatan pada aspek tampilan adaptif.
5 Evaluasi Hasil Gambar 11.
Tampilan Halaman Dashboard Admin Pada Gambar 11, menampilkan halaman Dashboard Admin, yang menjadi halaman utama setelah proses login berhasil.
Pengembangan aplikasi dilakukan menggunakan metode RAD yang menekankan iterasi cepat dan keterlibatan pengguna dalam proses pengembangan.
Evaluasi dilakukan terhadap setiap tahapan RAD sebagai berikut:
204 | Journal of Digital Business and Technology Innovation (DBESTI) Vol.
2 No.
2 November 2025 Analisis Kebutuhan: Dilakukan diskusi bersama komunitas ZeroMaterial untuk menentukan fitur inti seperti kampanye dan donasi.
Hasilnya dirangkum dalam bentuk flow pengguna dan kebutuhan Perancangan Sistem:
Penyusunan antarmuka dan desain struktur halaman dilakukan dengan pendekatan komponen modular ReactJS.
Konstruksi: Pengembangan antarmuka dilakukan secara bertahap dengan menerapkan Tailwind CSS untuk mempercepat styling.
Implementasi dan Pengujian: Aplikasi diuji melalui Black Box Testing dan UAT, dengan iterasi perbaikan sesuai hasil pengujian.
DAFTAR PUSTAKA