Vol. 10 No. 2 Bulan November 2022                                                                                                        p-ISSN: 2252-5351 Program Studi Teknik Informatika – Fakultas Teknik
e-ISSN: 2656-0860
Universitas Islam Syekh-Yusuf Tangerang

## RANCANG BANGUN APLIKASI E-COMMERCE DENGAN PAYMENT DAN SHIPPING GATEWAY PADA TOKO SEPUTIH.ITU
Ilham Muttaqin 1 , Mohammad Ridwan 2 , Silvia Ayunda Murad 3 1,2, 3 Program Studi Teknik Informatika Universitas Islam Syekh Yusuf, Tangerang Jl. Maulana Yusuf N0 10 Babakan, Kota Tangerang, Banten, Telp 021-5527061
1804030159@students.unis.ac.id 1, , mridwan@unis.ac.id 2 , , silviaayundamurad@unis.ac.id 3

## Abstrak
Kegiatan bisnis dan usaha dapat memberikan keuntungan bagi pemilik toko.  Sebuah kegiatan bisnis yang dijalankan dengan memanfaatkan teknologi internet atau secara online biasa dikenal dengan E- Commerce, pada toko Seputih.itu terdapat beberapa kendala khususnya kegiatan transaksi jual beli yang dilakukan oleh para reseller. Pada Penelitian ini akan dibangun sebuah aplikasi E-commerce berbasis mobile  menggunakan  React  Native  dan  Firebase.  Dengan  Aplikasi  Sistem  E-commerce  yang  akan dibangun dapat membantu pemilik toko dalam mengelola produk, dan data transaksi  dengan sangat mudah. Sistem ini akan menggunakan metode Payment Gateway untuk transaksi pembayaran, dan Shipping Gateway untuk pengecekan harga ongkos kirim pada suatu transaksi. Kedua metode tersebut akan diintegrasikan dengan platform Midtrans Indonesia, dan RajaOngkir
Kata kunci: React Native, E-Commerce, Payment Gateway

## A. Pendahuluan
Sektor  bisnis  telah  berkembang  dan  berjalan  dengan  memanfaatkan  teknologi internet  pada  industri  4.0.  Dengan  teknologi  internet  pemilik  usaha  dapat menggunakan  teknologi  tersebut  dalam  melakukan  sebuah  promosi,  serta memperkenalkan  informasi  produknya  dengan  murah  dan  mudah.  (Febrian  et  al., 2021).  Kegiatan  bisnis  dan  usaha  dapat  memberikan  keuntungan  bagi  pemilik  toko. Seperti  transaksi  penjualan,  memberikan  pelayanan,  atau  informasi  produk.  Sebuah kegiatan bisnis yang dijalankan dengan memanfaatkan teknologi internet yang biasa disebut dengan E-Commerce (Susilo, 2018).
Pada  saat  ini  sistem  transaksi  jual  beli  yang  berjalan  pada  toko  Seputih.itu menggunakan  sistem  yang  manual.  Dimana  pembeli  maupun  reseller  ketika  ingin membeli  suatu  produk,  harus  melakukan  konfirmasi  terlebih  dahulu  kepada  admin Seputih.itu, kemudian konsumen melakukan metode pembayaran dengan cara transfer bank,  dan  mengirimkan  bukti  transaksi  kepada  admin  menggunakan  platform Whatsapp,  kemudian  toko  Seputih.itu  akan  mengirimkan  produk  kepada  ekspedisi yang telah disepakati pada saat transaksi.
Berdasarkan  penelitian  sebelumnya  yang  telah  peneliti  uraikan,  maka
Vol. 10 No. 2 Bulan November 2022                                                                                                        p-ISSN: 2252-5351 Program Studi Teknik Informatika – Fakultas Teknik
e-ISSN: 2656-0860
Universitas Islam Syekh-Yusuf Tangerang
pengembangan akan dilakukan dengan menerapkan aplikasi berbasis mobile. Sistem ini  akan  menggunakan  metode  Payment  Gateway  untuk  transaksi  pembayaran,  dan Shipping Gateway untuk pengecekan harga ongkos kirim pada suatu transaksi.

## B. Metode
E-Commerce  adalah  sebuah  cara  untuk  seseorang  untuk  menjual  barang  secara langsung dan dipromosikan dengan menggunakan media internet. (Alfiah et al., 2020)
Payment  Gateway  merupakan  sebuah  metode  pembayaran  online  yang  memiliki fungsi  mendeskripsikan  dan  melegalkan  informasi  pada  sebuah  transaksi  dengan kebijakan tertentu yang telah diatur oleh pengembang aplikasi.(Fian et al., 2020)
Shipping Gateway adalah sebuah layanan yang memungkinkan sebuah aplikasi atau web e-commerce dapat memberikan informasi terkait estimasi biaya pengiriman produk kepada  konsumen.  Salah  satu  platform  shipping  gateway  yang  terkenal  dan  menjadi andalan di Indonesia yaitu RajaOngkir.(Team, 2021).
Android merupakan sebuah sistem operasi mobile berbasis linux yang mencakup sistem operasi, aplikasi dan middleware. Sistem operasi memprioritaskan aplikasi yang dibangun  sendiri  tanpa  melihat  aplikasi  dari  pihak  ketiga.  (Aziz,  N.,  Pribadi,  G.,  & Nurcahya, 2020).
Arsitektur Monolitik adalah model tradisional untuk membangun sebuah program perangkat lunak. Dalam Konteks ini  monolitik berarti  tersusun kedalam satu  kesatuan. (Wigmore, 2016).
React Native adalah sebuah framework Javascript untuk mengembangkan aplikasi mobile.  React  Native  dapat  memudahkan  dalam  pengembangan  aplikasi  karena  React Native bersifat multiplatform sehingga dapat diaplikasikan bersamaan untuk android dan IOS.(Rohman, 2020).
Firebase  Database  adalah  sebuah  media  basis  data  noSQL  yang  berfungsi  untuk menyimpan beberapa tipe data. Data yang disimpan pada Firebase Database tersimpan sebagai objek JSON tree.(Richi Andrianto, 2022).
Agile  Software  Development  merupakan  sebuah  metodologi  umum untuk  dalam melakukan pengembangan sistem dan menjadi sebuah tata cara dalam menerapkan sistem yang  baru  untuk  menggantikan  sistem  yang  lama.  Dengan  pendekatan  pengembangan yang iterative dan incremental.(Sutra & Mujiastuti, 2021).
Vol. 10 No. 2 Bulan November 2022                                                                                                        p-ISSN: 2252-5351 Program Studi Teknik Informatika – Fakultas Teknik
e-ISSN: 2656-0860
Universitas Islam Syekh-Yusuf Tangerang

## Metode Penelitian
Metode  Penelitian  yang  digunakan  pada  penelitian  ini  menggunakan  metode penelitian kualitatif. Metode Kualitatif adalah metode yang berfungsi untuk mendapatkan sebuah kebenaran yang dilandasi berdasarkan teori ilmiah dari penelitian dengan dasar empiris,  dan  untuk  metode  perancangan  sistem  menggunakan  metode  Software Development Life Cycle Agile Methods. Dengan menggunakan model Agile Scrum.

## C. Hasil dan Pembahasan

## Rancangan Diagram UML

## Gambar Diagram Use Case
Penjelasan  mengenai  gambar  1  rancangan  sistem  usulan  yang  divisualisasikan kedalam gambar use case diagram :
1.  Actor pembeli dapat melakukan sebuah login pada akun.
2.  Actor pembeli yang belum memiliki akun, dapat melakukan registrasi akun.
3.  Actor pembeli dapat mencari produk Seputih.itu.
4.  Actor pembeli dapat memilih produk yang diinginkan.
5.  Actor pembeli dapat melakukan Checkout Pesanan.
6.  Actor pembeli dapat memilih ekspedisi pengiriman yang diinginkan.
7.  Actor pembeli dapat melakukan pembayaran menggunakan Midtrans.
8.  Actor pembeli dapat melakukan update menu profile.
9.  Actor admin dapat melakukan login admin.
Vol. 10 No. 2 Bulan November 2022                                                                                                        p-ISSN: 2252-5351 Program Studi Teknik Informatika – Fakultas Teknik
e-ISSN: 2656-0860
Universitas Islam Syekh-Yusuf Tangerang
10.  Actor admin dapat mengakses dan mengelola kategori.
11.  Actor admin dapat mengakses dan mengelola produk.
12.  Actor admin dapat mengakses dan mengelola transaksi.
13.  Actor admin dapat mengakses dan mengelola user.
Backlog
Backlog bertujuan untuk menyusun daftar aktivitas pada fitur yang akan dibangun pada aplikasi sistem E-Commerce pada toko Seputih.itu.
Tabel 1. Backlog NO Backlog Estimasi Pengerjaan 1 Rancangan UML 14 Hari 2 Rancangan User Interface 2 Hari 3 Slicing User Interface 7 Hari 4 Fitur Register 2 Hari 5 Fitur Login 1 Hari 6 Fitur Edit Profile 3 Hari 7 Fitur Kategori 2 Hari 8 Fitur Produk 2 Hari 9 Fitur Pesanan 7 Hari 10 Fitur Pencarian Produk 1 Hari 11 Fitur Checkout 7 Hari 12 Integrasi Midtrans 1 Hari
Implementasi Sprint 1.
Pada Sprint 1 ini sebuah jadwal atau planning yang disusun dengan mengacu pada backlog yang telah terbuat. Waktu pengerjaan selama 3 Minggu, dengan memfokuskan Sprint  1  Backlog  seperti  merancang  Diagram  UML,  Rancangan  User  Interface,  dan Slicing User Interface.
Hasil  dari  Sprint  Backlog  1  tidak  terdapat  kendala  pada  saat  pengerjaan,  dan terdapat revisi dengan mengganti jumlah minimum pembelian produk. yang tadinya tidak  ada  minimum  pembelian  akan  ditambahkan  minimum  10  pcs.  pada  Sprint  1 sudah  cukup  baik  dan  cepat  hal  ini  dapat  dibuktikan  dengan  waktu  pengerjaannya kurang dari estimasi yang telah ditentukan yaitu selama 17 Hari.
Vol. 10 No. 2 Bulan November 2022                                                                                                        p-ISSN: 2252-5351 Program Studi Teknik Informatika – Fakultas Teknik
e-ISSN: 2656-0860
Universitas Islam Syekh-Yusuf Tangerang
Gambar 1. Rancangan User Interface
Gambar 2. Rancangan Tampilan Awal
Gambar 3.  Rancangan Deskripsi
Vol. 10 No. 2 Bulan November 2022                                                                                                        p-ISSN: 2252-5351 Program Studi Teknik Informatika – Fakultas Teknik
e-ISSN: 2656-0860
Universitas Islam Syekh-Yusuf Tangerang

## Implementasi Sprint 2.
Pada  Sprint  2  ini  adalah  sebuah  jadwal  atau  planning  yang  disusun  dengan mengacu pada backlog yang telah terbuat. Waktu pengerjaan selama 3 Minggu, dengan memfokuskan Sprint 2 Backlog seperti membangun fitur terkait dengan user, kategori, dan produk.
Hasil  dari Sprint  Backlog  2 tidak  terdapat  kendala  pada  saat  pengerjaan,  dan  tidak terdapat revisi pada kebutuhan sistem. Untuk tahapan selanjutnya akan akan masuk ke tahap proses transaksi produk dan diharapkan akan menghasilkan hasil yang baik dan cepat.
Gambar 4. Tampilan Login
Vol. 10 No. 2 Bulan November 2022                                                                                                        p-ISSN: 2252-5351 Program Studi Teknik Informatika – Fakultas Teknik
e-ISSN: 2656-0860
Universitas Islam Syekh-Yusuf Tangerang

## Gambar 5. Tampilan Edit Profile
Vol. 10 No. 2 Bulan November 2022                                                                                                        p-ISSN: 2252-5351 Program Studi Teknik Informatika – Fakultas Teknik
e-ISSN: 2656-0860
Universitas Islam Syekh-Yusuf Tangerang

## Gambar 6. Tampilan Dashboard
Implementasi Sprint 3.
Pada  Sprint  3  ini  adalah  sebuah  jadwal  atau  planning  yang  disusun  dengan mengacu pada backlog yang telah terbuat. Waktu pengerjaan selama 2 Minggu, dengan memfokuskan  Sprint  3  Backlog  seperti  fitur  transaksi,  integrasi  payment  gateway, shipping gateway, dan fitur history pemesanan produk.
Pada  Tahapan  ini  tidak  terdapat  revisi  dan  hanya  terkendala  integrasi  API Midtrans dan Rajaongkir. Dan pada tahapan ini dilakukan revisi minimum pembelian yang  terdapat  pada  Sprint  1.  Tahapan  ini  adalah  tahapan  akhir  setelah  ini  dapat dilakukan pengujian akhir sebelum dilakukan deployment.
Vol. 10 No. 2 Bulan November 2022                                                                                                        p-ISSN: 2252-5351 Program Studi Teknik Informatika – Fakultas Teknik
e-ISSN: 2656-0860
Universitas Islam Syekh-Yusuf Tangerang

## Gambar 7. Tampilan Menu Checkout
Vol. 10 No. 2 Bulan November 2022                                                                                                        p-ISSN: 2252-5351 Program Studi Teknik Informatika – Fakultas Teknik
e-ISSN: 2656-0860
Universitas Islam Syekh-Yusuf Tangerang

## Gambar 8. Tampilan Webview Sandbox Midtrans

## Pengujian Blackbox Testing
Pengujian  ini  dilakukan  untuk  mengetahui  fungsi  dari  fungsionalitas  pada  aplikai yang dibangun adapun hasil dari pengujian Black Box Testing dapat dilihat pada tabel 2 black box testing.
Tabel 2 Pengujian Black Box Testing No Jenis Pengujian Case Hasil Keterangan 1 Membuka Aplikasi Splash Screen Splash  Screen  Muncul  dan  Menu Utama Terbuka Sukses 2 Melakukan Register  Menu Register User  baru  dapat  membuat  akun baru Sukses 3 Melakukan Login Menu Login User  yang  telah  memiliki  akun dapat mengakses sistem Sukses 4 Mencari Produk Menu Utama User  dapat  mencari  produk  yang  Sukses
Vol. 10 No. 2 Bulan November 2022                                                                                                        p-ISSN: 2252-5351 Program Studi Teknik Informatika – Fakultas Teknik
e-ISSN: 2656-0860
Universitas Islam Syekh-Yusuf Tangerang
No Jenis Pengujian Case Hasil Keterangan diinginkan dengan keyword yang dimasukan 5 Memilih Produk Kategori Menu Produk User  dapat  melakukan  filter produk sesuai dengan kategori Sukses 6 Melihat Produk Detail Menu Produk Detail  User  dapat  membuka  menu produk  detail  sesuai  dengan produk yang dipilh Sukses 7 Memesan Produk Menu Produk Detail  User Dapat melakukan pemesanan produk dengan menginput  jumlah  minimum pemesanan 10 Sukses 8 Melakukan Checkout Pesanan Menu Keranjang User  dapat  melakukan  Checkout pemesanan Sukses 9 Memilih Ekspedisi Menu Checkout User  dapat  memilih  ekspedisi yang  disediakan  dan  mengetahui harga serta estimasi Sukses 10 Melakukan Pembayaran Midtrans User  dapat  membayar  pesanan dengan  metode  yang  disediakan oleh Midtrans Sukses 11 Melakukan Edit Profile Menu Profile User  dapat  melakukan  update data profile Sukses 12 Melakukan pelacakan resi Menu Resi User  dapat  melakukan  pelacakan resi khusus ekspedisi Tiki Sukses 13 Melakukan Logout Menu Profile User  dapat  keluar  aplikasi  dan akan  diarahkan  kembali  pada menu login Sukses

## D. Kesimpulan
Aplikasi  ini  dibangun  guna  mempermudah  toko  Seputih.itu  dalam  melakukan kegiatan  jual  beli  yang  dikhususkan  untuk  reseller.  Dengan  menggunakan  React Native  sebagai  framework  javascript  untuk  membuat  sebuah  aplikasi  mobile  dan Firebase sebagai Backend dan database management system. Berdasarkan penelitian yang  dilakukan,  peneliti  mengharapkan  pengembangan  dikedepannya  yang  antara lain seperti mengembangkan fitur yang memungkinkan reseller dapat memiliki toko online di dalam aplikasi Seputih.itu.
Vol. 10 No. 2 Bulan November 2022                                                                                                        p-ISSN: 2252-5351 Program Studi Teknik Informatika – Fakultas Teknik
Universitas Islam Syekh-Yusuf Tangerang

## Daftar Pustaka
Alfiah, F., Tarmizi, R., Junidar, A. A., Studi, P., Informatika, T., Raharja, U., Studi, P., Retail, M.,  &  Raharja,  U.  (2020). PERANCANGAN  SISTEM  E – COMMERCE  UNTUK PENJUALAN PAKAIAN PADA TOKO A & S . 6 (1), 70 – 81.
Aziz,  N.,  Pribadi,  G.,  &  Nurcahya,  M.  S.  (2020).  Analisa  dan  Perancangan  Aplikasi Pembelajaran Bahasa Inggris Dasar Berbasis Android. Jurnal IKRAITH-INFORMATIKA , 1 (3).
Febrian,  F.,  Hidayat,  T.,  &  Windyasari,  V.  S.  (2021). APLIKASI  PENJUALAN  TOKO  IKAN HIAS MENGGUNAKAN PEMBAYARAN PAYMENT GATEWAY BERBASIS WEBSITE .
9 (1), 81 – 96.
Fian,  A.,  Sokibi,  P.,  &  Magdalena,  L.  (2020).  Penerapan  Payment  Gateway  pada  Aplikasi Marketplace Waroeng Mahasiswa Menggunakan Midtrans. Jurnal Informatika Universitas Pamulang , 5 (3), 387. https://doi.org/10.32493/informatika.v5i3.6719
Richi  Andrianto,  M.  H.  M.  (2022).  APLIKASI  E-COMMERCE  PENJUALAN  PAKAIAN BERBASISANDROID  MENGGUNAKAN  FIREBASE  REALTIME  DATABASE. Journal Computer Science and Information Technology(JCoInT) , Vol 3 , No (1). https://jurnal.ulb.ac.id/index.php/JCoInT/article/view/2478
Rohman, S. (2020). Pembangunan Aplikasi Mobile Pencarian Orang Hilang Dengan Memanfaatkan Api Clarifai Face Recognation Serta menggunakan React Native . UNIVERSITAS KOMPUTER INDONESIA.
Susilo, M. (2018). Rancang Bangun Website Toko Online Menggunakan Metode Waterfall.
InfoTekJar  (Jurnal  Nasional  Informatika  Dan  Teknologi  Jaringan) , 2 (2),  98 – 105. https://doi.org/10.30743/infotekjar.v2i2.171
Sutra, L., & Mujiastuti, R. (2021). Aplikasi Penjualan Masterbatch (Pewarna Plastik) Berbasis E-Commerce  Web  Menggunakan  Metode  Hybrid. JUST  IT :  Jurnal  Sistem  Informasi, Teknologi Informasi Dan Komputer , 11 (2). https://doi.org/10.24853/justit.11.2.8-17 Team,  D.  (2021). Cek  Ongkir  menggunakan  Shipping  Gateway  Raja  Ongkir .  Dewaweb.Com. https://www.dewaweb.com/blog/shipping-gateway-raja-ongkir/
Wigmore,
I. (2016). monolithic architecture .
https://whatis.techtarget.com/definition/monolithic-architecture