BAB III ANALISA DAN PERANCANGAN

Transkripsi

1 BAB III ANALISA DAN PERANCANGAN Untuk melakukan proses perancangan suatu aplikasi diperlukan suatu analisa konsep yang tepat agar proses pembuatan dapat berjalan dengan baik dan system yang dibuat sesuai dengan yang diinginkan. Setelah analisis perlu dilakukan perancangan, aplikasi yang bertujuan untuk memberikan gambaran bagaimana proses jalannya aplikasi tersebut, dan perancangan juga dapat memudahkan seorang programmer dalam mengimplementasikan aplikasi tersebut. 3.1 Konsep Dalam membuat suatu aplikasi terjemahan bahasa inggris menggunakan Augmented Reality harus diawali dengan proses pembuatan konsep. Pada tahap konsep ini berisi mengenai analisa permasalahan, analisa kebutuhan, deskripsi umum system dan alur kerja system. 3.2 Analisa Permasalahan Media pembelajaran tentang terjemahan bahasa inggris untuk siswa sekolah dasar umum nya hanya menggunakan media berupa buku, film atau video. sedangkan media interaktif masih jarang ditemukan, media interaktif merupakan media yang menarik untuk mempelajari sesuatu. siswa belajar bahasa inggris hanya di kelas pada saat jam sekolah saja, setelah siswa sampai di rumah jarang sekali membaca buku, Pada umumnya siswa yang masih usia dini lebih mudah menyerap informasi melalui media interaktif dibandingkan harus membaca tulisan pada buku pelajaran. 28

2 Berikut ini penulisan melakukan analisa permasalahan apa saja dalam membuat aplikasi penerjemahan bahasa inggris untuk siswa sekolah dasar berbasis Augmented Reality pada android: 1. Data apa saja yang diperlukan untuk membuat aplikasi ini? 2. Bagaimana membuat sebuah aplikasi yang membantu anak-anak usia dini agar mau belajar dengan mudah? 3. Bagaimana aplikasi smartphone yang menghasilkan suatu objek seperti di dunia nyata? 4. Bagaimana membuat desain marker unik dan dapat memudahkan user untuk menggunakan aplikasi ini? 3.3 Analisa Kebutuhan Perangkat keras atau hardware yang dibutuhkan untuk membangun aplikasi ini adalah satu set laptop dengan spesifikasi : 1. Processor : Intel(R) Core(TM) i3-2350m 2.30GHz (4CPUs), ~2.3Ghz 2. Memory : 2048MB RAM 3. Harddisk Drive (HDD) : 500GB 4. Video Graphics Addapter (VGA) : Intel(R) HD Graphics MB 5. Mouse : S-Pro 6. Keyboard : Include Laptop Sedangkan perangkat lunak atau software yang dibutuhkan untuk pendukung pembuatan aplikasi ini adalah : 1. Microsoft Windows Ultimate SP1 32-bit untuk sistem operasinya. 2. Blender 2.77 sebagai pendukung aplikasi pemodelan objek. 3. Unity Game Engine 4.6.7f1 sebagai aplikasi pengembangan Android. 4. Mono Develop-Unity sebagai scripting editor. 5. Vuforia sebagai SDK Augmented Reality. 6. Android SDK untuk compiler membuat Android Package (.apk). 7. Adobe Photoshop untuk mengedit kebutuhan gambar. 29

3 Sedangkan device yang digunakan untuk mendukung penelitian ini adalah satu buah Smartphone dengan spesifikasi: 1. Device : Samsung Galaxy Note III N Operating system : Android 5.0 (Lolipop) 3. Chipset : Samsung Exynos Octa GHz 4. Processor : Octa Core (Quad-core 1.9GHz Cortex-A15 + quad-core 1.3Ghz Cortex-A7 5. RAM : 3GB 6. Memory : 32GB 3.4 Deskripsi Umum Sistem Aplikasi terjemahan bahasa inggris ini akan menampilkan suatu objek 3D yang bergerak dan juga bisa mengeluarkan suara bahasa yang akan diterjemahkan ke dalam bahasa inggris nantinya user atau siswa bisa berotasi yang dimaksudkan dengan untuk user bisa melihat lebih rinci objek tersebut dari berbagai arah yang berbentuk 3 dimensi dalam tampilan Augmented Reality. Aplikasi ini menggunakan metode User Defined Targets, pengguna menggunakan bantuan kamera yang ada pada Smartphone kemudian system melakukan proses convert Format Pixel dari inputan yang telah diambil oleh camera frame atau bisa disebut juga proses capture oto yang kemudian didefinisikan sebagai tracker. Dalam ruang lingkup tracker terjadi proses pendeteksian objek baru, dalam hal ini yang dideteksi adalah marker / foto yang sudah didefinisikan sebelumnya, kemudian setelah foto / marker terdeteksi sistem melakukan load data dari database lokal berupa karakter. Setelah data di-load dari database lokal, sistem melakukan tracking pada marker yang telah terdeteksi tersebut kemudian dilanjutkan proses konversi frame kembali untuk dilakukan proses selanjutnya yaitu pada ruang lingkup aplikasi dilakukan proses pemanggilan objek menggunakan query yang dilanjutkan pada proses update logika dari aplikasi yang kemudian dilakukan proses render graphics berupa objek karakter. Output yang dihasilkan terdiri dari dua layer yaitu layer background dan layer foreground. Pada layer background sistem melakukan 30

4 render camera preview sebagai lingkungan nyata dan pada layer foreground dilakukan render objek virtual yang berupa karakter 3D yang kemudian layer tersebut aktif secara bersamaan dan terlihat karakter 3D menempel pada dunia nyata. 3.5 Perancangan Perancangan system merupakan tahapan sketsa atau pengaturan dan pembuatan dari beberapa objek yang terpisah kedalam satu kesatuan yang utuh. Tujuan dari perancangan aplikasi adalah untuk memberikan gambaran kepada user atau pengguna tentang aplikasi yang akan dibuat serta memberi ilustrasi atau rekayasa aplikasi yang lengkap untuk di implementasikan kedalam program. 3.6 Perancangan Objek Perancangan objek merupakan gambaran suatu objek yang ada didalam aplikasi, Dalam aplikasi Augmented Reality penerjemah ini objek akan ditampilkan dalam bentuk 3D (3 dimensi) disertai dengan audio dari masing masing objek tersebut, seperti objek dibawah : Ikan Hiu (Shark) Gambar 3.1 Hiu 31

5 Ikan Hiu adalah sekelompok (superordo Selachimorpha) ikan dengan kerangka tulang rawan yang lengkap dan tubuh yang ramping. Mereka bernapas dengan menggunakan lima liang insang (kadang-kadang enam atau tujuh, tergantung pada spesiesnya) di samping, atau dimulai sedikit di belakang, kepalanya. Hiu mempunyai tubuh yang dilapisi kulit dermal denticles untuk melindungi kulit mereka dari kerusakan, dari parasit, dan untuk menambah dinamika air.mereka mempunyai beberapa deret gigi yang dapat digantikan Kipas (Fan) Gambar 3.2 Kipas Kipas angin dipergunakan untuk menghasilkan angin. Fungsi yang umum adalah untuk pendingin udara, penyegar udara, ventilasi (exhaust fan), pengering (umumnya memakai komponen penghasil panas). Kipas angin juga ditemukan di mesin penyedot debu dan berbagai ornamen untuk dekorasi ruangan. Kipas angin secara umum dibedakan atas kipas angin tradisional antara lain kipas angin tangan dan kipas angin listrik yang digerakkan menggunakan tenaga listrik. Perkembangan kipas angin semakin bervariasi baik dari segi ukuran, penempatan posisi, serta fungsi. Ukuran kipas angin mulai kipas angin mini (Kipas angin 32

6 listrik yang dipegang tangan menggunakan energi baterai), kipas angin Kipas angin digunakan juga di dalam Unit CPU komputer seperti kipas angin untuk mendinginkan processor, kartu grafis, power supply dan Cassing. Kipas angin tersebut berfungsi untuk menjaga suhu udara agar tidak melewati batas suhu yang di tetapkan. Kipas angin juga dipasang pada alas atau tatakan Laptop untuk menghantarkan udara dan membantu kipas laptop dalam mendinginkan suhu laptop tersebut Rumah (House) Gambar 3.3 Rumah Dalam pengertian yang luas, rumah bukan hanya sebuah bangunan (struktural), melainkan juga tempat kediaman yang memenuhi syarat-syarat kehidupan yang layak, dipandang dari berbagai segi kehidupan masyarakat. Rumah dapat dimengerti sebagai tempat perlindungan, untuk menikmati kehidupan, beristirahat dan bersuka ria bersama keluarga. Di dalam rumah, penghuni memperoleh kesan pertama dari kehidupannya di dalam dunia ini. Rumah harus menjamin kepentingan keluarga, yaitu untuk tumbuh, memberi kemungkinan untuk hidup bergaul dengan tetangganya, dan lebih dari itu, rumah harus memberi ketenangan, kesenangan, kebahagiaan, dan kenyamanan pada segala peristiwa hidupnya. 33

7 3.7 Storyboard Gambar 3.4 Storyboard Hiu Gambar 3.5 Storyboard Kipas 34

8 Gambar 3.6 Storyboard Rumah 3.8 Flow chart Flow Chart adalah penggambaran secara grafik dari langkah-langkah dan uruturutan prosedur dari suatu program. Flow chart menjelaskan urutan dari prosedurprosedur yang ada di dalam sistem. Aplikasi Augmented Reality pada Android ini digunakan oleh satu user saja, dimana user tersebut dapat menjalankan aplikasi ini dengan media marker yang sudah ditentukan. Secara umum alur sistem aplikasi yang dibuat adalah sebagai berikut: 1. Pengguna membuka aplikasi melalui smartphone Android yang sudah terpasang aplikasi ini. 2. Aplikasi akan menampilkan Main Menu, dimana Pengguna harus memilih tombol Play untuk memulai, tombol Cara Bermain untuk melihat petunjuk, tombol Exit untuk mengakhiri aplikasi tersebut. 35

9 3. Jika Pengguna menekan tombol Play, maka aplikasi akan menampilkan mode kamera dimana pengguna dapat mengarahkan kamera langsung kearah marker untuk dapat memunculkan objek 3D beserta button interaksi. 4. Jika marker dapat terdeteksi maka system akan menampilkan objek 3D. 5. Jika Pengguna menekan tombol Cara Bermain maka aplikasi akan menampilkan halaman petunjuk. 6. Jika Pengguna menekan tombol Exit maka aplikasi tersebut akan berakhir. Langkah-langkah tersebut dapat digambarkan kedalam sebuah flow chart seperti pada gambar dibawah ini : 36

10 Gambar 3.7 Flow chart system Aplikasi Augmented Reality membutuhkan sebuah marker yang harus didaftarkan pada Qualcomm Vuforia. Marker bisa dibuat menggunakan aplikasi pendukung pengolahan gambar seperti : Adobe Photoshop, Coreldraw. Setelah Marker selesai dibuat kemudian marker di upload ke website Qualcomm Vuforia untuk mendapatkan sebuah dataset yang 37

11 dibutuhkan didalam Unity. Berikut ini merupakan flow chart pembuatan marker. Gambar 3.8 flow chart Marker 3.9 Use Case Diagram Use Case Diagram digunakan untuk menjelaskan dan menggambarkan system dan prilaku pengguna terhadap system itu sendiri. Diagram use case lebih menekankan apa yang akan dilakukan oleh system dan bukan menekankan bagaimana system tersebut bertindak. 38

12 Gambar 3.9 Use Case Diagram aplikasi Spesifikasi scenario diagram Use case aplikasi media pembelajaran bahasa inggris dengan bantuan objek 3D, dijelaskan pada table dibawah ini : Tabel 3.1 Skenario Use Case Melihat halaman Menu Nama Use Case Aktor Deskripsi Singkat Skenario Kondisi Awal Kondisi Akhir Melihat Menu Utama User Pengguna dapat melihat pilihan-pilihan menu yang ada pada aplikasi 1. Membuka aplikasi 2. Sistem menampilkan menu utama 3. Pengguna dapat melihat tampilan menu aplikasi yang berisi tombol-tombol pilihan pada aplikasi Aplikasi AR pembelajaran bahasa inggris terpasang pada gadget android Aplikasi menampilkan menu utama 39

13 Tabel 3.2 Skenario Use Case mengakses Halaman Cara Bermain Nama Use Case Melihat halaman Cara Bermain Aktor User Deskripsi Singkat Pengguna dapat melihat informasi cara penggunaan aplikasi AR Pembelajaran Bahasa Inggris Skenario 1. Membuka aplikasi 2. Sistem menampilkan menu utama 3. User memilih tombol Cara Bermain 4. Sistem menampilkan halaman Cara Bermain untuk penggunaan aplikasi 5. User dapat melihat halaman Cara Bermain di dalam aplikasi. Kondisi Awal Aplikasi AR Pembelajaran Bahasa Inggris terpasang pada gadget android Kondisi Akhir Aplikasi menampilkan halaman cara bermain Tabel 3.3 Skenario Use Cara Mengakses halaman Mulai Nama Use Case Aktor Deskripsi Singkat Skenario Melihat halaman Mulai AR User Pengguna dapat melihat tampilan mode kamera augmented reality pada aplikasi untuk melakukan pendeteksian marker 1. Membuka aplikasi 2. Sistem menampilkan menu utama 3. User memilih tombol Mulai 4. Sistem menampilkan mode kamera augmented reality beserta tombol navigasi objek 5. Pengguna memposisikan marker di depan kamera 6. Sistem mendeteksi marker 7. Objek muncul pada layar 8. Pengguna Menekan tombol Rumah 40

14 Kondisi Awal Kondisi Akhir 9. Tampilan akan kembali ke Menu Utama 10. Pengguna menekan tombol Suara 11. Terdengar Suara penerjemah dari bahasa Indonesia ke bahasa inggris. 12. Pengguna menekan tombol Next 13. Objek akan berganti dengan objek lainnya. 14. Pengguna menggerakkan gadget android 15. Pengguna menekan tombol Rotasi 16. Objek akan memulai Rotasi (Bergerak) 17. Pengguna menekan tombol Exit 18. Aplikasi akan tertutup Aplikasi AR Pembelajaran Bahasa Inggris terpasang pada gadget android Aplikasi menampilkan objek 3.10 Perancangan Struktur Navigasi Navigasi dalam suatu aplikasi memegang peranan yang sangat penting terhadap keberhasilan suatu aplikasi. Dengan adanya navigasi yang baik dan mudah dimengerti, user dapat menelusuri suatu aplikasi dengan nyaman. Berikut adalah struktur navigasi pada aplikasi AR Pembelajaran Bahasa Inggris menggunakan Augmented Reality. 41

15 Gambar 3.10 Struktur Navigasi 3.11 Perancangan Sistem Marker Marker adalah salah satu objek untuk penanda di dalam dunia computer maupun dunia nyata. Dengan ini computer akan mengenali sebagai tempat dimana informasi digital akan ditampilkan. Marker yang digunakan pada aplikasi ini berupa gambar 2D yang sudah melalui proses editing, bertujuan untuk memudahkan user atau pengguna untuk memainkan aplikasi ini. Objek yang muncul di atas marker tersebut adalah Objek 3D seperti hewan hiu, kipas angin, dan rumah yang bisa menghasilkan suara penerjemah bahasa inggris dan interaksi lainnya. 42

16 Gambar 3.11 Marker Gambar diatas merupakan desain marker yang telah di buat dan telah didaftarkan ke dalam database vuforia yang menghasilkan objek 3D, marker tersebut akan memunculkan objek 3D seperti hewan hiu, kipas angin, dan rumah beserta audio penerjemah bahasa inggris Perancangan Tampilan Aplikasi Perancangan aplikasi merupakan gambaran atau pengaturan dan pembuatan dari beberapa aturan yang terpisah kedalam satu kesatuan yang utuh. Tujuan dari perancangan aplikasi adalah untuk memberikan gambaran kepada pengguna tentang aplikasi yang akan dibuat serta memberi ilustrasi atau rekayasa aplikasi yang lengkap untuk di implementasikan ke dalam aplikasi. Perancangan desain user interface merupakan perancangan halaman tampilan dalam aplikasi yang akan dibuat. Perancangan user interface ini, 43

17 merancang halaman dalam proses input maupun output dalam aplikasi Augmented Reality. Pada saat pertama kali user atau pengguna menjalankan aplikasi Pembelajara Bahasa Inggris Berbasis Augmented Reality ini sistem device akan langsung memunculkan halaman Menu Utama seperti gambar dibawah ini. Gambar 3.12 Tampilan Menu Utama Pada Halaman Menu Utama terdapat tombol yang memiliki fungsi masing-masing, apabila pengguna menekan tombol cara bermain maka sistem aplikasi otomatis berpindah ke halaman Cara Bermain disana terdapat penjelasan singkat untuk menggunakan aplikasi ini, apabila pengguna menekan tombol Play maka sistem aplikasi otomatis berpindah ke halaman Augmented Reality. Selanjutnya adalah halaman Cara Bermain yang berisi panduan singkat untuk pengguna yang baru mencoba aplikasi berbasis Augmented Reality ini. Disana ada beberapa tahapan tahapan seperti gambar di bawah ini 44

18 Gambar 3.13 Tampilan Halaman Cara Bermain Halaman Cara Bermain ini disediakan untuk pengguna yang belum bisa atau belum mengetahui tentang aplikasi Augmented Reality. Disana terdapat langkah-langkah singkat cara menggunakan aplikasi tersebut. Gambar 3.14 Tampilan Halaman Augmented Reality Diatas adalah halaman tampilan Augmented Reality yang telah dibuat, dimana user atau pengguna bisa melakukan interaksi seperti menekan tombol sound yang bisa mengeluarkan suara penerjemahan bahasa inggris dari masingmasing objek, menekan tombol rotasi objek 3D bergerak secara rotasi dan tombol lainnya. 45