i
Aplikasi
Hybrid
Media Pembelajaran Bahasa Jepang
Dengan Menggunakan
Ionic Framework
Artikel Ilmiah
Diajukan kepada Fakultas Teknologi Informasi
untuk memperoleh Gelar Sarjana Komputer
Peneliti :
Andri Malfian Labiro (672010261) Hendro Steven Tampake, S.Kom., M.Cs.
Lasti Nur Satiani, M.Pd.
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INFORMASI
UNIVERSITAS KRISTEN SATYA WACANA
1
Aplikasi
Hybrid
Media Pembelajaran Bahasa Jepang
Dengan Menggunakan
Ionic Framework
1)
Andri Malfian Labiro, 2)Hendro Steven Tampake, 3)Lasti Nur Satiani
Fakultas Teknologi Informasi Universitas Kristen Satya Wacana Jl. Diponegoro 52-60, Salatiga 50711, Indonesia
Email : 1)rave_0077@yahoo.com, 2)hendro.tampake@staff.uksw.edu,
3)
lastinursatiani@gmail.com
Abstract
The popularity of Japanese language in Indonesia has been growing increasingly fast in recent years, and so developed interest in learning Japanese language. One of the reason is because Japan is one of favorite study destination for student and also because of the rapidly increasing popularity of Japanese pop culture. Learning languages is time consuming. Mobile learning applications are developed to answer the need of an efficient way to learn languages. However to create an application that run on multiple platform, developers need to write code for every targeted platform. Ionic framework uses web technologies to build application and cordova as a native container that run application on multiple platform. The result of this research is a mobile application that run on both android and ios platform.
Keyword: Japanese Language, Ionic Framework, Hybrid App, Mobile
Abstrak
Kepopuleran bahasa Jepang di Indonesia dewasa ini meningkat dengan cepat, sehingga banyak orang menjadi tertarik untuk belajar Jepang. Hal ini dikarenakan bahwa Jepang adalah salah satu negara tujuan favorit untuk belajar, selain itu juga dikarenakan oleh kepopuleran kultur pop Jepang. Mempelajari bahasa Jepang membutuhkan waktu yang tidak sedikit. Media pembelajaran mobile dikembangkan untuk menjawab masalah
tersebut. Namun untuk membuat aplikasi yang multi platform, pengembang harus
membuat code program untuk masing-masing platform. Ionic framework menggunakan teknologi web dalam membangun aplikasi dan cordova sebagai native container yang menjalankan aplikasi pada berbagai platform. Hasil dari penelitian ini adalah aplikasi mobile yang dapat berjalan pada platform android dan ios.
Keyword: Bahasa Jepang , Ionic Framework, Hybrid App, Mobile
1)
Mahasiswa Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana
2)
Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana
3)
2 1. Pendahuluan
Di era globalisasi sekarang ini, kita dituntut untuk tidak hanya menguasai Bahasa Indonesia saja, tetapi juga menguasai bahasa asing. Bahasa Inggris yang merupakan bahasa Internasional sudah diajarkan disekolah sejak SMP bahkan SD. Selain Bahasa Inggris, bahasa yang tidak kalah pentingnya adalah Bahasa Jepang. Negara Jepang merupakan salah satu negara tujuan favorit1 pelajar Indonesia untuk menuntut ilmu, baik yang mengambil program Diploma, Sarjana, Research Student, Master, Doktoral maupun program pertukaran pelajar selama setahun atau satu semester. Banyak tersedia beasiswa penuh bagi pelajar Indonesia yang berminat melanjutkan studi di Jepang namun terbentur masalah biaya, antara lain dari beasiswa Monbukagakusho dari pemerintah Jepang melalui MEXT2 (Ministry of Education, Culture, Sports, Science and Technology ), JASSO3 (Japan Student Services Organization) dan masih banyak beasiswa lainnya. Meskipun di Jepang sendiri terdapat Universitas yang menyediakan program dalam bahasa Inggris, namun tentunya akan lebih baik lagi jika kita menguasai bahasa Jepang. Selain bertujuan untuk belajar di Jepang, ketertarikan untuk mempelajari bahasa dan budaya jepang juga disebabkan menjamurnya komik, anime, dan game buatan jepang di Indonesia serta meningkatnya popularitas kultur pop Jepang di Indonesia.
Berbeda dengan Bahasa Inggris yang menggunakan aksara Latin seperti Bahasa Indonesia, Bahasa Jepang menggunakan tiga aksara yaitu “katakana”, ”hiragana” dan “kanji”. Jumlah huruf kanji yang digunakan pada Bahasa Jepang jumlahnya sangat banyak, namun yang umum dipakai berjumlah kurang lebih 2000 buah. Buku bahasa Jepang sendiri sudah banyak tersedia dalam Bahasa Indonesia dan dijual diberbagai toko buku. Namun di era sekarang ini dimana teknologi mobile berkembang sangat pesat, maka proses pembelajaran dapat dilakukan dimana saja, kapan saja melalui perangkat mobile.
Untuk menunjang pembelajaran Bahasa Jepang pada perangkat Mobile
maka Penulis mengadakan penelitian untuk membuat aplikasi Media Pembelajaran Bahasa Jepang dan implementasinya pada perangkat mobile
Android dan ios. Perkembangan teknologi smartphone maupun tablet computer
sendiri sudah sangat pesat. Perangkat-perangkat mobile tersebut dilengkapi dengan teknologi hardware terbaru yang kinerjanya sangat jauh jika dibandingkan dengan perangkat-perangkat generasi sebelumnya. Sistem operasi yang dipakai juga bermacam-macam, yang paling populer diantaranya adalah Android, iOS dan Windows Mobile. Bahasa pemrograman yang dipakai juga berbeda antara sistem operasi tersebut, Android menggunakan bahasa pemrograman Java, iOS
menggunakan Objective-C dan Windows Mobile menggunakan .NET. Jika kita
ingin mengembangkan aplikasi pada platform-platform tersebut maka tentunya kita harus membuat aplikasi dengan berbagai bahasa pemrograman Java, Objective-C dan.NET. Hal ini tentunya tidak efisien karena memakan waktu dan
1
ht t p:/ / mjeducat ion.com/ negara-favor it-t ujuan-mahasisw a-indonesia-kuliah-ke-luar-negeri/
2
ht t p:/ / w w w .mext .go.jp/ a_m enu/ kout ou/ ryugaku/ boshu/ 1319066.ht m
3
3
biaya lebih untuk membuat code program untuk setiap bahasa pemrograman, selain itu programmer juga dituntut untuk menguasai berbagai bahasa pemrograman tersebut.
Untuk mengatasi masalah tersebut maka Penulis membuat hybrid apps,
yang dibangun dengan menggunakan teknologi web seperti HTML5, CSS dan
Java Script namun dapat berjalan layaknya sebuah native apps.Hybrid apps dapat berjalan pada device secara offline dan dapat mengakses native API. Kelebihan
hybrid apps dibandingkan native apps adalah mudah implementasikan ke berbagai
platform. Dengan hybrid apps ini maka kita bisa membuat aplikasi cross platform
dengan lebih mudah dan efisien. Untuk mengembangkan hybrid apps
menggunakan framework, dalam kasus ini Penulis menggunakan ionic framework. Berdasarkan pemaparan diatas maka Penulis memutuskan untuk membuat media pembelajaran bahasa jepang pada perangkat mobile. Aplikasi ini ditujukan bagi mahasiswa yang berminat untuk belajar bahasa Jepang tingkat dasar, yang kemudian dapat dilanjutkan ketingkat selanjutnya hingga fasih berbahasa jepang.
2. Tinjauan Pustaka
Penelitian terdahulu
Penelitian yang dilakukan oleh Mike Sharples, Inmaculada Arnedillo-Sánchez, Marcelo Milrad dan Giasemi Vavoula mengenai mobile learning
menemukan bahwa pengguna device mobile berinteraksi dengan teknologi untuk menciptakan media impromptu untuk pembelajaran. Teknologi mobile dapat digunakan sebagai sarana pembelajaran informal dan sebagai ekstensi pembelajaran formal[14].
Sedangkan dalam penelitian yang dilakukan oleh Yonathan Aklilu Redda dalam “Cross platform Mobile Applications Development”, cross platform tool
digunakan dalam pengembangan aplikasi sebagai sarana untuk mengatasi berbagai kendala yang dihadapi developer dalam pengembangan aplikasi pada berbagai device yang berbeda, seperti perbedaan fitur dan spesifikasi pada
platform-platform mobile tersebut[13].
Persamaan peneletian ini dan penelitian terdahulu adalah bagaimana memanfaatkan teknologi mobile sebagai sarana pembelajaran serta penggunaan
cross platform tool dalam pengembangan aplikasi yang efisien dan efektif. Perbedaannya adalah dalam penelitian ini membuat hybrid app dalam pembuatan aplikasi cross platform.
Bahasa Jepang
Bahasa jepang merupakan bahasa resmi negara Jepang, dengan jumlah penutur sekitar 126 300 0004 orang. Dalam sistem penulisannya, Bahasa Jepang menggunakan tiga aksara, yaitu huruf kana (“katakana” dan “hiragana”) dan “kanji”. Huruf kanji berasal dari huruf Mandarin “Hanzi” dan berjumlah ribuan. Namun pemerintah Jepang melalui kementrian pendidikan pada tahun 2010
4
4
menetapkan sebanyak 2136 huruf kanji yang dipakai sehari-hari5. Huruf kanji
mempunyai 2 cara baca yaitu On-yomi atau cara baca berdasarkan pengucapan dalam Bahasa Mandarin dan Kun-yomi atau cara baca berdasarkan Bahasa Jepang. Contohnya Kanji 山 dibaca “san” menurut cara baca On-yomi dan dibaca “yama” menurut cara baca Kun-yomi.
Media Pembelajaran
Belajar merupakan sebuah proses yang dialami seseorang saat dia berinteraksi dengan lingkungannya. Salah satu ciri dari seseorang yang sudah belajar adalah adanya perubahan pengetahuan, sikap dan skill yang dimiliki orang tersebut. Proses belajar terdiri dari formal dan informal. Proses informal terjadi disekolah dengan menggunakan kurikulum tertentu yang diatur oleh lembaga pendidikan yang menaungi sekolah tersebut atau pemerintah. Sedangkan proses informal terjadi diluar lingkungan sekolah dimana kita belajar dari berbagai sumber seperti media elektronik, media cetak, sumber lisan dan sebagainya.
Media dalam bahasa arab berarti perantara atau pengantar pesan dari pengirim ke penerima. Media dalam proses belajar digunakan agar proses belajar tersebut menjadi lebih efektif. Media pembelajaran dapat berupa media audio, media visual atau gabungan dari keduanya[1].
Mobile Learning
Quinn(2010), mengatakan bahwa mobile learning adalah e-learning melalui perangkat komputasi mobile, seperti Palm, Windows CE, termasuk telepon seluler digital[12]. Mobilelearning dapat dipecah dalam beberapa pengertian :
Mobilitas secara fisik dimana orang yang selalu bergerak mencoba meyisipkan pembelajaran dalam kegiatan sehari-hari.
Mobilitas teknologi, perangkat teknologi yang dapat dibawa kemana-mana, serta resource selalu tersedia dalam perangkat tersebut.
Mobilitas dalam ruang sosial, pembelajaran dilakukan diruang kelas, dalam komunitas, dirumah dan dikantor.
Pembelajaran merupakan akumulasi dari berbagai proses belajar, baik formal maupun informal dari waktu ke waktu.
Karakteristik utama mobile learning adalah portabilitas dan mobilitas sehingga proses pembelajaran lebih efisien dari segi waktu dan biaya.
Definisi Framework
Menurut Björemo dan Trninić (2010), dalam konteks pemrograman
software, framework adalah sekumpulan prewritten code atau library yang mempunyai fungsi yang umum dimiliki oleh class dari aplikasi/software, yang digunakan sebagai dasar atau kerangka untuk membangun sebuah software[3].
Library mempunyai fungsi dalam lingkup kecil, sedangkan Framework mempunyai lingkup yang lebih besar. Framework dibuat dengan tujuan agar dalam pengembangan software, programmer tidak perlu membuat fitur/fungsi
5
5
atau struktur yang umum terdapat dalam sebuah aplikasi secara berulang-ulang, sehingga dapat mempercepat pengembangan aplikasi tersebut.
Hybrid Apps
Hybrid Apps adalah aplikasi yang dibuat dengan teknologi web (HTML5, CSS, Java Script), namun berjalan pada nativelevel dengan perantara abstraction layer. Karena berjalan pada native level, maka hybrid apps dapat mengakses fitur serta API dari sistem operasi, yang tidak bisa diakses oleh sebuah aplikasi web. Selain itu hybrid apps dapat didistribusikan melalui app store[4].
Tabel 1 Perbandingan antara Native apps, Web Apps dan Hybrid Apps
(IBM, 2013)
Feature Native app Hybrid app Web app
Development language Native only Native and web
or web only
Advanced graphics High Medium Medium
Upgrade flexibility Low (Always by
way of app
Installation experience High (From app
store)
Tabel 1 menunjukan bahwa aplikasi hybrid mempunyai kelebihan yaitu pada efisiensi dan kemudahan pembuatan code program serta kemudahan distribusi program karena dapat didistribusikan melalui app store dari masing-masing
platform.
Ionic Framework, Cordova dan AngularJS
Pengembangan aplikasi hybrid membutuhkan tool seperti cordova.Cordova
adalah sekumpulan API yang memungkinkan pengembang aplikasi untuk mengakses fitur native device seperti kamera, audio, accelerometer dan lain-lain melalui javascript. Dengan menggunakan Cordova maka pengembang tidak perlu menggunakan bahasa pemrograman dari app developer, melainkan menggunakan teknologi web. Cordova mengkompilasi HTML, Javascript dan css menjadi native app yang multi platform. Pengembangkan aplikasi tersebut menggunakan front-end UI framework seperti ionic. Ionic menyediakan berbagai komponen UI,
6
adalah AngularJS. AngularJS adalah web application framework yang dikelola oleh Google dan komunitas dibawah lisensi MIT.
Angular mempunyai module yaitu tempat untuk mendeklarasikan komponen
angular yang berlaku secara global, baik itu core angular maupun komponen pihak ketiga, seperti plugin dan lain-lain. Dua komponen utama angular yang dipakai, yaitu controller dan service diregistrasikan pada angular.module.
Konfigurasi sistem sistem navigasi dideklarasikan pada module. Ionic framework
memakai sistem navigasi AngularUI Router, yang mengelola setiap tampilan dalam bentuk state. Dalam bentuk state, user interface tidak terikat dengan URL, serta mendukung tampilan paralel sehingga beberapa template dapat di render
dalam satu halaman. Data dapat disisipkan kedalam state sehingga membuat navigasi lebih fleksibel. Setiap state diatur melalui sebuah controller dengan menggunakan AngularJS.
Controller berisi kode yang mengendalikan directive. Untuk
menghubungkan antara controller dan view, angular menggunakan scope. Scope
adalah object yang merujuk pada model. Data binding antara controller dan view
bersifat dua arah, artinya jika terjadi perubahan data pada scope di controller
maka data pada model di view akan berubah secara otomatis, begitu juga sebaliknya jika data pada model berubah maka data pada scope akan berubah. Komponen ketiga yaitu service, terdiri dari factory dan service. Sebuah factory
adalah fungsi yang mengembalikan berbagai macam object. Object yang dikembalikan oleh factory diakses melalui controller dengan menginjeksikan
dependency ke factory. Factory dipakai untuk membaca data dari file JSON dan mengembalikannya dalam bentuk object, yang kemudian dapat diakses dari
controller. Agar dapat mengakses object pada factory maka controller harus memanggil fungsi yang mengolah data dalam factory. Sebuah service menyimpan referensi ke object, sehingga object pada service dapat gunakan secara langsung pada controller. Jika sebuah scope menggunakan object dari service dan terjadi perubahan data pada scope tersebut, maka data pada service akan ikut berubah, dengan kata lain komunikasi antara scope dan service bersifat dua arah. Object
pada service dapat diakses dari controller yang berbeda tanpa merubah kondisi terakhir object tersebut. Sifat ini dimanfaatkan untuk menyimpan option atau konfigurasi selama aplikasi berjalan. Untuk penyimpanan data secara lokal pada
device, HTML5 menyediakan fitur localstorage. Localstorage hanya dapat menampung data dalam ukuran kecil.
CSS
CSS atau cascading style sheets adalah bahasa style sheet yang digunakan untuk mengatur tampilan elemen HTML. Secara default ionic telah menyediakan komponen CSS yang reusable dan customable, namun developer dapat
men-overwrite style dari komponen-komponen tersebut dengan CSS. Pada CSS3 terdapat perbedaan dalam memuat elemen-elemen yang baru yang belum distandarisasi oleh world wide web consortium. Setiap webbrowser menggunakan
prefix yang berbeda untuk memuat elemen-elemen tersebut, prefix –moz- untuk
7
disediakan secara default, namun pengembang dapat men-overwrite style dari komponen css dari ionic.
JSON
JSON atau Javascript Object Notation adalah adalah sintaks yang digunakan dalam penyimpanan dan pertukaran data. JSON merupakan bagian dari bahasa pemrograman Javascript, namun format JSON adalah dalam bentuk teks dan dapat dibaca sebagai format data melalui berbagai bahasa pemrograman. Secara garis besar JSON terdiri dari dua struktur, yang pertama terdiri dari koleksi object,
struct, hash table, dan lain-lain. Struktur kedua terdiri dari array, ordered list, numbers, dan lain-lain. Object menyimpan pasangan string/value, sebagai contoh “nama : budi”, string “nama” mempunyai value “budi”. JSON dipakai sebagai format pertukaran data pada teknologi website modern. Penyimpanan object dapat dilakukan dalam bentuk array dan nested object, sehingga kita dapat mengakses
record tertentu dalam array dengan menggunakan index. Berikut adalah contoh format JSON.
Gambar 1 Contoh JSON
Pada gambar 1 object “employee” mempunyai tiga record yang terdiri dari
8 3. Metode Penelitian
Metode penelitian digambarkan melalui diagram flowchart berikut ini
Gambar 2Flowchart alurpenelitian
Tahapan-tahapan penelitian yang dilakukan adalah sebagai berikut :
1. Tahapan pertama adalah pengumpulan data atau user requirement dari sistem yang akan dibuat. Versi ionic framework yang dipakai adalah beta-14 dengan
code name magnesium-mongoose. Versi ini mendukung ios versi 7 keatas serta android versi 4.1 keatas. Materi pembelajaran bahasa Jepang diambil dari seri buku Minna no Nihongo 1, yaitu Minna no Nihongo 1 Honsatsu, Minna no Nihongo 1 Kanji, Minna no Nihongo 1 Tasuku25 dan Minna no Nihongo 1 Translation and Grammatical notes. Buku Minna no Nihongo 1 merupakan bagian pertama dari seri buku Minna no Nihongo, yang terdiri dari beberapa tingkatan, dimulai dari tingkat beginner hingga tingkat upper intermediate. Penulis mengharapkan setelah mempelajari materi dalam buku ini, maka pelajar akan mempunyai landasan yang bagus dalam bahasa Jepang sehingga mudah untuk melanjutkan ke tingkat yang lebih sulit.
9
kalimat, contoh kalimat, percakapan serta tata bahasa beserta contoh masing-masing. Setelah mempelajari materi, user dapat mencoba menyelesaikan soal-soal review. Setiap pelajaran hanya dapat diakses setelah review dari pelajaran sebelumnya diselesaikan dengan jumlah poin tertentu. Daftar kosakata terdiri dari seluruh kosaka kata yang dipakai dari pelajaran satu hingga pelajaran dua puluh empat, beserta arti kata dan contoh penggunaan dalam kalimat serta dapat dikelompokan sesuai dengan pelajaran. Daftar huruf terdiri dari huruf hiragana dan katakana serta huruf kanji yang berjumlah 220 huruf yang diambil dari buku Minna no Nihongo 1 Kanji.
Setiap huruf mempunyai cara baca Kun dan On beserta contoh penggunaan dan cara penulisan masing-masing huruf.
2. Tahap berikutnya adalah perancangan sistem. Metode yang akan digunakan dalam penelitian ini adalah metode protoyping. Metode protopying adalah metode perancangan dengan membuat prototype atau model sederhana dari aplikasi yang akan dikembangkan. Metode ini digunakan karena user
biasanya tidak dapat mendeskripsikan secara lengkap mengenai kebutuhan atau spesifikasi produk yang akan dibuat, sehingga dalam proses pengembangan dilakukan perbaikan berulang-ulang sesuai kebutuhan user. Metode pengembangan ini juga disebut rapid application design(RAD)
(O’brien, 2005)[16].
Perancangan dibagi dalam dua bagian yaitu perancangan model fungsi aplikasi dengan menggunakan use case diagram dan perancangan database
aplikasi.
Gambar 3Use case diagram
Gambar 1 menunjukan bahwa user dapat melakukan empat hal yaitu belajar, mencari aksara dan kosakata, menggunakan flashcard dan me-review
pelajaran. Pada belajar terdiri dari 4 bagian yaitu bagian kosakata, pola kalimat, percakapan dan grammar. User dapat mendengar bunyi pengucapan dari kosakata dan contoh kalimat dengan men-hold kalimat atau kata tersebut. Fungsi untuk mendengar pengucapan menggunakan sistem text to speech.
Pada bagian cari aksara dan kosakata terdapat tiga sub bagian yaitu daftar aksara hiragana dan katakana, daftar aksara kanji dan daftar kosakata. User
10
rincian aksara yang terdiri dari cara penulisan, arti dan contoh penggunaanya dalam kata, dan rincian kosakata yang terdiri dari arti dan contoh penggunaan kata dalam kalimat. Bagian flashcard terdapat empat menu yaitu menu
hiragana, katakana, kanji dan kosakata. Untuk menghafal kosakata dan aksara menggunakan flashcard, kumpulan kartu yang terdiri dari dua bagian, bagian depan terdiri dari item yang ingin dihapalkan dan bagian belakang terdiri dari informasi secara rinci yang berhubungan item tersebut, seperti arti kata, cara penulisan dengan huruf latin dan lain-lain. Bagian review terdiri dari dua sub bagian yaitu review arti kata dalam bahasa indonesia dan review
dan review kata dalam bahasa Jepang. Pada bagian review user dapat memasukan username yang diinginkan dan dapat melihat poin yang didapat dari penyelesaian review.
Proses pembelajaran dapat digambarkan seperti pada gambar berikut.
Gambar 4Activity diagram pembelajaran
Pembelajaran dimulai dengan mempelajari materi pelajaran yang terdapat pada tab “Lesson”. Setelah mempelajari pelajaran, user
menyelesaikan review untuk pelajaran satu. Jika user mendapat poin yang cukup maka dapat melanjutkan ke pelajaran selanjutnya.
Tahapan selanjutnya adalah perancangan database dengan menggunakan JSON. Ada enam database yang akan dibuat yaitu database kanji, katakana, hiragana, verbs, lessons dan review. Database kanji, hiragana dan katakana berisi ketiga aksara Jepang. Aksara katakana dan
hiragana mempunyai atribut id, nama, romaji serta cara penulisan. Aksara
11
yang dipakai pada pelajaran satu sampai dua puluh empat. Kosakata mempunyai atribut arti dan contoh kalimat. Database lessons berisi semua pelajaran sebanyak dua puluh empat pelajaran. Database review berisi materi yang dipakai untuk me-review pelajaran. Item review mempunyai atribut id, pertanyaan, pilihan jawaban dan jawaban. Urutan pertanyaan dan pilihan jawaban masing-masing akan diacak setiap kali melakukan review. Profil
user disimpan secara lokal dalam device dengan menggunakan fitur HTML5
yaitu localstorage. Satu profile hanya bisa dipakai pada satu device.
3. Tahapan berikut adalah implementasi sistem. Implementasi kode program menggunakan notepad++ sebagai development tool dan percobaan aplikasi menggunakan fitur ionic lab, yang mensimulasikan device pada web browser. 4. Tahapan keempat adalah pengujian aplikasi. Pengujian pada mobile device
menggunakan metode black box testing oleh independent tester. Metode ini dilakukan untuk menguji fungsionalitas dari aplikasi, terutama input dan
output. Pengujian selanjutnya terhadap kepuasan user dengan sample sebanyak dua puluh orang. User mengisi angket sesuai dengan tingkat kepuasan saat menguji coba program. Hasil pengujian dihitung dengan menggunakan skala likert[5]. Tingkat kepuasan adalah SP = sangat puas dengan nilai skor likert 5, P = puas dengan nilai skor likert 4, N = netral dengan nilai skor likert 3, KP = kurang puas dengan nilai skor likert 2, TP = tidak puas dengan nilai skor likert 1. Skor tiap nomor soal dihitung dengan dengan rumus ( total jumlah pemilih x nomor angka skor likert). Rumus :
index % = (Total skor/Y) * 100.
Y = Skor tertingi likert x total responden Untuk menghitung interpretasi skor, pertama-tama menghitung interval skor
likert dengan rumus :
I = 100/jumlah skor likert = 100/5
= 20
Setelah interval didapat maka interpretasi skor dibagi berdasarkan interval : - 0% – 19,99% = Tidak puas
- 20% – 39,99% = Kurang puas - 40% – 59,99% = Netral - 60% – 79,99% = Puas - 80% – 100% = Sangat puas
12 4. Hasil Pembahasan dan Implementasi
Tahapan pertama dalam implementasi adalah mendeklarasikan
stateProvider yang merupakan sistem navigasi aplikasi sistem. stateProvider
dideklarasikan di angular.module karena bersifat global.
Gambar 5State Abstrak untuk tab
Gambar 1 menjelaskan bahwa state abstrak dibuat untuk tab dengan menggunakan $stateProvider. Pada saat aplikasi dijalankan $stateProvider akan mencari URL “/” dan mencocokan dengan state “index” kemudian me-load
halaman “tabs.html” ke directive ionNavView
Gambar 6 Deklarasi state
Dekalarasi state pada gambar 2 menjelaskan bahwa halaman “lessons.html” terikat pada state “tab.lessons” sehingga pada saat router tertuju pada state ”tab.lessons” maka sistem akan menampilkan halaman “lessons.html”. Jika state yang dituju tidak terdapat pada deklarasi state maka sistem akan mengalihkan ke alamat default “/tab/lessons” dengan menggunakan kode “$urlRouterProvider.otherwise('/tab/lessons')”. Halaman “lesson.html” dikontrol melalui controller “LessonCtrl” yang terdapat pada file controller.js dengan menggunakan angularJS. Setiap state mempunyai controller masing-masing, namun dua state dapat memiliki satu controller yang sama.
Dalam aplikasi ini terdapat empat tab, yaitu tab lessons, lists, flashcards dan
review, setiap tab tersebut memiliki view yaitu “tab-lessons” untuk tab lessons,
“tab-lists” untuk tab lists, “tab-flashcards” untuk tab flashcards serta “tab-review” untuk tab review. Setiap halaman turunan dari tab-tab tersebut memiliki view yang sama dengan halaman utama tab, sehingga jika halaman turunan dengan view
“tab-lessons” diakses maka tab “Lessons” akan aktif. Ionic menyimpan history
dari setiap perpindahan state melalui fungsi ionicHistory. Setiap tab mempunyai
history sendiri sehingga perpindahan antar tab tidak akan mempengaruhi history
13
walaupun user berpindah pada beberapa tab, sistem akan menyimpan kondisi navigasi terakhir dalam tab tersebut.
Secara default ionic akan men-cache halaman saat perpindahan navigasi. saat perpindahan tab, scope akan terputus dan ionic akan menyimpan elemen dalam tab sebelumnya didalam DOM, scope akan terhubung kembali saat user kembali ke halaman tersebut dan element pada halaman tersebut akan ditampilkan sesuai dengan kondisi saat sebelum berpindah, termasuk posisi scroll. Sistem
caching akan mempercepat akses pada saat kembali ke halaman sebelumnya setelah berpundah halaman karena tidak perlu me-loadobject berkali-kali. Cache
diatur melalui konfigurasi dalam controller, konfigurasi secara default halaman yang di cache adalah sebanyak sepuluh halaman.
Gambar 7 Konfigurasi
Konfigurasi diatur melalui fungsi ionicConfigProvider. Dalam konfigurasi berbagai aspek dalam aplikasi dapat diatur seperti sistem navigasi ion-nav
termasuk tombol “back”, posisi dan style tab, device, animasi dan caching. Konfigurasi berlaku secara global namun dapat diatur konfigurasi secara khusus untuk masing-masing controller didalam controller tersebut.
Setelah mendeklarasikan state kemudian membuat controller untuk setiap state. Di dalam controller ini terdapat semua fungsi yang diperlukan untuk mengendalikan template dari state. Untuk mengakses fungsi-fungsi yang disediakan oleh ionic dan angular serta fungsi lain dari plugin maka perlu diinjeksikan dependensinya.
Gambar 8Controller
Gambar 4 adalah controller dari state “tab.lessons”. Controller tersebut menggunakan predefinedfunction atau fungsi yang sudah disediakan oleh angular,
maka fungsi tersebut diinjeksikan pada controller. Dalam menginjeksi dependensi menggunakan prefix $, sebagai contoh untuk menginjeksi scope adalah dengan menggunakan $scope. Setelah diinjeksikan maka fungsi tersebut dapat diakses melalui controller “LessonsCtrl”. Selain scope beberapa predefined function dari
14
state. filter digunakan untuk menyusun ulang sebuah array dengan kondisi atau urutan tertentu dan mengembalikannya sebagai array baru. Filter juga digunakan pada directive “ng-repeat" pada template HTML. Fungsi dari stateParams adalah untuk mengakses parameter dari URL. Dengan menggunakan navigasi UI Router memungkinkan untuk menyisipkan sebuah value saat navigasi ke sebuah state.
Gambar 9 Injeksi value melalui UI Router
Pada saat navigasi dari state “tab.lessons” ke state “tab.lesson-detail” nilai dari “lesson.id” diinjeksikan ke variable “lessonId” yang terdapat pada parameter URL dari state “tab.lesson-detail”.
Gambar 10State “tab.lesson-detail”
stateParam akan mengakses parameter “lessons” dan “lessonId” dari URL
“/lesson/:lessonId”. Untuk mengakses parameter “lessonId” secara spesifik menggunakan “$stateParam.lessonId”. Setiap pelajaran mempunyai id unik, dan variable “lessonId” digunakan untuk mengambil data pelajaran secara spesifik dari daftar pelajaran pada halaman “lesson.html” dan menampilkannya pada halaman “lesson-detail.html”. Fungsi timeout adalah memberikan delay, fungsi
timeout akan dieksekusi kemudian di-resolve setelah waktu yang ditentukan dalam mili detik. Fungsi ini dipakai untuk memberikan jeda saat perpindahan halaman slide box yang digunakan untuk menampilkan flashcard. localstorage
merupakan fitur dari HTML5 dan digunakan untuk menyimpan data user secara lokal pada chace browser. localstorage memiliki keterbatasan menyimpan data yaitu 5MB, sehingga hanya dipakai untuk menyimpan data yang kecil. Dalam menyimpan data di localstorage menggunakan key atau kata kunci untuk setiap
value atau object yang disimpan. State berfungsi untuk mengontrol navigasi UI Router melalui controller.
Fungsi-fungsi dari ionic yang digunakan adalah ionicSideMenuDelegate, ionicModal, ionicPopover, ionicSlideBoxDelegate, ionicPopup dan ionicHistory. ionicSideMenuDelegate mengontrol directive ionSideMenus. Metode yang dipanggil pada controller akan berlaku untuk semua side menu,yang dalam aplikasi ini hanya terdapat satu side menu pada tab “lists”. ionicModal memanggil
modal, sebuah pane yang berisi konten yang ditampukan secara sementara pada
15
Gambar 11ionModal
Gambar 7 merupakan ionModal yang berisi tampilan detil dari menu kanji
pada tab lists. ionModal menutupi view yang sedang aktif yaitu view “tab-lists”. Untuk memanggil modal digunakan method “show()”, setelah modal ditampilkan dan ditutup maka method “remove()” harus dipanggil agar modal yang sudah dipanggil dihapus dari memori sehingga tidak terjadi memory leak saat modal
dipanggil secara berulang kali. ionicPopover memanggil komponen popover.
Sama seperti ionicModal, untuk memangil popover menggunakan method “show” dan harus memanggil method “remove()” setelah menggunakan popover.
Gambar 12ionPopover
Gambar 10 merupakan ionPopover yang terdapat pada tab flashcard, yang berisi pengaturan untuk menampilkan flashcard. ionicSlideBoxDelegate
mengontrol directive ionSlideBox yang merupakan kontainer multi halaman dimana setiap halaman dapat di swipe atau di drag melalui pager. ionSlideBox
dipakai untuk membuat flashcard karena sifatnya yang multi halaman dan dapat di swipe. ionicPopup mengontrol ionPopup. Perbedaan antara ionPopover dan
16
merupakan bagian dari sistem navigasi ionic yang menyimpan history selama user
melakukan navigasi, dan setiap tab disimpan secara paralel.
Selain predefined function dari angular dan ionic juga dipakain plugin dari
ngCordova, yaitu cordovaMedia. Cordova media mempunyai kemampuan untuk merekam dan memutar kembali file audio pada device. Plugin ini dipakai untuk menjalankan file audio. Hal ini dikarenakan device seperti android tidak dapat menjalankan fitur HTML5 audio secara langsung sehingga membutuhkan library
tambahan untuk menjalankan file audio dari sistem text to speech. Sistem text to speech yang dipakai adalah dari google translate text to speech API dengan menginjeksikan teks yang akan dikonversi pada URL
“http://translate.google.com/translate_tts?ie=UTF-8&tl=ja&q=. Parameter “ie” adalah format encoding teks yaitu UTF-8, “tl” adalah bahasa yang dipakai yang dalam hal ini adalah “ja” yang merupakan kode bahasa jepang dan parameter “q” yaitu query teks yang akan dikonversi ke audio.
Aplikasi mengirim request berupa teks yang akan dikonversi melalui injeksi
URL ke server google, kemudian server mengembalikan hasilnya dalam bentuk file mp3. API ini memiliki keterbatasan yaitu 100 karakter untuk setiap request, jika aplikasi mengirimkan request lebih dari 100 karakter atau request yang tidak normal maka server akan mengembalikan nilai error.
Hasil implementasi database terdiri dari enam file JSON yaitu “hiragana.json”, “katakana.json”, “kanji.json”, “lessons.json”, “review.json” dan “verbs.json”. Database hiragana dan katakana mempunyai struktur yang sama yaitu terdiri dari empat number: id dan tiga string name, romaji dan image. Dalam setiap record dalam database terdapat number id menyimpan angka unik yang akan dipakai saat navigasi ke data detail setiap huruf. String nama dan romaji menyimpan nama setiap huruf dalam bentuk hiragana dan huruf latin. String image menyimpan gambar tentang cara penulisan huruf. Database kanji berisi data tentang huruf kanji. Dalam database kanji terdapat number id, string code, name, kunyomi, onyomi, meaning, image dan example. String code berisi kode pelajaran yang dicocokan dengan menu pelajaran, dan menampilkan seluruh
record dari pelajaran yang dipilih. String name merupakan nama huruf dalam bentuk kanji, string kunyomi dan onyomi berisi cara kun-yomi dan on-yomi, string
meaning berisi arti huruf kanji, string image berisi link ke gambar cara penulisan huruf dan string exampleberisi contoh pemakaian huruf kanji dalam sebuah kata.
Database lesson berisi data dari semua pelajaran. Database lessons terdiri dari
number id, string name yang berisi nama pelajaran, string image yang berisi
avatar pada menu pemilihan pelajaran, string pattern yang berisi pola kalimat,
string exampleSentences yang berisi contoh kalimat, string conversations yang berisi percakapan dan string grammars yang berisi grammar. Database review terdiri dari number id, string name yang merupakan foreign key untuk database
lessons, string kotoba dan kotoba2 yang masing-masing berisi materi untuk
review bagian pertama dan kedua. Setelah diimplementasikan dan sebelum dipakai, semua database di validasi secara online melalui website
17
Gambar 13Factory “Lessons”
Untuk membaca data dari file JSON menggunakan fungsi http.get dari
angular. Setelah data dari file JSON dibaca maka terdapat dua fungsi lagi untuk mengelola data tersebut. Fungsi pertama yaitu “lessons.all()” yang mengembalikan semua record dari array JSON. Fungsi kedua “lessons.get()” hanya mengembalikan record tertentu sesuai dengan index yang diinginkan. Index
tersebut dimasukan sebagai parameter saat pemanggilan fungsi “lessons.get()” melalui controller. Factory juga diinjeksikan seperti predefined function agar dapat diakses melalui controller.
Setelah semua rancangan diimplementasikan, tahapan terakhir adalah pengujian sistem. Pengujian pertama adalah pengujian aplikasi pada mobile device. Pengujian sistem bertujuan untuk mengetahui apakah sistem yang dibuat sudah sesuai dengan tujuan pembuatan dan dapat berjalan dengan baik. Sistem diuji pada smartphone android LG3 stylus dengan android versi 4.4.2 dan iPad mini
18
Tabel 2 Hasil pengujian pada mobile device
No Skenario pengujian Kasus yang
diujikan
2 Pencarian kosakata Masukan
19
Tabel 3Hasil uji coba kepuasan user terhadap aplikasi
Soal SP P N KP TP Skor Tingkat kepuasan (%)
1 5 13 2 - - 83 83
5 20 100 = 83%
2 2 11 3 4 - 71 71
5 20 100 = 71%
3 3 9 5 3 - 72 72
5 20 100 = 72%
4 9 11 - - - 89 89
5 20 100 = 89%
Total 19 42 10 7 - 315 315
4 100 100 = 78.8%
Dari hasil pengujian pada tabel 3 dengan skor 78.8%, dapat disimpulkan bahwa user merasa puas terhadap aplikasi media pembelajaran bahasa Jepang “Nihongo no Mori”.
5. Simpulan
Berdasarkan hasil penelitian dan pembahasan aplikasi media pembelajaran bahasa Jepang dengan menggunakan ionic framework, dapat disimpulkan bahwa
ionic framework dapat digunakan dalam pengembangan aplikasi hybrid pada platform android dan ios. Namun dalam pengembangan aplikasi hybrid dengan menggunakan ionic framework, aplikasi membutuhkan library tambahan untuk mengakses fitur native dari device, seperti fitur audio. Hal ini karena framework
tidak dapat mengakses API native secara langsung sehingga membutuhkan plugin
untuk dapat mengaksesnya. Beberapa komponen seperti CSS harus diprogram spesifik untuk masing-masing device karena setiap platform menggunakan
browser berbeda sehingga membutuhkan beberapa kode yang berbeda dengan
20 6. Daftar Pustaka
[1]. Arsyad,Azhar. (2011) Media Pembelajaran. Jakarta: PT Raja Grafindo Persada.
[2]. Badiu, Raluca. (2013). Mobile: Native Apps, Web Apps, Hybrid Apps.
http://www.nngroup.com/articles/mobile-native-apps/. Diakses tanggal 16 Juli 2014.
[3]. Björemo, Martin & Trninić, Predrag. (2010) Evaluation of web application
frameworks. Evaluation of web application frameworks with regards to rapid development. Tesis Master pada Department of Computer Science and Engineering Chalmers University of Technology: Chalmers University of Technology &University of Gothenburg.
[4]. IBM. (2012) Native, web or hybrid mobile-app development [internet], USA, IBM corporation. Diakses pada 17 Juli 2014 dari :
http://public.dhe.ibm.com/software/in/events/softwareuniverse/resources/Na tive_web_or_hybrid_mobile-app_development.pdf.
[5]. Likert, R. (1932). A technique for the measurement of attitudes. Archives of psychology.
[6]. Lubbers, Peter Albers & Brian. Salim, Frank. (2010) ”Overview of HTML5”
inPro HTML5 Programming, 1st ed. New York, Apress. [7]. (1998). Minna no nihongo 1Honsatsu . Tokyo: 3A Corporation. [8]. (1998). Minna no nihongo1 Kanji. Tokyo: 3A Corporation. [9]. (1998). Minna no nihongo 1 Tasuku25. Tokyo: 3A Corporation.
[10].(1998). Minna no nihongo 1 Translation & Grammatical notes . Tokyo: 3A Corporation.
[11]. Native, HTML5, or Hybrid: Understanding Our Mobile Application
Development Options.
https://developer.salesforce.com/page/Native,_HTML5,_or_Hybrid:_Under standing_Your_Mobile_Application_Development_Options.Diakses tanggal 16 Juli 2014.
[12].Quinn, C. (2000). mLearning: Mobile, wireless, in-your-pocket learning. LiNE Zine, 2006.
[13].Redda, Yonathan Aklilu. (2012) Cross platform Mobile Applications Development. Tesis Master pada Norwegian University of Science and Technology.
[14].Sharples, M., Arnedillo-Sánchez, I., Milrad, M., & Vavoula, G. (2009). Mobile learning (pp. 233-249). Springer Netherlands.
[15]. Start Building with Ionic!. http://ionicframework.com/docs/.Diakses tanggal 17 Juli 2014.
