p-ISSN : 2460-3562 / e-ISSN : 2620-8989

## Rancang Bangun Aplikasi
Point of Sale (POS App ) Berbasis Progressive Web App untuk Usaha Mikro Kecil dan Menengah
Ilham Dimas Prayudha #1 , Muhammad Azhar Irwansyah #2 , Hengky Anra #3
# Program Studi Informatika, Fakultas Teknik, Universitas Tanjungpura Jl. Prof. Dr. H. Hadari Nawawi, Pontianak, 78124
1 ilhamdimasprayudha@student.untan.ac.id
2 azharirwansyah@informatika.untan.ac.id
3 hengkyanra@informatika.untan.ac.id

## Abstrak
Usaha Mikro Kecil dan Menengah (UMKM) adalah istilah dalam ekonomi dan bisnis yang merujuk pada sebuah bisnis usaha ekonomi produktif yang dimiliki seseorang atau badan usaha. Menurut Badan Pusat Statistik (BPS), UMKM  pada  tahun  2022  berjumlah  64,2  juta.  Pada  sebuah  UMKM,  transaksi  adalah  aktivitas  yang  sering dilakukan.  Setiap  transaksi  yang  terjadi  perlu  dicatat  untuk  dapat  mengetahui  jumlah  pemasukan  dan  jumlah pengeluaran  dari  transaksi  penjualan  dan  transaksi  pembelian  yang  terjadi.  Data-data  transaksi  yang  dicatat tersebut  juga  dapat  diolah  menjadi  informasi  yang  bermanfaat  bagi  pengusaha  UMKM.  Sebagian  besar pengusaha  UMKM  tidak  mencatat  transaksi  dengan  benar.  Padahal,  pencatatan  transaksi  yang  benar  dan real- time dapat  menghasilkan  informasi  yang  berguna  bagi  pengusaha  UMKM  untuk  menentukan  strategi  bisnis kedepannya. Berdasarkan permasalahan tersebut, penelitian ini bertujuan untuk mengembangkan aplikasi Point of Sale (POS). Aplikasi POS adalah aplikasi yang dapat mengelola data-data transaksi, mulai dari data penjualan, data pembelian, data pemasukan, dan data pengeluaran. Fitur utama pada aplikasi ini adalah menghitung secara otomatis jumlah pembayaran yang harus dibayarkan oleh pembeli kepada penjual dalam transaksi yang terjadi. Aplikasi  dikembangkan  berbasis Progressive  Web  App (PWA)  yang  memiliki  keunggulan  dibanding  web tradisional yakni dapat diinstal dan memunculkan shortcut pada Desktop atau Home Screen perangkat layaknya aplikasi native .  Penelitian  diawali  dengan  pengumpulan  data  melalui  studi  literatur  dan  wawancara  langsung dengan  pengusaha  UMKM  untuk  mengetahui  kebutuhan  pada  proses  pengembangkan  aplikasi.  Aplikasi dikembangkan menggunakan metode Waterfall dengan framework Laravel. Penelitian ini berhasil menghasilkan aplikasi POS berbasis PWA untuk UMKM yang sudah sesuai dengan yang diharapkan dan nilai yang sangat positif berdasarkan hasil pengujian dengan metode Black Box Testing dan User Acceptance Testing .
Kata kunci: aplikasi pos, point of sale, progressive web app, UMKM

## Design and Development of a Progressive Web App Based Point of Sale App (POS App) for Micro Small and Medium Enterprises

## Abstract
Micro Small and Medium Enterprises (MSMEs) is a term in economics and business that refers to a productive economic business owned by an individual or a business entity. According to the Central Statistics Agency (BPS), MSMEs in 2022 amounted to 64.2 million. In an MSME, transactions are activities that are frequently conducted. Every  transaction  that  occurs  needs  to  be  recorded  to  determine  the  amount  of  income  and  expenditure  from sales  and  purchase  transactions  that  occur.  The  recorded  transaction  data  can  also  be  processed  into  useful information for MSME entrepreneurs. Most MSME entrepreneurs do not record transactions correctly. However, proper  and  real-time  transaction  recording  can  generate  useful  information  for  MSME  entrepreneurs  to determine  future  business  strategies.  Based  on  this  issue,  this  research  aims  to  develop  a  Point  of  Sale  (POS) application.  The  POS  application  is  an  application  that  can  manage  transaction  data,  ranging  from  sales  data, purchase  data,  income  data,  and  expenditure  data.  The  main  feature  of  this  application  is  to  automatically calculate the amount of payment that buyers must pay to sellers in the transactions that occur. The application is developed based on the Progressive Web App (PWA) which has advantages over traditional web apps, namely it can  be  installed  and  display  shortcuts  on  the  Desktop  or  Home  Screen  of  devices  like  native  applications.  The research begins with data collection through literature studies and direct interviews with MSME entrepreneurs
to  identify  needs  in  the  application  development  process.  The  application  is  developed  using  the  Waterfall method  with  the  Laravel  framework.  This  research  successfully  produced  a  PWA-based  POS  application  for MSMEs  that  meets  expectations  and  received  very  positive  feedback  based  on  testing  results  with  Black  Box Testing and User Acceptance Testing methods.
Keywords: pos app, point of sale, progressive web app, MSME

## I. P ENDAHULUAN
Usaha  Mikro  Kecil  dan  Menengah  (UMKM)  adalah usaha yang dimiliki oleh seseorang atau kelompok dengan modal dan pendapatan tertentu  [1]. Menurut Badan Pusat Statistik  (BPS),  jumlah  UMKM  di  Indonesia  sekitar  59,2 juta  pada  tahun  2015  dan  meningkat  menjadi  65,5  juta pada tahun 2019. Angka tersebut sempat turun pada tahun 2020  menjadi  64  juta  akibat  pandemi  Covid-19,  namun kembali naik lagi menjadi 64,2 juta pada tahun 2022. Data tersebut menunjukkan jumlah UMKM dari tahun ke tahun terus meningkat pada kondisi normal.
Pada  sebuah  UMKM,  transaksi  adalah  aktivitas  yang sering  dilakukan,  terutama  transaksi  antara  pengusaha UMKM  sebagai  penjual  dengan  pembeli  barang  atau penyewa  jasa.  Setiap  transaksi  yang  terjadi  perlu  dicatat untuk  dapat  mengetahui  jumlah  pemasukan  dan  jumlah pengeluaran  dari  transaksi  penjualan  dan  transaksi pembelian  yang  terjadi.  Data-data  transaksi  yang  dicatat tersebut  juga  dapat  diolah  menjadi  informasi  yang bermanfaat  bagi  pengusaha  UMKM,  seperti  informasi total  penjualan  harian,  informasi  total  pengeluaran bulanan,  dan  informasi  barang  yang  paling  laris  pada usahanya [2].
Sebagian  besar  pengusaha  UMKM  tidak  mencatat transaksi dengan benar. Ada yang tidak mencatatnya sama sekali,  ada  yang  hanya  sesekali  mencatatnya,  dan  ada yang  mencatatnya  dengan  cara  manual.  Pencatatan manual  menggunakan  media  konvensional  seperti  kertas berisiko  hilang,  rusak,  terselip,  dan  tulisan  tidak  terbaca. Pencatatan manual menggunakan aplikasi pengolah angka juga terdapat risiko seperti salah ketik dan salah rumus [3]. Pencatatan  transaksi  yang  salah  dapat  mengakibatkan kehilangan  pengendalian  arus  kas,  kesulitan  dalam pemantauan  kinerja  bisnis,  serta  menyulitkan  perolehan pembiayaan dan perencanaan keuangan. Padahal, pencatatan  transaksi  yang  benar  dan real-time dapat menghasilkan  informasi  yang  berguna  bagi  pengusaha UMKM untuk menentukan strategi bisnis kedepannya [4].
Berdasarkan permasalahan tersebut, penggunaan aplikasi  khusus  dapat  menjadi  solusi  untuk  mencatat transaksi  yang  terjadi  pada  sebuah  UMKM.  Aplikasi tersebut  adalah  aplikasi Point  of  Sale (POS).  Aplikasi POS  adalah  aplikasi  yang  dapat  mengelola  data-data transaksi, mulai dari data penjualan, data pembelian, data pemasukan, dan data pengeluaran. Selain itu, aplikasi POS juga  dapat  mengelola  data  item,  data  pelanggan,  data pemasok, data pengguna, dan pelaporan [5].
Aplikasi  dikembangkan berbasis Progressive  Web  App (PWA)  dengan  mengimplementasikan Web  Manifest dan Service  Worker .  Kelebihan  PWA  antara  lain  mudah diakses menggunakan berbagai perangkat melalui browser dengan versi yang up-to-date layaknya aplikasi web pada umumnya, dapat diinstal dan memunculkan shortcut pada Desktop atau Home  Screen perangkat  layaknya  aplikasi
native ,  berjalan  pada  protokol  HTTPS,  memiliki  desain tampilan  yang  responsif  menyesuaikan  layar  perangkat yang  digunakan,  dan auto-update ketika  ada  pembaruan pada aplikasi [6].
Beberapa  penelitian  yang  serupa  sudah  pernah dilakukan  sebelumnya,  antara  lain  penelitian  yang berjudul Aplikasi Point of Sale Menggunakan Framework Laravel  [7],  Rancang  Bangun  Sistem  Informasi Software Point of Sale dengan Metode Waterfall Berbasis Web [8], dan  Analisis  Performa Progressive  Web  Application (PWA) pada Perangkat Mobile [6].
Penelitian  yang  berjudul  Aplikasi Point  of  Sale Menggunakan Framework Laravel  [7].  Penelitian  ini menjelaskan  bahwa  sebuah  toko  bernama  Galaxy  Cell yang  menjual  aksesoris handphone kesulitan  dalam pencatatan  data  barang,  pencatatan  data  transaksi,  dan rekap  data  laporan  secara  manual,  sedangkan  toko  yang semakin  berkembang  dan  transaksi  yang  dilakukan semakin  banyak,  sehingga  sering  terjadi  kesalahan  pada proses  pencatatan.  Berdasarkan  permasalahan  tersebut, dikembangkan  aplikasi Point  of  Sale menggunakan framework Laravel. Penelitian ini menggunakan framework Laravel  karena  pada framework ini  sudah tersedia tools umum  dan  standar  untuk  mengembangkan aplikasi  berbasis  web.  Aplikasi  yang  dikembangkan memiliki  fitur  mengelola  data  barang,  mengelola  data pembelian,  mengelola  data  penjualan,  dan  rekap  data laporan.  Hasilnya,  aplikasi  ini  sangat  membantu  toko Galaxy  Cell  untuk  mengelola  data  toko  terutama  data transaksi.  Namun,  aplikasi  yang  dikembangkan  masih belum  memiliki  fitur  seperti  pengelolaan  data  barang berdasarkan kategori, merek, atau unit.
Penelitian  yang  berjudul  Rancang  Bangun  Sistem Informasi Software  Point  of  Sale dengan  Metode Waterfall Berbasis  Web  [8].  Penelitian  ini  menjelaskan bahwa  saat  ini  banyak  wirausahawan  atau entrepreneur dari  berbagai  kalangan  yang  membuka  usaha  seperti busana, cafe ,  makanan,  dan  sebagainya.  Dalam  usaha tersebut,  pencatatan  data  transaksi  perlu  dilakukan  agar segala  jenis  transaksi  yang  terjadi  dapat  diawasi  dan dilakukan pengecekan oleh petugas kasir maupun pemilik usaha. Transaksi yang banyak membuat pencatatan secara manual  banyak  kekurangan.  Berdasarkan  permasalahan tersebut,  dikembangkan  aplikasi Point  of  Sale berbasis web  dengan  tujuan  untuk  membantu  pengusaha  mencatat data  transaksi  yang  dapat  diolah  menjadi  laporan  dan membantu pengusaha mengambil keputusan dan mengembangkan usahanya.
Aplikasi dirancang menggunakan Unified Modeling Language dan dikembangkan  menggunakan  bahasa  pemrograman  PHP dengan  metode Waterfall .  Hasilnya,  aplikasi  yang  dibuat dapat membantu administrator dan kasir dalam pencatatan data  transaksi  dan  data  terkait  usaha  lainnya  seperti  data barang,  data  kategori  barang,  dan  data  pemasok.  Namun,
aplikasi  yang  dikembangkan  masih  belum  memiliki  fitur seperti pemindai barcode menggunakan kamera. Penelitian yang berjudul Analisis Performa Progressive Web  Application (PWA)  pada  Perangkat Mobile [6]. Penelitian ini menjelaskan keterbatasan aplikasi web yang membutuhkan browser setiap  kali  akan  mengakses aplikasi  dan  aplikasi native yang  perlu  diunduh  melalui aplikasi  pihak  ketiga  dan  tidak  dapat  lintas  platform, dibutuhkan  versi  aplikasi  tersendiri  untuk  masing-masing platform.  Penelitian  ini  menganalisis  performa  aplikasi berbasis Progressive  Web  App (PWA)  untuk  menjadi alternatif  dari  aplikasi  web  dan  aplikasi native .  Dengan penerapan  PWA,  aplikasi  web  memiliki  kemampuan tambahan  seperti  dapat  diinstal  seperti  aplikasi native sehingga  pengguna  tidak  perlu  selalu  membuka browser setiap mengakses aplikasi dan dapat diakses menggunakan berbagai  perangkat.  Pengujian  dilakukan  pada  beberapa web  yang  sudah  menerapkan  PWA,  seperti  lofi.news, makemytrip.com,  olx.co.id,  spotify.com  starbucks.com, sudoku.jull.dev, tokopedia.com, trivago.co.id, twitter.com, dan  yummly.com.  dengan  menguji  parameter-parameter Google Developer, yaitu Performance , Accessibility , Best Practices ,  SEO, Page  Size , Load  Time ,  dan  parameter PWA,  yaitu Fast  and  Reliable , Installable ,  dan  PWA Optimized .  Hasilnya,  Aplikasi  yang  diuji  dapat  diinstal dan memunculkan shortcut / icon aplikasi pada layar utama perangkat  dan  berdampak  sangat  baik  berdasarkan  nilai pengujian yang berkisar antara 86 sampai 97,5. Penelitian ini  dapat  menjadi  bahan  pertimbangan  bagi  pengembang aplikasi untuk menerapkan PWA pada aplikasinya.

## II. M ETODOLOGI

## A. Pengumpulan Data
Penelitian  dimulai dengan  mengumpulkan  data  dengan cara  studi  literatur  dan  wawancara.  Studi  literatur dilakukan  dengan  cara  meneliti  jurnal-jurnal  yang  terkait dengan penelitian. Wawancara dilakukan dengan pengusaha  UMKM  untuk  mengidentifikasi  masalah  yang dihadapi  ketika  menjalankan  usahanya  terutama  yang berhubungan  dengan  proses  transaksi.  Data-data  yang didapat  pada  proses  ini  dapat  dijadikan  informasi  dan acuan untuk menentukan kebutuhan saat mengembangkan aplikasi.

## B. Alat Bantu Penelitian
Alat  yang  digunakan  pada  penelitian  ini  meliputi Laptop  ASUS  A15  FA516IH  sebagai  perangkat  utama, Realme  5  Pro  RMX1971  sebagai  perangkat  uji,  Chrome sebagai  peramban  utama,  Laravel  sebagai framework utama, dan Laragon sebagai lingkungan pengembangan.

## C. Pengembangan Aplikasi
Proses  pengembangan  aplikasi  dilakukan  dengan  cara mengikuti  metode Waterfall agar  proses  pengembangan lebih terarah. Metode Waterfall terdiri dari 6 tahap, yakni analisis kebutuhan, perancangan, implementasi, pengujian, penyebaran, dan pemeliharaan [9].
1)  Analisis Kebutuhan
Pada  tahap  ini  dilakukan  analisis  kebutuhan.  Analisis kebutuhan  dilakukan  dengan  menentukan  kebutuhan- kebutuhan pada aplikasi berdasarkan data yang dikumpulkan setelah melakukan studi literatur, wawancara,  dan  observasi.  Hasil  dari  analisis  kebutuhan tersebut  selanjutnya  dijadikan  acuan  untuk  merancang aplikasi pada tahap berikutnya.

## 2) Perancangan
Pada  tahap  ini  dilakukan  perancangan  aplikasi berdasarkan  hasil  analisis  kebutuhan  pada  tahap sebelumnya.  Perancangan  aplikasi  dilakukan  dengan menggunakan diagram Unified Modeling Language untuk memvisualisasikan  aplikasi  yang  akan  dikembangkan, Entity  Relationship  Diagram  untuk  memvisualisasikan database,  dan  merancang  struktur  antarmuka  aplikasi. Diagram  dibuat  menggunakan  bantuan  PlantUML.  Hasil dari  perancangan  aplikasi  tersebut  selanjutnya  dijadikan acuan  untuk  mengimplementasi  aplikasi  pada  tahap berikutnya.

## 3)  Implementasi
Pada  tahap  ini  dilakukan  implementasi  berdasarkan hasil  perancangan  aplikasi  pada  tahap  sebelumnya. Implementasi  dilakukan  dengan  perangkat  keras  berupa Laptop  ASUS  TUF  Gaming  A15  FA516IH  dan Smartphone Realme 5 Pro RMX1917 dan perangkat lunak berupa  Chrome  dan  Visual  Studio  Code.  Proses implementasi  dilakukan  menggunakan  Laragon  sebagai lingkungan  pengembangan  (development  environment) yang  sudah  termasuk  di  dalamnya  Apache  Server, MySQL  Server,  Node.js,  PHP,  dan  phpMyAdmin. Aplikasi yang telah diimplementasikan tersebut selanjutnya diuji pada tahap berikutnya.
4) Pengujian
Pada  tahap  ini  dilakukan  pengujian  terhadap  aplikasi yang  sudah  diimplementasikan.  Pengujian  dilakukan dengan  2  cara,  yakni  Black  Box  Testing  untuk  menguji fungsionalitas  aplikasi  apakah  input-output  pada  aplikasi sudah  berjalan  sebagaimana  yang  diharapkan  dan  User Acceptance Testing untuk menguji apakah aplikasi sudah berjalan  dengan  baik  dari  sisi  pengguna.  Hasil  dari pengujian  aplikasi  tersebut  selanjutnya  dijadikan  acuan untuk  menyebarkan  (men-deploy)  aplikasi  pada  tahap berikutnya.

## 5)  Penyebaran
Pada  tahap  ini  dilakukan  penyebaran  terhadap  aplikasi yang  sudah  diuji.  Penyebaran  dilakukan  dengan  cara meng-hosting aplikasi yang telah diuji ke sebuah layanan server agar dapat diakses oleh pengguna melalui berbagai perangkat secara online.

## 6) Pemeliharaan
Pada  tahap  ini  dilakukan  pemeliharaan  terhadap aplikasi  yang  sudah  di-hosting.  Pemeliharaan  dilakukan apabila  masih  ada  kekurangan  pada  aplikasi  yang  tidak ditemukan  pada  tahap-tahap  sebelumnya.  Pemeliharaan dapat  berupa  perbaikan  bug  atau  pembaruan  yang diperlukan pada aplikasi.

## D. Arsitektur Aplikasi

## Gambar 1. Arsitektur Aplikasi
Gambar  1  menggambarkan  arsitektur  aplikasi. Client (pengguna  dan  perangkat)  dan server (aplikasi  dan database )  terhubung  melalui  internet  dan  dapat  saling memberi request dan response .

## E. Unified Modeling Language
Unified  Modeling  Language (UML)  adalah  sebuah metode pemodelan yang digunakan pada perancangan dan pembuatan  perangkat  lunak  yang  berkonsep Object Oriented  Programming (OOP)  atau  pemrograman berorientasi objek. UML adalah sebuah standar penulisan atau sejenis blueprint yang menggambarkan sebuah proses bisnis, aktor yang terlibat, dan kelas-kelas yang terhubung [10].  UML  digunakan  untuk  menggambarkan  sebuah proses  bisnis  dan  memodelkannya  dengan  notasi-notasi tertentu. Notasi-notasi ini bertujuan untuk memvisualisasikan  setiap  relasi  setiap  entitas  pada  OOP [11].
UML  terbagi  menjadi  2  jenis  diagram,  yakni structure diagram dan behaviour  diagram . Structure  diagram terdiri  dari class  diagram , composite  structure  diagram, component diagram , deployment diagram , object diagram , dan package  diagram .  Behaviour  diagram  terdiri  dari activity diagram , interaction  diagram , use  case  diagram , dan state  machine  diagram .  Interaction  diagram  sendiri terbagi  lagi  menjadi  beberapa  diagram,  yakni sequence diagram , interaction overview diagram , communication diagram , dan timing diagram [12].
Gambar 2. Diagram-Diagram pada Unified Modeling Language

## 1)  Use Case Diagram
TABEL I
K ETERANGAN A KTOR
No Aktor Keterangan 1 Owner Merupakan pengguna aplikasi yang bertindak sebagai pemilik usaha.
Pemilik usaha dapat mengelola data usaha, diskon, item, kategori, merek, unit, pemasok, pembelian, penjualan, stok, pengguna, pemasukan, pengeluaran, pelanggan, melakukan transaksi jual beli, dan melihat laporan.
2 Admin Merupakan pengguna aplikasi yang bertindak sebagai pengelola usaha. Pengelola usaha dapat mengelola data diskon, item, kategori, merek, unit, pemasok, pembelian, penjualan, stok, pelanggan, dan melakukan transaksi jual beli.
3 Staff
Merupakan pengguna aplikasi yang
bertindak sebagai karyawan usaha. Karyawan usaha dapat mengelola pelanggan dan melakukan transaksi jual beli.
TABEL II K ETERANGAN U SE CASE No Use Case Keterangan 1 Manage Business Mengelola data usaha yang dimiliki. 2 Manage User Mengelola data pengguna pada usaha, seperti menambah, mengubah, dan menghapus. 3 Manage Item Mengelola data item pada usaha, seperti menambah, mengubah, dan menghapus. 4 Manage Item Brand Mengelola data merek item pada usaha, seperti menambah, mengubah, dan menghapus. 5 Manage Item Category Mengelola data kategori item pada usaha, seperti menambah, mengubah, dan menghapus. 6 Manage Item Discount Mengelola data diskon item pada usaha, seperti menambah, mengubah, dan menghapus. 7 Manage Item Stock Mengelola data stok item pada usaha, seperti menambah, mengubah, dan menghapus. 8 Manage Item Unit Mengelola data unit item pada usaha, seperti menambah, mengubah, dan menghapus. 9 Manage Income Mengelola data pemasukan pada usaha, seperti menambah, mengubah, dan menghapus. 10 Manage Expense Mengelola data pengeluaran pada usaha, seperti menambah, mengubah, dan menghapus. 11 Manage Customer Mengelola data pelanggan pada usaha, seperti menambah, mengubah, dan menghapus. 12 Manage
Supplier Mengelola data pemasok pada usaha, seperti menambah, mengubah, dan menghapus. 13 Manage Purchase Mengelola data pembelian pada usaha, seperti menambah,
mengubah, dan menghapus.
No Use Case Keterangan 14 Manage Sale Mengelola data penjualan pada usaha, seperti menambah, mengubah, dan menghapus. 15 Point of Sale Melakukan proses transaksi jual beli.

## 2)  Activity Diagram
Gambar 4. Activity Diagram Point of Sale
Gambar  4  menggambarkan  aktivitas  pengguna  ketika melakukan  transaksi  pada  POS.  Aktivitas  diawali  dengan pengguna mengakses halaman POS. Kemudian, pengguna menambahkan item-item yang dipesan. Kemudian, ketika item-item  yang  dipesan  sudah  ditambahkan,  pengguna memasukan detail pesanan. Terakhir, data penjualan akan disimpan  ke database dan  aplikasi  akan  menampilkan struk belanja.

## JUSTIN (Jurnal Sistem dan Teknologi Informasi)  Vol. 12 , No. 2 , April 2024

## 3)  Class Diagram
Gambar 5. Class Diagram
T ABEL III C LASS D IAGRAM No Nama Kelas Deskripsi 1 User Merepresentasikan pengguna yang dapat melakukan login ,
logout , register , dan reset password . 2 Business Merepresentasikan usaha dengan fungsi mengirim data yang berelasi dengan usaha. 3 Discount Merepresentasikan diskon dengan fungsi mengirim data yang berelasi dengan diskon. 4 Item Merepresentasikan item dengan fungsi mengirim data yang berelasi dengan item. 5 Category Merepresentasikan kategori dengan fungsi mengirim data yang berelasi dengan kategori. 6 Brand Merepresentasikan merek dengan fungsi mengirim data yang berelasi dengan merek. 7 Unit Merepresentasikan unit dengan fungsi mengirim data yang berelasi dengan unit. 8 Supplier Merepresentasikan pemasok dengan fungsi mengirim data yang berelasi dengan pemasok. 9 Purchase Merepresentasikan pembelian dengan fungsi mengirim data yang berelasi dengan pembelian. 10 PurchaseDetail Merepresentasikan detail pembelian dengan fungsi mengirim data yang berelasi dengan detail pembelian. 11 Sale Merepresentasikan penjualan dengan fungsi mengirim data yang berelasi dengan penjualan. 12 SaleDetail Merepresentasikan detail penjualan dengan fungsi mengirim data yang berelasi dengan detail penjualan. 13 Stok Merepresentasikan stok dengan fungsi mengirim data yang berelasi dengan stok. No Nama Kelas Deskripsi 14 Income Merupakan kelas yang merepresentasikan pemasukan. 15 Expense Merupakan kelas yang merepresentasikan pengeluaran.

## F. Entity Relationship Diagram
Entity  Relationship  Diagram (ERD)  adalah  sebuah model  jaringan  kerja  yang  menguraikan  susunan  data yang  disimpan  pada  sistem  secara  abstrak  dan  sebagai penerjemah  hubungan  antara  entitas-entitas  yang  ada. ERD  berfungsi  untuk  mendeskripsikan  relasi-relasi  yang ada  pada  setiap  entitas  dan  mengidentifikasi  ciri-ciri  dari entitas tersebut agar dapat dengan mudah diimplementasikan  ke  dalam  bentuk  tabel-tabel database yang  digunakan  untuk  menyimpan  data.  ERD  terdiri  dari 3 elemen, yaitu Entitas, Atribut, dan Relasi. Entitas adalah objek utama yang menjadi pusat perhatian, seperti makluk hidup,  benda,  atau  suatu  kondisi  tertentu.  Atribut  adalah informasi  yang  berhubungan  dengan  entitas,  seperti manusia  yang  memiliki  atribut  nama,  jenis  kelamin,  dan sejenisnya.  Relasi  adalah  hubungan  antar  entitas,  seperti seorang guru mengajar banyak murid, relasi dapat berupa one to one , one to many , dan many to many [13].

## Gambar 6. Entity Relationship Diagram
Gambar  6  menggambarkan  relasi  antar  tabel  pada aplikasi yang dikembangkan menggunakan ERD.

## G. Struktur Antarmuka

## Gambar 7 Struktur Antarmuka
Gambar  7  menggambarkan  struktur  antarmuka  yang terdiri  dari  halaman  dasbor  sebagai  halaman  utama  dan sub halaman lainnya yang dapat diakses melalui dasbor.

## III. H ASIL DAN P EMBAHASAN
A. Hasil Aplikasi
Hasil  penelitian  berupa  aplikasi Point  of  Sale berbasis Progressive  Web  App yang  di- hosting pada server dan diuji  menggunakan Black  Box  Testing dan User Acceptance  Testing .  Penerapan Progressive  Web App diuji menggunakan Lighthouse pada browser Chrome.

## Gambar 8. Halaman Dasbor
Gambar  8  adalah  tampilan  halaman  dasbor.  Pada halaman  ini user dapat  melihat  data-data  mengenai usahanya  secara  garis  besar  dan  ringkas,  mulai  dari  data pembelian,  penjualan,  pemasukan,  pengeluaran,  dan sejenisnya yang berkaitan dengan usahanya.

## Gambar 9. Halaman Point of Sale
Gambar 9 adalah tampilan halaman Point of Sale . Pada halaman  ini  user  dapat  memproses  barang/jasa  yang dipesan,  mulai  dari  menambahkan  item  yang  dipesan, memilih  data  pelanggan,  memproses  pesanan,  menahan pesanan, dan membatalkan pesanan.

## B. Hasil Uji
1)  Black Box Testing
Black box testing atau pengujian black box adalah salah satu  metode  pengujian  perangkat  lunak  yang  berfokus pada  fungsionalitas  yang  ada  pada  aplikasi.  Pengujian black  box  bertujuan  untuk  mengetahui  kesesuaian  setiap input-output.Pengujian  dilakukan  dengan  menentukan kasus uji ( test case ), skenario uji ( test scenario ), dan hasil yang  diharapkan  ( expected  output ).  Apabila  hasil pengujian  sama  dengan  hasil  yang  diharapkan,  maka fungsionalitas aplikasi sudah berjalan sesuai [14].
Hasil  dari Black  Box  Testing menunjukkan  83  dari  83 hasil  pengujian  sudah  sesuai,  artinya  aplikasi  yang
dikembangkan  sudah  berjalan  normal  sebagaimana mestinya.  Adapun  hasil  dari User  Acceptance  Testing menunjukkan  skor  544  dari  600  dengan  kriteria  “Sangat Positif”,  artinya  aplikasi  yang  dikembangkan  sudah mendapat respon sangat positif dari pengguna

## 2)  User Accepatance Testing
User Acceptance Testing (UAT) adalah pengujian yang dilakukan  dengan  meminta  penilaian  pengguna  dengan hasil  sebuah  dokumen  hasil  uji  yang  menyatakan  bahwa sebuah  perangkat  lunak  sudah  memenuhi  kebutuhan  atau belum.  UAT  dapat  berupa  kuesioner  yang  nantinya dijawab  oleh  pengguna  selaku  responden  yang  mana jawaban  tersebut  akan  dikumpulkan  dan  diolah  untuk mendapatkan  hasil  pengujian.  UAT  disebut  juga  sebagai uji  tahap  akhir  pada  pengujian  yang  dilakukan  untuk mengetahui  apakah  masih  terdapat  kekurangan  atau  tidak pada perangkat lunak yang dikembangkan [15].
Hasil  dari  User  Acceptance  Testing  menunjukkan  10 responden  yang  merespon  12  pertanyaan  yang  meliputi aspek  tampilan,  pengalaman,  fungsional,  dan  performa menghasilkan  skor  544  dari  600  yang  dihitung menggunakan skala Likert dengan kriteria sangat positif.

## IV. K ESIMPULAN
Berdasarkan  hasil  penelitian  yang  telah  dilakukan, tujuan  penelitian  untuk  menghasilkan  aplikasi Point  of Sale berbasis Progressive  Web  App untuk  Usaha  Mikro Kecil  dan  Menengah  telah  tercapai  dengan  batasan pengujian pada usaha mikro. Aplikasi yang dikembangkan juga  sudah  bekerja  sesuai  dengan  yang  diharapkan berdasarkan Black Box Testing dengan 83 hasil pengujian dari 83 skenario pengujian sudah sesuai dengan hasil yang diharapkan  dan  mendapat  respon  yang  sangat  positif  dari pengguna dengan skor 544 dari 600 berdasarkan hasil dari User  Acceptance  Testing .  Hasil  dari  kedua  metode pengujian  tersebut  menunjukkan  aplikasi  POS  berbasis PWA untuk UMKM sudah sangat baik.
D AFTAR P USTAKA
[1] M. Florensia, S. Rostianingsih, and A. Handojo, “Aplikasi
Transaksi Bisnis Usaha Mikro Kecil dan Menengah dengan Fitur Penyimpanan Data Online dan Offline,” Jurnal Infra , vol.
9, no. 2, pp. 308–313, 2021.
[2] A. Najib and M. Y. Zain, “Aplikasi Point of Sale Multi Outlet dan Multi Payment Berbasis Web dan Android,” Journal of Chemical Information and Modeling , vol. 21, no. 1, pp. 1–9, 2020.
[3] R. G. Guntara, “Firebase Realtime Database untuk Aplikasi Point of Sale UMKM Berbasis Cloud Computing pada Smartphone Android,” Impression: Jurnal Teknologi dan Informasi , vol. 1, no. 2, pp. 1–10, 2022.
[4] T. Hidayat and G. Farell, “Rancang Bangun Sistem Informasi Point of Sale di Kedai Kopi,” Jurnal Pendidikan Tambusai , vol. 7, no. 2, pp. 18372–18381, 2023.
[5] S. Sukirno and H. Suhendar, “Pengembangan Sistem Point of Sale Menggunakan Framework CodeIgniter Berbasis Web,” Jurnal Algoritma , vol. 19, no. 2, pp. 660–668, 2022.
[6] A. A. Kurniawan, “Analisis Performa Progressive Web Application (PWA) pada Perangkat Mobile,” Jurnal Ilmiah Informatika Komputer , vol. 25, no. 1, pp. 18–31, 2020.
[7] T. B. Tahir, M. Rais, and M. A. H. Sirad, “Aplikasi Point of Sale Menggunakan Framework Laravel,” JIKO (Jurnal Informatika dan Komputer) , vol. 2, no. 2, pp. 55–59, 2019.
[8] P. G. S. C. Nugraha, N. W. Wardani, and I. W. Sukarmayasa, “Rancang Bangun Sistem Informasi Software Point of Sale
(POS) dengan Metode Waterfall Berbasis Web,” JST (Jurnal Sains Dan Teknologi) , vol. 10, no. 1, pp. 92–103, 2021.
[9] F. Z. Idris and N. N. Rofiq, “Perancangan Sistem Informasi
Point of Sale Berbasis Website Menggunakan Model Waterfall (Studi Kasus: CV. Anugerah Berkat Teknik),” Buletin Ilmiah Ilmu Komputer dan Multimedia (BIIKMA) , vol. 1, no. 2, pp. 217–226, 2023.
[10] E. N. Aisyah, A. Hayat, and A. A. Sajidin, “Rancang Bangun Aplikasi Point of Sale Tiket Bus pada PT. Primajasa Perdanarayautama,” Journal of Innovation and Future Technology (IFTECH) , vol. 1, no. 1, pp. 13–24, 2019.
[11] A. Aminuddin, “Implementasi Unified Modeling Language (UML) pada Perancangan Aplikasi Wifi-Talkie Berbasis TCP/IP,” Sistemasi: Jurnal Sistem Informasi , vol. 8, no. 2, pp. 265–275, 2019.
[12] V. Yasin, “Tools Rekayasa Perangkat Lunak dalam Membuat Pemodelan Desain Menggunakan Unified Modeling Language (UML),” TRIDHARMADIMAS: Jurnal Pengabdian Kepada Masyarakat Jayakarta , vol. 1, no. 2, pp. 139–150, 2021.
[13] Z. F. Azzahra and A. D. Anggoro, “Analisis Teknik Entity
Relationship Diagram dalam Perancangan Database Sebuah Literature Review,” INTECH (Informatika dan Teknologi) , vol. 3, no. 1, pp. 8–11, 2022.
[14] A. P. Putra, F. Andriyanto, K. Karisman, and T. D. M. Harti, “Pengujian Aplikasi Point of Sale Menggunakan Blackbox Testing,” Jurnal Bina Komputer , vol. 2, no. 1, pp. 74–78, 2020.
[15] I. Wahyudi, F. Fahrullah, F. Alameka, and H. Haerullah,
“Analisis Black Box Testing dan User Acceptance Testing Terhadap Sistem Informasi Solusimedsosku,” Jurnal Teknosains Kodepena , vol. 4, no. 1, pp. 1–9, 2023.