Studi Perbandingan Pengembangan Aplikasi Progressive Web App pada Proses Kompresi Gambar Menggunakan React Image File Resizer dan Native

Arfani, Muhamad Zidane and Aryo Pinandito, S.T., M.MT, Ph.D and Eriq Muhammad Adams Jonemaro, S.T., M. Kom. (2024) Studi Perbandingan Pengembangan Aplikasi Progressive Web App pada Proses Kompresi Gambar Menggunakan React Image File Resizer dan Native. Sarjana thesis, Universitas Brawijaya.

Abstract

Perkembangan teknologi digital yang cepat membutuhkan akses informasi yang cepat dan akurat, terutama bagi bisnis dan industri. PT Gunung Mas, sebuah perusahaan penyewaan alat berat, memerlukan solusi teknologi untuk mendukung proses survei lokasi, khususnya dalam pengumpulan dan pengiriman data visual ke pusat analisis. Mengingat tantangan sinyal dan akses internet yang terbatas selama pengumpulan data, terutama dalam pengunggahan gambar, mekanisme kompresi gambar di sisi klien menjadi sangat penting. Penelitian ini bertujuan untuk menganalisis perbandingan performa dua metode kompresi gambar di sisi klien dalam lingkungan Progressive Web App (PWA): menggunakan library React Image File Resizer dan metode native. Studi ini berfokus pada empat metrik utama: kecepatan kompresi, ukuran gambar setelah dikompresi, panjang kode, dan durasi pengembangan. Desain eksperimen melibatkan pengembangan PWA menggunakan React.js dengan kedua metode kompresi. Data yang dikumpulkan mencakup kecepatan kompresi, ukuran gambar sebelum dan sesudah kompresi, panjang kode, dan durasi pengembangan. Kecepatan kompresi diukur dengan mencatat waktu proses pada berbagai ukuran dan format gambar. Ukuran gambar dibandingkan untuk menilai efektivitas kompresi. Panjang kode, yang menunjukkan efisiensi kode, diperoleh menggunakan alat analisis kode sumber. Durasi pengembangan dicatat dengan melacak waktu yang diperlukan untuk mengimplementasikan setiap metode. Hasil menunjukkan bahwa library React Image File Resizer menawarkan kode yang lebih ringkas dan waktu pengembangan yang lebih cepat, seperti yang dibuktikan oleh perbedaan signifikan dalam uji Wilcoxon Rank-Sum. Sebaliknya, metode native unggul dalam performa kompresi, mencapai waktu kompresi yang lebih cepat dan ukuran gambar yang lebih kecil. Oleh karena itu, pilihan antara kedua metode ini bergantung pada prioritas pengembangan: metode library lebih disukai untuk efisiensi pengembangan dan kemudahan implementasi, sementara metode native lebih unggul untuk kecepatan kompresi dan pengurangan ukuran gambar yang optimal. Penelitian ini memberikan wawasan dan rekomendasi berharga bagi pengembang dalam memilih metode kompresi gambar yang paling tepat dan efisien untuk pengembangan PWA, serta berkontribusi pada aplikasi di masa depan dengan kebutuhan serupa.

English Abstract

The rapid development of digital technology necessitates quick and accurate access to information, especially for businesses and industries. PT Gunung Mas, a heavy equipment rental company, requires a technology solution to support location survey processes, particularly in collecting and transmitting visual data to the analysis center. Given the challenges of limited signal and internet access during data collection, especially in uploading images, a client side image compression mechanism becomes essential. This study aims to analyze the comparative performance of two client-side image compression methods in a Progressive Web App (PWA) environment: using the React Image File Resizer library and native methods. The study focuses on four key metrics: compression speed, compressed image size, code length, and development duration. Experimental design involves developing a PWA using React.js with both compression methods. Data collected includes compression speed, image sizes before and after compression, code length, and development duration. Compression speed is measured by timing the process on various image sizes and formats. Image sizes are compared to assess the effectiveness of compression. Code length, indicative of code efficiency, is obtained using source code analysis tools. Development duration is recorded by tracking the time taken to implement each method. The results show that the React Image File Resizer library offers more concise code and faster development time, as evidenced by a significant difference in the Wilcoxon Rank-Sum test. Conversely, the native method excels in compression performance, achieving faster compression times and smaller image sizes. Therefore, the choice between the two methods depends on development priorities: the library method is preferable for development efficiency and ease of implementation, while the native method is superior for optimal compression speed and image size reduction. This study provides valuable insights and recommendations for developers in selecting the most appropriate and efficient image compression method for PWA development, contributing to future applications with similar needs.

Item Type:	Thesis (Sarjana)
Identification Number:	052415
Uncontrolled Keywords:	Progressive Web App, kompresi gambar, React Image File Resizer, metode native, efisiensi pengembangan, performa kompresi-Progressive Web App, image compression, React Image File Resizer, native method, development efficiency, compression performance.
Divisions:	Fakultas Ilmu Komputer > Sistem Informasi
Depositing User:	Sugeng Moelyono
Date Deposited:	31 Oct 2024 06:32
Last Modified:	11 Nov 2024 09:13
URI:	http://repository.ub.ac.id/id/eprint/227805

Text (DALAM MASA EMBARGO) Muhamad Zidane Arfani.pdf Restricted to Registered users only Download (3MB)

Actions (login required)

View Item