Gambar 3.18 Marker dengan Posisi Lurus
Gambar 3.19 Marker Diputar 90
3.2 Pemodelan Visual Menggunakan Unified Modeling Language UML
Penulis menggunakan UML untuk mendesain dan merancang aplikasi pengenalan bangun ruang menggunakaan augmented reality ini. UML yang digunakan adalah use
case diagram dan activity diagram.
3.2.1 Identifikasi Use Case Diagram
Untuk mengetahui actor dan use case yang akan digunakan, maka dilakukan identifikasi actor dan identifikasi use case. Setelah mendapatkan actor dan use case,
maka use case diagram dapat digambarkan.
Universitas Sumatera Utara
Identifikasi actor dilakukan dengan menjawab pertanyaan-pertanyaan berikut, yaitu:
1. Siapa yang menggunakan sistem?
Jawaban: Siswa.
2. Siapa yang diperlukan untuk melaksanakan fungsi pada sistem?
Jawaban: Siswa.
3. Bagaimana pemakai menggunakan sistem?
Jawaban: Siswa melihat materi yang terdapat pada aplikasi dengan cara menekan tombol
menu yang telah disediakan. Tombol-tombol ini terdiri dari menu AR, kubus, balok, prisma, limas segitiga, limas segiempat, tabung, kerucut, bola, latihan
dan keluar. Pada halaman latihan siswa dapat menginputkan nama dan jawaban dari soal.
Dengan demikian actor yang diperoleh adalah siswa. Untuk mendapatkan use case dari siswa, maka harus ditentukan hal-hal apa saja yang dapat dilakukan siswa pada
sistem. Berikut adalah hal-hal yang dapat dilakukan oleh siswa: 1.
Melihat materi kubus. 2.
Melihat materi balok. 3.
Melihat materi prisma. 4.
Melihat materi limas segitiga. 5.
Melihat materi limas segiempat. 6.
Melihat materi tabung. 7.
Melihat materi kerucut. 8.
Melihat materi bola. 9.
Mengerjakan latihan. 10.
Menginputkan nama. 11.
Menjawab soal latihan. 12.
Menggunakan aplikasi augmented reality.
Universitas Sumatera Utara
Berikut adalah use case diagram yang digambarkan berdasarakan actor dan use case yang telah diperoleh.
siswa
Melihat materi
kubus
Melihat materi
balok
Melihat materi
prisma
Melihat materi
limas
Melihat materi
limas segiempat
Melihat materi
kerucut
Melihat materi
bola
Menggunakan aplikasi
AR
Mengerjakan latihan
Menginputkan jawaban
Menginputkan nama
Melihat materi
tabung
Gambar 3.20 Use Case Diagram Analisis Sistem
3.2.1.1 Use Case Melihat Materi Kubus
Berikut ini merupakan tabel dokumentasi naratif dari setiap use case melihat materi kubus.
Universitas Sumatera Utara
Tabel 3.1 Dokumentasi Naratif Use Case Melihat Materi Kubus
Nama use case Melihat Materi Kubus
Aktor Siswa Deskripsi
Use case ini mendeskripsikan proses melihat materi- materi mengenai bangun ruang kubus
Prakondisi Sudah masuk ke tampilan antar muka halaman utama
Kegiatan Siswa Respon Sistem
Bidang khas suatu kejadian 1. klik tombol “kubus”
3. klik tombol “ciri-ciri”
5. klik tombol “volume”
7. klik tombol “luas”
9 klik tombol “menu utama”
2. menampilkan halaman home kubus
4. menampilkan materi mengenai ciri-ciri kubus
6. menampilkan materi mengenai volume kubus
8. menampilkan materi mengenai luas kubus
10. menampilkan antar muka halaman utama
Bidang alternatif -
Postkondisi Aplikasi menampilkan materi-materi mengenai bangun
ruang kubus
Alur kerja workflow pada use case melihat materi kubus dapat digambarkan dalam activity diagram berikut:
Universitas Sumatera Utara
Siswa Sistem
Klik tombol “kubus”
Klik tombol “ciri-ciri” Tampilkan halaman
materi mengenai ciri- ciri kubus
Klik tombol “volume”
Klik tombol “luas”
Klik tombol “menu utama”
Tampilkan halaman mengenai materi
volume kubus
Tampilkan halaman mengenai materi luas
kubus
Tampilkan halaman menu utama
Tampilkan halaman home materi kubus
Gambar 3.21 Activity Diagram Melihat Materi Kubus
3.2.1.2 Use Case Melihat Materi Balok
Berikut ini merupakan tabel dokumentasi naratif dari setiap use case melihat materi balok.
Universitas Sumatera Utara
Tabel 3.2 Dokumentasi Naratif Use Case Melihat Materi Balok
Nama use case Melihat Materi Balok
Aktor Siswa Deskripsi
Use case ini mendeskripsikan proses melihat materi- materi mengenai bangun ruang balok
Prakondisi Sudah masuk ke tampilan antar muka halaman utama
Kegiatan Siswa Respon Sistem
Bidang khas suatu kejadian 1. klik tombol “balok”
3. klik tombol “ciri-ciri”
5. klik tombol “volume”
7. klik tombol “luas”
9 klik tombol “menu utama”
2. menampilkan halaman home balok
4. menampilkan materi mengenai ciri-ciri balok
6. menampilkan materi mengenai volume balok
8. menampilkan materi mengenai luas balok
10. menampilkan antar muka halaman utama
Bidang alternatif -
Postkondisi Aplikasi menampilkan materi-materi mengenai bangun
ruang balok
Alur kerja workflow pada use case melihat materi balok dapat digambarkan dalam activity diagram berikut:
Universitas Sumatera Utara
Siswa Sistem
Klik tombol “balok”
Klik tombol “ciri-ciri” Tampilkan halaman
materi mengenai ciri- ciri balok
Klik tombol “volume”
Klik tombol “luas”
Klik tombol “menu utama”
Tampilkan halaman mengenai materi
volume balok
Tampilkan halaman mengenai materi luas
balok
Tampilkan halaman menu utama
Tampilkan halaman home materi balok
Gambar 3.22 Activity Diagram Melihat Materi Balok
3.2.1.3 Use Case Melihat Materi Prisma
Berikut ini merupakan tabel dokumentasi naratif dari setiap use case melihat materi prisma.
Universitas Sumatera Utara
Tabel 3.3 Dokumentasi Naratif Use Case Melihat Materi Prisma
Nama use case Melihat Materi Prisma
Aktor Siswa Deskripsi
Use case ini mendeskripsikan proses melihat materi- materi mengenai bangun ruang prisma
Prakondisi Sudah masuk ke tampilan antar muka halaman utama
Kegiatan Siswa Respon Sistem
Bidang khas suatu kejadian 1. klik tombol “prisma”
3. klik tombol “ciri-ciri”
5. klik tombol “volume”
7. klik tombol “luas”
9 klik tombol “menu utama”
2. menampilkan halaman home prisma
4. menampilkan materi mengenai ciri-ciri prisma
6. menampilkan materi mengenai volume prisma
8. menampilkan materi mengenai luas prisma
10. menampilkan antar muka halaman utama
Bidang alternatif -
Postkondisi Aplikasi menampilkan materi-materi mengenai bangun
ruang prisma
Alur kerja workflow pada use case melihat materi prisma dapat digambarkan dalam activity diagram berikut:
Universitas Sumatera Utara
Siswa Sistem
Klik tombol “prisma”
Klik tombol “ciri-ciri” Tampilkan halaman
materi mengenai ciri- ciri prisma
Klik tombol “volume”
Klik tombol “luas”
Klik tombol “menu utama”
Tampilkan halaman mengenai materi
volume prisma
Tampilkan halaman mengenai materi luas
prisma
Tampilkan halaman menu utama
Tampilkan halaman home materi prisma
Gambar 3.23 Activity Diagram Melihat Materi Prisma
Universitas Sumatera Utara
3.2.1.4 Use Case Melihat Materi Limas Segitiga
Berikut ini merupakan tabel dokumentasi naratif dari setiap use case melihat materi limas segitiga.
Tabel 3.4 Dokumentasi Naratif Use Case Melihat Materi Limas Segitiga
Nama use case Melihat Materi Limas Segitiga
Aktor Siswa Deskripsi
Use case ini mendeskripsikan proses melihat materi- materi mengenai bangun ruang limas segitiga
Prakondisi Sudah masuk ke tampilan antar muka halaman utama
Kegiatan Siswa Respon Sistem
Bidang khas suatu kejadian 1. klik tombol “limas
segitiga”
3. klik tombol “ciri-ciri”
5. klik tombol “volume”
7. klik tombol “luas”
9 klik tombol “menu utama”
2. menampilkan halaman home limas segitiga
4. menampilkan materi mengenai ciri-ciri limas
segitiga
6. menampilkan materi mengenai volume limas
segitiga
8. menampilkan materi mengenai luas limas segitiga
10. menampilkan antar muka halaman utama
Bidang alternatif -
Postkondisi Aplikasi menampilkan materi-materi mengenai bangun
ruang limas segitiga
Universitas Sumatera Utara
Alur kerja workflow pada use case melihat materi limas segitiga dapat digambarkan dalam activity diagram berikut:
Siswa Sistem
Klik tombol “limas segitiga”
Klik tombol “ciri-ciri” Tampilkan halaman
materi mengenai ciri- ciri limas segitiga
Klik tombol “volume”
Klik tombol “luas”
Klik tombol “menu utama”
Tampilkan halaman mengenai materi
volume limas segitiga
Tampilkan halaman mengenai materi luas
limas segitiga
Tampilkan halaman menu utama
Tampilkan halaman home materi limas segitiga
Gambar 3.24 Activity Diagram Melihat Materi Limas Segitiga
Universitas Sumatera Utara
3.2.1.5 Use Case Melihat Materi Limas Segiempat
Berikut ini merupakan tabel dokumentasi naratif dari setiap use case melihat materi limas segiempat.
Tabel 3.5 Dokumentasi Naratif Use Case Melihat Materi Limas Segiempat
Nama use case Melihat Materi Limas Segiempat
Aktor Siswa Deskripsi
Use case ini mendeskripsikan proses melihat materi-materi mengenai bangun ruang limas segiempat
Prakondisi Sudah masuk ke tampilan antar muka halaman utama
Kegiatan Siswa Respon Sistem
Bidang khas suatu kejadian 1. klik tombol “limas
segiempat”
3. klik tombol “ciri-ciri”
5. klik tombol “volume”
7. klik tombol “luas”
9 klik tombol “menu utama”
2. menampilkan halaman home limas segiempat
4. menampilkan materi mengenai ciri-ciri limas
segiempat
6. menampilkan materi mengenai volume limas
segiempat
8. menampilkan materi mengenai luas limas
segiempat
10. menampilkan antar muka halaman utama
Bidang alternatif -
Postkondisi Aplikasi menampilkan materi-materi mengenai bangun
Universitas Sumatera Utara
ruang limas segiempat
Alur kerja workflow pada use case melihat materi limas segiempat dapat digambarkan dalam activity diagram berikut:
Siswa Sistem
Klik tombol “limas segiempat”
Klik tombol “ciri-ciri” Tampilkan halaman
materi mengenai ciri- ciri limas segiempat
Klik tombol “volume”
Klik tombol “luas”
Klik tombol “menu utama”
Tampilkan halaman mengenai materi
volume limas segiempat
Tampilkan halaman mengenai materi luas
limas segiempat
Tampilkan halaman menu utama
Tampilkan halaman home materi limas segiempat
Gambar 3.25 Activity Diagram Melihat Materi Limas Segiempat
Universitas Sumatera Utara
3.2.1.6 Use Case Melihat Materi Tabung
Berikut ini merupakan tabel dokumentasi naratif dari setiap use case melihat materi tabung.
Tabel 3.6 Dokumentasi Naratif Use Case Melihat Materi Tabung
Nama use case Melihat Materi Tabung
Aktor Siswa Deskripsi
Use case ini mendeskripsikan proses melihat materi- materi mengenai bangun ruang tabung
Prakondisi Sudah masuk ke tampilan antar muka halaman utama
Kegiatan Siswa Respon Sistem
Bidang khas suatu kejadian 1. klik tombol “tabung”
3. klik tombol “ciri-ciri”
5. klik tombol “volume”
7. klik tombol “luas”
9 klik tombol “menu utama”
2. menampilkan halaman home tabung
4. menampilkan materi mengenai ciri-ciri tabung
6. menampilkan materi mengenai volume tabung
8. menampilkan materi mengenai luas tabung
10. menampilkan antar muka halaman utama
Bidang alternatif -
Postkondisi Aplikasi menampilkan materi-materi mengenai bangun
ruang tabung
Universitas Sumatera Utara
Alur kerja workflow pada use case melihat materi tabung dapat digambarkan dalam activity diagram berikut:
Siswa Sistem
Klik tombol “tabung”
Klik tombol “ciri-ciri” Tampilkan halaman
materi mengenai ciri- ciri tabung
Klik tombol “volume”
Klik tombol “luas”
Klik tombol “menu utama”
Tampilkan halaman mengenai materi
volume tabung
Tampilkan halaman mengenai materi luas
tabung
Tampilkan halaman menu utama
Tampilkan halaman home materi tabung
Gambar 3.26 Activity Diagram Melihat Materi Tabung
Universitas Sumatera Utara
3.2.1.7 Use Case Melihat Materi Kerucut
Berikut ini merupakan tabel dokumentasi naratif dari setiap use case melihat materi kerucut.
Tabel 3.7 Dokumentasi Naratif Use Case Melihat Materi Kerucut
Nama use case Melihat Materi Kerucut
Aktor Siswa Deskripsi
Use case ini mendeskripsikan proses melihat materi- materi mengenai bangun ruang kerucut
Prakondisi Sudah masuk ke tampilan antar muka halaman utama
Kegiatan Siswa Respon Sistem
Bidang khas suatu kejadian 1. klik tombol “kerucut”
3. klik tombol “ciri-ciri”
5. klik tombol “volume”
7. klik tombol “luas”
9 klik tombol “menu utama”
2. menampilkan halaman home kerucut
4. menampilkan materi mengenai ciri-ciri kerucut
6. menampilkan materi mengenai volume kerucut
8. menampilkan materi mengenai luas kerucut
10. menampilkan antar muka halaman utama
Bidang alternatif -
Postkondisi Aplikasi menampilkan materi-materi mengenai bangun
ruang kerucut
Universitas Sumatera Utara
Alur kerja workflow pada use case melihat materi kerucut dapat digambarkan dalam activity diagram berikut:
Siswa Sistem
Klik tombol “kerucut”
Klik tombol “ciri-ciri” Tampilkan halaman
materi mengenai ciri- ciri kerucut
Klik tombol “volume”
Klik tombol “luas”
Klik tombol “menu utama”
Tampilkan halaman mengenai materi
volume kerucut
Tampilkan halaman mengenai materi luas
kerucut
Tampilkan halaman menu utama
Tampilkan halaman home materi kerucut
Gambar 3.27 Activity Diagram Melihat Materi Kerucut
Universitas Sumatera Utara
3.2.1.8 Use Case Melihat Materi Bola
Berikut ini merupakan tabel dokumentasi naratif dari setiap use case melihat materi bola.
Tabel 3.8 Dokumentasi Naratif Use Case Melihat Materi Bola
Nama use case Melihat Materi Bola
Aktor Siswa Deskripsi
Use case ini mendeskripsikan proses melihat materi- materi mengenai bangun ruang bola
Prakondisi Sudah masuk ke tampilan antar muka halaman utama
Kegiatan Siswa Respon Sistem
Bidang khas suatu kejadian 1. klik tombol “bola”
3. klik tombol “ciri-ciri”
5. klik tombol “volume”
7. klik tombol “luas”
9 klik tombol “menu utama”
2. menampilkan halaman home bola
4. menampilkan materi mengenai ciri-ciri bola
6. menampilkan materi mengenai volume bola
8. menampilkan materi mengenai luas bola
10. menampilkan antar muka halaman utama
Bidang alternatif -
Postkondisi Aplikasi menampilkan materi-materi mengenai bangun
ruang bola
Universitas Sumatera Utara
Alur kerja workflow pada use case melihat materi bola dapat digambarkan dalam activity diagram berikut:
Siswa Sistem
Klik tombol “bola” Tampilkan halaman
home materi bola
Klik tombol “ciri-ciri” Tampilkan halaman
materi mengenai ciri- ciri bola
Klik tombol “volume”
Klik tombol “luas”
Klik tombol “menu utama”
Tampilkan halaman mengenai materi
volume bola
Tampilkan halaman mengenai materi luas
bola
Tampilkan halaman menu utama
Gambar 3.28 Activity Diagram Melihat Materi bola
Universitas Sumatera Utara
3.2.1.9 Use Case Mengerjakan Latihan
Berikut ini merupakan tabel dokumentasi naratif dari setiap use case mengerjakan latihan.
Tabel 3.9 Dokumentasi Naratif Use Case Mengerjakan Latihan
Nama use case Mengerjakan Latihan
Aktor Siswa Deskripsi
Use case ini mendeskripsikan proses dalam mengerjakan latihan
Prakondisi Sudah masuk ke tampilan antar muka halaman utama
Kegiatan Siswa Respon Sistem
Bidang khas suatu kejadian 1. klik tombol “latihan”
3. memasukkan nama peserta
4. klik tombol “mulai”
6. memasukkan pilihan jawaban
7. klik tombol “lanjut”
9. klik tombol “menu utama”
2. menampilkan halaman home latihan
5. menampilkan soal-soal latihan
8. menampilkan hasil dari latihan.
10. menampilkan antar muka halaman utama
Bidang alternatif Alt-7 : jika nomor soal = 10, maka ulangi langkah 5-7
Postkondisi Aplikasi menampilkan 10 soal mengenai materi bangun
ruang, dan menampilkan hasil tes dari siswa.
Universitas Sumatera Utara
Alur kerja workflow pada use case mengerjakan latihan dapat digambarkan dalam activity diagram berikut:
Siswa Sistem
Klik tombol “latihan” Tampilkan halaman
home latihan
Klik tombol “mulai” Tampilkan soal latihan
Memeriksa nomor soal
=10 Menginput pilihan
jawaban
Klik tombol “lanjut”
Tampilkan hasil latihan Klik tombol “menu utama”
Tampilkan halaman utaman ya
tidak Menginputkan nama
peserta
Gambar 3.29 Activity Diagram Mengerjakan Latihan
Universitas Sumatera Utara
3.2.1.10 Use Case Menggunakan Aplikasi Augmented Reality
Berikut ini merupakan tabel dokumentasi naratif dari setiap use case menggunakan aplikasi augmented reality.
Tabel 3.10 Dokumentasi Naratif Use Case Menggunakan Aplikasi Augmented reality
Nama use case Menggunakan Aplikasi Augmented Realtiy
Aktor Siswa Deskripsi
Use case ini mendeskripsikan proses dalam menggunakan aplikasi augmented reality
Prakondisi Sudah masuk ke tampilan antar muka halaman utama
Kegiatan Siswa Respon Sistem
Bidang khas suatu kejadian 1. klik tombol “AR”
3. klik tombol “AR”
5. mengarahkan buku AR ke webcam
7. tekan tombol “esc”
9. tekan tombol “x” 2. menampilkan halaman
cara penggunaan augmented reality
4. menampilkan halaman augmented reality
6. menampilkan animasi 3D diatas marker yang ada
di buku AR
8. tampilan layar aplikasi mengecil
9. aplikasi ditutup Bidang alternatif
- Postkondisi
Aplikasi menampilkan animasi 3D
Universitas Sumatera Utara
Alur kerja workflow pada use case menggunakan aplikasi augmented reality dapat digambarkan dalam activity diagram berikut:
Siswa Sistem
Klik tombol “AR” Tampilkan halaman cara
penggunaan AR
Klik tombol “AR”
Mengarahkan buku AR ke webcam
Menampilkan animasi 3D di atas marker yang
ada di buku AR
Menekan tombol “esc” Tampilan layar aplikasi
mengecil Tampilkan halaman
augmented reality
Menekan tombol “x” Aplikasi ditutup
Gambar 3.30 Activity Diagram Menggunakan Aplikasi Augmented Reality
Universitas Sumatera Utara
3.3 Flowchart Aplikasi
Kategori