ILKOM  Jurnal  Ilmiah   Volume  10  Nomor 1  April 2018

## APLIKASI PEMBELAJARAN SMART HIJAIYYAH BERBASIS AUGMENTED REALITY
Mila Jumarlis milajumarlis.mirfan@yahoo.com STMIK Bina Adinata

## Abstrak
Pengaruh  teknologi  memberikan  dampak  yang  sangat  kuat  terhadap  minat  belajar  anak-anak maupun  remaja  karena  lebih  banyak  menghabiskan  waktu  untuk    memainkan smartphone .  Proses pembelajaran huruf hijaiyyah yang menarik dan menyenangkan kini dibutuhkan bagi anak-anak, salah satu caranya adalah membuatnya dalam bentuk aplikasi mobile sehingga penelitian ini bertujuan untuk merancang  huruf hijaiyyah berbasis Augmented  Reality ,  Untuk  mengimplementasikan  huruf hijaiyyah berbasis Augmented  Reality. Desain  penelitian  yang  digunakan  adalah UML yang  didesain  secara terstruktur  yang  terdiri  dari flowchart perancangan  sistem  dan  rancangan  model use  case  diagram . Software yang digunakan dalam membangun sistem ini adalah unity, vuforia SDK dan Android yang menggunakan  teknologi Augmented  Reality dengan  metode marker. Hasil  dari  penelitian  ini  adalah aplikasi  berbasis  android  yang  menampilkan  penjelasan  huruf hijaiyyah ,  dimana marker yang diidentifikasi  oleh  kamera  akan  menampilkan  button  suara  huruf,  button  informasi  huruf  dan  cara penulisan huruf hijaiyyah.
Kata kunci: Android, Marker, Augmanted Reality, Hijaiyyah.

## 1.  Pendahuluan
Pola  pikir  masyarakat  yang  serba  praktis  dan  lebih  banyak  menghabiskan  waktu  untuk memainkan  smartphone,  sehingga  susah  lepas  dari  pengaruh  teknologi  yang  semakin modern , memberikan dampak terhadap proses belajar. Olehnya itu, didunia pendidikan juga dituntut untuk bisa menciptakan sarana belajar yang lebih menarik dan kreatif, khususnya bagi  anak-anak.
Pengaruh teknologi memberikan dampak yang sangat kuat  terhadap minat belajar anak-anak maupun  remaja  bahkan  orang  dewasa  malas  belajar  tentang  Agama  Islam  terutama  dalam  hal pentingnya  belajar  membaca  Al- Qur’an,  yang  semakin  hari  jauh  dari  umat  Islam  itu  sendiri.  Untuk menunjang  adanya  pembelajaran  Al-Qur ’ an  yang  menarik  bagi  anak-anak  maka  diperlukan  suatu metode dan desain dalam penyampaiannya. Dengan pembelajaran Smart Hijaiyyah akan memberikan pemahaman  tentang  bagaimana  mengenal  huruf Hijaiyyah sesuai  kaidah  bacaannya  atau Makhrajnya . Penelitian  ini  dengan  pembelajaran Smart  Hijaiyyah akan  menampilkan  penjelasan  huruf Hijaiyyah , diantaranya adalah informasi huruf Hijaiyyah dalam  hal Makhrajnya , cara penulisan huruf Hijaiyyah dan suara huruf Hijaiyyah dengan pemanfaatan teknologi yang akan dihubungkan dengan benda  nyata.  Pada  pengenalan  huruf Hijaiyyah akan  memberikan  sentuhan  baru  dalam mempelajarinya dengan  mencoba pemanfaatan  teknologi Augmented  Reality dengan  menggunakan Marker.  Marker yang  dimaksud  adalah  pola  yang  dibuat,  dalam  bentuk  gambar  yang  akan  dikenali oleh  kamera. Berdasarkan  besarnya  manfaat  media  belajar  dalam  menyampaikan  suatu  ilmu  dan menimbang  faktor-faktor  hasil  uraian  di  atas  yang  mendasari  penulis  melakukan  penelitian  tentang “ Aplikasi Pembelajaran Smart Hijaiyyah Berbasis Augmented Reality ”.

## 2.  Metode
2.1  Metode Pengumpulan Data
Penulis  memperoleh  data  yang  diinginkan  melalui  pengumpulan  data  dengan  metode pengumpulan data yang terdiri dari :
2.1.1  Observasi
Pengumpulan  data  dengan  observasi  langsung  atau  dengan  pengamatan  langsung adalah  cara  pengambilan  data  dengan  menggunakan  mata  tanpa  ada  pertolongan  alat standar lain untuk keperluan tersebut [1].
2.1.2  Wawancara
Penulis melakukan wawancara dengan tujuan untuk mendapatkan informasi-informasi yang dibutuhkan dalam penulisan serta pengembangan aplikasi yang akan dibuat.
2.1.3  Studi Pustaka

## ILKOM  Jurnal  Ilmiah   Volume  10  Nomor 1  April 2018
Ini dilakukan untuk pengumpulan data-data dengan mengambil referensi dari beberapa skripsi,  jurnal,  artikel  dan  arsip    untuk  digunakan  sebagai  acuan  dalam  perumusan  dan penyelesaian masalah.
2.2  Analisis Sistem
2.2.1. Sistem yang Sedang Berjalan
Sistem belajar mengajar yang  ada pada Madrasah Ibtidaiyah Tahfidzul Qu r’an (Rumah Qur’ ani Imam Bukhari) menggunakan cara manual dalam proses belajar mengajar yang mengandalakan buku sebagai  medianya,  sehingga  siswa  cepat  jenuh  karena  kebanyakan  mendengarkan  ketika  belajar, Untuk  lebih  jelasnya,  alur  proses  belajar  mengajar  M adrasah  Ibtidaiyah  Tahfidzul  Qur’an  (Rumah Qur ’ ani Imam Bukhari)  saat ini dapat dilihat pada gambar 1 di bawah ini.
Gambar 1. Sistem Yang Berjalan
Dari sistem yang sedang berjalan menjelaskan bahwa : Ketika dalam proses belajar seorang guru  menuliskan  huruf hijaiyyah di  papan  tulis  kemudian  siswa  memperhatikan  apa  yang  dituliskan oleh  Gurunya  dan  begitu  pula  ketika  seorang  Guru  mengucapkan  huruf hijaiyyah  maka siswa mengulangi pengucapan huruf hijaiyyah . Berdasarkan hal tersebut diatas, maka penulis mengusulkan untuk merancang suatu Pembelajaran Smart Hijaiyyah sebagai media belajar agar siswa lebih tertarik dan aktif dalam mempelajari Al-Qur ’ an. 2.2.2 Gambaran Sistem yang Diusulkan:

## Gambar 2. Sistem yang Diusulkan
Pada  use  case  Gambar  2  di  atas  terdapat  dua  aktor  yaitu  pengguna  dan  aplikasi  : Siswa  membuka  aplikasi  kemudian  aplikasi  menampilkan  area  menu  yang  berisi  tombol  bantuan, tombol belajar dan tombol keluar. Ketika menekan tombol belajar maka kamera akan diaktifkan, jika marker diidentifikasi  maka  akan  muncul  tombol  informasi,  cara  penulisan  huruf  dan  tombol  suara huruf.  Ketika  ingin  keluar  dari  menu  belajar  maka  tekan  tombol  kembali  di  handphone  sehingga kembali kearea menu.
ILKOM  Jurnal  Ilmiah   Volume  10  Nomor 1  April 2018
2.3  Kebutuhan Sistem
2.3.1  Kebutuhan Fungsional
Dalam  membangun  aplikasi  pengenalan  huruf hijaiyyah ini  peneliti  membutuhkan  aspek diantaranya :
a. Input yang dimasukkan adalah gambar sebagai marker yang akan diidentifikasi oleh kamera Proses yang  berjalan  adalah  marker  yg  diidentifikasi  oleh  kamera  akan memuat button informasi huruf, suara huruf dan cara penulisan huruf hijaiyyah .
b. Output yang dihasilkan adalah menampilkan huruf hijaiyyah 3D, suara dan penjelasan hurufnya.
2.3.2  Non Fungsional
Adapun  spesifikasi  perangkat  keras  dan  perangkat  lunak  yang  digunakan  dalam pembuatan sistem ini adalah sebagai berikut :
a.  Kebutuhan Perangkat Keras ( Hardware )
1) Processor Intel Core i3 1.80 GHz 2) RAM 2 Gb 3) Smartphone b.  Kebutuhan Perangkat Lunak ( Software )
1) Sistem Operasi Windows 7 2) System 64- bit 3) Vuforia SDK 4) Unity 3D
c. Kebutuhan Perancangan Sistem Model  perancangan  sistem  yang  digunakan  adalah UML ( Unified Modelling  Language ). UML menawarkan  sebuah  standar  untuk  merancang model sebuah system [2]
d.  Kebutuhan user
Memainkan  aplikasi  smart  hijaiyyah,  mengenal  huruf  hijaiyyah  dengan menggunakan marker, informasi huruf dan cara penulisan huruf hijaiyyah .

## 3.  Hasil dan Pembahasan
3.1  Pemodelan sistem
Pemodelan  sistem  bertujuan  untuk  mempermudah  dalam  pengembangan  dan  memahami sistem. Pemodelan sistem dibuat dalam bentuk arsitektur umum, flowchart perancangan sistem, use case diagram [3].
3.1.1  Arsitektur Umum
ILKOM  Jurnal  Ilmiah   Volume  10  Nomor 1  April 2018
Metode yang diajukan untuk proses pembelajaran huruf hijaiyyah terdiri dari beberapa langkah. Langkah-langkah tersebut sebagai berikut :
1. User meletakkan marker yang telah diregistrasi sebelumnya
2. Kamera smartphone yang aktif mengidentifikasi ( tracking ) marker 3. Jika marker valid maka  akan  dilanjutkan  ke  proses  berikutnya,  jika  tidak valid maka user mengulangi identifikasi marker menggunakan kamera
4. Marker yang telah valid dan teridentifikasi akan menampilkan button play soun
5. Sistem mengeluarkan suara melalui smartphone.
3.1.2 Flowchart perancangan program
Flowchart dapat  didefinisikan  sebagai  bagan  yang  menunjukkan  arus  pekerjaan  secara keseluruhan dari  system [4]. Bagan ini mejelaskan urutan-urutan dari prosedur-prosedur dan proses perancangan system
Gambar 4. Flowchart Perancangan Program

## 3.1.3  Use Case Diagram
Perancangan fungsionalitas sistem dimodelkan dengan diagram use case. Sebuah use case mempresentasikan  sebuah  interaksi  antara  aktor  dengan  sistem. Use  case merupakan  sebuah pekerjaan tertentu, misalnya login ke sistem, meng- create sebuah daftar belanja dan sebagainya [5]. Pada use case terdapat dua actor yaitu Siswa dan Aplikasi. Gambar use case diagram berikut :
Gambar 5. Use Case Diagram
3.2  Implementasi
3.2.1  Pembahasan program
3.2.1.1  Teknik pembuatan
Tampilan awal unity saat pertama kali di open, dimana 3D untuk menampilkan objek tiga dimensi dan 2D jika hanya menggunakan gambar.
ILKOM  Jurnal  Ilmiah   Volume  10  Nomor 1  April 2018

## Gambar 6. Tampilan Awal Unity
Buat  akun  di  vuforia  agar  bisa mendapatkan  licensi  key  dan  sebagai  peyimpanan  database marker  yang  digunakan.  setelah  itu  download  SDK  untuk  unity  sebagai  penunjang  pada  platform android, setelah itu import SDK yang sudah didownload.
Tambahkan  masuk  marker  dengan  cara  upload  ke  vuforia,  pilih  target  manager,  klik  add target  kemudian  atur  pecarian  gambar  di  file  dan  nama  database  marker  akhiri  dengan  klik  add. Setelah itu download dan pilih unity editor.

## Gambar 7. Tampilan Marker Pada File Project
Pilih button “Add” jika sudah selesai mengisi semua yang diperlukan. Jika berhasil maka marker yang kita unggah akan diberikan score atau rating, semakin banyak jumlah bintang yang diberikan  ke marker, maka semakin mudah aplikasi membaca marker tersebut. Marker yang dimaksud adalah pola yang dibuat, dalam bentuk gambar yang akan dikenali oleh kamera. Pola marker dapat dibuat dengan paint , coreldraw ataupun photoshop [4].
4.  Tampilan aplikasi
4.1  Tampilan awal
Gambar 8. Tampilan Awal Aplikasi
Pada tampilan Gambar 8 ini merupakan awal sebelum memasuki area menu belajar huruf hijaiyyah 4.2  Tampilan menu
ILKOM  Jurnal  Ilmiah   Volume  10  Nomor 1  April 2018
Pada Gambar 9 tampilan Menu ini menampilkan beberapa menu yang bisa dipilih, diantara menunya adalah menu bantuan, menu belajar dan menu keluar. 4.3 Tampilan Area Bantuan
Gambar 10. Tampilan Area Menu Bantuan
Pada  Gambar  10  tampilan  Area  Menu  Bantuan  ini,  akan  menampilkan  penjelasan  tentang penggunaan aplikasi.
4.4 Tampilan area keluar
Gambar 11. Tampilan Area Keluar
Pada  Gambar  11  tampilan  Area  Keluar  ini,  akan  menampilkan  pesan  keluar  dimana  terdapat button iya jika ingin keluar dari aplikasi dan button tidak jika masih ingin belajar. 5.  Desain markernya
Tahapan saat kamera membaca marker [4] :
a. Di tahap pertama kamera menyorot marker secara langsung
b. Di tahap kedua marker diubah menjadi biner hitam putih. Setelah itu ARToolkit mencari gambar  berkotak  hitam  dan  mencocokkan  dengan template memory yang  ada  di ARToolkit ,  Bila  marker  dinyatakan  cocok  maka ARToolkit akan  menggunakan pengenalan  besar  kotak  dan  mengorientasi  marker  untuk  menghitung  posisi  kamera nyata dengan marker nyata
c. Di  tahap  ketiga,  ketika  koordinat  kamera  virtual  dan  kamera  nyata  telah  sama,  maka grafik komputer akan menggambar dan melakukan overlay objek 3D .
Marker pada penelitian ini terdiri atas 33 marker, yaitu 1 marker sebagai cover, 29 marker sebagai huruf hijaiyyah .
Gambar 14. Tampilan Marker Huruf Alif
ILKOM  Jurnal  Ilmiah   Volume  10  Nomor 1  April 2018

## 4.  Kesimpulan dan Saran
Berdasarkan  hasil  penelitian  dan  pembahasan  yang  telah  diuraikan  pada  bab-bab sebelumnya, maka dapat ditarik kesimpulan sebagai berikut :
1. Aplikasi ini akan mengidentifikasi marker sebagai objek yang hasilnya akan menampilkan informasi huruf hijaiyyah dan memperdengarkan bunyi hurufnya serta menampilkan cara penulisan huruf hijaiyyah.
2. Aplikasi ini dapat digunakan jika menggunakan marker. Adapun saran yang bisa disampaikan adalah:
1. Aplikasi ini masih sebatas pengenalan huruf.
2. Diharapkan  utuk  kedepannya  dapat  memberikan  tambahan  dalam  penggunaan  tanda bacanya.
3. Aplikasi ini masih berjalan dalam satu platform yaitu android.

## Daftar Pustaka
[1]  Dayat, Abd.Rachman. 2015. Pengaturan Tata Letak Furniture Menggunakan Augmented Reality. Tesis.Makassar:STMIK Handayani Makassar.
[2]  Rori, Jenifer., dkk. 2016. Perancangan Aplikasi Panduan Belajar Pengenalan Ortodonsia Menggunakan Animasi 3D. Jurnal. (Online), (http://download.portalgaruda.org, diakses 6 Februari 2018).
[3]  Sulaiman.2015.  Pengenalan Dasar Unity 3D. (Online), (https://tutoriallengkapunity3d.wordpress.com/2015/06/11/pengenalan-unity3d/, diakses 1 Februari 2018).
[4]  Wirawan, Raden. 2015. Aplikasi Augmented Reality Pada Sistem Monitoring Smart Building. Tesis.Makassar : STMIK Handayani Makassar.
[5]  Akbar, Fadhil. 2015. I mplementasi Augmented Reality Untuk Pembelajaran Huruf Hijaiyyah Bagi Anak-Anak.  Skripsi. (Online),
(http://repository.usu.ac.id/bitstream/handle/123456789/49271/Cover.pdf?sequ ence=6&isAllowed=y, diakses 19 Februari 2017).