## APLIKASI PENJUALAN PRODUK IT DAN JASA SERVICE BERBASIS ANDROID DENGAN METODE MVVM
Julianto Royand Wahyudi Simanullang 1) , Fransiskus Zoromi2 ) , Unang Rio 3) , Torkis Nasution 4) 1-4 Teknik Informatika, STMIK AMIK Riau email: JRoyand13@gmail.com , fransiskuszoromi@sar.ac.id , unangrio@sar.ac.id , torkisnasution@sar.ac.id

## Abstract
This  study  aims  to  develop  an  Android-based  application  for  IT  product  sales  and  service  for JRComputer.pku, a store in Pekanbaru that sells various IT products and offers laptop and computer repair services. Using the waterfall development method, the study involves system design with UML modeling and  the  implementation  of  the  MVVM  (Model-View-ViewModel)  architecture  to  separate  business logic from the user interface. The Flutter framework is employed to create a cross-platform application that can run on both Android and iOS, while the Headless CMS Strapi enables efficient content management. The implementation results show improved efficiency in sales and service management, with features such as product  catalog,  ordering,  and  map  integration  using  LeafletJS.  Blackbox  testing  ensures  that  the application functions as expected, with various features meeting user needs. The study concludes that the developed application enhances work efficiency for both store owners and customers, utilizing effective and intuitive technology.
Keywords : IT product sales, Android application, MVVM, Flutter framework, Headless CMS.

## 1. PENDAHULUAN
Dalam  era  digital  yang  semakin  maju, kebutuhan  akan  teknologi informasi dan pelayanan yang cepat dan efisien menjadi sangat penting  [1]–[8].  Industri  penjualan  produk  IT (Informasi Teknologi)  dan  jasa  service  berperan signifikan  dalam  memenuhi  kebutuhan  ini. Penggunaan  aplikasi  mobile  telah  menjadi  cara yang  efektif  untuk  memperluas  jangkauan  dan meningkatkan kemudahan akses bagi pelanggan.
JRComputer.pku  adalah  sebuah  toko yang beralamat di Jalan Bakti Husada Pekanbaru yang menjual produk IT seperti Mouse, keyboard, SSD ,  dan  produk  IT  lainnya.  Selain  itu, JRcomputer.pku menawarkan jasa service laptop dan  komputer.  Dalam  rangka  meningkatkan penjualan  dan  pelayanan  terhadap  pelanggan maka  dirancang  sebuah  aplikasi  penjualan produk IT dan jasa service berbasis Android yang dapat  membantu  menghubungkan  pihak  toko dengan pelanggan. Aplikasi yang akan dibangun merupakan aplikasi mobile yang interaktif untuk industri  ini  yang  menyediakan  layanan  khusus pada  perangkat  elektronik  seperti  komputer, ponsel pintar, tablet, atau perangkat lainnya.
Dalam  rangka  mengembangkan  aplikasi penjualan  produk  IT  dan  jasa service berbasis Android dengan  memanfaatkan  metode  MVVM ( Model-View-  Viewmodel) .  Metode  MVVM dipilih karena mampu memisahkan logika bisnis dari tampilan pengguna. Selain itu, MVVM dapat memberikan keuntungan bagi pengguna program antara  lain  peningkatan  performa  pada  aplikasi berskala  besar  dimana  MVVM  ini  digunakan dibandingkan dengan program atau aplikasi yang tidak menggunakan MVVM ini dalam
Pembangunan programnya [9]–[13]. Dalam pengembangan aplikasi, penelitian ini juga menggunakan teknologi cross- platform framework (flutter). Penggunaan framework  flutter  memungkinkan  pengembang untuk  membuat  aplikasi  yang  dapat  berjalan  di sistem  operasi  Android  dan  iOS  dengan  kode yang  sama.  Framework  flutter  merupakan  SDK (Software Development
Kit) untuk pengembangan aplikasi mobile yang dikembangkan oleh google [14]. Pengembangan Aplikasi penjualan produk  IT  dan  jasa service berbasis Android JRComputer.pku  dalam  manajemen  konten
https://jurnal.murnisadar.ac.id/index.php/Tekinkom/ 63
menggunakan Headless  CMS (Strapi). Strapi memungkinkan  pengembang  untuk  dengan mudah  membuat  dan  mengelola  konten  yang diperlukan  untuk  aplikasi web atau mobile melalui antarmuka pengguna yang intuituf [15].
Aplikasi  serupa  pada  saat  ini  telah banyak  dirancang  dan  dibangun  dengan  tujuan untuk  memecahkan  masalah,  seperti:        untuk menangani    masalah    mengelola  pelaporan kerusakan  pada  Program    Studi    Teknologi Informasi  Politeknik  Negeri    Padang  [16]. Berdasarkan penguraian sebelumnya pada aplikasi,  menunjukkan  bahwa  dengan  adanya MVVM pengembangan aplikasi di kemudian hari menjadi  lebih  mudah  dikarenakan  adanya pemisahan dalam layer aplikasi.

## 2. METODE PENELITIAN
Tahapan penelitian yang akan digunakan penulis  dalam  penelitian  ini  menggunakan metode  pengembangan waterfall .  Perancangan sistem  menggunakan  pemodelan  UML  yang merupakan  sebuah  bahasa  yang  berdasarkan grafik/gambar untuk memvisualisasikan, menspesifikasikan, membangun,
dan
pendokumentasian dari sebuah sistem pengembangan software berbasis Object Oriented (OO)  [17].  Pemodelan  UML  seperti: membuat Use  Case  diagram , Activity  diagram , Sequence diagram , Class diagram dan dilanjutkan  dengan  perancangan  antarmuka  dari sistem.  Setelah  itu,  dilakukan  perancangan arsitektur  aplikasi  (MVVM),  dan  yang  terakhir perancangan Headless CMS . Setelah perancangan  sistem  selesai,  maka  dilanjutkan dengan  tahap  implementasi  sistem  dengan menggunakan Framework  flutter dan DBMS MySQL.

## 2.1 Metode Waterfall
Metode  waterfall  memberikan  struktur yang  jelas  dalam  pengembangan  aplikasi penjualan  produk  IT  dan  jasa  service  berbasis Android,  memastikan  setiap  tahap  dilakukan secara sistematis dan menyeluruh. Hal ini sangat penting  untuk memastikan  aplikasi  yang dihasilkan  memenuhi  kebutuhan  dan  harapan
pengguna, serta mudah  dalam pemeliharaan dan pengembangan lebih lanjut.
Gambar 1. Metode Waterfall
2.2 Pemodelan UML
Pemodelan ini digunakan untuk memvisualisasikan,  Analisa  dan  desain  suatu perangkat lunak dengan pemrograman berorientasi objek
1. Use Case Diagram
Use  Case  diagram  dari  aplikasi  yang akan dirancang ini disajikan pada gambar 2.
Gambar 2. Use Case Diagram
2. Activity Diagram
Activity  diagram adalah  suatu  diagram yang  digunakan  untuk  pemodelan  terhadap
https://jurnal.murnisadar.ac.id/index.php/Tekinkom/ 64
proses-proses  yang  ada  pada  sebuah  sistem[18] Activity  Diagram menggambarkan  alur  yang dilewati  pengguna  dalam  melakukan  suatu aktifitasi di sistem.
Gambar 3. Activity Diagram mengelola data produk

## 3. Sequence Diagram
Sequence diagram adalah suatu diagram yang  menjelaskan  rancangan  interaksi  dan serangkain pesan antara beberapa objek.[19]
Gambar 4. Sequence Diagram kelola pesanan
Gambar 5. Sequence Diagram input pesanan
4. Class Diagram
Class diagram merupakan suatu diagram yang menggambarkan struktur suatu sistem yang menampilkan pendefinisian kelas-kelas,
antarmuka-antarmuka, kolaborasi-kolaborasi,
dan  relasi  antar  relasi[20] Class  diagram pada penelitian ini terdiri dari beberapa class yaitu data produk,  data  pengunjung,  data  pemesanan,  data laporan, dan data pemilik.

## Gambar 6. Class Diagram
2.3 Perancangan antarmuka
a. Rancangan Halaman Login Admin Pada halaman login admin terdapat form email dan password yang harus di isi untuk bisa lanjut ke halaman berikutnya pada gambar 2.6
https://jurnal.murnisadar.ac.id/index.php/Tekinkom/ 65

## Gambar 7. Rancangan Halaman Login Admin
b. Perancangan Halaman Kelola Pesanan
Pada  Gambar  dibawah admin dapat melihat  pesanan  pelanggan yang  telah  masuk.
Kemudian dapat melihat detail pesanan tersebut
Gambar 8. Rancangan Halaman Kelola Pesanan
c. Rancangan Halaman Utama Pelanggan
Pada  halaman dashboard pelanggan terdapat  kategori  produk  dan  katalog  disertakan nama produk dan harga produk.
Gambar 9. Rancangan Halaman Utama

## d. Rancangan Halaman Detail Produk
Pada  halaman  detail  produk  ini  terdapat foto  produk,  nama  produk,  kategori,  dan deskripsi terkait produk tersebut
Gambar 10. Rancangan Halaman Detail Produk

## e. Rancangan Halaman Login Pelanggan
Pada  halaman  ini,  Sebelum  melakukan pemesanan  pelanggan  diharuskan login terlebih dahulu.

## Gambar 2.11.  Rancangan Halaman Login Pelanggan
f. Rancangan Form Register Pelanggan
Pada halaman registrasi pelanggan harus mengisi form yang  berisikan  nama  lengkap, email , no handphone , password , dan alamat.

## Gambar 12. Rancangan Form Register Pelanggan
g. Rancangan Halaman Input Pesanan
Pada  halaman input pesanan  terdapat nama produk, alamat pengiriman, jenis pengiriman,  rincian  biaya  yang  terdiri  dari subtotal,  pengiriman,  dan  total  serta  informasi mengenai pembayaran.
Gambar 13 Rancangan Halaman Input Pesanan
Adapun  pola  arsitektur  yang  digunakan dalam  pengembangan  aplikasi  ini  menggunakan Model-View-ViewModel (MVVM)  berikut  ini adalah gambar perancangannya.
Gambar 14. Perancangan Arsitektur Aplikasi(MVVM)

## 3. HASIL DAN PEMBAHASAN
Pada tahap ini berkaitan dengan hasil dari tampilan  aplikasi mobile yang  telah  di implementasikan
https://jurnal.murnisadar.ac.id/index.php/Tekinkom/ 67
3.1 Hasil Tampilan Aplikasi
a. Tampilan Halaman Utama
Tampilan    halaman  utama    adalah tampilan  yang  berisi  detail  katalog  produk  yang dapat dilihat oleh pemilik atau pelanggan.
Gambar 15. Tampilan Halaman Utama
b. Tampilan Halaman Login
Tampilan halaman login adalah tampilan yang  digunakan  pemilik  untuk  selanjutnya memasuki dashboard  admin dan  pelanggan untuk  dapat  melakukan  pemesanan  produk,  jasa service .
Gambar 16. Tampilan Halaman Login
c. Tampilan Register Pelanggan
Tampilan register pelanggan  adalah tampilan  untuk  pelanggan  yang  belum  memiliki akun,  maka  dipersilahkan  untuk  mendaftar terlebih dahulu.
Gambar 17. Tampilan Register Pelanggan

## d. Tampilan Kelola Pesanan( admin )
Tampilan  kelola  pesanan  ini  merupakan tampilan  kelola  pesanan  untuk admin ,  dimana admin dapat melihat list pesanan yang masuk dari pelanggan.
Gambar 18. Tampilan Kelola Pesanan(admin)
3.2 Hasil Tampilan Web CMS
a. Halaman Login
Pada halaman login merupakan tampilan awal sebelum masuk ke dashboard web .
Gambar 19. Halaman Login

## b. Halaman Kelola Itempesanan
Halaman kelola Itempesanan merupakan halaman  untuk  mengelola  item  pesanan  yang terdiri  dari  jumlah,  harga,  total,  status, pemesanan, produk dan pemasangan.
Gambar 20. Halaman Kelola Itempesanan

## c. Halaman Kelola Kategori
Pada  halaman  ini  untuk  mengelola kategori  produk  yang  terdiri  dari  nama,  gambar dan produk.
Gambar 21. Halaman Kelola Kategori
3.3 Pembahasan
1. Implementasi Framework Flutter
Framework flutter memiliki kemampuan untuk  menggunakan  kode  yang  sama  untuk pengembangan  aplikasi  dengan  sistem  operasi Android dan iOS . Selain menghemat waktu, juga menawarkan  fleksibilitas  tinggi  dalam  UI/UX
Design . Adapun penggunaan komponen Framework Flutter ini contohnya komponen view untuk  mengatur layout ,  komponen text untuk menampilkan  teks  dan  komponen button untuk membuat button aplikasi yang intuitif dan mudah digunakan pengguna.
Mengenai  performa  dan  kecepatan, framework flutter menggunakan Just-In- Time (JIT) dan Hot Reloading dalam
pengembangan  aplikasi,  yang  memungkinkan perubahan kode secara real-time dan perubahannya  dapat  dilihat  langsung  tanpa melakukan rebuild .
2. Implementasi MVVM
a. Model Model dalam arsitektur MVVM
bertanggungjawab  atas  pengelolaan  data  dan logika  bisnis  yang  terkait  dengan  penjualan produk  IT  dan  jasa service .  Berikut  ini  contoh implementasi Model dalam MVVM.
Gambar 23. Implementasi Model b. View View adalah komponen yang bertanggungjawab atas tampilan pengguna dalam arsitektur MVVM. Berikut ini contoh
https://jurnal.murnisadar.ac.id/index.php/Tekinkom/ 69
implementasi View pesanan menggunakan Framework Flutter .
Gambar 24. Implementasi View c. View Model
View model bertindak sebagai penghubung antara Model dan View. View model mengatur pemrosesan dari model dan menyediakan  data  yang  dibutuhkan  oleh view .
Berikut  ini  contoh  implementasi  View  model pesanan menggunakan Framework Flutter .
Gambar 25. Implementasi Viewmodel
3. Pengujian
Pengujian  merupakan  tahap  penting dalam  pengembangan  aplikasi  penjualan  produk IT  dan  jasa service berbasis android .  Pengujian dalam  penelitian  ini  menggunakan  pengujian blackbox.  Pengujian blackbox adalah  pengujian yang  dilakukan  untuk  memastikan  bahwa aplikasi  berfungsi  dengan  baik  dan  memenuhi kebutuhan pengguna [21]
Berikut adalah tabel pengujian blackbox yang menjelaskan tahapan pengujian berdasarkan fitur yang ada.
Tabel 1. Tabel Pengujian Blackbox N o Tahapan Aktor Keterangan Hasil 1 Melihat Katalog Produk Pelang- gan Pengguna dapat langsung melihat produk saat membuka aplikasi tanpa melakukan login terlebih dahulu Sesuai harapan 2 Melaku- kan login Admin, pelang- gan Pelanggan diharuskan login sebelum melakukan pemesanan produk. Sementara Admin diharuskan melakukan login diawal sebelum mengakses menu utama. Sesuai harapan 3 Melaku- kan Register Pelang- gan Sebelum pelanggan dapat melakukan login , pelanggan harus melakukan proses registrasi terlebih dahulu. Registrasi akan mencakup pengisian informasi pribadi dan pembuatan akun. Sesuai harapan 4 Melaku- kan Pemesan an Produk Pelang- gan Pelanggan dapat melakukan pemesanan produk setelah melakukan login , kemudian melakukan pemesanan dengan menentukan alamat pengiriman dan mengunggah bukti pembayaran Sesuai harapan
https://jurnal.murnisadar.ac.id/index.php/Tekinkom/ 70
5 Melihat Tentang JRcompu ter.pku Pelang- gan Pelanggan dapat melihat detail dari JRcomputer.pku Sesuai harapan 6 Menga- tur Profile Penggun a Pelang- gan Pelanggan dapat mengatur profil pribadinya Sesuai harapan 7 Mengelo la Data Produk Admin Admin dapat mengelola persediaan data produk Sesuai harapan 8 Mengelo la Data Pemesan an Admin Admin dapat mengelola data pemesanan Sesuai harapan

## 4. KESIMPULAN
Berdasarkan hasil penelitian yang dilakukan penulis di toko JRComputer.pku dapat disimpulkan  bahwa  hasil  dari  pengembangan aplikasi  penjualan  produk  IT  dan  Jasa service berbasis Android mampu meningkatkan efisiensi kerja  dari  pemilik  maupun  dari  pelanggan. Penggunaan Framework  Flutter sebagai cross- platform memungkinkan pengembangan aplikasi yang  dapat  di  jalankan  di  berbagai platform dengan kode yang efisien. Penggunaan Headless CMS memungkinkan  admin  dalam  pengelolaan konten  dengan  cepat.  Integrasi  fitur map menggunakan LeafletJS memungkinkan  pemilik toko dalam menemukan lokasi pelanggan.

## 5. REFERENSI
[1] V.  M.  M.  Siregar,  E.  Damanik,  M.  R. Tampubolon, E. I. Malau, E. P. S. Parapat, and D. S. Hutagalung, “Sistem Informasi Administrasi  Pinjaman  (Kredit)  Pada Credo Union Modifikasi (CUM) Berbasis Web,” J. Tekinkom , vol. 3, no. 2, pp. 62– 69, 2020, doi: 10.37600/tekinkom.v3i2.193. [2] H. Sugara, E. Sirait, M. A. Hanafiah, and N.  F.  Siagian,  “Sistem  Informasi Pembayaran  SPP  Pada  SMK  Swasta
Teladan  Tanah  Jawa  Menggunakan Vb.Net,” J. Tek. Inf. dan Komput. , vol. 3,
no. 1, p. 14, 2020, doi: 10.37600/tekinkom.v3i1.125.
[3] V.  M.  M.  Siregar  and  N.  F.  Siagian,
“Sistem  Informasi  Front  Office  Untuk Peningkatan Pelayanan Pelanggan Dalam Reservasi Kamar Hotel,” J. Tek. Inf. dan Komput. ,  vol.  4,  no.  1,  pp.  77–82,  2021, doi: 10.37600/tekinkom.v4i1.279.
[4] V.  M.  M.  Siregar  and  M.  A.  Hanafiah, “Perancangan Aplikasi Augmented
Reality Untuk Edukasi Penerapan Konsep Green  Economy  Dalam  Pengembangan Desa Wisata Sebagai Upaya Mewujudkan Pembangunan Berwawasan Lingkungan,” J. TEKINKOM , vol. 6, no. 2, pp. 339–348, 2023, doi: 10.37600/tekinkom.v6i2.950.
[5] V. M. M. Siregar, K. Sinaga, E. Sirait, A. S. Manalu, and M. Yunus, “Classification of Customer Satisfaction Through Machine  Learning :  An  Artificial  Neural
Network Approach,” IOTA , vol. 3, no. 3, pp. 273–282, 2023, doi: 10.31763/iota.v3i3.643.
[6] V. M. M. Siregar, “Perancangan Website Sebagai  Media  Promosi  Dan  Penjualan Produk,” TAM  (Technology  Accept. Model. , vol. 9, no. 1, pp. 15–21, 2018.
[7] H.  A.  Simbolon  and  V.  M.  M.  Siregar, “Perancangan  Sistem  Informasi  Berbasis
E-Commerce Untuk
Peningkatan Penjualan  Produk  Jersey  Olah  Raga,” J.
Tek.  Inf.  dan  Komput. ,  vol.  1,  no.  2,  pp. 49–54, 2018.
[8] V.  M.  M.  Siregar,  “Sistem  Informasi Pembelian  Dan  Penjualan  Pakaian  Pada Galoenk  Distro  Pematangsiantar,” JurTI (Jurnal  Teknol.  Informasi) ,  vol.  1,  no.  2, pp. 219–227, 2017.
[9] C. Diantoni et al. , “Arsitektur Mvvm Dan Framework  Jetpack  Compose  Pada Pengembangan  Aplikasi  Android  (Studi Kasus: Aplikasi Sukacolab),” J. Mhs. Tek. Inform. ,  vol.  8,  no.  3,  pp.  3216–3224, 2024.
[10] M. I. Alfathar et al. , “Penerapan MVVM
(Model
View Viewmodel) pada
Pengembangan  Aplikasi  Bank  Sampah Digital,” J.  Ris.  dan  Apl.  Mhs.  Inform. , vol.  5,  no.  2,  pp.  406–414,  2024,  doi:
https://jurnal.murnisadar.ac.id/index.php/Tekinkom/ 71
10.30998/jrami.v5i2.11071.
[11] F. F. Iskandar, G. A. A. Wisudiawan, and ..., “Implementasi dan Evaluasi Pengaruh MVVM Pattern terhadap Reusability pada Aplikasi Berbasis Mobile  Android (Studi Kasus Sidang Tugas Akhir S1 Informatika …,” …  Eng. ,  vol.  10,  no.  2,  pp.  1790– 1807, 2023, [Online]. Available: https://openlibrarypublications.telkomuni versity.ac.id/index.php/engineering/articl e/view/20028%0Ahttps://openlibrarypubl ications.telkomuniversity.ac.id/index.php /engineering/article/view/20028/19393
[12] I.  M.  Riyadhi,  Intan  Purnamasari,  and Kamal  Prihandani,  “Penerapan  Pola Arsitektur  Mvvm  Pada  Perancangan Aplikasi Pengaduan Masyarakat Berbasis Android,” INFOTECH J. , vol. 9, no. 1, pp. 147–158, 2023, doi: 10.31949/infotech.v9i1.5246. [13] F. Maulana, R. Afyenni, and  A. Erianda, “Aplikasi  Manajemen  Laboratorium
Menggunakan  Metode  MVVM  Berbasis Android,” JITSI  J. Ilm. Teknol. Sist. Inf. , vol.  3,  no.  3,  pp.  88–93,  2022,  doi: 10.30630/jitsi.3.3.94.
[14] F.  D.  Astuti  and  Y.  Hermawan,
“PEMANFAATAN FIREBASE REALTIME DATABASE PADA APLIKASI PEMBELAJARAN AGAMA ISLAM MENGGUNAKAN FRAMEWORK  FLUTTER,” STMIK AKAKOM , pp. 1–11, 2020.
[15] L.  F.  Luthfyana,  “Rancang  Bangun Aplikasi Smart Training Berbasis Android  Menggunakan  Flutter  Dengan Metode  RAD,” JATISI  (Jurnal  Tek. Inform. dan Sist. Informasi) , vol. 8, no. 2, pp. 420–437, 2021, doi:
10.35957/jatisi.v8i2.828.
[16] F.  R.  Maulidy  and  D.  R.  Prehanto, “Rancang  Bangun  Aplikasi  Penjualan
Barang  Toserba  Menggunakan  Metode OOAD (Object Oriented Analysis
Design)  Berbasis  Mobile  Platform  Pada
CV  FCH  Kema  Pole  Indonesia,” J. Emerg. Inf. … , vol. 03, no. 03, pp. 33–42,
2022.
[17] E.  Arribe,  Aryanto,  and  R.  Asrianto, “Aplikasi  E-Marketplace  Menggunakan Arsitektur Mvvm
(Model-View- Viewmodel)  Berbasis  Android,” J.
Fasilkom , vol. 11, no. 2, pp. 75–78, 2021, doi: 10.37859/jf.v11i2.2762.
[18] A. F. Prasetya, Sintia, and U. L. D. Putri, “Perancangan  Aplikasi  Rental  Mobil Menggunakan  Diagram  UML  (Unified Modelling  Language),” J.  Ilm.  Komput. Terap.  dan  Inf. ,  vol.  1,  no.  1,  pp. 14–18, 2022.
[19] A.  Mubarak, “Rancang  Bangun  Aplikasi
Web Sekolah Menggunakan Uml (Unified Modeling Language) Dan
Bahasa Pemrograman Php (Php Hypertext Preprocessor) Berorientasi Objek,” JIKO (Jurnal Inform. dan Komputer) , vol. 2, no. 1, pp. 19–25, 2019,
doi:
10.33387/jiko.v2i1.1052.
[20] E. F. Wati and A. A. Kusumo, “Penerapan Metode  Unified  Modeling  Language  ( UML  )  Berbasis  Desktop  Pada  Sistem Pengolahan  Kas  Kecil  Studi  Kasus  Pada PT Indo Mada Yasa Tangerang,” UNSIKA Syntax  Jyrnal  Inform. ,  vol.  5,  no.  1,  pp. 24–36, 2016.
[21] J.  Shadiq,  A.  Safei,  and  R.  W.  R.  Loly, “Pengujian Aplikasi Peminjaman Kendaraan Operasional Kantor
Menggunakan  BlackBox  Testing,” Inf.
Manag. Educ. Prof.  J. Inf. Manag. , vol. 5, no. 2, p. 97, 2021, doi: 10.51211/imbi.v5i2.1561.