ISSSN: 2745-701X E-ISSN: 2745-7028 http://journals2.ums.ac.id/index.php/abditeknoyasa/

## RANCANG BANGUN WEBSITE ASESMEN PSIKOLOGI MENGGUNAKAN FRAMEWORK REACT.JS DAN METODE SDLC AGILE DI YAYASAN BINA DHIRGANTARA
Akbar Rahmana Teknik Informatika Universitas Muhammadiyah Surakarta L200190023@student.ums.ac.id

## Daffa Putra Alwansyah
Teknik Informatika Universitas Muhammadiyah Surakarta L200190031@student.ums.ac.id

## Praditya Luthfi Suryalaksono
Teknik Informatika Universitas Muhammadiyah Surakarta L200190087@student.ums.ac.id
Diah Priyawati * Teknik Informatika Universitas Muhammadiyah Surakarta dp120@ums.ac.id
* Corresponding author

## ABSTRAK
Pengetahuan tentang minat dan bakat terhadap diri sendiri sangatlah penting, dengan kita mengetahui minat dan bakat  yang  ada dalam diri kita diharapkan membuat hidup menjadi mudah dan mendukung karir kita. Dalam menentukan minat  bakat  seseorang  perlu  adanya  peran  seorang  psikolog,  dimana  dalam prosesnya memerlukan waktu dan serangkaian tes yang memakan waktu lama. Perkembangan  teknologi  saat  ini  sudah  semakin  pesat,  cukup  dengan  hanya sebuah  aplikasi  atau  sistem  informasi  kita  dapat  dengan  mudah  melakukan analisa  dan  perhitungan  dalam  menentukan  minat  bakat  seseorang.  Koriwira adalah  sebuah website atau  platform  digital  yang  dikelola  oleh  Yayasan penerbangan bina dirgantara, website ini dikembangkan dengan tujuan menguji kemampuan dan minat bakat yang dimiliki oleh siswa. Metode yang digunakan adalah  metode agile dengan  kerangka  kerja scrum ,  dengan  menggunakan metode scrum dapat mempercepat proses pengembangan website dikarenakan proses  ini  menekankan  komunikasi  secara  langsung  dan  berkala  untuk  tim pengembang  dan  konsumen  ( client )  yang  terlibat  secara  langsung  dalam pengembangan website .  Berdasarkan  hasil  pengujian  SUS  kepada  pengguna secara langsung menghasilkan nilai rerata 88,5 yang termasuk kedalam kategori excellent .  Dari  hasil  pengujian  yang  telah  penulis  lakukan,  dinyatakan  bahwa website mudah  untuk  digunakan  oleh  pengguna  dan  berjalan  sesuai  dengan harapan mitra.
KATA KUNCI: Asesmen , Website, React.js, User Interface, User Experience
Naskah dikirim 30 November 2022 Naskah direvisi 13 Desember 2022 Naskah diterima 14 Desember 2022

## PENDAHULUAN
Asesmen  atau  penilaian  adalah  hal  yang  penting dalam sebuah pembelajaran, sebagai salah satu upaya meningkatkan  kualitas  pendidikan  [1].  Asesmen  dan intervensi  bakat  memiliki  peranan  penting  dalam mengevaluasi  klinis  anak-anak  dan  remaja  dalam masalah  pembelajaran  dan  perilaku  [2].  Dalam menentukan minat bakat seseorang perlu adanya peran seorang psikolog, dimana dalam prosesnya memerlukan
waktu dan serangkaian tes yang memakan waktu lama. Setelah dilakukan pengujian test, seorang psikolog harus melakukan perhitungan dan analisis untuk menentukan minat dan bakat seseorang.
Mengetahui  minat  dan  bakat  sangat  penting, dengan mengetahui minat dan bakat dapat mengarahkan  peserta  didiknya  sesuai  kemampuan, bakat  dan  peminatan  yang  dimiliki  [3].  Sebuah  studi yang menganalisis minat dan kemampuan peserta didik juga diterbitkan oleh tim N. Hoffler. Dalam penelitiannya
yang  berjudul Scientist  of  the  Future:  An  Analysis  of Talented  Students  Interests ,  berpendapat  bahwa memahami  keterampilan,  karakteristik,  dan  minat peserta didik penting ketika menemukan dan mendidik ilmuwan  untuk  masa  depan,  dan  ini  harus  dimulai  di tingkat sekolah  [4]. Masalah yang dialami oleh peserta didik  saat  ini  adalah  ketidakmampuan  untuk mengetahui  minat  dan  bakat  mereka.  Akibatnya, peserta didik sering sekali salah memilih program studi dan  jurusan  karena  mengikuti  teman  atau  paksaan orang tua. Efek ini membuat hidup peserta didik menjadi sulit  dan  berujung  sia-sia.  Karir  peserta  didik  menjadi gagal dikarenakan ketidaksesuaian minat dan bakat[5].
Perkembangan  teknologi  saat  ini  sudah  semakin pesat, cukup hanya dengan sebuah aplikasi atau sistem informasi kita dapat dengan mudah melakukan analisa dan  perhitungan  dalam  menentukan  minat  bakat seseorang,  aplikasi  tersebut  dapat  berupa  sebuah platform website . Koriwira adalah sebuah website atau platform  digital  yang  dikelola  oleh  Yayasan  Bina Dhirgantara.  Yayasan  Bina  Dhirgantara  merupakan yayasan yang menyediakan layanan pendidikan berupa SMK  Penerbangan  Bina  Dhirgantara,  yayasan  ini bertujuan untuk mengembangkan minat kedirgantaraan dalam  arti  luas  untuk  mencapai  wawasan  Dirgantara. Pada  perancangan website ini  membutuhkan  desain pengguna  interface yang  sesuai  dengan pengguna experience kemudian  diimplementasikan  kembali dengan melakukan coding sistem.

## METODE PENGABDIAN
Perancangan website asesmen    menggunakan metode agile dengan  kerangka  kerja scrum .  Metode scrum merupakan  metode  manajemen  proyek menggunakan  siklus  pengembangan  singkat  atau disebut dengan sprint [6]. Menggunakan metode scrum dapat  mempercepat  proses  pengembangan website dikarenakan proses ini menekankan komunikasi secara langsung  dan  berkala  untuk  tim  pengembang  dan konsumen ( client ) yang terlibat secara langsung dalam pengembangan website [6].  Cara  kerja  metode scrum ditunjukkan pada Gambar 1.
Gambar 1. Cara kerja metode scrum

## A. Product Backlog
Tahap ini merupakan tahap awal dimana melakukan scrum , product  owner akan  memberikan  daftar  fitur produk  apa  yang  akan  dikerjakan  oleh  tim  untuk dikembangkan dan sesuai kebutuhan pengguna. Product owner juga akan menentukan prioritas fitur produk yang akan dikerjakan terlebih dahulu.

## B. Sprint Planning Meeting
Tahap ini jika fitur produk sudah sesuai kriteria dan siap  dikerjakan,  maka  tim  melakukan sprint  planning meeting .  Tim  menentukan  tujuan  sprint,  penentuan product backlog yang  akan  dikerjakan,  membagi  tugas product backlog pada setiap orang, dan estimasi waktu pengerjaan satu product backlog .

## C. Sprint Backlog
Tahap  ini  semua product  backlog yang  dikerjakan oleh tim akan ditinjau, apakah product backlog sedang dikerjakan  atau  sudah  selesai  dikerjakan.  Hasil  dari sprint  backlog ini  akan  dibahas  pada daily  scrum yang dipimpin oleh scrum master .

## D. Finished Work
Tahap  ini  tim  akan  melakukan sprint  review .  Tim melakukan  demo  pekerjaan  yang  telah  selesai dikerjakan,  melakukan review  product  backlog yang sudah  selesai  dengan testing ,  serta  setiap  orang menjelaskan  pekerjaan  apa  yang  sudah  dicapai  dan pekerjaan  apa  yang  belum  dicapai.  Setelah  melakukan sprint review , tim akan melakukan sprint retrospective . Tujuan  ini  membahas  3  hal  yaitu,  apa  saya  yang  perlu diperbaiki, dipertahankan dan dibuang pada sprint .

## HASIL DAN PEMBAHASAN
A. Mencari Inspirasi ide
Tahap ini penulis mencari inspirasi ide desain sesuai produk  yang  akan  dibuat,  yaitu  asesmen  minat  bakat pada anak-anak SMA (Sekolah Menengah Atas) sampai SMK  (Sekolah  Menengah  Kejuruan).  Penulis  mencari inspirasi  ide  pada website desain  seperti  Dribbble, Behance dan Medium. Setelah penulis mencari inspirasi ide, lalu akan dikumpulkan di halaman moodboard pada Figma. Moodboard merupakan tempat untuk menampung inspirasi ide.
Gambar 2. Moodboard inspirasi ide
B. Ideation
Tahap Ideation menghasilkan  ide  produk,  penulis bereksperimen  untuk  menemukan  hasil  dengan  cara membuat low fidelity ( wireframe ). Wireframe merupakan  sketsa  kasar  atau  kerangka  dasar  sebelum halaman website didesain [7]. Tahap ini sangat penting sebelum stakeholder menyetujui  pewarnaan, icon , gambar, font , shape dan yang lainnya sebelum didesain dan  diimplementasikan  [7].  Keuntungan  menggunakan wireframe adalah menghemat waktu dan dapat diubah kapanpun.  Penulis  menggunakan tool berupa  Figma. Berikut ini merupakan contoh dari wireframe .
Gambar 3. Wireframe
Gambar  3,  merupakan  kumpulan wireframe dari landing  page ,  pembelian  paket,  modal  masuk,  modal daftar,  halaman  pertanyaan  dan  admin  workspace. Wireframe ini nantinya akan digunakan penulis sebagai acuan untuk membuat high fidelity desain.
Setelah  penulis  membuat wireframe ,  langkah selanjutnya  adalah  tahap  perancangan  tampilan high fidelity desain ( Hi-fi ). Hi-Fi merupakan tahap mengubah wireframe dengan diberikan pewarnaan, icon , gambar, font , shape dan yang lainnya [8]. Pada pembuatan Hi-Fi pada website ini  penulis  menggunakan tool Figma dikarenakan  penulis  sudah  merasa  familiar  dalam menggunakan tool tersebut [8]. Berikut ini merupakan contoh dari Hi-fi .
Gambar 4. Hi-Fi landing page
Gambar 4, merupakan landing page dimana semua informasi mengenai produk tersedia pada halaman ini. Mulai  dari  tujuan  produk,  fitur  produk,  testimoni produk,  daftar,  dan  masuk  akun  ada  di  halaman  ini. Pengguna  dapat  membeli  produk  dan  memakai  fitur menjawab  pertanyaan  untuk  mengetahui  minat bakatnya.

## Gambar 5. Pembelian paket
Gambar  5,  merupakan  halaman  pembelian  paket. Setiap paket memiliki fitur yang berbeda dan harga yang berbeda, mulai dari paket sharing , workshop , test, silver , gold ,  dan  platinum  .Pengguna  dapat  membeli  sesuai kebutuhannya.
Gambar  6. Modal daftar, masuk, dan pengaturan
Gambar  6,  pengguna  dapat  mendaftarkan  dirinya dengan  memasukan  nama  lengkap,  email  dan  kata sandi.  Selain  itu,  pengguna  dapat  masuk  dengan memasukan email dan kata sandi, pengguna juga dapat masuk  menggunakan  akun  Google.  Apabila  pengguna lupa  dengan  kata  sandinya,  dapat  menggunakan  fitur lupa kata sandi.
Modal  pengaturan,  pengguna  dapat  mengatur profile mulai  dengan  mengganti  foto,  nama  lengkap,
email, dan lainnya. Pengguna dapat menggunakan fitur riwayat untuk melacak asesmen yang sudah dikerjakan.

## Gambar 7. Halaman pertanyaan
Gambar 7, pada halaman ini pengguna mengerjakan asesmen berupa pertanyaan, ada 3 tipe pertanyaan saat ini  yaitu  pilihan  ganda,  pengurutan,  dan  isian.  Setelah pengguna menjawab semua pertanyaan, pengguna akan menerima laporan dari hasil asesmen yang dikerjakan.
Gambar 8. Hi-Fi admin workspace
Gambar  8,  merupakan dashboard admin.  Pada halaman ini, admin dapat membuat soal, menambahkan kategori soal, melacak transaksi, dan fitur lainnya.
C. Implementasi Tahap  implementasi  menggunakan library dan framework tentunya  membutuhkan  instalasi  yang sangat berguna untuk kelancaran proses implementasi. pada  tahap  ini  penulis  melakukan  proses  instalasi menggunakan sebuah package manager yang bernama yarn . yarn ini nantinya yang akan penulis gunakan dalam membangun  proyek  magang  ini.  terdapat  beberapa library yang  penulis  gunakan  dalam  membantu kebutuhan proyek magang. seperti contoh nya instalasi encrypt-storage sebagai enkripsi data ke dalam storage ,
react-pdf sebagai  pengimplementasian  dari Portable Document  Format ( PDF) ke  dalam  React.js  dan  masih banyak lainnya. Contoh instalasi ditujukan pada Gambar 9.
Gambar 9. Instalasi Library dan Framework
Tahap slicing pada  tahap  ini  penulis  membuat tampilan pada website menggunakan library javascript berupa React.js dan framework ui berupa materialize-ui . React.js  merupakan library javascript yang  memiliki dokumentasi lengkap dan penggunaan yang memudahkan  pengembang  dalam  membuat  tampilan website [9]. Materialize-ui ini  berfungsi  sebagai pendukung  dalam  membuat  sebuah  komponen tampilan interface pada website , dengan menggunakan framework ini  penulis  dapat  dengan  mudah mengimplementasikan  desain  yang  diminta  karena banyak  sekali  komponen  yang  telah  disediakan  pada bagian  dokumentasi.  Contoh  slicing  ditujukan  pada Gambar 10.
Gambar 10. Implementasi Slicing Interface
Setelah  tahap  instalasi  dan  tahap  implementasi slicing maka  selanjutnya  langsung  ke  tahap  integrasi. tahap  integrasi  adalah  tahap  menghubungkan  antara backend - frontend dengan  cara consume  api dari backend dan nanti akan diimplementasikan ke frontend untuk ditampilkan ke pengguna. pada tahap integrasi ini penulis  menggunakan state  management  redux yang
memudahkan  dalam  tahap development .  Contoh integrasi ditujukan pada Gambar 11.
Gambar 11. Proses Integrasi menggunakan Redux
Tahap  terakhir  dalam  implementasi  adalah  tahap deployment . Tahap deployment adalah tahap publikasi coding yang  telah  penulis  buat  ke  dalam  server  yang nantinya  digunakan  oleh  pengguna.  Pada  tahap deployment penulis  menggunakan docker untuk management tiap image kemudian  melakukan deployment  ke AWS ( Amazon  Web  Storage ) menggunakan nginx .  Contoh  deployment  ditujukan pada Gambar 12 dan Gambar 13.
Gambar 12. Proses set up docker dan nginx
Gambar 13. Berhasil melakukan deployment ke AWS
D. Testing
Tahap  ini  penulis  menggunakan  metode testing berupa System  Usability  Scale (SUS)  dengan  5 responden. Terdapat 10 pertanyaan yang akan diberikan kepada responden untuk mengukur kepuasan pengguna terhadap  fitur website yang  penulis  kembangkan. Pertanyaan  yang  telah  penulis  berikan  mengacu  pada Standart  Usability  Questionnaires dari  SUS  [10].  Detail pertanyaan ditunjukkan pada Tabel 1.

## Tabel 1. Pertanyaan SUS
No Pertanyaan
1 Saya berpikir akan menggunakan sistem ini lagi
2 Saya merasa sistem ini rumit untuk digunakan
3 Saya merasa sistem ini mudah digunakan
4 Saya membutuhkan bantuan dari orang lain atau teknisi dalam menggunakan sistem ini
5 Saya merasa fitur-fitur sistem ini berjalan dengan semestinya
6 Saya merasa ada banyak hal yang tidak konsisten (tidak serasi pada sistem ini)
7 Saya merasa orang lain akan memahami cara menggunakan sistem ini dengan cepat
8 Saya merasa sistem ini membingungkan
9 Saya merasa tidak ada hambatan dalam menggunakan sistem ini
10 Saya perlu membiasakan diri terlebih dahulu sebelum menggunakan sistem ini
Tabel 2. Hasil Pengujian No Jumlah Nilai Hasil Penilaian (Jumlah nilai x 2.5) 1 26 65 2 35 87,5 3 37 92,5 4 40 100 5 39 97,5 Skor rata-rata (Hasil akhir) 88,5

## Gambar 14. Penilaian SUS
Berdasarkan  hasil  pengujian  pada  Tabel  2, mendapatkan  hasil  rerata  88,5  menurut  Gambar  14 termasuk  kedalam  kategori excellent dan  dengan  nilai tersebut bahwa website yang telah dikembangkan dapat membantu  pengguna  dalam  proses  bertransaksi, membuat  soal  asesmen,  mengerjakan  soal  asesmen, dan mendapatkan hasil laporan dari tes yang digunakan pengguna.
Gambar 14. Temuan evaluasi dan review dengan Yayasan Bina Dhirgantara
Gambar  14,  merupakan  temuan  evaluasi    dan review perkembangan website koriwira.id dengan pihak Yayasan Bina Dhirgantara. Evaluasi ini bertujuan untuk meninjau  kembali  kekurangan  dan  apa  yang  perlu diperbaiki  dari website agar  sesuai  dengan  yang diharapkan.

## KESIMPULAN
Dapat  disimpulkan  bahwa  perancangan website asesmen dapat membantu mempermudah peserta didik untuk  mengetahui  minat  dan  bakat  mereka.  Dengan menggunakan layanan asesmen yang telah penulis buat diharapkan peserta didik nanti nya dalam memilih karir atau masa depan dapat terukur. Hasil pengujian kepada pengguna  menggunakan  metode  pengujian  SUS menghasilkan nilai rerata 88,5 yang termasuk kedalam kategori excellent .  Dari  hasil  pengujian  yang  telah
penulis  lakukan,  pengguna  sudah  paham  dan  tidak mengalami kesulitan dengan website yang telah penulis kembangkan.

## DAFTAR PUSTAKA

## [1]
Rustaman, “PENTINGNYA ASESMEN ALTERNATIF DALAM MENINGKATKAN KEMAMPUAN BERPIKIR DAN MEMBACA ILMIAH SISWA PADA PEMBELAJARAN BIOLOGIe,” syekhnurjati.ac.id , 2006, Accessed: Nov. 27, 2022. [Online]. Available: https://www.syekhnurjati.ac.id/jurnal/index.php/sce ducatia/article/view/502 [2] J. E. Manurung. and E. T. Putri., “PENENTUAN MINAT BAKAT MENGGUNAKAN METODE BAYES BERBASIS WEB,” vol. 54, no. 4, pp. 337– 348, 2020, doi: 10.31857/s0320930x20040088.
[3] S. O. A. T. S. I. Narulita, “Pengujian Akurasi Model PrediksiMenggunakan Metode Data
MiningClassification Decision Tree Algoritma C4.5Untuk Penentuan Peminatan Peserta Didik,” J. Media Apl. , vol. 13, pp. 68 – 82, 2021.
[4] T. N. Höffler, C. Köhler, and I. Parchmann, “Scientists of the future: an analysis of talente d students’ interests,” Int. J. STEM Educ. , vol. 6, no. 1, pp. 1 – 8, Dec. 2019, doi: 10.1186/S40594-019-0184- 1/FIGURES/3.
[5] F. Ningsih and D. Daharnis, “The relationship of interest in majors and confidence with students’
career planning,” Int. J. Appl. Couns. Soc. Sci. , vol. 2, no. 2, pp. 175 – 185, Aug. 2021, doi:
10.24036/005442IJACCS.
[6] N. Lutfiani, P. Harahap, Q. Aini, A. Dimas, A. R. Ahmad, and U. Rahardja, “Inovasi Manajemen Proyek I-Learning Menggunakan Metode Agile
Scrumban,” InfoTekJar  J. Nas. Inform. dan Teknol. Jar. , vol. 5, no. 1, pp. 96 – 101, 2020.
[7] M. S. Hartawan, “PENERAPAN USER CENTERED
DESIGN (UCD) PADA WIREFRAME DESAIN USER INTERFACE DAN USER EXPERIENCE APLIKASI SINOPSIS FILM,” JEIS  J. Elektro dan Inform. Swadharma , vol. 2, no. 1, pp. 43 – 47, 2022, Accessed: Nov. 27, 2022. [Online]. Available: http://ejurnal.swadharma.ac.id/index.php/jeis/articl e/view/161 [8] N. Aulia, S. Andryana, and A. Gunaryati, “User Experience Design Of Mobile Charity Application
Using Design Thinking Method,” Sisfotenika , vol. 11, no. 1, p. 26, 2020, doi: 10.30700/jst.v11i1.1066.
[9] M. Wali and L. Ahmad, “Perancangan Access Open Journal System (AOJS) dengan menggunakan
Framework Codeigniter dan ReactJs,” J. JTIK (Jurnal Teknol. Inf. dan Komunikasi) , vol. 2, no. 1, p. 48, 2018, doi: 10.35870/jtik.v2i1.53.
[10] J. R. Lewis and J. Sauro, “Item Benchmarks for the System Usability Scale,” J. Usability Stud. , vol. 13, no.
3, pp. 158 – 167, 2018.
Gambar 15. Foto bersama CTO
Gambar 16. Penyerahan sertifikat magang kepada Akbar
Rahmana
Gambar 17. Penyerahan sertifikat magang kepada Daffa Putra Alwansyah
Gambar 18. Penyerahan sertifikat magang kepada Praditya Luthfi Suryalaksono