Aplikasi BlackBerry HTML5 WebWorks untuk Tablet BlackBerry® PlayBook™ Modul 3 - Menulis Aplikasi Pertama Anda untuk Tablet BlackBerry PlayBook
Aplikasi BlackBerry HTML5 WebWorks
2
© 2012 Research In Motion Limited
Modul 3 - Menulis Aplikasi Pertama v0.01
Aplikasi BlackBerry HTML5 WebWorks © 2012 Research In Motion Limited. Semua hak dilindungi. BlackBerry®, RIM®, Research In Motion®, SurePress™, SureType® dan merek dagang, nama, dan logo terkait adalah properti dari Research In Motion Limited dan telah terdaftar dan/atau digunakan di A.S. dan di negara-negara seluruh dunia. Ripple adalah merek dagang dari tinyHippos, Inc.; JavaScript adalah merek dagang dari Oracle America, Inc.; Dropbox adalah merek dagang dari Dropbox, Inc. Corporation.; WinZip adalah merek dagang terdaftar dari WinZip International LLC.; VMware adalah merek dagang dari VMware, Inc.; Windows adalah merek dagang dari Microsoft Corporation.; Mac OS adalah merek dagang dari Apple Inc. Google Chrome adalah merek dagang dari Google Inc.; Mozilla dan Firefox adalah merek dagang dari Mozilla Foundation.; Web Inspector adalah merek dagang dari Wintriss Engineering Corporation. Semua merek dagang lainnya adalah properti dari pemiliknya masing-masing. Dokumentasi ini termasuk semua dokumentasi yang disatukan menurut referensi, seperti dokumentasi yang telah diberikan atau disediakan melalui tautan atau dibuat bisa diakses "APA ADANYA" dan "SEBAGAIMANA ADANYA" dan tanpa syarat, dukungan, jaminan, representasi, atau garansi apa pun oleh Research In Motion Limited dan perusahaan afiliasinya ("RIM") dan RIM tidak bertanggung jawab terhadap segala kesalahan ketik, teknis, atau ketidakakuratan, kesalahan atau kelalaian lainnya dalam dokumentasi ini. Demi melindungi kepemilikan RIM dan informasi tertutup dan/atau rahasia dagang, dokumentasi ini mungkin menerangkan beberapa aspek teknologi RIM dalam istilah umum. RIM berhak mengganti informasi yang terkandung di dalam dokumentasi ini secara berkala; walau demikian, RIM tidak berkomitmen untuk menyediakan penggantian, pembaruan, penyempurnaan, atau penambahan lainnya pada dokumentasi ini bagi Anda secara tepat waktu atau bahkan tidak ada sama sekali. Dokumentasi ini mungkin berisi referensi ke sumber informasi, perangkat keras atau perangkat lunak, produk atau layanan pihak ketiga; termasuk berbagai komponen dan konten seperti konten yang dilindungi oleh hak cipta dan/atau situs Web pihak ketiga (secara kolektif disebut "Produk dan Layanan Pihak Ketiga"). RIM tidak mengontrol dan tidak bertanggung jawab atas segala Produk dan Layanan Pihak Ketiga, termasuk tetapi tidak terbatas pada konten, akurasi, kepatuhan hak cipta, kompatibilitas, kinerja, jaminan mutu, legalitas, kelayakan, tautan atau aspek lainnya dari Produk dan Layanan Pihak Ketiga. Referensi ke Produk dan Layanan Pihak Ketiga yang dimasukkan dalam dokumentasi ini tidak menyiratkan dukungan oleh RIM atau Produk dan Layanan Pihak Ketiga atau pihak ketiga tersebut dengan cara apa pun. KECUALI SEJAUH YANG DILARANG SECARA SPESIFIK OLEH HUKUM YANG BERLAKU DALAM YURISDIKSI ANDA, SEMUA SYARAT, DUKUNGAN, JAMINAN, REPRESENTASI, ATAU GARANSI APA PUN, TERSURAT ATAU TERSIRAT, TERMASUK TANPA BATASAN, SEGALA SYARAT, DUKUNGAN, JAMINAN, REPRESENTASI ATAU GARANSI DURABILITAS, KESESUAIAN UNTUK TUJUAN ATAU PENGGUNAAN TERTENTU, DAYA JUAL, KUALITAS DAYA JUAL, NON-PELANGGARAN, KUALITAS KEPUASAN, ATAU HAK, ATAU YANG TIMBUL DARI UNDANG-UNDANG ATAU KEBIASAAN ATAU PERBUATAN YANG BERKAITAN DENGAN ATAU PENGGUNAAN DAGANG, ATAU BERKAITAN DENGAN DOKUMENTASI ATAU PENGGUNAANNYA, ATAU KINERJA ATAU NON-KINERJA DARI SEGALA PERANGKAT LUNAK, PERANGKAT KERAS, LAYANAN, ATAU SEGALA PRODUK DAN LAYANAN PIHAK KETIGA YANG DISEBUTKAN DI SINI, DENGAN INI DIKECUALIKAN. ANDA JUGA MUNGKIN MEMPUNYAI HAK LAINNYA YANG BERBEDA MENURUT NEGARA BAGIAN ATAU PROVINSI. BEBERAPA YURISDIKSI MUNGKIN TIDAK MENGIZINKAN PENGECUALIAN ATAU PEMBATASAN TERHADAP JAMINAN DAN SYARAT TERSIRAT. SEJAUH DIIZINKAN OLEH HUKUM, SEGALA GARANSI ATAU SYARAT TERSIRAT YANG BERHUBUNGAN DENGAN DOKUMENTASI SEJAUH IA TIDAK BISA DIKECUALIKAN SEBAGAIMANA DITETAPKAN DI ATAS, NAMUN BISA DIBATASI, DENGAN INI DIBATASI SEMBILAN PULUH (90) HARI SEJAK TANGGAL ANDA MEMPEROLEH DOKUMENTASI ATAU BARANG YANG MENJADI POKOK MATERI KLAIM. SEJAUH MAKSIMAL YANG DIIZINKAN OLEH HUKUM YANG BERLAKU DALAM YURISDIKSI ANDA, DALAM KEADAAN APA PUN RIM TIDAK BERTANGGUNG JAWAB TERHADAP SEGALA JENIS KERUGIAN YANG BERKAITAN DENGAN DOKUMENTASI INI ATAU PENGGUNAANNYA, ATAU KINERJA ATAU NON-KINERJA DARI SEGALA PERANGKAT LUNAK, PERANGKAT KERAS, LAYANAN, ATAU SEGALA PRODUK DAN LAYANAN PIHAK KETIGA YANG DISEBUTKAN DI SINI TERMASUK TANPA BATASAN KERUGIAN BERIKUT: KERUGIAN LANGSUNG, KONSEKUENSIAL, CONTOH, INSIDENTAL, TIDAK LANGSUNG, KHUSUS, AKIBATNYA, ATAU KERUGIAN SERIUS, KERUGIAN AKIBAT KEHILANGAN LABA ATAU PENDAPATAN, KEGAGALAN MEREALISIR PENGHEMATAN YANG DIPERKIRAKAN, INTERUPSI BISNIS, HILANGNYA INFORMASI BISNIS, HILANGNYA KESEMPATAN BISNIS, ATAU KORUPSI ATAU HILANGNYA DATA, KEGAGALAN MENGIRIM ATAU MENERIMA DATA, MASALAH YANG TERKAIT DENGAN SEGALA APLIKASI YANG DIGUNAKAN BERSAMA PRODUK ATAU LAYANAN RIM, BIAYA SELAMA WAKTU MENGANGGUR, KERUGIAN DARI PEMANFAATAN PRODUK ATAU LAYANAN RIM ATAU BAGIAN DARINYA ATAU LAYANAN AIRTIME, BIAYA BARANG PENGGANTI, BIAYA PENUTUP, FASILITAS ATAU LAYANAN, BIAYA MODAL, ATAU KERUGIAN FINANSIAL SERUPA LAINNYA, BAIK KERUGIAN TERSEBUT TELAH DIPERKIRAKAN ATAU PUN TIDAK, DAN SEKALIPUN RIM TELAH DIBERI TAHU MENGENAI KEMUNGKINAN KERUGIAN DEMIKIAN. SEJAUH MAKSIMAL YANG DIIZINKAN OLEH HUKUM YANG BERLAKU DALAM YURISDIKSI ANDA, RIM TIDAK MEMPUNYAI KEWAJIBAN, TUGAS, ATAU TANGGUNGAN APA PUN DALAM KONTRAK, KESALAHAN, ATAU LAINNYA KEPADA ANDA, TERMASUK SEGALA KEWAJIBAN KARENA KELALAIAN ATAU KEWAJIBAN HUKUM MENYELURUH. PEMBATASAN, PENGECUALIAN, DAN SANGGAHAN YANG BERLAKU DI SINI: (A) TANPA TERGANTUNG PADA SIFAT PENYEBAB TINDAKAN, TUNTUTAN, ATAU TINDAKAN ANDA; TERMASUK NAMUN TIDAK TERBATAS PADA PELANGGARAN KONTRAK, KELALAIAN, KESALAHAN, KEWAJIBAN HUKUM MENYELURUH ATAU TEORI HUKUM LAINNYA DAN PELANGGARAN DASAR ATAU KEGAGALAN DARI TUJUAN DASAR PERJANJIAN INI ATAU SEGALA PEMULIHAN YANG DIMUAT DI SINI; DAN (B) PADA RIM DAN PERUSAHAAN AFILIASINYA, PENERUS MEREKA, ORANG YANG DITUNJUK, AGEN, PEMASOK (TERMASUK PENYEDIA LAYANAN AIRTIME), DISTRIBUTOR RESMI RIM (JUGA TERMASUK PENYEDIA LAYANAN AIRTIME) DAN PARA DIREKTUR, KARYAWAN, DAN KONTRAKTOR INDEPENDEN MEREKA. SELAIN PEMBATASAN DAN PENGECUALIAN YANG DITETAPKAN DI ATAS, DALAM KEADAAN APA PUN DIREKTUR, KARYAWAN, AGEN, DISTRIBUTOR, PEMASOK, KONTRAKTOR INDEPENDEN RIM ATAU AFILIASI RIM TIDAK BERTANGGUNG JAWAB ATAS SEGALA YANG TIMBUL DARI ATAU BERKAITAN DENGAN DOKUMENTASI.
Modul 3 – Menulis Aplikasi Pertama v0.01
© 2012 Research In Motion Limited
3
Aplikasi BlackBerry HTML5 WebWorks Sebelum berlangganan, menginstal, atau menggunakan segala Produk dan Layanan Pihak Ketiga, Anda bertanggung jawab memastikan bahwa penyedia layanan airtime Anda telah setuju untuk mendukung semua fitur mereka. Beberapa penyedia layanan airtime mungkin tidak menawarkan fungsionalitas untuk menjelajahi Internet dengan berlangganan BlackBerry® Internet Service. Tanyakan pada penyedia layanan Anda untuk mengetahui status fungsionalitas ini, pengaturan jelajah, paket layanan dan fiturnya. Instalasi atau penggunaan Produk dan Layanan Pihak Ketiga bersama produk dan layanan RIM mungkin memerlukan satu atau beberapa paten, merek dagang, hak cipta, atau lisensi lainnya untuk menghindari pelanggaran izin pihak ketiga. Anda bertanggung jawab penuh untuk menentukan akan menggunakan, Produk dan Layanan Pihak Ketiga dan apakah perlu lisensi pihak ketiga untuk melakukannya. Jika diperlukan, Anda bertanggung jawab untuk mendapatkannya. Anda tidak boleh menginstal atau menggunakan Produk dan Layanan Pihak Ketiga hingga diperoleh semua lisensi yang diperlukan. Segala Produk dan Layanan Pihak Ketiga yang disediakan bersama produk dan layanan RIM disediakan untuk kenyamanan Anda dan disediakan "APA ADANYA" tanpa syarat tersurat atau tersirat, dukungan, garansi, representasi, atau jaminan dalam bentuk apa pun oleh RIM dan RIM tidak bertanggung jawab atas apa pun, dalam kaitan tersebut. Penggunaan Anda atas Produk dan Layanan Pihak Ketiga diatur oleh dan tunduk pada ketentuan yang Anda setujui pada lisensi lain dan perjanjian lainnya yang berlaku dengan pihak ketiga, kecuali sejauh yang dicantumkan secara tersurat oleh suatu lisensi atau perjanjian lainnya dengan RIM. Beberapa fitur tertentu yang diuraikan dalam dokumentasi ini memerlukan versi minimal dari BlackBerry® Enterprise Server Software, BlackBerry® Desktop Software, dan/atau BlackBerry® Device Software dan mungkin memerlukan produk pengembangan tambahan atau Produk dan Layanan Pihak Ketiga untuk akses ke aplikasi perusahaan. Produk ini menyertakan perangkat lunak yang dikembangkan oleh Apache Software Foundation (http://www.apache.org/) dan/atau atau yang dilisensikan menurut Apache License, Versi 2.0 (http://www.apache.org/licenses/). Untuk informasi lainnya, lihat file NOTICE.txt yang disertakan bersama perangkat lunak. Kecuali jika diharuskan oleh hukum yang berlaku atau dalam perjanjian tertulis, perangkat lunak yang didistribusikan di bawah Lisensi adalah didistribusikan atas DASAR "APA ADANYA", TANPA GARANSI ATAU SYARAT APA PUN, baik tersurat maupun tersirat. Lihat Lisensi untuk bahasa tertentu yang mengatur perizinan dan pembatasan menurut Lisensi. Ketentuan penggunaan produk atau layanan RIM ditentukan dalam lisensi terpisah atau perjanjian lainnya dengan RIM yang berlaku. TIDAK ADA DALAM DOKUMENTASI INI YANG BERMAKSUD MENGGANTIKAN SEGALA PERJANJIAN TERTULIS ATAU JAMINAN YANG DISEDIAKAN OLEH RIM UNTUK SEBAGIAN DARI PRODUK ATAU LAYANAN RIM SELAIN DOKUMENTASI INI.
4
© 2012 Research In Motion Limited
Modul 3 - Menulis Aplikasi Pertama v0.01
Aplikasi BlackBerry HTML5 WebWorks
Tentang panduan lab ini Materi ini dirancang berdasarkan asumsi bahwa semua prasyarat yang diperlukan telah dilengkapi oleh peserta sebelum mencoba latihan ini. Agar tidak berpengaruh negatif pada kualitas pengalaman belajar, RIM menyarankan peserta melengkapi prasyarat.
Modul 3 – Menulis Aplikasi Pertama v0.01
© 2012 Research In Motion Limited
5
Aplikasi BlackBerry HTML5 WebWorks
Daftar Isi Tentang panduan lab ini ................................................. 5 Ringkasan ............................................................ 7 Sasaran ........................................................... 7 Prasyarat yang Disarankan ............................................. 7 Kebutuhan Perangkat Lunak ............................................ 7 Membuat file .html ...................................................... 9 Membuat ikon untuk aplikasi ............................................. 10 Membuat Dokumen Konfigurasi “config.xml” ................................ 11 Mengkompilasi Aplikasi HTML5 WebWorks .................................. 13 Membuat Arsip ..................................................... 13 Gambar 3: Folder output ................................................. 14 Memaketkan aplikasi untuk penempatan pada Simulator ....................... 15 Mengkompilasi dan Memaketkan Menggunakan Ripple Emulator ................. 18 Memaketkan File dari Sistem File Lokal Menggunakan Ripple ................... 18 Mengakses File Proyek dari Server Web Jarak Jauh Menggunakan Ripple .......... 18 Opsi Pemaketan Ripple Emulator ........................................ 21 Setelan Pemaketan Opsional di Ripple Emulator ............................. 22 Memaketkan aplikasi menggunakan Ripple Emulator ......................... 23 Menempatkan Aplikasi ke Tablet Simulator dengan Konfirmasi Perintah ........... 25 Menempatkan Aplikasi ke Tablet Simulator dengan Ripple Emulator .............. 30 Ringkasan dan Pelajaran Lebih Lanjut...................................... 31 Ringkasan ........................................................ 31 Pelajaran Lebih Lanjut ................................................ 31 Sumber Daya Tambahan .............................................. 31
6
© 2012 Research In Motion Limited
Modul 3 - Menulis Aplikasi Pertama v0.01
Aplikasi BlackBerry HTML5 WebWorks
Ringkasan Sasaran Dalam modul ini peserta akan diperkenalkan dengan proses: Membuat file “index.html” untuk sebuah aplikasi Memanfaatkan grafis yang ada untuk ikon aplikasi Membuat file “config.xml” untuk sebuah aplikasi Memaketkan file aplikasi menggunakan BlackBerry® WebWorks™ Packager menjadi file “.bar” dengan konfirmasi perintah Mengakses file proyek dari server Web jarak jauh di Ripple™ Emulator untuk melihat aplikasi Memaketkan aplikasi menggunakan Ripple Emulator Menempatkan aplikasi pada BlackBerry PlayBook Simulator dengan konfirmasi perintah Memaketkan dan meluncurkan aplikasi pada BlackBerry PlayBook Simulator dengan Ripple Emulator
Prasyarat yang Disarankan Untuk modul ini, prasyarat keahlian dan bidang pengetahuan yang disarankan adalah: Pengetahuan tentang berbagai standar Web, seperti HTML, CSS, dan JavaScript® Berpengalaman menggunakan alat Windows Command Prompt Berpengalaman menggunakan aplikasi untuk membuat file .zip
Kebutuhan Perangkat Lunak Untuk menyelesaikan modul ini, diperlukan yang berikut ini: Editor HTML (seperti Notepad) File “icon.png” dari folder kode contoh File “index.html” dan “config.xml” dari folder kode contoh Sebuah aplikasi yang bisa membuat file .zip seperti WinZip® Instalasi BlackBerry® WebWorks™ SDK Instalasi BlackBerry PlayBook Simulator (menggunakan VMWare®) Instalasi perangkat lunak Ripple Emulator Akses ke Server Web Jarak Jauh (seperti Dropbox®) File “icon.png” adalah gambar grafis yang bisa digunakan sebagai ikon untuk aplikasi yang akan dibuat peserta. Ikon ini akan muncul pada layar awal BlackBerry PlayBook di BlackBerry PlayBook Simulator. Jika WinZip tidak diinstal pada komputer host lokal, maka aplikasi sumber terbuka seperti 7-zip bisa diunduh dan digunakan. 7-zip bisa diunduh dari http://www.7-zip.org/
Modul 3 – Menulis Aplikasi Pertama v0.01
© 2012 Research In Motion Limited
7
Aplikasi BlackBerry HTML5 WebWorks Untuk mengetes aplikasi, BlackBerry PlayBook Simulator harus diinstal terlebih dahulu ke modul ini. Instruksi instalasi bersama kebutuhan perangkat keras dan perangkat lunak yang disarankan telah disertakan dalam Modul 2. Demikian juga, instruksi untuk instalasi perangkat lunak Ripple Emulator, bisa ditemukan dalam Modul 2. Akun Dropbox untuk modul ini bisa dibuat gratis di www.dropbox.com
8
© 2012 Research In Motion Limited
Modul 3 - Menulis Aplikasi Pertama v0.01
Aplikasi BlackBerry HTML5 WebWorks
Membuat file .html Untuk memulai pembuatan aplikasi “Hello World”, buka editor teks seperti Notepad untuk membuat file baru. File ini akan berisi konten aplikasi. File ini akan disimpan sebagai file .html. Dalam file baru, tambahkan kode HTML:
<style type="text/css"> body { font-size: 5em; }
Hello World
Setelah menambahkan kode HTML sebagai konten file ini, simpan file ini sebagai “index.html”.
Modul 3 – Menulis Aplikasi Pertama v0.01
© 2012 Research In Motion Limited
9
Aplikasi BlackBerry HTML5 WebWorks
Membuat ikon untuk aplikasi Untuk membuat aplikasi yang bisa diakses oleh pengguna, aplikasi harus mempunyai ikon yang bisa diklik pengguna dari layar awal tablet untuk memulai aplikasi tersebut. Ikon bisa memanfaatkan grafis yang ada atau khusus dibuat menggunakan perangkat lunak pengedit grafis (mis: Adobe Photoshop), menggunakan kembali gambar dari situs Web Anda sendiri atau dari database gambar online yang gratis (mis: iStockphoto.com). Opsi lain adalah membuat ikon sendiri menggunakan aplikasi seperti Icon Maker untuk BlackBerry PlayBook Jika membuat atau memanfaatkan grafis yang ada untuk ikon, berikut ini adalah dimensi dan format file yang disarankan: Dimensi yang disarankan: 86 x 86 piksel Format file yang disarankan: PNG Untuk modul ini, kami akan menggunakan grafis “icon.png” yang telah disertakan bersama modul ini dalam folder kode contoh.
Gambar 1: Ikon Hello World “icon.png”
10
© 2012 Research In Motion Limited
Modul 3 - Menulis Aplikasi Pertama v0.01
Aplikasi BlackBerry HTML5 WebWorks
Membuat Dokumen Konfigurasi “config.xml” Dokumen konfigurasi BlackBerry® HTML5 WebWorks™ adalah file .xml yang berisi elemen untuk mendefinisikan namespace aplikasi BlackBerry HTML5 WebWorks, nama aplikasi, izin aplikasi, halaman mulai, dan ikon yang akan digunakan untuk aplikasi. Juga berisi berbagai elemen untuk mendefinisikan informasi seperti penulis, alamat email, dan setelan konfigurasi lainnya. Dokumen konfigurasi berisi elemen widget di akarnya. Elemen widget menyediakan kontainer untuk semua elemen lainnya. Dokumen konfigurasi adalah dokumen XML yang berdasarkan pada spesifikasi W3C. File “config.xml” berisi elemen untuk mendefinisikan: Namespace aplikasi dan nama aplikasi Izin aplikasi Halaman mulai Ikon yang akan digunakan untuk aplikasi Namespace pengembang aplikasi Setelan konfigurasi lainnya (seperti prioritas angkut jaringan, opsi untuk memulai, dsb) Dokumen config.xml juga mendefinisikan setelan konfigurasi tambahan seperti prioritas angkut jaringan, opsi untuk memulai, informasi lisensi, dsb. Daftar lengkapnya bisa ditemukan di BlackBerry Developers Blog. Untuk membuat dokumen “config.xml”, buka editor teks seperti Notepad dan buat file baru. Setelah file baru tersebut dibuka, tambahkan isi XML berikut ke file:
version="1.0" encoding="UTF-8"?>
<widget
xmlns="http://www.w3.org/ns/widgets"
xmlns :rim="http://www.blackberry.com/ns/widgets" version="1.0.0.0">
Hello World
src="icon.png"/>
src="index.html"/>
Saat membuat file “config.xml” untuk aplikasi HTML5 WebWorks, Anda harus menetapkan namespace bagi aplikasi BlackBerry HTML5 WebWorks™ ke elemen widget. Jika tidak ada namespace, arsip aplikasi tidak sah. Namespace aplikasi adalah http://www.w3.org/ns/widgets
Modul 3 – Menulis Aplikasi Pertama v0.01
© 2012 Research In Motion Limited
11
Aplikasi BlackBerry HTML5 WebWorks Namespace untuk ekstensi BlackBerry HTML5 WebWorks tidak opsional. Namespace untuk ekstensi aplikasi spesifik BlackBerry adalah xmlns:rim File “config.xml” mendefinisikan karakteristik visual dari aplikasi. Misalnya, dalam kode XML berikut:
version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns :rim="http://www.blackberry.com/ns/widget s" version="1.0.0.0">
Hello World
src="icon.png"/>
Tag yang disorot dalam warna merah menunjukkan karakteristik visual aplikasi: nama aplikasi (Hello World) dan grafisnya (grafis “icon.png”).
Gambar 2: Ikon Hello World
12
© 2012 Research In Motion Limited
Modul 3 - Menulis Aplikasi Pertama v0.01
Aplikasi BlackBerry HTML5 WebWorks
Mengkompilasi Aplikasi HTML5 WebWorks Setelah membuat index.hml, config.xml, dan sebuah ikon, aplikasi dasar HTML5 WebWorks bisa dibuat dan dimuat ke BlackBerry PlayBook Simulator. Sebelum memuat aplikasi ke BlackBerry PlayBook Simulator atau Tablet, file tersebut harus dikompilasi ke dalam file “.bar”. Saat mengkompilasi aplikasi BlackBerry WebWorks, BlackBerry® WebWorks™ Packager akan melakukan tindakan berikut: Memvalidasi isi file arsip BlackBerry HTML5 WebWorks Membuat folder target output dan membersihkan file lama (jika perlu) Membuat folder target sumber (jika telah ditentukan) dan membersihkan file lama (jika perlu)
Membuat Arsip Arsip BlackBerry HTML5 WebWorks adalah file “.zip” yang bisa Anda buat dengan alat pengarsipan zip, yang kemudian dikompilasi menggunakan alat baris perintah BlackBerry WebWorks Packager (bbwp) untuk membuat aplikasi. Arsip aplikasi berisi sumber daya berikut: dokumen konfigurasi (file “.xml”) halaman mulai (file “.html” atau file lainnya) ikon aplikasi (file “.png”) sumber daya dan objek lainnya yang disebutkan dalam aplikasi Anda Panjang nama file arsip .zip tidak boleh lebih dari 10 karakter (tidak termasuk ekstensi .zip). Jika sebelumnya Anda telah mengirimkan aplikasi ke BlackBerry App World™, Anda tidak bisa mengganti nama file .zip untuk rilis selanjutnya; namanya harus tetap sama. Jika nama file .zip telah diganti, maka upaya untuk meng-upgrade aplikasi tidak akan berhasil. Anda tidak boleh meletakkan file sumber aplikasi, atau file arsip aplikasi, di folder instalasi BlackBerry WebWorks Packager. Saat mengkompilasi sebuah aplikasi menggunakan alat baris perintah “bbwp”, folder output default "bin" akan dibuat yang akan berupaya menimpa direktori "bin" BlackBerry WebWorks SDK berisi file penting.
Untuk membuat file arsip archive.zip, gunakan langkah-langkah berikut: 1. Buat folder untuk menyimpan file C:\myapp Simpan “config.xml”, “index.html” dan “icon.png” ke folder ini 2. Simpan “index.html” dan “config.xml” serta “icon.png” sebagai sebuah file .zip Ganti nama file .zip menjadi “hw.zip”
Modul 3 – Menulis Aplikasi Pertama v0.01
© 2012 Research In Motion Limited
13
Aplikasi BlackBerry HTML5 WebWorks
3. Buat folder kedua dalam direktori “C:\myapp” bernama “output” C:\myapp\output Anda akan memerlukan folder “C:\myapp\output” bila aplikasi telah dikompilasi. Bila aplikasi telah dikompilasi menggunakan BlackBerry WebWorks Packager, akan dihasilkan sebuah file “.bar” yang disimpan dalam folder “output”. File “.bar” ini akan ditempatkan pada Tablet.
Gambar 3: Folder output
14
© 2012 Research In Motion Limited
Modul 3 - Menulis Aplikasi Pertama v0.01
Aplikasi BlackBerry HTML5 WebWorks
Memaketkan aplikasi untuk penempatan pada Simulator Setelah arsip dibuat, aplikasi HTML5 WebWorks bisa dikompilasi dan dipaketkan untuk penempatan. Untuk menempatkan aplikasi pada BlackBerry PlayBook Simulator, aplikasi harus dipaketkan sebagai file “.bar”. Metode pertama yang bisa digunakan untuk memaketkan aplikasi HTML5 WebWorks adalah menggunakan alat Windows Command Line Prompt dan BlackBerry WebWorks Packager (bbwp.exe). Untuk mengakses Command Line Prompt pada komputer OS Windows, klik menu “Start” → Run…→cmd (tekan tombol “Enter”) Untuk menggunakan Command Line Prompt, ketikkan: cd C:\Program Files\Research In Motion\BlackBerry HTML5 WebWorks SDK for TabletOS 2.2.0.5\bbwp
Kompilasilah aplikasi dengan menggunakan sintaks berikut: bbwp C:\myapp\hw.zip –o C:\myapp\output
Gambar 4: Memaketkan aplikasi untuk penempatan
Modul 3 – Menulis Aplikasi Pertama v0.01
© 2012 Research In Motion Limited
15
Aplikasi BlackBerry HTML5 WebWorks Jika kompilasi berhasil, file “.bar” akan dibuat dalam folder “C:\myapp\output” jika telah ditentukan nilai parameter “–o”. Jika tidak ada parameter “–o” yang ditentukan, file “.bar” telah dibuat dalam subfolder “bin” yang berada dalam folder “C:\myapp”.
Gambar 5: Memaketkan aplikasi untuk penempatan
16
© 2012 Research In Motion Limited
Modul 3 - Menulis Aplikasi Pertama v0.01
Aplikasi BlackBerry HTML5 WebWorks
Gambar 6: File “.bar” telah dibuat dalam direktori yang ditentukan
Jika aplikasi dikompilasi dengan benar, file “.bar” akan dibuat dalam direktori “C:\myapp\output” sebagaimana terlihat dalam diagram di atas.
Modul 3 – Menulis Aplikasi Pertama v0.01
© 2012 Research In Motion Limited
17
Aplikasi BlackBerry HTML5 WebWorks
Mengkompilasi dan Memaketkan Menggunakan Ripple Emulator Metode kedua untuk memaketkan dan menempatkan aplikasi adalah menggunakan Ripple Emulator. Setelah file untuk aplikasi dibangun (file .html”, “config.xml”, dan “icon.jpg” serta file terkait lainnya), semuanya bisa dipaketkan dan dikompilasi menggunakan Ripple Emulator untuk penempatan ke PlayBook Simulator.
Memaketkan File dari Sistem File Lokal Menggunakan Ripple Jika file aplikasi disimpan pada komputer lokal pengembang, file tersebut bisa diakses jika server Web jarak jauh tidak ada. Dari Ripple Emulator, Anda bisa membuka file secara langsung dari sistem file lokal pada komputer Anda dengan menggunakan langkah-langkah berikut: 1. Salin folder proyek Anda semua isinya ke folder RippleSites. Jika folder ini tidak ada, Anda harus membuatnya dalam salah satu lokasi berikut: Windows® XP: C:\Documents and Settings\<Username>\RippleSites Windows® 7: C:\Users\<Username>\RippleSites Mac OS: /Users/<Username>/RippleSites 2. Dari Ripple, dalam bilah alamat, ketikkan http://localhost:9900/ diikuti dengan folder proyek Anda dan halaman depan Misalnya: http://localhost:9900/HelloWorld/index.html
Informasi lainnya tentang cara mengakses file menggunakan Ripple jika server Web jarak jauh tidak ada bisa diakses dari BlackBerry Developer Blog.
Mengakses File Proyek dari Server Web Jarak Jauh Menggunakan Ripple Untuk mengetes sebuah aplikasi HTML5 WebWorks di Ripple Emulator yang telah diinstal pada server Web jarak jauh (seperti Dropbox), file harus disimpan dalam folder Public. File akan bisa diakses oleh
18
© 2012 Research In Motion Limited
Modul 3 - Menulis Aplikasi Pertama v0.01
Aplikasi BlackBerry HTML5 WebWorks
umum. Untuk menggunakan layanan seperti Dropbox, letakkan file index.html, config.xml, dan icon.png serta file lainnya ke folder umum. Jika menggunakan Dropbox, simpan file “index.html”, “config.xml”, dan “icon.png” ke folder Public di akun Dropbox Anda. Setelah menyimpan ke folder Public, ikuti langkah-langkah berikut: Buka akun Dropbox di browser Web (seperti Google Chrome™, Mozilla® Firefox®, dsb) Arahkan ke folder Public, klik kanan pada file indeks, pilih “Copy Public Link”
Gambar 7: Mengakses file proyek dari Dropbox
Pilih “Copy to Clipboard”
Modul 3 – Menulis Aplikasi Pertama v0.01
© 2012 Research In Motion Limited
19
Aplikasi BlackBerry HTML5 WebWorks
Gambar 8: Menyalin ke Clipboard
Tempelkan tautan ini ke bilah alamat Ripple
Gambar 9: Bilah alamat Ripple
Pesan “Hello World” akan muncul pada layar PlayBook di Ripple Emulator
Gambar 10: Pesan “Hello World” di Ripple Emulator
20
© 2012 Research In Motion Limited
Modul 3 - Menulis Aplikasi Pertama v0.01
Aplikasi BlackBerry HTML5 WebWorks
Opsi Pemaketan Ripple Emulator Ripple Emulator bisa digunakan untuk memaketkan dan mengkompilasi file untuk aplikasi HTML5 WebWorks. Sebelum mulai mengkompilasi aplikasi menggunakan Ripple Emulator, Anda harus memahami sebagian opsi pemaketan yang ada. Untuk informasi tentang cara mengunduh dan menginstal perangkat lunak Ripple Emulator, harap lihat Modul 2. Untuk menggunakan opsi pemaketan ini, setelan harus dikonfigurasi untuk platform yang digunakan dalam Ripple Emulator (misalnya WebWorks-TabletOS); untuk mengonfigurasi setelan, klik opsi menu “Platforms” dan pilih “WebWorks-Tablet OS”.
Gambar 11: Memilih opsi pemaketan
Untuk mengakses opsi pemaketan di Ripple Emulator, klik ikon atas layar Anda.
kunci inggris di sudut kanan
Ada beberapa opsi berikut untuk memaketkan:
Gambar 12: Opsi pemaketan
Package - Opsi ini membangun dan memaketkan aplikasi. Untuk aplikasi tablet BlackBerry, opsi ini membuat file .zip dan .bar untuk aplikasi Package & Sign - Opsi ini membangun, memaketkan, dan menandatangani aplikasi. Untuk aplikasi tablet BlackBerry, opsi ini membuat file .zip dan .bar yang telah ditandatangani untuk aplikasi Package & Launch - Opsi ini membangun, memaketkan, dan meluncurkan aplikasi pada simulator yang ditentukan. Untuk aplikasi tablet BlackBerry, opsi ini membuat file .zip dan .bar untuk aplikasi Untuk memaketkan aplikasi di Ripple Emulator:
Modul 3 – Menulis Aplikasi Pertama v0.01
© 2012 Research In Motion Limited
21
Aplikasi BlackBerry HTML5 WebWorks
Pilih ikon kunci Inggris yang berada di kanan atas Ripple Emulator kemudian pilih Settings Dalam kotak dialog “Package”, Anda akan diharuskan memasukkan lokasi BlackBerry HTML5 WebWorks SDK dan lokasi file aplikasi Hello World. Untuk informasi tentang cara mengunduh dan menginstal BlackBerry HTML5 WebWorks, harap lihat Modul 2. SDK Path - Path ke tempat menginstal BlackBerry WebWorks SDK. Informasi ini diperlukan untuk memaketkan aplikasi. Berikut ini adalah path default SDK: Windows XP: C:\Program Files\Research In Motion\BlackBerry WebWorks SDK for TabletOS <nomor versi> Windows 7: C:\Program Files (x86)\Research In Motion\BlackBerry WebWorks SDK for TabletOS <nomor versi> Mac OS: /Developer/SDKs/Research In Motion/BlackBerry WebWorks SDK for TabletOS <nomor versi> Project Root - Lokasi proyek Anda (tempat menyimpan file index.html, config.xml, dan icon.png). Setelan ini diperlukan untuk memaketkan aplikasi Anda. Contoh: C:\myapp\hw Archive Name - Nama file arsip yang akan dibuat (misalnya, “hw” atau “HelloWorld”). Setelan ini diperlukan untuk memaketkan aplikasi Anda. Output Folder - Lokasi file output akan berada. Lokasi ini tidak boleh sama dengan Project Root. Informasi ini diperlukan untuk memaketkan aplikasi Anda. Contoh: C:\myapp\output
Gambar 13: Contoh C:\myapp\output
Setelan Pemaketan Opsional di Ripple Emulator Ada beberapa setelan pemaketan tambahan di Ripple Emulator. Opsi tambahan ini termasuk:
22
© 2012 Research In Motion Limited
Modul 3 - Menulis Aplikasi Pertama v0.01
Aplikasi BlackBerry HTML5 WebWorks
Enable Web Inspector - Setelan ini menentukan apakah akan mengaktifkan atau menonaktifkan Web Inspector jarak jauh untuk mendebug dan membuat profil aplikasi pada perangkat langsung Catatan: Ini harus dinonaktifkan saat memaketkan aplikasi untuk distribusi ke etalase BlackBerry App World Bersyarat: Setelan ini hanya diperlukan jika pengembang mengetes aplikasi dengan Web Inspector jarak jauh CSK Password - Kata sandi yang ditentukan untuk penyimpanan kunci milik pengembang (bila pengembang telah mendaftar pada Otoritas Penandatangan RIM untuk Kunci Penandatanganan Kode Bersyarat: Setelan ini hanya diperlukan jika menandatangani aplikasi P12 Password - kata sandi yang ditentukan pengembang saat membuat sertifikat pengembang. Jika tidak, ini adalah kata sandi penyimpanan kunci mereka Bersyarat: Setelan ini hanya diperlukan jika menandatangani aplikasi Bundle Number - Nomor paket untuk aplikasi milik pengembang (misalnya, 1.0.0.x, di mana x adalah nomor paket). Setelah berhasil menandatangani aplikasi, nomor ini secara otomatis bertambah 1. Bersyarat: Setelan ini hanya diperlukan jika menandatangani aplikasi PlayBook IP - Alamat IP dari BlackBerry Tablet Simulator yang digunakan pengembang. Bersyarat: Setelan ini hanya diperlukan jika meluncurkan aplikasi Kata Sandi PlayBook - Kata sandi dari BlackBerry Tablet Simulator yang digunakan pengembang. Bersyarat: Setelan ini hanya diperlukan jika meluncurkan aplikasi
Memaketkan aplikasi menggunakan Ripple Emulator Sebelum mulai memaketkan aplikasi Anda menggunakan Ripple Emulator, pastikan bahwa setelan “Build” telah dikonfigurasi. Demikian juga, pastikan bahwa file dokumen konfigurasi (config.xml) disimpan di akar proyek. Untuk memaketkan aplikasi Anda:
Modul 3 – Menulis Aplikasi Pertama v0.01
© 2012 Research In Motion Limited
23
Aplikasi BlackBerry HTML5 WebWorks
Pilih ikon kunci
Inggris yang berada di kanan atas Ripple Emulator
Pilih Package Ripple Emulator membangun aplikasi. Jika kompilasi dan pemaketan berhasil, pesan "Build succeeded!" akan ditampilkan dan file “.bar” disimpan di folder Output
Gambar 14: Kompilasi berhasil
24
© 2012 Research In Motion Limited
Modul 3 - Menulis Aplikasi Pertama v0.01
Aplikasi BlackBerry HTML5 WebWorks
Menempatkan Aplikasi ke Tablet Simulator dengan Konfirmasi Perintah Setelah berhasil memaketkan dan mengkompilasi aplikasi Anda, disarankan agar aplikasi dites di BlackBerry PlayBook Simulator sebelum penempatan ke Tablet. BlackBerry Tablet Simulator memungkinkan pengembang untuk menjalankan dan mengetes aplikasi tanpa mengakses perangkat keras fisik. Mengetes dan mendebug aplikasi adalah tugas penting dalam proses pengembangan perangkat lunak. Ini juga berlaku untuk pembuatan aplikasi seluler bagi perangkat seperti ponsel cerdas dan tablet. Penempatan aplikasi pada BlackBerry Tablet Simulator memungkinkan pengembang melihat dan mengetes aplikasi untuk mengetahui bagaimana fungsinya nanti pada tablet BlackBerry PlayBook sesungguhnya dengan menggunakan perangkat lunak VMware.
Untuk mengetes aplikasi pada BlackBerry PlayBook Simulator dengan konfirmasi perintah, gunakan langkah-langkah berikut: Mulai BlackBerry PlayBook Simulator di VMware Player Hidupkan “Development Mode”. “Development Mode” pada simulator tablet BlackBerry PlayBook harus diaktifkan sebelum aplikasi bisa dimuat. Untuk mengaktifkan “Development Mode”, klik ikon
gir di sudut kanan atas layar simulator
Gambar 15: Mengaktifkan mode pengembang
Modul 3 – Menulis Aplikasi Pertama v0.01
© 2012 Research In Motion Limited
25
Aplikasi BlackBerry HTML5 WebWorks Pada layar Security, klik “Development Mode”. Untuk menggunakan label Use Development Mode, setel Development Mode ke “ON”. Dalam bidang Device Password (pada menu utama Security), ketikkan kata sandi bagi tablet Anda (kata sandi default untuk Tablet adalah “PlayBook”).
Gambar 16: Mode pengembang
Catat alamat IP simulator. Anda bisa melihat alamat IP tablet dengan menyentuh ikon di sebelah kanan jam pada bilah status
Gambar 17: Memperoleh alamat IP
26
© 2012 Research In Motion Limited
Modul 3 - Menulis Aplikasi Pertama v0.01
Aplikasi BlackBerry HTML5 WebWorks
Buka konfirmasi perintah, dan arahkan ke folder bbwp\blackberry-tablet-sdk\bin, yang ada di folder instalasi BlackBerry WebWorks SDK. Ketikkan teks berikut: C:\Program Files\Research In Motion\BlackBerry WebWorks SDK for TabletOS 2.2.0.5\bbwp\blackberry-tablet-sdk\bin Ketikkan perintah berikut untuk memuat dan menjalankan aplikasi Anda di simulator: blackberry-deploy -installApp -password
-device -package <path file BAR>
Gambar 18: Memaketkan aplikasi menggunakan Windows Command Prompt
Kembali ke simulator PlayBook dan klik opsi menu “All”. Ikon untuk aplikasi “Hello World” akan ditampilkan seperti di bawah ini: Modul 3 – Menulis Aplikasi Pertama v0.01
© 2012 Research In Motion Limited
27
Aplikasi BlackBerry HTML5 WebWorks
Gambar 19: Aplikasi Hello World
Klik ikon aplikasi “Hello World” untuk melihat aplikasi
28
© 2012 Research In Motion Limited
Modul 3 - Menulis Aplikasi Pertama v0.01
Aplikasi BlackBerry HTML5 WebWorks
Gambar 20: Aplikasi Hello World
Modul 3 – Menulis Aplikasi Pertama v0.01
© 2012 Research In Motion Limited
29
Aplikasi BlackBerry HTML5 WebWorks
Menempatkan Aplikasi ke Tablet Simulator dengan Ripple Emulator Aplikasi juga bisa ditempatkan ke BlackBerry PlayBook Simulator dengan Ripple Emulator. Sebelum menempatkan aplikasi pada BlackBerry PlayBook Simulator, Pastikan Anda mengonfigurasi setelan "Build" dan "Launch" di Ripple Emulator Pastikan bahwa Anda menyimpan file dokumen konfigurasi (config.xml) di akar proyek Pastikan bahwa PlayBook Tablet Simulator siap dimulai (di VMWare Player) Untuk menempatkan aplikasi menggunakan Ripple Emulator, Pilih ikon kunci
Inggris yang berada di kanan atas Ripple Emulator
Pilih “Package & Launch”. Ripple Emulator membangun aplikasi. Jika kompilasi dan pemaketan berhasil diselesaikan, pesan "Build succeeded!" akan ditampilkan
Gambar 21: Kompilasi berhasil
Untuk aplikasi tablet BlackBerry, file “.zip” dan “.bar” bagi aplikasi disimpan dalam folder output yang ditentukan. BlackBerry Tablet Simulator meluncurkan aplikasi.
Gambar 22: Aplikasi Hello World diluncurkan di BlackBerry Tablet Simulator
30
© 2012 Research In Motion Limited
Modul 3 - Menulis Aplikasi Pertama v0.01
Aplikasi BlackBerry HTML5 WebWorks
Ringkasan dan Pelajaran Lebih Lanjut Ringkasan Dalam modul ini, dibahas topik berikut: Membuat file “index.html” untuk sebuah aplikasi Memanfaatkan grafis yang ada untuk ikon aplikasi Membuat file “config.xml” untuk sebuah aplikasi Memaketkan file aplikasi menggunakan BlackBerry WebWorks Packager menjadi file “.bar” Mengakses file proyek dari server Web jarak jauh di Ripple Emulator untuk melihat aplikasi Memaketkan aplikasi menggunakan Ripple Emulator Menempatkan aplikasi pada BlackBerry PlayBook Simulator dengan konfirmasi perintah Memaketkan dan meluncurkan aplikasi pada BlackBerry PlayBook Simulator dengan Ripple Emulator
Pelajaran Lebih Lanjut Setelah berhasil menyelesaikan modul ini, langkah berikutnya antara lain menyiapkan aplikasi untuk ditempatkan pada Tablet. Langkah-langkah ini termasuk: Mengonfigurasi komputer pengembang untuk meminta kunci penandatanganan kode Menandatangani aplikasi untuk penempatan pada Tablet Membuat token debug untuk menempatkan aplikasi pada Tablet Menggunakan alat Web Inspector™ untuk mengetes dan mendebug Informasi tentang langkah-langkah berikutnya bisa ditemukan dalam “Modul 4 - Mengetes, menandatangani, dan menempatkan aplikasi ke tablet BlackBerry PlayBook”.
Sumber Daya Tambahan Berikut ini adalah sumber daya tambahan yang bisa diakses untuk memberikan informasi tambahan mengenai berbagai topik yang dibahas dalam modul ini. Untuk informasi lainnya tentang dokumen konfigurasi, lihat Membuat dokumen konfigurasi WebWorks Untuk informasi lainnya tentang BlackBerry Tablet Simulator, lihat Menggunakan simulator tablet. Untuk informasi lainnya tentang menggunakan server Web jarak jauh sumber terbuka seperti Dropbox, kunjungi BlackBerry Support Forums Untuk informasi lainnya tentang cara mengakses proyek lokal menggunakan Ripple, kunjungi portal BlackBerry HTML5 WebWorks Untuk informasi lainnya tentang setelan konfigurasi tambahan dalam file XML, kunjungi Menggunakan file konfigurasi XML
Modul 3 – Menulis Aplikasi Pertama v0.01
© 2012 Research In Motion Limited
31