BAB 3
ANALISIS DAN PERANCANGAN SISTEM
3.1 Analisis Masalah Masalah
utama
yang
diangkat
dari
penelitian
ini
adalah
bagaimana
mengimplementasikan teknologi Augmented Reality untuk menghasilkan aplikasi yang dinamis dan edukatif pada pengenalan Transportasi Umum dalam bahasa Mandarin. Pada Gambar 3.1 merupakan Diagram Ishikawa (Fish Bone) yang digunakan dalam menganalisis suatu masalah yaitu Cause and Effect. Terdapat 3 bagian penting dalam Diagram Ishikawa: a.
Bagian kepala berfungsi sebagai akibat (effect), yaitu masalah yang ingin dianalisis.
b.
Bagian tulang berfungsi sebagai penyebab utama (main cause), yaitu faktor – faktor penyebab terjadinya masalah.
c.
Bagian panah pada tulang berfungsi sebagai pernyataan sekunder dari penyebab utama
Gambar 3.1 Diagram Ishikawa untuk Analisis Masalah
Universitas Sumatera Utara
3.2 Analisis Sistem
Masalah yang dibahas dalam penelitian ini adalah bagaimana membuat suatu sistem yang dapat membantu dalam metode Pengenalan Transportasi Umum Dalam Bahasa Mandarin menggunakan teknologi Augmented Reality berbasis Android dengan menampilkan objek 3D sehingga dalam pemberian informasi menjadi real – time. Dengan begitu masyarakat juga tidak cepat bosan karena adanya visualisasi dalam bentuk 3 dimensi.
3.3 Analisis kebutuhan Sistem
Analisis kebutuhan sistem terdapat dua bagian, yaitu analisis kebutuhan fungsional dan nonfungsional. Kebutuhan fungsional merupakan seluruh aktifitas yang disediakan sistem, sedangkan kebutuhan nonfungsional merupakan fitur-fitur, karakteristik dan batasan lainnya (optional).
3.3.1 Kebutuhan fungsional Kebutuhan fungsional pada aplikasi Pengenalan Transportasi Umum Dalam Bahasa Mandarin yang harus dipenuhi adalah sebagai berikut: a.
Dapat digunakan sebagai bahan tambahan pengetahuan tentang pembelajaran bahasa Mandarin pada Pengenalan Transportasi Umum.
b.
Terdapat fitur Rotate dan Zoom pada setiap objek.
c.
Objek 3D di visualisasikan melalui kamera Smartphone.
3.3.2 Kebutuhan nonfungsional Kebutuhan nonfungsional mencakup karakteristik-karakteristik sebagai berikut: a.
Performa, sistem atau aplikasi yang akan dibangun dapat menampilkan visualisasi objek 3 dimensi dengan teknik Augmented Reality.
b.
Desain, sistem atau aplikasi yang akan dibangun harus interaktif dan edukatif agar memudahkan user dalam menggunakannya.
Universitas Sumatera Utara
c.
Ekonomi, sistem atau aplikasi yang akan dibangun harus bekerja dengan baik dan tidak memerlukan perangkat tambahan yang dapat mengeluarkan biaya.
d.
Informasi sistem atau aplikasi harus mampu menyediakan informasi tentang pembelajaran huruf Mandarin pada Pengenalan Transportasi Umum.
e.
Pelayanan, sistem atau aplikasi yang akan dibangun harus mudah digunakan (user-friendly), menarik dan mudah dimengerti.
3.4 Pemodelan Sistem Pemodelan sistem yang dirancang bertujuan menggambarkan peran user terhadap sistem yang dibuat. Pemodelan sistem yang digunakan dalam perancangan sistem, yaitu use-case diagram, activity diagram, dan squence diagram.
3.4.1 Use-Case Diagram Use-case Diagram merupakan model Diagram UML yang digunakan untuk menggambarkan requirement fungsional yang diharapkan dari sebuah sistem. Usecase Diagram menekankan pada “siapa” melakukan “apa” dalam lingkungan sistem perangkat lunak akan dibangun.Use-case Diagram dapat digunakan selama proses analisis untuk menangkap requirement system dan untuk memahami bagaimana sistem seharusnya bekerja. Selama tahap desain, use-case Diagram berperan untuk menetapkan perilaku (behavior) sistem saat diimplementasikan. Dalam sebuah model mungkin terdapat satu atau beberapa use-case diagram. Kebutuhan atau requirements system adalah fungsionalitas apa yang harus disediakan oleh sistem kemudian didokumentasikan pada model use-case yang menggambarkan fungsi sistem yang diharapkan (use-case), dan yang mengelilinginya (user), serta hubungan antara actor dengan use-case (use-case diagram) itu sendiri.
Universitas Sumatera Utara
Gambar 3.2 Use-Case Diagram dalam Proses Menampilkan Objek 3D
Pada gambar 3.2 menjelaskan peran aktor terhadap sistem yaitu dapat memilih 8 objek 3 dimensi, dan system akan menghasilkan output berupa objek 3 dimensi. Use-case Diagram menggambarkan interaksi antara sistem dengan sistem eksternal dan pengguna.
Universitas Sumatera Utara
3.4.2 Activity Diagram
Gambar 3.3 Activity Diagram Sistem
Universitas Sumatera Utara
Pada gambar 3.3 menjelaskan rancangan aktivitas user dan respon sistem pada aplikasi Augmented Reality pembelajaran huruf Mandarin pada Pengenalan Trasnportasi Umum. Activity Diagram menggambarkan berbagai aliran aktifitas dalam sistem yang sedang berjalan, bagaimana masing-masing aliran berawal dan bagaimana berakhir, Activity Diagram bersifat dinamis dan berkarakter khusus dari state diagram yang memperlihatkan aliran dari suatu aktifitas ke aktifitas lainnya dari suatu system. Berdasarkan gambar 3.3 Diagram Activity tersebut maka rancangan aktifitas sistem dapat dijelaskan pada tabel 3.1.
Tabel 3.1 Keterangan Berdasarkan Activity Diagram Name Activity Diagram
Activity Diagram System
Actor
User (Pengguna)
Deskripsi
Activity Diagram tersebut
menjelaskan rancangan
aktifitas
sistem pada
user
dan
respon
Aplikasi
Augmented Reality Pengenalan Trasnportasi Umum dalam bahasa Mandarin. Prakondisi
Dimulai pada halaman home sebagai halaman utama Aktifitas User 1. Menekan
tombol 1. Sistem
Menu 2. Memilih objek
Respon Sistem menampilkan
halaman Menu salah
satu 2. Sitem
menampilkan
halaman Informasi Objek
3. Menekan Tombol AR 3. Sistem Objek Aktifitas dan Respon
akan
menampilkan
tampilan
kamera pada smartphone dan user
akan diinta
untuk mengarahkan ke marker
yang
sudah
ditentukan 4. Menekan Petunjuk
tombol 4. Sistem
menampilkan
halaman petunjuk
Universitas Sumatera Utara
5. Menekan
tombol 5. Sistem
Tentang
menampilkan
halaman Tentang
6. Menekan tombol Exit
6. Sistem
akan
menampilkan
halaman
Exit Pasca Kondisi
Menampilkan
Objek
3D
sebagai
media
untuk
mengenalkan user terhadap objek
3.4.3 Sequence Diagram Sequence Diagram (diagram urutan) adalah suatu Diagram yang memperlihatkan atau menampilkan interaksi-interaksi antar objek didalam sistem yang disusun pada sebuah urutan atau rangkaian waktu. Interaksi antar objek tersebut termasuk pengguna, display, dan sebagainya berupa message (pesan). Sequence Diagram digunakan untuk menggambarkan skenario atau rangkaian langkah – langkah yang dilakukan sebagai sebuah respon dari suatu even (kejadian) untuk menghasilkan output tertentu. Sequence Diagram diawali dari apa yang me-trigger aktivitas tersebut, proses dan perubahan apa saja yang terjadi secara internal dan output apa yang dihasilkan.
Gambar 3.4 Sequence Diagram dalam Proses Menampilkan Objek 3D
Universitas Sumatera Utara
Pada Gambar 3.4 menggambarkan perilaku user terhadap sistem untuk menampilkan suatu objek. Sequence Diagram menggambarkan interakasi antara objek didalam disekitar system yang bersifat dinamis.
3.5 Perancangan Sistem Berdasarkan hasil dari analisis maka dapat dibangun suatu Flowchart (diagram alir) untuk menggambarkan lebih rinci tentang bagaimana setiap langkah program atau prosedur dalam satu urutan. Pada Gambar 3.5 menjelaskan mengenai beberapa menu dari aplikasi yang dapat diakses pengguna. Proses menampilkan objek AR dapat terlihat pada Menu Objek yang ketika ditekan maka akan masuk ke dalam halaman objek, yang di dalamnya terdapat 8 objek yang dapat dipilih. Di dalam salah satu objek terdapat penjelasan dari objek tersebut dan Augmented reality. Pada Gambar 3.6 merupakan flowchart alur kerja perancangan aplikasi.
Gambar 3.5 Flowchart Sistem
Universitas Sumatera Utara
Gambar 3.6 Flowchart Alur Kerja Perancangan Sistem Pada gambar 3.6 menjelaskan Alur Kerja Perancangan Aplikasi. Awal mula masukan objek ke unity 3D, Setelah itu lakukan coding program di dalam Unity 3D. Kemudian objek yang telah diproses oleh unity 3D berupa .apk akan ditampilkan. Setelah itu aplikasi .apk diinstal ke smartphone.
3.6 Perancangan Antarmuka Sistem 3.6.1 Rancangan Halaman Utama/Home Tampilan rancangan pada halaman Utama dapat dilihat pada Gambar 3.7, serta keterangan komponen yang terdapat pada halaman Utama dapat dilihat pada tabel 3.2.
Gambar 3.7 Rancangan Halaman Utama
Universitas Sumatera Utara
Tabel 3.2 Komponen-Komponen pada Halaman Home No
Jenis Komponen
Keterangan
1
Nama Aplikasi (Text)
Judul Aplikasi
2
Tombol Menu (Button)
Tombol yang akan menampilkan halaman yang berisi jenis-jenis Objek
3
Tombol Petunjuk (Button)
Tombol yang akan menampilkan halaman petunjuk
4
5
Tombol About / Tentang Tombol yang akan menampilkan halaman (Button)
About / Tentang
Tombol Exit (Button)
Tombol yang akan menampilkan halaman Exit
3.6.2 Rancangan Halaman Menu Dalam Rancangan halaman Menu dapat dilihat pada Gambar 3.8, serta keterangan komponen yang terdapat pada halaman Menu dapat dilihat pada tabel 3.3.
Gambar 3.8 Rancangan Halaman Menu
Tabel 3.3 Komponen-Komponen pada Halaman Menu No
Jenis Komponen
Keterangan
1
Nama Halaman
Judul Halaman
2
Back (Button)
Tombol untuk kembali ke halaman utama
Universitas Sumatera Utara
3
Tombol Bajaj (Button)
Tombol
yang
akan
menampilkan
halaman
akan
menampilkan
halaman
akan
menampilkan
halaman
akan
menampilkan
halaman
akan
menampilkan
halaman
menampilkan
halaman
akan
menampilkan
halaman
akan
menampilkan
halaman
informasi Bajaj 4
Tombol Becak (Button)
Tombol
yang
informasi Becak 5
Tombol Bus (Button)
Tombol
yang
informasi Bus 6
Tombol Delman (Button)
Tombol
yang
informasi Delman 7
Tombol
Kapal
Laut Tombol
(Button) 8
9
Tombol
yang
informasi Kapal Laut Kereta
Api Tombol
yang
akan
(Button)
informasi Kereta Api
Tombol Pesawat (Button)
Tombol
yang
informasi Pesawat 10
Tombol Taksi (Button)
Tombol
yang
informasi Taksi
3.6.3 Rancangan Halaman Informasi Objek Dalam Rancangan halaman Informasi Objek dapat dilihat pada Gambar 3.9, serta keterangan komponen yang terdapat pada halaman Informasi Objek dapat dilihat pada tabel 3.4.
Gambar 3.9 Rancangan Halaman Informasi Objek
Universitas Sumatera Utara
Tabel 3.4 Komponen-Komponen pada Halaman Informasi Objek No
Jenis Komponen
Keterangan
1
Nama Objek (Text)
Nama Objek Bajaj
2
Tombol Back (Button)
Tombol ini aka kembali ke halaman Menu
3
Gambar Bajaj (Image)
Menampilkan gambar Bajaj
4
Informasi Bajaj ( Text )
Menampilkan informasi tentang Bajaj
5
Vertical
Slider
bawah (Slider)
6
atas Slider akan menaikan dan menurunkan informasi tentang Bajaj
Tombol tulisan Mandarin Tombol ini akan memunculkan suara bahasa dan Indonesia objek ( Mandarin dari objek serta menampilkan informasi Image dan Button )
7
tulisan Mandarin dan Indonesia dari Bajaj
Tombol Kamera Ar ( Tombol untuk menampilkan Augmented Button )
Reality dari objek
3.6.4 Rancangan Halaman Augmented Reality/ARCamera Dalam Rancangan halaman Augmented Reality/ARCamera dapat dilihat pada Gambar 3.10, serta keterangan komponen yang terdapat pada halaman Augmented Reality/ARCamera dapat dilihat pada tabel 3.5.
Gambar 3.10 Rancangan Halaman Augmented Reality/ARCamera
Universitas Sumatera Utara
Tabel 3.5 Komponen-Komponen pada Halaman Augmented Reality/ARCamera No 1
Jenis Komponen Layar Kamera
Keterangan Layar Kamera akan menampilkan halaman AR kamera dan menampilkan objek 3D
2
Back (Button)
Tombol untuk kembali ke halaman informasi objek
Tambahan keterangan rancangan halaman Augmented Reality / AR Camera yaitu untuk zoom in dan zoom out gambar 3D dengan cara menggunakan jari tangan jempol dan jari telunjuk untuk zoom in dan zoom out. Sedangkan untuk merotate ( memutar ) objek 3D dengan menggunakan satu tangan saja,contohnya dengan jari telunjuk.
3.6.5 Rancangan Halaman Petunjuk Dalam Rancangan halaman petunjuk dapat dilihat pada Gambar 3.11, serta keterangan komponen yang terdapat pada halaman petunjuk dapat dilihat pada tabel 3.6.
Gambar 3.11 Rancangan Halaman Petunjuk
Universitas Sumatera Utara
Tabel 3.6 Komponen-Komponen pada Halaman Petunjuk No
Jenis Komponen
Keterangan
1
Petunjuk (Text)
Judul halaman Cara kerja aplikasi
2
Logo Printer (Button)
Tombol untuk mendownload Marker
3
Back (Button)
Tombol untuk kembali ke halaman utama
3.6.6 Rancangan Halaman About Dalam Rancangan halaman about dapat dilihat pada Gambar 3.12, serta keterangan komponen yang terdapat pada halaman about dapat dilihat pada tabel 3.7.
Gambar 3.12 Rancangan Halaman About
Tabel 3.7 Komponen-Komponen pada Halaman About No
Jenis Komponen
Keterangan
1
Foto Profil (Image)
Foto Profil diri
2
Profil diri (Text)
Isi tentang profil diri pembuat aplikasi
3
Logo USU (Image)
Isinya merupakan logo USU
4
Back (Button)
Tombol untuk kembali ke halaman utama
Universitas Sumatera Utara
3.6.7 Rancangan Halaman Exit Dalam Rancangan halaman Exit dapat dilihat pada Gambar 3.13, serta keterangan komponen yang terdapat pada halaman Exit dapat dilihat pada tabel 3.8.
Gambar 3.13 Rancangan Halaman Exit
Tabel 3.8 Komponen-Komponen pada Halaman Exit No 1
Jenis Komponen Foto Profil (Text)
Keterangan Untuk
menampilkan
tulisan
ingin
keluar
aplikasi 2
Yes (Button)
Tombol untuk keluar dari aplikasi
3
No (Button)
Tombol ini akan kembali ke halaman Utama
3.7 Proses Pembuatan Objek 3D Software yang digunakan penulis untuk membuat objek 3D Transportasi Umum yaitu Blender versi 2.76b. Dalam penggunaan software tersebut, penulis membuat langkahlangkah dalam membuat salah satu objek 3D Transportasi Umum yaitu bajaj. Langkah pertama untuk membuat objek Bajaj adalah membuat new project, lalu pilih create pada side menu untuk membuat bentuk dasar dari sebuah objek. Aplikasi akan memunculkan objek cube atau kotak karena itu tampilan secara default,
Universitas Sumatera Utara
karena penulis memang memerlukan bentuk kotak untuk membuat objek, penulis tidak perlu membuat lagi sebuah bentuk objek baru seperti terlihat pada gambar 3.14.
Gambar 3.14 Objek Cube pada Blender Langkah ke dua pengguna menggunakan gambar modeling dari setiap komponen bajaj agar dalam pembuatan objek bajaj lebih mudah karena tinggal mengikuti gambar pada modeling komponen tersebut, seperti terlihat pada gambar 3.15
Gambar 3.15 Modeling Komponen Bajaj
Langkah ke tiga objek cube diubah bentuk menjadi atap dari bajaj dengan cara menekan tombol pada keyboard (shortcut) yaitu “G” lalu geser secara geometri (X, Y,
Universitas Sumatera Utara
Z) dan shortcut “S” untuk mengubah ukuran dari sebuah objek. , seperti terlihat pada gambar 3.16.
. Gambar 3.16 Membuat Atap Bajaj Pada tahap ini buat objek baru dengan menggunakan objek cube lagi untuk membuat bangku bajaj. Caranya pilih pada menu Add kemudian pilih Mesh lalu pilih objek cube. Pada bentuk ini objek dapat dibentuk dengan memanjangkan atau memperbesar objek sehingga akhirnya terbentuk objek bangku. Seperti terlihat pada gambar 3.17.
Gambar 3.17 Membuat bangku Bajaj Untuk pembuatan sisa komponen yang ada bajaj sama caranya dengan keterang pada gambar
3.16
dan 3.17. Setelah semua komponen selesai dibuat
tinggal
menggabungkan semua komponen jadi satu sesuai pada posisinya agar komponen objek itu terbentuk menjadi bajaj. Selanjutnya adalah proses pemberian tekstur pada
Universitas Sumatera Utara
keseluruhan objek. Caranya adalah tambahkan material dan texture pada tiap-tiap objek yang telah dibuat, kemudian tambahkan warna sesuai yang kita inginkan. Seperti terlihat pada gambar 3.18.
Gambar 3.18 Hasil jadi Objek Bajaj
3.7.1 Tabel Data Teknikal Pembuatan Objek 3D Tabel Data Teknikal Pembuatan Objek 3D ini merupakan informasi data dari setiap objek yang didalamnya terdapat jumlah titik, garis, texture, faces, dan ukuran file dari objek seperti terlihat pada tabel 3.9. Tabel 3.9 Data Teknikal Pembuatan objek 3D Jenis Objek
Titik
Garis
Texture
Faces
Ukuran File Objek
Bajaj
3.166
5.891
1024 x 1024 pixel
2.757
1,31 MB
Becak
7.496
12.921
1024 x 1024 pixel
5.870
5,36 Mb
Bus
2.976
5.426
1600 x 556 pixel
2.478
892 Kb
Delman
5.473
10.468
1024 x 1024 pixel
5.158
5,22 Mb
Kapal Laut
6.804
20.166
1024 x 1024 pixel
13.444
5,85 Mb
Kereta Api
712
1.332
1500 x 512 pixel
620
502 Kb
Pesawat
3.384
6.196
1024 x 1024 pixel
22.786
1,18 Mb
Taksi
4.709
10.132
512 x 1024 pixel
5.608
1,13 Mb
Universitas Sumatera Utara
3.7.2 Tabel Data Suara Pengucapan Bahasa Mandarin Tabel Data Suara Pengucapan Bahasa Mandarin ini merupakan isi data dari file Suara yang ada didalam aplikasi Augmented Reality Pengenalan Transportasi Umum dalam Bahasa Mandarin, besar aplikasi Augmented Reality Pengenalan Transportasi Umum dalam Bahasa Mandarin ( .APK ) adalah 42,4 Mb. Data suara dapat dilihat pada tabel 4.10. Tabel 3.10 Data Suara Pengucapan Bahasa Mandarin Jenis Objek
Size
Length
Type
Bajaj
41,3 Kb
00:00:02
Mp3
Becak
33,1 Kb
00:00:01
Mp3
Bus
33,7 Kb
00:00:01
Mp3
Delman
46,4 Kb
00:00:02
Mp3
Kapal Laut
45,9 Kb
00:00:02
Mp3
Kereta Api
41,8 Kb
00:00:02
Mp3
Pesawat
42,3 Kb
00:00:02
Mp3
Taksi
32,6 Kb
00:00:01
Mp3
Universitas Sumatera Utara
BAB 4
IMPLEMENTASI DAN PENGUJIAN SISTEM
4.1 Implementasi Sistem Setelah proses analisa dan perancangan sistem selesai. Implementasi sitem merupakan tahap selanjutnya atau tahap akhir dari pengembangan sistem. Implementasi sistem yang dirancang menggunakan Software Unity dengan bahasa pemrograman C Sharp (C#) pada Platform Android versi 5.0.2 (lollipop).
4.1.1 Implementasi perancangan antarmuka Implementasi perancangan antarmuka ini berdasarkan rancangan yang telah dilakukan pada Bab 3.
4.1.1.1 Halaman Utama/ Home Halaman Utama merupakan halaman awal dari aplikasi Pembelajaran Huruf Mandarin Dalam Pengenalan Transportasi Umum. Didalamnya terdapat 4 tombol yang memiliki fungsi masing-masing. Tombol yang pertama adalah tombol Menu berupa icon garis tiga yang berfungsi membuka halaman tentang jenis-jenis Transportasi. Tombol yang kedua yaitu tombol Petunjuk berupa icon huruf i yang berfungsi membuka halaman informasi cara kerja aplikasi Pengenalan Trasnportasi Umum dalam Bahasa Mandarin. Tombol ketiga yaitu tombol About berupa icon baju yang berfungsi membuka halaman About. Tombol yang keempat yaitu tombol Exit berupa icon x yang berfungsi menampilkan halaman pertanyaan apakah ingin menutup aplikasi atau tidak. Tampilan halaman Utama/Home dapat dilihat pada Gambar 4.1.
Universitas Sumatera Utara
Gambar 4.1 Tampilan Halaman Utama/Home
4.1.1.2 Halaman Menu Halaman Menu merupakan halaman dimana user akan melihat jenis-jenis Transportasi. Pada halaman ini terdapat tombol back, dan tombol yang berupa icon Transportasi seperti Bajaj, Becak, Bus, Delman, Kapala Laut, Kereta Api, Pesawat dan Taksi. Dan jika Icon tersebut di Klik maka akan menampilkan halaman informasi tentang objek. Tampilan halaman Menu dapat dilihat pada Gambar 4.2.
Gambar 4.2 Tampilan Halaman Menu
Universitas Sumatera Utara
4.1.1.3 Halaman Informasi Objek Pada halaman Informasi Objek user akam melihat Tampilan infromasi objek Transportasi. Pada halaman ini berisi informasi objek yang disertai slider keatas dan kebawah, gambar Transportasi, tulisan mandarin dari nama objek tersebut. Dimana tulisan tersebut ketika diklik maka akan keluar suara berupa penyebutan nama objek tersebut dalam bahasa Mandarin. Terdapat juga tombol Arcamera yang berupa icon camera dan juga tombol Back yang ketika di klik maka akan kembali ke tampilan halaman menu. Tampilan Informasi Objek dapat dilihat pada Gambar 4.3.
Gambar 4.3 Tampilan Halaman Informasi Objek
4.1.1.4 Halaman ARCamera Pada Halaman ARCamera merupakan halaman yang menampilkan objek 3D. Pada halaman ini tidak terdapat banyak tombol, halaman ini mempunyai satu tombol yaitu tombol Back, jika tombol Back diklik maka halaman akan beralih kembali ke halaman informasi objek. Tampilan halaman ARCamera dapat dilihat pada Gambar 4.4.
Universitas Sumatera Utara
Gambar 4.4 Tampilan Halaman ARCamera
4.1.1.5 Halaman Petunjuk Pada Halaman Petunjuk merupakan halaman yang berisi informasi cara kerja aplikasi Pembelajaran Huruf Mandarin Dalam Pengenalan Transportasi Umum. Pada halaman ini terdapat icon printer yang jika diklik maka user dapat langsung beralih ke browser untuk men-Download marker. Serta terdapat juga tombol Back yang jika diklik halaman kembali ketampilan utama. Tampilan halaman Petunjuk dapat dilihat pada Gambar 4.5.
Gambar 4.5 Tampilan Halaman Petunjuk
Universitas Sumatera Utara
4.1.1.6 Halaman About Pada Halaman About merupakan halaman yang berisi tentang informasi pengembang aplikasi. Serta terdapat juga tombol Back yang jika diklik halaman kembali ketampilan utama. Tampilan halaman About dapat dilihat pada Gambar 4.6.
Gambar 4.6 Tampilan Halaman About
4.1.1.7 Halaman Exit Pada Halaman Exit merupakan halaman yang menampilkan pertanyaan apakah ingin menutup aplikasi atau tidak dan dilengkapi option Yes dan No. Tampilan halaman Exit dapat dilihat pada Gambar 4.7.
Gambar 4.7 Tampilan Halaman Exit
Universitas Sumatera Utara
4.1.2 Marker Aplikasi Aplikasi Pengenalan Transportasi Umum Dalam Bahasa Mandarin hanya memiliki satu marker yang akan menampilkan 8 objek 3D. Cara kerja marker ini ketika kita masuk dalam halaman informasi objek Bajaj lalu dengan menekan tombol Arcamera maka objek 3D Bajaj akan muncul. Jika ingin melihat objek lainnya seperti objek Becak maka terlebih dahulu harus memilih objek becak dan masuk ke halaman informasi becak lalu klik tombol Arcamera maka objek 3D Becak akan muncul. Begitulah cara seterusnya untuk menampilkan objek 3D. Marker aplikasi dapat dilihat pada Gambar 4.8
Gambar 4.8 Marker Aplikasi
Universitas Sumatera Utara
4.2 Pengujian Sistem Pengujian sistem merupakan tahap akhir dari proses implementasi sistem. Sistem yang akan diuji adalah Marker dan Augmented Reality. Pengujian sistem berguna untuk mendapatkan hasil yang baik dan melakukan perbaikan pada rancangan sistem yang telah dibuat.
4.2.1 Pengujian Marker dan Proses Pendeteksian Marker dalam Menampilkan Objek Pada tahap ini marker akan dideteksi melalui vuforia. Vuforia akan mendeteksi kelayakan marker yang akan digunakan melalui titik deteksi. Semakin titik deteksi yang terdeteksi maka semakin baik pula marker digunakan, karena akan memudahkan kamera dalam melakukan pendeteksian atau menandai marker. Contoh titik deteksi pada marker dapat dilihat pada Gambar 4.9.
Gambar 4.9 Titik Pendeteksian Marker
Universitas Sumatera Utara
Setelah marker berhasil dideteksi oleh Vuforia dan sudah di import kedalam unity 3D dan aplikasi telah siap dan di install ke smartphone. Berikut adalah proses pendeteksian marker melalui kamera smartphoine. Flowchart pendeteksian marker dalam menampilkan objek dapat dilihat pada Gambar 4.10.
Gambar 4.10 Alur Proses Pendeteksian Marker dalam Menampilkan Objek
Pada gambar 4.10 menjelaskan proses aplikasi augmented reality yang dimulai dari halaman utama aplikasi kemudian memilih menu informasi objek lalu klik tombol augmented reality, kemudian akan secara otomatis mengaktifkan kamera untuk mendeteksi marker. Dengan marker alat-alat trasnsportasi yang telah disediakan seperti pada gambar 4.8. Kemudian marker ditampilkan di depan kamera smartphone, dan kamera akan membaca dan aplikasi akan mendeteksi marker tersebut dengan marker yang telah di deteksi sebelumnya yang di simpan di smartphone. Lebih kontras marker akan lebih baik nilai pendeteksiannya, dengan memberi tanda pada pojok piksel dan setelah itu akan di ketahui kualitas marker dengan memberikan rating pada marker tersebut. Jika marker tidak cocok dengan marker yang di simpan pada smartphone android maka proses akan di ulang terus menerus, dan jika marker cocok aplikasi akan merendering objek 3D dan kemudian menapilkannya.
4.2.2 Pengujian Augmented Reality Bajaj Pada tahap ini akan menampikan objek 3D dari Transportasi Umum Bajaj. Objek 3D yang muncul dapat diperbesar, diperkecil dan dirotasi. Caranya memperbesar dan memperkecil objek 3D menggunakan dua jari tangan yang disentuhkan ke layar
Universitas Sumatera Utara
smartphone dengan gerakan dua jari ke arah luar untuk memperbesar dan kearah dalam untuk memperkecil objek. Sedangkan untuk merotasi cukup dengan satu jari yang digerakkan sesuai arah yang kita inginkan. Tampilan objek 3D Transportasi Umum Bajaj dapat dilihat pada Gambar 4.11 serta tampilan setelah diperbersar dan dirotasi dapat dilihat pada Gambar 4.12.
Gambar 4.11 Augmented Reality Bajaj
Gambar 4.12 Augmented Reality Bajaj Setelah Diperbersar Dan Dirotasi
Universitas Sumatera Utara
4.2.3 Pengujian Augmented Reality Becak Pada tahap ini akan menampikan objek 3D dari Transportasi Umum Becak. Objek 3D yang muncul dapat diperbesar, diperkecil dan dirotasi. Caranya memperbesar dan memperkecil objek 3D menggunakan dua jari tangan yang disentuhkan ke layar smartphone dengan gerakan dua jari ke arah luar untuk memperbesar dan kearah dalam untuk memperkecil objek. Sedangkan untuk merotasi cukup dengan satu jari yang digerakkan sesuai arah yang kita inginkan. Tampilan objek 3D Transportasi Umum Becak dapat dilihat pada Gambar 4.13 serta tampilan setelah diperbersar dan dirotasi dapat dilihat pada Gambar 4.14.
Gambar 4.13 Augmented Reality Becak
Universitas Sumatera Utara
Gambar 4.14 Augmented Reality Becak Setelah Diperbersar Dan Dirotasi
4.2.4 Pengujian Augmented Reality Bus Pada tahap ini akan menampikan objek 3D dari Transportasi Umum Bus. Objek 3D yang muncul dapat diperbesar, diperkecil dan dirotasi. Caranya memperbesar dan memperkecil objek 3D menggunakan dua jari tangan yang disentuhkan ke layar smartphone dengan gerakan dua jari ke arah luar untuk memperbesar dan kearah dalam untuk memperkecil objek. Sedangkan untuk merotasi cukup dengan satu jari yang digerakkan sesuai arah yang kita inginkan. Tampilan objek 3D Transportasi Umum Bus dapat dilihat pada Gambar 4.15 serta tampilan setelah diperbersar dan dirotasi dapat dilihat pada Gambar 4.16.
Universitas Sumatera Utara
Gambar 4.15 Augmented Reality Bus
Gambar 4.16 Augmented Reality Bus Setelah Diperbersar Dan Dirotasi
4.2.5 Pengujian Augmented Reality Delman Pada tahap ini akan menampikan objek 3D dari Transportasi Umum Delman. Objek 3D yang muncul dapat diperbesar, diperkecil dan dirotasi. Caranya memperbesar dan
Universitas Sumatera Utara
memperkecil objek 3D menggunakan dua jari tangan yang disentuhkan ke layar smartphone dengan gerakan dua jari ke arah luar untuk memperbesar dan kearah dalam untuk memperkecil objek. Sedangkan untuk merotasi cukup dengan satu jari yang digerakkan sesuai arah yang kita inginkan. Tampilan objek 3D Transportasi Umum Delman dapat dilihat pada Gambar 4.17 serta tampilan setelah diperbersar dan dirotasi dapat dilihat pada Gambar 4.18.
Gambar 4.17 Augmented Reality Delman
Universitas Sumatera Utara
Gambar 4.18 Augmented Reality Delman Setelah Diperbersar Dan Dirotasi
4.2.6 Pengujian Augmented Reality Kapal Laut Pada tahap ini akan menampikan objek 3D dari Transportasi Umum Kapal Laut. Objek 3D yang muncul dapat diperbesar, diperkecil dan dirotasi. Caranya memperbesar dan memperkecil objek 3D menggunakan dua jari tangan yang disentuhkan ke layar smartphone dengan gerakan dua jari ke arah luar untuk memperbesar dan kearah dalam untuk memperkecil objek. Sedangkan untuk merotasi cukup dengan satu jari yang digerakkan sesuai arah yang kita inginkan. Tampilan objek 3D Transportasi Umum Kapal Laut dapat dilihat pada Gambar 4.19 serta tampilan setelah diperbersar dan dirotasi dapat dilihat pada Gambar 4.20.
Universitas Sumatera Utara
Gambar 4.19 Augmented Reality Kapal Laut
Gambar 4.20 Augmented Reality Kapal Laut Setelah Diperbersar Dan Dirotasi
4.2.7 Pengujian Augmented Reality Kereta Api Pada tahap ini akan menampikan objek 3D dari Transportasi Umum Kereta Api. Objek 3D yang muncul dapat diperbesar, diperkecil dan dirotasi. Caranya memperbesar dan memperkecil objek 3D menggunakan dua jari tangan yang
Universitas Sumatera Utara
disentuhkan ke layar smartphone dengan gerakan dua jari ke arah luar untuk memperbesar dan kearah dalam untuk memperkecil objek. Sedangkan untuk merotasi cukup dengan satu jari yang digerakkan sesuai arah yang kita inginkan. Tampilan objek 3D Transportasi Umum Kereta Api dapat dilihat pada Gambar 4.21 serta tampilan setelah diperbersar dan dirotasi dapat dilihat pada Gambar 4.22.
Gambar 4.21 Augmented Reality Kereta Api
Gambar 4.22 Augmented Reality Kereta Api Setelah Diperbersar Dan Dirotasi
Universitas Sumatera Utara
4.2.8 Pengujian Augmented Reality Pesawat Pada tahap ini akan menampikan objek 3D dari Transportasi Umum Pesawat. Objek 3D yang muncul dapat diperbesar, diperkecil dan dirotasi. Caranya memperbesar dan memperkecil objek 3D menggunakan dua jari tangan yang disentuhkan ke layar smartphone dengan gerakan dua jari ke arah luar untuk memperbesar dan kearah dalam untuk memperkecil objek. Sedangkan untuk merotasi cukup dengan satu jari yang digerakkan sesuai arah yang kita inginkan. Tampilan objek 3D Transportasi Umum Pesawat dapat dilihat pada Gambar 4.23 serta tampilan setelah diperbersar dan dirotasi dapat dilihat pada Gambar 4.24. .
Gambar 4.23 Augmented Reality Pesawat
Universitas Sumatera Utara
Gambar 4.24 Augmented Reality Kereta Api Setelah Diperbersar Dan Dirotasi
4.2.9 Pengujian Augmented Reality Taksi Pada tahap ini akan menampikan objek 3D dari Transportasi Umum Taksi. Objek 3D yang muncul dapat diperbesar, diperkecil dan dirotasi. Caranya memperbesar dan memperkecil objek 3D menggunakan dua jari tangan yang disentuhkan ke layar smartphone dengan gerakan dua jari ke arah luar untuk memperbesar dan kearah dalam untuk memperkecil objek. Sedangkan untuk merotasi cukup dengan satu jari yang digerakkan sesuai arah yang kita inginkan. Tampilan objek 3D Transportasi Umum Taksi dapat dilihat pada Gambar 4.25 serta tampilan setelah diperbersar dan dirotasi dapat dilihat pada Gambar 4.26
Universitas Sumatera Utara
. Gambar 4.25 Augmented Reality Taksi
Gambar 4.26 Augmented Reality Taksi Setelah Diperbersar Dan Dirotasi
4.3 Pengujian Black Box
Pengujian Black Box yaitu pengujian yang dikhususkan untuk melihat fungsi – fungsi dari aplikasi (event) tanpa perlu mengetahui source code dari aplikasi tersebut. Pengujian yang dilakukan berupa uji dari input dengan output yang dihasilkan aplikasi, sehingga dari pengujian tersebut dapat membandingkan event dari input dan output sesuai dengan yang telah ditentukan. Jika terdapat kesalahan maka aplikasi perlu ditinjau kembali (perbaikan).
Universitas Sumatera Utara
4.3.1 Black Box Halaman Utama/Home Hasil pengujian Tombol Halaman Utama dapat dilihat pada tabel 4.1. Tabel 4.1 Hasil Pengujian Tombol Halaman Utama No
Pengujian
Hasil yang Diharapkan
Hasil Pengujian
1
Tombol Menu
Halaman Menu ditampilkan
Baik
2
Tombol Petunjuk
Halaman Petunjuk ditampilkan
Baik
3
Tombol About
Halaman About ditampilkan
Baik
4
Tombol Exit
Halaman Exit ditampilkan
Baik
4.3.2 Black Box Halaman Menu Hasil pengujian Tombol Halaman Menu dapat dilihat pada tabel 4.2. Tabel 4.2 Hasil Pengujian Tombol Halaman Menu No 1
Pengujian Tombol Bajaj
Hasil yang Diharapkan
Hasil Pengujian
Halaman Informasi Objek Bajaj ditampilkan
2
Tombol Becak
Halaman Informasi Objek Becak ditampilkan
3
Tombol Bus
Tombol Delman
Baik
Halaman Informasi Objek Delman Baik
ditampilkan 5
Tombol Kapal Laut
Halaman Informasi Objek Kapal Baik
Laut ditampilkan 6
Tombol Kereta Api
Halaman Informasi Objek Kereta Baik
Api ditampilkan 7
Tombol Pesawat
Halaman Informasi Objek Pesawat Baik
ditampilkan 8
Tombol Taksi
Baik
Halaman Informasi Objek Bus ditampilkan
4
Baik
Halaman Informasi Objek Taksi ditampilkan
Baik
Universitas Sumatera Utara
4.3.3 Black Box Halaman Informasi Objek Hasil pengujian Tombol Halaman Informasi Objek dapat dilihat pada tabel 4.3. Tabel 4.3 Hasil Pengujian Tombol Halaman Informasi Objek No 1
Pengujian Tombol AR Bajaj
Hasil yang Diharapkan Halaman AR Objek Bajaj ditampilkan
2
Tombol AR Becak
Halaman AR Objek Becak ditampilkan
3
Tombol AR Bus
Halaman
AR
Objek
Tombol AR Delman
Tombol ARKapal Laut
Halaman AR Objek Delman Baik
Halaman AR Objek Kapal Baik
Laut ditampilkan 6
Tombol AR Kereta Api
Halaman AR Objek Kereta Baik
Api ditampilkan 7
Tombol AR Pesawat
Halaman AR Objek Pesawat Baik
ditampilkan 8
Tombol AR Taksi
Baik
Baik
ditampilkan 5
Baik
Bus
ditampilkan 4
Hasil Pengujian
Halaman AR Objek Taksi Baik
ditampilkan
4.3.4 Black Box Halaman Augmented Reality Hasil pengujian Tombol Halaman Augmented Reality dapat dilihat pada tabel 4.4. Tabel 4.4 Hasil Pengujian Tombol Halaman Augmented Reality No 1
Pengujian Tombol Back
Hasil yang Diharapkan Halaman Ditampilkan
informasi
Hasil Pengujian
Objek Baik
Universitas Sumatera Utara
4.3.5 Black Box Halaman About Hasil pengujian Tombol Halaman About dapat dilihat pada tabel 4.5. Tabel 4.5 Hasil Pengujian Tombol Halaman About No 1
Pengujian Tombol Back
Hasil yang Diharapkan
Hasil Pengujian
Halaman Utama ditampilkan
Baik
4.3.6 Black Box Halaman Exit Hasil pengujian Tombol Halaman Exit dapat dilihat pada tabel 4.6. Tabel 4.6 Hasil Pengujian Tombol Halaman Exit No
Pengujian
Hasil yang Diharapkan
Hasil Pengujian
1
Tombol Yes
Keluar dari aplikasi
Baik
2
Tombol No
Halaman Utama ditampilkan
Baik
4.4 Evaluasi kepada user Evaluasi kepada user bertujuan untuk mengetahui apakah aplikasi ini memberikan hal yang positif kepada user untuk digunakan dalam proses belajar mengajar. Jumlah user sebanyak 20 orang yang ditujukan kepada pelajar SMP dari sekolah WR Supratman. Kuesioner pada tabel 4.7 berisi tentang pertanyaan yang berkaitan dengan aplikasi Augmented Reality Pengenalan Tranportasi Umum dalam bahasa Mandarin. Tabel 4.7 Hasil kuesioner Jawaban Pertanyaan
Sangat Baik
1
Desain tampilan aplikasi
2
Penyajian informasi dan
Baik
Cukup
Kurang Baik
14
5
1
0
informasi 13
6
1
0
penggunaan aplikasi
Universitas Sumatera Utara
3
Kemiripan visualisasi objek 3D dengan 15
5
0
0
7
0
0
aplikasi 14
6
0
0
terhadap 15
5
0
0
objek nyata 4
Cara Pengucapan Bahasa Mandarin 13 Pada Pengenalan Transportasi Umum
5
Kemudahan
penggunaan
sebagai media belajar mengajar 6
Tingkat
antusias
pelajar
aplikasi
Menurut Machfoedz (2007) secara keseluruhan penilaian dari kuesioner yang dilakukan dapat dihitung dengan menggunakan rumus berikut: Pk = (f/N) * Ikb Dimana: Pk = Persentase untuk k kondisi dalam hal kurang baik, cukup, baik dan sangat baik f = Total respons dalam k kondisi N = Jumlah total pertanyaan dikalikan total respons (6 x 20 = 120) Ikb = Interpretasi k kondisi terbesar yaitu kurang baik 25%, cukup baik 50%, baik 75%, dan sangat baik 100% Hasil evaluasi berupa diagram dapat dilihat pada gambar 4.27
HASIL KUESIONER 16 14 12 10
Sangat baik
8
Baik
6
Cukup
4
Kurang Baik
2 0 Pertanyaan Pertanyaan Pertanyaan Pertanyaan Pertanyaan Pertanyaan 1 2 3 4 5 6
Gambar 4.27 Hasil kuesioner
Universitas Sumatera Utara
Persentase hasil dari kuesioner dapat dihitung menggunakan rumus sehingga untuk masing-masing kriteria diperoleh: 1. Pkurang baik = (0 / 120) * 25% = 0.00% 2. Pcukup baik = (2 / 120) * 50% = 0.83% 3. Pbaik = (34 / 120) * 75% = 21.25% 4. Psangat baik = (84 / 120) * 100% = 70%
Maka total persentase didapat dengan menjumlahkan Pkurang baik + Pcukup baik + Pbaik + Psangat baik, sehingga didapat nilai sebesar 92.08% yaitu kategori sangat baik.Diagram persentase hasil dari kuesioner dapat dilihat pada gambar 4.28.
PERSENTASE KATEGORI 90 80 70 60 50 40 30 20 10 0 Sangat Baik
Baik
Cukup
Kurang Baik
Gambar 4.28 Persentase Kategori
Universitas Sumatera Utara
BAB 5
KESIMPULAN DAN SARAN
5.1 Kesimpulan Berdasarkan hasil studi literatur, analisis, perancangan, implementasi, dan pengujian sistem ini, maka kesimpulan yang didapat adalah sebagai berikut: 1.
Pemanfaatan teknologi Augmented Realty dapat memvisualisasikan dengan baik Pengenalan Transportasi Umum dalam bahasa Mandarin seperti, Bajaj, Becak, Bus, Delman, Kapal Laut, Kereta Api, Pesawat, Taksi. Serta Hasil yang diperoleh dari sistem yang dibangun dapat membantu User/pengguna khususnya pelajar yang ingin mempelajaran huruf Mandarin.
2.
Sesuai dengan nilai dari pengujian dengan kuesioner yang telah dilakukan kepada 20 orang responden, aplikasi Augmented Reality Pengenalan Transportasi Umum dalam Bahasa Mandarin memiliki indeks nilai yang sangat baik dalam hal tampilan yang menarik dan kegunaannya sebagai media pembelajaran.
3.
Objek 3D yang dibuat berdasarkan gambar asli
5.2 Saran Adapun saran – saran yang dapat diberikan penulis untuk pengembangan dan perbaikan sistem ini selanjutnya adalah sebagai berikut: 1.
Objek 3D hanya beberapa dari banyak Transportasi Umum beserta huruf Mandarinnya, diharapkan kedepannya dapat menyajikan yang lebih lengkap lagi.
2.
Aplikasi Augmented Reality yang dibuat masih menggunakan marker, diharapkan kedepannya tidak menggunakan marker sama sekali/ markerless.
3.
Aplikasi hanya berbasis android, diharapkan kedepannya dapat dikembangkan pada platform yang lain seperti ios dan windows phone.
Universitas Sumatera Utara