## JURNAL MEDIA INFORMATIKA BUDIDARMA
ISSN 2614-5278 (media cetak), ISSN 2548-8368 (media online) Available Online at https://ejurnal.stmik-budidarma.ac.id/index.php/mib DOI: 10.30865/mib.v6i3.4147

## Penerapan Teknologi Stack MERN pada Aplikasi Service Manajemen Bengkel Berbasis Web
Moch. Akbar Maulana 1 , Haryoko 2* , Banu Santoso 3 , Lukman 4
1 Fakultas Ilmu Komputer, Program Studi Informatika, Universitas Amikom Yogyakarta, Yogyakarta, Indonesia
2 Fakultas Ilmu Komputer, Program Studi Teknologi Informasi, Universitas Amikom Yogyakarta, Yogyakarta, Indonesia
3 Fakultas Ilmu Komputer, Program Studi Teknik Komputer, Universitas Amikom Yogyakarta, Yogyakarta, Indonesia
4 Fakultas Ilmu Komputer, Program Studi D3-Teknik Informatika, Universitas Amikom Yogyakarta, Yogyakarta, Indonesia Email: 1 mochakbar.2124@students.amikom.ac.id 2* haryoko@amikom.ac.id, 3 banu@amikom.ac.id, 4 masman@amikom.ac.id Email Penulis Korespondensi: haryoko@amikom.ac.id
Abstrak -XYZ motor merupakan sebuah bengkel yang bergerak pada bidang otomotif sepeda motor dengan menyediakan jasa pelayanan berupa servis motor dan penjualan spare part. Semua proses bisnis seperti pencatatan spare part, transaksi penjualan dan pembelian spare part serta rekapitulasi mingguan/bulanan masih dilakukan secara manual sehingga membuat proses bisnis membutuhkan waktu yang cukup lama dan tidak efisien. Untuk mengatasi permasalahan yang dialami bengkel Xyz Motor maka peneliti membuat sebuah aplikasi service manajemen berbasis web untuk mengelola semua proses bisnis yang terjadi sehingga pemilik bengkel lebih mudah untuk melihat keseluruhan proses bisnis serta pemilik dapat meningkatkan kinerja dan produktivitas  dalam  melakukan  rekapitulasi.  Aplikasi  Service  Manajemen  dikembangkan  menggunakan  teknologi  MERN Stack yakni MongoDB untuk database, React Js untuk library frontend dan Node Js dengan library Express Js untuk membuat backend  API.  Aplikasi  yang  dikembangkan  mencakup  fitur  pembuatan  item  spare  part,  pencatatan  laporan  mingguan  dan bulanan serta pembuatan invoice pelanggan. Pengembangan Aplikasi Service Manajemen ini berhasil mendukung responsif web desain sehingga pemilik bengkel dapat mengakses web dari laptop ataupun smartphone.
Kata Kunci: MERN Stack, React Js, Mongo Db, Node Js, Api, Manajemen.
Abstract− Xyz  Motor  is  a  repair  shop  engaged  in  the  automotive  motorcycle  sector  by  providing  services  in  the  form  of motorcycle service and spare parts sales. All business processes such as recording of spare parts, sales and purchase transactions of spare parts, as well as television/monthly recapitulation are carried out manually so that business processes take a long time and are inefficient. To overcome the problems experienced by the Xyz Motor workshop, the researchers created a web-based management service application to manage all processes that occur so that it is easier for the workshop to see the entire business process and the owner can improve performance and productivity in recapitulation. The Management Service application was developed using the MERN Stack technology, namely MongoDB for the database, React Js for the frontend library and Node Js with the Express Js library to create the backend API. The application developed includes features for making spare parts, recording daily and monthly reports and creating customer invoices. This Management Service Application Development has succeeded in supporting responsive web design so that workshop owners can access the web from a laptop or smartphone.
Keywords : MERN Stack, React Js, Mongo Db, Node Js, Api, Management.

## 1. PENDAHULUAN
Menurut  data laporan  Asosiasi  Industri Sepeda  Motor Indonesia(AISI)  penjualan  sepeda  motor  Indonesia  pada tahun 2020 mencapai 4.361.008 unit dengan penjualan domestik sebesar 3.600.616 unit dan ekspor 700.392 unit sehingga  tidak  heran  jika  Indonesia  masuk  dalam  10  negara  dengan  pengguna  sepeda  motor  terbanyak  [1]. Banyaknya  pengguna  sepeda  motor  di  Indonesia  maka  akan  banyak  usaha  bengkel  motor  yang  bermunculan, sejalan dengan kebutuhan perawatan dan perbaikan sepeda motor yang ada di Indonesia. Salah satunya Bengkel Xyz Motor yang berdiri sejak tahun 2015 hingga sekarang. Xyz Motor merupakan sebuah bengkel yang bergerak pada bidang otomotif sepeda motor dengan menyediakan jasa pelayanan berupa service motor dan penjualan spare part .
Bengkel Xyz Motor memiliki beberapa permasalahan yang terjadi seperti melakukan transaksi pencatatan penjualan service ataupun produk masih manual, rekapitulasi bulanan yang masih harus dihitung secara manual setiap minggu ataupun bulan. Pendataan produk spare part yang masih manual akan membuat data yang tertulis tidak konsisten, dengan tidak konsistennya data di  dalam buku besar akan membuat  seluruh data bengkel  tidak akurat dan valid, yang nantinya akan berdampak negatif terhadap perkembangan bengkel itu sendiri.
Untuk  mengatasi  permasalahan  tersebut,  diperlukan  sebuah  sistem  yang  ter  komputasi  sehingga  semua pekerjaan yang berhubungan dengan pendataan dapat dilakukan hanya dengan sekali atau dua kali aksi. Sistem ini nantinya  akan  berbasis  WEB  dan  dikembangkan  dengan  menggunakan  teknologi stack  MERN .  Teknologi  ini menerapkan metode REST API yang nantinya sistem bisa diimplementasikan ke aplikasi mobile dengan mudah serta expandable jika  memang  nanti  fitur  atau  data  yang  dibutuhkan  semakin  berkembang.  REST  API menghasilkan sebuah data dalam bentuk JSON [2]. Pembuatan website menggunakan React Js membuatnya menjadi lebih cepat, meningkatkan performance dan ramah SEO [3]. Penggunaan  MongoDB  sebagai database akan mempercepat dan mempermudah dalam melakukan pengelolaan data dikarenakan mongo db mempunyai sifat database tanpa skema atau no relational database [4] .

## JURNAL MEDIA INFORMATIKA BUDIDARMA
ISSN 2614-5278 (media cetak), ISSN 2548-8368 (media online) Available Online at https://ejurnal.stmik-budidarma.ac.id/index.php/mib DOI: 10.30865/mib.v6i3.4147
Gambar 1. Arsitektur MERN [5]
Gambar 1 menampilkan arsitektur dari stack MERN [5]. express dan node js untuk membuat API untuk melakukan pengolahan logika data yang berinteraksi dengan mongodb. react js akan mengirimkan permintaan HTTP [6] request ke backend  server,  server  akan  menerima  permintaan  dan  melakukan  pengambilan  data  ke  database  untuk  kemudian mengirimkan response dengan data tersebut. React akan diperbarui berdasarkan data yang dikembalikan. Penelitian terkait sudah dilakukan oleh Brindashree C B, (2021), “Implementation of Canteen Automation System with Payment Gateway using MERN Stack” [7] . Penelitian ini bertujuan membuat aplikasi manajemen dan booking kantin  dengan  implementasi  metode payment  gateway .  Sistem  di  kembangkan  untuk  membantu mahasiswa  dalam  melakukan  pemesanan  di  kantin,  sehingga  tidak  perlukan  untuk  mengantre  secara  berdiri. Sedangkan  penelitian  dengan  judul “VGS:  A  University  Governance  and  Management  System  using  MERN Technologies” yang  dilakukan  Mansuri  Naminaben  dkk  [8].  Berpendapat  bahwa  react  redux  dapat mengoptimalkan penggunaan data yang diolah di dalam sebuah react antar komponen. Penelitian dikembangkan untuk membuat sebuah aplikasi mengelola manajemen sebuah universitas.
Penelitian terkait lainnya dilakukan oleh Mochamad Afif Solahudin dkk. Penelitian  ini membangun sebuah aplikasi  berbasis  website  menggunakan  teknologi  stack  MERN  dengan    memanfaatkan  metode  extreme programming  untuk  membantu  dalam  proses  pembangunan  aplikasi  [9].  Sedangkan  penelitian  yang  dilakukan Nagothu  Diwakar  Naidu,  dkk.  (2021), “E-Commerce  web  Application  by  using  MERN  Technology” [10]. Penelitian  ini  bertujuan  untuk  membuat  aplikasi  website  e-commerce  dengan  berbagai  fitur  e-commerce  yang diperlukan.  Peneliti  menggunakan  teknologi stack MERN  untuk  mempermudah  dan  mempercepat  dalam pembuatan aplikasi. Sistem yang dikembangkan oleh penulis yakni pengembangan sebuah aplikasi bengkel yang berfokus  untuk  menangani  proses-proses  pencataan  penjualan  ataupun  rekapitulasi  penjualan  berbasis  web menggunakan teknologi stack MERN dengan metode pengembangan WDLC.
Tabel 1. Pengujian Black Box Pengujian Hasil yang diharapkan Hasil K Saundariya, dkk.(2021) Webapp service for booking handyman using MongoDB, express JS, React JS, node JS Penulis membangun aplikasi menggunakan Stack MERN teknologi. Penulis membangun aplikasi menggunakan metode WDLC dan penulis menggunakan material UI library untuk membangun layout desain. Mansuri Naminaben, dkk. (2021) VGS: A University Governance and Management System using MERN Technologies Peneliti membangun sebuah aplikasi untuk manajemen universitas menggunakan teknologi stack MERN dengan di bantu library Jquery serta tanpa menggunakan redux. Penulis membangun sebuah aplikasi menggunakan metode WDLC dan penulis menggunakan react redux untuk mengelola state manajemen pada react. Pavan Kavade, (2019), Innovative Recruitment Techniques in Job Portal with MERN Stack. Peneliti merancang dan membangun aplikasi lowongan pekerjaan menggunakan stack MERN dengan menggunakan css native. Penulis membangun aplikasi dengan bantuan material UI untuk membangun desain layout. Sanjivani Bagade, dkk. (2021) Farmer Portal System using MERN Stack Farmer Portal System using MERN Stack Penulis membangun aplikasi menggunakan JWT (JSON Web

## JURNAL MEDIA INFORMATIKA BUDIDARMA
ISSN 2614-5278 (media cetak), ISSN 2548-8368 (media online) Available Online at https://ejurnal.stmik-budidarma.ac.id/index.php/mib DOI: 10.30865/mib.v6i3.4147
Pengujian Hasil yang diharapkan Hasil Token) untuk authentication. Nagothu Diwakar Naidu, dkk. (2021) E-Commerce web Application by using MERN Technology Penulis membangun aplikasi menggunakan stack MERN teknologi. Penulis membangun aplikasi menggunakan stack MERN menggunakan metode WDLC dan penulis menggunakan react redux untuk manajemen state data komponen. Brindashree C B, (2021) Implementation of Canteen Automation System with Payment Gateway using MERN Stack Penulis membangun aplikasi menggunakan stack MERN dengan bantuan bootstrap untuk merancang tampilan. Penulis membangun aplikasi menggunakan stack MERN dengan bantuan bootstrap untuk merancang tampilan. Mochamad Afif Solahudin, dkk. (2021), Rancang Bangun Sistem Informasi Staycation Berbasis Web Dengan Implementasi Teknologi Mern Stack Penulis membangun aplikasi menggunakan metode extreme programming. Penulis membangun aplikasi menggunakan metode WDLC.

## 2. METODOLOGI PENELITIAN

## 2.1 Metode Pengumpulan Data
a. Metode Observasi
Observasi  merupakan  sebagai  aktivitas  mencatat  suatu  gejala  dengan  bantuan  instrumen-instrumen  dan merekamnya  dengan  tujuan  ilmiah  atau tujuan  lain  [11].  Dengan  hal  ini  maka  akan  dilakukan  mempelajari permasalahan yang terdapat di bengkel akbar motor secara detail pada setiap proses aktivitas yang terjadi.
b. Metode Studi Literatur
Metode yang dilakukan dengan melakukan pengambilan referensi dari beberapa sumber seperti jurnal, buku, ataupun situs internet.
c. Metode Wawancara
Metode ini didapatkan dengan secara langsung melakukan tanya jawab kepada pemilik bengkel akbar motor. Beberapa  pertanyaan  yang  ditanyakan  berupa  bagaimana  metode  melakukan  rekap  bulanan  mingguan, bagaimana cara melakukan pencatatan nota, apakah ada kendala dalam melakukan pencatatan nota dll.

## 2.2 Metode Analisis
Metode  ini  akan  melakukan  pengolahan  data-data  yang  telah  dikumpulkan  untuk  dianalisis  dan  didokumentasi untuk  kebutuhan  pada  tahap  berikutnya.  Dari  hasil  melakukan  observasi  langsung  di  bengkel  xyz  motor  dan wawancara  kepada  pemilik  bengkel  akbar  motor maka  didapatkan  beberapa  permasalahan  yang  dimiliki  akbar motor seperti berikut:
1. Pendataan transaksi penjualan produk ataupun servis masih dilakukan secara manual sehingga membutuhkan waktu lebih lama dalam melakukan pelayanan terhadap pelanggan.
2. Perhitungan  rekapitulasi  bulanan yang masih  di  hitung secara manual  membuat  pemilik bengkel  memakan banyak waktu ketika mau membaca rekapitulasi.
3. Inkonsistensi data yang ada di buku besar sehingga membuat seluruh data yang ada di bengkel tidak akurat ataupun valid yang nantinya akan berdampak negatif untuk perkembangan bengkel.

## 2.3 Perancangan Sistem
1. Metode Perancangan Sistem
Metode  perancangan  yang  digunakan  untuk  pembuatan  dan  perancangan  sistem  aplikasi  adalah  metode WDLC (Web Development Life Cycle). Metode ini dilakukan untuk menentukan ruang lingkup sistem yang akan dibuat,  serta  mempersiapkan  jadwal  agar  sistem  dibuat  secara  terorganisir.  Dalam  pembuatan  aplikasi  yang menggunakan metode WDLC terdapat lima tahapan proses yang harus dilalui [12]. alur proses tahapan metode WDLC seperti gambar berikut:

## JURNAL MEDIA INFORMATIKA BUDIDARMA
ISSN 2614-5278 (media cetak), ISSN 2548-8368 (media online) Available Online at https://ejurnal.stmik-budidarma.ac.id/index.php/mib DOI: 10.30865/mib.v6i3.4147
Gambar 2. Alur Proses WDLC
Gambar 2  menampilkan diagram proses WDLC. Proses tersebut  mencakup planning, analysis, desain  & development,  testing  dan  Implementations  and  Maintanance.  Dengan  menggunakan  alur  proses  tersebut  akan menjadikan penjadawalan pada setiap proses akan semakin jelas dan terperinci. Berikut ini penjelasan dari setiap proses WDLC:
a. Planing
Merupakan  fase  pertama  dari  metode  WDLC.  Pada  tahapan  ini  akan  menentukan  untuk  tahap  selanjutnya dikarenakan jika pada tahapan ini terdapat kesalahan maka tahapan WDLC selanjutnya juga akan salah.
b. Analisis
Pada tahapan ini akan dilakukan analis mengumpulkan kebutuhan informasi pengguna, menganalisisnya secara sistematis dalam bentuk fungsionalitas sistem aplikasi, kebutuhan data input dan data output .
c. Desain & Development
Pada tahapan ketiga dari metode WDLC ini menyiapkan rancangan utama aplikasi website yang akan dibuat seperti UI / UX [13], Basis Data / Model Data dan mengimplementasikan kode blok yang dibuat untuk disusun menjadi sebuah aplikasi.
d. Testing
Tahapan ini merupakan tahapan keempat dari metode WDLC. Pada tahapan ini akan dilakukan sebuah uji tes sistem aplikasi yang telah dibuat programmer apakah sudah sesuai dengan hasil yang diharapkan pengguna.
e. Implementation and Maintenance
Tahapan ini merupakan tahapan terakhir dari metode WDLC. Pada tahapan ini dilakukan agar aplikasi yang telah dikembangkan bisa diakses pengguna secara langsung. Tahapan ini memerlukan Hosting ataupun Vps sehingga aplikasi tersebut dapat berjalan di internet.
2. MERN Stack (MongoDB, Express, React, Node)
Membangun website dapat  dilakukan dengan menggunakan beberapa teknologi menjadi  satu. Stack merupakan gabungan  dari  beberapa  teknologi  tersebut,  yang  lebih  dikenal  LAMP stack atau  istilah  dari  Linux,  Apache, MySQL,  dan  PHP.  Hal  tersebut  merupakan  komponen  dari open  source. Single  Page  Applications  (SPA) merupakan pengembangan yang sudah matang dan interaktif sehingga  aplikasi  web  terhindar dari refresh pada halaman  web  untuk  menampilkan  halaman  baru.  Untuk  melakukan  panggilan  menuju  ke  server,  dalam memperoleh  beberapa  data  sehingga  memperbaharui  konten  web. Output yang  dihasilkan  cukup  bagus dibandingkan  menggunakan  cara  tradisional  yaitu  melakukan refresh secara  menyeluruh.  Usaha  tersebut menambah layout front-end [14].
Gambar 3. Konsep MERN Stack [14]
Gambar 3  merupakan cara kerja MERN stack  yang mana  React  Js  dapat berkomunikasi  melalui  request padaNode Js yang memakai framework Express. Node Js akan terhubung back-end server melalui MongoDB yang dipakai sebagai basis data kemudian memberikan respon berupa JSON terhadap front-end .

## JURNAL MEDIA INFORMATIKA BUDIDARMA
ISSN 2614-5278 (media cetak), ISSN 2548-8368 (media online) Available Online at https://ejurnal.stmik-budidarma.ac.id/index.php/mib DOI: 10.30865/mib.v6i3.4147

## 3. HASIL DAN PEMBAHASAN
Berdasarkan permasalahan yang ada di Bengkel Xyz Motor, terdapat  kebutuhan informasi yang dibutuhkan seperti berikut :
1. Sistem menyediakan fitur mengelola spare part dengan disertai stok dan jumlah penjualan per bulan.
2. Sistem mempunyai fitur untuk mengelola jasa service yang dimiliki bengkel disertai dengan data order service setiap bulan.
3. Sistem mempunyai fitur mengelola order berdasarkan daftar produk dan service yang tersedia.
4. Sistem mempunyai fitur untuk melakukan cetak invoice ketika order sudah dibuat.
5. Sistem mempunyai fitur kategori untuk memberikan beberapa keterangan pada setiap produk yang dibuat.
6. Sistem mempunyai fitur pencarian pada setiap bagian, seperti order , produk dan service .
7. Sistem mempunyai fitur dashboard untuk menampilkan perkembangan pada bulan yang saat ini sedang berlangsung.
8. Sistem mempunyai fitur data grafik penjualan berdasarkan penjualan barang, service dan order yang diterima pada setiap tahun.
9. Sistem mempunyai fitur login sehingga tidak sembarang user bisa melakukan akses.
Sedangkan kebutuhan pengguna yang dibutuhkan hanya memiliki satu akses yang berupa admin. Admin dapat mengatur segala hal yang dibutuhkan dalam aplikasi seperti berikut :
1. Admin dapat login ke aplikasi.
2. Admin dapat mengelola kategori.
3. Admin dapat mengelola data produk atau spare part .
4. Admin dapat mengelola order yang dibuat.
5. Admin dapat mengelola data service .
6. Admin dapat keluar dari aplikasi
3.1 Implementasi
A. Rancangan Context Diagram Context  Diagram digunakan  sebagai  sebuah  gambaran  aliran  data  yang  berjalan  di  dalam  aplikasi  service manajemen akbar motor. Context diagram atau bisa disebut juga dengan DFD Level 0 merupakan salah satu bagian level dari Data Flow Diagram (DFD) yang berfungsi untuk menentukan konteks serta batasan sistem pada sebuah pemodelan. Pada DFD level 0 / Context Diagram menjelaskan sebuah aliran data pada aplikasi service manajemen akbar motor hanya memiliki 1 entitas eksternal yakni admin. Admin dapat mengirim dan menerima proses yang meliputi  login,  manajemen  data  spare  part,  manajemen  data  service,  manajemen  data  order,  manajemen  data kategori dan manajemen data penjualan. Gambar 4 merupakan context diagram aplikasi service manajemen akbar motor:
Gambar 4. Context Diagram

## B. DFD Level 1 Adminitrator
DFD level  1 merupakan sebuah penjabaran detail hasil dari proses DFD level 0 /  Context Diagram. Pada DFD level  1  memiliki  7  proses  yang  berkaitan  langsung  dengan  data  store.  DFD  Level  1  Administrator  memiliki sebanyak 7 proses yang terjadi. Ke semua proses itu meliputi dashboard , order , kategori, penjualan, service , spare

## JURNAL MEDIA INFORMATIKA BUDIDARMA
ISSN 2614-5278 (media cetak), ISSN 2548-8368 (media online) Available Online at https://ejurnal.stmik-budidarma.ac.id/index.php/mib DOI: 10.30865/mib.v6i3.4147
part serta  login.  Proses  tersebut  terhubung  dengan  masing-masing  tabel  database  yang  dibutuhkan.Gambar  5 merupakan DFD level 1 Administrator:
Gambar 5. Diagram DFD Level 1 Administrator
C. Implementasi UI

## Gambar 6. Halaman Dashboard
Gambar 6 menampilkan halaman dashboard dengan memiliki hasil rekapitulasi perbandingan bulan yang sedang  berjalan  dengan  bulan  sebelumnya.  Halaman  ini  memanggil  dua  API  untuk  menampilkan  data  yang dibutuhkan. Halaman ini dibuat untuk memperlihatkan rekapitulasi dan 5 orderan terakhir yang dibuat.

## JURNAL MEDIA INFORMATIKA BUDIDARMA
ISSN 2614-5278 (media cetak), ISSN 2548-8368 (media online) Available Online at https://ejurnal.stmik-budidarma.ac.id/index.php/mib DOI: 10.30865/mib.v6i3.4147
Gambar  7  menampilkan  halaman  detail  service.  halaman  ini  bertujuan  untuk  menampilkan  rekapitulasi performa  layanan yang dipilih dalam tahun tertentu. Halaman ini akan mengambil data dari  API detail  service. terdapat line chart yang digunakan untuk mempresentasikan data performa layanan tersebut.

## Gambar 8. Halaman Add Product
Gambar 8 menampilkan halaman add product . Halaman ini berfungsi untuk menambahkan product baru. Terdapat  button  unggah  gambar  yang  terhubung dengan  cloudinary  sertas  form  yang  berisi  tentang  keterangan product yang mau dibuat.
Gambar 9. Halaman Detail Product .
Gambar 9 menampilkan halaman detail product. Halaman ini bertujuan untuk menambah ataupun mengedit stock product yang  dipilih.  Halaman  ini  disertai  grafik  chart stock dan  pembelian  sehingga  di  ketahui  performa  dari product tersebut.
Gambar 10 menampilkan halaman create order . halaman ini mengambil dua API yakni category , products dan service yang  responsenya  ditampilkan  dalam  bentuk  list.  Halaman  ini  bertujuan  untuk  membuat  order  yang kemudian di cetak untuk sebagai bukti invoice.

## JURNAL MEDIA INFORMATIKA BUDIDARMA
ISSN 2614-5278 (media cetak), ISSN 2548-8368 (media online) Available Online at https://ejurnal.stmik-budidarma.ac.id/index.php/mib DOI: 10.30865/mib.v6i3.4147
Gambar 11. Halaman Invoice
Gambar  11  menampilkan  halaman invoice atau  detail  order.  halaman  ini  bertujuan  untuk  menampilkan nama,  tanggal  dan list  order ataupun  jasa  yang  dipesan.  Halaman  memanggil  satu  API  detail  order  dengan membawa parameter inovice id. Terdapat tombol print untuk mencetak invoice ke dalam bentuk kertas fisik.

## D. Testing
Sistem dilakukan suatu pengujian untuk  memastikan sistem berjalan dengan baik dan sesuai  dengan kebutuhan pengguna. Sistem diuji dengan menggunakan metode Black Box Testing [17] dan pengujian Rest API [18] untuk memastikan setiap fungsi yang berjalan dengan baik dan sesuai kebutuhan. Tabel pengujian black box testing bisa dilihat pada Tabel 2.
Tabel 2. Pengujian Black Box Pengujian Hasil yang diharapkan Hasil Akses halaman dashboard Menampilkan halaman dashboard Berhasil Membuat product baru dengan form yang lengkap. Berhasil membuat product baru dan menampilkan product successfully create Berhasil Membuat service baru dengan form yang lengkap Berhasil membuat serive baru dan menampilkan pesan successfully created service. Berhasil Membuat order Berhasil membuat order dan menampilkan invoice order Berhasil Menampilkan invoice order Berhasil menampilkan detail invoice order Berhasil Menghapus invoice order Berhasil menghapus invoice order dan mengembalikan stock product Berhasil
Beradasarkan sampel hasil pengujian black box pada Tabel 2. Pengujian Black Box, keseluruhan tes yang diuji tidak ada kegagalan, semua berhasil diuji. Dan sedangkan pengujian sampel API pada Tabel 2 berhasil di uji dengan sesuai yang di inginkan. Tabel 3 merupakan sampel pengujian REST API:
Tabel 3. Pengujian REST API Nama URL API Response Hasil Get Product http://localhost:5000/api/ products Menampilkan daftar seluruh product Berhasil Get Services http://localhost:5000/api/ services Menampilkan daftar seluruh services Berhasil Get Orders http://localhost:5000/api/ orders Menampilkan daftar seluruh orders Berhasil Create Order http://localhost:5000/api/ order Menampilkan pesan berhasil membuat order dan menampilkan informasi order yang dibuat Berhasil Create product http://localhost:5000/api/ product Menampilkan pesan berhasil membuat product dan menampilkan informasi product Berhasil Login http://localhost:5000/api/ login Pesan berhasil login dan mendapatkan akses token Berhasil

## JURNAL MEDIA INFORMATIKA BUDIDARMA
ISSN 2614-5278 (media cetak), ISSN 2548-8368 (media online) Available Online at https://ejurnal.stmik-budidarma.ac.id/index.php/mib DOI: 10.30865/mib.v6i3.4147

## 4. KESIMPULAN
Aplikasi service manajemen bengkel xyz motor berbasis teknologi stack MERN yang dikembangkan menggunakan metode WDLC berhasil dibuat. Terdapat beberapa tahapan penelitian yang digunakan yakni, melakukan pengumpulan data untuk mengetahui masalah yang sering terjadi, melakukan analisis terhadap data yang telah diperoleh sehingga akan mendapatkan kesimpulan dari data tersebut, dan yang terakhir melakukan perancangan sistem manajemen bengkel xyz motor berdasarkan data yang telah di analisis. Perancangan sistem meliputi seperti tampilan website, fungsi yang dibutuhkan, informasi yang ingin ditampilkan serta skema database yang dibutuhkan menggunakan stack MERN. Kemudian sistem akan di uji dengan black box testing dan REST API testing untuk mengetahui apakah semua fungsi yang telah dibuat sesuai dengan apa yang dibutuhkan. Berdasarkan hasil analisis dan pembahasan dapat simpulkan aplikasi service manajemen bengkel menggunakan teknologi stack MERN dapat membantu mengelola kebutuhan bengkel xyz. Proses input output dapat dilakukan hanya dengan menggunakan beberapa kali aksi. React js dapat mengimplementasikan fitu-fitur yang dibutuhkan tanpa memiliki loader,  Express  js  dan  Node  js  dapat  mengimplementasikan  seluruh  logika  yang  diperlukan  sistem  aplikasi  service manajemen  xyz.  Berdasarkan  hasil  pengujian  sistem  seluruh  elemen  fungsional  berjalan  dengan  baik  menggunakan teknologi stack MERN. Adapun saran untuk penelitian berikutnya untuk sistem dapat dikembangkan lebih lanjut dengan menambahkan fitur mechine learning agar lebih optimal.

## REFERENCES
[1]   Nurhadi, “10 Negara Pengguna Sepeda Motor Terbanyak, Indonesia di Urutan Ketiga,” Tempo.co, 19 November 2021. [Online].  Available:  https://otomotif.tempo.co/read/1530339/10-negara-pengguna-sepeda-motor-terbanyak-indonesia- di-urutan-ketiga. [Diakses 01 12 2021].
[2]   A.  A.  D.  T.  Ary  Budi  Warsito,  “Penerapan  Data  JSON  Untuk  Mendukung  Pengembangan  Aplikasi,” Technomedia Journal (TMJ).
[3]   ReactJs.org,  “A Javascript  Library  for  Building User  Interfaces,”  Reactjs.org,  [Online]. Available: https://reactjs.org. [Diakses 20 12 2021].
[4]   Mongodb, “Build faster Build Smarter,” MongoDB inc, [Online]. Available: https://www.mongodb.com/. [Diakses 01 01 2022].
[5]   A. Morgan, “The Modern Application Stack - Part 5: Using ReactJS, ES6 & JSX to Build a UI (the rise of MERN),” 24 Februari  2017.  [Online].  Available:  https://www.mongodb.com/blog/post/the-modern-application-stack-part-5-using- reactjs-es6-and-jsx-to-build-a-ui-the-rise-of-mern. [Diakses 20 April 2022].
[6]   F.  N.  Adzan  Abdul  Zabar,  “KEAMANAN  HTTP  DAN  HTTPS  BERBASIS  WEB  MENGGUNAKAN  SISTEM OPERASI KALI LINUX,” Jurnal Ilmiah Komputer dan Informatika (KOMPUTA), 2015.
[7]   B. C. B, P. N. G, G. B. N, C. R. Murthy dan V. M. G, “Implementation of Canteen Automation System with Payment Gateway using MERN Stack,” International Journal for Research in Applied Science and Engineering Technology, vol. VII, no. 9, pp. 981-985, 2021.
[8]   M.  Naminaben,  P. Yadav,  M.  N.  N.  Ahemad dan  M.  A.  Quadri,  “VGS:  A University  Governance  and  Management System using MERN Technologies,” Issue 4 www.jetir.org (ISSN-2349-5162), no. 8, 2021.
[9]   S.  Afif  dan  I.  K.  D.  Nuryana,  “Rancang  Bangun  Sistem  Informasi  Staycation  Berbasis  Web  Dengan  Implementasi Teknologi Mern Stack,” Angewandte Chemie International Edition, 6(11), 951–952., pp. 1-12, 2021.
[10]  N. D. Naidu, P. Adarsh, S. Reddy, G. Raju, U. S. Kiran dan V. Sharma, “E-Commerce web Application by using MERN Technology,” International Journal for Modern Trends in Science and Technology, no. 7, pp. 1-5, 2021.
[11]  H.  Hasanah,  “TEKNIK-TEKNIK  OBSERVASI  (Sebuah  Alternatif  Metode  Pengumpulan  Data  Kualitatif  Ilmu-ilmu Sosial),” Jurnal at-Taqaddum, vol. 8, no. 1, 2016.
[12]  J.  Ridha  Permana  and  A.  Savitri  Puspaningrum,  “Implementasi  Metodologi  Web  Development  Life  Cycle  Untuk Membangun Sistem Perpustakaan Berbasis Web (Studi Kasus: Man 1 Lampung Tengah),” J. Inform. dan Rekayasa Perangkat Lunak, vol. 2, no. 4, pp. 435–446, 2021, [Online]. Available: http://jim.teknokrat.ac.id/index.php/informatika.
[13]  I. V. P. B. S. Muhammad Multazam, “Perancangan User Interface dan User Experience pada Placeplus menggunakan pendekatan User Centered Design,” Dedikasi PKM, 2021.
[14]  V. Subramanian, Pro MERN Stack. 2017. doi: 10.1007/978-1-4842-2653-7.
[15]  J.  N.  Arwidarasti,  “Software  Environment,”  2  Mei  2018.  [Online].  Available:  https://medium.com/dekowarehouse- project/software-environment-5388de816e13. [Diakses 18 April 2022].
[16]  Mongoose, “Elegant MongoDB object modeling for Node.js,” Mongoose, [Online]. Available: https://mongoosejs.com. [Diakses 25 12 2021].
[17]  R. Pressman, Software Engineering: A Practitioner's, New York: McGraw-Hill, 2005.
[18]  A.  A.  Romi  Choirudin,  “IMPLEMENTASI  REST  API  WEB  SERVICE  DALAM  MEMBANGUN  APLIKASI MULTIPLATFORM UNTUK USAHA JASA,” MATRIK, pp. 284-293, 2019.