## APLIKASI EVALUASI PERKEMBANGAN LATIHAN ATLET PANAHAN MENGGUNAKAN PROGRESSIVE WEB APPLICATION
Eby Sofyan Fadly 1 , Jian Budiarto 2
1,2 Universitas Bumigora Email: 1 eby.sofyan@gmail.com, 2 jian.budiarto@gmail.com

## Abstrak
Arrihu  Archery  merupakan  salah  satu  klub  panahan  yang  ada  di  kota  Mataram.  Sebelum  melakukan  ujian kenaikan  tingkat,  peserta  akan  mengikuti  latihan  pemantapan  sebagai  persiapan  dalam  menghadapi  ujian. Masalah  yang  dihadapi adalah  latihan  yang dilakukan memakan  waktu  yang  lama  dan  pelatih  kesulitan  dalam memantau  perkembangan  peserta.  Penulisan  ini  bertujuan  untuk  mempercepat  dalam  melakukan  latihan  dan mempermudah dalam melakukan pemantauan latihan peserta. Oleh karena itu, perlu dibangun Aplikasi Evaluasi Perkembangan Latihan Atlet Panahan Menggunakan Progressive Web Application.
Perancangan sistem ini dilakukan dengan metodologi waterfall, yaitu metode pengembangan sistem yang diawali dengan perencanaan, desain sistem, pembuatan API Web Service, dan pembuatan Service Worker pada aplikasi Progressive Web App.
Hasil  yang  sudah  dicapai  dalam  penelitian  ini  adalah  terciptanya  aplikasi  untuk  membantu  proses  latihan pemantapan  dan  membantu  dalam  memantau  perkembangan  peserta  latihan.  Aplikasi  ini  mampu  melakukan cache dan mampu menampilkan halaman offline. Aplikasi ini berjalan baik pada browser google  chrome versi 43+.
Kata kunci : progressive web app, evaluasi panahan, service worker

## EVALUATION TOOL OF ARCHERY ATHLETE USING PROGRESSIVE WEB APPLICATION

## Abstract
Arrihu Archery is one of the archery clubs in the city of Mataram. Before taking the test to increase the level, participants will take part in the stabilization exercise in preparation for the exam. The problem faced was that the  exercise  carried  out  took  a  long  time  and  the  trainers  had  difficulty  in  monitoring  the  progress  of  the participants.  This  writing  aims  to  accelerate  the  exercise  and  make  it  easier  to  monitor  the  training  of participants. Therefore, it is necessary to build an Application to Evaluate the Development of Archery Athlete Exercises using Progressive Web Application.
The  design  of  this  system  is  done  by  the  waterfall  methodology,  which  is  a  system  development  method  that begins with planning, system design, making Web Service APIs, and creating Service Workers in the Progressive Web App application.
The  results  that  have  been  achieved  in  this  study  are  the  creation  of  applications  to  assist  the  stabilization training process and assist in monitoring the progress of trainees. This application is able to cache and be able to display pages offline. This application runs well on the google chrome browser version 43+.
Keywords : progressive web app, archery evaluation tool, service worker

## I. PENDAHULUAN
Arrihu  Archery  adalah  Klub  Panahan  Muslim yang di dirikan pada tanggal 21 Agustus 2016 dan di resmikan  tanggal  21  September  2016  di  Kota Mataram  Provinsi  Nusa  Tenggara  Barat  [1].  Arrihu Archery  adalah  Klub  Panahan  Muslim  yang bernaung  dan  mendapat  rekomendasi  di  bawah PERPANI NTB dengan No. Register 09/PERPANI- NTB/IX/2016 (arrihuarchery.id).
Dalam  perkembangannya,  Arrihu  Archery memiliki kurikulum yang di latih dan diujikan pada ujian  kenaikan  tingkat.  Sebelum  melakukan  ujian, peserta akan mengikuti latihan pemantapan. Latihan pemantapan  bertujuan  untuk  melakukan  evaluasi terhadap  kemahiran  atlet  dalam  memanah.  Latihan pemantapan  bisa  dilakukan  secara  paralel  di beberapa cabang secara bersamaan.
Dalam  pelaksanaan  latihan,  pelatih  masih melakukan  pencatatan  secara  manual  sehingga
latihan menjadi tidak  efisien.  Selain itu  data  latihan yang  ada  di  beberapa  cabang  tidak  bisa  diketahui secara  langsung  karena  tidak  adanya  sinkronisasi data  yang  terpusat.  Hal  tersebut  mengakibatkan pelatih  kesulitan  dalam  menentukan  peserta  yang akan  di  ikut  sertakan  dalam  kejuaraan  panahan terdekat.
Berdasarkan  permasalahan  tersebut  diatas, maka  dibutuhkan  sebuah  aplikasi  yang  mampu mempermudah  proses  latihan  dengan  data  yang terpusat.  Hal  ini  dimaksudkan  agar  pelatih  mampu untuk melihat perkembangan peserta secara menyeluruh sehingga bisa menentukan peserta yang akan  di  ikut  sertakan  dalam  perlombaan.  Aplikasi yang  dibuat  akan  menggunakan  teknik  Progressive Web Application. Teknik ini memungkinkan proses pengembangan yang lebih cepat. Hal ini disebabkan karena  teknik  Progressive  Web  Application mampu menghadirkan  pengalaman  berinteraksi  dengan aplikasi web dan mobile dalam satu kali pembuatan

## II. METODE PENELITIAN
Metodologi  dalam  penulisan  ini  mengadopsi System  Development  Life  Cycle  (SDLC)  Model Waterfall[2].  Metode  waterfall  merupakan  metode pengembangan perangkat lunak yang sistematik dan sekuensial  yang  mulai  pada  tingkat  dan  kemajuan sistem sampai pada analisis, desain, kode (Implementasi),  test  (Pengujian),  dan  pemeliharaan [3].  Penulis  menggunakan  metode  SDLC  Model Waterfall  untuk  membuat  aplikasi  secara  bertahap melalui  pengembangan  berbasis  komputer.  Dalam hal  ini  berkaitan  dengan  Pembangunan  Aplikasi Evaluasi  Perkembangan  Latihan  Atlet  Panahan Menggunakan Progressive Web Application.
Perkembangan Latihan Atlet Panahan
Menggunakan  Progressive  Web  Application  yang akan  digunakan  oleh  klub  Panahan  Arrihu  Archery dalam  mempercepat  proses  latihan  dan  memantau perkembangan atlet secara realtime. Adapun tahapan yang dilakukan pada model Waterfall ini antara lain perencanaan,  desain  sistem,  implementasi,  dan pengujian.
Progressive  Web  App  membutuhkan  Service Worker  dalam  melakukan  kerja.  Service  Worker merupakan  sebuah  script  javascript  yang  berjalan dibelakang.  Berikut  ini  merupakan  cara  kerja  dari PWA yang melibatkan Service Worker [4].
Service  Worker  memiliki  siklus  hidup  yang dimulai  dari  tidak  adanya  Service  Worker  ketika aplikasi  baru  dibuka.  Setelah  itu,  terjadi  proses instalasi  Service  Worker  yang  umumnya  pada tahapan  ini  terjadi  proses  pendaftaran  terhadap  file resource  yang  akan  dimasukkan  ke  dalam  cache system.  Proses  idle  terjadi  ketika  tidak  adanya aktifitas  yang  melibatkan  service  worker  pada aktifitas aplikasi.

## Gambar 1. Siklus Hidup Service Worker
Pada  proses  terjadinya  cache,  dalam  service worker terlebih dahulu akan melakukan pengecekan terhadap  network,  jika  akses  network  gagal  maka service worker akan mengambil resource dari cache. Proses  ini  dikenal  dengan  istilah  fallback.  Hal  ini dapat dilihat pada Gambar 2.

## Gambar 2.  Mekanisme Cache
Desain  sistem pada skripsi  ini  menggunakan Unified  Modelling  Language (UML)  untung menghasilkan  alur  proses Object Oriented  Analysis And Design (OOAD).

## III. PERANCANGAN SISTEM

## 2.1. Use Case Diagram
Use  Case Diagram  menjelaskan  tentang  fitur- fitur dan fungsionalitas yang tersedia dalam Aplikasi Evaluasi  Latihan  Pemantapan.  Hal  tersebut  dapat dilihat pada gambar 3 berikut.
Gambar 3. Use Case Diagram
Aktor  yang  berperan  dalam  sistem  ini  adalah Admin,  Pelatih,  Peserta.  Include  pada  gambar artinya Use  Case ini  dibutuhkan  terlebih  dahulu untuk  bisa  mengakses Use  Case yang  lain.  Pelatih dapat  melakukan  dan  melihat  menu  Dashboard, Member,  Latihan  Pemantapan,  Riwayat  Latihan, Divisi  dan  Level,  dan  Ubah  Password,  setelah melakukan  login  terlebih  dahulu.  Peserta  dapat melakukan dan melihat menu Detail Latihan setelah melakukan  login  terlebih  dahulu.  Admin  dapat melakukan  dan  melihat  menu  Akun  dan  Organisasi setelah melakukan login.

## 2.2. Class Diagram
Class Diagram menjelaskan tentang bagaimana sebuah class saling  keterkaitan  antara  yang  satu dengan  yang  lain.  Adapun class  diagram yang terbentuk  untuk  sistem ini  adalah  seperti  pada Gambar 4 berikut.
Gambar 4 . Class Diagram
Class  Profile  berelasi  dengan  class  Form  yang memungkinkan  bahwa  satu  (1)  buah  Profile  bisa memiliki banyak Form. Class Form berelasi dengan Class PhysicAssesment, TechniqueAssesment, SpeedAssesment,  dan  Class  AccuracyAssesment, yang  memungkinkan  bahwa  satu  (1)  Form  bisa memiliki banyak kaitan dengan class - class tersebut.

## 2.3. Activity Diagram
Dalam  perancangan sistem  ini,  penulis menggambarkan activity diagram sebagi berikut.
Gambar 5 . Activity Diagram Latihan
Activity  Diagram  Latihan  menggambarkan proses  Tambah  Training,  Hapus  Training,  Tambah Form Detail, Hapus Form Detail, dan Tambah Detail Training seperti yang terlihat pada Gambar 5 diatas.

## 2.4. Desain API Endpoint
Desain  API  Endpoint  ini  merupakan  proses bagaimana  melakukan  rancangan  setiap  URI terhadap  user,  member,  training,  dan  lain-lain. Dalam  perancangan  ini,  setiap  client  dapat mengakses  setiap  URL  untuk memperoleh response data  yang  diinginkan[4].  Dalam  implementasinya, setiap  URL  dapat  menggunakan  http  method  yang tersedia  seperti  GET,  POST,  PUT,  dan  DELETE. Berikut  merupakan  rancangan  API  Endpoint  yang dibuat pada sistem ini.
Tabel 1. API Endpoint URL Http Method /api/v1/user/login POST /api/v1/member/get/<user> GET GET /api/v1/member/list GET /api/v1/device/list GET /api/v1/device/create POST /api/v1/training/create POST /api/v1/training/<pk>/for POST /api/v1/training/<pk>/for POST /api/v1/training/<pk>/for POST /api/v1/training/<pk>/for POST

## IV. HASIL DAN PEMBAHASAN

## 3.1. Hasil API Web Service Endpoint
Berikut  ini  merupakan  hasil  dari  pembuatan API Web Service seperti  yang terlihat pada gambar 4 berikut ini.
Gambar  6 menunjukkan  semua  list  dari endpoint  yang  sudah  dibuat.  Endpoint  tersebut digunakan untuk melakukan lihat, tambah, ubah, dan hapus data di dalam database.
Gambar 6 . API Web Service Endpoint

## 3.2. Hasil Tampilan Antar Muka
a. Antar Muka Login
Gambar  7  menunjukkan  Halaman  login  yang pertama  kali  disediakan  oleh  browser  ketika  user mengakses  aplikasi.  Untuk  dapat  melakukan aktifitas  terhadap  aplikasi,  user  diwajibkan  untuk melakukan login terlebih dahulu dengan memasukkan  username  dan  password  yang  sudah terdaftar didalam database.
Gambar 7. Antar Muka Login
Input username merupakan field yang digunakan untuk melakukan inputan username  yang sesuai  dengan  akun  yang  dimiliki.  Input  password merupakan  field  yang  digunakan  untuk  melakukan inputan  password  sesuai  dengan  username  yang sudah di inputkan. Tombol login merupakan tombol yang digunakan untuk menjalankan aksi login ketika username dan password sudah diisi.
b. Antar Muka List Member
Gambar 8 menunjukkan halaman List Member yang  digunakan  untuk  melihat  jumlah  peserta  yang sudah terdaftar. Pada halaman ini terdapat beberapa menu diantaranya yaitu tambah member baru, detail member, edit member, dan hapus member.
Gambar 8. Antar Muka List Member
Tombol    tambah    member    baru  merupakan tombol  yang  digunakan  untuk  menuju  halaman tambah  member  baru.  Tombol  detail  merupakan tombol  yang  digunakan  untuk  melihat  detail  dari member  yang  dipilih.  Tombol  edit  merupakan tombol  yang  digunakan  untuk  menuju  halaman  edit data  peserta  sesui  dengan  peserta  yang  dipilih. Tombol  hapus  merupakan  tombol  yang  digunakan untuk  melakukan  hapus  terhadap  data  peserta  sesui dengan  data  yang  dipilih.  Ketika  menekan  tombol ini, sistem akan memunculkan popup konfirmasi.

## c. Antar Muka Tambah Member
Gambar  9  menunjukkan  Halaman  tambah member  yang  digunakan  untuk  menambah  member baru.  Halaman  ini  merupakan  terusan  dari  fitur tambah  member  baru  yang  ada  pada  halaman  list member.  Terdapat  tiga  (3)  jenis  informasi  yang harus  diisi  pada  halaman  ini  antara  lain  informasi user,  informasi  member,  dan  informasi  fisik. Informasi  user  berupa  username  dan  password. Informasi member dari inputan nama sampai dengan memilih gambar profile. Informasi fisik dimulai dari tinggi badan sampai dengan riwayat penyakit.
Gambar 9. Antar Muka Tambah Member
d. Antar Muka Tambah Latihan
Gambar  10  menunjukkan  Halaman  tambah latihan  yang  digunakan  untuk  menambah  latihan. Pada  halaman  ini,  pelatih  harus  menambahkan informasi  latihan  dan  memilih  peserta  yang  akan mengikuti  latihan.  Peserta  yang  dipilih  bisa  lebih daripada 1 (satu) dengan mencentang checkbox yang ada pada tabel member.

## Gambar 10. Antar Muka Tambah Latihan
e. Antar Muka Tambah Form Latihan
Gambar  11  menunjukkan  Halaman  tambah form  latihan  yang  digunakan  untuk menambah  data perolehan  nilai  dari  latihan  pemantapan.  Pada halaman  ini  terdapat  4  (empat)  buah  form  yang dimana masing-masing form memiliki inputan yang berbeda-beda  berdasarkan  aspek  yang  ada.  Selain itu,  pada  halaman  ini  juga  terdapat  dua  buah  fitur tombol  yaitu  detail  dan  hapus.  Tombol  detail digunakan  untuk  melihat  detail latihan  yang  sedang berjalan  dari  member  yang  diinginkan.  Tombol
hapus  form  latihan  digunakan  untuk  menghapus latihan  yang  sedang  berjalan.  Dengan  menghapus latihan  yang  sedang  berjalan,  maka  perolehan  nilai yang  berkaitan  dengan  latihan  tersebut  juga  akan ikut terhapus.
Gambar 11. Antar Muka Form Latihan
f. Antar Muka Ubah Password
Gambar  12  menunjukkan  Halaman  ubah password yang digunakan untuk mengubah password dari user yang sedang login.
Gambar 12. Antar Muka Ubah Password Inputan  password  lama,  merupakan  inputan untuk mengisi password lama yang akan diganti. Inputan   password baru, merupakan
inputan  untuk mengisi password  baru  yang  akan bertindak  sebagai  pengganti  password  yang  lama. Inputan   konfirmasi   password, merupakan inputan untuk melakukan  verifikasi  terhadap  password  baru yang telah diinput. Proses ubah password akan gagal apabila konfirmasi password yang di inputkan tidak sesuai dengan password yang baru.
g. Antar Muka Login Mobile
Gambar  13  menunjukkan  halaman  login  yang terlihat  ketika  membuka  aplikasi  pada  device mobile.
h. Antar Muka Halaman Offline
Gambar  14  menunjukkan  halaman  halaman offline.  Halaman  ini  akan  diakses  ketika  pengguna mengakses  aplikasi  sedangkan  tidak  terhubung dengan internet.
Gambar 14. Antar Muka Halaman Offline

## i. Proses Kerja Service Worker Pada Aplikasi
Gambar 15. Proses Kerja Service Worker Pada Aplikasi
Untuk  memantau  kerja  service  worker  dalam aplikasi,  kita  bisa  memanfaatkan  dev  tools  yang tersedia  pada  web  browser  yang  digunakan.  Pada skripsi  ini,  penulis  menggunakan  Google  Chrome Web  Browser  untuk  melakukan  debug  terhadap service worker.
Aplikasi  dapat  menampilkan  halaman  tertentu ketika  sedang  dalam  kondisi  di  luar  jaringan. Halaman  yang  ditampilkan  sesui  dengan  yang didaftarkan  pada  service  worker.  Halaman  offline pada aplikasi ini seperti pada gambar 3.13.

## V. KESIMPILAN
Berdasarkan uraian hasil dan pembahasan pada bab  sebelumnya,  maka  dapat  diambil  beberapa kesimpulan sebagi berikut.
Aplikasi Evaluasi Latihan Pemantapan yang menggunakan Progressive Web App
berjalan  baik  pada  Web  Browser  Google  Chrome versi 43+. Service  Worker mampu  melakukan cache terhadap file  assets serta mampu  menampilkan halaman  offline  ketika  sedang  tidak  terkoneksi  ke internet

## R EFERENSI
Berikut  ini  contoh  daftar  pustaka  yang  dimuat dengan style IEEE :
[1] Arrihu Archery. Retrieved  from Profile Arrihu Archery: http://arrihuarchery.web.id/
[2] P.  Trivedi  dan  A.  Sharma,  “A  comparative study between iterative waterfall and incremental  software  development  life  cycle model  for  optimizing  the  resources  using computer  simulation,”  dalam  2013  2nd
International Conference on Information Management  in  the  Knowledge  Economy, 2013, hlm. 188–194.
[3] Pressman S. R. Rekayasa Perangkat Lunak, 1st ed. Jogjakarta. Andi offset.2002. [4] Gaunt, Matt. [2018, May]. Web Fundamentals. Retrieved from ServiceWorkers an introduction: https://developers.google.com/ web/fundamentals/primers/service-workers/
[5] Everett  G.D.  “Software  Testing:  Testing Across  the  Entire  Software  Development  Life Cycle”.2007.