BAB IV IMPLEMENTASI SISTEM M-LEARNING
4.1 Kebutuhan Implementasi Untuk membangun sistem m-learning ini, perangkat utama yang digunakan adalah BREW SDK 3.1.5 dengan builder Microsoft Visual C++ 6 dan GNU ARM compiler. Tool-tool lain yang ada di SDK yang juga digunakan yaitu BREW MIF Editor untuk membuat dan memodifikasi file MIF, BREW Resource Editor untuk membuat file yang berisi resource yang digunakan dalam aplikasi, BREW Compressed Image Tool untuk membuat file gambar berformat .bci, BREW Simulator untuk mensimulasikan aplikasi, dan BREW Apploader untuk meng-upload aplikasi ke dalam perangkat. Sebagai tambahan, untuk membuat dan mengedit gambar-gambar digunakan juga aplikasi Adobe Photoshop.
4.2 Implementasi Modul Pembelajaran Sesuai dengan beberapa spesifikasi dan hasil survey dalam analisis kebutuhan, yaitu pengguna dapat dikenai biaya tambahan untuk mengakses fitur tertentu (52%), produk menggunakan bahasa Inggris sebagai bahasa pengantar (84%), pengaksesan setiap menu dilakukan dengan cepat (94%), produk memiliki ukuran yang tidak terlalu besar (88%), dan produk akan mampu menampung modul-modul tambahan (90%), maka diambil keputusan bahwa modul-modul pembelajaran akan dibuat dengan format HTML (Hyper-Text Markup Language) yang mudah diakses, mudah dimodifikasi dan mudah untuk dilakukan penambahan modul (tidak perlu memodifikasi source code aplikasi). Modul-modul yang ada juga akan dibuat dengan bahasa Inggris sebagai bahasa pengantar. Di sisi konektivitas, modul-modul utama disimpan di dalam perangkat dan fitur-fitur tambahan seperti suara disimpan di server yang dapat diunduh melalui aplikasi.
41
Untuk menampilkan modul yang berupa file HTML, digunakan interface BREW IFile, IFileMgr, dan IHtmlViewer. Interface IFile dan IFileMgr digunakan untuk membuka dan membaca file dan IHtmlViewer digunakan untuk menampilkan format HTML. Ketiga interface tersebut diinstansiasi terlebih dahulu oleh fasilitas CreateInstance yang ada di dalam IShell dan dibuat suatu fungsi untuk menampilkan setiap halaman modul. Pseudocode fungsi untuk menampilkan halaman modul adalah sebagai berikut: void DisplayPage(benkyo* pMe, const char *pURL) { 1. Menonaktifkan setiap interface yang masih aktif dan meng-update layar 2. Mengaktifkan interface IHtmlViewer 3. Menyimpan nama file modul yang akan dibuka 4. Membuka file dengan interface IfileMgr_OpenFile if(File berhasil dibuka) { 5. Menampilkan halaman dengan IHTMLVIEWER_LoadStream 6. File ditutup } else { 7. Tampilkan pesan error } }
4.2.1
Modul Pembelajaran Hiragana dan Katakana
Modul pembelajaran huruf dasar terdiri dari pembelajaran huruf Hiragana dan Katakana yang berisi pengenalan setiap huruf yang ada beserta cara penulisan menggunakan huruf-huruf tersebut. Setiap huruf ditampilkan dengan bentuk huruf dan cara penulisannya, cara pembacaan beserta contoh kata dan artinya. Cara penulisan setiap huruf ditunjukkan dengan gambar bergerak atau animasi. Cara pembacaan huruf diberikan melalui file audio / suara. File audio ini tidak disimpan di dalam perangkat, melainkan di server. Untuk mendengarkannya, file yang bersangkutan harus diunduh terlebih dahulu dari server.
42
Gambar 4.1 Implementasi Pembelajaran Hiragana dan Katakana
4.2.2
Modul Pembelajaran Kanji
Modul pembelajaran Kanji menampilkan huruf-huruf Kanji Jepang yang dikelompokkan berdasarkan artinya. Setiap huruf ditampilkan beserta cara pembacaan dan artinya. Karena sistem ini dibuat untuk pembelajaran bahasa Jepang dasar, huruf Kanji yang diperkenalkan dalam modul ini hanya sekitar 100 huruf dari puluhan ribu huruf Kanji yang ada. Selain itu, karena kerumitannya, pengenalan setiap huruf hanya menggunakan gambar diam saja tanpa animasi cara penulisannya.
Gambar 4.2 Implementasi Pembelajaran Kanji
4.2.3
Modul Pembelajaran Struktur Bahasa
Modul pembelajaran struktur bahasa dibagi menjadi submodul-submodul pelajaran sesuai dengan tingkat kesulitannya. Setiap submodul yang ada dibagi menjadi dua bagian, yaitu Vocabulary (perbendaharaan kata) untuk memperkenalkan kata-kata dalam bahasa Jepang beserta artinya, dan Grammar (tata bahasa) yang menjelaskan 43
mengenai pola-pola kalimat dalam bahasa Jepang disertai dengan contoh penggunaannya.
Gambar 4.3 Implementasi Pembelajaran Struktur Bahasa
4.3 Implementasi Fitur-fitur Tambahan 4.3.1
Animasi Langkah Penulisan Huruf
Karena bahasa Jepang merupakan jenis bahasa piktogram yang memiliki huruf sendiri, pembelajaran mengenai cara penulisan huruf-huruf yang ada perlu juga diberikan. Untuk mempermudah, digunakan animasi yang menunjukkan langkahlangkah atau urutan penulisan huruf. Setiap frame yang menunjukkan urutan penulisan dibuat satu per satu dengan aplikasi Adobe Photoshop dan kemudian dianimasikan menjadi format .bci dengan BREW Compressed Image Authoring Tool.
→
→
→
→
→
Gambar 4.4 Langkah-langkah Pembuatan Animasi Huruf
4.3.2
Bunyi Pengucapan
Dalam pembelajaran bahasa, pengucapan juga merupakan suatu hal yang penting. Oleh karena itu, aplikasi yang dibuat ini juga memiliki fitur untuk memainkan file suara yang berisi bunyi pengucapan suatu huruf / kata. Interface BREW yang 44
digunakan untuk memainkan file suara ini adalah IFileMgr, IMedia dan IMediaUtil. Di bawah ini adalah pseudocode fungsi yang dibuat untuk memainkan file suara. void PlaySound(benkyo *pMe, char *pTune) { 1. Memastikan keberadaan file yang akan dimainkan if (Test File sukses) { 2. Membuat struktur data media untuk file suara 3. Memasang file sumber sebagai buffer pada obyek IMedia 4. Memasukkan file ke interface Media if (Create Media sukses) { 5. Mulai memainkan file } else 6. Menampilkan pesan error jika gagal dimainkan } else 7. Menampilkan pesan error jika file tidak ada }
4.3.3
Akses ke Web Server
File-file yang dibutuhkan oleh aplikasi namun tidak mampu disimpan dalam perangkat karena keterbatasan memori akan disimpan dalam server untuk kemudian dipanggil dan diunduh oleh aplikasi. Koneksi ke server ini menggunakan interface BREW IWeb, IWebResp, dan ISource. Interface IWeb dan IWebResp berfungsi untuk membuka koneksi internet dan meminta respon dari server, sedangkan interface ISource berfungsi untuk membaca data dari file yang ada di server dan meng-copy-nya ke dalam perangkat. Pseudocode fungsi untuk melakukan koneksi ke server: static int OpenConnectionToWebsite(benkyo *pMe, *stWebsiteAndPath, char *stFilename) { 1. Melakukan Callback terhadap fungsi OpenConnectionCB 2. Menyimpan alamat web dan nama file yang dituju 3. Membuat alamat lengkap dari file yang dituju 4. Menunggu respon dari alamat yang dituju dengan IWEB_GetResponse(...); 5. Menampilkan pesan bahwa koneksi sedang dilakukan } static { 1. 2. 3. if {
char
void OpenConnectionCB(benkyo *pMe) Mengambil informasi respon dari web dengan IWEBRESP_GetInfo Mengambil kode error yang ada dengan WEB_ERROR_MAP Menampilkan pesan jika terjadi error (WEB_ERROR_SUCCEEDED(...) == FALSE) switch (ErrorCode)
45
{ case ENOMEMORY: //Tampilkan pesan "Error: No Memory" case AEE_NET_ENETDOWN: //Tampilkan pesan "Error: No Network" default: //Tampilkan pesan "Error: Net Error" } } 4. Jika tidak ada error, tampilkan pesan telah terhubung 5. Mengatur pointer sumber pada ISource 6. Jika pointer tidak ditemukan, tampilkan pesan "Can't read web data" 7. Mengambil informasi ukuran file 8. Memeriksa file yang akan diambil di dalam direktori if (Test File sukses) { 9. Jika file sudah ada akan dihapus if (Remove File sukses) { return; } } 10. Membuat file di dalam perangkat sebagai target untuk diisi dengan data yang diambil dari web. 11. Memastikan file sudah terbuat, jika tidak ada, return 12. Melakukan Callback terhadap fungsi ReadFromSource 13. Mendaftarkan callback untuk ISource dengan fungsi ISOURCE_Readable } static void ReadFromSource(benkyo *pMe) { 1. Menampilkan pesan “Reading and saving…” 2. Melakukan pembacaan data dan disimpan dalam buffer dengan ISOURCE_Read 3. Memeriksa progres pembacaan data switch(NumCharsRead) { 4. Jika data sedang tidak dapat dibaca, dilakukan Callback ulang case ISOURCE_WAIT: //callback fungsi 5. Jika data selesai dibaca case ISOURCE_END: // File ditutup // Koneksi ke web ditutup // Menampilkan pesan sukses 6. Jika terjadi error saat pembacaan data
46
case ISOURCE_ERROR: // File fitutup // Koneksi ke web ditutup // Menampilkan pesan error } 7. Data di dalam buffer ditulis ke dalam file target dengan IFILE_Write 8. Melakukan Callback sampai semua data tersimpan }
4.4 Graphical User Interface (GUI) 4.4.1
Logo Aplikasi
Gambar 4.5 Logo Benkyo Logo Benkyo didisain seperti Gambar 4.5. Logo ini menampilkan wajah seseorang menggunakan ikat kepala berbendera Jepang dan wajah yang gembira, dengan tulisan Benkyo berwarna merah di samping kanannya. Makna dari logo ini adalah semangat dan keceriaan untuk belajar bahasa Jepang.
4.4.2
Tampilan Menu
Gambar 4.6 Tampilan Menu Benkyo Benkyo memiliki tampilan menu seperti Gambar 4.6. Menu utama terdiri dari empat 47
bagian, yaitu Kana Learning, Kanji Learning, Lessons, dan Information. Menu yang akan dipilih ditunjukkan dengan warna yang terang.
48
