## Desain Aplikasi Pembelajaran Perangkat Jaringan Berbasis Augmented Reality Dengan Gamification Model Canvas
Tri Ika Jaya Kusumawati 1) * , Putri Hayati 2)
Universitas Budi Luhur 1) 2) tri.ikajaya@budiluhur.ac.id 1) * , putri.hayati@budiluhur.ac.id 2)

## Abstrak
Peranan  materi  pembelajaran  dan  cara  penyajian  materi  pembelajaran  dituntut  untuk  dapat menyesuaikan  segala  lini  teknologi  informasi.  AR  hadir  sebagai  jembatan  pengetahuan  virtual terhadap  objek  asli  materi  pembelajaran  dapat  lebih  interaktif  dengan  disajikan  menggunakan visualisasi  nyata. Serious  game dan  taksonomi  bloom  merupakan  salah  satu  bentuk  evaluasi pemahaman  peserta  didik  terhadap  sajian  materi  pembelajaran.  Materi  pembelajaran  pengenalan perangkat  jaringan  komputer  merupakan  materi  pembelajaran  umum  yang  sangat  dibutuhkan  pada zaman ini baik pelajar menengah, perguruan tinggi maupun masyarakat umum. Hal  ini dikarenakan segala informasi yang beredar melalui media digital, sehingga pengetahuan jaringan komputer adalah penting. Namun masalah yang dihadapi adalah model penyampaian materi pengenalan perangkat dan jaringan komputer masih terbatas pada modul atau buku ajar tekstual, pemahaman serta keterampilan terbatas pada praktik secara langsung, permasalahan perkembangan teknologi pembelajaran berbasis learning dan  penggunaan  aplikasi mobile .  Oleh  karena  itu  dibutuhkan  sebuah  model  materi pengenalan perangkat jaringan komputer menggunakan taksonomi bloom berbasis augmented realit. Dengan tujuan agar tercipta sebuah model materi pembelajaran interaktif yang tidak terbatas, aktual, mengasah  keterampilan  dan  kemampuan  melalui  AR,  serta  disajikan  dalam  bentuk  seperti  asli berbasis augmented  reality . Hasil  model  yang  dibuat  diharapkan  mampu  menjadi  solusi  pendidikan diera industri 4.0, dan dapat diterapkan mulai dari tingkat menengah maupun tingkat perguruan tinggi serta masyarakat umum. Selanjutnya, penelitian dilakukan melalui beberapa tahapan yaitu: (1) Studi literature serious  game , augmented  reality ,  serta  perangkat  jaringan  komputer.  (2)  Studi  kebutuhan pembelajaran  perangkat  jaringan  komputer  dengan  menggunakan  GMC  ( Gamification  Model Canvas ).  (3)  Pemodelan  alur  pembelajaran,  konten  materi,  berdasarkan  silabus.  (4)  Membuat rancangan aset 2D dan 3D sebagai landasan pembuatan materi pembelajaran. (5) Membuat rancangan proses  pembelajaran  yang  menerapkan  aplikasi  serta  modul.  Hasil  penelitian  ini  adalah  prototype materi  pembelajaran  interaktif  yang  mampu  memfisualisasikan  bentuk  nyata  perangkat  dan mempelajarinya tanpa harus memiliki atau menyentuh bentuk aslinya.
Kata kunci : serious game, AR, taksonomi bloom, GMC, perangkat jaringan komputer

## Abstract
[Design  of  a  Network  Device  Learning  Application  Based  on  Augmented  Reality  Using  Canvas Model Gamification]. The role of learning materials and the way of presenting learning materials are required to be able to adapt to all lines of information technology. AR is present as a bridge of virtual knowledge  of original objects,  learning materials can be more  interactive by  being presented using real visualizations. Serious game and bloom taxonomy is a form of evaluating students' understanding of the presentation of learning material. Learning material for the introduction of computer network devices is general learning material that is very much needed at this time, both for middle students, universities,  and  the  general  public.  This  is  because  all  the  information  circulates  through  digital media, so knowledge of computer networks is important. However, the problems encountered are that the delivery model for introducing device introduction material and computer networks is still limited to textual modules or textbooks, understanding, and skills are limited to hands-on practice, problems with  the  development  of  learning-based  learning  technology,  and  the  use  of  mobile  applications. Therefore  we  need  a  material  model  for  introducing  computer  network  devices  using  augmented reality-based  bloom  taxonomy.  To  create  an  interactive  learning  material  model  that  is  unlimited, actual,  hones  skills  and  abilities  through  AR,  and  is  presented  in  an  original  form  based  on augmented reality. The results of the model created are expected to be an educational solution in the industrial era 4.0 and can be applied starting from the secondary level and the tertiary level as well as the general public. Furthermore, the research was carried out through several stages, namely: (1) Literature study of serious games, augmented reality, and computer network devices. (2) Study of the
DOI: http://dx.doi.org/10.21111/fij.v8i2. 10644
Diterima: 24 Agustus 2023 Revisi: - Terbit: 25 Maret 2024
learning needs of computer network devices using GMC (Gamification Model Canvas). (3) Modeling learning  flow,  and  material  content,  based on  the  syllabus.  (4)  Designing  2D  and  3D  assets  as  the basis for making learning materials. (5) Designing a learning process that applies applications and modules. The results of this study are prototypes of interactive learning materials that can visualize the real form of the device and study it without having to own or touch the original form.
Keywords : serious game, AR, bloom taxonomy, GMC, computer network device

## 1. PENDAHULUAN
Peningkatan  kualitas  pembelajaran  dapat dilakukan  dengan  memperbaki  kualitas  materi pembelajarannya.  Kegagalan  pembelajaran  yang dibuktikan  dengan  menurunnya  tingkat  pemahaman siswa  serta  kemampuan  daya  analisis  masalah terhadap  situasi  dan  kebutuhan.  Materi  pembelajaran menempati  posisi  yang  sangat  penting  dari keseluruhan kurikulum, yang harus dipersiapkan agar pelaksanaan  pembelajaran  dapat  mencapai  sasaran. Sasaran  tersebut  harus  sesuai  dengan  kompetensi  inti dan kompetensi dasar yang harus dicapai oleh peserta didik.  Hal  ini  mengisyaratkan  bahwa,  materi  yang ditentukan  untuk  kegiatan  pembelajaran  hendaknya materi  yang  benar-benar  menunjang  tercapainya kompetensi  Inti  dan  kompetensi  dasar,  serta tercapainya indikator kompetensi yang diharapkan [1]. Materi  jaringan  komputer  merupakan  materi  yang mengajarkan  tentang hardware serta  jaringan telekomunikasi  yang  memungkinkan  antar  komputer untuk saling berkomunikasi dengan bertukar data.
Tahapan  dalam  materi  ini;  pengenalan hardware ,  pengenalan  jenis-jenis  jaringan,  topologi jaringan,  teknik  penyaluran  sinyal  serta  prinsip penyaluran sinyal [2]. Materi ini menjadi penting bagi pelajar  sekolah  menengah  maupun  perguruan  tinggi dibidang  TKJ  maupun  fakultas  teknik  informatika, bahkan  masyarakat  umum  pada  era  industri  4.0. Materi  ini  tidak  hanya  mengenai  penguasaan  materi namun dituntut keterampilan pelajarnya untuk mampu praktik  dalam  bentuk  nyata.  Pengembangan  materi pembelajaran  agar  siswanya  mampu  menguasai kompetensi  inti  dan  kompetensi  dasar,  maka  telah dilakukan  banyak  riset  terutama  pada  penerapan serious  game . Serious  game menggabungkan pendidikan dengan tantangan dan hiburan [3]. Dengan demikian  belajar  menjadi  menyenangkan,  lebih nyaman, dan lebih efisien. Namun pada penerapannya jika  dibatasi  oleh  perangkat  untuk  memainkannya maka masih terdapat batasan pada penyampain materi tersebut.  Seharusnya  model serious  game yang disajikan  mengikuti  perkembangan trend teknologi yang  digunakan  oleh  siswanya  seperti smartphone . Berdasarkan  data  dari  Asosiasi  Penyelenggara  Jasa Internet  Indonesia  (APJII),  pengguna smartphone di Indonesia  mencapai  92juta  [4].Hal  ini  menunjukkan bahwa smartphone merupakan kebutuhan utama yang dimiliki  oleh  masyarakat  Indonesia.  Banyak  aplikasi dan  kemudahan  untuk  membantu  kehidupan  sehari- hariatau sekedar intertain.
Tujuan  penelitian  ini  agar  tercipta  sebuah model  materi  pembelajaran  interaktif  yang  tidak terbatas,  aktual,  mengasah  keterampilan  dan kemampuan  melalui serious  game ,  serta  disajikan dalam bentuk seperti asli berbasis augmented reality.

## 2. BAHAN DAN METODE

## Augmented Reality
Menurut  Azuma  R.  T.,  1997  dalam Perkembangan  teknologi  pengolahan  image  saat  ini telah  melahirkan  berbagai  teknologi  baru,  salah satunya Augmented  Reality (AR)[5]. Augmented Reality didefinisikan  sebagai  penggabungan  objek atau komponen digital dengan objek-objek nyata yang ditampilkan  dengan  interaktif  dan  real  time  [6]. Augmented Reality adalah teknologi yang menggabungkan benda maya dua dimensi dan ataupun tiga  dimensi  kedalam  sebuah  lingkungan  nyata  tiga dimensi  lalu  memproyeksikan  benda-benda  maya tersebut dalam waktu nyata. Bisa diartikan juga bahwa Augmented Reality yang disingkat  dengan AR adalah perwujudan dari benda  di dunia  maya  kedalam dunia nyata baik dalam dua dimensi atau tiga dimensi [7]. Taksonomi Bloom
Taksonomi bloom merupakan salah satu model proses  kognitif  manusia  yang  paling  banyak digunakan.  Model  taksonomi  bloom  pertama  kali diciptakan  pada  tahun  1956  [8].  Model  ini  kemudian direvisi pada tahun 2001 [6].
Taksonomi bloom terevisi  saat  ini  menjadi lebih  diakui  dan  banyak  digunakan  di  dunia pendidikan. Taksonomi bloom  terdiri atas enam level kemampuan  seperti  yang  ditunjukkan  pada  gambar  1 berikut [9].
Penerapan taksonomi bloom dalam pembelajaran berkaitan erat dengan tujuan yang ingin dicapai  dari  proses  pembelajaran.  Pada  pembelajaran blended  learning, yang merupakan  pembelajaran popular  dan  banyak  diterapkan  diberbagai  perguruan tinggi  [8],  penerapan  taksonomi  bloom  perlu  diatur agar dapat memfasilitasi siswa belajar secara optimal. Pembelajaran blended learning merupakan pembelajaran yang menggabungkan antara komponen e-learning dan  pembelajaran  tatap  muka.  Menurut Allen  [9]  suatu  pembelajaran  disebut  sebagai pembelajaran blended learning jika 30 sampai dengan 79 persen materi pembelajarannya disampaikan secara online .
Gambar 1 . Taksonomi Sebelum Dan Sesudah
Revisi

## Gamification and Game-Based Learning
Gamifikasi menggunakan dinamika permainan, mekanika,  dan  elemen  permainan  lainnya  dalam sistem  non game untuk  memotivasi  siswa.  Misalnya, tantangan,  lencana,  level,  hadiah,  penyesuaian,  dan lain-lain[10].
Ada  mekanisme  permainan  yang  berbeda, seperti  yang  berfokus  pada  perilaku  manusia,  yang terkait  dengan  umpan  balik,  dan  yang  digunakan untuk  menyusun  pencapaian  dan  keterampilan  serta menunjukkan kemajuan mereka dalam permainan[11]. Demikian pula, mekanisme lain dapat diterapkan pada gamifikasi  dalam  pendidikan,  seperti  batasan  waktu, eksplorasi  konten,  membuka  kunci,  dan  tantangan kolaboratif  dan  kompetitif,  selain  elemen  permainan lain  yang  memungkinkan  untuk  mencapai  tujuan dan penghargaan[12].
Gambar  2  Beberapa  karakteristik  yang mendefinisikan  pembelajaran  berbasis  permainan adalah  bahwa  pembelajaran  harus  dilakukan  dengan menggunakan  skenario  yang  menarik,  menciptakan pengalaman  yang  positif  dan  harus  ada  evolusi (misalnya  melalui  mengatasi  rintangan  atau  level). Membangun  model  yang  dapat  digunakan  dalam merancang  dan  menganalisis  game  edukasi  sangat diperlukan. Tujuan utama dari model ini adalah untuk menghubungkan gameplay dengan pembelajaran[13].
Gambar 2. Gamification Model Canvas 2.0 [3]

## 3. HASIL DAN PEMBAHASAN
Gambar  3  Desain  aplikasi  untuk  siswa/I  SMK sederajat yang dirancangan sebagai berikut :

## Gambar  3. Hasil Penelitian dengan menerapkan Metode IMSDD

## System Requirement
Tahap  awal  pada  penelitian  ini  adalah menyiapkan  kebutuhan system .  Beberapa  aktifitas terkait yaitu ; user , kebutuhan software dan hardware , authoring tools , serta mempertimbangkan secara hati- hati platform penyampaian  yang  dibutuhkan  untuk sistem tersebut.

## Design Consideration
Tahap  kedua  adalah  menggambarkan  dengan jelas  rincian  dari  perancangan.  Tujuan  pada  tahapan ini  yaitu;  metafora  perancangan  (memilih  satu  dunia nyata yang digunakan sebagai kunci), format dan tipe informasi, struktur navigasi, dan control system . Implementation
Tahapan  ke  tiga  adalah  implementasi  yang terdiri  dari  ;  membuat prototype system dan melakukan  test  beta  terhadap prototype untuk kemungkinan  masalah-masalah  perancangan  dan kontrol.

## Evaluation
Tahapan  terakhir  ini  adalah  evaluasi  hasil dengan  tujuan  dibangunnya system .  Jika  ditemukan ketidak  sesuaian  maka  proses  ini  akan  kembali  pada tahap  awal  dan  seterusnya  sampai  dengan  hasil evaluasi tidak ditemukan kembali yang tidak sesuai.
Rancangan gamification model canvas
Pemodelan  Materi  Pembelajaran  Jaringan  Komputer Menggunakan Taksonomi Bloom Berbasis Augmented Reality Serious Game ditunjukkan pada Gambar 4.
Gambar  4. Gamification Model Canvas Pemodelan Materi Pembelajaran Jaringan Komputer
System Requirement
user :  siswa/i SMK
sederajat software : unity hardware : smartphone tools : vuforia Design Consideration
Perancangan/desain sistem flowchart cara kerja dan desain marker Implementation Hasil berupa prototype aplikasi Evaluation
penerimaan pengguna/ hasil uji penggunaan Pemahaman Pengetahuan Aplikasi Analisis Evaluasi Kreasi Memahami Mengingat Mengaplikasika n Menganalisi Mengevalua si Mencipta

## Penjelasan :

## Revenue Stream
Pengembalian  ekonomi  dan  sosial,  dalam  hal ini  pemain  mendapatkan  pembelajaran  non  formal berupa  keterampilan  secara  tidak  langsung  melalui game  yang  disajikan.  Keberhasilan  pemain  dalam menyelesaikan  materi  dan  permainan  akan  menjaddi bukti  pencapaian  kemampuan  pemain  secara keterampilan  yang  kemudian  dibuktikan  dengan tercetakkanya  sertifikat  keberhasilan  mengerjakan seluruh materi dan misi pada game ini.

## Players
Game ini diperuntukkan bagi pemain atau user usia  15  sampi  dengan  17  atau  usia  sekolah  SMK  / SMA  sederajat  atau  mereka  yang  ingin  mempelajari TKJ. Jenis atau kriteria pemain ini dikarenakan materi dan  permainan  yang  disajikan  merupakan  tingkat materi  yang  butuh  pemahaman  dan  daya  nalar  yang cukup yang dimiliki oleh remaja usia tersebut.
Behaviors
Perilaku atau
tindakan yang perlu dikembangkan pada pemain kami untuk mendapatkan hasil  dari  proyek  antara  lain  daya  ingat,  kekuatan analisis,  mampu  memecahkan  masalah,  dan  tingkat kreatifitas  dan  pola  pikir  pengembangan  untuk menciptakan  sesuatu  yang  baru  sebagai  bentuk pencapaian kretifitas dari materi yang telah didapatkan serta level-level permainan yang disajikan.

## Aesthetics
Respons  emosional  yang  diinginkan  yang muncul dalam diri pemain, ketika mereka berinteraksi dengan  permainan  adalah  naratif  (kemampuan menjelaskan,  memahami,  mengelompokkan  dan sebagainya),  tantangan  (kemampuan  menyelesaikan permaian  dengan  pencapaian  waktu  terbaik), kreatifitas (ruang kebebasan menggabungkan, merakit komponen perangkat menjadi sebuah peralatan baru)

## Dynamics
Perilaku run-time dari mekanisme yang bekerja pada pemain dari waktu ke waktu pada permainan ini antara  lain  ;  daya  ingat,  analisis,  penghargaan, penyelesaian masalah dan kreatifitas.

## Components
Elemen  atau  karakteristik  permainan  untuk memberikan  umpan  balik  kepada  para  pemain  antara lain;  level,  point,  Mencari,  mengelompokkan, memasangkan, analisis dan pengembangan

## Mechanics
Aturan  permainan,  pemain  diminta  untuk memulai  dengan  membaca  dan  memahami  materi kemudian  memahami  bentuk  alat  secara  3D menggunakan  AR.  Sebagai  tahap  pemahaman  materi pemain  diwajibkan  bermain,  pemain  tidak  akan  ke materi berikutnya atau tidak dapat melanjutkan belajar jika  materi  sebelumnya,  belum  selesai  atau  belum berhasil. Permainan sederhana sudah dilalui seluruhnya pemain akan disuguhkan dengan perminan tinggal  tinggi  atau  berikutnya  yang  merupakan permainan  analisis  dan  pengembangan  kemampuan berfikir.

## Platforms
Platform untuk mengimplementasikan
mekanisme  permainan  berupa  android  dengan minimum spesifikasi android 7.0.0 Cost Biaya
dan investasi utama dalam penngemabangan  proyek  ini  adalah  untuk  riset, penelitian,  pengembangan  desain  ui/ux  dan  aset  baik 2D maupun 3D .

## Materi  Perangkat  dan  Topologi  Jaringan Komputer
Materi  perangat  dan  topologi  jaringan komputer  yang  disajikan  pada  materi  berdasarkan bahan  ajar  yang  ada  di  SMK/SMA  sederajat  dan Perguruan  tinggi  yang  menerapkan  materi  Jaringan komputer.  Materi  yang  disajikan  dapat  dilihat  pada tabel 1.
Tabel 1 List Materi Pembelajaran Perangkat dan Topologi
Jaringan Komputer No Materi Deskripsi Jenis 1 Connector Rj-45 Konektor  kabel  ethenet yang  digunakan  di  dalam topologi jaringan berbasis LAN  atau  local  are networking maupun topologi yang lain Perangkat Jaringan 2 Connector BNC-T Konektor  Bayonet  Neill Conceiman Perangkat Jaringan 3 Lan Card NIC  Network  Interface Card  atau  LAN  Card merupakan perangkat keras jaringan Perangkat Jaringan 4 Wireless Card Perangkat  yang  hamper pastiada  disemua  laptop keluaran terbaru Perangkat Jaringan 5 Router Perangkat  keras  jaringan komputer  yang  berfungsi untuk menghubungkan beberapa jaringan. Perangkat Jaringan 6 Switch Sebuah perangkat jaringan  pada  komputer yang menghubungkan perangkat Perangkat Jaringan 7 Modem Sebuah akronim  dari modulator demodulator. Perangkat Jaringan

## Rancangan Layar
Berdasarkan  tahapan dan analisa  yang sudah dilakukan  maka  rancangan  aplikasi  yang  dibangun sebagai berikut:
1. Rancangan Layar Utama
Perancangan interface tampilan utama terdiri dari 2 tampilan  (1)  splash  screen  dan  (2)  tampilan  menu utama  aplikasi seperti  yang ditunjukkan pada gambar 5.
Gambar  5. (1) Rancangan Layar splash screen
Splash screen hanya ketika aplikasi pertama kali di jalankan  dan  akan  langsung  beralih  menuju  ke tampilan  menu  utama  yang ditunjukkan  pada  gambar 6.

## Gambar  6. (2) Rancangan layar Menu Utama
2. Rancangan Layar Materi Perancangan  interface  materi  pembelajaran  dan pengenalan perangkat jaringan komputer seperti yang ditunjukkan pada gambar 7.
Gambar  7. Rancangan Layar Materi

## Pembelajaran dan Pengenalan perangkat jaringan komputer
Pada  gambar  7  Image  2D  merupakan  gambar bentuk  perangkat  secara  dua  dimensi  berikut  materi secara narasi atau deskripsi detail dari perangkat yang ditampilkan.  Tombol  AR  untuk  melihat  secara  detail melalui gambar tiga  dimensi yang dapat  dirotasi atau diputar, diperbesar dan diperkecil. Tombol next untuk melanjutkan  ke  materi  berikutnya  materi  disajikan dengan  urutan  perangkat  dasar  sampai  dengan perangkat lanjutan.
3. Rancangan Layar AR Perangkat Jaringan
Perancangan  interface  AR  perangkat  jaringan komputer seperti yang ditunjukkan pada gambar 8.
Gambar  8. Rancangan Layar Scan/Pindai Marker Perangkat Jaringan
Pada  gambar  8,  AR  3D  merupakan  tangkapan layar  dari  perangkat  handphone  untuk  memindai marker  yang  ada  pada  buku  marker.  Pencahayaan menjadi kunci agar marker dapat terdeteksi kemudian bentuk  tiga  dimensi  akan  muncul  jika  marker  dapat dideteksi. Tombol 3D digunakan untuk melihat detail marker tangkapan layar seperti yang ditunjukkan pada gambar 11.

## Gambar  9. Rancangan Layar Detail 3D
Pada  gambar  9,  image  3D  akan  menampilkan bentuk tiga dimensi dari perangkat yang telah dipindai sebelumnya.  Icon  tangan  digunakan  untuk  merotate gambar  3600    untuk  melihat  secara  detail  bentuk jaringan komputer secara detail. Symbol + digunakan untuk  memperbesar  bentuk  3  dimensi,  -  digunakan untuk  memperkecil  tampilan  tiga  dimensi  perangkat yang ditampilkan.

## Analisis Fungsional dan Cara Kerja
Cara  kerja  dari  aplikasi  ini  digambarkan  dengan menggunakan flowchart sebagai berikut : 1. Flow Menu Utama Flow  prototype materi  perangkat  jaringan komputer  digambarkan  menggunakan  flowchar, seperti yang ditunjukkan pada gambar 10.

## Gambar  10.Flowchart Menu Utama
Pada  gambar  6  di  atas  merupakan flow  prototype aplikasi  dari  awal  untuk  memilih  menu-menu  yang ada, diterangkan sebagai berikut :
a. Start
b. Tampilan splash screen
c. Tampilan animasi dan menu  utama
d. Pilih  menu  materi,  maka  akan  menampilkan materi yang pertama.
e. Pilih  menu  profil,  maka  akan  menampilan profil  pengguna  yang  didaftarkan  untuk menggunakan  aplikasi  ini,  jika  memilih  back maka akan kembali ke menu utama.
f. Pilih  menu  panduan,  maka  akan  menampilkan panduan, jika pilih back maka akan kembali ke menu utama.
g. Pilih  exit,  maka  akan  muncul  pilihan  yakin untuk keluar dari aplikasi ya atau tidak.
2. Flow Materi
Flow  materi  perangkat  jaringan  komputer digambarkan  menggunakan  flowchar,  seperti yang ditunjukkan pada gambar 11.

## Gambar  11.Flowchart Materi
Pada gambar 11 diatas merupan flow materi. Pada tampilan materipilih AR maka akan menampilkan AR perangkat, atau dapat memilih next maka akan menuju ke  materi  berikutnya,  jika  memilih  back  maka  akan kembali  ke  menu  materi  atau  tetap  akan  berada  pda tampilan materi.
3. Flow AR Perangkat
Flow
AR perangkat jaringan komputer digambarkan  menggunakan  flowchar,  seperti  yang ditunjukkan pada gambar 12.
Tampil Kamera Tampil 3d Objek Pilih = 3d Button Pilih = Kembali Menu AR Yes No AR Perangkat Deteksi Marker Marker Terdeteksi Yes No Yes No Marker Tampil Deskripsi Objek
Pilih = Detail 3D Tampil Detail 3D Pilih = Kembali Yes No Yes No
Gambar  12. Flowchart Cara Kerja Augmented Reality Perangkat Pada Camera Handphone
Pada flowchart ini  menjelaskan  cara  kerja  dari menu  AR  perangkat.  Apabila  menu  AR  perangkat  di tekan, akan diarahkan ke tampilan layar AR perangkat yang langsung terkoneksi dengan kamera handphone ,
lalu  pengguna  mengarahkan  kamera  ke  marker, aplikasi mendeteksi marker tersebut apabila terdeteksi akan  muncul  objek  3D  beserta  3D button untuk menuju  ke  laman  deskripsi.  Dilaman  deskripsi  akan terdapat  deskripsi  dari  objek  dan  tombol  detail  3D, jika  tombol  detail  3d  ditekan  akan  menuju  ke  laman detail  3D  jika  telah  selesai  ke  laman  detail  3D  akan ada  tombol  kembali  untuk  menuju  ke  laman  AR perangkat.  Di  laman  AR  perangkat  akan  ada  tombol kembali untuk menuju ke menu AR Gambar flowchart seperti gambar 12 diatas.
4. Flow AR Topologi Flow AR Topologi
jaringan komputer digambarkan  menggunakan flowchar ,  seperti  yang ditunjukkan pada gambar 13.
Tampil Kamera Tampil 3d Objek Pilih = 3d Button Pilih = Kembali Menu AR Yes No AR Topologi Deteksi Marker Marker Terdeteksi Yes No Yes No Marker Tampil
Deskripsi Objek Pilih = Detail 3D
Tampil Detail 3D Pilih = Kembali Yes No Yes No
Gambar  13. Flowchart Cara Kerja Augmented Reality Topologi Pada Camera Handphone
Pada flowchart ini  menjelaskan  cara  kerja  dari menu  AR  topologi.  Apabila  menu  AR  topologi  di tekan,  akan diarahkan ke  tampilan  layar  AR  topologi yang langsung terkoneksi dengan kamera handphone , lalu  pengguna  mengarahkan  kamera  ke  marker, aplikasi mendeteksi marker tersebut apabila terdeteksi akan  muncul  objek  3D  beserta  3D button untuk menuju  ke  laman  deskripsi.  Dilaman  deskripsi  akan terdapat  deskripsi  dari  objek  dan  tombol  detail  3D, jika  tombol  detail  3d  ditekan  akan  menuju  ke  laman detail  3D  jika  telah  selesai  ke  laman  detail  3D  akan ada  tombol  kembali  untuk  menuju  ke  laman  AR perangkat.  Di  laman  AR  perangkat  akan  ada  tombol kembali untuk menuju ke menu AR gambar flowchart seperti gambar 13 diatas.

## Tampilan Layar
Hasil dari rancangan dan analisa yang telah dilakukan berikutnya  dilakukan  pengkodean  program.  Berikut merupakan tampilan hasil program:
1. Tampilan Layar SplashScreen
Pada  saat  pertama  kali  aplikasi  dijalankan,  akan muncul  tampilan  layar Splashscreen . Splashscreen adalah  suatu  kondisi  yang  digunakan  untuk menggambarkan  image  atau  gambar  yang  muncul pada  saat  sebuah  aplikasi  atau  program dalam  proses loading.  Bentuk splashscreen tidak  selalu  berbentuk satu  image  penuh  yang  akan  menutupi  seluruh  layar
Smartphone, terkadang  juga  hanya  muncul  dalam bentuk  yang  kecil, Splashscreen ini  digunakan  pada aplikasi  sebagai feedback bahwa  aplikasi  tersebut sedang dalam proses loading. Seperti pada gambar 14 berikut:
Gambar  14. Tampilan Layar SplashScreen

## 2. Tampilan Layar Menu Utama
Tampilan  layar  Menu  Utama  akan  tampil  sesaat setelah  tampilan Splashscreen .  Tampilan  layar  menu utama  adalah  tampilan  utama  dari  aplikasi  tersebut, yang artinya pada tampilan inilah kita mengoperasikan fungsi-fungsi  yang  lainnya  seperti,  Materi,  Panduan, Profil , dan Keluar. Seperti pada gambar 15 berikut :

## Gambar  15. Tampilan Layar Menu Utama

## 3. Tampilan Layar Materi
Untuk  materi  perangkat  komputer  dan  jaringan komputer terdiri dari 7 materi perangkat dan 4 materi jaringan sebagai berikut :
a. Materi Pengenalan Connector RJ 45
Tampilan layar pengenalan connector RJ 45 akan tampil  ketika  user  memilik  menu  materi  pada  menu utama Gambar 16.

## Gambar  16. Tampilan Layar Materi Pengenalan Connector RJ 45
Scroll layar  ke  bawah  untuk  membaca  materi secara lengkap. Untuk melihat bentuk perangkat lebih
detail  klik  tombol  AR  Perangkat,  untuk  membaca materi berikutnya klik tombol selanjutnya.

## Gambar  17. Tampilan Layar AR Perangkat
Gambar  17  Untuk  melihat  detail  dari  perangkat yang telah berhasil discan klik tombol “Detail 3D”.

## Gambar  18. Tampilan Layar Detail 3D
Gambar  18  Untuk  melihat  atau  mempelajari perangkat  yang  telah  ditampilkan  secara  detail  dapat klik routed , perbesar dan perkecil dari bentuk 3D yang ditampilkan.
b. Materi Peengenalan Connector BNC/T Tampilan layar pengenalan connector BNC/T akan tampil ketika user klik tombol lanjutkan setelah materi
connector RJ45.
Gambar  19 Tampilan Materi Pengenalan Connector BNC/T
Gambar 19 Scroll layar ke bawah untuk membaca materi  secara  lengkap.  Untuk  melihat  bentuk perangkat  lebih  detail,  klik  tombol  “AR  Perangkat”, untuk  membaca  materi  berikutnya  klik  tombol selanjutnya.

## Gambar  20 Hasil Scan marker Connector BNC/T
Gambar 20 Untuk  melihat  detail  dari  perangkat yang telah berhasil discan klik tombol “Detail 3D”

## Gambar  21 1Detail 3D Connector BNC/T
Gambar  21  Untuk  melihat  atau  mempelajari perangkat  yang  telah  ditampilkan  secara  detail  dapat klik routed, perbesar dan perkecil dari bentuk 3D yang ditampilkan.

## c. Materi Pengenalan Lan Card
Tampilan  layar  pengenalan  lan  card  akan  tampil ketika  user  klik  tombol  lanjutkan  setelah  materi connector BNC/T
Gambar  22 Tampilan Materi Pengenalan Lan Card
Gambar 22 Scroll layar ke bawah untuk membaca materi  secara  lengkap.  Untuk  melihat  bentuk perangkat  lebih  detail,  klik  tombol  “AR  Perangkat”, untuk  membaca  materi  berikutnya  klik  tombol selanjutnya.

## Gambar  23 Hasil Scan Marker Lan Card
Gambar  23  Untuk  melihat  detail  dari  perangkat yang telah berhasil discan klik tombol “Detail 3D” .

## Gambar  24 Detail 3D Lan Card
Gambar  24  Untuk  melihat  atau  mempelajari perangkat  yang  telah  ditampilkan  secara  detail  dapat klik routed, perbesar dan perkecil dari bentuk 3D yang ditampilkan.

## d. Materi Pengenalan Wireless Card
Tampilan  layar  pengenalan  Wireless  Card  akan tampil ketika user klik tombol lanjutkan setelah materi lan card .

## Gambar  25 Tampilkan Materi Pengenalan Wireless Card
Gambar 25 Scroll layar ke bawah untuk membaca materi  secara  lengkap.  Untuk  melihat  bentuk perangkat  lebih  detail,  klik  tombol  “AR  Perangkat”, untuk  membaca  materi  berikutnya  klik  tombol selanjutnya.
Gambar  26 2Hasil Scan Marker Wireless Card
Gambar  26  Untuk  melihat  detail  dari  perangkat yang telah berhasil discan klik tombol “Detail 3D”

## Gambar  27 Detail Wireless Card
Gambar  27  Untuk  melihat  atau  mempelajari perangkat  yang  telah  ditampilkan  secara  detail  dapat klik routed, perbesar dan perkecil dari bentuk 3D yang ditampilkan.

## e. Materi Pengenalan Router
Tampilan  layar  pengenalan  Router  akan  tampil ketika  user  klik  tombol  lanjutkan  setelah  materi connector Wireless Card .

## Gambar  28 Tampilan Materi Pengenalan Router
Gambar 28 Scroll layar ke bawah untuk membaca materi  secara  lengkap.  Untuk  melihat  bentuk perangkat  lebih  detail,  klik  tombol  “AR  Perangkat”, untuk  membaca  materi  berikutnya  klik  tombol selanjutnya.

## Gambar  29 Hasil Scan Marker Router
Gambar  29  Untuk  melihat  detail  dari  perangkat yang telah berhasil discan klik tombol “Detail 3D” .

## Gambar  30 Detail 3D Router
Gambar  30  Untuk  melihat  atau  mempelajari perangkat  yang  telah  ditampilkan  secara  detail  dapat klik routed, perbesar dan perkecil dari bentuk 3D yang ditampilkan.

## f. Materi Pengenalan Switch
Tampilan  layar  pengenalan  switch  akan  tampil ketika user klik tombol lanjutkan setelah materi router
Gambar  31 Tampilan Materi Pengenalan Switch
Gambar 31 Scroll layar ke bawah untuk membaca materi  secara  lengkap.  Untuk  melihat  bentuk perangkat  lebih  detail,  klik  tombol  “AR  Perangkat”, untuk  membaca  materi  berikutnya  klik  tombol selanjutnya
Gambar  32  Untuk  melihat  detail  dari  perangkat yang telah berhasil discan klik tombol “Detail 3D” .

## Gambar  33 Detail 3D Switch
Gambar  33  Untuk  melihat  atau  mempelajari perangkat  yang  telah  ditampilkan  secara  detail  dapat klik routed, perbesar dan perkecil dari bentuk 3D yang ditampilkan.

## g. Materi Pengenalan Modem
Tampilan  layar  pengenalan  Modem  akan  tampil ketika  user  klik  tombol  lanjutkan  setelah  materi switch .

## Gambar  34 Tampilan Materi Pengenalan Modem
Gambar 34 Scroll layar ke bawah untuk membaca materi  secara  lengkap.  Untuk  melihat  bentuk perangkat  lebih  detail,  klik  tombol  “AR  Perangkat”, untuk  membaca  materi  berikutnya  klik  tombol selanjutnya

## Gambar  35 Hasil Scan Marker
Gambar  35  Untuk  melihat  detail  dari  perangkat yang telah berhasil discan klik tombol “Detail 3D”

## Gambar  36 Detail 3D Modem
Gambar  36  Untuk  melihat  atau  mempelajari perangkat  yang  telah  ditampilkan  secara  detail  dapat klik routed, perbesar dan perkecil dari bentuk 3D yang ditampilkan.
Setelah  selesai  dari  materi  pengenalan  perangkat maka  pada  aplikasi  akan  tampil  peralihan  menuju  ke materi berikutnya

## Gambar  37 Selesai Materi Perangkat

## 4. KESIMPULAN
Berdasarkan  hasil  analisa,  perancangan  serta penerapan GMC maka dapat dihasilkan  model materi pembelajaran  interaktif  yang  tidak  terbatas,  aktual, mengasah  keterampilan  dan  kemampuan  melalui serious game , serta disajikan dalam bentuk seperti asli berbasis augmented reality . Model pembelajaran yang berhasil  dibuat  dapat  dikembangkan  sampai  dengan materi  topologi  jaringan  dan  evaluasi  pembelajaran yang  dapat  disajikan  dengan game sederhana  agar lebih menarik.

## 5. DAFTAR PUSTAKA
[1] T. R. Fachrudin and S. Asmiatun, “Penerapan Web  Based  Augmented  Reality  3D  pada
Game  Puzzle  Interaktif  Kerangka  Manusia,” CESS (Journal Comput. Eng. Syst. Sci. , vol. 5, no. 2, p. 251, 2020, doi: 10.24114/cess.v5i2.17336. [2] M.  Syafrizal, Pengantar  Jaringan  Komputer .
Yogyakarta: ANDI., 2005.
[3] A.  Gounaridou,  E.  Siamtanidou,  and  C. Dimoulas,  “A  serious  game  for  mediated education  on  traffic  behavior  and  safety awareness,” Educ.  Sci. ,  vol.  11,  no.  3,  2021, doi: 10.3390/educsci11030127.
[4] B.  Clinten,  “Pengguna  Internet  di  Indonesia Tembus  212,9  Juta  di  Awal  2023,”
Kompas.com ,  2023.  [Online].  Available:
https://tekno.kompas.com/read/2023/02/13/19
300087/pengguna-internet-di-indonesia- tembus-212-9-juta-di-awal-2023?page=all.
[5] F. Bellalouna, “Use Case of the Application of the  Optical-See-Through  Augmented  Reality Technology  in  the  Engineering  Context,” Procedia  CIRP ,  vol.  106,  pp.  3 – 8, 2022,  doi:
10.1016/j.procir.2022.02.146.
[6] I.  N.  Sukajaya,  I.  K.  E.  Purnama,  and  M.  H. Purnomo,  “Intelligent  Classification  of
Learner!s Cognitive Domain using Bayes Net, Naïve  Bayes,  and  J48  Utilizing  Bloom’s Taxonomy- based  Serious  Game,” Int.  J. Emerg.  Technol.  Learn. ,  vol.  10,  no.  2,  pp.
46 – 52, 2015, doi: 10.3991/IJET.V10I2.4451.
[7] W.  Mestadi,  K.  Nafil,  R.  Touahni,  and  R. Messoussi, “An Assessment of Serious Games Technology:  Toward  an  Architecture  for Serious  Games  Design,” Int.  J.  Comput.
Games  Technol. ,  vol.  2018,  2018,  doi:
10.1155/2018/9834565.
[8] N.  Arulanand,  A.  RameshBabu,  and  P.  K. Rajesh,  “Enriched  learning  experience  using augmented  reality  framework  in  engineering education,” Procedia  Comput.  Sci. ,  vol.  172, no.  2019,  pp.  937 – 942,  2020,  doi:
10.1016/j.procs.2020.05.135.
[9] L.  W.  Anderson et  al. , Taxonomy  for_
Assessing  a  Revision  0F  Bl00M’S  Tax0N0My 0F Educati0Nal Objectives . 2001.
[10] M.  Aparicio,  T.  Oliveira,  F.  Bacao,  and  M. Painho, “Gamification: A Key Determinant of
Massive  Open  Online  Course  (MOOC) Success,” Inf. Manag. , 2018, doi:
10.1016/j.im.2018.06.003.
[11] M.  A.  Harris,  “Maintenance  of  behaviour change  following  a  community-wide  gami  fi cation  based  physical  activity  intervention,” Prev.  Med.  Reports ,  vol.  13,  no.  November 2018, pp. 37 – 40, 2019, doi: 10.1016/j.pmedr.2018.11.009.
[12] F.  Escribano,  “Gamification  Model  Canvas Evolution  for  Design  Improvement :  Player Profiling  and  Decision  Support  Models,” Fund. Iberoam. del Conoc. , pp. 1 – 6, 2017.
[13] C. S.  González-González, V. Muñoz-Cruz, P. A.  Toledo-Delgado,  and  E.  Nacimiento-
García,  “Personalized  Gamification  for Learning:  A  Reactive  Chatbot  Architecture Proposal,” Sensors ,  vol.  23, no.  1,  2023,  doi: 10.3390/s23010545.