Buku Pengembangan Aplikasi Bahan Ajar d

(1)

(2)

(3)

Pengembangan

Aplikasi Bahan Ajar

Dalam Perangkat Bergerak

(4)

Pengembangan Aplikasi Bahan Ajar dalam Perangkat Bergerak © JARC Seamolec, 3

Hak cipta dilindungi oleh undang-undang. Dilarang memperbanyak sebagian atau seluruh buku ini dalam bentuk apapun tanpa izin

Jl. Cabe Raya, Pondok Cabe, Pamulang 15418 PO Box 59/CPA, Ciputat, Jakarta, Indonesia Phone: (62-21) 7422184 Fax: (62-21) 7422276

(5)

Kata Pengantar

Buku JENI tentang Pengembangan Aplikasi Bahan Ajar dalam Perangkat Bergerak J2ME ini dirancang untuk dapat digunakan oleh para pendidik atau instruktur maupun umum untuk membantu mereka dalam proses belajar di bidang programming skill berbasis JENI. Selain itu buku ini dapat dijadikan tutorial dalam mengembangkan produk pembelajaran interaktif (Aplikasi) berbasis Java yang akan difokuskan untuk pengembangan aplikasi berbasis Mobile, baik dijenjang Perguruan Tinggi, SLTA, SLTP maupun masyarakat.

Buku ini berisi tentang proses pembuatan aplikasi sederhana untuk perangkat bergerak meliputi materi tentang perangkat bergerak, membangun aplikasi di handphone serta contoh projek yang akan dibuat.

SEAMEO SEAMOLEC sebagai pengembang pembelajaran terbuka dan jarak jauh di Asia Tenggara memandang bahwa kurikulum JENI dan Aplikasi Permainan Edukatif berbasis Mobile (Mobile Game Based Learning) dapat diintegrasikan dalam pola pembelajaran terbuka maupun jarak jauh untuk mendukung pembelajaran yang dapat dilakukan “dimana saja, kapan saja, dan oleh siapa saja”. Oleh karena itu, dengan disseminasi program JENI pada mitra-mitra SEAMOLEC, dapat mendorong munculnya inovasi-inovasi media pembelajaran baru berbasis ICT yang murah dan dapat diaplikasikan oleh seluruh pelajar di pelosok Indonesia.

Akhir kata semoga buku ini dapaat memberikan manfaat.

(6)

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile ii

DAFTAR ISI

BAB I Pendahuluan ... 1

1.1 Era Mobile (Perangkat Bergerak) ... 1

1.2. Java dan Netbeans ... 4

1.3 Spesifikasi ... 7

1.4 Contoh Projek ... 8

BAB II ISI ... 10

2.1. Persiapan Materi ... 10

2.2. Target Handphone ... 15

2.3. Persiapan Gambar, material, atau Resource ... 16

2.4 Bekerja dengan Netbeans Visual Midlet ... 17

2.5 Uji Coba ... 49

BAB III Penutup ... 51

(7)

BAB I Pendahuluan

1.1 Era Mobile (Perangkat Bergerak)

(8)

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile 2

Era mobile membawa kemudahan dalam berbagai bidang. Dukungan teknologi, penggunaan yang relatif mudah, dan perangkat yang semakin affordable membuat layanan-layanan berbasis mobile tumbuh dengan subur. E-commerce, e-banking, dan entertainment adalah bidang-bidang yang aktif berkembang di era mobile.

Gambar 1.2. E-banking dengan perangkat mobile pada layanan salah satu Bank di Indonesia

(9)

Dunia pendidikan adalah dunia yang sangat dinamis. Berbagai upaya dilakukan untuk meningkatkan kualitas teknik maupun media transformasi ilmu pengetahuan. Sejalan dengan tren era

mobile maka menggunakan teknologi dan media mobile

sebagai suplemen bahan ajar adalah hal yang sangat tepat.

Perangkat telekomunikasi mobile/ponsel yang telah banyak dimiliki oleh siswa dapat digunakan sebagai sarana untuk belajar. Dengan dukungan teknologi Java Micro Edition bahan-bahan belajar dapat dibuat dan disesuaikan dengan teknologi yang dapat diaplikasikan pada ponsel yang mendukung java. Hal ini akan memberikan fungsi tambahan terhadap ponsel. Selain itu siswa dapat belajar kapanpun dimanapun.

Gambar .1.4. Suplemen bahan ajar yang telah dikembangkan Seamolec

(10)

akan mampu membuat suplemen bahan ajar berbasis mobile ini .

1.2. Java dan Netbeans

1.2.1 Berkenalan dengan Java

Java adalah salah satu bahasa pemrograman. Sementara bahasa

pemrograman dapat didefinisikan sebagai “Bahasa

pemrograman, atau sering diistilahkan juga dengan bahasa komputer, adalah teknik komando/instruksi stAndar untuk

memerintah komputer.”

(http://id.wikipedia.org/wiki/Bahasa_pemrograman, tanggal akses 02 November 2010). Beberapa bahasa pemrograman yang lain diantaranya C, Visual Basic, PHP, dan Delphi. Bahasa pemrograman inilah yang membuat perangkat dapat diperintah untuk melakukan aksi sesuai dengan keinginan pengguna.

Java dibuat pada tahun 1991 oleh James Gosling dan timnya dari Sun Microsystem (saat ini diakuisisi oleh Oracle). Pada awal pembuatannya bahasa ini dinamai Oak, namun ternyata nama ini telah digunakan. Beberapa sumber menyatakan penamaan bahasa ini menjadi Java adalah terinspirasi dari kopi yang digemari oleh pengembang Java tersebut. Kopi itu berasal dari Jawa (Java dalam bahasa Inggris).

(11)

standar untuk pengembangan aplikasi berbasis java dan kemudian mengintegrasikannya dengan IDE Netbeans yang akan dibahas pada sub berikutnya. Gambar di bawah ini menunjukkan susunan platform Java.

Gambar 1.5. Berbagai Platform Java

Pada dekade ini java sangat populer digunakan dalam dunia teknologi informasi. Beberapa kelebihan java sehingga membuatnya populer adalah:

 Platform independen, aplikasi java dapat berjalan pada berbagai sistem operasi dan berbagai perangkat.

(12)

memudahkan penulisan pemrograman) gratis untuk digunakan.

 Kolaborasi komunitas pengguna yang besar, banyak sekali JUG (java user group) yang tesebar diseluruh dunia.

1.2.2. Berkenalan dengan Netbeans

Netbeans adalah sebuah IDE (integrated development environtment) populer yang digunakan untuk menulis kode program. IDE sendiri adalah sebuah aplikasi yang memudahkan penulis program untuk membuat aplikasi. Di dalamnya terdapat code writer dan editor serta plugin lain yang terintegrasi. Hal ini membuat penulisan program menjadi lebih mudah. IDE juga menyediakan link ke compiler (penerjemah bahasa pemrograman menjadi kode binary yang dipahami mesin komputer). Saat ini versi Netbeans termutakhir bulan desember 2010 yang dirilis adalah 6.9.1.

Netbeans memiliki beberapa kelebihan dibandingkan dengan IDE yang lain. Netbeans memiliki game builder yang dengan mudah dapat digunakan untuk mendesain sebuah game. Satu lagi kelebihan netbeans yang akan banyak kita eksplorasi pada bagian ini adalah Visual Midlet, dimana kita bisa membuat aplikasi mobile hanya dengan drag n drop elemen di Visual Midlet. Visual Midlet ini berbasis bahasa pemrograman Java. Menarik bukan? Anda tidak perlu lagi bersusah payah

berjibaku dengan bahasa pemrograman,

cukup klik dan

(13)

Gambar 1.6. Panel Visual Midlet

1.3 Spesifikasi

Pada bagian ini kita akan membahas spesifikasi perangkat ponsel yang dapat digunakan untuk menggunakan suplemen bahan ajar berbasis mobile dan spesifikasi komputer yang dapat digunakan untuk pengembangan aplikasi ini. Komputer yang disarankan untuk bekerja dengan JDK dan Netbeans adalah:

(14)

 Operating systems: Microsoft Windows XP Service Pack 3 atau Windows Vista Home Premium, Business, Ultimate, or Enterprise (certified for 32-bit editions), Linux family, Machintos.

 Memory: 512 MB of RAM (direkomendasikan 1 GB)  Disk space: 778 MB of free disk space

(direkomendasikan 1 GB)

 Web Browsers: Internet Explorer 6 minimum, FireFox 2.0 minimum

 Java SE Development Kit (JDK): JDK 6 Update 7 minimum (direkomendasikan JDK 6 Update 13) JDK ini sudah termasuk Java Runtime Environement(JRE) yang digunakan untuk menjalankan aplikasi berbasis Java.

Sedangkan telepon seluler yang disarnakan adalah telepon seluler apapun yang mendukung Java. Biasanya dapat dengan mudah teridentifikasi saat kita membeli telepon seluler. Dukungan Java juga dapat dicek pada sistem operasi ponsel,

dikenali dengan adanya logo java ( ).

1.4 Contoh Projek

(15)

Gambar 1.7. Contoh Project

Tugas / Latihan 1

(16)

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 10

BAB II ISI

2.1. Persiapan Materi 2.1.1. Installasi JDK

Hal pertama yang harus dilakukan adalah installasi JDK. JDK dapat berjalan baik di sistem operasi Linux maupun Windows. Untuk installasi berbasis Linux dapat menyesuaikan dengan cara installasi sesuai dengan distro masing-masing. Sementara yang akan lebih banyak dibahas disini adalah installasi berbasis sistem operasi Windows. Installasi dimulai dari file installer JDK. Versi JDK yang penulis gunakan adalah versi paling mutakhir dari JDK yaitu JDK 6 update 22 yang bisa di download di situs sun.com. Kemudian lakukan installasi dengan cara klik ganda file installer. Langkah instalasi pada umumnya sama dengan installasi program lainnya.

(17)

2.1.2. Installasi Netbeans

Netbeans yang akan kita gunakan adalah Netbeans 6.9.1 yang bisa di download di situs http://netbeans.org/download

Gambar 2.2. Download Installer dari situs netbeans.org

(18)

Gambar 2.4. Perjanjian Lisensi

(19)

Gambar 2.6. Summary installasi

(20)

Gambar 2.8. Installasi selesai dan tawaran registrasi (tidak wajib)

2.1.3. Persiapan Materi Suplemen Bahan Ajar

Bahan-bahan materi yang akan kita jadikan Suplemen bahan ajar adalah rumus-rumus bangun dua dimensi sesuai dengan data yang penulis dapatkan dari http://id.wikipedia.org/wiki/Bangun_datar, http://www.belajar-

(21)

bahan ajar sendiri Anda dapat menyiapkan terlebih dahulu material sesuai dengan topik bahasan yang akan Anda buat.

2.2. Target Handphone

Dalam membuat aplikasi ponsel target ponsel sangat penting untuk ditentukan sebelumnya. Hal itu karena bervariasinya ukuran layar dan versi MIDP telepon seluler. Ukuran layar bisa berukuran 120 x 240 pixel, 240 x 320 pixel, maupun 320 x 240 pixel. Bahkan telepon seluler termutakhir yang menggunakan

touch screen rata-rata berukuran diagonal 2,6”-3”. Hal ini tentu menyulitkan dalam mendesain berbagai komponen isi aplikasi.

Ponsel dengan berbagai variasi ukuran layar

(22)

2.3. Persiapan Gambar, material, atau Resource

Setelah bahan-bahan pembelajaran kita dapatkan langkah selanjutnya adalah menyiapkan resource lain seperti gambar, suara, dan teks. Berikut ini gambar-gambar yang akan digunakan dalam aplikasi Suplemen bahan ajar.

(23)

2.4 Bekerja dengan Netbeans Visual Midlet 2.4.1. Membuat Project Baru

Setelah semua persiapan telah disiapkan maka langkah selanjutnya adalah mulai membuat aplikasi suplemen bahan ajar ini. Buka Netbeans Anda (klik start menu cari Netbeans). Setelah jendela aplikasi terbuka buatlah sebuah project baru dengan cara mengklik icon new project atau dengan mengklik File > New project. Pilih Java ME dan pilih MobileApplication

kemudian tekan Next.

Gambar 2.10. Pembuatan Project baru di Netbeans

(24)

menyimpannya di My Documents\netbeansproject\. Hilangkan juga centang pada create Hello Midlet karena kita akan membuatnya sendiri.

Gambar 2.11. Pemberian nama project baru

Pada langkah selanjutnya Anda akan diminta untuk memilih

(25)

Gambar 2.12. Konfigurasi platform dan profil

Setelah membuat project baru selesai Anda akan mendapatkan project Anda di sisi panel kiri. Langkah selanjutnya adalah membuat class Midlet dengan Visual Midlet. Hal ini dapat dilakukan dengan cara klik kanan pada default package di

(26)

Gambar 2.1.3. Membuat class Midlet dengan Visual Midlet

(27)

2.4.2. Mengenal Bagian-bagian Jendela Kerja Visual Midlet

Tampilan awal Visual Midlet setelah dibuat kurang lebih seperti gambar di bawah ini. Pastikan Anda berada pada tab Flow. Jendela Visual Midlet terdiri dari beberapa bagian yaitu kanvas, tab, dan pallet. Dengan berpindah tab Anda dapat berpindah dari tampilan flow (aliran aplikasi), ke screen

(28)

2.4.3. Menyiapkan Material

Sebelum memulai menambahkan obyek pada Visual Midlet ada baiknya kita menyiapkan segala bahan yang diperlukan. Buatlah sebuah package baru di folder Soruce packages

dengan cara klik kanan Source Packages kemudian pilih New Java Packages. Beri nama sesuai dengan isi dan klik tombol

finish untuk membuat package. Anda akan melihat sebuah

package baru dengan nama yang Anda tentukan di folder Sourcepackages.

(29)

(30)

Gambar 2.19. Proses tempel (paste) file ke dalam package

2.4.4. Membuat Splash screen

Setelah bahan-bahan telah siap di dalam package kita bisa memulai aktivitas menambahkan obyek pada aplikasi kita. Pertama-tama kita akan membuat sebuah Splash screen.

(31)

ketika aplikasi sedang dimuat oleh ponsel. Di samping itu

splash screen juga dapat digunakan sebagai identitas aplikasi dan pembuat aplikasi, dalam hal ini pembuat suplemen bahan ajar. Tarik Menu Splash screen dari pallete ke atas jendela kanvas

Gambar 2.20. Membuat obyek splashScreen

(32)

Klik dua kali pada bagian image untuk masuk ke jendela baru untuk menambahkan gambar.

Pada jendela penambahan gambar tekan tombol add untuk menambahkan gambar, kemudian browse untuk memilih gambar yang sesuai (gambar splash screen). Tekan tombol ok dan lihat hasilnya.

Terdapat beberapa properties yang dapat diatur pada obyek splashScreen ini. Pada tab properties Anda dapat mencentang

fullscreen untuk membuat tampilan menjadi fullscreen. Selain itu Anda juga dapat mengatur timeout/lama waktu kemunculan

splash screen (dinyatakan dalam satuan mili detik).

(33)

Gambar 2.22. Menambahkan gambar pada obyek

(34)

2.4.5. Membuat Menu Awal

Setelah selesai dengan splash screen sekarang kita akan membuat Menu. Menu ini berguna sebagai daftar pilihan yang menentukan kemana pengguna akan melanjutkan. Kita akan membuat empat menu yaitu Materi, Latihan, Tentang, dan Keluar. Tarik menuList dari panel Pallete ke atas kanvas.

Gambar 2.24. Pembuatan obyek List

Langkah selanjutnya adalah menambahkan item pilihan. Hal ini dapat diakukan dengan cara klik kanan pada boxlist yang baru saja kita tambahkan tadi dan pilih List Element. Lakukan berulang sampai dengan empat kali (sesuai kebutuhan). Gantilah tulisan list elemen tersebut dengan double click pada

(35)

direncanakan yaitu list untuk materi, latihan, halaman tentang, dan keluar.

Gambar 2.25. Penambahan List Element untuk Menu

(36)

Gambar 2.26. Menambahkan gambar pada list

(37)

Gambar 2.28. Hasil akhir list yang telah diberi gambar

2.4.6. Membuat Menu Materi

Setelah membuat List untuk menu awal langkah selanjutnya adalah membuat list untuk daftar materi. Dengan langkah yang sama tambahkan sebuah list baru dari panel. Tambahkan pula

(38)

2.4.7. Mengatur Alur Program

Sampai dengan tahap ini Anda telah memiliki empat buah obyek. Nah, kita dapat memberikan alur program yang tepat. Klik dan tarik blok Started pada obyek Mobile Device ke

splash screen. Anda akan meilihat sebuah panah muncul. Anda baru saja memerintahkan aplikasi untuk memulai splash screen

saat pertama kali dijalankan.

Selanjutnya tarik panah alur dari Dissmiss_command pada

splash screen menuju obyek menu. Dengan langkah ini Anda baru saja memerintahkan aplikasi untuk menampilkan menu setelah splash scren ditampilkan sesuai time out yang Anda atur sebelumnya.

Langkah berikutnya tarik panah dari blok Materi belajar ke List

(39)

Gambar 2.30. Memberikan alur aplikasi

2.4.8. Membuat Materi Belajar

(40)

Gambar 2.31. Pembuatan obyek form

Selanjutnya tambahkanlah obyek baru pada form dengan cara klik kanan > New/Add. Tambahkan obyek Image dan String. Setelah itu klik dua kali obyek form untuk masuk ke tampilan layar dan melakukan pengeditan. Tambahkan gambar seperti cara yang telah dibahas sebelumnya. Klik string item untuk menambahkan tulisan tentang materi Anda. Akhiri proses

editing dengan menekan tombol enter karena jika tidak

(41)

Gambar 2.32. Menambahkan obyek pada form

(42)

Gambar 2.34. Menambahkan gambar pada form

(43)

Anda dapat mengganti nama-nama obyek yang ada di canvas dengan cara klik dua kali nama yang tertampil tebal. Tambahkan sebuah obyek BackCommand pula pada form yang telah berganti nama menjadi persegi. Hal ini bertujuan untuk menambahkan sebuah tombol back yang dapat membawa pengguna ke menu daftar materi. Hal ini akan memudahkan navigasi pengguna. Ulangi proses penambahan form ini sebanyak sesuai dengan kebutuhan. Tambahkan satu persatu materi dan lengkapi pula dengan tombol Back. Jangan lupa untuk memberikan alur program yang sesuai.

(44)

Gambar 2.37. Hasil akhir setelah semua materi tertambahkan dan alur program telah diatur

Sampai dengan proses ini Anda telah membuat sebuah obyek list yang digunakan untuk membuat menu. Kemudian Anda juga telah berhasil membuat splash screen dan satu per satu materi melalui obyek form. Pada bagian selanjutnya Anda akan

(45)

2.4.9. Membuat Kuis/Latihan Soal

Langkah pertama untuk membuat kuis adalah dengan membuat obyek form baru. Tarik tombol form pada pallete ke atas kanvas kerja. Selanjutnya tambahkan image item dan string item. Langkah selanjutnya untuk mengisi image item dan string item tentu Anda masih ingat bukan?

Yang akan kita bahas kali ini lebih berfokus pada pembuatan pilihan jawaban dengan menggunakan choice group. Tambahkan choice group dengan cara klik kanan dan add > choice group. Seperti tampak pada gambar dibawah ini

(46)

Kemudian pada tab screen akan muncul blok choice group. Pada blok ini dengan klik kanan tambahkan choice item sebanyak yang Anda perlukan.

Menambahkan 2.39. Choice element pada choice group

(47)

pilihan gantilah nilai properties choice group pada bagian Type menjadi EXCLUSIVE.

Gambar 2.40. Screen kuis

(48)

Gambar 2.41. Hasil editing choice element

(49)

Gambar 2.42. Tampilan asli baris kode program pada tab Source

Tambahkan baris kode berikut dibawah baris public class

visualMIDlet ....

int nilai = 0;

(50)

Langkah selanjutnya tinggal menambahkan tombol utuk kembali dan men-submit pekerjaan quiz/melihat nilai. Tambahkan okCommand dan cancelCommand pada obyek

form kuis/soal latihan yang Anda buat.

Gambar 2.43. Menambahkan tombol OK dan Cancel

Kemudian ganti properties tombol OK tersebut. Pada bagian

(51)

Gambar 2.44. Merubah properties label tombol Ok

(52)

Gambar 2.45. Menuju ke baris kode

Tambahkan kode di bawah ini:

if (choiceGroup.getSelectedIndex()==0)

{

nilai+=25;

getStringItem3().setText("Nilai kamu adalah "+nilai);

}

(53)

Gambar 2.46. Baris kode okCommand (bagian yang berwarna abu-abu tidak dapat diedit)

Selanjutnya buat sebuah obyek baru. Obyek baru ini akan kita gunakan untuk menampilkan nilai hasil kuis tadi. Beri nama

obyek tersebut ‘hasil’. Pada obyek ini tambahkan string item

juga. Masuklah ke tab Souce untuk menambahkan kode program ini pada blok kode program yang merepresentasikan obyek yang baru kita buat.

(54)

Gambar 2.47. Penambahan baris kode.

Lanjutkan dengan langkah terakhir yaitu memberikan alur yang tepat. Arahkan tombol cancel kembali ke Menu awal dan tombol Ok ke obyek hasil. Anda dapat menguji aplikasi Anda.

(55)

Berhasil bukan? Tambahkan lebih banyak pertanyaan pada kuis!

Nah sekarang dengan kemampuan dan pengalaman Anda tentu

tidak sulit membuat obyek ketika menu ‘tentang’ ditekan

bukan?

Selamat Mencoba !

2.5 Uji Coba

Aplikasi-aplikasi yang dibuat dengan Java dapat langsung digunakan di telepon genggam (tentunya yang mendukung Java). Telusuri folder dimana Anda membuat project (lokasi default di MyDocuments/Nebeans Project/namaProject) dan kopikan file namaaplikasiAnda.jad dan namaaplikasiAnda.jar pada ponsel.

(56)

Gambar 2.49. Rangkaian uji coba pada emulator

Tugas / Latihan 2

Buat file Hello Mobile pertama buatan Anda dalam netbeans. Kirim dalam bentuk softcopy file .zip / .rar dan dimasukkan dalam Elearning edmodo!

Tugas / Latihan 3

(57)

BAB III Penutup

3.1 Pengembangan Materi Bahan Ajar

Ketika Anda telah sampai pada bagian ini tim penulis mengharapkan Anda telah mampu membuat suplemen bahan ajar dengan menggunakan perangkat mobile. Penulis harap dengan keberhasilan itu Anda akan mampu meningkatkan kualitas proses pembelajaran yang Anda ampu. Lebih jauh penulis berharap Anda mampu mengembangkan suplemen bahan ajar tersebut dengan lebih variatif, lebih baik, dan menarik. Berbagai e-book maupun buku-buku yang telah diterbitkan oleh Seamolec tersedia untuk membantu Anda belajar lebih jauh lagi.

Selamat belajar dan berkarya!

Tugas / Latihan 4

Laporkan Progress Perkembangan projek Anda melalui edmodo baik berupa projek netbeans, ataupun video singkat dalam Elearning edmodo!

Tugas / Latihan 5

(58)

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 52