Institutional Repository | Satya Wacana Christian University: Aplikasi Hybrid Media Pembelajaran Bahasa Jepang Dengan Menggunakan Ionic Framework

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
SALATIGA
2015

i

ii

iii

iv

v

vi

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)
2)
3)

Mahasiswa Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana
Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana
Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana

1

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 favorit 1 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-mahasiswa-indonesia-kuliah-ke-luar-negeri/

ht t p:/ / www.mext .go.jp/ a_m enu/ kout ou/ ryugaku/ boshu/ 1319066.ht m
3
ht t p:/ / www.jasso.go.jp/ st udy_j/ scholarships_e.ht ml
2

2

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 ArnedilloSá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

ht t p:/ / www.ne.se/ språk/ världens-100-st örst a-språk-2010

3

menetapkan sebanyak 2136 huruf kanji yang dipakai sehari-hari 5 . 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]. Mobile learning 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

ht t p:/ / www.jref.com/ japanese/ joyo-kanji/

4

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 native level 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
Development language

Native app
Native only

Code portability and
optimization
Access device-specific
features
Leverage existing
knowledge
Advanced graphics
Upgrade flexibility

Installation experience

Web app
Web only

None

Hybrid app
Native and web
or web only
High

High

Medium

Low

Low

High

High

High
Low (Always by
way of app
stores)
High (From app
store)

Medium
Medium (Usually
by way of app
stores)
High (From app
store)

Medium
High

High

Medium (By way
of mobile
browser)

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 frontend UI framework seperti ionic. Ionic menyediakan berbagai komponen UI,
layout, directive, dan komponen lain seperti yang dapat digunakan jika
menggunakan native SDK pada ios dan android. Komponen-komponen tersebut
dikontrol melalui controller dengan menggunakan javascript yang dalam hal ini

5

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 menoverwrite 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 web browser menggunakan
prefix yang berbeda untuk memuat elemen-elemen tersebut, prefix –moz- untuk
browser Mozilla firefox, -o untuk browser opera, -ms untuk internet explorer dan
-webkit untuk chrome dan safari. Tampilan CSS pada ionic framework telah

6

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
string “firstName” dan “lastName” dan masing-masing string mempunyai value.

7

3. Metode Penelitian
Metode penelitian digambarkan melalui diagram flowchart berikut ini

Gambar 2 Flowchart alur penelitian
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.
Materi pembelajaran yang dirangkum terdiri dari tiga bagian utama
yaitu materi belajar, daftar kosakata dan aksara serta review. Materi belajar
terdiri dua puluh empat pelajaran, yang masing-masing terdiri dari pola

8

2.

kalimat, contoh kalimat, percakapan serta tata bahasa beserta contoh masingmasing. Setelah mempelajari materi, user dapat mencoba menyelesaikan soalsoal 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.
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 3 Use 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
dapat mencari aksara atau kosakata dengan memasukan kata kunci pada
masing-masing bagian. Pada daftar aksara dan kosakata user dapat melihat

9

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 4 Activity 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
kanji mempunyai atribut id, kode, nama, kunyomi, onyomi, cara penulisan dan
contoh pemakaian huruf dalam kata. Database verbs berisi daftar kosakata

10

3.

4.

5.

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.
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.
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

Tahapan terakhir adalah pengambilan kesimpulan terhadap hasil penelitian.

11

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 5 State 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
masing-masing tab. Ionic dapat mengelola beberapa history sekaligus, sehingga

12

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-load object 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 8 Controller
Gambar 4 adalah controller dari state “tab.lessons”. Controller tersebut
menggunakan predefined function 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
angular yang digunakan adalah filter, stateParams, timeout, localstorage dan

13

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 10 State “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
view yang sedang aktif.

14

Gambar 11 ionModal
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 12 ionPopover
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
ionPopup adalah pada ionPopup user harus merespon sebelum melanjutkan
penggunaan aplikasi, sedangkan pada ionPopover user tidak diharuskan untuk
merespon popover untuk melanjutkan penggunaan aplikasi. ionicHistory

15

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 example berisi 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
http://jsonlint.com/. Untuk mengakses database melalui controller, maka
digunakan factory dari angular yang mengembalikan data dalam bentuk object.

16

Gambar 13 Factory “ 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
dengan sistem operasi ios 8.1.

17

Tabel 2 Hasil pengujian pada mobile device
No

Skenario pengujian

Kasus yang Hasil yang
diujikan
diharapkan

1

Men-hold pada
item daftar
kosakata

Kosakata
pelajaran 1

2

Pencarian kosakata

Masukan
kata kunci :
sensei

3

Flashcard

Kosakata
pelajaran 1

4

Menyelesaikan
review

Pelajaran 1

5

Mengganti
user

Audio yang
dihasilkan
sesuai
dengan item
yang dihold
Sistem akan
menampilkan
hasil
kosakata
先生
Flashcard
akan memuat
semua
kosakata
pada
pelajaran 1
Item
pelajaran 2
akan dapat
diakses

nama Masukan
Nama user
nama
: akan berubah
“testuser”
dari default
“user”
menjadi
“testuser”

Hasil
pengujian

Kesimpulan

Audio sesuai Valid
dengan item
yang dihold
Hasil yang
ditampilkan:
先生

Valid

Valid
Semua
kosakata
pelajaran 1
termuat
pada
flashcard
Item
Valid
pelajaran 2
dapat
diakses
Nama user Valid
berubah
menjadi
“testuser”

Dari hasil pengujian pada device ios dan android menunjukan bahwa
fungsi-fungsi yang diujikan pada aplikasi bekerja sesuai dengan yang diharapkan
dan dapat berjalan dengan baik pada kedua platform. Pengujian berikutnya untuk
mengetahui kepuasan user terhadap aplikasi dengan menggunakan skala likert,
dengan sample sebanyak dua puluh orang mahasiswa Universitas Kristen Satya
Wacana.

18

Tabel 3 Hasil uji coba kepuasan user terhadap aplikasi
Soal
1

SP
5

P
13

N
2

KP
-

TP
-

Skor
83

Tingkat kepuasan (%)
83
5 20

2

2

11

3

4

-

71

71
5 20

3

3

9

5

3

-

72

72
5 20

4

9

11

-

-

-

89

89
5 20

Total

19

42

10

7

-

315

315
4 100

100 = 83%
100 = 71%
100 = 72%

100 = 89%
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
platform yang lain.

19

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”
in Pro 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.
[16]. O'brien, J. A., & Marakas, G. M. (2005). Introduction to information
systems(Vol. 13). McGraw-Hill/Irwin.

20