## PERANCANGAN FRONTEND APLIKASI PEMANDU PARIWISATA MENGGUNAKAN FRAMEWORK REACT.JS DI PROVINSI JAWA BARAT
Agus Salim, Rafly Yusrizal Amrie 1
Manajemen Informatika 1
Politeknik LP3I Bandung 1 e-mail: agussalim@plb.ac.id, raflyyusrizalamrie.r18mi@plb.ac.id
Abstrak :  Sektor  pariwisata  di  Indonesia  perkembangannya  sangat  pesat.  Adapun potensi  pariwisata  di  provinsi  Jawa  Barat  sangatlah  besar  walaupun  terdapat  dugaan potensi tersebut perlu digali secara optimal. Website yang sudah aktif saat ini biasanya mengenalkan dan menampilkan objek wisata dan objek penunjang lainnya hanya untuk objek  yang  sudah  mempunyai  jam  terbang,  sering  kali  objek  wisata  kecil  yang berpotensi  juga  tidak  dimasukkan  kedalam  kriteria.  Tujuan  penelitian  adalah  untuk mencoba  membuat  situs  pariwisata  yang  mengakomodir  segala  penunjang  untuk melakukan  kegiatan  pariwisata  dengan  mudah  melalui  tampilan  dan  pengalaman  yang baru  ketika  mempersiapkan  akomodasi  untuk  pariwisata.  Metode  penelitian  yang digunakan  adalah  metode  meninjau  referensi  website  yang  diberikan  dan  poin-poin yang  menjadi  acuan  dalam  perencanaan  berbasis  analisis  dan  pengembangan  desain. Metode  pengembangan  yang  digunakan  peneliti  dalam  melakukan  penelitian menggunakan model prototipe, dimana metode ini dengan cara menjabarkan kebutuhan pelanggan  secara  lebih  detail  karena  pelanggan  sering  kali  kesuliran  memyampaikan kebutuhannya secara detail tanpa melihat gambaran yang jelas. Dengan adanya website yang  telah  dirancang,  diharapkan  dapat  menjadi  benchmark  pelanggan  yang  melihat pilihan  yang  disajikan  melalui  website  sehingga  menarik  minat  pelanggan  dalam menyajikan informasi yang akurat.
Kata Kunci : front end, pariwisata, react.js, aplikasi

## 1. Pendahuluan
Website merupakan  salah  satu  alternatif  dalam  menyampaikan  informasi  dalam  dunia pariwisata  dan  dianggap  sebagai  instruksi  bisnis  yang  dapat  memberikan  pandangan pertama  calon  wisatawan  untuk  mengenal  informasi  tentang  tempat  pariwisata  secara informatif.  Saat  ini  teknologi website berkembang  dengan  pesat,  website  sudah mengalihkan aplikasi desktop yang selama ini kita kenal.
Pariwisata  memang  merupakan  salah  satu  potensi  Jawa  Barat  yang  paling  besar.  Di Jawa  Barat,  tahun  2017  tercatat  ada  1.128  lokasi  objek  dan  daya  tarik  wisata  dan  93 kawasan pariwisata (data.jabarprov.go.id, 2019).
Teknologi  informasi  sangat  bermanfaat  untuk  dapat  diterapkan  di  berbagai  bidang (Komalasari,  2020).  Pariwisata  merupakan  salah  satu  sektor  yang  harus  beradaptasi dengan  jaman  untuk  dapat  bertahan  dari  persaingan  (Komalasari,  2020).  Penerapan sebuah  teknologi  informasi  dan  komunikasi  berbasis  website  pada  kepariwisataan  di Jawa Barat akan terasa lebih baik dalam mendapatkan informasi dan layanan pariwisata yang belum bisa didapat oleh masyarakat umum dengan baik.
Kekurangan  dan  kelemahan  yang  terjadi  pada  teknologi  informasi  dan  komunikasi potensi pariwisata di Jawa Barat dapat diambil contoh disaat kita membuka sebuah situs sistem  informasi  suatu  objek  wisata  yaitu  tampilan  situs  yang  belum  cukup  menarik, sulitnya  mendapatkan  informasi  secara  mendetail,  ketidakakuratan  informasi  yang
ditampilkan dengan yang sebenarnya, terbatasnya informasi yang ditampilkan mengenai objek wisata, dan kurangnya pilihan objek wisata.

## 2. Kajian Pustaka
UI  ( User  Interface )  didefinisikan  sebagai  penjembatan  antara  pengguna  ( user )  dengan produk melalui tampilan visual. Baik dari segi bentuk, warna, tulisan ( typography ) agar produk  itu  dapat  memberikan  interaksi  yang  menarik  bagi  pengguna.  Adapun  tujuan utama  UI  adalah  mempermudah  pengguna  saat  menggunakan  sebuah  produk  secara efektif.  Sederhananya,  UI Design adalah  bagaimana  sebuah  produk  terlihat  oleh  mata (visible)  pengguna.  Adapun  UX  ( User  Experience )  didefinisikan  sebagai  pengalaman pengguna/  user  saat  menggunakan/berinteraksi  dengan  sebuah  produk.  UX  bersifat subyektif  karena  sangat  bergantung  pada  persepsi  dan  pemikiran  individu,  yang berhubungan  dengan  sistem  dan  apa  yang  mereka  rasakan  saat  menggunakan  sebuah produk.  Untuk  itu  dilakukan  prose  UX Design yakni  proses  untuk  membuat  sebuah produk  agar  mudah  dan  tidak  membingungkan  saat  digunakan  oleh  user”  (Makers Institute, 2018).
UI Designer merupakan sebutan untuk orang yang mendesain interface untuk perangkat lunak komputer, ponsel  pintar, dan lainnya. UI Designer punya tanggung jawab untuk mendesain tampilan secara menarik baik dari sisi bentuk, warna, juga tulisan. UX Designer adalah  jenis  pekerjaan  yang  berhubungan  dengan  bagaimana meningkatkan  kepuasan  pengguna  aplikasi  maupun  pengunjung  situs  yang  dilihat  dari nilai  guna,  manfaat,  juga  kesenangan  yang  didapatkan  si  pengguna  dari  suatu  aplikasi atau  situs.  UX Designer bertugas  untuk  membuat  aplikasi  atau  situs  yang  mudah digunakan  oleh  pengguna,  dan  terlihat  keren,  bagus,  namun  simple.  Karena  perasaan pengguna saat berinteraksi dengan interface jadi fokus utamanya.
Framework adalah sebuah software untuk memudahkan para programer untuk membuat sebuah  aplikasi  web  yang  di  dalam  nya  ada  berbagai  fungsi  diantaranya  plugin,  dan konsep  untuk  membentuk  suatu  sistem  tertentu  agar  tersusun  dan  tersetruktur  dengan rapih” (Dimas Wahyu, 2019).
React,  sering  ditulis  juga  React.js  atau  ReactJS  merupakan  JavaScript library yang dikembangkan  oleh  Facebook  untuk  memfasilitasi  pembuatan  daripada  komponen antarmuka  yang  interaktif,  stateful,  serta  mudah  untuk  digunakan  ulang.  ReactJS sangatlah cocok digunakan untuk rendering antarmuka yang kompleks dengan performa tinggi” (Kumar dan Singh, 2016).
Model Prototipe cocok digunakan untuk menjabarkan kebutuhan pelanggan secara lebih detail  karena  pelanggan  sering  kali  kesuliran  memyampaikan  kebutuhannya  secara detail tanpa melihat gambaran yang jelas.

## 3. Metode Penelitian
Metodologi  penelitian  yang  penulis  gunakan  dalam  penelitian  ini  yakni,  meninjau referensi website yang diberikan dan poin-poin yang menjadi acuan dalam perencanaan berbasis  analisis  dan  pengembangan  desain.  Analisis  yaitu  mengamati  desain  website yang  menjadi  referensi  kemudian  mengidentifikasi  kebutuhan  dan  masalah-masalah yang  ada  dimasukkan  kedalam  tinjauan  desain  yang  diusulkan  untuk  bagian perancangan User  Experience  Flowchart menggunakan  Whimsical  dan  Wireframe, Web  Layout,  Web  Design  menggunakan  Figma.  Kemudian  untuk  User  Interface menggunakan  React.Js,  SASS,  Bootstrap4,  serta  bahasa  pemrograman  Javascript. Metodologi penelitian dapat diligat pada gambar 1 berikut ini:

## Gambar 1 Metodologi Penelitian

## 4. Analisa dan Perancangan
Berdasarkan  hasil  penelitian  tentang  program  penyebarluasan  informasi  yang  berjalan saat ini dimana terdapat hambatan-hambatan yang ditemukan dalam proses pengenalan juga interaksi dan memberikan informasi tersebut. Maka penulis mengusulkan pendapat untuk  melakukan  riset User  Experience dan User  Interface agar  dalam  menyajikan informasi  pariwisata  di  masyarakat  menjadi  lebih  efektif.  Berikut  ini  penulis  sertakan analisis usulan dalam bentuk Unified Modeling Language (UML).

## Kebutuhan Pengguna
Pengguna  membutuhkan  informasi  yang  lengkap  tentang  segala  hal  yang  berkaitan dengan  pariwisata  dan  juga  segala  hal  yang  mendukung  kegiatan  pariwisata  tersebut dapat dilakukan.

## Use Case Diagram
Use  case  diagram  dibuat  untuk  menggambarkan  fungsional  dari  sebuah  sistem  yang mempresentasikan sebuah interaksi antara aktor dan aplikasi.
Gambar 2 Use Case Diagram Front End Aplikasi Pariwisata
Activity Diagram
Gambar 3 Activity Diagram Aplikasi Pariwisata

## Class Diagram
Class  Diagram  adalah  diagram  yang  menggambarkan  struktur  proses  dari  berbagai pendefinisian  kelas-kelas  yang  akan  dibuat  untuk  membangun  sistem.  Class Diagram memberikan pandangan secara luas dari suatu sistem dengan menunjukan kelas-kelasnya  dan  hubungan  mereka.  Diagram  bersifat  statis;  “menggambarkan hubungan  apa  yang  terjadi  bukan  apa  yang  terjadi  jika  mereka  berhubungan”. Berikut ini adalah Class Diagram usulan dari Penulis.
Gambar 4 Class Diagram Front End Aplikasi Pariwisata
User Interface
Gambar 5 UI Halaman Login
Gambar 6 UI Halaman Register
Gambar 8 Halaman Profil

## Gambar 9 Halaman Edit Profil
Gambar 10  Halaman History

## Gambar 11 Halaman Keranjang
Gambar 12 Halaman Booking

## Gambar 13 Halaman Checkout

## Tampilan Front End Hasil Implementasi

## Gambar 14 Halamann Index
Gambar 15 Halaman Login
Gambar 17 Halaman Profil
Gambar 18 Halaman Edit Profil
Gambar 19 Halaman Explore
Gambar 20 Halaman Merchant
Gambar 21 Halaman Keranjang
Gambar 22 Halaman Booking

## Gambar 23 Halaman Checkout

## 5. Kesimpulan
Setelah  melakukan  analisa  dan  perancangan,  serta  implementasi  terhadap  website informasi publik dan Akomodasi Pariwisata, maka dapat diambil beberapa kesimpulan sebagai berikut Pelaksanaan penyebaran informasi melalui website berjalan dengan baik karena  informasi  dan  promosi  yang  di  sampaikan  kepada  masyarakat  sangat  efisien, selain  itu  informasi  perihal  Pariwisata  bisa  diakses  dimanapun  dan  kapanpun.    Proses penyebaran  informasi  dan  promosi  lebih  efektif.    Memperoleh  informasi  seputar pariwisata  lebih  mudah.    Semua  informasi  mengenai  pariwisata  tersampaikan  kepada seluruh masyarakat. Perancangan informasi berbasis website ini dianggap sebagai solusi untuk  wisatawan  dalam  hal  penyampaian  informasi,  promosi  dan  penjualan  produk untuk lebih baik kedepannya.

## Daftar Pustaka
S.,  Rosa.  dan  Shalahuddin,  M.,  (2018).  Buku  Rekayasa  Perangkat  Lunak.
Bandung.Informatika Bandung.
Hasian, Borrys. (2017). Kitab UX Design. Available at https://medium.com/designchitchat/kitab-ux-design-7203ee3d0d1f  (diakses  09.26 AM 22 Januari 2021) Institute, Makers. (2018). UI & UX. Available at https://medium.com/@makersinstitute/ui-ux-705e37916934 (diakses 20:47 PM 10
Januari 2021)
Komalasari, R. (2020). Manfaat Teknologi Informasi dan Komunikasi di Masa Pandemi Covid  19  .  Tematik  :  Jurnal  Teknologi  Informasi  Komunikasi  (e-Journal),  7(1), 38-50. https://doi.org/10.38204/tematik.v7i1.369
Komalasari,  R.,  Pramesti,  P.,  &  Harto,  B.  (2020).  Teknologi  Informasi  E-Tourism Sebagai Strategi Digital Marketing Pariwisata. Jurnal ALTASIA, 2(2).
Maarif, Lestari, Putri. (2017). Pelayanan Pramuwisata Kepada Konsumen (Studi Kasus Pada  Pt  Sako  Utama  Wisata)  Berbasis  Analisis  Swot.  Available  at http://eprints.polsri.ac.id/4961/ (diakses 07:25 AM 11 Januari 2021)
Mohammad, Nazir. (2005). Metode Penelitian. Available at https://karyatulisku.com/teknik-pengumpulan-data-wawancara/  (diakses  07.56 PM 21 Januari 2021)
Nadila,  Ayu.  (2020).  Jurnal  Perangkat  Lunak  Komputer  (Software).  Available  at https://www.researchgate.net/publication/341271680_JURNAL_PERANGKAT_
LUNAK_KOMPUTER_SOFTWARE/citation/download  (diakses  08:48  AM  22 Januari 2021)
Raharjo.  Budi,  (2019).  Pemrograman  Web  Dengan  Node.Js  dan  Javascript.
Bandung.Informatika Bandung.
Saputra, Gusti, Ary. (2020). Figma. Available at https://165410128-
gustiarysaputra.medium.com/mengenal-apa-itu-figma-101e15811c26 (diakses 07:27 PM 11 Januari 2021)
Wahyu, Dimas. (2019). Framework php, pengertian framework dan cara instal laravel. Available  at  https://medium.com/@dhiemazwahyu/framework-php-pengertian- framework-dan-cara-instal-laravel-6130ab88563b  (diakses  08:14  AM  11  Januari 2021)
Welly.  (2017).  Pemanfaatan  React.Js  Untuk  Rendering  Antarmuka  Dalam  Layanan Kolaborasi  Pemrosesan  Berita  Berbahasa  Indonesia.  Available  at  http://e- journal.uajy.ac.id/13374/ (diakses 08:28 AM 11 Januari 2021)