SlideShare ist ein Scribd-Unternehmen logo
1 von 68
1
Daftar Isi
Daftar Isi..................................................................................................................................................1
Kata Pengantar........................................................................................................................................3
Sekilas Tentang Seri 40 Web App............................................................................................................5
Sekilas Tentang Nokia Web Tools...........................................................................................................7
Kebutuhan Sistem...............................................................................................................................7
Persiapan Pengembangan ..................................................................................................................7
Instalasi Nokia Web Tools.......................................................................................................................8
Antar Muka Web Developer Environment (WDE)................................................................................12
Menu Pilihan.....................................................................................................................................12
Toolbar..............................................................................................................................................14
Web Developer Channel...................................................................................................................14
Pengaturan Web Developer Environment........................................................................................15
Memilih Workspace......................................................................................................................15
Web Apps preferences..................................................................................................................16
Membuat sebuah Proyek Web App......................................................................................................17
Membuat sebuah proyek web app baru dari template....................................................................17
Mengimpor Paket Web Apps............................................................................................................19
Web App Simulator...............................................................................................................................21
Toolbar..............................................................................................................................................22
Debugger...........................................................................................................................................23
Device Setting ...................................................................................................................................23
Settings..............................................................................................................................................24
Mobile Web Library (MWL) ..................................................................................................................25
Menggunakan SMS dan Telp URI..........................................................................................................27
Series 40 Screen Orientation ...............................................................................................................29
Parsing XML Data BMKG.......................................................................................................................31
Memanfaatkan API Kateglo ..................................................................................................................35
Memasang Iklan di Series 40 Web App.................................................................................................38
Uji Coba S40 Web App pada Device......................................................................................................40
Instalasi Nokia SDK for Java 2.0 ............................................................................................................44
Integrasi Nokia SDK dengan NetBeans .................................................................................................45
Hello World!..........................................................................................................................................47
2
Mengenal Simulator Nokia SDK 2.0 ......................................................................................................50
Membuat Category Bar.........................................................................................................................52
Memanfaatkan Remote Device Access.................................................................................................55
Publish Aplikasi ke Nokia Store.............................................................................................................56
Membuat Banner untuk Promosi Aplikasi............................................................................................61
Penyebab Aplikasi Ditolak di Nokia Store.............................................................................................63
Kesimpulan............................................................................................................................................66
3
Kata Pengantar
Semakin berkembangnya Ilmu Pengetahuan dan Teknologi (IPTEK), dan diiringi juga dengan
perkembnagan zaman yang cepat, sehingga tidak menutup kemungkinan berpengaruh pada
pola kehidupan manusia yang semakin maju terutama pada aspek kehidupan keseharian,
dalam menggunakan teknologi, khususnya penggunaan teknologi telepon selular.
Mengingat semakin padatnya aktifitas di kehidupan zaman modern ini, maka tidak dipungkiri
lagi membuat keterbatasan dalam setiap hal kehidupan sehari-hari. Misalnya keterbatasan
untuk mengetaui informasi cuaca, jadwal televisi, bioskop, sampai informasi penerbangan.
Sepeti yang kita ketahui untuk memudahkan masalah tersebut, fasilitas telepon selular dengan
aplikasi internet pada zaman sekarang ini semakin bertumbuh pesat setiap tahunnya, adalah
salah satu solusi yang dapat memudahkan pengguna untuk mengakses atau mendapatkan
informasi ter-update secara online melalui perangkat telpon selular.
Kebutuhan akan aplikasi mobile pun semakin banyak diirigi dengan semakin banyaknya
pengguna telepon seluler di dunia khususnya di Indonesia. Terlebih lagi Nokia Indonesia telah
bekerja sama dengan 3 operator besar untuk memberikan layanan pembelian konten premium
di Nokia Store. Hal ini tentu memberi kesempatan lebih besar kepada para pengembang aplikasi
lokal untuk mendapat penghasilan dengan menjual aplikasi melalui nokia store.
Buku ini hanya membahas bagaimana cara memulai mengembangkan aplikasi di platform Series
40 khususnya di seri Nokia Asha. Terdapat 2 bagian pembahasan, yaitu series 40 web apps dan
java me. Namun untuk java me saya hanya membahasnya sedikit saja, mengingat pengalaman
saya yang masih kurang banyak di bidang java me.
Harapan penulis, buku ini dapat memberikan pengetahuan seputar teknologi Seri 40 Web App
dan Java ME dan dapat menghasilkan aplikasi-aplikasi baru di nokia sore yang men-dunia yang
dibuat oleh pengembang lokal.
Jika ada pertanyaan, kritik dan saran, penulis dapat dihubungi via email moh.iqbal@outlook.com
atau facebook /ciebal dan twitter @ciebal.
Terima kasih.
Bandung, 10 April 2013
Mohamad Iqbal
Nokia Developer Champion
Nokia Developer Certified Trainer
4
Series 40
Web Apps
5
Sekilas Tentang Seri 40 Web App
Series 40 Web app merupakan aplikasi web yang diunggah ke cloud untuk dapat diakses melalui
Nokia Browser. Series 40 web app memberikan kemudahan pengkodean terbaik untuk
menciptakan aplikasi web yang memberikan pengalaman pengguna yang sangat baik. Beberapa
ponsel Series 40 tidak memiliki kekuatan pemrosesan dan memori untuk menjalankan browser
standar langsung pada perangkat. Oleh karena itu, perangkat Seri 40 memiliki model web
browser atau terdistribusi berbasis proxy yang memungkinkan rendering halaman penuh.
Browser Nokia untuk series 40 Proxy server berkomunikasi dengan website atas nama Browser
Nokia untuk series 40 klien di telepon. Server melakukan proses-intensif tugas yang
berhubungan dengan halaman web rendering, seperti menjalankan script dan gambar mengubah
ukuran. Server akan mengirimkan isi klien web yang dioptimalkan, mengurangi payload dan
streamlined untuk rendering.
Gambar dibawah ini menunjukkan gambaran dari arsitektur Browser Nokia untuk Series 40.
Sebuah fitur unik dari Browser Nokia untuk series 40 di antara proxy berbasis browser adalah
bahwa beberapa kode JavaScript dapat dijalankan pada perangkat nokia. Fitur ini memungkinkan
Series 40 web app untuk menawarkan pengalaman pengguna yang ditingkatkan melalui
antarmuka pengguna dinamis dengan fitur seperti transisi.
Kode HTML dan JavaScript di Series 40 web app diproses pada server proxy saja. Server
mempersiapkan semua konten untuk handset, mengubahnya ke HTML yang dioptimalkan dan
memberikan kode JavaScript yang menggunakan MWL (Mobile Web Library) Javascrpit library.
MWL berisi kode untuk mendukung aplikasi-seperti interaksi di telepon. Pengolahan MWL
biasanya hanya JavaScript yang dieksekusi di telepon.
Karena series 40 web app berjalan di cloud bukan stand alone di perangkat nokia, maka setiap
aplikasi baik statis maupun dinamis (mengakses berbagai API), ketika diakses oleh pengguna
maka pengguna harus menggunakan akses internet.
Berikut adalah skema dan komponen dalam pembuatan Seri 40 Web app. Terdapat beberapa file
inti yang di paket menjadi sebuah aplikasi.
WWW
Nokia Browser for
Series 40 Proxy Server
Nokia Browser for
Series 40 Client
(Phone)HTML, CSS,
Javascript, Images,
XML, JSON, etc
Optimised
content (HTML,
CSS, compressed
images)
6
7
Sekilas Tentang Nokia Web Tools
Nokia Web Tools merupakan kakas untuk membuat aplikasi mobile Seri 40 web app dengan cepat
dan mudah. Kakas untuk membuat, mengedit, pengujian, pengemasan, dan deploy web app
sehingga siap untuk distribusi di Nokia Store. Nokia Web Tools dapat berjalan pada system
operasi Microsoft Windows, Apple OSX, dan Linux Ubuntu.
 Web Developer Environment (WDE) - dibangun di atas platform Eclipse dan Aptana Studio;
WDE memanfaatkan fitur editing, packaging, dan deploying aplikasi web yang menawan.
Fitur dari WDE untuk menciptakan aplikasi web Seri 40 dan Symbian akan kita bahas
dalam bab berikutnya.
 Web App Simulator (WAS) - alat ini memungkinkan pratinjau aplikasi web dan berguna
untuk untuk debugging yang dapat dilihat pada komputer. Aplikasi yang sudah Anda buat
dapat dijalankan melalui WAS tanpa membutuhkan device.
 Web Developer Channel (WDC) - resource ini tertanam dalam WDE dan menyediakan
akses online ke berbagai sumber daya dari Nokia yang akan membantu dalam
pengembangan aplikasi web.
Kebutuhan Sistem
Untuk penggunaan Nokia Web Tools ini ada beberapa kebutuhan software dan hardware yang
harus terpenuhi, diantaranya :
 Windows – 512 MB RAM, Pentium 4-level processor
 Mac OS X – 512 MB RAM, PowerPC G4/G5, Intel or Mac OS X 10.4+
 Linux – 512 MB RAM, Pentium 4-level processor
Persiapan Pengembangan
Untuk memulai pengembangan dan belajar membuat aplikasi menggunakan Nokia Web Tools,
kemampuan dasar yang Anda butuhkan adalah menguasasi HTML, CSS, dan Javascript. Pastikan
ketiga bahasa tersebut sudah Anda kuasai sebelum memulai membangun sebuah aplikasi web.
Karena dibuku ini saya tidak akan membahas secara detail tentang ketiga hal tersebut. 
8
Instalasi Nokia Web Tools
Pada proses instalasi ini, saya menggunakan Nokia Web Tools versi 2.3 untuk OS Windows.
Berikut ini langkah-langkahnya:
1. Unduh Nokia Web Tools di http://goo.gl/1xAcB pilih tool berdasarkan OS yang Anda
gunakan.
2. Klik dua kali file installer Nokia Web Tools yang telah Anda unduh. Kemudian akan
memperoleh kotak dialog seperti gambar di bawah. Klik tombol Next untuk memulai
Instalasi.
3. Kemudian Akan memperoleh kotak dialog “License Agreement” seperti gambar berikut:
4. Pilih opsi “I accept the terms of the License Agreement” Klik tombol Next.
9
5. Selanjutnya akan opsi ada Geographic location, pilih Rest of the world
6. Kemudian Anda akan memperoleh kotak dialog seperti gambar dibawah ini. Pilih folder
tempat Nokia Web Tools akan di-instal. Klik Install.
7. Sistem akan melakukan proses instalasi sesuai dengan module yang dipilih.
10
8. Jika proses instalasi selesai. Klik tombol Finish.
9. Nokia Web Tools Anda siap digunakan. 
11
Gambar di atas adalah antar muka dari Web Developer Environment (WDE). Dengan WDE kita
dapat membuat aplikasi Nokia berbasis web. WDE juga menawarkan kemudahan bagi
programmer dalam melakukan debugging.
12
Antar Muka Web Developer Environment
(WDE)
Bagi yang sudah cukup mengenal Eclipse, maka sudah tidak asing dengan antar muka seperti
WDE, karena WDE dibangun dalam framework eclipse dan memanfaatkan antarmuka eclipse
untuk yang dibutuhkan untuk membuat aplikasi web. Bagi Anda yang masih asing dengan antar
muka WDE, mari kita mengenal fungsi dari masing-masing tombol dan navigasi pada WDE.
1. Menu and toolbar - Menyediakan akses ke fitur WDE
2. Project explorer - Berisi aplikasi proyek web dan memungkinkan membuka akses ke
file proyek.
3. Editor area – Untuk menambahkan/men-sunting baris kode html, css, dan javascript.
4. Shortcut – Berisi shortcut penting dalam WDE.
5. Outline view - Memberikan garis dari file yang ditampilkan dalam panel editor.
6. Information area - Menyediakan umpan balik tentang masalah yang ditemukan
dalam proyek-proyek aplikasi web, output konsol dan task manager.
Menu Pilihan
WDE memiliki antaramuka dan menu standar eclipse, beberapa fungsi menu pada WDE adalah;
 Membuat dan impor proyek web app pada menu File.
13
 Melihat informasi pada menu Help.
 Akses lebih banyak fitur WDE pada menu Project Explorer.
1. Upload Series 40 Web App – Meng-unggah web app ke cloud untuk dilihat melalui
browser atau device. Nanti akan diberikan sebuah tautan untuk proyek Anda.
14
2. Local Preview for Web App – Pratinjau melalui emulator Seri 40 Web App. Anda tidak
perlu membuka emulator terlebih dahulu cukup pilih menu ini maka emulator akan
terbuka dengan sendirinya
3. Cloud Preview for Web App – Pratinjau melalui emulator Seri 40 Web App. Perbedaan
dengan local preview adalah, project Anda akan diupload di cloud kemudian akan
ditampilkan di emulator.
4. Validate Web App – Memvalidasi setiap baris kode yang telah kita buat dalam proyek
Web app.
5. Package Web App – Membuat paket aplikasi .wgt
6. Deploy Web App - Meng-unggah web app ke cloud untuk dilihat melalui browser atau
device. Nanti akan diberikan sebuah tautan singkat untuk dapat diakses langsung melalui
perangkat Seri 40.
7. Deployment Setting – Segala pengaturan proses deployment. Disini Anda
memungkinkan untuk langsung deploy web app langsung ke perangkat Seri 40.
Toolbar
Terdapat juga toolbar yang berisi shortcut untuk mengakses beberapa menu seperti; membuat
proyek baru, debug, Web Developer Channel, sampai pencarian baris kode pada sebuah file.
Web Developer Channel
Web Developer Channel (WDC), memberikan Anda akses ke sumber daya (resource) tambahan
yang akan membantu dalam membangun sebuah aplikasi web (web app). WDC menyediakan
fitur untuk menginstal dan menghapus add-ons juga. Rincianan lengkap tentang fitur dan
panduan tersedia di web developer channel.
15
Pengaturan Web Developer Environment
Ada beberapa pengaturan preferensi yang mungkin ingin Anda mengubahnya untuk memastikan
WDE bekerja dengan baik bagi Anda. Bagian ini menjelaskan bagaimana memodifikasi
pengaturan tersebut.
Memilih Workspace
Secara default WDE menciptakan workspace di sebuah folder di root folder pengguna. Setiap kali
WDE dimulai, dialog yang ditunjukkan pada dibawah ini akan selalu meminta Anda untuk
memilih lokasi workspace. Namun, jika memilih Use this as the default and do not ask again
Anda tidak akan diminta untuk memilih lokasi worskspace lagi.
Sebaiknya Anda memilih lokasi workspace yang mudah di akses dan memindahkan ke drive
selain C untuk keamanan data. Jika Anda ingin merubah lokasi workspace dan ingin menampilkan
kembali dialog Workspace Launcher, Anda cukup meng-klik menu Windows > Preference,
16
kemudian pilih list General > Startup and shutdown > workspace. Selanjutnya centang
Prompt for workspace on startup.
Web Apps preferences
Untuk mengakses preferensi WDE, pada menu klik Window > Preference. WDE menyediakan
empat preferensi global, yang ditunjukkan pada Gambar berikut:
 Deployment - memungkinkan memilih untuk melakukan deployment langsung ke
device.
 Preview - memungkinkan pengaturan pratinjau pada simulator.
 WDC - memungkinkan pengaturan alamat/url untuk konten WDC.
17
Membuat sebuah Proyek Web App
WDE menyediakan tiga metode untuk membuat proyek web app baru:
 Membuat sebuah proyek dari template yang dimuat ke WDE.
 Mengimpor sebuah proyek aplikasi web yang telah dikemas/paket.
 Membuat proyek dari sampel yang diinstal dari WDC.
Membuat sebuah proyek web app baru dari template
Untuk membuat proyek web app, pada WDE klik menu File > New kemudian pilih Series 40 web
app (wgt). Dialog New Series 40 web app terbuka.
Secara default ada 16 template yang tersedia di WDE untuk Seri 40 Web App. Anda bisa coba
membuat project dari masing-masing template yang disediakan. Template yang disediakan
cukup banyak, dari mulai yang standar sampai parsing json dan html.
Setelah template dipilih, klik Next membuka wizard yang memungkinkan informasi dasar
tentang aplikasi web yang akan dimasukkan.
18
Berikut informasi yang dibutuhkan pada halaman ini:
 Project Name - nama untuk proyek tersebut. Nama ini digunakan dalam WDE saja dan
tidak harus sama dengan nama web app yang ditampilkan di browser Ovi.
 Location- ini default lokasi workspace. Dengan mencentang Use default location, proyek
akan disimpan pada lokasi workspace yang Anda pilih.
 Display Name - ini digunakan untuk mengisi kolom nama web app dari file config.xml
dan Display Name ini digunakan sebagai nama aplikasi yang telah jadi.
 Unique Identifier - string default yang dibuat oleh wizard, ini dapat diubah jika
diinginkan. Style identifier adalah berupa alamat web.
 Version # - ini awalnya kosong. Untuk web app yang akan didistribusikan menggunakan
Ovi Store versi harus menggunakan format [major version].[minor version](.[micro
version])
 Short Name – ini yang akan tampil di device, jadi pastikan short name Anda terlihat baik.
Kemudian klik Next untuk melanjutkan mengisi informasi author, lisensi, email, dsb. Anda juga
bisa menyelesaikan langsung dengan meng klik finish.
19
Mengimpor Paket Web Apps
Jika Anda memiliki proyek Web App yang telah Anda buat, dibuat dengan tool lain, download
sampel dari Forum Nokia, atau paket web app yang ingin Anda lihat melalui simulator, Anda
dapat mengimpornya ke WDE.
Untuk mengimpor sebuah web app, pada menu File > New > Import web app. Dalam dialog
Import web app project, klik Browse dan cari file config.xml dalam suatu proyek atau file *.WGT
Setelah paket dipilih, klik Next.
20
Selanjutnya dialog Import web app project, isi seperti membuat proyek baru dari template. Klik
Finish.
21
Web App Simulator
Web App Simulator (WAS) memungkinkan kita untuk meninjau aplikasi yang sedang kita buat
tanpa memerlukan device aslinya. Anda bisa melihat gambaran aplikasi ketika dipasang di
device asli.
Pada Nokia Web Tools versi terdahulu, simulator terpisah dengan WDE, namun di versi 1.5 ke
atas sudah mulai menyatu dengan Web Tools. Sehingga Anda tidak perlu lagi menjalankan
aplikasi secara manual.
Untuk menjalankan aplikasi yang Anda buat, cukup klik kanan project yang dipilih kemudian
Local Preview for Web App Atau dapat mengakses shortcut di sebelah kiri.
Terdapat 3 jenis deployment, yaitu Upload Series 40 Web app, Local Preview for Web app, dan
Cloud Preview for Web app.
1. Upload Series 40 Web App – Meng-unggah web app ke cloud untuk dilihat melalui
browser atau device. Nanti akan diberikan sebuah tautan untuk proyek Anda.
2. Local Preview for Web App – Pratinjau melalui emulator Seri 40 Web App. Anda tidak
perlu membuka emulator terlebih dahulu cukup pilih menu ini maka emulator akan
terbuka dengan sendirinya
3. Cloud Preview for Web App – Pratinjau melalui emulator Seri 40 Web App. Perbedaan
dengan local preview adalah, project Anda akan diupload di cloud kemudian akan
ditampilkan di emulator.
22
Toolbar
Terdapat juga toolbar yang berisi shortcut untuk mengakses beberapa menu, yaitu;
 Reload – Me-refresh aplikasi jika terdapat perubahan kode program pada WDE.
 Location – simulasi lokasi untuk kebutuhan aplikasi yang berbasis lokasi.
 Keyboard – menampilkan on screen keyboard.
 Debugger – fitur ini menyediakan kemampuan untuk melihat informasi log yang
dihasilkan dari web app. Selain itu, fitur Debugger dapat digunakan untuk melihat
informasi tentang elemen-elemen dalam web app.
 Device – memungkinkan pengaturan karakteristik perangkat simulator, seperti versi
device API dan ukuran layar.
23
 Help – menyediakan link ke panduan.
 Settings – memungkinkan pengaturan parameter untuk server proxy dan frekuensi yang
memeriksa versi baru dari simulator.
Debugger
Web Inspektur memungkinkan untuk melihat informasi log yang dihasilkan dari web app. Selain
itu, Web Inspector dapat digunakan untuk melihat informasi tentang elemen-elemen dalam web
app dan memanipulasinya.
Device Setting
Device Settings memungkinkan pengaturan karakteristik perangkat simulator, seperti versi
device API dan ukuran layar. Terdapat beberapa pengaturan device pada simulator,
diantaranya;
 Device APIs – Versi API yang digunakan. Ini tergantung dari versi WDE yang digunakan.
Umumnya terdapat 4 versi yaitu 1.2, 1.5, 2.0, dan 2.3.
 Device Type – Mendefinisikan apakah perangkat simulasi Touch and Typ atau
perangkat non-touch. Untukperangkat non-touch akan diaktifkan pointer mouse untuk
mengakses aplikasi, untuk perangkat Touch ada sebuah ujung jari yang ditampilkan
sebagai pointer. Penggunaan pointer ujung jari dirancang untuk memungkinkan
simulasi ketidakpastian atas titik yang tepat ditekan oleh jari, sehingga kegunaan sentuh
dapat dilihat secara langsung.
24
 Screen resolution – Mendefinisikan resolusi layar yang digunakan dalam simulator.
Resolusi yang tersedia adalah: 240 x 320 piksel dan (untuk non-touch) 320 x 240 piksel.
 Phone language – Mendefinisikan lokalisasi bahasa yang akan digunakan oleh
simulator.
Settings
Sebuah proxy server harus ditetapkan jika computer Anda memerlukan proxy untuk mengakses
internet. Pengaturan proxy seperti layaknya pengaturan proxy di browser.
25
Mobile Web Library (MWL)
Dalam pengembangan S40 Web Apps, terdapat library yang dapat digunakan untuk
membangun aplikasi web yang interaktif untuk Seri 40. Semua MWL yang disediakan berjalan
di browser client Seri 40.
Berikut adalah MWL yang dapat Anda gunakan;
Name Description
addClass() Menambahkan sebuah kelas CSS tertentu dari suatu elemen.
removeClass() Menghapus sebuah kelas CSS dari suatu elemen.
toggleClass() Toggles atribut kelas tertentu dari suatu elemen.
switchClass() Menggabungkan penghapusan satu kelas elemen dan menambahkan
kelas lain dalam satu operasi.
iterateClass() Increment atau decrement nama kelas prefix tertentu dan berlaku
untuk node target.
setGroupTarget() Target satu node dalam grup untuk memiliki kelas yang berbeda.
setGroupNext() Iterates ke elemen berikutnya atau sebelumnya dalam suatu blok
tertentu.
show() Membuat suatu elemen terlihat pada halaman.
hide() Menyembunyikan elemen pada halaman.
toggle() Mengontrol visibilitas elemen, sehingga terlihat jika tersembunyi
dan disembunyikan jika terlihat.
scrollTo() Scroll browser untuk blok dengan ID tertentu.
loadURL() Breaks out dari aplikasi web dan beban sumber daya tertentu
langsung ke jendela Browser Nokia untuk Seri 40.
setInputValue() Update nilai dari input HTML tertentu.
timer() Mengeksekusi perintah sebagai tanggapan atas penembakan timer.
stopTimer() Timer berhenti berjalan.
Untuk lebih jelas, berikut adalah contoh penggunaan MWL untuk membangun aplikasi yang
interaktif;
addClass()
Sampel kode berikut menambahkan sebuah kelas untuk mengubah tampilan dari baris teks.
toogle()
<style type="text/css">
.red_underline {
color:red;
text-decoration: underline;
}
</style>
<div id="addClass_test">
<a onclick="mwl.addClass('#sample_text ', 'red_underline'); return
false;" href="#">
Click to change text below to red & underline.
</a>
<div id="sample_text ">
This is the text that will change
</div>
</div>
26
Dalam sampel kode berikut, konten tambahan bergantian muncul dan menghilang ketika
pengguna mengklik pada link.
show()
Dalam sampel kode berikut, konten tambahan muncul ketika pengguna mengklik link.
Untuk detail lebih lengkap seputar MWL Anda dapat mengunjungi halaman Nokia Developer
melalui tautan berikut http://goo.gl/YKFVO
<div id="toggle_test">
<a id="bm_open_foc" onclick="mwl.toggle('#bookmarks');return false;"
href="#">
Click here to toggle content
</a>
<div class="MWLGroupItem" id="bookmarks" style="display: none">
<ul>
<li><a href="http://www.nokia.com">Nokia</a>
<li><a href="http://www.facebook.com">Facebook</a>
<li><a href="http://www.twitter.com">Twitter</a>
</ul>
</div>
</div>
</div>
<div id="show_test">
<a onclick="mwl.show('#bookmarks_sample');return false;" href="#">
Click here to show more content
</a>
<div class="MWLGroupItem" id="bookmarks_sample" style="display:
none">
<ul>
<li><a href="http://www.nokia.com">Nokia</a>
<li><a href="http://www.facebook.com">Facebook</a>
<li><a href="http://www.twitter.com">Twitter</a>
</ul>
</div>
</div>
27
Menggunakan SMS dan Telp URI
Seri 40 web app versi 1.5 membawa dukungan untuk skema URI yang memungkinkan kita
mengirimkan SMS. Cara kerja Skema URI SMS yang digunakan dalam Seri 40 web app adalah
dengan cara Mengklik link SMS dalam aplikasi dan akan terbuka editor default SMS untuk
mengirimkan pesan langsung kepada penerima.
Anda dapat menggunakan kode html berikut :
<a href="sms:+62812345678">One number, no body text</a>
Anda juga dapat mengirimkan SMS ke 2 nomor sekaligus
<a href="sms:+62812345678,+628123456789">Two numbers, no body
text</a>
Selain itu agar pengguna aplikasi tidak perlu mengetikan SMS secara manual, Anda dapat
menggunakan kode HTML berikut ini untuk mengirimkan SMS ke nomor ponsel dengan isi pesan
“hello world”.
<a href="sms:+62812345678?body=hello%20world">One number with
body text</a>
Untuk menambahkan lebih dari satu nomor ponsel Anda cukup menambahkan koma di akhir
nomor ponsel pertama.
<a
href="sms:+62812345678,+628123456789?body=hello%20world">Two
numbers with body text</a>
Namun, jika Anda menginginkan untuk tidak menambahkan nomor ponsel, hanya menambahkan
isi pesan saja, cukup kosongkan dibagian nomor ponsel.
<a href="sms:?body=hello%20world">Body text, no numbers</a>
Selain berupa hyperlink, Anda juga dapat menggunakan MWL (Mobile Web Library) dengan
event onclick.
<div
onclick="mwl.loadURL('sms:+62812345678?body=hello%20world')">M
WL: Number and body text</div>
Namun perlu dicatat, pada body SMS Anda tidak dapat menggunakan spasi, melainkan harus di-
encode menjadi %20 Untuk melihat hasil nyatanya Anda diharuska mencoba langsung di device
atau simulator Nokia SDK for Java karena jika menggunakan simulator web tools tidak akan
berfungsi.
Berikut pratinjau web app yang telah di unggah menggunakan WDE dan diakses melalui nokia
browser di Nokia SDK for java.
28
Untuk menggunakan Telp URI, Anda cukup menggunakan kode HTML berikut
<a href="tel:+62812345678">Call Me</a>
Yang membedakan nya dari SMS adalah URI “tel” yang akan dibaca oleh Nokia Browser sebagai
perintah untuk memanggil nomor tertentu.
29
Series 40 Screen Orientation
Kebanyakan perangkat Seri 40 yang menjalankan Series 40 Web App menawarkan layar potret,
dalam QVGA resolusi (240 x 320-pixel). Namun, ada juga perangkat Seri 40 yang menawarkan
layar QVGA orientasi landscape. Jika Anda tidak melakukan apapun, Web App Anda akan terus
menampilkan layout dalam format potret pada layar landscape, dengan ruang putih di kedua sisi
konten dan scroll bar.
Ada solusi yang sederhana untuk mengatasi hal tersebut, diantaranya;
 Gunakan format relatif
Untuk setiap konten, seperti tabel, di mana Anda memiliki kemampuan untuk menggunakan
relatif (persentase). Ini berarti konten secara otomatis menyusut atau membentang agar sesuai
dengan lebar layar.
 Buat definisi CSS untuk format landscape dan potret
Anda tidak memiliki pilihan untuk mengatur ukuran relatif konten Anda, Anda harus membuat
definisi CSS untuk mengontrol ukuran. Pada contoh kode kita mengontrol ukuran gambar dalam
CSS kita untuk layar potret .
.imgSz {
width:200px;
height:125px;
}
Sementara di landscape
.imgSz {
width:250px;
height:156px;
}
 Buat kode untuk query ukuran layar dan mengatur file CSS untuk digunakan
Sekarang kita perlu mengatur web app menggunakan CSS untuk devices orientation. Perangkat
Seri 40 tidak memungkinkan untuk switching dinamis orientasi layar, kita hanya perlu
melakukan ini sekali. Kode ini sederhana, yaitu permintaan objek layar dan membaca properti
width.
/**
* Selecting a CSS file based on screen width
*/
if (screen.width > 240) {
document.write('<link rel="stylesheet" href="basicLandscape.css"
type="text/css" />');
}
else {
document.write('<link rel="stylesheet" href="basicPortrait.css"
type="text/css" />');
}
 Menjalankan kode
30
Sekarang kasus sederhana mengeksekusi kode JavaScript dari <head> dari file utama HTML Web
App, seperti yang ditunjukkan di bawah ini.
<head>
<title>Screen size example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
<!-- Common css between the two orientations -->
<link rel="stylesheet" href="common.css" type="text/css" />
<!-- The following script sets and gets the appropriate CSS file
for the screen
orientation -->
<script type="text/javascript" src="screensize.js"></script>
</head>
Dengan CSS yang tepat dalam penggunaan Web App Anda sekarang akan menampilkan
menggunakan layar landscape dengan penuh.
Sekarang Anda dapat memberikan pengguna Web App dengan tampilan yang optimal, terlepas
dari apakah mereka melihatnya di layar landscape atau portrait.
Disetiap template yang disediakan pada Web Tools 2.3 sudah terdapat screen size, jadi Anda
tidak perlu membuat ulang. Cara ini berlaku jika Anda ingin meng-costum screensize.
31
Parsing XML Data BMKG
Pada dasarnya javascript telah support metode-metode untuk melakukan parsing XML dengan
format DOM standar. Namun cara penterjemahan ini kadang-kadang cukup membuat pusing para
developer.
Ternyata jQuery mempunyai kelebihan dalam hal manipulasi DOM dibanding prototype.
Prototype tidak support manipulasi DOM pada responseXML yang dikembalikan pada request
Ajax.
Kali ini kita akan coba parsing data XML dari situs bmkg.go.id yang akan menampilkan informasi
gempa bumi terkini menggunakan jQuery yang mempunyai kemampuan manipulasi DOM di XML
layaknya manipulasi DOM di HTML. 
Berikut langkah singkatnya :
1. Buat sebuah project S40 Web App dengan nama ParsingXML.
2. Buat file javascript baru dengan nama basic.js dengan cara klik kanan project > News
> File.
32
3. Kemudian masukan baris kode berikut:
4. Pada kode di atas, kita akan parsing data xml http://data.bmkg.go.id/propinsi_11_1.xml
5. Jika dilihat dari struktur XML dari link di atas, maka kita dapatkan struktur yang akan kita
ambil datanya :
function init()
{
$(document).ready(function () {
jQuery.support.cors = true;
$.ajaxSetup({
error:function(x,e){
if(x.status==0){
alert('You are offline!!n Please Check
Your Network.');
window.location = 'index.html';
}else if(x.status==404){
alert('Requested URL not found.');
window.location = 'index.html';
}else if(x.status==500){
alert('Internel Server Error.');
window.location = 'index.html';
}else if(e=='parsererror'){
alert('Error.nParsing JSON Request
failed.');
window.location = 'index.html';
}else if(e=='timeout'){
alert('Request Time out.');
window.location = 'index.html';
}else {
alert('Unknow Error.n'+x.responseText);
window.location = 'index.html';
}
}
});
$.ajax({
type: "GET",
url: "http://data.bmkg.go.id/propinsi_11_1.xml",
crossDomain: true,
dataType: "xml",
success: xmlParser
});
});
function xmlParser(xml) {
$('#load').fadeOut();
$(xml).find("Isi").each(function () {
$(xml).find("Row").each(function () {
$("#tampil").append('<h2>' + $(this).find("Kota").text() +
'</h2><b>' + $(this).find("Cuaca").text() + '</b><br> Suhu : ' +
$(this).find("SuhuMin").text() + ' - ' + $(this).find("SuhuMax").text() +
' <span class="superscript">o</span>C<br> Kelembaban : ' +
$(this).find("KelembapanMin").text() + ' - ' +
$(this).find("KelembapanMax").text() + ' %<br>Kec. Angin : ' +
$(this).find("KecepatanAngin").text() + ' (km/jam)<br>Arah Angin : ' +
$(this).find("ArahAngin").text() + '<br /><br />');
});
});
}
}
33
6. Kita dapat mengambil data yang kita inginkan berdasarkan tag, contohnya bisa dilihat
potongan kode berikut.
7. Karena kita akan menampilkan tag suhu yang membutuhkan karakter derajat (o) maka
kita perlu menambahkan class superscript pada css. Tambahkan kode berikut.
8. Selanjutnya panggil jquery dan file basic.js yang telah kita buat di halaman index.html
$(xml).find("Isi").each(function () {
$(xml).find("Row").each(function () {
$("#tampil").append('<h2>' +
$(this).find("Kota").text() + '</h2><b>' +
$(this).find("Cuaca").text() + '</b><br> Suhu : ' +
$(this).find("SuhuMin").text() + ' - ' +
$(this).find("SuhuMax").text() + ' <span
class="superscript">o</span>C<br> Kelembaban : ' +
$(this).find("KelembapanMin").text() + ' - ' +
$(this).find("KelembapanMax").text() + ' %<br>Kec. Angin : ' +
$(this).find("KecepatanAngin").text() + ' (km/jam)<br>Arah
Angin : ' + $(this).find("ArahAngin").text() + '<br /><br
/>');
});
});
.superscript {
font-size: small;
line-height: 0.5em;
vertical-align: baseline;
position: relative;
top: -0.4em;
}
34
9. Tambahkan onload="javascript:init();" pada tag <body> menjadi <body
onload="javascript:init();"> untuk memanggil fungsi pada javascript.
10. Setelah itu buat div kosong dengan id tampil untuk menampilkan data <div
id="tampil"></div>
11. Jalankan di simulator. Makan akan tampil seperti berikut.
Sekarang Anda dapat percantik tampilan dan tambahkan data pada aplikasi, seperti prakiraan
cuaca, info gempa dan bahaya dari bmkg yang dapat Anda ambil dari http://data.bmkg.go.id/ 
Sample code project di atas dapat diunduh disini: http://goo.gl/VunrX
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.
min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript"
src="basic.js"></script>
35
Memanfaatkan API Kateglo
Kateglo merupakan singkatan dari Kamus, Tesaurus, dan Glosarium bahasa Indonesia, sebuah
website berisi database kamus besar bahasa Indonesia. Application programming interface (API)
kateglo memungkinkan para pengembang memanfaatkan data yang disediakan oleh Kateglo.
Untuk saat ini, baru modul kamus yang dapat diakses dengan API ini.
Contoh format :
http://kateglo.bahtera.org/api.php?format=[xml|json]&phrase=[kata]
Contoh penggunaan :
http://kateglo.bahtera.org/api.php?format=xml&phrase=pacar
http://kateglo.bahtera.org/api.php?format=json&phrase=istri
Kedua URL di atas akan menghasilkan semua data yang dimiliki kateglo untuk kata pacar dan
istri.
Untuk memahami struktur JSON Anda dapat menggunakan add ons browser firefox atau chrome
atau dapat menggunakan Online JSON Viewer yang dapat diakses melalui link berikut
http://jsonviewer.stack.hu/
1. Buat sebuah project S40 baru dengan nama project Kamus Indo dan template Tab-
control.
2. Buka index.html. Pada Tab 1 content, sisipkan bari kode berikut:
3. Selanjutnya buat file javascript baru dengan nama basic.js, kita akan mengambil data di
S40 Web app dengan memanfaatkan object XmlHttpRequest. Berikut kode-nya:
<div>
<input type="text" name="istilah" id="istilah"
class="ui-text-input" value="" />
<button onclick="mwl.removeClass('#loader',
'hide');mwl.addClass('#hasil', 'hide');mwl.timer('cariKata',
10, 1, 'cariKata()');" class="ui-button" name="search"
id="search">Search</button>
<div id="loader" class="hide">Please wait...</div>
<div id="hasil"></div>
</div>
36
4. Terakhir, panggil file javascript yang tadi telah dibuat.
function cariKata()
{
var Url =
"http://kateglo.bahtera.org/api.php?format=json&phrase=";
var xhr = null;
if (window.ActiveXObject) {
xhr = new
window.ActiveXObject("Microsoft.XMLHTTP");
}
else {
if (window.XMLHttpRequest) {
xhr = new window.XMLHttpRequest();
}
}
var istilah = document.getElementById('istilah').value;
Url = Url + istilah;
xhr.open('GET', Url, true);
if (xhr.overrideMimeType) {
xhr.overrideMimeType('text/json');
}
xhr.setRequestHeader('Pragma', 'no-cache');
xhr.setRequestHeader('Cache-Control', 'no-cache');
xhr.onreadystatechange = function(){
if (this.readyState == 4) {
if (this.status == 200) {
if (this.responseText != null) {
var jsonData = eval( '(' +
this.responseText + ')' );
var markup =
"<strong>Arti:</strong><ul>";
for( var hasil = 0; hasil <
jsonData.kateglo.definition.length; hasil++)
{
var arti =
jsonData.kateglo.definition[ hasil ];
markup += "<li>" +
arti.def_text + "</li>";
}
markup += "</ul>";
mwl.insertHTML('#hasil', markup);
mwl.removeClass('#hasil',
'hide');
mwl.addClass('#loader', 'hide');
}
else {
mwl.insertHTML('#hasil', "Error,
please try again");
}
}
}
};
xhr.send( null );
}
37
5. Jalankan di simulator
Untuk sample code project di atas, bisa diunduh di sini: http://goo.gl/Jrerv
<script language="javascript" type="text/javascript" src="s40-
theme/js/basic.js"></script>
38
Memasang Iklan di Series 40 Web App
Selain menjual aplikasi, web app bisa kita monetasi dengan cara memasang iklan didalam nya.
tidak banyak layanan iklan yang bisa digunakan. Tapi saya rasa 1 layanan iklan saya rasa sudah
cukup untuk menambah penghasilan developer web app. Untuk memasang iklan di di series 40
web app, berikut langkah singkatnya:
1. Daftar sebagai member di http://inner-active.com atau http://nax.nokia.com
2. Setelah membuat akun dan login, Buat App ID.
3. Setelah itu Anda akan mendapatkan App ID yang nantinya untuk digunakan di aplikasi
kita nanti.
4. Setelah itu buka/buat project aplikasi WebApps Anda. Buka file .html yang ingin di taruh
Iklan.
6. Sisipkan javascript yang telah disediakan oleh inneractive sebagai berikut.
7. Setelah itu buat fungsi javascript iklan.
<script language="javascript" type="text/javascript"
src="http://cdn2.inner-active.mobi/wv-
js/inneractive_nokia_S40.js"></script>
39
8. Agar fungsi iklan yang telah kita buat di-load otomatis ketika aplikasi jalan, maka
tambahkan onload="javascript:iklan();" pada tag <body>, sebagai contoh:
<body onload="javascript:iklan();">
9. Setelah itu buat div ID sesuai deangan parameter di atas untuk menampilkan iklan.
<div id="IklanS40">Load Ads</div>
10. Jalankan aplikasi di simulator
Sample code project iklan bisa diunduh disini: http://goo.gl/m7GfX
<script language="javascript" type="text/javascript">
function iklan() {
//Parameter Wajib
inneractive.parameters.divID = "IklanS40"; // ID DIV
Tampil Iklan
inneractive.parameters.appID =
"KabitaStudio_JadwalTV_Nokia"; // ID App di Inneractive
//Menampilkan Iklan
inneractive.displayInneractiveAd();
}
</script>
40
Uji Coba S40 Web App pada Device
Untuk memastikan aplikasi kita jalan atau tidak di device nokia, maka saya sarankan untuk
mencobanya di device asli atau remote device access. Jika Anda tidak memiliki device, pastikan
aplikasi Anda berjalan di cloud preview atau dapat menggunakan Remote Device Access.
Perlu diingat, file .wgt milik Web apps tidak bisa berjalan langsung di device dengan cara
menyimpan file .wgt di device. Untuk menjalankannya, Anda perlu membuka Nokia Web Tools.
Jika Anda telah memiliki device nokia S40 atau Asha, berikut langkah-langkahnya:
1. Pastikan Anda sudah menginstal dan menjalankan Nokia Suite (jika menggunakan USB)
2. Kemudian koneksikan device ke computer Anda menggunakan Bluetooth atau USB.
3. Pada project, klik kanan project yang akan di deploy > Deploy Web App
4. Jika Anda pertama kali mendeploy aplikasi, Nokia Web Tools akan mengirimkan
Bluetooth/USB Launcher untuk dipasang di device nokia Anda.
5. Kemudian jalankan Bluetooth/USB launcher (Biasanya tesimpan pada folder myapp di
kartu memori)
6. Setelah Bluetooth/USB Launcher jalan, deploy ulang. Maka akan otomatis aplikasi Anda
terbuka.
41
7. Anda juga bisa mengetikan manual di browser device. Ketika deploy, maka akan tampil
juga short url yang dapat Anda akses via browser nokia.
8. Masukan URL di atas ke Nokia Browser Anda, Anda cukup mengetikan url utama saja,
contoh : http://goo.gl/iTg6Hn. Berikut adalah hasil aplikasi yang di uji coba pada
simulator Nokia SDK untuk S40. 
42
Untuk melihat instruksi dan pengaturan lainnya, Anda dapat mengakses Deployment Setting.
43
Series 40
Java Me
44
Instalasi Nokia SDK for Java 2.0
Selain web app, Anda dapat membuat aplikasi untuk series 40 menggunakan bahasa
pemrograman java. Banyak keunggulan yang bisa Anda dapatkan ketika menggunakan java me
untuk membuat aplikasi. Diantaranya; dapat mengakses hampir semua hardware device nokia
seperti kamera, kontak, sms, bisa membuat aplikasi jalan di background layaknya aplikasi chat,
dan lain sebagainya.
Jika Anda sudah terbiasa dengan Java ME atau J2ME tentu akan lebih mudah mengembangkan
aplikasi di platform nokia karena pada dasarnya sama. Untuk menggunakan Nokia SDK, ada
beberapa hal yang perlu Anda siapkan dan lakukan, yaitu:
1. JDK 7 terbaru 32bit (jika Anda menggunakan 64bit, maka Anda harus tetap meng-instal
JDK versi 32 bit).
2. Netbeans 7.1 (pastikan jika Anda meng-unduh di situs oracle pilih yang All Package).
3. Nokia SDK 2.0 (khusus full touch) Atau Nokia SDK versi lebih rendah (untuk type dan
touch & type). Anda bisa mengunduh-nya disini http://goo.gl/O4WSy
4. Nokia Suite (untuk mendeploy ke device, ini tidak wajib Anda Instal)
Setelah mempersiapkan semua tools, selanjutnya ada tahapan instalasi semua tools tersebut.
Yaitu:
1. Instal JDK 7 terlebih dahulu
2. Instal Netbeans
3. Instal Nokia SDK
4. Integrasi Nokia SDK di NetBeans
Saya anggap Anda sudah menyelesaikan instalasi ketiga tools di atas, proses instalasi sama
seperti meng-instal software.
45
Integrasi Nokia SDK dengan NetBeans
Setelah semua ter-instal, selanjutnya adalah konfigurasi Nokia SDK agar terintegrasi dengan
netbeans. Karena secara default di netbeans hanya terdapat java me sdk sun microsystem dengan
simulator yang ‘jadul’ banget. :p
1. Sekarang buka netbeans, kemudian pilih menu Tools > Java Platforms.
2. Pilih Jave Me MIDP Platform Emulator, klik Next.
3. Netbeans akan mendeteksi nokia SDK, jika sudah ditemukan klik Next. Namun apabila
tidak ditemukan pilih Find More Jave ME Platform Folders.
46
4. Tunggu beberapa detik untuk proses integrasi Nokia SDK dengan netbeans.
5. Proses integrasi Nokia SDK dengan NetBeans telah selesai. Klik Finish!
6. Dapat kita lihat, sekarang Nokia SDK 2.0 sudah terintegrasi dengan NetBeans.
7. Selamat koding!
47
Hello World!
Akhirnya sampai juga pada proses pembuatan aplikasi menggunakan Nokia SDK for Java.
Seperti biasa, kalimat yang akan kita buat adalah Hello World! 
Mari kita memulai membuat project baru.
1. Pilih menu File > New Project.
2. Pilih kategori Jave ME > Mobile Application.
3. Tentukan nama dan lokasi folder project. Set as Main Project dan Create Hello MIDlet
biarkan tetap tercentang. Klik Next.
48
4. Pilih Emulator Platform dan Device Nokia menjadi SDK 2.0 Java. Biarkan secara default
Device Configuration dan Device Profile karena sudah sesuai dengan spesifikasi ponsel
Nokia. klik Finish.
5. Klik menu Run > Deploy Main Project untuk menjalankan ke simulator. Atau klik icon
berlogo Play warna hijau.
49
50
Mengenal Simulator Nokia SDK 2.0
Simulator Nokia SDK 2.0 berjalan seperti device nokia asli, Anda dapat memanipulasi berbagai
event dengan simulator ini, misal aplikasi Anda membutuhkan lokasi, sensor gerak, sms, telp,
dsb. ada beberapa yang bisa Anda gunakan, diantaranya;
1. Diagnostics
Diagnostics berfungi untuk melihat lalu lintas data dan log error dari aplikasi yang kita
jalankan. Bisa juga difungsikan untuk debug aplikasi.
2. Location
Route editor pada simulator berfungsi untuk melakukan simulasi lokasi. Hal ini
bermanfaat untuk test aplikasi jika jalan di daerah tertentu.
3. Screen Orientation
51
Anda dapat merubah orientasi layar dari portrait menjadi landscape, begitu sebaliknya.
4. Sensor Simulation
Nokia SDK 2.0 juga mendukung aplikasi dengan dukungan accelerometer. Jadi jika Anda
ingin membuat game balap dengan dukungan sensor gerak untuk kemudi, ini sangat
memungkinkan.
52
Membuat Category Bar
Category bar adalah sebuah menu/tab yang berada di bagian bawah aplikasi. Pada device Full
Touch kartegori bar dibuat untuk mengakses menu-menu. Sehingga tidak perlu membuat
button untuk mengakses suatu form.
Untuk membuat category bar cukup mudah, hanya dibutuhkan beberapa baris kode untuk
membuatnya. Berikut cara singkat membuat category bar.
1. Buat sebuah form baru seperi gambar berikut (cukup drag & drop dari palette disebelah
kanan IDE) :
53
2. Untuk mengisi konten dari masing-masing form, Anda cukup double click pada masing-
masing form. Sehingga konten tersebut akan tampil seperti membuat halaman baru.
3. Tambahkan baris kode barikut pada kelas HelloMIDlet kemudian tambahkan
ElementListener. Contoh:
4. Buat method notifyElementSelected, seperti berikut:
5. Untuk menampilkan category bar tambahkan 2 baris kode berikut pada method
initialize
public class HelloMIDlet extends MIDlet implements
CommandListener, ElementListener {
private boolean midletPaused = false;
private IconCommand sendIconCommand = new
IconCommand("Send", "Send SMS", Command.SCREEN, 1,
IconCommand.ICON_SEND_SMS);
private IconCommand optionsIconCommand = new
IconCommand("Options", "Options", Command.SCREEN, 1,
IconCommand.ICON_OPTIONS);
private IconCommand[] iconCommands = {sendIconCommand,
optionsIconCommand};
private CategoryBar categoryBar = new
CategoryBar(iconCommands, true);
public void notifyElementSelected(CategoryBar cb, int i) {
switch (i) {
case 0:
this.switchDisplayable(null, getForm());
break;
case 1:
this.switchDisplayable(null, getForm1());
break;
default:
;
}
}
54
6. Jika jika jalankan, maka akan tampil seperti berikut:
Untuk merubah icon category bar, pada tahap 3 Anda dapat merubah ICON_SEND_SMS,
ICON_OPTION dengan icon lainnya. Anda juga dapat membuat icon png sendiri, namun yang
ini akan di bahas pada ebook selanjutnya. 
Untuk sample code project Hello World + Category Bar bisa diunduh disini:
http://sdrv.ms/Z8laMx
private void initialize() {
// write pre-initialize user code here
categoryBar.setVisibility(true);
categoryBar.setElementListener(this);
// write post-initialize user code here
}
55
Memanfaatkan Remote Device Access
Layanan Remote Device Access memungkinkan Anda meng-akses ke perangkat Nokia secara
langsung melalui internet. Hal ini menawarkan untuk para developer untuk mempermudah
dalam pengujian dan pengembangan aplikasi.
Anda tidak perlu membeli perangkat Nokia untuk menguji langsung dalam perangkat. Tersedia
hampir semua HP Nokia dengan bermacam OS yang dapat Anda gunakan secara GRATIS!
Penggunaan nya juga sangat mudah, Anda cukup memiliki Akun Nokia Developer kemudian
reservasi device dalam waktu 15-120 menit (Anda bisa memperpanjang reservasi device
tergantung kebutuhan Anda).
Untuk menggunakan Remote Device Access, Anda dapat mengunjungi link berikut ini
http://www.developer.nokia.com/Devices/Remote_device_access/
Untuk mencoba meng-instal aplikasi yang telah Anda buat, Anda cukup klik icon Box Plus
berwarna kuning di atas simulator, kemudian pilih file .wgz. Ikuti instruksi instalasi.
56
Publish Aplikasi ke Nokia Store
Nokia store adalah Toko aplikasi yang disediakan oleh Nokia untuk pengembang aplikasi yang
ingin menjual aplikasinya baik gratis maupun berbayar. Ini adalah bab yang paling penting bagi
pengembang untuk mem-publikasi hasil karya-nya ke seluruh dunia melalui Nokia Store.
Sebelumnya, pastikan Anda memiliki Akun Publisher di Nokia Store. Jika belum memiliki akun,
silahkan daftar di http://info.publish.nokia.com/. Ikuti instruksi yang ada.
Ada beberapa hal yang perlu Anda bersiapkan sebelum publish Aplikasi, diantaranya;
 Nama Aplikasi – Nama yang digunakan harus sama dengan nama aplikasi yang dibuat
 Deskripsi Aplikasi – Berisi keterangan aplikasi, usahakan deskripsi yang singkat dan jelas.
 Icon / Logo – Icon Aplikasi yang akan di publish dengan ukuran Min. 256×256, Max.
2000×2000
 Support Website – Berisi informasi aplikasi yang akan dipublish (bisa membuat blog dari
wordpress/blogspot)
 Screen shot – Screenshot aplikasi yang kita buat dengan ukuran Min. 256×256, Max.
2000×2000
Setelah memiliki semua persiapan telah siap, login ke akun Anda. Anda akan dibawa ke welcome
page.
57
Pilih Create new content untuk meng-submit aplikasi.
Jika yang akan Anda submit adalah S40 Web App makan pilih opsi Series 40 Web App, namun
jika Aplikasi Anda adalah Symbian Web App, maka pilih opsi WRT Widget. Kali ini kita akan
submit S40 Web App.
Selanjutnya halaman pertanyaan hukum, Anda diminta untuk menyetujui ketentuan ketentuan
yang berlaku pada nokia store. Selanjutnya Anda diminta untuk mengisi nama aplikasi, dekripsi,
kata kunci, kategori, dsb.
Pada bagian Global Price Point, pilihan mulai dari 1EUR-100EUR. Namun untuk Indonesia, price
point itu sebesar Rp 3.000, Rp 5.000, Rp 10.000, Rp 15.000, dan Rp 20.000. Ketika Anda memilih
1EUR, maka di Indonesia menjadi Rp. 3000, begitu juga seterusnya.
58
Anda diwajibkan untuk memiliki sebuah support website dan email agar pengguna dapat
menghubungi Anda. Pada bagian icon ukuran nya 256x256 pixel. Sedangkan untuk screen shot
minimal 256x256 dan maksimal 2000 x 2000. Ingat screen shot harus kotak.
Jika telah mengisi semua field, klik Create. Selanjutnya, klik tab Content Files.
Upload file .wgt yang sudah di kemas di WDE. Tahap selanjutnya adalah menentukan device yang
telah kita uji coba. Anda hanya boleh memilih device yang benar-benar sudah Anda uji.
59
Kemudian, Anda harus menentukan Negara mana saja yang akan didistribusikan. Jika konten
Anda hanya berlaku untuk wilayah Indonesia maka Anda hanya boleh memilih Indonesia.
Selanjutnya memilih distribusi bahasa, bahasa apa yang Anda gunakan pada aplikasi yang Anda
submit.
Klik Save jika sudah menyelesaikan tahap ini.
Tahap akhir adalah mengajukan aplikasi untuk di terbitkan di Nokia Store dengan meng-klik
Submit to QA.
60
Dengan meng-klik Submit to QA, aplikasi Anda akan di uji oleh tim Quality Assurance Nokia store.
Jika Aplikasi Anda layak untuk di publikasi dan tidak melanggar apa yang telah ditentukan seperti
HAKI, Pornografi, dan Malware. Aplikasi Anda akan di terbitkan di Nokia Store. Proses QA
biasanya membutuhkan waktu sekitar 1 minggu.
Anda akan diberitahu via email jika Aplikasi Anda telah lolos atau gagal melewati proses QA.
Untuk Aplikasi Java, Anda diharusnya untuk mengirimkan beberapa file pendukung seperti
Flow, dan dokumen deklarasi aplikasi. Semua dokumen dibuat menjadi .zip dan di unggah pada
form dokumen pendukung ketika meng-unggah file .jar dan .jad
Selamat mencoba! 
61
Membuat Banner untuk Promosi Aplikasi
Setelah membuat Aplikasi yang diterbitkan di Nokia Store, tahap selanjutnya adalah memasarkan
aplikasi ke publik. Banyak cara untuk memasarkan aplikasi Anda, mulai dari memasang iklan di
berbagai media online sampai offline.
Nokia telah menyediakan Online Marketing Tool sebagai alat bantu bagi developer yang tidak
memiliki kemampuan desain banner sebagai alat promosi. Anda tidak membutuhkan waktu yang
lama untuk menghasilkan banner yang terlihat profesional. Beriut cara membuatnya:
1. Pastikan aplikasi Anda sudah terbit di Nokia Store.
2. Buka http://snac.nokia.com/2/omt
3. Masukan link aplikasi dan nama aplikasi, maka akan terdapat live preview yang menampilkan
gambaran banner yang akan dibuat.
4. Selanjutnya, Anda dapat menentukan tulisan pada Banner dengan merubah Application Name
dan pada tab Copytext option di sebelah kiri.
5. Agar terlihat elegan, Anda juga bisa mengubah gambar device pada banner, dengan memilih
tab Device Selection.
62
6. Selanjutnya Anda ikuti intstruksi yang Ada. Pada Banner Output Sizes, Anda bisa centang
semua agar pilihan banner lebih banyak.
7. Setelah selesai setup, pilih Generate Banners. Tunggu beberapa saat, OMT akan meng-
generate banyak banner yang siap Anda gunakan sebagai alat promosi.
Untuk meng-unduh semua banner, Anda bisa pilih Download.
63
Penyebab Aplikasi Ditolak di Nokia Store
Bagi rekan-rekan developer yang baru pertama kali submit aplikasi ke Nokia Store mungkin
sempat bingung mengapa aplikasi kita ditolak oleh nokia store dan tidak tahu bagaimana cara
memperbaiki agar aplikasi yang kita submit lolos QA Nokia Store.
Sebetulnya ketika kita ditolak, tim QA Nokia Store akan memberikan solusi dan keterangan jelas
mengapa dan bagaimana agar aplikasi kita masuk Nokia Store. Tapi sebelum kita ditolak,
sebaiknya kita siapkan dulu secara matang aplikasi yang akan kita submit.
Berikut adalah beberapa penyebab aplikasi kita ditolak di Nokia Store;
1. Aplikasi tidak berjalan baik di Device
Masalah ini sudah jelas, karena aplikasi yang masuk nokia store akan diuji coba terlebih
dahulu untuk dipastikan berjalan baik di ponsel pengguna.
Jika aplikasi kamu menggunakan Java Me, pastikan file jad dan jar adalah satu project,
bukan dari project berbeda. Jika aplikasi kamu menggunakan Web Apps, pastikan
aplikasi berjalan baik di browser nokia. Misal desain yang harus sesuai ketika kita
develop aplikasi dan berjalan di ponsel.
Jika kamu tidak memiliki device nokia, kamu bisa memanfaatkan simulator Nokia SDK
for Java atau Remote Device Access.
2. Bahasa dan Distribusi Aplikasi
Jika aplikasi kamu menggunakan bahasa Indonesia, maka pastikan kamu hanya memilih
bahasa “Indonesia” saja atau jika aplikasi kamu berbahasa inggris maka kamu pilih
“English”. Kecuali aplikasi kamu mendukung lokalisasi yang dapat berjalan disemua
bahasa.
Selain bahasa, aplikasi kamu juga harus didistribusikan sesuai market aplikasi yang
kamu dukung. Misal aplikasi kamu hanya untuk pengguna ponsel di Indonesia, maka
pastikan kamu hanya memilih Country “Indonesia” saja. Namun jika aplikasi kamu bisa
digunakan untuk semua pengguna ponsel di dunia (contoh aplikasi youtube, twitter,
utiliti, dll) maka kamu dapat mendistribusikan ke semua negara. Intinya sesuaikan
dengan market aplikasi kamu.
64
Saya sarankan jangan memilih negara china, karena peraturan di china cukup ketat.
Misal aplikasi yang berbasis lokasi tidak di ijinkan untuk didistribusikan di negara china.
Bahkan saya dengar harus berbahasa china juga. CMIIW.
3. Aplikasi Crash atau Force Close
Hal ini sama seperti poin nomor 1, pastikan aplikasi kamu memiliki sedikit bug. Jangan
sampai ketika aplikasi baru dijalankan sudah force close.
4. Nama Aplikasi berbeda dengan Nama di Nokia Store
Masalah ini cukup banyak saya temui, nama aplikasi di Nokia Store (Display Name) dan
nama aplikasi di ponsel berbeda. Misal di website nokia publish menuliskan pada field
Display Name adalah “Daily Quote” tapi ketika aplikasi dipasang di ponsel nama
aplikasinya “Kata Mutiara”. Untuk memastikan, jika kamu menggunakan Java Me harap
merubah “Application Descriptor”. Jika kamu menggunakan Web Apps, pastikan nama
aplikasi di file config.xml sudah sesuai.
5. Halaman About dan Help
Jika kamu develop aplikasi menggunakan Java Me, hal ini wajib untuk ada didalam
aplikasi. Halaman about berisi deskripsi aplikasi, versi, dan nama developer serta
halaman help berisi bagaimana aplikasi kamu bekerja. Namun jika kamu menggunakan
Web App, ini tidak wajib. Tapi sangat disarankan agar pengguna tahu aplikasi ini dibuat
oleh siapa dan bagaimana cara menggunakannya.
6. Privacy Policy
Jika aplikasi kamu menggunakan sistem login dan lokasi, hal ini adalah merupakan
kewajiban untuk membuat sebuah file .txt untuk diunggah yang berisikan bahwa
aplikasi kamu tidak akan menyimpan password, lokasi, data pengguna, dan lain
sebagainya. Setiap aplikasi biasanya memiliki Privacy Policy yang berbeda, jadi silahkan
sesuaikan sendiri.
Contoh privacy policy:
This application does not collect, store nor transmit any personally identifying
information. No information will be used to identify you, nor your browsing behavior. No
information will be published or disclosed. Ads by Inneractive.
65
7. Penggunaan Merek dan Hak Cipta
Masalah ini juga cukup sering saya temui, nokia store sangat menghargai HAKI sehingga
developer yang menggunakan merek yang terlah terdaftar harus mendapatkan izin
terlebih dahulu dari pihak yang bersangkutan. Misal membuat aplikasi tentang SNSD /
Justin Bieber atau menggunakan nama Facebook / Microsoft. Jangankan nama,
menggunakan logo Windows, atau MS Office saja tidak boleh.
Hal ini sering kali ditolak karena aplikasi yang dipublish ke nokia store harus dari
manajemen artis / pihak yang bersangkutan atau telah memiliki izin secara tertulis dari
pihak bersangkutan.
66
Kesimpulan
Setelah mencoba mengembangkan aplikasi Nokia baik Web App maupun Java ME, terkadang
developer yang baru memulai megembangkan aplikasi mobile bingung memilih web app atau
java me. Itu semua tergantung pada kemampuan masing-masing.
Web app menggunakan bahasa yang lebih sederhana yaitu html, css, dan javascript. Web based
relative lebih mudah untuk dipelajari dan dalam pembuatan aplikasi lebih cepat dibandingkan
java me. Namun walaupun mudah, Anda tidak bisa begitu bisa banyak bereksplorasi dalam
pembuatan aplikasi. Karena web app tidak bisa mengakses API hardware perangkat nokia
seperti kamera, kontak, sistem file, sampai berjalan di background layaknya aplikasi chat.
Berbeda dengan Java Me, Anda bisa lebih banyak bereksplorasi menggunakan API yang
disediakan oleh perangkat nokia. Namun dalam proses pembuatannya terkadang lebih mudah,
walaupun ada beberapa orang yang justru menganggap membuat aplikasi native lebih mudah
daripada web based.
Lalu bagaimana cara memulai mengembangkan aplikasi di platform Nokia?
Bagi yang merasa baru dalam dunia mobile, saya sarankan untuk memulai di web app, dari situ
Anda mungkin akan merasakan keterbatasan dan akan mencoba tantangan baru dengan
mempelajari Java ME atau bahkan game.
Demikian buku singkat dari saya, semoga bermanfaat. Mohon maaf jika ada kesalahan
penulisan, pembahasan maupun materi, karena saya sendiri masih dalam tahap belajar.
Semua sample code bisa Anda unduh melalui tautan berikut: http://sdrv.ms/14bwZX5
Anda juga dapat meng-unduh sample code Web App di situs resmi Developer Nokia:
 Web App: http://goo.gl/txyn2
 Java Me: http://goo.gl/SD85i
Video Training Web App dan Java ME: http://goo.gl/lPsSh
Semoga bermanfaat, selamat koding! 
67
SEKIAN 

Weitere ähnliche Inhalte

Was ist angesagt? (8)

Modul Open Office Calc
Modul Open Office CalcModul Open Office Calc
Modul Open Office Calc
 
Dani r taufani mengolah data dengan access 2007
Dani r taufani   mengolah data dengan access 2007Dani r taufani   mengolah data dengan access 2007
Dani r taufani mengolah data dengan access 2007
 
Modul Open Office Impress
Modul Open Office ImpressModul Open Office Impress
Modul Open Office Impress
 
Modul as pdot-net-2015
Modul as pdot-net-2015Modul as pdot-net-2015
Modul as pdot-net-2015
 
Panduan Ms access 2007 lengkap
Panduan Ms access 2007 lengkapPanduan Ms access 2007 lengkap
Panduan Ms access 2007 lengkap
 
Makalah Web Programming 1
Makalah Web Programming 1Makalah Web Programming 1
Makalah Web Programming 1
 
Sistem Informasi Kasir
Sistem Informasi KasirSistem Informasi Kasir
Sistem Informasi Kasir
 
Surya university elearning user guide
Surya university elearning user guideSurya university elearning user guide
Surya university elearning user guide
 

Andere mochten auch

Andere mochten auch (7)

Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika AldabaLightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba
Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba
 
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job? Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?
 
The impact of innovation on travel and tourism industries (World Travel Marke...
The impact of innovation on travel and tourism industries (World Travel Marke...The impact of innovation on travel and tourism industries (World Travel Marke...
The impact of innovation on travel and tourism industries (World Travel Marke...
 
Open Source Creativity
Open Source CreativityOpen Source Creativity
Open Source Creativity
 
Reuters: Pictures of the Year 2016 (Part 2)
Reuters: Pictures of the Year 2016 (Part 2)Reuters: Pictures of the Year 2016 (Part 2)
Reuters: Pictures of the Year 2016 (Part 2)
 
The Six Highest Performing B2B Blog Post Formats
The Six Highest Performing B2B Blog Post FormatsThe Six Highest Performing B2B Blog Post Formats
The Six Highest Performing B2B Blog Post Formats
 
The Outcome Economy
The Outcome EconomyThe Outcome Economy
The Outcome Economy
 

Ähnlich wie Panduan membuat aplikasi nokia series 40 (web app & java me)

Pemanfaatan aplikasi internet berbasis teknologi irc dan voip sebagai sarana ...
Pemanfaatan aplikasi internet berbasis teknologi irc dan voip sebagai sarana ...Pemanfaatan aplikasi internet berbasis teknologi irc dan voip sebagai sarana ...
Pemanfaatan aplikasi internet berbasis teknologi irc dan voip sebagai sarana ...
Yoshua Habibnur
 
Panduan lengkap php ajax j query
Panduan lengkap php ajax j queryPanduan lengkap php ajax j query
Panduan lengkap php ajax j query
apriatin
 
Menjadi webmasterdalam30hari
Menjadi webmasterdalam30hariMenjadi webmasterdalam30hari
Menjadi webmasterdalam30hari
Adi Utami
 
Lks tik-kelas-ix-internet
Lks tik-kelas-ix-internetLks tik-kelas-ix-internet
Lks tik-kelas-ix-internet
Fauzi Din
 
Membuat Multiaplikasi menggunakan VB6
Membuat Multiaplikasi menggunakan VB6Membuat Multiaplikasi menggunakan VB6
Membuat Multiaplikasi menggunakan VB6
Nurdin Al-Azies
 
Bahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP Inventor
Bahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP InventorBahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP Inventor
Bahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP Inventor
TeukuMahawira
 

Ähnlich wie Panduan membuat aplikasi nokia series 40 (web app & java me) (20)

Rekayasa Web 1-Teknologi Website
Rekayasa Web 1-Teknologi WebsiteRekayasa Web 1-Teknologi Website
Rekayasa Web 1-Teknologi Website
 
Pemanfaatan aplikasi internet berbasis teknologi irc dan voip sebagai sarana ...
Pemanfaatan aplikasi internet berbasis teknologi irc dan voip sebagai sarana ...Pemanfaatan aplikasi internet berbasis teknologi irc dan voip sebagai sarana ...
Pemanfaatan aplikasi internet berbasis teknologi irc dan voip sebagai sarana ...
 
Proposal penjualan toko online asia dress shop
Proposal penjualan toko online asia dress shopProposal penjualan toko online asia dress shop
Proposal penjualan toko online asia dress shop
 
Panduan lengkap php ajax j query
Panduan lengkap php ajax j queryPanduan lengkap php ajax j query
Panduan lengkap php ajax j query
 
Laporan 3
Laporan 3Laporan 3
Laporan 3
 
Proposal penjualan toko online asia dress berbasis java dekstop
Proposal penjualan toko online asia dress berbasis java dekstopProposal penjualan toko online asia dress berbasis java dekstop
Proposal penjualan toko online asia dress berbasis java dekstop
 
Tugas individu Rekweb 1
Tugas individu Rekweb 1Tugas individu Rekweb 1
Tugas individu Rekweb 1
 
Menjadi webmasterdalam30hari
Menjadi webmasterdalam30hariMenjadi webmasterdalam30hari
Menjadi webmasterdalam30hari
 
E commerce dengan php mysql.docx
E commerce dengan php mysql.docxE commerce dengan php mysql.docx
E commerce dengan php mysql.docx
 
Cara Membuat Program Chatting Sederhana Dengan Visual Basic (Program 4)
Cara Membuat Program Chatting Sederhana Dengan Visual Basic (Program 4)Cara Membuat Program Chatting Sederhana Dengan Visual Basic (Program 4)
Cara Membuat Program Chatting Sederhana Dengan Visual Basic (Program 4)
 
Lks tik-kelas-ix-internet
Lks tik-kelas-ix-internetLks tik-kelas-ix-internet
Lks tik-kelas-ix-internet
 
Membangun aplikasi client server dengan java
Membangun aplikasi client server dengan javaMembangun aplikasi client server dengan java
Membangun aplikasi client server dengan java
 
Framework codeigniter 2
Framework codeigniter 2Framework codeigniter 2
Framework codeigniter 2
 
Belajar PHP Framework CodeIgniter 2.x
Belajar PHP Framework CodeIgniter 2.xBelajar PHP Framework CodeIgniter 2.x
Belajar PHP Framework CodeIgniter 2.x
 
Membuat Multiaplikasi menggunakan VB6
Membuat Multiaplikasi menggunakan VB6Membuat Multiaplikasi menggunakan VB6
Membuat Multiaplikasi menggunakan VB6
 
Pengenalan Codeigniter
Pengenalan Codeigniter Pengenalan Codeigniter
Pengenalan Codeigniter
 
Swing excerpt
Swing excerptSwing excerpt
Swing excerpt
 
Membangun aplikasi java restful web service menggunakan spring web mvc
Membangun aplikasi java restful web service menggunakan spring web mvcMembangun aplikasi java restful web service menggunakan spring web mvc
Membangun aplikasi java restful web service menggunakan spring web mvc
 
Bahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP Inventor
Bahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP InventorBahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP Inventor
Bahan Ajar Pemograman Web dan Perangkat Bergerak dengan APP Inventor
 
Tugas i rekayasa web arie firmandani
Tugas i rekayasa web arie firmandaniTugas i rekayasa web arie firmandani
Tugas i rekayasa web arie firmandani
 

Kürzlich hochgeladen

Contoh PPT Seminar Proposal Teknik Informatika.pptx
Contoh PPT Seminar Proposal Teknik Informatika.pptxContoh PPT Seminar Proposal Teknik Informatika.pptx
Contoh PPT Seminar Proposal Teknik Informatika.pptx
IvvatulAini
 
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdfAksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
JarzaniIsmail
 
PPT SOSIALISASI PENGELOLAAN KINERJA GURU DAN KS 2024.pptx
PPT SOSIALISASI PENGELOLAAN KINERJA GURU DAN KS 2024.pptxPPT SOSIALISASI PENGELOLAAN KINERJA GURU DAN KS 2024.pptx
PPT SOSIALISASI PENGELOLAAN KINERJA GURU DAN KS 2024.pptx
MaskuratulMunawaroh
 
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.pptHAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
nabilafarahdiba95
 
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptxBAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
JuliBriana2
 

Kürzlich hochgeladen (20)

KELAS 10 PERUBAHAN LINGKUNGAN SMA KURIKULUM MERDEKA
KELAS 10 PERUBAHAN LINGKUNGAN SMA KURIKULUM MERDEKAKELAS 10 PERUBAHAN LINGKUNGAN SMA KURIKULUM MERDEKA
KELAS 10 PERUBAHAN LINGKUNGAN SMA KURIKULUM MERDEKA
 
PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...
PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...
PELAKSANAAN + Link2 Materi BimTek _PTK 007 Rev-5 Thn 2023 (PENGADAAN) & Perhi...
 
Modul Ajar IPAS Kelas 4 Fase B Kurikulum Merdeka [abdiera.com]
Modul Ajar IPAS Kelas 4 Fase B Kurikulum Merdeka [abdiera.com]Modul Ajar IPAS Kelas 4 Fase B Kurikulum Merdeka [abdiera.com]
Modul Ajar IPAS Kelas 4 Fase B Kurikulum Merdeka [abdiera.com]
 
Prov.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdf
Prov.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdfProv.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdf
Prov.Jabar_1504_Pengumuman Seleksi Tahap 2_CGP A11 (2).pdf
 
Contoh PPT Seminar Proposal Teknik Informatika.pptx
Contoh PPT Seminar Proposal Teknik Informatika.pptxContoh PPT Seminar Proposal Teknik Informatika.pptx
Contoh PPT Seminar Proposal Teknik Informatika.pptx
 
Latihan Soal untuk US dan Tryout SMP 2024
Latihan Soal untuk  US dan Tryout SMP 2024Latihan Soal untuk  US dan Tryout SMP 2024
Latihan Soal untuk US dan Tryout SMP 2024
 
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdfAksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
Aksi Nyata Sosialisasi Profil Pelajar Pancasila.pdf
 
PPT SOSIALISASI PENGELOLAAN KINERJA GURU DAN KS 2024.pptx
PPT SOSIALISASI PENGELOLAAN KINERJA GURU DAN KS 2024.pptxPPT SOSIALISASI PENGELOLAAN KINERJA GURU DAN KS 2024.pptx
PPT SOSIALISASI PENGELOLAAN KINERJA GURU DAN KS 2024.pptx
 
668579210-Visi-Gp-Berdasarkan-Tahapan-Bagja.pdf
668579210-Visi-Gp-Berdasarkan-Tahapan-Bagja.pdf668579210-Visi-Gp-Berdasarkan-Tahapan-Bagja.pdf
668579210-Visi-Gp-Berdasarkan-Tahapan-Bagja.pdf
 
Prakarsa Perubahan dan kanvas ATAP (1).pptx
Prakarsa Perubahan dan kanvas ATAP (1).pptxPrakarsa Perubahan dan kanvas ATAP (1).pptx
Prakarsa Perubahan dan kanvas ATAP (1).pptx
 
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.pptHAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
HAK DAN KEWAJIBAN WARGA NEGARA ppkn i.ppt
 
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA.pdfMODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA.pdf
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA.pdf
 
PANDUAN PENGEMBANGAN KSP SMA SUMBAR TAHUN 2024 (1).pptx
PANDUAN PENGEMBANGAN KSP SMA SUMBAR TAHUN 2024 (1).pptxPANDUAN PENGEMBANGAN KSP SMA SUMBAR TAHUN 2024 (1).pptx
PANDUAN PENGEMBANGAN KSP SMA SUMBAR TAHUN 2024 (1).pptx
 
MODUL AJAR MATEMATIKA KELAS 3 KURIKULUM MERDEKA.pdf
MODUL AJAR MATEMATIKA KELAS 3 KURIKULUM MERDEKA.pdfMODUL AJAR MATEMATIKA KELAS 3 KURIKULUM MERDEKA.pdf
MODUL AJAR MATEMATIKA KELAS 3 KURIKULUM MERDEKA.pdf
 
PPT Mean Median Modus data tunggal .pptx
PPT Mean Median Modus data tunggal .pptxPPT Mean Median Modus data tunggal .pptx
PPT Mean Median Modus data tunggal .pptx
 
Panduan Memahami Data Rapor Pendidikan 2024
Panduan Memahami Data Rapor Pendidikan 2024Panduan Memahami Data Rapor Pendidikan 2024
Panduan Memahami Data Rapor Pendidikan 2024
 
PPT MODUL 6 DAN 7 PDGK4105 KELOMPOK.pptx
PPT MODUL 6 DAN 7 PDGK4105 KELOMPOK.pptxPPT MODUL 6 DAN 7 PDGK4105 KELOMPOK.pptx
PPT MODUL 6 DAN 7 PDGK4105 KELOMPOK.pptx
 
AKSI NYATA Numerasi Meningkatkan Kompetensi Murid_compressed (1) (1).pptx
AKSI NYATA  Numerasi  Meningkatkan Kompetensi Murid_compressed (1) (1).pptxAKSI NYATA  Numerasi  Meningkatkan Kompetensi Murid_compressed (1) (1).pptx
AKSI NYATA Numerasi Meningkatkan Kompetensi Murid_compressed (1) (1).pptx
 
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptxBAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
BAB 5 KERJASAMA DALAM BERBAGAI BIDANG KEHIDUPAN.pptx
 
Pengenalan Figma, Figma Indtroduction, Figma
Pengenalan Figma, Figma Indtroduction, FigmaPengenalan Figma, Figma Indtroduction, Figma
Pengenalan Figma, Figma Indtroduction, Figma
 

Panduan membuat aplikasi nokia series 40 (web app & java me)

  • 1.
  • 2. 1 Daftar Isi Daftar Isi..................................................................................................................................................1 Kata Pengantar........................................................................................................................................3 Sekilas Tentang Seri 40 Web App............................................................................................................5 Sekilas Tentang Nokia Web Tools...........................................................................................................7 Kebutuhan Sistem...............................................................................................................................7 Persiapan Pengembangan ..................................................................................................................7 Instalasi Nokia Web Tools.......................................................................................................................8 Antar Muka Web Developer Environment (WDE)................................................................................12 Menu Pilihan.....................................................................................................................................12 Toolbar..............................................................................................................................................14 Web Developer Channel...................................................................................................................14 Pengaturan Web Developer Environment........................................................................................15 Memilih Workspace......................................................................................................................15 Web Apps preferences..................................................................................................................16 Membuat sebuah Proyek Web App......................................................................................................17 Membuat sebuah proyek web app baru dari template....................................................................17 Mengimpor Paket Web Apps............................................................................................................19 Web App Simulator...............................................................................................................................21 Toolbar..............................................................................................................................................22 Debugger...........................................................................................................................................23 Device Setting ...................................................................................................................................23 Settings..............................................................................................................................................24 Mobile Web Library (MWL) ..................................................................................................................25 Menggunakan SMS dan Telp URI..........................................................................................................27 Series 40 Screen Orientation ...............................................................................................................29 Parsing XML Data BMKG.......................................................................................................................31 Memanfaatkan API Kateglo ..................................................................................................................35 Memasang Iklan di Series 40 Web App.................................................................................................38 Uji Coba S40 Web App pada Device......................................................................................................40 Instalasi Nokia SDK for Java 2.0 ............................................................................................................44 Integrasi Nokia SDK dengan NetBeans .................................................................................................45 Hello World!..........................................................................................................................................47
  • 3. 2 Mengenal Simulator Nokia SDK 2.0 ......................................................................................................50 Membuat Category Bar.........................................................................................................................52 Memanfaatkan Remote Device Access.................................................................................................55 Publish Aplikasi ke Nokia Store.............................................................................................................56 Membuat Banner untuk Promosi Aplikasi............................................................................................61 Penyebab Aplikasi Ditolak di Nokia Store.............................................................................................63 Kesimpulan............................................................................................................................................66
  • 4. 3 Kata Pengantar Semakin berkembangnya Ilmu Pengetahuan dan Teknologi (IPTEK), dan diiringi juga dengan perkembnagan zaman yang cepat, sehingga tidak menutup kemungkinan berpengaruh pada pola kehidupan manusia yang semakin maju terutama pada aspek kehidupan keseharian, dalam menggunakan teknologi, khususnya penggunaan teknologi telepon selular. Mengingat semakin padatnya aktifitas di kehidupan zaman modern ini, maka tidak dipungkiri lagi membuat keterbatasan dalam setiap hal kehidupan sehari-hari. Misalnya keterbatasan untuk mengetaui informasi cuaca, jadwal televisi, bioskop, sampai informasi penerbangan. Sepeti yang kita ketahui untuk memudahkan masalah tersebut, fasilitas telepon selular dengan aplikasi internet pada zaman sekarang ini semakin bertumbuh pesat setiap tahunnya, adalah salah satu solusi yang dapat memudahkan pengguna untuk mengakses atau mendapatkan informasi ter-update secara online melalui perangkat telpon selular. Kebutuhan akan aplikasi mobile pun semakin banyak diirigi dengan semakin banyaknya pengguna telepon seluler di dunia khususnya di Indonesia. Terlebih lagi Nokia Indonesia telah bekerja sama dengan 3 operator besar untuk memberikan layanan pembelian konten premium di Nokia Store. Hal ini tentu memberi kesempatan lebih besar kepada para pengembang aplikasi lokal untuk mendapat penghasilan dengan menjual aplikasi melalui nokia store. Buku ini hanya membahas bagaimana cara memulai mengembangkan aplikasi di platform Series 40 khususnya di seri Nokia Asha. Terdapat 2 bagian pembahasan, yaitu series 40 web apps dan java me. Namun untuk java me saya hanya membahasnya sedikit saja, mengingat pengalaman saya yang masih kurang banyak di bidang java me. Harapan penulis, buku ini dapat memberikan pengetahuan seputar teknologi Seri 40 Web App dan Java ME dan dapat menghasilkan aplikasi-aplikasi baru di nokia sore yang men-dunia yang dibuat oleh pengembang lokal. Jika ada pertanyaan, kritik dan saran, penulis dapat dihubungi via email moh.iqbal@outlook.com atau facebook /ciebal dan twitter @ciebal. Terima kasih. Bandung, 10 April 2013 Mohamad Iqbal Nokia Developer Champion Nokia Developer Certified Trainer
  • 6. 5 Sekilas Tentang Seri 40 Web App Series 40 Web app merupakan aplikasi web yang diunggah ke cloud untuk dapat diakses melalui Nokia Browser. Series 40 web app memberikan kemudahan pengkodean terbaik untuk menciptakan aplikasi web yang memberikan pengalaman pengguna yang sangat baik. Beberapa ponsel Series 40 tidak memiliki kekuatan pemrosesan dan memori untuk menjalankan browser standar langsung pada perangkat. Oleh karena itu, perangkat Seri 40 memiliki model web browser atau terdistribusi berbasis proxy yang memungkinkan rendering halaman penuh. Browser Nokia untuk series 40 Proxy server berkomunikasi dengan website atas nama Browser Nokia untuk series 40 klien di telepon. Server melakukan proses-intensif tugas yang berhubungan dengan halaman web rendering, seperti menjalankan script dan gambar mengubah ukuran. Server akan mengirimkan isi klien web yang dioptimalkan, mengurangi payload dan streamlined untuk rendering. Gambar dibawah ini menunjukkan gambaran dari arsitektur Browser Nokia untuk Series 40. Sebuah fitur unik dari Browser Nokia untuk series 40 di antara proxy berbasis browser adalah bahwa beberapa kode JavaScript dapat dijalankan pada perangkat nokia. Fitur ini memungkinkan Series 40 web app untuk menawarkan pengalaman pengguna yang ditingkatkan melalui antarmuka pengguna dinamis dengan fitur seperti transisi. Kode HTML dan JavaScript di Series 40 web app diproses pada server proxy saja. Server mempersiapkan semua konten untuk handset, mengubahnya ke HTML yang dioptimalkan dan memberikan kode JavaScript yang menggunakan MWL (Mobile Web Library) Javascrpit library. MWL berisi kode untuk mendukung aplikasi-seperti interaksi di telepon. Pengolahan MWL biasanya hanya JavaScript yang dieksekusi di telepon. Karena series 40 web app berjalan di cloud bukan stand alone di perangkat nokia, maka setiap aplikasi baik statis maupun dinamis (mengakses berbagai API), ketika diakses oleh pengguna maka pengguna harus menggunakan akses internet. Berikut adalah skema dan komponen dalam pembuatan Seri 40 Web app. Terdapat beberapa file inti yang di paket menjadi sebuah aplikasi. WWW Nokia Browser for Series 40 Proxy Server Nokia Browser for Series 40 Client (Phone)HTML, CSS, Javascript, Images, XML, JSON, etc Optimised content (HTML, CSS, compressed images)
  • 7. 6
  • 8. 7 Sekilas Tentang Nokia Web Tools Nokia Web Tools merupakan kakas untuk membuat aplikasi mobile Seri 40 web app dengan cepat dan mudah. Kakas untuk membuat, mengedit, pengujian, pengemasan, dan deploy web app sehingga siap untuk distribusi di Nokia Store. Nokia Web Tools dapat berjalan pada system operasi Microsoft Windows, Apple OSX, dan Linux Ubuntu.  Web Developer Environment (WDE) - dibangun di atas platform Eclipse dan Aptana Studio; WDE memanfaatkan fitur editing, packaging, dan deploying aplikasi web yang menawan. Fitur dari WDE untuk menciptakan aplikasi web Seri 40 dan Symbian akan kita bahas dalam bab berikutnya.  Web App Simulator (WAS) - alat ini memungkinkan pratinjau aplikasi web dan berguna untuk untuk debugging yang dapat dilihat pada komputer. Aplikasi yang sudah Anda buat dapat dijalankan melalui WAS tanpa membutuhkan device.  Web Developer Channel (WDC) - resource ini tertanam dalam WDE dan menyediakan akses online ke berbagai sumber daya dari Nokia yang akan membantu dalam pengembangan aplikasi web. Kebutuhan Sistem Untuk penggunaan Nokia Web Tools ini ada beberapa kebutuhan software dan hardware yang harus terpenuhi, diantaranya :  Windows – 512 MB RAM, Pentium 4-level processor  Mac OS X – 512 MB RAM, PowerPC G4/G5, Intel or Mac OS X 10.4+  Linux – 512 MB RAM, Pentium 4-level processor Persiapan Pengembangan Untuk memulai pengembangan dan belajar membuat aplikasi menggunakan Nokia Web Tools, kemampuan dasar yang Anda butuhkan adalah menguasasi HTML, CSS, dan Javascript. Pastikan ketiga bahasa tersebut sudah Anda kuasai sebelum memulai membangun sebuah aplikasi web. Karena dibuku ini saya tidak akan membahas secara detail tentang ketiga hal tersebut. 
  • 9. 8 Instalasi Nokia Web Tools Pada proses instalasi ini, saya menggunakan Nokia Web Tools versi 2.3 untuk OS Windows. Berikut ini langkah-langkahnya: 1. Unduh Nokia Web Tools di http://goo.gl/1xAcB pilih tool berdasarkan OS yang Anda gunakan. 2. Klik dua kali file installer Nokia Web Tools yang telah Anda unduh. Kemudian akan memperoleh kotak dialog seperti gambar di bawah. Klik tombol Next untuk memulai Instalasi. 3. Kemudian Akan memperoleh kotak dialog “License Agreement” seperti gambar berikut: 4. Pilih opsi “I accept the terms of the License Agreement” Klik tombol Next.
  • 10. 9 5. Selanjutnya akan opsi ada Geographic location, pilih Rest of the world 6. Kemudian Anda akan memperoleh kotak dialog seperti gambar dibawah ini. Pilih folder tempat Nokia Web Tools akan di-instal. Klik Install. 7. Sistem akan melakukan proses instalasi sesuai dengan module yang dipilih.
  • 11. 10 8. Jika proses instalasi selesai. Klik tombol Finish. 9. Nokia Web Tools Anda siap digunakan. 
  • 12. 11 Gambar di atas adalah antar muka dari Web Developer Environment (WDE). Dengan WDE kita dapat membuat aplikasi Nokia berbasis web. WDE juga menawarkan kemudahan bagi programmer dalam melakukan debugging.
  • 13. 12 Antar Muka Web Developer Environment (WDE) Bagi yang sudah cukup mengenal Eclipse, maka sudah tidak asing dengan antar muka seperti WDE, karena WDE dibangun dalam framework eclipse dan memanfaatkan antarmuka eclipse untuk yang dibutuhkan untuk membuat aplikasi web. Bagi Anda yang masih asing dengan antar muka WDE, mari kita mengenal fungsi dari masing-masing tombol dan navigasi pada WDE. 1. Menu and toolbar - Menyediakan akses ke fitur WDE 2. Project explorer - Berisi aplikasi proyek web dan memungkinkan membuka akses ke file proyek. 3. Editor area – Untuk menambahkan/men-sunting baris kode html, css, dan javascript. 4. Shortcut – Berisi shortcut penting dalam WDE. 5. Outline view - Memberikan garis dari file yang ditampilkan dalam panel editor. 6. Information area - Menyediakan umpan balik tentang masalah yang ditemukan dalam proyek-proyek aplikasi web, output konsol dan task manager. Menu Pilihan WDE memiliki antaramuka dan menu standar eclipse, beberapa fungsi menu pada WDE adalah;  Membuat dan impor proyek web app pada menu File.
  • 14. 13  Melihat informasi pada menu Help.  Akses lebih banyak fitur WDE pada menu Project Explorer. 1. Upload Series 40 Web App – Meng-unggah web app ke cloud untuk dilihat melalui browser atau device. Nanti akan diberikan sebuah tautan untuk proyek Anda.
  • 15. 14 2. Local Preview for Web App – Pratinjau melalui emulator Seri 40 Web App. Anda tidak perlu membuka emulator terlebih dahulu cukup pilih menu ini maka emulator akan terbuka dengan sendirinya 3. Cloud Preview for Web App – Pratinjau melalui emulator Seri 40 Web App. Perbedaan dengan local preview adalah, project Anda akan diupload di cloud kemudian akan ditampilkan di emulator. 4. Validate Web App – Memvalidasi setiap baris kode yang telah kita buat dalam proyek Web app. 5. Package Web App – Membuat paket aplikasi .wgt 6. Deploy Web App - Meng-unggah web app ke cloud untuk dilihat melalui browser atau device. Nanti akan diberikan sebuah tautan singkat untuk dapat diakses langsung melalui perangkat Seri 40. 7. Deployment Setting – Segala pengaturan proses deployment. Disini Anda memungkinkan untuk langsung deploy web app langsung ke perangkat Seri 40. Toolbar Terdapat juga toolbar yang berisi shortcut untuk mengakses beberapa menu seperti; membuat proyek baru, debug, Web Developer Channel, sampai pencarian baris kode pada sebuah file. Web Developer Channel Web Developer Channel (WDC), memberikan Anda akses ke sumber daya (resource) tambahan yang akan membantu dalam membangun sebuah aplikasi web (web app). WDC menyediakan fitur untuk menginstal dan menghapus add-ons juga. Rincianan lengkap tentang fitur dan panduan tersedia di web developer channel.
  • 16. 15 Pengaturan Web Developer Environment Ada beberapa pengaturan preferensi yang mungkin ingin Anda mengubahnya untuk memastikan WDE bekerja dengan baik bagi Anda. Bagian ini menjelaskan bagaimana memodifikasi pengaturan tersebut. Memilih Workspace Secara default WDE menciptakan workspace di sebuah folder di root folder pengguna. Setiap kali WDE dimulai, dialog yang ditunjukkan pada dibawah ini akan selalu meminta Anda untuk memilih lokasi workspace. Namun, jika memilih Use this as the default and do not ask again Anda tidak akan diminta untuk memilih lokasi worskspace lagi. Sebaiknya Anda memilih lokasi workspace yang mudah di akses dan memindahkan ke drive selain C untuk keamanan data. Jika Anda ingin merubah lokasi workspace dan ingin menampilkan kembali dialog Workspace Launcher, Anda cukup meng-klik menu Windows > Preference,
  • 17. 16 kemudian pilih list General > Startup and shutdown > workspace. Selanjutnya centang Prompt for workspace on startup. Web Apps preferences Untuk mengakses preferensi WDE, pada menu klik Window > Preference. WDE menyediakan empat preferensi global, yang ditunjukkan pada Gambar berikut:  Deployment - memungkinkan memilih untuk melakukan deployment langsung ke device.  Preview - memungkinkan pengaturan pratinjau pada simulator.  WDC - memungkinkan pengaturan alamat/url untuk konten WDC.
  • 18. 17 Membuat sebuah Proyek Web App WDE menyediakan tiga metode untuk membuat proyek web app baru:  Membuat sebuah proyek dari template yang dimuat ke WDE.  Mengimpor sebuah proyek aplikasi web yang telah dikemas/paket.  Membuat proyek dari sampel yang diinstal dari WDC. Membuat sebuah proyek web app baru dari template Untuk membuat proyek web app, pada WDE klik menu File > New kemudian pilih Series 40 web app (wgt). Dialog New Series 40 web app terbuka. Secara default ada 16 template yang tersedia di WDE untuk Seri 40 Web App. Anda bisa coba membuat project dari masing-masing template yang disediakan. Template yang disediakan cukup banyak, dari mulai yang standar sampai parsing json dan html. Setelah template dipilih, klik Next membuka wizard yang memungkinkan informasi dasar tentang aplikasi web yang akan dimasukkan.
  • 19. 18 Berikut informasi yang dibutuhkan pada halaman ini:  Project Name - nama untuk proyek tersebut. Nama ini digunakan dalam WDE saja dan tidak harus sama dengan nama web app yang ditampilkan di browser Ovi.  Location- ini default lokasi workspace. Dengan mencentang Use default location, proyek akan disimpan pada lokasi workspace yang Anda pilih.  Display Name - ini digunakan untuk mengisi kolom nama web app dari file config.xml dan Display Name ini digunakan sebagai nama aplikasi yang telah jadi.  Unique Identifier - string default yang dibuat oleh wizard, ini dapat diubah jika diinginkan. Style identifier adalah berupa alamat web.  Version # - ini awalnya kosong. Untuk web app yang akan didistribusikan menggunakan Ovi Store versi harus menggunakan format [major version].[minor version](.[micro version])  Short Name – ini yang akan tampil di device, jadi pastikan short name Anda terlihat baik. Kemudian klik Next untuk melanjutkan mengisi informasi author, lisensi, email, dsb. Anda juga bisa menyelesaikan langsung dengan meng klik finish.
  • 20. 19 Mengimpor Paket Web Apps Jika Anda memiliki proyek Web App yang telah Anda buat, dibuat dengan tool lain, download sampel dari Forum Nokia, atau paket web app yang ingin Anda lihat melalui simulator, Anda dapat mengimpornya ke WDE. Untuk mengimpor sebuah web app, pada menu File > New > Import web app. Dalam dialog Import web app project, klik Browse dan cari file config.xml dalam suatu proyek atau file *.WGT Setelah paket dipilih, klik Next.
  • 21. 20 Selanjutnya dialog Import web app project, isi seperti membuat proyek baru dari template. Klik Finish.
  • 22. 21 Web App Simulator Web App Simulator (WAS) memungkinkan kita untuk meninjau aplikasi yang sedang kita buat tanpa memerlukan device aslinya. Anda bisa melihat gambaran aplikasi ketika dipasang di device asli. Pada Nokia Web Tools versi terdahulu, simulator terpisah dengan WDE, namun di versi 1.5 ke atas sudah mulai menyatu dengan Web Tools. Sehingga Anda tidak perlu lagi menjalankan aplikasi secara manual. Untuk menjalankan aplikasi yang Anda buat, cukup klik kanan project yang dipilih kemudian Local Preview for Web App Atau dapat mengakses shortcut di sebelah kiri. Terdapat 3 jenis deployment, yaitu Upload Series 40 Web app, Local Preview for Web app, dan Cloud Preview for Web app. 1. Upload Series 40 Web App – Meng-unggah web app ke cloud untuk dilihat melalui browser atau device. Nanti akan diberikan sebuah tautan untuk proyek Anda. 2. Local Preview for Web App – Pratinjau melalui emulator Seri 40 Web App. Anda tidak perlu membuka emulator terlebih dahulu cukup pilih menu ini maka emulator akan terbuka dengan sendirinya 3. Cloud Preview for Web App – Pratinjau melalui emulator Seri 40 Web App. Perbedaan dengan local preview adalah, project Anda akan diupload di cloud kemudian akan ditampilkan di emulator.
  • 23. 22 Toolbar Terdapat juga toolbar yang berisi shortcut untuk mengakses beberapa menu, yaitu;  Reload – Me-refresh aplikasi jika terdapat perubahan kode program pada WDE.  Location – simulasi lokasi untuk kebutuhan aplikasi yang berbasis lokasi.  Keyboard – menampilkan on screen keyboard.  Debugger – fitur ini menyediakan kemampuan untuk melihat informasi log yang dihasilkan dari web app. Selain itu, fitur Debugger dapat digunakan untuk melihat informasi tentang elemen-elemen dalam web app.  Device – memungkinkan pengaturan karakteristik perangkat simulator, seperti versi device API dan ukuran layar.
  • 24. 23  Help – menyediakan link ke panduan.  Settings – memungkinkan pengaturan parameter untuk server proxy dan frekuensi yang memeriksa versi baru dari simulator. Debugger Web Inspektur memungkinkan untuk melihat informasi log yang dihasilkan dari web app. Selain itu, Web Inspector dapat digunakan untuk melihat informasi tentang elemen-elemen dalam web app dan memanipulasinya. Device Setting Device Settings memungkinkan pengaturan karakteristik perangkat simulator, seperti versi device API dan ukuran layar. Terdapat beberapa pengaturan device pada simulator, diantaranya;  Device APIs – Versi API yang digunakan. Ini tergantung dari versi WDE yang digunakan. Umumnya terdapat 4 versi yaitu 1.2, 1.5, 2.0, dan 2.3.  Device Type – Mendefinisikan apakah perangkat simulasi Touch and Typ atau perangkat non-touch. Untukperangkat non-touch akan diaktifkan pointer mouse untuk mengakses aplikasi, untuk perangkat Touch ada sebuah ujung jari yang ditampilkan sebagai pointer. Penggunaan pointer ujung jari dirancang untuk memungkinkan simulasi ketidakpastian atas titik yang tepat ditekan oleh jari, sehingga kegunaan sentuh dapat dilihat secara langsung.
  • 25. 24  Screen resolution – Mendefinisikan resolusi layar yang digunakan dalam simulator. Resolusi yang tersedia adalah: 240 x 320 piksel dan (untuk non-touch) 320 x 240 piksel.  Phone language – Mendefinisikan lokalisasi bahasa yang akan digunakan oleh simulator. Settings Sebuah proxy server harus ditetapkan jika computer Anda memerlukan proxy untuk mengakses internet. Pengaturan proxy seperti layaknya pengaturan proxy di browser.
  • 26. 25 Mobile Web Library (MWL) Dalam pengembangan S40 Web Apps, terdapat library yang dapat digunakan untuk membangun aplikasi web yang interaktif untuk Seri 40. Semua MWL yang disediakan berjalan di browser client Seri 40. Berikut adalah MWL yang dapat Anda gunakan; Name Description addClass() Menambahkan sebuah kelas CSS tertentu dari suatu elemen. removeClass() Menghapus sebuah kelas CSS dari suatu elemen. toggleClass() Toggles atribut kelas tertentu dari suatu elemen. switchClass() Menggabungkan penghapusan satu kelas elemen dan menambahkan kelas lain dalam satu operasi. iterateClass() Increment atau decrement nama kelas prefix tertentu dan berlaku untuk node target. setGroupTarget() Target satu node dalam grup untuk memiliki kelas yang berbeda. setGroupNext() Iterates ke elemen berikutnya atau sebelumnya dalam suatu blok tertentu. show() Membuat suatu elemen terlihat pada halaman. hide() Menyembunyikan elemen pada halaman. toggle() Mengontrol visibilitas elemen, sehingga terlihat jika tersembunyi dan disembunyikan jika terlihat. scrollTo() Scroll browser untuk blok dengan ID tertentu. loadURL() Breaks out dari aplikasi web dan beban sumber daya tertentu langsung ke jendela Browser Nokia untuk Seri 40. setInputValue() Update nilai dari input HTML tertentu. timer() Mengeksekusi perintah sebagai tanggapan atas penembakan timer. stopTimer() Timer berhenti berjalan. Untuk lebih jelas, berikut adalah contoh penggunaan MWL untuk membangun aplikasi yang interaktif; addClass() Sampel kode berikut menambahkan sebuah kelas untuk mengubah tampilan dari baris teks. toogle() <style type="text/css"> .red_underline { color:red; text-decoration: underline; } </style> <div id="addClass_test"> <a onclick="mwl.addClass('#sample_text ', 'red_underline'); return false;" href="#"> Click to change text below to red & underline. </a> <div id="sample_text "> This is the text that will change </div> </div>
  • 27. 26 Dalam sampel kode berikut, konten tambahan bergantian muncul dan menghilang ketika pengguna mengklik pada link. show() Dalam sampel kode berikut, konten tambahan muncul ketika pengguna mengklik link. Untuk detail lebih lengkap seputar MWL Anda dapat mengunjungi halaman Nokia Developer melalui tautan berikut http://goo.gl/YKFVO <div id="toggle_test"> <a id="bm_open_foc" onclick="mwl.toggle('#bookmarks');return false;" href="#"> Click here to toggle content </a> <div class="MWLGroupItem" id="bookmarks" style="display: none"> <ul> <li><a href="http://www.nokia.com">Nokia</a> <li><a href="http://www.facebook.com">Facebook</a> <li><a href="http://www.twitter.com">Twitter</a> </ul> </div> </div> </div> <div id="show_test"> <a onclick="mwl.show('#bookmarks_sample');return false;" href="#"> Click here to show more content </a> <div class="MWLGroupItem" id="bookmarks_sample" style="display: none"> <ul> <li><a href="http://www.nokia.com">Nokia</a> <li><a href="http://www.facebook.com">Facebook</a> <li><a href="http://www.twitter.com">Twitter</a> </ul> </div> </div>
  • 28. 27 Menggunakan SMS dan Telp URI Seri 40 web app versi 1.5 membawa dukungan untuk skema URI yang memungkinkan kita mengirimkan SMS. Cara kerja Skema URI SMS yang digunakan dalam Seri 40 web app adalah dengan cara Mengklik link SMS dalam aplikasi dan akan terbuka editor default SMS untuk mengirimkan pesan langsung kepada penerima. Anda dapat menggunakan kode html berikut : <a href="sms:+62812345678">One number, no body text</a> Anda juga dapat mengirimkan SMS ke 2 nomor sekaligus <a href="sms:+62812345678,+628123456789">Two numbers, no body text</a> Selain itu agar pengguna aplikasi tidak perlu mengetikan SMS secara manual, Anda dapat menggunakan kode HTML berikut ini untuk mengirimkan SMS ke nomor ponsel dengan isi pesan “hello world”. <a href="sms:+62812345678?body=hello%20world">One number with body text</a> Untuk menambahkan lebih dari satu nomor ponsel Anda cukup menambahkan koma di akhir nomor ponsel pertama. <a href="sms:+62812345678,+628123456789?body=hello%20world">Two numbers with body text</a> Namun, jika Anda menginginkan untuk tidak menambahkan nomor ponsel, hanya menambahkan isi pesan saja, cukup kosongkan dibagian nomor ponsel. <a href="sms:?body=hello%20world">Body text, no numbers</a> Selain berupa hyperlink, Anda juga dapat menggunakan MWL (Mobile Web Library) dengan event onclick. <div onclick="mwl.loadURL('sms:+62812345678?body=hello%20world')">M WL: Number and body text</div> Namun perlu dicatat, pada body SMS Anda tidak dapat menggunakan spasi, melainkan harus di- encode menjadi %20 Untuk melihat hasil nyatanya Anda diharuska mencoba langsung di device atau simulator Nokia SDK for Java karena jika menggunakan simulator web tools tidak akan berfungsi. Berikut pratinjau web app yang telah di unggah menggunakan WDE dan diakses melalui nokia browser di Nokia SDK for java.
  • 29. 28 Untuk menggunakan Telp URI, Anda cukup menggunakan kode HTML berikut <a href="tel:+62812345678">Call Me</a> Yang membedakan nya dari SMS adalah URI “tel” yang akan dibaca oleh Nokia Browser sebagai perintah untuk memanggil nomor tertentu.
  • 30. 29 Series 40 Screen Orientation Kebanyakan perangkat Seri 40 yang menjalankan Series 40 Web App menawarkan layar potret, dalam QVGA resolusi (240 x 320-pixel). Namun, ada juga perangkat Seri 40 yang menawarkan layar QVGA orientasi landscape. Jika Anda tidak melakukan apapun, Web App Anda akan terus menampilkan layout dalam format potret pada layar landscape, dengan ruang putih di kedua sisi konten dan scroll bar. Ada solusi yang sederhana untuk mengatasi hal tersebut, diantaranya;  Gunakan format relatif Untuk setiap konten, seperti tabel, di mana Anda memiliki kemampuan untuk menggunakan relatif (persentase). Ini berarti konten secara otomatis menyusut atau membentang agar sesuai dengan lebar layar.  Buat definisi CSS untuk format landscape dan potret Anda tidak memiliki pilihan untuk mengatur ukuran relatif konten Anda, Anda harus membuat definisi CSS untuk mengontrol ukuran. Pada contoh kode kita mengontrol ukuran gambar dalam CSS kita untuk layar potret . .imgSz { width:200px; height:125px; } Sementara di landscape .imgSz { width:250px; height:156px; }  Buat kode untuk query ukuran layar dan mengatur file CSS untuk digunakan Sekarang kita perlu mengatur web app menggunakan CSS untuk devices orientation. Perangkat Seri 40 tidak memungkinkan untuk switching dinamis orientasi layar, kita hanya perlu melakukan ini sekali. Kode ini sederhana, yaitu permintaan objek layar dan membaca properti width. /** * Selecting a CSS file based on screen width */ if (screen.width > 240) { document.write('<link rel="stylesheet" href="basicLandscape.css" type="text/css" />'); } else { document.write('<link rel="stylesheet" href="basicPortrait.css" type="text/css" />'); }  Menjalankan kode
  • 31. 30 Sekarang kasus sederhana mengeksekusi kode JavaScript dari <head> dari file utama HTML Web App, seperti yang ditunjukkan di bawah ini. <head> <title>Screen size example</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- Common css between the two orientations --> <link rel="stylesheet" href="common.css" type="text/css" /> <!-- The following script sets and gets the appropriate CSS file for the screen orientation --> <script type="text/javascript" src="screensize.js"></script> </head> Dengan CSS yang tepat dalam penggunaan Web App Anda sekarang akan menampilkan menggunakan layar landscape dengan penuh. Sekarang Anda dapat memberikan pengguna Web App dengan tampilan yang optimal, terlepas dari apakah mereka melihatnya di layar landscape atau portrait. Disetiap template yang disediakan pada Web Tools 2.3 sudah terdapat screen size, jadi Anda tidak perlu membuat ulang. Cara ini berlaku jika Anda ingin meng-costum screensize.
  • 32. 31 Parsing XML Data BMKG Pada dasarnya javascript telah support metode-metode untuk melakukan parsing XML dengan format DOM standar. Namun cara penterjemahan ini kadang-kadang cukup membuat pusing para developer. Ternyata jQuery mempunyai kelebihan dalam hal manipulasi DOM dibanding prototype. Prototype tidak support manipulasi DOM pada responseXML yang dikembalikan pada request Ajax. Kali ini kita akan coba parsing data XML dari situs bmkg.go.id yang akan menampilkan informasi gempa bumi terkini menggunakan jQuery yang mempunyai kemampuan manipulasi DOM di XML layaknya manipulasi DOM di HTML.  Berikut langkah singkatnya : 1. Buat sebuah project S40 Web App dengan nama ParsingXML. 2. Buat file javascript baru dengan nama basic.js dengan cara klik kanan project > News > File.
  • 33. 32 3. Kemudian masukan baris kode berikut: 4. Pada kode di atas, kita akan parsing data xml http://data.bmkg.go.id/propinsi_11_1.xml 5. Jika dilihat dari struktur XML dari link di atas, maka kita dapatkan struktur yang akan kita ambil datanya : function init() { $(document).ready(function () { jQuery.support.cors = true; $.ajaxSetup({ error:function(x,e){ if(x.status==0){ alert('You are offline!!n Please Check Your Network.'); window.location = 'index.html'; }else if(x.status==404){ alert('Requested URL not found.'); window.location = 'index.html'; }else if(x.status==500){ alert('Internel Server Error.'); window.location = 'index.html'; }else if(e=='parsererror'){ alert('Error.nParsing JSON Request failed.'); window.location = 'index.html'; }else if(e=='timeout'){ alert('Request Time out.'); window.location = 'index.html'; }else { alert('Unknow Error.n'+x.responseText); window.location = 'index.html'; } } }); $.ajax({ type: "GET", url: "http://data.bmkg.go.id/propinsi_11_1.xml", crossDomain: true, dataType: "xml", success: xmlParser }); }); function xmlParser(xml) { $('#load').fadeOut(); $(xml).find("Isi").each(function () { $(xml).find("Row").each(function () { $("#tampil").append('<h2>' + $(this).find("Kota").text() + '</h2><b>' + $(this).find("Cuaca").text() + '</b><br> Suhu : ' + $(this).find("SuhuMin").text() + ' - ' + $(this).find("SuhuMax").text() + ' <span class="superscript">o</span>C<br> Kelembaban : ' + $(this).find("KelembapanMin").text() + ' - ' + $(this).find("KelembapanMax").text() + ' %<br>Kec. Angin : ' + $(this).find("KecepatanAngin").text() + ' (km/jam)<br>Arah Angin : ' + $(this).find("ArahAngin").text() + '<br /><br />'); }); }); } }
  • 34. 33 6. Kita dapat mengambil data yang kita inginkan berdasarkan tag, contohnya bisa dilihat potongan kode berikut. 7. Karena kita akan menampilkan tag suhu yang membutuhkan karakter derajat (o) maka kita perlu menambahkan class superscript pada css. Tambahkan kode berikut. 8. Selanjutnya panggil jquery dan file basic.js yang telah kita buat di halaman index.html $(xml).find("Isi").each(function () { $(xml).find("Row").each(function () { $("#tampil").append('<h2>' + $(this).find("Kota").text() + '</h2><b>' + $(this).find("Cuaca").text() + '</b><br> Suhu : ' + $(this).find("SuhuMin").text() + ' - ' + $(this).find("SuhuMax").text() + ' <span class="superscript">o</span>C<br> Kelembaban : ' + $(this).find("KelembapanMin").text() + ' - ' + $(this).find("KelembapanMax").text() + ' %<br>Kec. Angin : ' + $(this).find("KecepatanAngin").text() + ' (km/jam)<br>Arah Angin : ' + $(this).find("ArahAngin").text() + '<br /><br />'); }); }); .superscript { font-size: small; line-height: 0.5em; vertical-align: baseline; position: relative; top: -0.4em; }
  • 35. 34 9. Tambahkan onload="javascript:init();" pada tag <body> menjadi <body onload="javascript:init();"> untuk memanggil fungsi pada javascript. 10. Setelah itu buat div kosong dengan id tampil untuk menampilkan data <div id="tampil"></div> 11. Jalankan di simulator. Makan akan tampil seperti berikut. Sekarang Anda dapat percantik tampilan dan tambahkan data pada aplikasi, seperti prakiraan cuaca, info gempa dan bahaya dari bmkg yang dapat Anda ambil dari http://data.bmkg.go.id/  Sample code project di atas dapat diunduh disini: http://goo.gl/VunrX <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery. min.js" type="text/javascript"></script> <script language="javascript" type="text/javascript" src="basic.js"></script>
  • 36. 35 Memanfaatkan API Kateglo Kateglo merupakan singkatan dari Kamus, Tesaurus, dan Glosarium bahasa Indonesia, sebuah website berisi database kamus besar bahasa Indonesia. Application programming interface (API) kateglo memungkinkan para pengembang memanfaatkan data yang disediakan oleh Kateglo. Untuk saat ini, baru modul kamus yang dapat diakses dengan API ini. Contoh format : http://kateglo.bahtera.org/api.php?format=[xml|json]&phrase=[kata] Contoh penggunaan : http://kateglo.bahtera.org/api.php?format=xml&phrase=pacar http://kateglo.bahtera.org/api.php?format=json&phrase=istri Kedua URL di atas akan menghasilkan semua data yang dimiliki kateglo untuk kata pacar dan istri. Untuk memahami struktur JSON Anda dapat menggunakan add ons browser firefox atau chrome atau dapat menggunakan Online JSON Viewer yang dapat diakses melalui link berikut http://jsonviewer.stack.hu/ 1. Buat sebuah project S40 baru dengan nama project Kamus Indo dan template Tab- control. 2. Buka index.html. Pada Tab 1 content, sisipkan bari kode berikut: 3. Selanjutnya buat file javascript baru dengan nama basic.js, kita akan mengambil data di S40 Web app dengan memanfaatkan object XmlHttpRequest. Berikut kode-nya: <div> <input type="text" name="istilah" id="istilah" class="ui-text-input" value="" /> <button onclick="mwl.removeClass('#loader', 'hide');mwl.addClass('#hasil', 'hide');mwl.timer('cariKata', 10, 1, 'cariKata()');" class="ui-button" name="search" id="search">Search</button> <div id="loader" class="hide">Please wait...</div> <div id="hasil"></div> </div>
  • 37. 36 4. Terakhir, panggil file javascript yang tadi telah dibuat. function cariKata() { var Url = "http://kateglo.bahtera.org/api.php?format=json&phrase="; var xhr = null; if (window.ActiveXObject) { xhr = new window.ActiveXObject("Microsoft.XMLHTTP"); } else { if (window.XMLHttpRequest) { xhr = new window.XMLHttpRequest(); } } var istilah = document.getElementById('istilah').value; Url = Url + istilah; xhr.open('GET', Url, true); if (xhr.overrideMimeType) { xhr.overrideMimeType('text/json'); } xhr.setRequestHeader('Pragma', 'no-cache'); xhr.setRequestHeader('Cache-Control', 'no-cache'); xhr.onreadystatechange = function(){ if (this.readyState == 4) { if (this.status == 200) { if (this.responseText != null) { var jsonData = eval( '(' + this.responseText + ')' ); var markup = "<strong>Arti:</strong><ul>"; for( var hasil = 0; hasil < jsonData.kateglo.definition.length; hasil++) { var arti = jsonData.kateglo.definition[ hasil ]; markup += "<li>" + arti.def_text + "</li>"; } markup += "</ul>"; mwl.insertHTML('#hasil', markup); mwl.removeClass('#hasil', 'hide'); mwl.addClass('#loader', 'hide'); } else { mwl.insertHTML('#hasil', "Error, please try again"); } } } }; xhr.send( null ); }
  • 38. 37 5. Jalankan di simulator Untuk sample code project di atas, bisa diunduh di sini: http://goo.gl/Jrerv <script language="javascript" type="text/javascript" src="s40- theme/js/basic.js"></script>
  • 39. 38 Memasang Iklan di Series 40 Web App Selain menjual aplikasi, web app bisa kita monetasi dengan cara memasang iklan didalam nya. tidak banyak layanan iklan yang bisa digunakan. Tapi saya rasa 1 layanan iklan saya rasa sudah cukup untuk menambah penghasilan developer web app. Untuk memasang iklan di di series 40 web app, berikut langkah singkatnya: 1. Daftar sebagai member di http://inner-active.com atau http://nax.nokia.com 2. Setelah membuat akun dan login, Buat App ID. 3. Setelah itu Anda akan mendapatkan App ID yang nantinya untuk digunakan di aplikasi kita nanti. 4. Setelah itu buka/buat project aplikasi WebApps Anda. Buka file .html yang ingin di taruh Iklan. 6. Sisipkan javascript yang telah disediakan oleh inneractive sebagai berikut. 7. Setelah itu buat fungsi javascript iklan. <script language="javascript" type="text/javascript" src="http://cdn2.inner-active.mobi/wv- js/inneractive_nokia_S40.js"></script>
  • 40. 39 8. Agar fungsi iklan yang telah kita buat di-load otomatis ketika aplikasi jalan, maka tambahkan onload="javascript:iklan();" pada tag <body>, sebagai contoh: <body onload="javascript:iklan();"> 9. Setelah itu buat div ID sesuai deangan parameter di atas untuk menampilkan iklan. <div id="IklanS40">Load Ads</div> 10. Jalankan aplikasi di simulator Sample code project iklan bisa diunduh disini: http://goo.gl/m7GfX <script language="javascript" type="text/javascript"> function iklan() { //Parameter Wajib inneractive.parameters.divID = "IklanS40"; // ID DIV Tampil Iklan inneractive.parameters.appID = "KabitaStudio_JadwalTV_Nokia"; // ID App di Inneractive //Menampilkan Iklan inneractive.displayInneractiveAd(); } </script>
  • 41. 40 Uji Coba S40 Web App pada Device Untuk memastikan aplikasi kita jalan atau tidak di device nokia, maka saya sarankan untuk mencobanya di device asli atau remote device access. Jika Anda tidak memiliki device, pastikan aplikasi Anda berjalan di cloud preview atau dapat menggunakan Remote Device Access. Perlu diingat, file .wgt milik Web apps tidak bisa berjalan langsung di device dengan cara menyimpan file .wgt di device. Untuk menjalankannya, Anda perlu membuka Nokia Web Tools. Jika Anda telah memiliki device nokia S40 atau Asha, berikut langkah-langkahnya: 1. Pastikan Anda sudah menginstal dan menjalankan Nokia Suite (jika menggunakan USB) 2. Kemudian koneksikan device ke computer Anda menggunakan Bluetooth atau USB. 3. Pada project, klik kanan project yang akan di deploy > Deploy Web App 4. Jika Anda pertama kali mendeploy aplikasi, Nokia Web Tools akan mengirimkan Bluetooth/USB Launcher untuk dipasang di device nokia Anda. 5. Kemudian jalankan Bluetooth/USB launcher (Biasanya tesimpan pada folder myapp di kartu memori) 6. Setelah Bluetooth/USB Launcher jalan, deploy ulang. Maka akan otomatis aplikasi Anda terbuka.
  • 42. 41 7. Anda juga bisa mengetikan manual di browser device. Ketika deploy, maka akan tampil juga short url yang dapat Anda akses via browser nokia. 8. Masukan URL di atas ke Nokia Browser Anda, Anda cukup mengetikan url utama saja, contoh : http://goo.gl/iTg6Hn. Berikut adalah hasil aplikasi yang di uji coba pada simulator Nokia SDK untuk S40. 
  • 43. 42 Untuk melihat instruksi dan pengaturan lainnya, Anda dapat mengakses Deployment Setting.
  • 45. 44 Instalasi Nokia SDK for Java 2.0 Selain web app, Anda dapat membuat aplikasi untuk series 40 menggunakan bahasa pemrograman java. Banyak keunggulan yang bisa Anda dapatkan ketika menggunakan java me untuk membuat aplikasi. Diantaranya; dapat mengakses hampir semua hardware device nokia seperti kamera, kontak, sms, bisa membuat aplikasi jalan di background layaknya aplikasi chat, dan lain sebagainya. Jika Anda sudah terbiasa dengan Java ME atau J2ME tentu akan lebih mudah mengembangkan aplikasi di platform nokia karena pada dasarnya sama. Untuk menggunakan Nokia SDK, ada beberapa hal yang perlu Anda siapkan dan lakukan, yaitu: 1. JDK 7 terbaru 32bit (jika Anda menggunakan 64bit, maka Anda harus tetap meng-instal JDK versi 32 bit). 2. Netbeans 7.1 (pastikan jika Anda meng-unduh di situs oracle pilih yang All Package). 3. Nokia SDK 2.0 (khusus full touch) Atau Nokia SDK versi lebih rendah (untuk type dan touch & type). Anda bisa mengunduh-nya disini http://goo.gl/O4WSy 4. Nokia Suite (untuk mendeploy ke device, ini tidak wajib Anda Instal) Setelah mempersiapkan semua tools, selanjutnya ada tahapan instalasi semua tools tersebut. Yaitu: 1. Instal JDK 7 terlebih dahulu 2. Instal Netbeans 3. Instal Nokia SDK 4. Integrasi Nokia SDK di NetBeans Saya anggap Anda sudah menyelesaikan instalasi ketiga tools di atas, proses instalasi sama seperti meng-instal software.
  • 46. 45 Integrasi Nokia SDK dengan NetBeans Setelah semua ter-instal, selanjutnya adalah konfigurasi Nokia SDK agar terintegrasi dengan netbeans. Karena secara default di netbeans hanya terdapat java me sdk sun microsystem dengan simulator yang ‘jadul’ banget. :p 1. Sekarang buka netbeans, kemudian pilih menu Tools > Java Platforms. 2. Pilih Jave Me MIDP Platform Emulator, klik Next. 3. Netbeans akan mendeteksi nokia SDK, jika sudah ditemukan klik Next. Namun apabila tidak ditemukan pilih Find More Jave ME Platform Folders.
  • 47. 46 4. Tunggu beberapa detik untuk proses integrasi Nokia SDK dengan netbeans. 5. Proses integrasi Nokia SDK dengan NetBeans telah selesai. Klik Finish! 6. Dapat kita lihat, sekarang Nokia SDK 2.0 sudah terintegrasi dengan NetBeans. 7. Selamat koding!
  • 48. 47 Hello World! Akhirnya sampai juga pada proses pembuatan aplikasi menggunakan Nokia SDK for Java. Seperti biasa, kalimat yang akan kita buat adalah Hello World!  Mari kita memulai membuat project baru. 1. Pilih menu File > New Project. 2. Pilih kategori Jave ME > Mobile Application. 3. Tentukan nama dan lokasi folder project. Set as Main Project dan Create Hello MIDlet biarkan tetap tercentang. Klik Next.
  • 49. 48 4. Pilih Emulator Platform dan Device Nokia menjadi SDK 2.0 Java. Biarkan secara default Device Configuration dan Device Profile karena sudah sesuai dengan spesifikasi ponsel Nokia. klik Finish. 5. Klik menu Run > Deploy Main Project untuk menjalankan ke simulator. Atau klik icon berlogo Play warna hijau.
  • 50. 49
  • 51. 50 Mengenal Simulator Nokia SDK 2.0 Simulator Nokia SDK 2.0 berjalan seperti device nokia asli, Anda dapat memanipulasi berbagai event dengan simulator ini, misal aplikasi Anda membutuhkan lokasi, sensor gerak, sms, telp, dsb. ada beberapa yang bisa Anda gunakan, diantaranya; 1. Diagnostics Diagnostics berfungi untuk melihat lalu lintas data dan log error dari aplikasi yang kita jalankan. Bisa juga difungsikan untuk debug aplikasi. 2. Location Route editor pada simulator berfungsi untuk melakukan simulasi lokasi. Hal ini bermanfaat untuk test aplikasi jika jalan di daerah tertentu. 3. Screen Orientation
  • 52. 51 Anda dapat merubah orientasi layar dari portrait menjadi landscape, begitu sebaliknya. 4. Sensor Simulation Nokia SDK 2.0 juga mendukung aplikasi dengan dukungan accelerometer. Jadi jika Anda ingin membuat game balap dengan dukungan sensor gerak untuk kemudi, ini sangat memungkinkan.
  • 53. 52 Membuat Category Bar Category bar adalah sebuah menu/tab yang berada di bagian bawah aplikasi. Pada device Full Touch kartegori bar dibuat untuk mengakses menu-menu. Sehingga tidak perlu membuat button untuk mengakses suatu form. Untuk membuat category bar cukup mudah, hanya dibutuhkan beberapa baris kode untuk membuatnya. Berikut cara singkat membuat category bar. 1. Buat sebuah form baru seperi gambar berikut (cukup drag & drop dari palette disebelah kanan IDE) :
  • 54. 53 2. Untuk mengisi konten dari masing-masing form, Anda cukup double click pada masing- masing form. Sehingga konten tersebut akan tampil seperti membuat halaman baru. 3. Tambahkan baris kode barikut pada kelas HelloMIDlet kemudian tambahkan ElementListener. Contoh: 4. Buat method notifyElementSelected, seperti berikut: 5. Untuk menampilkan category bar tambahkan 2 baris kode berikut pada method initialize public class HelloMIDlet extends MIDlet implements CommandListener, ElementListener { private boolean midletPaused = false; private IconCommand sendIconCommand = new IconCommand("Send", "Send SMS", Command.SCREEN, 1, IconCommand.ICON_SEND_SMS); private IconCommand optionsIconCommand = new IconCommand("Options", "Options", Command.SCREEN, 1, IconCommand.ICON_OPTIONS); private IconCommand[] iconCommands = {sendIconCommand, optionsIconCommand}; private CategoryBar categoryBar = new CategoryBar(iconCommands, true); public void notifyElementSelected(CategoryBar cb, int i) { switch (i) { case 0: this.switchDisplayable(null, getForm()); break; case 1: this.switchDisplayable(null, getForm1()); break; default: ; } }
  • 55. 54 6. Jika jika jalankan, maka akan tampil seperti berikut: Untuk merubah icon category bar, pada tahap 3 Anda dapat merubah ICON_SEND_SMS, ICON_OPTION dengan icon lainnya. Anda juga dapat membuat icon png sendiri, namun yang ini akan di bahas pada ebook selanjutnya.  Untuk sample code project Hello World + Category Bar bisa diunduh disini: http://sdrv.ms/Z8laMx private void initialize() { // write pre-initialize user code here categoryBar.setVisibility(true); categoryBar.setElementListener(this); // write post-initialize user code here }
  • 56. 55 Memanfaatkan Remote Device Access Layanan Remote Device Access memungkinkan Anda meng-akses ke perangkat Nokia secara langsung melalui internet. Hal ini menawarkan untuk para developer untuk mempermudah dalam pengujian dan pengembangan aplikasi. Anda tidak perlu membeli perangkat Nokia untuk menguji langsung dalam perangkat. Tersedia hampir semua HP Nokia dengan bermacam OS yang dapat Anda gunakan secara GRATIS! Penggunaan nya juga sangat mudah, Anda cukup memiliki Akun Nokia Developer kemudian reservasi device dalam waktu 15-120 menit (Anda bisa memperpanjang reservasi device tergantung kebutuhan Anda). Untuk menggunakan Remote Device Access, Anda dapat mengunjungi link berikut ini http://www.developer.nokia.com/Devices/Remote_device_access/ Untuk mencoba meng-instal aplikasi yang telah Anda buat, Anda cukup klik icon Box Plus berwarna kuning di atas simulator, kemudian pilih file .wgz. Ikuti instruksi instalasi.
  • 57. 56 Publish Aplikasi ke Nokia Store Nokia store adalah Toko aplikasi yang disediakan oleh Nokia untuk pengembang aplikasi yang ingin menjual aplikasinya baik gratis maupun berbayar. Ini adalah bab yang paling penting bagi pengembang untuk mem-publikasi hasil karya-nya ke seluruh dunia melalui Nokia Store. Sebelumnya, pastikan Anda memiliki Akun Publisher di Nokia Store. Jika belum memiliki akun, silahkan daftar di http://info.publish.nokia.com/. Ikuti instruksi yang ada. Ada beberapa hal yang perlu Anda bersiapkan sebelum publish Aplikasi, diantaranya;  Nama Aplikasi – Nama yang digunakan harus sama dengan nama aplikasi yang dibuat  Deskripsi Aplikasi – Berisi keterangan aplikasi, usahakan deskripsi yang singkat dan jelas.  Icon / Logo – Icon Aplikasi yang akan di publish dengan ukuran Min. 256×256, Max. 2000×2000  Support Website – Berisi informasi aplikasi yang akan dipublish (bisa membuat blog dari wordpress/blogspot)  Screen shot – Screenshot aplikasi yang kita buat dengan ukuran Min. 256×256, Max. 2000×2000 Setelah memiliki semua persiapan telah siap, login ke akun Anda. Anda akan dibawa ke welcome page.
  • 58. 57 Pilih Create new content untuk meng-submit aplikasi. Jika yang akan Anda submit adalah S40 Web App makan pilih opsi Series 40 Web App, namun jika Aplikasi Anda adalah Symbian Web App, maka pilih opsi WRT Widget. Kali ini kita akan submit S40 Web App. Selanjutnya halaman pertanyaan hukum, Anda diminta untuk menyetujui ketentuan ketentuan yang berlaku pada nokia store. Selanjutnya Anda diminta untuk mengisi nama aplikasi, dekripsi, kata kunci, kategori, dsb. Pada bagian Global Price Point, pilihan mulai dari 1EUR-100EUR. Namun untuk Indonesia, price point itu sebesar Rp 3.000, Rp 5.000, Rp 10.000, Rp 15.000, dan Rp 20.000. Ketika Anda memilih 1EUR, maka di Indonesia menjadi Rp. 3000, begitu juga seterusnya.
  • 59. 58 Anda diwajibkan untuk memiliki sebuah support website dan email agar pengguna dapat menghubungi Anda. Pada bagian icon ukuran nya 256x256 pixel. Sedangkan untuk screen shot minimal 256x256 dan maksimal 2000 x 2000. Ingat screen shot harus kotak. Jika telah mengisi semua field, klik Create. Selanjutnya, klik tab Content Files. Upload file .wgt yang sudah di kemas di WDE. Tahap selanjutnya adalah menentukan device yang telah kita uji coba. Anda hanya boleh memilih device yang benar-benar sudah Anda uji.
  • 60. 59 Kemudian, Anda harus menentukan Negara mana saja yang akan didistribusikan. Jika konten Anda hanya berlaku untuk wilayah Indonesia maka Anda hanya boleh memilih Indonesia. Selanjutnya memilih distribusi bahasa, bahasa apa yang Anda gunakan pada aplikasi yang Anda submit. Klik Save jika sudah menyelesaikan tahap ini. Tahap akhir adalah mengajukan aplikasi untuk di terbitkan di Nokia Store dengan meng-klik Submit to QA.
  • 61. 60 Dengan meng-klik Submit to QA, aplikasi Anda akan di uji oleh tim Quality Assurance Nokia store. Jika Aplikasi Anda layak untuk di publikasi dan tidak melanggar apa yang telah ditentukan seperti HAKI, Pornografi, dan Malware. Aplikasi Anda akan di terbitkan di Nokia Store. Proses QA biasanya membutuhkan waktu sekitar 1 minggu. Anda akan diberitahu via email jika Aplikasi Anda telah lolos atau gagal melewati proses QA. Untuk Aplikasi Java, Anda diharusnya untuk mengirimkan beberapa file pendukung seperti Flow, dan dokumen deklarasi aplikasi. Semua dokumen dibuat menjadi .zip dan di unggah pada form dokumen pendukung ketika meng-unggah file .jar dan .jad Selamat mencoba! 
  • 62. 61 Membuat Banner untuk Promosi Aplikasi Setelah membuat Aplikasi yang diterbitkan di Nokia Store, tahap selanjutnya adalah memasarkan aplikasi ke publik. Banyak cara untuk memasarkan aplikasi Anda, mulai dari memasang iklan di berbagai media online sampai offline. Nokia telah menyediakan Online Marketing Tool sebagai alat bantu bagi developer yang tidak memiliki kemampuan desain banner sebagai alat promosi. Anda tidak membutuhkan waktu yang lama untuk menghasilkan banner yang terlihat profesional. Beriut cara membuatnya: 1. Pastikan aplikasi Anda sudah terbit di Nokia Store. 2. Buka http://snac.nokia.com/2/omt 3. Masukan link aplikasi dan nama aplikasi, maka akan terdapat live preview yang menampilkan gambaran banner yang akan dibuat. 4. Selanjutnya, Anda dapat menentukan tulisan pada Banner dengan merubah Application Name dan pada tab Copytext option di sebelah kiri. 5. Agar terlihat elegan, Anda juga bisa mengubah gambar device pada banner, dengan memilih tab Device Selection.
  • 63. 62 6. Selanjutnya Anda ikuti intstruksi yang Ada. Pada Banner Output Sizes, Anda bisa centang semua agar pilihan banner lebih banyak. 7. Setelah selesai setup, pilih Generate Banners. Tunggu beberapa saat, OMT akan meng- generate banyak banner yang siap Anda gunakan sebagai alat promosi. Untuk meng-unduh semua banner, Anda bisa pilih Download.
  • 64. 63 Penyebab Aplikasi Ditolak di Nokia Store Bagi rekan-rekan developer yang baru pertama kali submit aplikasi ke Nokia Store mungkin sempat bingung mengapa aplikasi kita ditolak oleh nokia store dan tidak tahu bagaimana cara memperbaiki agar aplikasi yang kita submit lolos QA Nokia Store. Sebetulnya ketika kita ditolak, tim QA Nokia Store akan memberikan solusi dan keterangan jelas mengapa dan bagaimana agar aplikasi kita masuk Nokia Store. Tapi sebelum kita ditolak, sebaiknya kita siapkan dulu secara matang aplikasi yang akan kita submit. Berikut adalah beberapa penyebab aplikasi kita ditolak di Nokia Store; 1. Aplikasi tidak berjalan baik di Device Masalah ini sudah jelas, karena aplikasi yang masuk nokia store akan diuji coba terlebih dahulu untuk dipastikan berjalan baik di ponsel pengguna. Jika aplikasi kamu menggunakan Java Me, pastikan file jad dan jar adalah satu project, bukan dari project berbeda. Jika aplikasi kamu menggunakan Web Apps, pastikan aplikasi berjalan baik di browser nokia. Misal desain yang harus sesuai ketika kita develop aplikasi dan berjalan di ponsel. Jika kamu tidak memiliki device nokia, kamu bisa memanfaatkan simulator Nokia SDK for Java atau Remote Device Access. 2. Bahasa dan Distribusi Aplikasi Jika aplikasi kamu menggunakan bahasa Indonesia, maka pastikan kamu hanya memilih bahasa “Indonesia” saja atau jika aplikasi kamu berbahasa inggris maka kamu pilih “English”. Kecuali aplikasi kamu mendukung lokalisasi yang dapat berjalan disemua bahasa. Selain bahasa, aplikasi kamu juga harus didistribusikan sesuai market aplikasi yang kamu dukung. Misal aplikasi kamu hanya untuk pengguna ponsel di Indonesia, maka pastikan kamu hanya memilih Country “Indonesia” saja. Namun jika aplikasi kamu bisa digunakan untuk semua pengguna ponsel di dunia (contoh aplikasi youtube, twitter, utiliti, dll) maka kamu dapat mendistribusikan ke semua negara. Intinya sesuaikan dengan market aplikasi kamu.
  • 65. 64 Saya sarankan jangan memilih negara china, karena peraturan di china cukup ketat. Misal aplikasi yang berbasis lokasi tidak di ijinkan untuk didistribusikan di negara china. Bahkan saya dengar harus berbahasa china juga. CMIIW. 3. Aplikasi Crash atau Force Close Hal ini sama seperti poin nomor 1, pastikan aplikasi kamu memiliki sedikit bug. Jangan sampai ketika aplikasi baru dijalankan sudah force close. 4. Nama Aplikasi berbeda dengan Nama di Nokia Store Masalah ini cukup banyak saya temui, nama aplikasi di Nokia Store (Display Name) dan nama aplikasi di ponsel berbeda. Misal di website nokia publish menuliskan pada field Display Name adalah “Daily Quote” tapi ketika aplikasi dipasang di ponsel nama aplikasinya “Kata Mutiara”. Untuk memastikan, jika kamu menggunakan Java Me harap merubah “Application Descriptor”. Jika kamu menggunakan Web Apps, pastikan nama aplikasi di file config.xml sudah sesuai. 5. Halaman About dan Help Jika kamu develop aplikasi menggunakan Java Me, hal ini wajib untuk ada didalam aplikasi. Halaman about berisi deskripsi aplikasi, versi, dan nama developer serta halaman help berisi bagaimana aplikasi kamu bekerja. Namun jika kamu menggunakan Web App, ini tidak wajib. Tapi sangat disarankan agar pengguna tahu aplikasi ini dibuat oleh siapa dan bagaimana cara menggunakannya. 6. Privacy Policy Jika aplikasi kamu menggunakan sistem login dan lokasi, hal ini adalah merupakan kewajiban untuk membuat sebuah file .txt untuk diunggah yang berisikan bahwa aplikasi kamu tidak akan menyimpan password, lokasi, data pengguna, dan lain sebagainya. Setiap aplikasi biasanya memiliki Privacy Policy yang berbeda, jadi silahkan sesuaikan sendiri. Contoh privacy policy: This application does not collect, store nor transmit any personally identifying information. No information will be used to identify you, nor your browsing behavior. No information will be published or disclosed. Ads by Inneractive.
  • 66. 65 7. Penggunaan Merek dan Hak Cipta Masalah ini juga cukup sering saya temui, nokia store sangat menghargai HAKI sehingga developer yang menggunakan merek yang terlah terdaftar harus mendapatkan izin terlebih dahulu dari pihak yang bersangkutan. Misal membuat aplikasi tentang SNSD / Justin Bieber atau menggunakan nama Facebook / Microsoft. Jangankan nama, menggunakan logo Windows, atau MS Office saja tidak boleh. Hal ini sering kali ditolak karena aplikasi yang dipublish ke nokia store harus dari manajemen artis / pihak yang bersangkutan atau telah memiliki izin secara tertulis dari pihak bersangkutan.
  • 67. 66 Kesimpulan Setelah mencoba mengembangkan aplikasi Nokia baik Web App maupun Java ME, terkadang developer yang baru memulai megembangkan aplikasi mobile bingung memilih web app atau java me. Itu semua tergantung pada kemampuan masing-masing. Web app menggunakan bahasa yang lebih sederhana yaitu html, css, dan javascript. Web based relative lebih mudah untuk dipelajari dan dalam pembuatan aplikasi lebih cepat dibandingkan java me. Namun walaupun mudah, Anda tidak bisa begitu bisa banyak bereksplorasi dalam pembuatan aplikasi. Karena web app tidak bisa mengakses API hardware perangkat nokia seperti kamera, kontak, sistem file, sampai berjalan di background layaknya aplikasi chat. Berbeda dengan Java Me, Anda bisa lebih banyak bereksplorasi menggunakan API yang disediakan oleh perangkat nokia. Namun dalam proses pembuatannya terkadang lebih mudah, walaupun ada beberapa orang yang justru menganggap membuat aplikasi native lebih mudah daripada web based. Lalu bagaimana cara memulai mengembangkan aplikasi di platform Nokia? Bagi yang merasa baru dalam dunia mobile, saya sarankan untuk memulai di web app, dari situ Anda mungkin akan merasakan keterbatasan dan akan mencoba tantangan baru dengan mempelajari Java ME atau bahkan game. Demikian buku singkat dari saya, semoga bermanfaat. Mohon maaf jika ada kesalahan penulisan, pembahasan maupun materi, karena saya sendiri masih dalam tahap belajar. Semua sample code bisa Anda unduh melalui tautan berikut: http://sdrv.ms/14bwZX5 Anda juga dapat meng-unduh sample code Web App di situs resmi Developer Nokia:  Web App: http://goo.gl/txyn2  Java Me: http://goo.gl/SD85i Video Training Web App dan Java ME: http://goo.gl/lPsSh Semoga bermanfaat, selamat koding! 