## RANCANG BANGUN APLIKASI COFFEE SHOP DI WILAYAH KOTA SUMBAWA
Abdul Rahman 1) , Shinta Esabella 2) , Titi Andriani 3) , Muhammad Hidayatullah 4) , Miftahul Haq 5) 1),2),3),4),5) Fakultas Teknik, Universitas Teknologi Sumbawa email corresponding author: shinta.esabella@uts.ac.id

## Abstraksi
Penelitian ini bertujuan untuk merancang dan membangun aplikasi yang memberikan informasi tentang produk, fasilitas, dan lokasi coffee shop di Wilayah Kota Sumbawa menggunakan aplikasi berbasis Android hybrid . Metode pengembangan perangkat lunak yang digunakan dalam penelitian ini adalah Prototype Methode, dimana penelitian diawali dengan tahap komunikasi, kemudian tahap perencanaan aplikasi, pembangunan prototype dengan , tahap evaluasi  dan  penyerahan  aplikasi  pada  pengguna  melalui  Google  Play  Store.  Dengan  adanya  aplikasi  yang dihasilkan dalam penelitian ini, telah menjadi media penyebaran data dan informasi baik kepada masyarakat asli Sumbawa maupun masyarakat pendatang untuk mengetahui informasi dan lokasi tempat hangout atau coffee shop yang berada dalam wilayah Kota Sumbawa.

## Kata Kunci :
Coffee Shop , Android Hybrid, Prototype Methode,Google Play Store

## Pendahuluan
Di  zaman  moderen,  ilmu  pengetahuan  berkembang sejalan  dengan  teknologi  informasi,  sehingga  dapat mempermudah manusia dalam menyelesaikan masalah yang dihadapi sehari-hari. Salah satu contoh perkembangan  ilmu  pengetahuan  adalah  teknologi yang  ada  pada mobilephone yang  pada  awalnya diciptakan hanya untuk mengirim sms ( shortmessageservice )atau pesan singkat serta komunikasi  suara  antar  manusia  dan  semakin berkembang untuk keperluan browsing, hingga dapat membantu  kebutuhan  sehari-hari  baik  untuk keperluan  bekerja maupun hiburan. Tetapi  sekarang kemampuan mobilephone sudah  sangat  canggih, dimana  dulu  hanya  dapat  dilakukan  oleh  komputer, sekarang  dapat  dilakukan  oleh mobilephone yang cerdas yang dikenal dengan nama smartphone .
Salah  satu  sistem  operasi  pada mobile yang digunakan oleh smartphone adalah android. Android adalah  sistem  operasi  untuk smartphone yang  yang dikembangkan dari dari Linux [1]. Kelebihan android dibandingkan  dengan  sistem  operasi  yang  lain  pada smartphone adalah  sifatnya  yang opensource . Dengan sifat android yang opensource , pengembang dapat  membuat  dan  memodifikasi  aplikasi  sesuai dengan  keinginan  mereka  seperti  aplikasi  mencari tempat hangout .
Di Kabupaten Sumbawa tempat hangout atau coffee shop semakin  banyak  menjamur  berbanding  lurus dengan  jumlah  pengunjung  yang  datang  ke Kabupaten Sumbawa. Tempat coffeeshop ini menjadi sebuah  bisnis  yang  menjanjikan  di  era  globalisasi yang  sedang  berkembang  saat  ini.  Permasalahannya tidak banyak bisnis tempat hangout atau coffee shop ini didukung dengan promosi yang optimal, sehingga
banyak  masyarakat  atau  target  konsumen  kurang mengetahui produk yang ditawarkan, luas area coffee shop serta  fasilitas  yang  ada  dan  juga  lokasi  dari tempat tersebut.
Berdasarkan  masalah  diatas,  maka  dirancang Aplikasi Coffee  Shop di  Wilayah  Kota  Sumbawa Berbasis Hybrid .  Dimana  aplikasi  android  yang dibangun  dengan  model hybrid akan  menampilkan nama,  daftar  menu,  fasilitas,  luas  dan  lokasi  dari coffee shop yang ada di wilayah kota Sumbawa.
Diharapkan  dengan  aplikasi  yang  dihasilkan mempermudah  masyarakat  asli  Sumbawa  maupun pendatang di Sumbawa untuk mengetahui informasi dan  lokasi  tempat hangout atau coffee  shop melalui playstore.

## Metode Penelitian
Adapun  metode  yang  digunakan  dalam  proses pengumpulan  data  dan  pengembangan  perangkat lunak adalah sebagai berikut:
2.1. Metode Pengumpulan Data
Metode  pengumpulan  data  yang  digunakan  dalam penelitian  ini  adalah  metode  wawancara.  Metode pengumpulan data ini dilakukan dengan caramewawancarai  pemilik coffee  shop yang  ada  di wilayah kota Sumbawa.
2.2. Metode  Pengembangan Perangkat Lunak
Metode  pengembangan  perangkat  lunak  yang digunakan  dalam  penelitian  ini  adalah  metode prototype. Metode  pengembangan  perangkat  lunak prototype cocok  digunakan  untuk  mengembangkan sebuah perangkat yang akan dikembangkan kembali. Metode ini dimulai dengan pengumpulan kebutuhan pengguna,  dalam  hal  ini  pengguna  dari  perangkat yang dikembangkan adalah peserta didik. Kemudian membuat  sebuah  rancangan  kilat  yang  selanjutnya
akan  dievaluasi  kembali  sebelum  diproduksi  secara benar  [2][3].  Adapun  tahapan  dalam  penelitian  ini adalah sebagai berikut:
2.2.1. Komunikasi Pada tahap ini dilakukan pengumpulan kebutuhan perangkat  lunak  yaitu  informasi  dan  lokasi coffeeshop yang ada di wilayah kota Sumbawa. 2.2.2. Perencanaan Pada  tahap  ini  dilakukan  perencanaan  seperti penjadwalan  pada  perangkatlunak  yang  akan  di implementasikan di Aplikasi CoffeeShop di Wilayah Kota Sumbawa berbasis Hybrid . 2.2.3. Prototype Pada  tahap  ini  dilakukan  pembuatan mockup atau desain aplikasi dan penulisan kode-kode program. 2.2.4. Evaluasi Pada  tahap  ini prototype Aplikasi CoffeeShop di Wilayah Kota SumbawaBerbasis Hybrid akandievaluasi
dengan menggunakan pengujian blackbox untuk  mendapatkan  hasil  yang diinginkan. 2.2.5. Penyerahan Aplikasi Pada tahap ini setelah aplikasi selesai di evaluasi dan sesuai yang diinginkan maka Aplikasi CoffeeShop di Wilayah Kota SumbawaBerbasis Hybrid akan diserahkan ke pengguna.

## Hasil dan Pembahasan
3.1. Use Case Diagram
Gambar 1. Use Case Diagram Pada use  case  diagram ini  menampilkan splash screen pada saat aplikasi pertama kali dijalankan dan selanjutnya menampilkan home atau menu utama dan juga  tentang  aplikasi.  Pada  menu  utama  terdapat pilihan daftar coffeeshop yang kemudian dipilih oleh user .  Setelah user memilih  salah  satu  daftar coffeeshop , user dapat  menulis review dan  melihat map atau lokasi dari coffeeshop tersebut.

## 3.2. ClassDiagram
Class diagram pada Aplikasi CoffeeShop di Wilayah Kota  Sumbawa  Berbasis Hybrid ini  menunjukkan interaksi  antar  kelas  dan  aplikasi  serta  garis  yang dihubungkan  antar  kelas  menunjukkan  hubungan komunikasi antar class diagram [4]. Gambar dibawah ini  merupakan class  diagram pada  aplikasi  adalah sebagai berikut.

## Gambar 2. Class Diagram
3.3. Rancangan Basis Data
Perancangan  basis  data  digunakan  pada
Aplikasi CoffeeShop di  Wilayah  Kota  Sumbawa Berbasis Hybrid adalah dengan mengimplementasikan firebasedatabase sebagai media  penyimpanan  data. Firebase  Database merupakan  basis  data non-SQL sehingga  tidak memerlukan aturan tertentu untuk mengatur struktur basis data [5]. Oleh karena itu, rancangan basis data pada firebase database disimpan dalam format objek JSONtree yang tidak memiliki tabelatau baris seperti data SQL . Pada JSONtree dikenal dengan istilah node untuk  setiap  proses  memasukkan  data  ke firebase database seperti:

## Gambar 3. Format JSON Tree Database
3.4. Rancangan User Interface
Adapun  perancangan user  interface [6]  yaitu  terdiri dari  rancangan splash  screen ,  rancangan home atau menu  utama  yang  berupa  daftar coffee  shop , rancangan  pilih  daftar coffee  shop ,  rancangan  map, rancangan review , dan rancangan about atau tentang aplikasi.  Adapun  rancangan user  interface sebagai berikut:
User Home Tentang Pilih daftar coffee shop Splash screen Liat Map Tulis

## 3.4.1. Rancangan SplashScreen
Tampilan  ini  digunakan  sebagai  tampilan  awal yaitu  tampilan  pembuka.  Tampilan  ini  berisi  judul aplikasi  untuk  memasuki  tampilan  menu  utama aplikasi.

## Gambar 4. Rancangan SplashScreen
Gambar  diatas  merupakan  merupakan mockup dari splash  screen ketika user pertama  kali  membuka Aplikasi Coffee  Shop di  Wilayah  Kota  Sumbawa Berbasis Hybrid.

## 3.4.2. Rancangan Home Atau Menu Utama
Adapun rancangan home pada Aplikasi Coffee Shop di Wilayah Kota Sumbawa Berbasis Hybrid seperti di bawah ini.

## Gambar 5. Rancangan Home
Pada home atau  menu  utama  merupakan  tampilan yang  mencul  setalah splash  screen .  Pada home terdapat sepuluh daftar pilihan coffee shop dan ikon dikanan  atas. User dapat  memilih  salah  satu  daftar coffee shop yang akan menampilkan informasi detail coffee  shop sesuai  dengan  namanya,  serta  ikon dikanan  atas  berfungsi  menuju  halaman  informasi tentang  aplikasi Coffee  Shop di  Wilayah  Kota Sumbawa Berbasis Hybrid .

## 3.4.3. Rancangan Pilih Daftar Coffee Shop
Tampilan ini menampilkan pilihan daftar dari coffee shop yang  di  pilih  seperti  info  umum,  menu  dan galeri, serta ikon map dan review seperti berikut
Gambar 6. Rancangan Pilih Daftar Coffee Shop Gambar 7. Rancangan Map Gambar 8. Rancangan Review Pada  gambar  6.  Merupakanrancang  setelah user memilih daftar coffee shop pada home, terdapat detail dari coffee shop seperti info umum, menu dan galeri, serta  ikon  map  dan review. Selanjutnya user dapat mengklik ikon map yang menampilkan lokasi coffee shop tersebut seperti rancangan map pada gambar 7. User juga dapat mengklik ikon review untuk menulis review  coffee  shop seperti  rancangan  review  pada gambar 8.
3.4.4. Rancangan Tentang Aplikasi Rancangan tentangaplikasi berfungsi untuk memberikan informasi tentang Aplikasi Coffee Shop di  Wilayah  Kota  Sumbawa  Berbasis Hybrid .  Dapat dilihat pada gambar 9.

## Gambar 9. Rancangan Tentang Aplikasi
Pada gambar 9. merupakan tampilan rancang tentang aplikasi.  Dimana user dapat  melihatnya  setelah memilih tentang aplikasi pada home atau menu utama aplikasi Coffee  Shop di  Wilayah  Kota  Sumbawa Berbasis Hybrid .
3.5. Implementasi Program
Implementasi dari hasil perancangan Aplikasi Coffee Shop di  Wilayah  Kota  Sumbawa  Berbasis Hybrid yang dikembangan dengan menggunakan FrameworkIonic serta text editor Notepad ++ sebagai berikut:
3.5.1. Tampilan Splash Screen
Adapun tampilan splash screen Aplikasi Coffee Shop di  Wilayah  Kota  Sumbawa  Berbasis Hybrid pada smartphone adalah sebagai berikut:

## Gambar 10. Tampilan Splash ScreenPada
Smartphone Pada gambar 4.15. merupakan tampilan awal  s plash screen ketika  membukaAplikasi Coffee  Shop di Wilayah  Kota  Sumbawa    sebelum  masuk  ke  menu utama berupa logo dan nama tulisan yaitu nama dari aplikasi.
3.5.2. Tampilan Home Atau Menu Utama Menu  utama  atau  main  menu  dalam  aplikasi mempunyai  peranan  layaknya  terminal  atau  pintu utama untuk mengakses menu-menu lain dalam suatu aplikasi.  Menu  utama  adalah  menu  yang  berisi  link atau akses ke menu yang lain.

## Gambar 11. Rancangan Home Aplikasi
Pada  gambar  11.  menunjukan  menu  utama  dari aplikasi setelah splash screen. Terdapat daftar coffee shop dan ikon di kanan atas, user dapat memilih salah satu dari coffee shop yang akan diarahkan ke halaman sesuai  nama coffeeshop tersebut.  Ketika user mengklik  ikon  dikanan  atas,  maka  aplikasi  akan menampilkan  informasi  mengenai  aplikasi  dan developer . 3.5.3. Tampilan Pilih Daftar Coffee Shop Adapun tampilan pilihan dari salah satu daftar coffee shop seperti gambar dibawah ini:

## Gambar 12. Tampilan Pilih Daftar CoffeeShop Pada Smartphone
Pada  gambar  12.  merupakan  salah  satu  daftar  dari coffeeshop yang  telah  dipilih , dimana user dapat melihat  info  umum,  menu  seperti  makanan  dan minuman serta galery. User juga dapat melihat review dari user lain  tentang coffee  shop tersebut  dan memilih  ikon  map  untuk  mengetahui  lokasi coffee shop sepert  gambar  13.  serta  ikon review untuk memberikan komentar pada coffee shop tersebut pada gambar 14.
3.5.4. Tampilan Map Adapun tampilan map pada Aplikasi Coffee Shop di Wilayah  Kota  Sumbawa  Berbasis Hybrid sebagai berikut:

## Gambar 13. Tampilan Map
Pada gambar 13. adalah gambar ketika user mengklik ikon map  pada halaman  sebelumnya.  Pada halaman map  terdapat  dua  ikon  berwarna  merah  dan  hijau. Dimana ikon berwarna hijau menunjukan lokasi user dan ikon  berwarna merah menunjukan  lokasi coffee shop tersebut.
3.5.5. Tampilan Review Tampilan review adalah tempat dimana user menulis komentar untuk coffeeshop tersebut.

## Gambar 14. Tampilan Review
Pada  gambar  4.19.  adalah  gambar  ketika user mengklik  ikon review pada  halaman  sebelumnya. Pada  halaman review terdapat  dua  komponen  input dan  satu  tombol.  Dimana  komponen  input  pertama user dapat  menginputkan  namadan  yang  kedua sebagai  komentar  dan  ketika user mengklik  tombol maka  secara  otomatis  akan  kembali  ke  halaman sebelumnya.  Dan  hasil  inputan  akan  tampil  pada halaman tersebut.
3.5.6. Tampilan Tentang Aplikasi Adapaun  tampilan  Tentang  atau about Aplikasi Coffee  Shop di  Wilayah  Kota  Sumbawa  Berbasis Hybrid sebagai berikut:

## Gambar 15. Tampilan Tentang Aplikasi
Gambar  15.  adalah  gambar  yang  menunjukan informasi  seperti  deskripsi  dari  aplikasi,  versi  dan developer (pengembang) dari Aplikasi Coffee Shop di Wilayah Kota Sumbawa Berbasis Hybrid . User juga dapat  mengganti  warna  aplikasi  dengan  mengklik tombol change color. .
3.6. Pengujian Perangkat Lunak
Berikut  adalah  hasil  pengujian  perangkat  lunak menggunakan pengujian black box [7]:
1. Uji Fungsionalitas Splash Screen Adapun hasil pengujian fungsionalitas splash screen dapat dilihat pada tabel dibawah ini:
Tabel 1. Hasil Pengujian Fungsionalitas Splash Screen
Hasil  pengujian  fungsionalitas splash  screen menunjukkan  bahwa  ketika user memulai  aplikasi, reaksi  perangkat  lunak  yang  ditunjukkan  yaitu menampilkan splash  screen .  Berdasarkan  hasil tersebut  dapat  dikatakan  bahwa  hasil  pengujian fungsionalitas splashscreen adalah sesuai.
2. Uji Fungsionalitas Home Atau Menu Utama Adapun  hasil  pengujian  fungsionalitas home dapat dilihat pada tabel dibawah ini:
Tabel 2. Hasil Pengujian Fungsionalitas Home
Hasil  pengujian  fungsionalitas home menunjukkan bahwa  ketika user memulai  aplikasi,  reaksi  sistem yang  ditunjukkan  setelah splashscreen yaitu menampilkan home atau menu utama yang terdiri dari daftar coffee  shop dan  ikon  about  aplikasi  di  kanan atas.  Berdasarkan  hasil  tersebut  dapat  dikatakan
Aksi Aktor Skenario uji Hasil Pengujian Memulai aplikasi Menampilkan
Splash Screen Aksi Aktor Skenario uji Hasil Pengujian
Memulai aplikasi Menampilkan Home
bahwa  hasil  pengujian  fungsionalitas home adalah sesuai.

## 3. Uji Fungsionalitas Pilih Daftar Coffee Shop
Adapun hasil pengujian fungsionalitas pilih salah satu daftar coffee  shop dapat  dilihat  pada  tabel  dibawah ini:
Tabel 3. Hasil Pengujian Fungsionalitas Pilih

## Daftar Coffee Shop
Hasil pengujian fungsionalitas pilih daftar coffeeshop menunjukkan  bahwa  ketika user mengklik  salah  satu  daftar coffee  shop ,  reaksi perangkat lunak yang ditunjukkan yaitu menampilkan  detail coffee  shop. Berdasarkan hasil tersebut  dapat  dikatakan  bahwa  hasil  pengujian fungsionalitas pilih daftar coffee shop adalah sesuai.
4. Uji Fungsionalitas Coffee Shop Adapun  hasil  pengujian  fungsionalitas  map coffee shop dapat dilihat pada tabel dibawah ini:

## Tabel 4. Hasil Pengujian Fungsionalitas Map
Hasil  pengujian  fungsionalitas  map coffeeshop menunjukkan bahwa ketika user mengklik ikon map
pada detail coffee shop , reaksi perangkat lunak yang ditunjukkan  yaitu  menampilkan  map coffee  shop. Berdasarkan  hasil  tersebut  dapat  dikatakan  bahwa hasil pengujian fungsionalitas map coffee shop adalah sesuai.
5. Uji Fungsionalitas Review Coffee Shop
Adapun  hasil  pengujian  fungsionalitas reviewcoffee shop dapat dilihat pada tabel dibawah ini:

## Tabel 5. Hasil Pengujian Fungsionalitas ReviewCoffee Shop
Hasil  pengujian  fungsionalitas reviewcoffeeshop menunjukkan  bahwa  ketika user mengklik  ikon review pada detail coffee shop , reaksi perangkat lunak yang  ditunjukkan  yaitu  menampilkan reviewcoffee shop. Berdasarkan  hasil  tersebut  dapat  dikatakan bahwa  hasil  pengujian  fungsionalitas reviewcoffee shop adalah sesuai.
6. Uji Fungsionalitas Tentang Aplikasi
Adapun  hasil  pengujian  fungsionalitas  tentang  atau aboutcoffee shop dapat dilihat pada tabel dibawah ini:
Tabel 6. Hasil Pengujian Fungsionalitas Tentang
Coffee Shop Aksi Aktor Skenario uji Hasil Pengujian
Mengklik salah  satu daftar coffee shop Menampilkan detail coffee shop
Aksi Aktor
Skenario uji Hasil Pengujian Mengklik ikon map pada detail coffee shop Menampil kan map coffee shop Aksi Aktor Skenario uji HasilPengujian
Mengklik ikon review pada detail coffee shop Menampilkan review coffee shop Aksi Aktor Skenario uji Hasil Pengujian Mengklik ikon about pada home Menampilkan about coffee shop
Hasil  pengujian  fungsionalitas  tentang coffeeshop menunjukkan  bahwa  ketika user mengklik  ikon tentangpada home ,  reaksi  perangkat  lunak  yang ditunjukkan  yaitu  menampilkan aboutcoffee  shop. Berdasarkan  hasil  tersebut  dapat  dikatakan  bahwa hasil  pengujian  fungsionalitas  tentang coffee  shop adalah sesuai.
3.7. Penyerahan Aplikasi
Pada  tahap  ini  aplikasi  telah  selesai  di  evaluasi  dan sesuai  yang  diinginkan  dan  siap  digunakan  seperti gambar dibawah ini:

## Gambar 16. Tampilan Aplikasi Pada Playstore
Pada  gambar  16.  merupakan  penyerahan aplikasi dengan cara meng upload pada playstore.

## Kesimpulan dan Saran
Kesimpulan Kesimpulan yang dapat diambil dari skripsi ini yaitu Aplikasi CoffeeShop di  Wilayah  Kota  Sumbawa Berbasis Hybrid sudah  berhasil  dibangun  dengan menggunakan Framework
Ionic dan
databaseFirebase telah dibuat sesuai dengan perancangan yang telah disusun dan telah di upload ke Googleplaystore .  Berdasarkan  uji  coba  dengan smartphone telah  berhasil,  proses  yang  ada  pada Aplikasi Coffee  Shop di  Wilayah  Kota  Sumbawa Berbasis Hybrid telah  berjalan  dengan  baik,  seperti info  umum,  daftar  menu,  lokasi,  dan review  coffee shop. Dengan  demikian,  maka  aplikasi  ini  dapat memberikan  informasi  untuk  masyarakat  asli Sumbawa dan masyarakat luar Sumbawa serta media promosi coffee shop tersebut.

## Saran
Berdasarkan kesimpulan yang telah diuraikan diatas, maka  saran  untuk  pengembangan  aplikasi  ini kedepannya  yaitu  aplikasi  dapat  bersifat  dinamis dengan  penambahan  admin  maupun dashboard sehingga dapat memudahkan penambahan coffeeshop tanpa  perlu  kepihak developer dan  aplikasi  dapat dikembangkan untuk berbagai sistem operasi mobile, agar dapat berjalan di semua sistem operasi mobile.

## Daftar Pustaka
[1]  Suranto  Aw.  (2018).  Evaluasi  Program  Desa Mandiri  Informasi  Berbasis  Aplikasi  Android. Jurnal Informasi, Vol. 48, No. 1, e-ISSN : 2502- 3837, hlm. 1-13.
[2]  Pressman, Roger S. (2012). Rekayasa Perangkat Lunak Pendekatan Praktisi Edisi 7 . Yogyakarta: Andi Yogyakarta.
[3]  Esabella S, Yudi M, Fitrah A. (2020). Rancang Bangun  Aplikasi  Mengenal  Satera  Jontal Sumbawa Berbasis Android. Prosiding Seminar Nasional  IPPeMas  2020.  ISSN  (E)  2721-171,
hlm. 192-203
[4]  Nugroho,  A.  (2010). Rekayasa  Perangkat Lunak  Berbasis  Objek  dengan  Metode  USDP.
Yogyakarta: Andi Yogyakarta.
[5]  Juhara,  Zamrony  P.  (2016 ).  Panduan  Lengkap Pemrograman  Android .  Yogyakarta:  Andi Yogyakarta.
[6]  Esabella S, Fahri H, Fahmi Y. (2019). Rancang Bangun  Aplikasi  Media  Hidup  Sehat  Berbasis Android  (Studi  Kasus  Dinas  Kesehatan Kabupaten  Sumbawa).  JINTEKS  Vol.1  No.2 ,
ISSN : 2686-3359, hlm. 143-152
[7]  Mustaqbal,  Firdaus  &  Rahmadi.  (2015). “Pengujian  Aplikasi  Menggunakan  Black  Box Testing Boundary Value Analysis (Studi Kasus: Aplikasi  Prediksi  Kelulusan  SNMPTN)”. Jurnal  Ilmiah  Teknologi  Informasi  Terapan, Vol. 1 No 3, ISSN. 2407-3911, hlm.31-40 .