PERANCANGAN DAN IMPLEMENTASI AUGMENTED REALITY …digilib.unila.ac.id/59633/8/2.SKRIPSI TANPA...
57
PERANCANGAN DAN IMPLEMENTASI AUGMENTED REALITY PEMANTAU JADWAL RUANG KELAS MENGGUNAKAN MARKER BASED TRACKING (Skripsi) Oleh : Ayuna Kintani FAKULTAS TEKNIK UNIVERSITAS LAMPUNG BANDAR LAMPUNG 2019
Transcript of PERANCANGAN DAN IMPLEMENTASI AUGMENTED REALITY …digilib.unila.ac.id/59633/8/2.SKRIPSI TANPA...
PERANCANGAN DAN IMPLEMENTASI AUGMENTED REALITY
PEMANTAU JADWAL RUANG KELAS MENGGUNAKAN MARKER
BASED TRACKING
(Skripsi)
Oleh :
Ayuna Kintani
FAKULTAS TEKNIK
UNIVERSITAS LAMPUNG
BANDAR LAMPUNG
2019
ABSTRAK
PERANCANGAN DAN IMPLEMENTASI AUGMENTED REALITY
PEMANTAU JADWAL RUANG KELAS MENGGUNAKAN MARKER
BASED TRACKING
Oleh
Ayuna Kintani
Di jurusan Teknik Elektro umumnya mengetahui jadwal perkuliahan melalui
siakad atau papan mading. Namun karena adanya hari libur, penyesuaian jadwal,
dosen yang memiliki kendala terjadi perubahan jadwal yang telah ditetapkan. Jika
informasi jadwal perkuliahan yang berubah bisa disematkan pada lokasi yang
sebenarnya, hal ini berguna membantu mahasiswa untuk mengetahui pemakaian
ruang kelas. Sehingga dibangun perancangan dan implementasi augmented reality
pemantau jadwal ruang kelas menggunakan marker based tracking. AR
merupakan penambahan realitas yang menggabungkan objek dunia nyata dengan
dunia maya 2D (dua dimensi) maupun 3D (tiga dimensi) dari tempat yang sama.
Mahasiswa menggunakan web virtual reality untuk mengakses marker yang telah
disematkan informasi jadwal perkuliahan. Metode yang digunakan dalam
penelitian ini adalah user experience. Terdapat beberapa tahapan dalam user
experience yaitu requirement gathering, alternative design, prototyping,
evalution. Pengujian sistem menggunakan user acceptance test (UAT) dan
diterima oleh mahasiswa sebanyak 84 sistem dinyatakan efektif, 69 sistem
dinyatakan efisien. Sistem dapat menyajikan informasi jadwal perkuliahan yang
sedang digunakan berbasis lokasi ruangan.
Kata kunci : augmented reality, web virtual reality, user experience,ruangkelas
ABSTRACT
AUGMENTED REALITY MARKER BASED TRACKING DESIGN AND
IMPLEMENTATION FOR CLASSROOM INFORMATION
AYUNA KINTANI
It generally knows the schedule of lectures through Academic Website System or
bulletin boards in Department of Electrical Engineering in University of Lampung.
However, due to holidays, adjustments to the schedule, lecturers who have problems
occur the changes in the schedule have been set. If the changed lecture schedule
information can be pinned to the actual location, this is useful to help students to
know whether the classrooms are free or are being used. Therefore, it is important to
the design and implementation of augmented reality classroom monitoring using
marker based tracking. AR is the addition of reality that combines real-world objects
with 2D (two-dimensional) and 3D (three-dimensional) virtual worlds from the same
place. Students use virtual reality web to access markers that have been pinned on
lecture schedule information. The used method in this study is user experience. There
are several stages in user experience, they are requirements gathering, alternative
design, prototyping, evaluation. The system testing using user acceptance test (UAT)
and by students as many as 84 systems declared effective, 69 systems declared
efficient. The system can present class schedule information that is being used based
on the location of the room.
Keywords: augmented reality, virtual reality web, user experience, classroom
PERANCANGAN DAN IMPLEMENTASI AUGMENTED REALITY
PEMANTAU JADWAL RUANG KELAS MENGGUNAKAN MARKER
BASED TRACKING
Oleh
Ayuna Kintani
Skripsi
Sebagai Salah Satu Syarat untuk Mencapai Gelar
SARJANA TEKNIK
Pada
Program Studi Teknik Informatika
Jurusan Teknik Elektro
Fakultas Teknik Universitas Lampung
FAKULTAS TEKNIK
UNIVERSITAS LAMPUNG BANDAR LAMPUNG
2019
Judul Skripsi
: PERANCANGAN DAN
IMPLEMENTASI AUGMENTED
REALITY PEMANTAU JADWAL
RUANG KELAS MENGGUNAKAN
MARKER BASED TRACKING
Nama Mahasiswa
: Ayuna Kintani
Nomor Pokok Mahasiswa
: 1415061010
Progam Studi
: Teknik Informatika
Jurusan
: Teknik Elektro
Fakultas
: Teknik
MENYETUJUI
1. Komisi Pembimbing
Gigih Forda Nama, S.T., M.T.I.
Meizano Ardhi Muhammad, S.T., M.T. NIP 19830712 200812 1 003
NIP 19810528 201212 1 001
2. Mengetahui
Ketua Jurusan
Teknik Elektro
Ketua Program Studi
Teknik Informatika
Dr. Herman H Sinaga, S.T., M.T
Mona Arif Muda, S.T., M.T. NIP 19711130 199903 1 003
NIP 19711112 200003 1 002
MENGESAHKAN
1. Tim Penguji
Ketua : Gigih Forda Nama, S.T., M.T.I …………
Sekertaris : Meizano Ardhi Muhammad, S.T., M.T. ………….
Penguji
Bukan Pembimbing : Mona Arif Muda, S.T., M.T. ………….
2. Dekan Fakultas Teknik
Prof. Suharno, M.sc., Ph.D NIP 19620717 198703 1 002
Tanggal Lulus Ujian Skripsi : 30 September 2019
SURAT PERNYATAAN
Dengan ini menyatakan bahwa dalam skripsi ini tidak terdapat karya yang pernah
dilakukan oleh orang lain dan sepanjang sepengetahuan saya tidak terdapat karya
atau pendapat yang ditulis atau diterbitkan oleh orang lain, kecuali secara tertulis
diacu dalam naskah ini sebagaimana yang disebutkan dalam daftar pustaka.
Selain saya menyatakan juga bahwa skripsi ini dibuat oleh saya sendiri.
Apabila pernyataan saya tidak benar, maka saya bersedia dikenai sanksi sesuai
dengan hukum yang berlaku.
Bandar Lampung, 20 Oktober 2019
Penulis,
Ayuna Kintani
1415061010
RIWAYAT HIDUP
Penulis dilahirkan di Bandar Lampung, pada tanggal 29
Desember 1996, Putri kedua dari dua bersaudara, dari Bapak
Badri Ka’in S.T, M.T dan Ibu Maryani. Pendidikan formal
yang pernah ditempuh oleh penulis di saat Sekolah Dasar
adalah Sekolah Dasar Fransiskus Pasir Gintung yang
diselesaikan pada tahun 2008. Kemudian meneruskan di
Sekolah Menengah Pertama 9 Bandar Lampung yang di selesaikan pada tahun
2011. Melanjutkan ke Sekolah Menengah Atas Negeri 10 Bandar Lampung dan
berhasil tamat di tahun 2014.
Tahun 2014, penulis terdaftar sebagai Mahasiswa Jurusan S1 Program Studi
Teknik Informatika, Jurusan Teknik Elektro, Fakultas Teknik, Universitas
Lampung. Selama menjadi mahasiswa penulis aktif dalam Organisasi Himpunan
Mahasiswa Teknik Elektro (HIMATRO) sebagai Anggota Komunikasi dan
Informasi pada tahun 2015-2016 dan Anggota Minat dan Bakat divisi Pendidikan
pada tahun 2016-2017. Penulis melaksanakan Praktek Kerja Lapangan (PKL) di
Telkosmel Smart Office Jakarta Selatan pada tahun 2017.
Pada bulan Juli - Agustus 2017 penulis mengaplikasikan ilmu di bidang akademis
dengan melaksanakan Kuliah Kerja Nyata (KKN) di Desa Kresnomulyo,
Kecamatan Ambarawa, Kabupaten Pringsewu, Provinsi Lampung.
Dengan menyebut nama Allah yang Maha Pengasih lagi Maha Penyayang
SKRIPSI INI KUPERSEMBAHKAN UNTUK
“Ayahanda Badri Ka’in dan Ibunda Maryani , terima kasih atas segala doa,
pengorbanan, kasih sayang, motivasi dan cinta. Sehingga, dapat mengiringi
dalam langkah maupun usaha untuk mencapai keberhasilan.” “Kakakku Ayesha
Norabela, yang telah memberikan semangat baik secara motivasi maupun
semangat”
“Almamaterku dan Kampus Teknik Universitas Lampung tercinta”
SANCAWACANA
Bismillahirahmanirrahim…
Puji syukur ke hadirat Allah SWT, karena atas segala rahmat, hidayah, serta
nikmat-Nya, penulis dapat menyelesaikan skripsi ini tepat pada waktunya.
Shalawat serta salam tercurah kepada Nabi Muhammad SAW sebagai tauladan
umat manusia di dunia.
Skripsi dengan judul “Perancangan dan Implementasi Augmented Reality Sistem
Pemantau Jadwal Ruang Kelas Menggunakan Marker Based ” disusun sebagai
salah satu syarat untuk memperoleh gelar Sarjana Teknik pada program Studi Teknik
Informatikan Jurusan Teknik Elektro Fakultas Teknik Universitas Lampung.
Dalam kesempatan ini penulis mengucapkan terima kasih kepada:
1. Prof. Suharno, M.Sc.,Ph.D. selaku Dekan Fakultas Teknik Universitas
Lampung.
2. Dr. Herman H. Sinaga, S.T.,M.T. selaku Ketua Jurusan Teknik Elektro
Universitas Lampung.
3. Gigih Forda Nama, S.T.,M.T. selaku Pembimbing Utama, yang telah
bersedia meluangkan waktu untuk memberikan pengarahan dan
bimbingan dalam mengerjakan penelitian hingga selesai
4. Meizano Ardhi Muhammad, S.T.,M.T. selaku Pembimbing Kedua
yang telah banyak membantu, meluangkan waktu dan memberikan
saran serta nasihat dalam mengerjakan penelitian hingga selesai.
5. Mona Arif Muda, S.T.,M.T.I. selaku Penguji Utama, yang telah
membantu sehingga membuat skripsi ini menjadi lebih baik dengan
bimbingan dan masukan yang diberikan.
6. Mardiana, S.T.,M.T. selaku Dosen Pembimbing Akademik yang
memberikan bimbingan selama menempuh kuliah di Program Studi
Teknik Informatika.
7. Seluruh Dosen Program Studi Teknik Informatika yang telah
membagikan ilmunya kepada penulis.
8. Mbak Rika Asliana yang telah membantu penulis dalam hal
administrasi di Program Studi Teknik Informatika.
9. Kepada sahabat yang telah menemani dari awal maba sampai penulisan
skripsi ini Nazrah Efrilia Putri, Niken Puspita Putri, Wika Oktavia,
Brygita Ayu, Febby Dhona, Arnensius Arista Ginting, Kadek Chresna,
Fahreza Apriyoga. Terimakasih telah memberikan saran dan nasehat
terbaik dan tidak pernah bosan menemani diriku.
10. Kepada squad KKN Kresnomulyo, Nidya Nurhasanah, Tiara Dewis,
Meilisa Situmorang, Natha Marwin, Jeki Leonard dan Aziz Ibronsyah
terimakasih sudah memberikan semangat, humor-humor yang receh
untuk menghibur dikala pusing.
11. Kepada teman-teman di ruang serbaguna perpustakaan “ Wakanda Forever”
Sonny Kurniawan, Fedra Arya, Restu Pratiwi, Meri Fitriani, M Aldi
Pratama, Hendri Mustakim, Las Candro walaupun kita dekat diakhir
12. semester terimakasih telah memberikan semangat, saran yang baik
dan buruk hehe. Terimakasih untuk kongekan nya.
13. Kepada grup Udah Miskin Gila Pula terimakasih atas hiburan lucu humor-
humor garing yang mampu menghilangkan penat.
14. Kepada untuk Anita Effendi, Desi Prima walaupun anita udah jarang main
tapi terimakasih sudah menemani waktu terpuruk awal semester semoga
makin rajin, terimakasih ebot adik tingkat ga nyangka bisa deket.
15. Kepada untuk member sister fillah Ika Amalia yang telah memberikan
nasihat baik.
16. Teman seperjuangan seluruh mahasiswa Teknik Informatika dan Teknik
Elektro 2014 yang telah membantu dalam menyelesaikan masa kuliah.
17. Kepada 16/10/94 terimakasih telah banyak membantu di akhir penelitian
skripsi ini, selalu mau direpotkan, selalu menemani, selalu memberikan
hiburan yang lucu, serta memberikan semangat.
Akhir kata, Penulis meminta maaf karena menyadari masih ada kekurangan pada
tugas akhir yang dikerjakan ini, untuk itu kritik dan saran yang membangun masih
diperlukan demi kemajuan di masa depan. Semoga Allah membalas kebaikan
semua pihak yang telah membantu penulis dalam menyelesaikan Tugas Akhir ini.
Bandarlampung, 09 Oktober 2019
Penulis,
Ayuna Kintani
DAFTAR ISI
Halaman
DAFTAR GAMBAR .............................................................................................. i
DAFTAR TABEL ................................................................................................ iv
BAB I PENDAHULUAN..................................................................................... 1
1.1 Latar Belakang .................................................................................................. 1
1.2 Tujuan Penelitian ....................................................................... ....................... 2
1.3 Rumusan Masalah ............................................................................................. 3
1.4 Batasan Masalah.......................................................................... ...................... 3
1.5 Sistematika Penulisan ....................................................................................... 3
BAB II TINJAUAN PUSTAKA.......................................................................... 5
2.1Augmented Reality........................................................................ ..................... 5
2.2 Web VR................................................................................... .......................... 6
2.3 A-Frame ................................................................................................ ............ 6
2.4 AR.js ................................................................................... .............................. 7
2.5 Marker Based Tracking..................................................................................... 7
2.6 Javascript............................................................................... ............................ 7
2.7 HTML5 ................................................................................... .......................... 8
2.8 PHP 8………………………………………………………………………….9
2.9 CSS 9………………………………………………………………………….9
2.10 User Experience ............................................................................................ 10
2.11.1 Requirement Gathering .............................................................................. 11
1. Menentukan kebutuhan pengguna ................................................. ... 11
2. Menemukan hasil temuan ........................................................ ......... 11
3. Data Set............................................................................................. 11
4. Tabel Karakteristik Pengguna................................................... ........ 11
5. Persona.............................................................. ................................ 12
6. Use Case Diagram .............................................................. .............. 12
7. Kebutuhan Implisit ............................................................ ............... 12
ii
8. Skenario Use Case Diagram ............................................................. 12
2.11.2 Alternative Design .................................................................. ................... 12
1. Kebutuhan Fungsional ...................................................................... 13
2. Kebutuhan non fungsional ................................................................ 13
3. Affinity diagram ................................................................................ 13
4. Ruang lingkup antarmuka ................................................................. 13
2.11.3 Prototyping ................................................................................................ 13
2.11.4 Evaluation ................................................................................................. 14
2.12 Penelitian Terkait .................................................................... ...................... 14
2.12.1 Sistem Informasi Gedung Berbasis Android..................................... 14
2.12.2 Penerapan Teknologi Augmented Reality pada Media Pembelajaran
.......................................................................................................... 15
2.10.3 Teknik Marker Based Tracking Augmented Reality untuk Visualisasi
Anatomi Organ Tubuh Manusia berbasis Android........................... 16
2.10.4 Analisis Penggunaan Marker Tracking Pada Augmented Reality
Huruf Hijaiyah .................................................................................. 17
2.10.5 Aplikasi Web Augmented Reality Villa............................................ 18
BAB III METODE PENELITIAN.................................................................... 19
3.1 Waktu dan Tempat Penelitian ......................................................................... 19
3.2 Alat dan Bahan ......................................................................... ....................... 20
3.3 Metode User Experience ........................................................................ 20
3.3.1 Requirement Gathering ....................................................................... 21
3.3.2 Alternative Design............................................................................... 31
3.3.3 Prototyping .................................................................... ..................... 34
BAB IV HASIL DAN PEMBAHASAN............................................................. 35
4.1 Hasil…. ........................................................................................................... 35
4.1.1 Prototyping .................................................................... ..................... 35
4.1.2 Proses Pembuatan Prototype............................................................. 40
4.1.3 Evaluation............................................................................................ 51
4.2 Pembahasan..................................................................................................... 58
BAB V KESIMPULAN DAN SARAN.............................................................. 64
5.1 Kesimpulan ............................................................................. ........................ 64
5.2 Saran................................................................................................................ 64
iii
DAFTAR PUSTAKA
LAMPIRAN
DAFTAR GAMBAR
Halaman
Gambar 2. 1 Augmented Reality menggunakan Smartphone........................................ 5
Gambar 2. 2 Web VR menggunakan Web .......................................................................... 6
Gambar 2. 3 Game yang dibangun menggunakan A-Frame ......................................... 7
Gambar 2. 4 Marker Based Tracking .................................................................................... 7
Gambar 2. 5 Logo HTML5 ...................................................................................................... 8
Gambar 2. 6 PHP ........................................................................................................................ 9
Gambar 2. 7 Logo CSS ........................................................................................................... 10
Gambar 2. 8 Metode UX (User Experience) .................................................................... 10
Gambar 2. 9 Penerapan Teknologi Sistem Informasi Gedung .................................... 15
Gambar 2. 10 Penerapan Teknologi AR pada Media Pembelajaran ......................... 16
Gambar 2. 11 Penerapan teknik Marker Based Tracking Augmented Reality ....... 17
Gambar 2. 12 Penerapan tentang analisis penggunaan Marker Based Tracking .. 18
Gambar 2. 13 Penerapan Aplikasi Web Augmented Reality Villa ............................ 18
Gambar 3. 1 Metode UX……………………………………….. ....................................... 21
Gambar 3. 2 Persentase Perbandingan Hasil Survey ..................................................... 22
Gambar 3. 3 Perbandingan persentase hasil survey........................................................ 22
Gambar 3. 4 Persentase Perbandingan Hasil Survey ..................................................... 23
Gambar 3. 5 Persentase Perbandingan Hasil Survey ..................................................... 23
Gambar 3. 6 Use Case Diagram Mahasiswa .................................................................... 25
Gambar 3. 7 Use Case Diagram Admin ............................................................................. 26
ii
Gambar 3. 8 Alur informasi perubahan jadwal ................................................................ 28
Gambar 3. 9 BPMN Perkuliahan ......................................................................................... 29
Gambar 3. 10 BPMN Sistem ................................................................................................. 30
Gambar 3. 11 Poster................................................................................................................. 30
Gambar 3. 12 Mockup Url ..................................................................................................... 31
Gambar 3. 13 Affinity Diagram ........................................................................................... 33
Gambar 3. 14 Sketsa Prototyping ........................................................................................ 35
Gambar 3. 15 Tampilan Prototyping................................................................................... 35
Gambar 4. 1 Data Kelas ……………………………………………………………………………………………….36
Gambar 4. 2 Data Ruang ........................................................................................................ 37
Gambar 4. 3 Data Dosen ........................................................................................................ 37
Gambar 4. 4 Marker ................................................................................................................. 39
Gambar 4. 5 Low Fidelity Prototype .................................................................................. 39
Gambar 4. 6 User Interface Pemantau Jadwal ................................................................. 40
Gambar 4. 7 Perintah untuk memanggil library aframe dan teks ............................... 41
Gambar 4. 8 Perintah untuk memanggil gambar dan teks dalam library ................. 42
Gambar 4. 9 Perintah untuk mengakses kamera .............................................................. 42
Gambar 4. 10 Perintah untuk memanggil marker,background dan data json ......... 42
Gambar 4. 11 Perintah untuk memuat gambar dan teks ................................................ 43
Gambar 4. 12 Perintah untuk memuat menarik data dari JSON ................................. 43
Gambar 4. 13 Tampilan akses kamera sistem .................................................................. 44
Gambar 4. 14 Input Jadwal Perkuliahan ............................................................................ 45
Gambar 4. 15 Input Jam keluar ............................................................................................ 45
Gambar 4. 16 Input Selesai .................................................................................................... 46
iii
Gambar 4. 17 Tampilan Augmented Reality ........................................................ 47
Gambar 4. 18 QR Code ......................................................................................... 47
Gambar 4. 19 Chart ketepatan informasi jadwal perkuliahaan ............................. 54
Gambar 4. 20 Chart mudah dipakai ...................................................................... 55
Gambar 4. 21 Chart sistem diperlukan.................................................................. 55
Gambar 4. 22 Chart ukuran teks ........................................................................... 56
Gambar 4. 23 Chart sistem responsif ....................................................... ............. 56
Gambar 4. 24 Chart kepuasan pengguna ............................................................. 57
Gambar 4. 25 Chart rekomendasi sistem .............................................................. 57
Gambar 4. 26 Tampilan Mock up 1 ............................................................ .......... 58
Gambar 4. 27 Iterasi 1 ............................................................... ............................ 59
Gambar 4. 28 Iterasi 2 ..................................................................... ...................... 60
Gambar 4. 29 Iterasi 3 .................................................................... ....................... 61
Gambar 4. 30 Chart Efektif .................................................................................. 61
Gambar 4. 31 Chart Efisien................................................................................... 62
Gambar 4. 32 Chart Apresiasi .............................................................. ................. 63
iv
DAFTAR TABEL
Halaman
Tabel 3. 1 Penjadwalan Aktivitas Penelitian .................................................................... 19
Tabel 3. 2 Alat dan Bahan ...................................................................................................... 20
Tabel 3. 3 Urutan informasi yang dibutuhkan pengguna .............................................. 23
Tabel 3. 4 Karakteristik pengguna ....................................................................................... 24
Tabel 3. 5 Skenario Use Case ............................................................................................... 26
Tabel 4. 1 Perubahan Iterasi Tampilan AR……….. ……………………….. ........ 49
Tabel 4. 2 Pengujian Sistem Pemantau Jadwal Ruang Kelas ...................................... 50
Tabel 4. 3 Perangkat Browser dan Smartphone ............................................................... 52
BAB I
PENDAHULUAN
1.1 Latar Belakang
Realitas Tertambah atau yang dikenal dengan Augmented Reality (AR). AR
memberikan pengertian tentang penggabungan dunia nyata dengan dunia maya dari
tempat yang sama. AR memiliki tiga karakteristik yang bersifat interaktif, real time
dan berbentuk tiga dimensi sehingga AR banyak diimplementasikan dalam berbagai
bidang. Terdapat dua metode AR yang dikembangkan yaitu Marker Based Tracking
dan Markless. Marker Based Tracking adalah penanda objek dua dimensi yang
memiliki suatu pola yang dibaca melalui media webcam atau kamera yang
tersambung dengan komputer. Marker dapat berupa ilustrasi hitam dan putih persegi
dengan batas hitam tebal dan latar belakang putih sedangkan markerless adalah tidak
diperlukannya sebuah marker, marker yang dikenali berbentuk posisi perangkat, arah,
maupun lokasi. Pada Jurusan Teknik Elektro, informasi untuk mengetahui ruangan
kelas dipakai atau tidak, diketahui pengguna ruang kelas mengikuti berdasarkan
jadwal yang telah ditetapkan oleh jurusan. Namun karena
2
adanya hari libur, penyesuaian jadwal, dosen yang memiliki kendala untuk
menghadiri perkuliahan yang telah ditentukan,bisa terjadi perubahan jadwal yang
telah ditetapkan dari sebelumnya. Dari kondisi saat ini terdapat masalah yang
timbul yaitu sulitnya mengetahui pemakaian ruang kelas. Untuk mengatasi
masalah tersebut diperlukan solusi berupa pemberitahuan perubahan penjadwalan
ruang kelas dengan teknologi Augmented Reality. Pada Augmented Reality dapat
menggunakan QR Code (Quick Response Code) yang digunakan untuk membuka
aplikasi dan marker yang digunakan untuk mengakses/menyematkan informasi
dengan cara mengarahkan ponsel pintar berkamera. Dari solusi yang
dipilih,dibuatlah Augmented Reality Pemantau Jadwal Ruang Kelas Teknik
Informatika Universitas Lampung menggunakan Marker Based Tracking berbasis
Mobile.
1.2 Tujuan Penelitian
Tujuan dari penelitian ini adalah sebagai berikut :
1. Membuat sebuah prototype augmented reality pemantau jadwal ruang kelas
dengan studi kasus di Jurusan Teknik Elektro.
2. Mempermudah mahasiswa kelas untuk mengetahui perubahan jadwal ruang
kelas melalui AR.
3
1.3 Rumusan Masalah
Rumusan masalah pada penelitian ini adalah bagaimana merancang serta
mengimplementasikan sebuah prototype sistem AR yang mampu memantau setiap
perubahan jadwal ruang kelas Jurusan Teknik Elektro dengan teknologi Web AR
dengan metode User Experience (UX).
1.4 Batasan Masalah
Batasan masalah dalam penelitian ini, yaitu tidak membahas sistem penjadwalan
perkuliahan secara keseluruhan.
1.5 Sistematika Penulisan
Untuk memudahkan penulisan dan pemahaman mengenai materi tugas akhir ini,
tulisan ini dibagi menjadi lima bab, yaitu :
BAB I PENDAHULUAN
Memuat latar belakang, tujuan, manfaat penelitian, rumusan masalah, batasan
masalah, dan sistematika penulisan.
BAB II TINJAUAN PUSTAKA
Bab ini berisi prinsip, pengetahuan, rumus, dan teori penunjang tentang Web VR, AR.js,
Marker, Text Editor, Javascript, QR Code, CASE Tools (HTML5, CSS3, PHP, Java
Script, MySQL, User Experience dan Penelitian Terkait.
4
BAB III METODE PENELITIAN
Bab ini berisi mengenai metode UX yang digunakan dalam pembuatan AR Pemantau
Jadwal Ruang Kelas.
BAB IV HASIL DAN PEMBAHASAN
Menjelaskan hasil dari proses pengujian dan pengambilan data, serta analisa hasil
dari pengujian tersebut.
BAB V KESIMPULAN DAN SARAN
Memuat simpulan yang diperoleh dari pembuatan dan pengujian alat, dan saran-
saran untuk pengembangan lebih lanjut.
DAFTAR PUSTAKA
LAMPIRAN
BAB II
TINJAUAN PUSTAKA
2.1 Augmented Reality
Augmented reality dalam bahasa Indonesia penambahan realitas yang memiliki
pengertian sebagai penggabungan benda-benda nyata dan maya di lingkungan
nyata berjalan secara interaktif dalam waktu nyata, dan terdapat integrasi
antarbenda dalam tiga dimensi, yaitu benda maya terintegrasi dalam dunia nyata.
Penggabungan benda nyata dan maya dimungkinkan dengan teknologi tampilan
yang sesuai,contoh penggunaan AR melalui smartphone [1]
Gambar 2. 1 Augmented Reality menggunakan Smartphone
6
2.2 Web VR
Web VR adalah teknologi web yang memanfaatkan VR headset dan perangkat
berkemampuan VR yang dimiliki pengguna untuk menciptakan pengalaman 3D di
dalam browser. Teknologi VR merupakan teknologi yang menyajikan tampilan
visual yang sedemikian sama dengan dunia nyata. [2]
Tampilan dari Web VR ditunjukkan oleh gambar berikut :
Gambar 2. 2 Web VR menggunakan Web
2.3 A-Frame
A-Frame adalah web open source untuk membangun virtual reality (VR). Hal ini
dikembangkan oleh Mozilla dan komunitas WebVR. A-frame adalah kerangka
kerja sistem komponen entitas untuk Three.js di mana pengembang dapat
membuat adegan 3D dan WebVR.Tampilan game yang dibangun menggunakan A-
frame ditunjukkan oleh gambar berikut.
7
Gambar 2. 3 Game yang dibangun menggunakan A-Frame
2.4 AR.js
AR.js merupakan ekstensi dari A-Frame dan three.js yang mendukung pembuatan
AR berbasis marker. AR.js dibuat dengan WebGL dan WebRTC. AR.js adalah
ektensi yang bekerja dengan semua ponsel cerdas, terlepas dari versi OS-nya.
2.5 Marker Based Tracking
Marker based tracking adalah marker atau penanda objek dua dimensi yang
memiliki suatu pola yang dapat dibaca oleh komputer melalui media webcam atau
kamera yang tersambung dengan komputer, biasanya merupakan ilustrasi hitam
dan putih persegi dengan batas hitam tebal dan latar belakang putih. Contoh dari
marker based tracking dapat dilihat pada gambar [3]
Gambar 2. 4 Marker Based Tracking
2.6 Javascript
JavaScript adalah bahasa yang berbentuk kumpulan skrip berjalan pada suatu
dokumen HTML. Bahasa ini adalah bahasa pemrograman untuk memberikan
kemampuan tambahan terhadap HTML dengan mengizinkan pengeksekusian
8
perintah-perintah disisi user variabel atau fungsi dengan nama TEST berbeda
dengan variabel dengan nama test dan setiap instruksi diakhiri dengan artinya
disisi browser bukan disisi server web. JavaScript adalah bahasa yang “case
sensitive” artinya membedakan penamaan variabel dan fungsi yang menggunakan
huruf besar dan huruf kecil, contoh karakter titik koma. [4]
2.7 HTML5
HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun
1990 dan versi keempatnya. Tujuan utama pengembangan HTML5 adalah untuk
memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru,
mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. Logo HTML5
ditunjukan pada gambar [5]
Gambar 2. 5 Logo HTML5
2.8 PHP
PHP adalah skrip bersifat server – side yang ditambahkan ke dalam HTML yang
cocok atau dikhususkan untuk pengembangan web. Bahasa PHP dapat dikatakan
menggambarkan beberapa bahasa pemrograman seperti C, Java, dan Perl serta
mudah untuk dipelajari. Pada prinsipnya server akan bekerja apabila ada
9
permintaan dari client. Dalam hal ini client menggunakan kode-kode PHP untuk
mengirimkan permintaan ke server. Sistem kerja dari PHP diawali dengan
permintaan yang berasal dari halaman web oleh browser, tampilan dari kode PHP
ditunjukkan oleh gambar berikut [6]
Gambar 2. 6 PHP
2.9 CSS
CSS merupakan singkatan dari Cascading Style Sheet. Penggunaan CSS membuat
pemrograman Web menjadi lebih mudah karena dapat melakukan penyeragaman
format tampilan terhadap elemen-elemen yang sama dalam situs dengan cepat.
Hampir semua situs berbasis HTML menggunakan CSS untuk meningkatkan
keluwesan tampilan. CSS dapat disimpan dalam file terpisah dengan ekstensi .css,
dan setiap perubahan yang dilakukan pada file tersebut akan mempengaruhi seluruh
dokumen HTML yang terkait padanya. Dengan demikian, waktu untuk melakukan
perubahan terhadap situs dengan jumlah halaman yang banyak dapat dikurangi berkat
bantuan CSS. Logo dari CSS ditunjukkan oleh gambar dibawah ini [7]
10
Gambar 2. 7 Logo CSS
2.10 User Experience
User experience adalah sebuah proses metode penanganan guna meningkatkan
kepuasan pengguna (pengguna aplikasi, pengunjung website) dalam
meningkatkan kegunaan dan kesenangan yang diberikan dalam interaksi antara
pengguna dan produk. [8]
Didalam User Experience terdapat beberapa tahapan dalam pelaksanaannya, alur
metode nya dapat dilihat pada gambar 2.9 berikut.
Gambar 2. 8 Metode UX (User Experience)
11
2.11.1 Requirement Gathering
Pengumpulan kebutuhan (Requirement Gathering) adalah aktivitas yang
dilakukan perancang untuk mengekplorasi/memahami konsep-konsep bagaimana
pengguna menyelesaikan tugas. Ini adalah tahap untuk menganalisa kebutuhan
fungsional dari aplikasi untuk masuk ke tahap desain terdapat beberapa tahapan di
Requirement Gathering yaitu :
1. Menentukan kebutuhan pengguna
Menentukan kebutuhan pengguna adalah proses bagaimana pengguna
menentukan kebutuhan atau masalah yang ada.
2. Menemukan hasil temuan
Menemukan hasil temuan adalah proses bagaimana pengguna sebenarnya
mengatasi masalah atau kebutuhan saat ini
3. Data Set
Data Set adalah sebuah objek yang merepresentasikan data statistik
deskriptif.
4. Tabel Karakteristik Pengguna
Tabel karakteristik pengguna adalah sebuah tabel yang menggambarkan
kebutuhan pengguna dan karakter masing-masing setiap pengguna.
12
5. Persona
Persona adalah proses yang mewakili pengguna yang dikenal secara
pribadi namun di implementasikan dalam sebuah kalimat dan paragraf.
6. Use Case Diagram
Use case diagram adalah gambaran grafik dari beberapa atau semua aktor,
use case, dan interaksi diantaranya yang memperkenalkan suatu sistem.
7. Kebutuhan Implisit
Kebutuhan implisit adalah kebutuhan yang dinyatakan tersirat oleh
pengguna.
8. Skenario Use Case Diagram
Skenario adalah sebuah naskah cerita yang menguraikan urut-urutan
semua actor dan interaksinya.
2.11.2 Alternative Design
Memahami ruang lingkup dari permasalahan dengan mengumpulkan semua data
yang ada guna untuk meningkatkan user experience dan melakukan
pengembangan rancangan sistem guna untuk memenuhi kebutuhan tertentu yang
ditemukan di Requirement Gathering. Terdapat beberapa tahapan dalam
Alternative Design di antaranya merancang alternative yaitu:
13
1. Kebutuhan Fungsional
Kebutuhan fungsional adalah apa yang harus dilakukan oleh sistem.
2. Kebutuhan non fungsional
Kebutuhan non fungsional adalah syarat atau batasan dari sistem dan
pengembangan nya seperti (tampilan,keamanan,Bahasa,kecepatan).
3. Affinity diagram
Affinity diagram digunakan untuk membantu merumuskan data
brainstroming.
4. Ruang lingkup antarmuka
Ruang lingkup antarmuka adalah suatu batasan penghubung yang
memudahkan penelitian agar lebih efektif dan efisien untuk memisahkan
aspek tertentu sebuah objek.
2.11.3 Prototyping
Memastikan perancangan benar benar memenuhi kebutuhan pengguna, solusi yang
lebih baik dalam memenuhi kebutuhan pengguna dibandingkan pada solusi yang
tersedia. Rancangan sistem bukan berarti solusi yang benar-benar baru/berbeda
14
setidaknya sesuatu yang baru namun solusi yang biasa dialami pengguna, terdapat
beberapa tahapan dalam Prototyping yaitu melakukan pemodelan awal dari rancangan
novel,di antaranya menentukan kategori Low Fidelity dan High Fidelity.
2.11.4 Evaluation
Evaluation adalah tahap pengujian untuk mengetahui apakah UX berhasil
ditingkatkan, terdapat beberapa tahapan dalam evaluation di antara adalah error
tolerant (toleransi eror), effective (efektif), efficient (efektif), enganging.
2.12 Penelitian Terkait
2.12.1 Sistem Informasi Gedung Berbasis Android
Raden melakukan penelitian tentang Sistem Informasi Berbasis Android.
Informasi bagi masyarakat merupakan hal yang penting, namun terkadang sulit
untuk didapatkan. Berbagai cara yang digunakan oleh masyarakat dalam
memperoleh informasi yaitu bertanya, melihat brosur, atau browsing internet.
Salah satu cara mendapatkan informasi yang memanfaatkan teknologi komputer
untuk membuatnya serta menampilkanya adalah teknologi Augmented Reality.
Smart building adalah sebuah bangunan dengan fungsi servis komunikasi,
otomatisasi bangunan dan mampu menyesuaikan dengan aktivitas pengguna
dengan menggunakan aplikasi augmented reality berbasis android. Marker yang
terdapat pada smart building menampilkan gedung dalam 3D dan terdapat menu
untuk informasi gedung. Gambar penerapan teknologi Sistem Informasi
Augmented Reality 2.10 dapat dilihat pada gambar dibawah ini [9]
15
Gambar 2. 9 Penerapan Teknologi Sistem Informasi Gedung Augmented Reality
2.12.2 Penerapan Teknologi Augmented Reality pada Media Pembelajaran
Ossy melakukan penelitian tentang Penerapan Teknologi Augmented Reality pada
Media Pembelajaran. Peneliti memasang sebuah marker di depan kamera, yang
nanti nya kamera akan melakukan scan yang akan memunculkan informasi di
layar besar di depan siswa. Penerapan Teknologi Augmented Reality ini sebagai
inovasi media pembelajaran dari metode konvensional (slide) dan menggunakan
buku panduan dan sejenisnya digunakan untuk menunjang proses pembelajaran
itu sendiri guna memberikan pemahaman kepada user tentang materi yang
disampaikan. Teknologi Augmented Reality (AR). Gambaran penerapan teknologi
AR yang dibuat oleh Ossy terdapat pada gambar 2.12 [10]
16
Gambar 2. 10 Penerapan Teknologi AR pada Media Pembelajaran
2.10.3 Teknik Marker Based Tracking Augmented Reality untuk
Visualisasi Anatomi Organ Tubuh Manusia berbasis Android
Devi melakukan penelitian tentang teknik Marker Based Tracking Augmented
Reality untuk Visualisasi anatomi organ tubuh manusia berbasis Android.
Penelitian ini bertujuan untuk mempelajari teknik Marker Based Tracking
Augmented Reality yang diimplementasikan untuk Visualisasi Anatomi Organ
Tubuh Manusia. Aplikasi Augmented Reality Visualisasi Anatomi Organ Tubuh
Manusia dibangun pada perangkat mobile platform Android. Dalam analisis
perancangan antarmuka aplikasi menggunakan pendekatan User Center Design
(UCD). Pengujian aplikasi menggunakan Usability Test. Berdasarkan hasil
implementasi dan pengujian, teknik Marker Based AR berhasil diterapkan dalam
pembuatan Aplikasi Visualisasi Anatomi Organ Tubuh Manusia Pada Platform
Android. Aplikasi menggunakan marker untuk menampilkan konten digital
(image 2D otak, mata, jantung, dan paru-paru). Hasil dari Usability Test
menunjukkan pengguna dapat melihat informasi anatomi organ dengan sangat
jelas dan pengguna sangat tertarik menggunakan aplikasi yang dibuat karena
memberikan pengalaman yang berbeda dalam belajar. [11]
17
Gambar 2. 11 Penerapan teknik Marker Based Tracking Augmented Reality
2.10.4 Analisis Penggunaan Marker Tracking Pada Augmented
Reality Huruf Hijaiyah
Prasetyaningsih melakukan penelitian tentang Analisi Penggunaan Marker
Tracking pada Augmented Reality huruf Hijaiyah. Marker Based Tracking dan
markerless. Kedua metode ini memiliki persamaan yaitu dipengaruhi oleh jarak
pendeteksian dan intensitas cahaya dalam keberhasilannya memunculkan suatu objek.
Akan tetapi belum diketahui berapa jarak yang tepat dan kondisi intensitas cahaya
yang ideal bagi kedua metode tersebut. Penelitian ini diusulkan untuk menganalisis
pengaruh jarak pendeteksian serta integritas cahaya terhadap metode marker based
tracking dan markerless. Variasi jarak yang digunakan adalah 5cm, 10cm, 20cm,
30cm, 40cm, 50cm, dan 80cm sebagai sub indikator jarak pendeteksian kemudian
untuk mendapatkan variasi besarnya intensitas cahaya digunakan sumber cahaya
matahari, lampu berwarna kuning, merah, hijau, biru, dan putih (terang). Metode
pengujian yang digunakan yaitu menentukan jarak minimum dan jarak maksimum
pendeteksian serta menentukan besarnya intensitas cahaya untuk memunculkan suatu
objek. Hasil pengujian ini adalah jarak minimum dan maksimum pendeteksian serta
intensitas cahaya yang didapatkan marker based
18
tracking memiliki rata-rata jarak minimum 7.5 cm dan maksimum 80.5 cm.
Sedangkan markerless rata-rata jarak minimum 3.8 cm dan maksimum 300 cm. [3]
Gambar 2. 12 Penerapan tentang analisis penggunaan Marker Based Tracking
2.10.5 Aplikasi Web Augmented Reality Villa
Pangestu melakukan penelitian tentang Aplikasi Web Augmented Reality Villa.
Aplikasi Web Augmented Reality Villa dapat membantu memvisualisasikan
hunian villa dalam bentuk 3-dimensi sehingga terlihat lebih menarik dan praktis.
Penggunaan brosur sebagai informasi tertulis dan penerapan teknologi augmented
reality pada Aplikasi Web Augmented Reality Villa bertujuan untuk membangun
suatu aplikasi yang dapat memberikan informasi mengenai villa kepada
pengunjung. Berdasarkan hasil pengujian menunjukkan aplikasi dapat
menampilkan objek 3-dimensi villa dengan melakukan scanning marker pada
brosur yang sudah berisi marker. [12]
Gambar 2. 13 Penerapan Aplikasi Web Augmented Reality Villa
BAB III
METODE PENELITIAN
3.1 Waktu dan Tempat Penelitian
Penelitian Tugas akhir ini dilaksanakan pada bulan April hingga September 2018.
Perancangan sistem dilakukan di Teknik Informatika Universitas Lampung. Tabel
Aktivitas penelitian dapat dilihat pada Tabel 3.1
Tabel 3. 1 Penjadwalan Aktivitas Penelitian
No. Aktivitas
Jul Ags Spt Ok No De Jan Feb Ma Jan Juli Ags
1 Studi literatur 2 Tahap Pengumpulan
kebutuhan 3 Memahami ruang
lingkup masalah 4 Studi bimbingan
4 Perancangan alat dan Pengujian sistem dan
6 pengambilan data Penulisan laporan,
7 analisa data dan pembahasan
8 Seminar hasil 9 Perbaikan laporan 10 Perbaikan sistem
dan laporan 11 Ujian Komprehensif
20
3.2 Alat dan Bahan
Alat dan bahan yang digunakan dalam penelitian tugas akhir ini terdiri atas
beberapa komponen yang ditunjukkan pada tabel 3.2 berikut.
Tabel 3. 2 Alat dan Bahan
No. Alat dan Bahan Spesifikasi Kegunaan
1 VR framework a-frame v0.8.0 Jelaskan
2 AR library AR.js 14 Jelaskan
3 Marker Barcode matrix Media penyematan 3x3 informasi
4 Javascript Jquery,Pure Script untuk Javascript menambahkan
interaksi pada
HTML
5 Html Html 5 Bahasa pemrograman
pembangun aplikasi
6. Css Css 3 Rancangan tampilan mediawall
7 Php PHP5 Script penyedia layanan web
service
8 PSTI Website Penempatan sistem
9 Ruangan Kelas Sebagai tempat perkuliahan
10 Laptop AMD A8 Quad Sebagai media Core x4 4GB untuk melakukan
pemrograman.
3.3 Metode User Experience
Sistem pemantauan jadwal ruangan kelas menggunakan metode UX. User
Experience memiliki beberapa tahapan dalam pelaksanaannya, alur metode nya
dapat dilihat pada gambar 3.1 berikut.
21
Gambar 3. 1 Metode UX
3.3.1 Requirement Gathering
Pengumpulan kebutuhan (Requirement Gathering) adalah aktivitas yang
dilakukan perancang untuk mengekplorasi/memahami konsep-konsep bagaimana
pengguna menyelesaikan tugas. Pada requirement gathering dilakukan beberapa
teknik untuk mengetahui kebutuhan yaitu:
1. Menentukan apa yang dilakukan oleh pengguna
Dari hasil survey biasa nya mahasiswa mendapatkan informasi perubahaan jadwal
perkulihaan melalui ketua kelas masing-masing angkatan dan papan mading.
Perubahan jadwal secara tidak teratur membuat mahasiswa menunggu ketidak
pastian jam dan tempat perkuliahan.
22
2. Menyajikan hasil temuan
Dari survey yang dilakukan didapat bahwa pengguna membutuhkan informasi
ruang kelas dan perubahan secara akurat dan mudah.
Hasil dari teknik yang sudah dilakukan didapatkan data sebagai gambar 3.1 sampai
3.5 :
Gambar 3. 2 Persentase Perbandingan Hasil Survey
Gambar 3. 3 Perbandingan persentase hasil survey
23
Gambar 3. 4 Persentase Perbandingan Hasil Survey
Gambar 3. 5 Persentase Perbandingan Hasil Survey
Tabel 3. 3 Urutan informasi yang dibutuhkan pengguna
24
3. Statistik Deskriptif ( Data Set)
Berapa kali mahasiswa mencari informasi mengenai jadwal ruang kelas dalam
kurung waktu 1 minggu:
Range : Minimal 3x, Maksimal 7x
Mean : 4x
Median : 5x
4. Tabel Karakteristik Pengguna
Tabel 3. 4 Karakteristik pengguna
Jenis Karakteristik Pengguna Bagaimana Karakteristik Pengguna Pengguna berpengaruh pada
Sistem
Mahasiswa Mudah User interface dengan
memahami dan
sedikit input
menerima hal Membutuhkan pesan
yang baru kesalahan apabila salah
Hanya
memasukan input
memerlukan Mudah untuk
informasi ruang mempelajari sistem baru
saja
Datang ke lokasi
ruang perkuliahan
5. Persona
Kiki adalah mahasiswa baru Teknik Informatika yang merupakan anak rantau, jarak
yang ditempuh dari kosan menuju kampus cukup memakan waktu lama berkisar 30
menit. Hari ini adalah hari Rabu dimana Kiki akan mengikuti perkuliahan IMK
pada pukul 08.00 WIB. Saat sampai di kampus kiki mendapati ruangan H-18 tempat
biasa ia kuliah terkunci. Kiki ingin mengetahui apakah ada perubahan jadwal pada
25
ruang kelas tersebut. Kiki melihat QR Code pada pintu ruang kelas dan di bawah
QR Code tersebut terdapat catatan bahwa jika ingin mengetahui perubahan jadwal
ruang kelas maka kunjungi url di bawah yang disebutkan kemudian scan QR Code
tersebut. Maka kiki mencoba scan Marker yang terdapat pada pintu kelas setelah
kiki scan Marker tersebut muncul informasi bahwa ruangan kelas H-18 pada
pukul 08.00 tidak ada perkuliahan atau kosong. Namun pada pukul 10.00 ruangan
H-18 akan digunakan untuk jadwal mata kuliah IMK. Sistem ini memberitahu
perubahan jadwal perkuliahan IMK pukul 08.00 menjadi pukul 10.00. Akhirnya
kiki memasuki ruangan H-18 pada pukul 10.00 setelah mendapat informasi
ruangan kelas dan mengikuti jadwal perkuliahan yang ada.
6. Use Case Diagram
Gambar 3. 6 Use Case Diagram Mahasiswa
26
Gambar 3. 7 Use Case Diagram Admin
7. Skenario Use Case
Tabel 3. 5 Skenario Use Case
Use Case
Pengguna Rasional Pre Kondisi Deskripsi Skenario :
Memindai QR Code untuk Membuka Aplikasi
Mahasiswa Use case menggunakan sistem Mahasiswa ingin membuka aplikasi
Mahasiswa membuka aplikasi untuk scan marker
Aksi Actor Reaksi Sistem Skenario Normal
1. Membuka akses url atau membuka aplikasi
2. Menampilkan kamera
untuk melakukan scan
marker
3.Melakukan scan marker
Post Mahasiswa telah melakukan scan marker
Kondisi
27
Use Case
Pengguna Rasional Pre Kondisi Deskripsi Skenario :
Melihat informasi Kelas dengan AR
Mahasiswa Use case menggunakan sistem Mahasiswa ingin mendapat informasi ruang kelas
Mahasiswa melakukan aksi scan marker
Aksi Actor
Skenario Normal
1. Mengarahkan kamera ke marker
Reaksi Sistem
2. Menangkap dan
memproses marker
kemudia menampilkan
informasi
Post Mahasiswa telah mendapatkan informasi
Kondisi
Use Case Menginput data perkulihaan
Pengguna Admin
Rasional Use case menggunakan sistem
Pre Admin ingin meinput data informasi ruang kelas
Kondisi
Deskripsi Admin telah menginputkan data ruang kelas
Skenario : Aksi Actor
Skenario Normal
1. Admin menginput data informasi ruang kelas
Reaksi Sistem
2. Menangkap data
informasi ruang kelas
Post Admin telah menginput data informasi ruang kelas.
Kondisi
28
8. Alur ( informasi perubahan jadwal)
Berikut ini adalah gambaran alur informasi perubahan perubahan secara manual.
Saat ini mahasiswa menggunakan papan mading untuk melihat informasi jadwal
ruang kelas.
Gambar 3. 8 Alur informasi perubahan jadwal
9. Implementasi
Sistem akan dibangun untuk semua ruangan kelas dijurusan teknik elektro. Dengan
mengarahkan smartphone kearah marker, maka marker akan memunculkan informasi
yang didapatkan sebelum nya dari papan mading. Marker nantinya akan ditempel
pada ruangan depan kelas masing-masing dan papan mading.
29
10. Business Process Model and Nation (BPMN)
Dari BPMN (Business Process Model and Notation) pada gambar 3.12 dijelaskan
bahwa pengguna saat ingin menggunakan papan mading untuk mencari informasi
perkuliahaan.
Gambar 3. 9 BPMN Perkuliahan
Dari BPMN (Business Process Model and Notation) pada gambar 3.13 dijelaskan
bahwa pengguna saat ingin menjalankan aplikasi harus memindai QR Code
menggunakan smartphone yang dimiliki oleh pengguna. Lalu aplikasi dinyalakan
oleh sistem lalu. Pengguna memindai AR marker yang sudah tersedia di papan
mading atau ruang kelas. Sistem akan menampilkan informasi yang sudah dalam
bentuk AR, sehingga pengguna dapat melihat informasi tersebut.
30
Gambar 3. 10 BPMN Sistem
11. Mockup
Gambar 3.14 adalah gambar poster yang akan ditempel di papan mading dan
setiap ruang kelas yang berisikan alamat url yang akan diakses apabila ingin
mencari ruangan kelas yang akan dipakai.
Berikut ini merupakan mockup yang telah dibuat sebagai berikut:
Gambar 3. 11 Poster
31
Gambar 3.15 merupakan gambaran tampilan dari url apabila url berhasil diakses
maka url akan menampilkan kamera yang digunakan untuk memindai marker
yang berisikan informasi data ruang kelas.
Gambar 3. 12 Mockup Url
3.3.2 Alternative Design
Terdapat beberapa tahapan dalam Alternative Design di antaranya merancang
alternative kebutuhan eksplisit implisit, kebutuhan fungsional non fungsional,
affinity diagram, ruang lingkup antarmuka. Berikut ini adalah data survey yang
telah ditemukan :
1. Kebutuhan Eksplisit dan Implisit
Pengguna untuk menggunakan Sistem Pemantau Jadwal Ruangan :
Mahasiswa Jurusan Teknik Elektro.
32
Kebutuhan Eksplisit Pengguna :
Menemukan informasi perubahan jadwal ruangan
kelas. Informasi yang valid.
Apa Kebutuhan Implisit Pengguna ?
Apakah ada perubahan jadwal.
2. Kebutuhan Fungsional dan Non Fungsional
Kebutuhan Fungsional :
Menampilkan informasi perubahan jadwal ruang kelas.
Kebutuhan Non Fungsional :
Tersedia QR Code di setiap kelas untuk mengetahui jadwal ruangan
kelas. Harus memiliki internet stabil.
Data dapat disematkan di marker.
Antarmuka Sistem Pemantau Jadwal Ruang Kelas :
- Marker
- Smartphone
- Web Application
33
3. Affinity Diagram
Gambar 3. 13 Affinity Diagram
4. Ruang Lingkup Antar Muka
Antar muka Pemakai :
Feed Camera dari Smatphone untuk menyajikan objek berdasarkan
marker. AR-marker barcode 3x3.
Antar muka Perangkat keras :
Kamera belakang pada Smartphone
34
Antar muka Perangkat Lunak :
Mobile Web Browser (Chrome)
Web Server sebagai penyedia aplikasi AR : WEB Application, Apache Web
Server, Database SQL My Lite.
Antarmuka Komunikasi :
Wifi Hotspot untuk terhubung ke webserver
Koneksi Wifi dengan Kualitas (2-4 bar)
Antar muka perangkat lunak :
Mobile Web Browser
3.3.3 Prototyping
Terdapat beberapa tahapan dalam Prototyping yaitu melakukan pemodelan awal
dari rancangan di antara nya menentukan kategori Low Fidelity dan High Fidelity,
berikut ini adalah data yang didapatkan :
1. Low Fidelity
Memiliki sedikit kemiripan dengan rancangan akhir, baik dalam bentuk atau pun
fungsi dengan tujuan melakukan evaluasi rancangan yang baru
Keuntungan dalam Low Fidelity:
Mudah apabila sumber daya banyak
Membantu memverifikasi tujuan rancangan
35
2. Implementasi Low Fidelity
Paper Prototyping dengan menggunakan kertas :
Sketsa
Gambar 3. 14 Sketsa Prototyping
Tampilan Prototyping yang akan dibuat :
Gambar 3. 15 Tampilan Prototyping
BAB V
KESIMPULAN DAN SARAN
5.1 Kesimpulan
1. AR pemantau jadwal ruang kelas berhasil menyajikan informasi menggunakan
teknologi augmented reality berbasis marker pada lokasi kelas.
2. AR pemantau jadwal ruang kelas berhasil dibangun dalam waktu efektif 33 hari
dengan 10 kali iterasi menggunakan metode user experience.
3. Berdasarkan hasil perhitungan keseluruhan,sistem dinyatakan efektif dengan
nilai 84 setuju dan 16 sangat setuju.
4. Pengelolaan data yang dilakukan oleh managemen data jadwal ruang kelas
memudahkan penyematan informasi pada marker.
5.2 Saran
Sebaiknya dilakukan perubahaan tampilan yang lebih menarik serta penambahan
fitur yang dapat diakses pengguna langsung dengan menggunakan teknologi AR
DAFTAR PUSTAKA
[1] R. A. Ramadhan, I. I. Tritoasmoro and U. Sunarya, "Perancangan
dan Implementasi Aplikasi Teknologi Augmented Reality Pada
Aksesoris Wajah," Telkom University, Bandung, 2014.
[2] X. Ma, M. Cakcett, L. Park, E. Chien and M. Naaman, "Web-Based VR
Experiments Powered by the Crowd," in International World Wide Web
Conference Committee, France, 2013.
[3] M. E. Apriyani, M. Huda and S. Prasetyaningsih, "Analisis Penggunaan
Marker Tracking Pada Augmented Reality Huruf Hijaiyah," Jurnal
Infotel, vol. 8, no. 1, p. 7, 2016.
[4] D. Lavarino and W. Larasati, "Rancang Bangun E-Voting Berbasis Website
di Universitas Negeri Surabaya," Jurnal Manajemen Informatika, vol. 6,
no. 1, p. 10, 2016.
[5] M. Iqbal, M. Husni and H. Studiawan, "Implementasi Klien SIP Berbasis
Web Menggunakan HTML5 dan Node.js," Jurnal Teknik ITS, vol. 1, no. 2,
p. 4, 2012.
[6] A. Firman, H. F. Wowor and X. Najoan, "Sistem Informasi Perpustakaan
Online Berbasis Web," E-journal Teknik Elektro dan Komputer, vol. 5, no.
2, p. 8, 2016.
[7] F. Constantianus and B. R. Suteja, "Analisa dan Desain Sistem
Bimbingan Tugas Akhir Berbasis Web dengan Studi Kasus Fakultas
Teknologi Informasi," Jurnal Informatika UKM, vol. 1, no. 2, p. 13, 2015.
[8] J. Saptari, R. Iswandari and R. Setyawati, "User Experience (UX) dalam
pemanfaatan fasilitas Informal Learning Space (ILS) perpustakaan," Berkala
Ilmu Perpustakaan dan Informasi, vol. 13, no. 12, p. 34, 2018,.
[9] A. A. Prasetia, "Jurnal Intelektualita: Keislaman, Sosial, dan Sains," Sistem
Informasi Reservasi Gedung Serbaguna di Kota Palembang berbasis
Andorid, vol. 7, no. 1, p. 8, 2018.
[10] M. Afdal, M. Irsyad and F. Yanto, "Penerapan teknologi augmented
reality pada media pembelajaran lapisan permukaan bumi berbasis 3D,"
Jurnal Ilmiah Rekayasa dan Manajemen Sistem Informasi, vol. 4, no. 1, p.
10, 2018.
[11] I. D. Perwitasari, "Teknik Marker Based Tracking Augmented Reality untuk
Visualisasi Anatomi Organ Tubuh Manusia Berbasis Android," Journal of
Information Technology and Computer Science, vol. 1, no. 1, p. 11, 2018.
[12] G. Y. P. Pangestu, N. M. I. M. Mandenni and N. K. D. Rusjayanthi,
"Aplikasi Web Augmented Reality Villa," Merpati, vol. 5, no. 1, p.
12, 2017.
[13] A. T. Bahill and R. Bota, "Fundamental Principles of Good System
Design," Engineering Management Journal, vol. 20, no. 8, p. 10, 2008.
[14] A. SE, "Populasi dan Sampel," in Metode Penelitian Manajemen, vol.
3, Malang, Bayumedia Publishing Malang, 2015, p. 14.
