Aplikasi Dalam Perangkat

Bergerak
 DAFTAR ISI

BAB I Pendahuluan .............................................................................. 0

1.1 Era Mobile (Perangkat Bergerak)...................................................... 0

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

2.4 Bekerja dengan Netbeans Visual Midlet .......................................... 16

2.5 Uji Coba ............................................................................................ 49

BAB III Penutup ................................................................................. 50

3.1 Pengembangan Materi Bahan Ajar .................................................. 50

ii
BAB I Pendahuluan

1.1 Era Mobile (Perangkat Bergerak)

Era mobile ditandai dengan meluasnya penggunaan peralatan
yang mengunakan teknologi tanpa kabel (wireless).
Perangkatperangkat tersebut awalnya dominasi oleh Mobile
phone (atau populer disebut handphone/ponsel). Kemudian

JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

 berbagai aplikasi dan fitur ditambahkan dalam handphone
sehingga fungsinya lebih dari sekedar alat komunikasi suara.
Mobile phone kemudian dikenal dengan smart phone (ponsel
pintar). Trend terbaru perangkat mobile akhir-akhir ini adalah
tablet PC yang memiliki lebih banyak fungsionalitas perangkat
mobile.

Menurut rilis laporan PBB yang ditulis oleh kompas pada 16

Februari 2010 diperkirakan tahun ini pengguna ponsel lebih dari
lima milyar pengguna. Sementara data yang dirilis Wireless
Intelligent menempatkan Indonesia pada peringkat ke-6
pengguna ponsel dengan 116 juta pengguna (data tahun 2009).
Hal ini tentu menunjukkan bagaimana penetrasi teknologi
mobile telah sedemikian cepat.

Gambar 1.1. Data Wireless Intlligent

JARC Seamolec | Supplemen Bahan Ajar Berbasis Mobile

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, ebanking,

1
 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

Gambar 1.3. Tampilan MLE (Mobile Learning Engine) untuk pengguna

Moodle di ponsel

2 JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

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

Sampai pada bagian ini mungkin Anda yang masih awam dengan
bahasa pemrograman jangan khawatir terhadap kemampuan

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 3

Anda. Namun percayalah perlahan-lahan Anda 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).

Java memiliki beberapa platform (seri tertentu untuk kebutuhan

perangkat/teknologi khusus). Pada bahasan kita kali ini kita akan
menggunakan platform J2ME yang ditujukan untuk perangkat
ponsel. Pada awal langkah kerja kita akan menginstal JDK (Java
Development Kit) sebagai plaftrom standar untuk pengembangan

4 JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

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.
• Gratis, java dan tools-tools integrated
development environtment (software untuk
memudahkan penulisan pemrograman) gratis
untuk digunakan.

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 5

 • 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
cukup klik dan tarik dan jadilah
pemrograman,
aplikasi Anda.

6 JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

 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:

• Processors: Intel Pentium 4, Intel Centrino, Intel Xeon,

or Intel Core Duo (atau yang kompatibel) minimum 1.8
GHz ( direkomendasikan 2.6 GHz Intel Pentium IV atau
yang setara)
• Operating systems: Microsoft Windows XP Service
Pack 3 atau Windows Vista Home Premium, Business,

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 7

 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

Modul ini juga akan memberikan sebuah contoh proyek yang
aplikatif. Proyek ini dapat Anda pelajari sebagai dasar
membangun proyek suplemen bahan ajar berbasis mobile Anda
sendiri. Pada modul ini kita akan membuat sebuah suplemen
bahan ajar tentang rumus-rumus matematika geometri dua
dimensi. Langkah demi langkah pembuatan suplemen bahan ajar
akan dibahas dalam modul ini dengan menggunakan Visual
Midlet Netbeans.

8 JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

 Gambar 1.7. Contoh Project

Tugas / Latihan 1
Ceritakan Era digital / perangkat bergerak berdasarkan pengalaman
Anda dan pendapat disertai dengan referensi. Kirim dalam bentuk
softcopy file pdf dan dimasukkan dalam Elearning edmodo!

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 9

 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.

Gambar 2.1. Mendapatkan file installer JDK 6 update 22

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

10
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

Gambar 2.3. Memulai proses installasi

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 11

 Gambar 2.4. Perjanjian Lisensi

Gambar 2.5. Menentukan lokasi installasi

12 JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

Gambar 2.6. Summary installasi

Gambar 2.7. Proses Installasi

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 13

 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.belajarmatematika.com/matematikasd/Keliling%20dan%2
0Luas%20Bangun%20Datar.pdf., dan BSE karangan Atik Wintarti dkk
berjudul Contextual Teaching Learning Matematika kelas 7. Kemudian
dari bahan-bahan yang didapatkan kita akan segera membuat suplemen
bahan ajar ini. Bagi Anda yang akan mengembangkan suplemen bahan
ajar sendiri Anda dapat menyiapkan terlebih dahulu material sesuai
dengan topik bahasan yang akan Anda buat.

14 JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

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

Berdasarkan hal-hal tersebut maka aplikasi suplemen bahan ajar ini

akan menggunakan target ponsel yang umum. Visual midlet
menggunakan high level user interface dimana visual midlet mampu
menyesuaikan dengan berbagai jenis ponsel. Untuk konten-konten
berupa gambar penulis akan menggunakan referensi ukuran layar 240
x 320 pixel.

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

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 15

digunakan dalam aplikasi Suplemen bahan ajar.

Gambar 2.9. Bahan yang akan digunakan dalam aplikasi suplemen

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

16 JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

buatlah sebuah project baru dengan cara mengklik icon new project
atau dengan mengklik File > New project. Pilih Java ME dan pilih
Mobile Application kemudian tekan Next.

Gambar 2.10. Pembuatan Project baru di Netbeans

Selanjutnya beri nama project dan tentukan lokasi penyimpanannya.

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

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 17

 Gambar 2.11. Pemberian nama project baru

Pada langkah selanjutnya Anda akan diminta untuk memilih Emulator

dan device serta versi CLDC dan MIDP. Pada emulator platform Anda
tidak perlu menggantinya tetapi sesuaikan device yang sebelumnya
ClamshellCdcPhone menjadi Default Cldc phone untuk mendapatkan
tipe emulator ponsel yang memiliki layar 240 x 320 pixel. Versi MIDP
ganti ke pilihan 2.0 untuk memperluas kompabilitas dengan ponsel.

18 JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

 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 folder source packages, kemudian pilih
Visual Midlet. Anda dapat memberi nama class Midlet sesuai
keinginan Anda tapi penulis lebih senang membiarkannya tanpa
perubahan. Tekan tombol finish untuk membuat Visual Midlet.

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 19

Gambar 2.1.3. Membuat class Midlet dengan Visual Midlet

Gambar 2.1.4. Memberi nama class Visual Midlet

2.4.2. Mengenal Bagian-bagian Jendela Kerja Visual Midlet

20 JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

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 (tampilan saat aplikasi dijalankan), source
(tampilan asli kode program, umumnya tidak diperlukan kecuali
mengedit kode program), dan analizer (penganalisa efisiensi aplikasi).
Canvas adalah tempat Anda meletakkan obyek-obyek yang bisa ditarik
(drag n drop) dari panel Pallete.

Gambar 2.15. Bagian-bagian dari jendela kerja Visual Midlet

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

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 21

melihat sebuah package baru dengan nama yang Anda tentukan di
folder Source packages.

Gambar 2.16. Menambahkan package baru

22 JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

 Gambar 2.17. Memberi nama package

Gambar 2.18. Mengkopi file-file yang diperlukan dari Windows Eksplorer

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 23

 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. Splash screen adalah layar yang
muncul secara singkat di awal aplikasi dijalankan. Tujuannya agar
pengguna tidak bosan ketika aplikasi sedang dimuat oleh ponsel. Di
samping itu splash screen juga dapat digunakan sebagai identitas

24 JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

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

Selanjutnya klik dua kali box splashScreen yang telah Anda tambahkan
tadi. Akan muncul jendela baru (jendela tab screen) tempat Anda dapat
mengedit tampilan obyek splash screen ini.
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.

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 25

Terdapat beberapa properties yang dapat diatur pada obyek
splashScreen ini. Pada tab properties Anda dapat mencentang full
screen untuk membuat tampilan menjadi full screen. Selain itu Anda
juga dapat mengatur time out/lama waktu kemunculan splash screen
(dinyatakan dalam satuan mili detik).

Gambar 2.21. Tampilan layar/screen dari obyek splash screen

26 JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

 Gambar 2.22. Menambahkan gambar pada obyek

Gambar 2.23. Tampilan layar setelah penambahan gambar

2.4.5. Membuat Menu Awal

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 27

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 menu List 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 box list 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 list yang ada. Ganti nama daftar
sesuai dengan yang telah direncanakan yaitu list untuk materi, latihan,
halaman tentang, dan keluar.

28 JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

 Gambar 2.25. Penambahan List Element untuk Menu

Sama seperti obyek splash screen Anda dapat men-double klik obyek
list untuk menambahkan gambar. Tambahkan gambar kecil/ikon pada
menu agar terlihat lebih menarik. Langkahlangkahnya sama dengan
memberi gambar pada splash screen. Anda harus terlebih dahulu
mengklik tombol add untuk menambahkan obyek gambar. Setelah
obyek gambar terbuat Anda dapat memilih gambar yang sesuai. Ingat
Netbeans hanya mendukung format gambar .png.

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 29

Gambar 2.26. Menambahkan gambar pada list

Gambar 2.27. Memilih gambar yang tepat

30 JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

 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 list element
pada obyek list yang telah kita buat tadi sesuai dengan kebutuhan.
Selanjutnya ganti nama list elemen sesuai dengan kebutuhan kita.

Gambar 2.29. Membuat list untuk daftar materi

2.4.7. Mengatur Alur Program

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 31

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 yang
berisi daftar materi belajar. Anda tentu sudah bisa menebak tujuan
langkah yang Anda lakukan barusan. Kemudian tariklah blok Keluar
pada Menu ke obyek mobile device. Hal ini berarti aplikasi akan keluar
saat list keluar dipilih.

Cobalah menekan F6 atau icon Play pada toolbar untuk melihat

hasilnya. Emulator ponsel akan tampil dan mensimulasikan aplikasi
Anda.

32 JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

 Gambar 2.30. Memberikan alur aplikasi

2.4.8. Membuat Materi Belajar

Sekarang tariklah sebuah form dari Palet. Anda akan membuat sebuah
obyek form pada kanvas. Di form inilah Anda akan menempatkan
materi pembelajaran. Tarik panah alur aplikasi dari blok persegi pada
box list ke form. Anda akan menciptakan alur aplikasi.

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 33

 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 pengedit-an tidak akan tersimpan.

34 JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

 Gambar 2.32. Menambahkan obyek pada form

Gambar 2.33. Tampilan layar obyek form

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 35

Gambar 2.34. Menambahkan gambar pada form

Gambar 2.35. Layar setelah penambahan materi

36 JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

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.

Gambar 2.36. Menambahkan back command

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 37

 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 belajar membuat kuis dan membuat
halaman ‘tentang suplemen’.

2.4.9. Membuat Kuis/Latihan Soal

38 JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

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

2.38. Menambahkan obyek choice group pada form

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

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 39

 Menambahkan 2.39. Choice element pada choice group

Sekarang perhatikan choice element yang telah Anda tambahkan,

berbentuk kotak bukan? Hal tersebut menandakan bahwa tipe choice
group masih multiple, dengan kata lain pengguna dapat memilih lebih
dari satu pilihan. Untuk menjadikannya exclusive/pengguna hanya
dapat memilih satu pilihan gantilah nilai properties choice group pada
bagian Type menjadi EXCLUSIVE.

40 JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

 Gambar 2.40. Screen kuis

Jika pilihan sudah berubah menjadi bulat maka Anda telah berhasil
mengganti tipe choice group. Langkah selanjutnya gantilah choice
element dengan pilihan jawaban yang Anda inginkan. Pastikan terdapat
satu jawaban yang benar, dari jawaban ini lah kita akan membuat
penilaian.

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 41

 Gambar 2.41. Hasil editing choice element

Sejauh ini Anda telah berhasil membuat bagian-bagian utama kuis.

Sekarang kita akan sedikit memodifikasi kode program. Sedikit sulit
memang tapi penulis yakin Anda akan mampu melakukannya. Klik tab
source untuk masuk ke jendela baris kode program. Tampilannya akan
menjadi seperti ini:

42 JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

 Gambar 2.42. Tampilan asli baris kode program pada tab Source

Tambahkan baris kode berikut dibawah baris public class visualMIDlet

....

int nilai = 0;

Baris kode program tersebut berfungsi untuk membuat variabel yang

akan menyimpan nilai Anda.
Langkah selanjutnya tinggal menambahkan tombol utuk kembali dan
men-submit pekerjaan quiz/melihat nilai. Tambahkan okCommand

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 43

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 label ganti

nilai yang sebelumnya ‘OK’ menjadi ‘Kirim &
Lihat nilai’.

44 JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

 Gambar 2.44. Merubah properties label tombol Ok

Selanjutnya kita akan menambahkan kode ke tombol okCommand ini,

sehingga ketika tombol ditekan aplikasi mampu mendeteksi jawaban.
Klik kanan okCommand dan pilih Go To Source.

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 45

 Gambar 2.45. Menuju ke baris kode

Tambahkan kode di bawah ini:

if (choiceGroup.getSelectedIndex()==0)

nilai+=25;

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

}
Maka baris kode akan menjadi seperti gambar di bawah ini:

46 JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

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.

stringItem3 = new StringItem("Nilai kamu adalah

"+nilai, null);

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 47

 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.

Gambar 2.48. Hasil akhir alur aplikasi

Berhasil bukan? Tambahkan lebih banyak pertanyaan pada kuis!

48 JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

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.

Berikut ini merupakan hasil pengujian yang penulis lakukan pada

emulator. Anda dapat menguji aplikasi pada ponsel Anda masing-
masing.

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 49

 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
Buat Mind Map / Action plan project yang akan anda buat dalam bentuk
softcopy file pdf dan dimasukkan dalam Elearning Edmodo!

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

50 JARC Seamolec | Suplemen Bahan Ajar Berbasis Mobile

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
Laporkan hasil projek akhir anda dalam file pdf dan video singkat produk serta
kirimkan dalam Elearning Edmodo!

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 51

 Profil Penulis

Prayitno. Lahir di Semarang, 10 April

1985. Menyelesaikan pendidikan dasar di
SDS. Bandarharjo Semarang kemudian
melanjutkan pendidikan di SLTP Negeri
36 Semarang. Setelah menamatkan
jenjang SLTP kemudian melalang buana
di dunia Sekolah Teknik dengan
menempuh pendidikan di SMK Negeri 7
(STM Pembangunan) Semarang
mengambil jurusan Teknik Elektronika Industri dan lulus
pada tahun 2005. Karena tidak puas dengan jenjang pendidikan
SMK, lalu melanjutkan lagi pengembaraan di dunia perkuliahan
dengan memperoleh beasiswa dari DIKMENJUR dengan
program D4 Joint Program BA Malang – PENS ITS
Surabaya dengan pendidikan 3,5 tahun dan gelar S.ST. jurusan
Teknik Informatika serta lulus pada tahun 2009 dengan
predikat cumlaude. Tahun 2012 telah menyelesaikan pendidikan
S2 Magister Teknik di ITB konsentrasi TMDG(Teknik
Media Digital dan Game) dengan beasiswa dari SEAMOLEC.

52
 JARC Seamolec | Pengembangan Aplikasi Bahan Ajar

JARC Seamolec | Pengembangan Aplikasi Bahan Ajar 53

 © 2013

54