## IMPLEMENTASI PROGRESSIVE WEB APPS PADA
MARKETPLACE
*Edi Iskandar 1 , Robby Cokro Buwono 2 , Sintia Ogi Nindiya Putri 3
1,3) Program Studi Informatika STMIK Akakom Jln. Raya Janti 143 Yogyakarta
2) Program Studi Sistem Informasi STMIK Akakom Jln. Raya Janti 143 Yogyakarta Email : edi_iskandar@akakom.ac.id, robbycokro@akakom.ac.id, sintiaogi@gmail.com

## ABSTRACT
Marketplace  is  a  website  or  online  application  that  facilitates  the  buying  and  selling process from various stores. One of the reasons why the marketplace is famous is because of the ease and convenience of use. Many describe online marketplaces as department stores. The next problem  experienced  by  users,  because  every  smartphone  has  limitations  in  installing applications, so the choice to install native applications is considered due to limited resources and can cause smartphone performance to be slow. Using Progressive Web Apps (PWA) can be a solution to overcome the problem where PWA can run like a native application installed on a smartphone.  The  implementation  of the  resulting  system  can  help  users  in  online  transactions that save smartphone memory and market place applications have been tested on smartphones, resulting in screenshots of the application running as expected.
Keywords : Marketplace, Progressive Web Apps, PWA, Web.

## ABSTRAK
Marketplace adalah sebuah website atau aplikasi online yang memfasilitasi proses jual beli  dari  berbagai  toko.  Salah  satu  alasan  mengapa marketplace terkenal  adalah  karena kemudahan  dan  kenyamanan  dalam  penggunaan.  Banyak  yang  menggambarkan online marketplace seperti department store . Permasalahan yang dialami oleh pengguna adalah setiap smartphone mempunyai  keterbatasan  dalam  instalasi  aplikasi,  sehingga  pilihan  untuk menginstal  aplikasi native menjadi  pertimbangan  karena resource yang  terbatas  dan  dapat menyebabkan  kinerja smartphone menjadi  lambat. Menggunakan Progressive  Web  Apps (PWA)  dapat  menjadi  solusi  untuk  mengatasi  masalah  dimana  PWA  dapat  berjalan  layaknya seperti  aplikasi native yang  dipasang  pada smartphone. Implementasi  sistem  yang  dihasilkan dapat  membantu  pengguna  dalam  transaksi online yang  hemat  memori smartphone dan  telah dilakukan uji coba aplikasi market place pada smartphon e dengan hasil tangkapan layar aplikasi berjalan sesuai dengan yang diharapkan.
Kata kunci : Marketplace, Progressive Web Apps, PWA, Web .
ISSN 2088-1770 (Print) ISSN 2503-3247 (Online)

## Jurnal

## Sains, Teknologi, Komputer, dan Manajemen S A I N T E K O M

## 1. PENDAHULUAN
Pada  era  globalisasi  saat  ini masyarakat  dipermudah  dengan  dengan kemajuan  teknologi  yang  begitu  pesat, penggunaan  layanan  internet  makin terasa diberbagai segi kehidupan sehari- hari, karena banyak memberikan manfaat  bagi  pengguna,  proses  belanja yang biasanya dilakukan secara langsung seiring  dengan berjalan waktu berganti dengan proses serba online .
Berbagai  masalah  yang  dialami pelanggan  pada  saat  akan  melakukan pembelian seperti
keterbatasan informasi  mengenai  barang  yang  dicari dan  perlunya  waktu  luang  lebih  untuk mencari  informasi  mengenai  barang yang  diinginkan.  Maraknya  pengguna smartphone dimasyarakat dengan berbagai kelebihannya seharusnya permasalahan  tersebut  tidak  harus terjadi. Maraknya kegiatan online shopping zaman  sekarang  terutama  di Indonesia,  tidak  heran  kalau  semua  hal yang  memfasilitasi  kegiatan  tersebut akan membludak jumlahnya.
Marketplace adalah sebuah website atau  aplikasi  online  yang memfasilitasi  proses  jual  beli  dari berbagai  toko Online (Umar  R.A, 2022). marketplace memiliki  konsep yang  kurang  lebih  sama  dengan  pasar
tradisional, marketplace tidak bertanggung  jawab  atas  barang-barang yang  dijual  karena marketplace hanya menyediakan  tempat  bagi  para  penjual yang  ingin  berjualan  dan  membantu penjual  untuk  bertemu  pelanggan  dan melakukan  transaksi dengan  lebih mudah. Transaksinya diatur oleh marketplace
kemudian setelah menerima  pembayaran,  penjual  akan mengirim  barang  kepembeli.  Salah  satu alasan  mengapa  marketplace  terkenal adalah karena kemudahan dan kenyamanan dalam penggunaan. Banyak  yang  menggambarkan  online marketplace seperti department  store (Sembiring F, 2020 ) .
Permasalahan  berikutnya  yang dialami  oleh  pengguna,  karena  setiap smartphone mempunyai  keterbatasan dalam instalasi aplikasi, sehingga pilihan untuk menginstal aplikasi native menjadi pertimbangan dikarenakan resource yang  terbatas  dan  dapat menyebabkan kinerja smartphone menjadi  lambat.  Menggunakan  PWA diharapkan menjadi solusi untuk mengatasi  masalah  dimana  PWA  dapat berjalan layaknya seperti aplikasi native yang diinstal pada smartphone . Aplikasi ini  dapat  memberikan  kemudahan  bagi pengguna  dalam  melakukan  transaksi
online dengan  cepat  pada  perangkat smartphone tanpa  harus  memasang aplikasi.
Beberapa penelitian yang membahas  tentang marketplace dan progressive  web  apps telah  banyak dilakukan  sebelumnya,  antara  lain penelitian  Andreas  Biørn-Hansen,  Tim A.  Majchrzak  and  Tor-Morten  Grønli, dengan  judul Progressive  Web  Apps: The  Possible  Web-native  Unifier  for Mobile  Development .  Pengembangan beberapa platform atau  menggunakan pendekatan lintas platform Aplikasi Web Progresif ,  dapat  diterapkan  melalui serangkaian  konsep  dan  teknologi  pada semua  situs web yang  memenuhi persyaratan  tertentu  (Biorn-Hansen  A, 2017).  Aplikasi web  progresif sebagai kemungkinan pemersatu teknologi untuk aplikasi web dan aplikasi lainnya.
Setelah  pengenalan  fitur,  pemeriksaan kinerja,  dilakukan  perbandingan  antara kedua  aplikasi  yaitu  aplikasi  seluler lintas platform dan Aplikasi  Web Progresif ,  dan  disediakan repositori open  source untuk  verifikasi  validitas hasil.  Tujuan  penelitian  untuk  memicu minat para akademisi, komunitas, karena kurangnya keterlibatan akademis diidentifikasi sebagai bagian dari pencarian literatur.
Huong Pham Quynh, melakukan penelitian  dengan  judul Progressive Web  App  –  a  new  trend  in  e-commerce Case study: applying service worker for a  webshop ,  tujuan  dari  penelitian  yang dilakukan  oleh  Huong  Pham  Quynh, tidak  hanya  untuk  memperjelas  konsep PWA  dan  karakteristiknya,  tetapi  juga untuk  memberikan  hasil  praktis  dari service  worker ,  penelitian  tersebut menjelaskan  bagaimana  PWA  dapat membantu bisnis mengembangkan solusi e-commerce yang  lebih  baik.  Ide dibalik penelitian ini adalah memberikan pemahaman yang memadai kepada audiens tentang  PWA  untuk membandingkan dan meningkatkan produk saat ini (Quynh H.P 2018).
Penelitian ini dibagi menjadi dua bagian  yaitu  bagian  teoritis  dan  bagian empiris.  Bagian  teoritis  terdiri  dari literatur  yang  dikumpulkan  dari  buku, artikel  akademis dan terpercaya sumber online. Bagian praktis menyajikan studi kasus. Selain itu, penelitian ini menunjukkan bahwa dengan menyediakan  fitur  mirip  aplikasi  ke aplikasi web, pekerja layanan mendukung  PWA  untuk  menjadi  solusi prioritas utama di pasar  e-niaga seluler. Sebagai  hasil  prakteknya,  penelitian  ini melahirkan webshop dengan service
worker terintegrasi untuk
membuktikannya  pekerja  layanan  dapat membuat  aplikasi web lebih  cepat  dan dapat  bekerja  secara offline dengan mengambil  sumber  daya  dan cache cerdas.
Begitu  juga  dengan  penelitian yang  dilakukan  oleh  Tjarco  Kerssens,
dengan judul Applicability
of
Progressive  Web  Apps  in  Mobile Development .  Penelitian  ini  bertujuan untuk  menganalisis  penerapan  PWA sebagai  alternatif  dari  pengembangan aplikasi  asli  dan  web  tradisional,  untuk
memberikan argumen
kepada
pengembang untuk pertimbangan pendekatan  pengembangan  dan  untuk
mengisi kesenjangan pengetahuan dalam literatur akademis tentang pengembangan  seluler  (Kerssens  T,
2019). Dengan membandingkan
performa  dan  konsumsi  energi  PWA dengan native dan web implementasi aplikasi  di    iPhone  OS  (IoS)  dan Android,  Peneliti  menemukan  bahwa versi  PWA  memiliki  kinerja  yang serupa  dibanyak  kasus,  lebih  baik dibeberapa  dan  hanya  lebih  buruk dalam  waktu  peluncuran  di  IoS. Karenanya,  metodologi  ini  tampaknya menjadi  alternatif  yang  layak  untuk
pengembangan  seluler  dalam  konteks kinerja dan konsumsi energi.

## 2. METODE
Subjek  penelitian  ini  adalah implementasi  PWA  pada marketplace , Langkah penelitian yang akan dilakukan dapat dilihat pada Gambar 1.

## Gambar 1. Langkah Penelitian

## 2.1  Metode Pengumpulan Data
Metode  pengumpulan  data  yang digunakan  untuk  mengimplementasikan PWA pada marketplace , terdiri dari :
a. Sumber data
Data  yang  diperlukan  untuk PWA  pada marketplace ,  memerlukan dua  jenis  data,  yaitu  data  primer  yang diperoleh  langsung  dari  sumbernya melalui  wawancara  kepada  pelaku usaha  sebanyak  5  orang  pelaku  usaha terkait  deskripsi  produk  yang  akan dipasarkan  pada marketplace ataupun observasi  dengan  pihak-pihak  terkait dan  data  sekunder  yang  diperoleh  dari tinjauan  pustaka  maupun  data–data
yang  disediakan  dengan  melakukan studi literature , mencakup buku – buku teks,  artikel  dan  buku  petunjuk  teknis terpadu.
b. Teknik pengumpulan data
Teknik  pengumpulan  data  yang digunakan  pada  penelitian  ini  adalah Observasi yaitu  pengumpulan  data dengan melakukan pengamatan langsung  terhadap  produk  –  produk yang akan dipasarkan pada marketplace . Interview
yaitu pengumpulan  data  dengan  melakukan wawancara  atau  tanya  jawab  secara langsung  kepada  5  orang  pelaku  usaha terkait  deskripsi  produk  yang  akan dipasarkan pada marketplace . Literature yaitu pengumpulan data dengan melakukan  studi  pustaka  mencakup buku  –  buku  teks,  makalah,  artikel  dan buku petunjuk teknis terpadu.
2.2  Pengembangan sistem
Pengembangan  sistem  meliputi beberapa kegiatan, yaitu analisis kebutuhan perangkat lunak, perancangan Algoritma dan
perancangan antar muka.
a.  Analisis  Kebutuhan,  tahapan  yang akan dilakukan pada tahap ini adalah analisa  kebutuhan  perangkat  lunak untuk  implementasi  PWA  pada marketplace dirancang untuk
memenuhi beberapa fungsi,
diantaranya  menampilkan  katalog barang;  Menampilkan stock dan harga  barang;  Menampilkan  alamat penjual;
Menampilkan cara
pembayaran  dan  metode  pengiriman dan Menampilkan menu chat dengan penjual
b.  Perancangan  Sistem,  tahapan  ini diperlukan  untuk  menggambarkan langkah-langkah  dan  proses  yang digunakan dalam pembuatan program aplikasi.
c.  Perancangan antar muka atau desain, tahapan ini merupakan tahap perancangan tampilan program. Tahapan  ini  penting  karena  untuk membuat  tampilan  program  yang user  friendly sehingga  program aplikasi yang dibuat tidak menjenuhkan.  Tahap  perancangan antar  muka  bisa  disebut juga  dengan perancangan interface yaitu  agar program  aplikasi  dapat  berinteraksi dengan  baik  dengan  user.  Sehingga output  yang  dikeluarkan  sesuai dengan harapan yang diinginkan oleh user .

## 2.3  Implementasi Sistem
Pada  tahap  ini  dibangun  sistem untuk  PWA  pada marketplace .  Proses konstruksi  program  diawali  dengan
membuat  menu  utama  program  yang akan  tampil  saat  pertama  kali  program berjalan.  Selanjutnya  akan  dibangun program  untuk  menampilkan  menu- menu yang lainnya.
2.4  Pengujian
Pada tahap ini dilakukan pengujian dengan mengimplementasikan sistem yang
telah  dibuat,  didapatkan  hasil    sistem yang dibangun dapat membantu pengguna  dalam  transaksi online yang hemat memori smartphone dan uji coba aplikasi market place pada smartphon e,
dihasilkan  tangkapan  layar  aplikasi berjalan sesuai dengan yang diharapkan, dan sistem dapat berjalan.
2.5  Evaluasi dan Perbaikan
Tahap  ini  merupakan  tahapan untuk melakukan evaluasi dan perbaikan  berdasarkan  tahap  pengujian yang telah dilakukan. Jika hasil pengujian  menunjukkan  bahwa  aplikasi sudah baik, maka proses perbaikan tidak perlu  dilakukan.  Akan  tetapi  jika terdapat kesalahan maka proses perbaikan  dapat  dilakukan  dengan memperbaiki Algoritma dan kode program.
2.6  Penulisan Laporan
Penulisan laporan adalah
tahapan  terakhir  setelah  sistem  dibuat
kemudian disusun sebagai bahan evaluasi dan sebagai bahan pengamatan dari  hasil  yang  diperoleh  pada  saat penelitian yang telah dilakukan.
3. HASIL DAN PEMBAHASAN

## 3.1. Hasil
Beberapa  tampilan  antarmuka dari  sistem  yang  dikembangkan  seperti pada Gambar 2 halaman home .
Gambar 2. Halaman Home
Gambar  3  menampilkan  menu order, user dapat melakukan pemesanan dengan  cara klik  tombol  add  to  cart pada  barang  yang  akan  dipilih  dan barang  yang  dipilih  akan  masuk  ke dalam  keranjang  pemesanan  sekaligus jumlah  barang,  jenis  barang  dan  total harga  dari  barang  yang  dipilih,  seperti terlihat pada Gambar 4.
Gambar 3. Halaman Pemesanan

## Gambar 4. Halaman Keranjang Pemesanan
Gambar 5 menampilkan Company profil usaha dan jenis barang yang dipasarkan.

## Gambar 5. Tentang Usaha

## 3.2. Pembahasan
PWA  adalah  aplikasi  web  yang memiliki keunggulan dibandingkan dengan  aplikasi web biasa,  PWA menerapkan penyimpan sejumlah sumber aplikasi pada browser ( caching ) pengaturannya  dikendalikan  oleh script
yang berjalan secara background disebut service worker , sehingga aplikasi web menjadi  mudah  untuk ditayangkan  pada  perangkat mobile seperti smartphone android,  tidak
memerlukan  langkah  yang  rumit  untuk instalasinya,  memiliki  ukuran  relatif kecil  dibandingkan  dengan  aplikasi native  mobile dan  dapat  bekerja  secara offline atau tanpa terhubung ke jaringan penyedia layanan server web .
Penelitian  ini  adalah  studi  kasus untuk mengimplementasikan PWA pada market place, langkah pertama menyiapkan  aplikasi market  place hasil analisis kebutuhan dan rancangan sistem  kebutuhan  dan  rancangan  basis data. Langkah kedua memeriksa kesiapan  aplikasi market  place untuk
PWA dengan menggunakan fitur
Lighthouse pada Developer  Tools web browser  chrome,  seperti  pada  seperti Gambar 6.

## Gambar 6. Kesiapan Penerapan PWA pada aplikasi market place
Gambar 6 terdapat catatan perbaikan yang harus dilakukan dengan penanda merah antara lain :
a. Permintaan instalasi untuk web app manifest atau service worker.
b. Belum adanya service worker yang ter-register.
c. Belum ada konfigurasi untuk splash screen.
d. Belum  ada  pengaturan  untuk  tema warna pada papan alamat.
e. Belum  ada  pengaturan icon pada
manifest. Berdasarkan Gambar 6
persiapan  PWA  untuk  aplikasi market place dengan penanda hijau antara lain :
a. Sudah menggunakan protokol
HTTPS.
b. Sudah  sesuai  antara  ukuran  dan pengaturan viewport.
c. Sudah  memiliki  metadata  pada  tag <meta  name=”viewport”>  dengan
nilai width atau initial scale..
d. Sudah  menyediakan  untuk apple-
touch-icon.
Untuk  selanjutnya  dilakukan penyesuaian mengikuti
petunjuk
bertanda  merah  agar  catatan  penerapan PWA bertanda merah  tersebut  berubah menjadi hijau.
1. Meregistrasi Service  Worker dengan menambahkan  kode  program  yang diletakkan pada file main java script .
2. Instalasi Service  Worker dengan membuat file  service  worker  java scrip t yang diletakkan di root .
3. Aktivasi Service  Worker dengan menambahkan file pada service worker java script .
4. Fetch  Service  Worker atau  proses cache dengan  menambahkan file pada service worker java script.
5. Membuat Web  App  Manifest dengan menuliskan kode program.
6. Memeriksa  status  penerapan  PWA pada aplikasi marketplace , dihasilkan seperti Gambar 7.
Gambar 7. Status Progressive Web App
Pada  Gambar  7  ditunjukkan dengan  penanda  warna  hijau  bahwa penerapan  PWA  untuk  aplikasi market place sudah berhasil dilakukan.
7. Uji  Coba  aplikasi market  place pada smartphone ,  dihasilkan  tangkapan layar  aplikasi  berjalan  seperti  pada
Gambar  8  dan short  cut aplikasi seperti Gambar 9.
Gambar 8. Tampilan Aplikasi pada Smartphone
Gambar 9. Short Cut Aplikasi Hasil Instalasi pada Smartphone

## 4. SIMPULAN
Hasil  dari  perancangan  dan implementasi  sistem  yang  dihasilkan dapat  disimpulkan  bahwa  sistem  yang dibangun  dapat  membantu  pengguna
dalam  transaksi online yang  hemat memori smartphone dan  uji  coba aplikasi market place pada smartphon e, dihasilkan  tangkapan  layar  aplikasi berjalan sesuai dengan yang diharapkan . Selain  menghemat  memori  karena aplikasi hanya dijalankan pada browser,
aplikasi service  worker tetap  bisa berjalan  pada  saat  koneksi internet terputus.

## 5. UCAPAN TERIMA KASIH
Rasa  syukur  dan  terima  kasih  kami sampaikan  atas  dukungan  dan  kerja sama  yang  baik  kepada  Ketua  STMIK Akakom  Yogyakarta,  Kepala  Pusat Penelitian  dan  Pengabdian  Kepada Masyarakat (PUSLIT) STMIK Akakom
Yogyakarta, dan Seluruh civitas akademika STMIK Akakom Yogyakarta.

## DAFTAR PUSTAKA
Biørn-Hansen  A  ,  Tim  A.  Majchrzak and  Tor-Morten  Grønli,  2017, Progressive Web Apps: The Possible  Web-native  Unifier  for
Mobile  Development,  WEBIST 13th  International  Conference  on
Web  Information  Systems  and Technologies.
Kerssens  T,  2019,  Applicability  of Progressive  Web  Apps  in  Mobile Development,  Universiteit  Van Amsterdam,
https://staff.fnwi.uva.nl/a.s.z.bellou
m/MSctheses/MScthesis_Tjarco.pd f
Quynh,  H.P,  2018,  Progressive  Web
App  –  a  new  trend  in  e-commerce Case study: applying service worker  for  a  webshop,  Haaga- Helia University of Applied
Sciences.
Rista  Afifah  Umar  R.  A,  Afuan  L  dan Kelik  A,  2020,  Rancang  Bangun Marketplace Penjualan Jajanan dan Makanan  di  Lingkungan  Kampus dan  Mahasiswa  (Studi  Kasus Fakultas  Teknik  Unsoed),  Jurnal
Pendidikan dan
Teknologi Indonesia  (JPTI)  ,Vol.  2,  No.  5,
Mei 2022, Hal. 233-243.
Sembiring F, Sari D.P, 2020, Penerapan
Teknik  Scraping  Python  Pada
Website  Marketplace  Indonesia,
Integrated  (Journal  of  Information Techcology and
Vocational
Education, Vol 2 No. 1.