Академический Документы
Профессиональный Документы
Культура Документы
Gambar 1 Aplikasi Twitter mobile untuk iOS, Android, dan Windows Phone
Membuat aplikasi mobile dapat menggunakan SDK (Software Development Kit) yang sudah
disediakan oleh masing-masing platform mobile. Misalkan, XCode untuk iOS dan Microsoft
Visual Studio untuk Windows Phone. Dengan begitu, aplikasi yang dirancang untuk iOS
hanya berjalan pada sistem operasi iOS dan tidak bisa berjalan pada sistem operasi lainnya,
begitu juga yang lainnya.
Chrome, aplikasi Facebook, atau sebuah website mobile. Intel XDK dapat diinstall di sistem
operasi Windows, OS X, dan Linux.
Pada Intel XDK terdapat perangkat untuk melakukan coding, debugging, testing, dan build
aplikasi yang telah kita kembangkan menjadi aplikasi web dan aplikasi HTML5 hybrid untuk
berbagai platform mobile diantaranya iOS, Android, Windows 8 Store, Windows 8 Phone, dan
lain-lain.
Intel baru saja merilis Intel XDK New. Yang akan kita gunakan pada pelatihan ini adalah versi
Intel XDK New ini. Sampai saat modul ini ditulis, Intel XDK New baru tersedia versi
previewnya untuk sistem operasi Windows. Intel menjanjikan akan segera merilis versi
untuk sistem operasi OS X dan Linux segera. Berikut ini adalah contoh tampilan dari Intel
XDK New:
Catatan: Sampai hari pembuatan modul ini, Intel XDK New hanya tersedia untuk OS Widows.
Untuk OSX dan Linux masih Coming soon
Langkah 1
Setelah masuk halaman unduhan seperti di bawah ini, klik tombol Download Intel XDK New.
Ukuran file kurang lebih 70 Mb.
Langkah 2
Oke, selanjutnya setelah file installer selesai diunduh, mari kita lakukan proses instalasi.
Prosesnya cukup simpel dan mirip dengan proses instalasi program lainnya.
Jalankan
installer!
Langkah 3
Klik installer, maka akan ada langkah-langkah instalasi selanjutnya.
Klik Tombol
Next
Langkah 4
Selanjutnya pilih destinasi folder untuk instalasi Intel XDK ini, folder default seperti di bawah
ini.
Destinasi
folder
Klik Tombol
Next
Gambar 6 - Pengaturan Instalasi
Langkah 5
Klik Tombol
Install
Setelah proses instalasi berhasil maka akan tampil pada list programs.
Program Intel
XDK New
Muhammad Yusuf
muhammad.yusuf@live.com
@ruangchupa
Pada tampilan tersebut disajikan menu untuk membuka proyek-proyek yang telah kita buat
sebelumnya dan menu untuk membuat proyek baru. Kali ini kita akan mencoba membuat
satu proyek baru. Silakan klik tombol Start a New Project.
Sekarang kita akan disuguhkan tampilan menu untuk membuat proyek baru.
Pada bilah di samping kiri, terdapat pilihan tipe metode dari pembuatan proyek yang akan
kita buat. Terdapat 4 pilihan yaitu Use App Designer, Import Project, Start with a
demo, dan Blank Project:
1. Use App Designer: Dengan menggunakan metode pembuatan proyek ini, kita akan
diberikan beberapa library JavaScript UI yang dapat kita pilih untuk membuat
tampilan pada aplikasi kita. Kita juga diberikan kemudahan dengan cara drag and drop
saat menambahkan dan melakukan layouting elemen pada aplikasi kita.
2. Import Project: Metode pembuatan proyek ini digunakan saat kita ingin
mengimport proyek yang telah kita buat sebelumnya menggunakan Intel XDK versi
sebelumnya, App Starter Wizard, atau lainnya yang kompatibel dengan Intel XDK.
3. Start with a demo: Metode pembuatan proyek yang menggunakan aplikasiaplikasi demo yang sudah disediakan oleh Intel sebagai contoh.
4. Blank Project: Metode pembuatan proyek ini dipakai jika kita ingin membuat
proyek yang benar-benar dari awal dan saat awal dibuat hanya berisi direktori
standar Intel XDK dan satu file HTML awal. Namun saat ditengah-tengah
pengembangan proyek jika ingin menggunakan App Designer, tetap dapat
menggunakannya dengan mengklik pada menu App Designer yang sudah
disediakan.
Silakan pilih Start with a Demo, lalu pilih salah satu demo aplikasi yang disediakan pada
menu sebelah kanan dan klik Next. Pada tampilan berikutnya, silakan beri nama proyek dan
pilih lokasi folder penyimpanan proyek dan klik Create.
1. Develop
Tahapan ini adalah tahap saat aplikasi dibuat dan dikembangkan. Terdapat dua pilihan
pengembangan pada tahap ini yaitu Editor dan App Designer. Pada pilihan Editor kita
dapat melakukan aktivitas Coding dan pada pilihan App Designer kita dapat melakukan
aktivitas layouting.
2. Emulate
Pada tahap ini aplikasi yang kita buat dites untuk disimulasikan ketika berjalan pada device
nanti. Terdapat banyak menu untuk melakukan simulasi seperti Accelerometer, Geolocation,
Network, Events, dan lain-lain.
3. Test
Pada tahapan ini aplikasi yang kita buat akan dicoba untuk dijalankan di device asli. Yang
perlu dilakukan untuk melakukan tahap ini adalah kita terlebih dahulu perlu menginstall
aplikasi App Lab di device yang akan dijadikan tempat kita mencoba aplikasi kita. Nanti,
pada aplikasi App Lab tersebut kita dapat membuka aplikasi yang kita kembangkan yang
telah kita push ke server pada saat tahap Test ini. Aplikasi App Lab ini tersedia untuk device
dengan platform iOS dan Android.
10
4. Build
Tahap ini adalah tahap saat aplikasi kita dibuild menjadi sebuah aplikasi untuk masingmasing platform yang akan kita pilih. Caranya cukup mudah yaitu hanya dengan mengklik
salah satu platform pada menu di tahap Build ini maka aplikasi kita akan diunggah ke server
dan oleh server akan dikembalikan lagi dalam bentuk paket aplikasi yang siap diinstall atau
dipublish di platform yang telah kita pilih.
11
5. Services
Tahap ini sebenarnya adalah tahap tambahan yang optional jika kita ingin menggunakan
layanan-layanan yang disediakan untuk melakukan hal misalnya menambah iklan di aplikasi
kita, men-track performance aplikasi kita, dan lain-lain.
12
1. Membuat Proyek
Pada tampilan awal Intel XDK, pilih Start a New Project dan pilih Use App Designer
sebagai metode pembuatan proyek yang akan kita pakai.
Beri nama proyek yang akan kita buat dengan nama xdkHelloWorld dan silakan tentukan
lokasi folder penyimpanan proyek tersebut.
13
Setelah proyek kita selesai dibuatkan oleh Intel XDK, maka akan muncul tampilan bahwa
proyek kita telah sukses dibuat dan siap untuk dikembangkan lebih lanjut. Silakan tutup pop
up Success yang muncul.
14
Maka akan terbuka pada bilah Editor tampilan kode program dari file index.html tersebut.
15
Lalu klik pada tombol App Designer di bagian atas bilah sebelah kiri untuk membuka
tampilan bilah App Designer.
Maka bilah Editor kita akan berubah menjadi bilah App Designer dan untuk pertama kali, kita
akan diminta memilih framework UI yang mana yang akan kita pakai.
16
Maka tampilan khas App Designer akan muncul beserta kanvas aplikasi kita dan kita bisa
dengan bebas melakukan aktivitas drag and drop untuk menambahkan elemen dan melayout elemen pada aplikasi kita.
17
Pada bilah Controls, pada bagian Form, silakan drag ke kanvas sebuah elemen Button.
op
d dr
n
a
Drag
18
Dengan button yang baru kita buat yang masih terseleksi, pada bilah Button Settings, isi
Label dengan Hello World Button, lalu centang Id dan isi dengan btnHelloWorld.
19
Pengisian label adalah untuk merubah teks pada tombol tersebut di tampilan layar dan
pengisian id adalah untuk mendefinisikan id dari tombol tersebut untuk penggunaan di kode
program nanti.
Tampilan di kanvas kita sekarang adalah seperti ini:
20
Berikutnya kita akan menambahkan sebuah teks di kanvas kita. Pada bilah Controls, bagian
Media, drag and drop Text ke sebelah bawah tombol btnHelloWorld yang telah kita buat
sebelumnya.
op
d dr
n
a
Drag
21
Lalu masih dengan teks tersebut yang terseleksi, pada bilah Text Settings, isi Text dengan
Aplikasi Pertamaku di Intel XDK. Lalu centang Id, dan isi dengan txtHelloWorld.
22
Penambahan dan layouting elemen pada aplikasi kita sudah cukup, sekarang akan kita
lanjutkan pada coding alias meng-kode program. Sebelumnya, mari kita coba tes aplikasi kita
dengan mengklik tombol Emulate pada menu tahapan-tahapan pengembangan di bagian
atas.
Saat tombol tersebut diklik, kemungkinan akan ada alert permintaan untuk men-save
aplikasi kita jika belum kita save dan silakan pilih Yes.
23
Dan berikut adalah tampilan aplikasi kita yang sedang diemulasikan pada device virtual,
untuk contoh di bawah ini adalah device iPhone 5 virtual:
Lumayan bukan? Jika kita klik tombol Hello World Button yang telah kita buat maka tidak
akan terjadi apa-apa. Mengapa? Jelas karena kita belum memberi perintah aksi apapun pada
tombol tersebut. Maka dari itu, mari kita kembali ke tampilan Develop dengan mengklik
tombol Develop pada menu tahapan-tahapan pengembangan di bagian atas.
24
Maka kita akan diberikan tampilan editor kode program yang penuh dengan huruf-huruf dan
karakter-karakter seperti berikut ini:
25
Pada bilah hierarki file, pastikan file yang terpilih adalah file index.html untuk
memastikan bahwa kode program yang sedang terbuka adalah kode program milik
index.html.
Selanjutnya, mari fokus ke editor kode program yang terbuka, dan mari mulai aktivitas
coding.
Bahasa yang akan kita gunakan adalah bahasa HTML, terlihat dari ekstensi file yang sedang
kita buka, yaitu .html. Mungkin kebanyakan dari Anda sudah familiar dengan bahasa HTML
ini. Bagi yang belum familiar, dapat belajar lebih lanjut tentang bahasa HTML pada modul
yang khusus membahas tentang bahasa HTML. Modul tersebut banyak tersedia di HTML,
buku yang membahas khusus tentang bahasa HTML pun banyak tersedia di toko buku.
Ya, serius, kita akan membuat aplikasi mobile menggunakan bahasa HTML yang lumayan
familiar bagi Anda. Benar-benar bahasa HTML. Tambahannya mungkin ada pada kode
Javascript yang akan kita tambahkan dan kode dari library-library tambahan. Untuk
mengetahui betapa mudahnya, mari kita mulai.
26
Pertama-tama, mari kita lihat hasil pekerjaan kita sebelumnya saat menambahkan elemen
pada kanvas. Aktivitas drag and drop tersebut sebenarnya akan otomatis men-generate
kode HTML. Silakan scroll kode program Anda sampai Anda temukan kode seperti berikut:
Itu adalah baris dari kode yang digenerate saat kita membuat elemen Button. Pada bagian
yang ditunjukkan tanda panah, itu adalah hasil generate kode dari atribut-atribut yang kita
isikan saat membuat tombol. Terdapat atribut Id dan Label.
Lalu lihat juga pada baris kode program berikut:
Bisa menebak dan menemukan sendiri elemen apakah itu? Ya, itu adalah elemen Text
dengan atribut id txtHelloWorld dan Text Aplikasi pertamaku di Intel XDK.
27
Kesimpulannya, saat kita melakukan layouting dengan App Designer, sebenarnya kita
sedang mempersingkat langkah kerja kita dengan membiarkan Intel XDK menggenerate
sendiri kode HTML untuk kita.
Terdapat satu kesimpulan lain yang didapat: Pada pengembangan aplikasi
mobile di Intel XDK atau aplikasi HTML5 lainnya, bahasa yang digunakan
untuk layouting adalah bahasa HTML.
Sekarang, mari lanjut ke tahap pemberian perintah aksi program. Silakan cari baris kode
program berikut ini:
Terlihat pada angka baris kode program pada gambar di atas, terlihat bahwa baris kode
program tersebut berada pada baris 25-49. Atau mungkin beda-beda tipis pada baris kode
program milik Anda. Itu adalah sebuah kode program dengan bahasa JavaScript. Pada
pengembangan aplikasi menggunakan Intel XDK atau aplikasi HTML5 lainnya, kode perintah
untuk aksi program mengunakan bahasa JavaScript. Kode di atas adalah kode-kode
perintah dasar yang otomatis digenerate oleh Intel XDK.
28
Baris kode programnya adalah sebagai berikut, silakan diketikkan pada bagian tersebut:
function showHelloWorld(){
$("#txtHelloWorld").text("Hello World Intel XDK");
}
Sehingga tampilan pada baris kode program adalah seperti berikut:
Mungkin kebanyakan dari Anda belum familiar dengan maksud dari kode program tersebut.
Kode tersebut merupakan bahasa JavaScript dengan tambahan library JQuery Mobile (yang
telah kita pilih di awal pengembangan aplikasi). Kode tersebut merupakan sebuah fungsi
bernama showHelloWorld() yang saat dipanggil akan mengganti atribut text
menjadi Hello World Intel XDK dari sebuah elemen pada aplikasi yang memiliki id
txtHelloWorld. Di mana elemen pada aplikasi kita yang memiliki id tersebut adalah Text
yang kita buat sebelumnya. Singkatnya, fungsi tersebut ketika dipanggil akan membuat
elemen Text yang kita buat sebelumnya berubah atribut Text atau isi teksnya menjadi
Hello World Intel XDK.
Berikutnya untuk dapat dijalankan, fungsi showHelloWorld tersebut harus dipanggil terlebih
dahulu. Kita akan memanggil fungsi tersebut ketika tombol Hello World yang telah kita buat
29
sebelumnya disentuh (menggunakan jari pada smartphone atau diklik jika pada komputer
PC).
Caranya, pertama-tama temukan baris kode program yang merupakan baris kode program
yang telah digenerate Intel XDK untuk tombol yang telah kita buat, yaitu baris kode
program berikut yang telah kita bahas di atas saat pertama kita memasuki tampilan Editor
kode program:
Tambahkan kode program baru pada elemen <a> sebelum penutup tag elemen berupa
tanda kurung siku tutup seperti yang ditunjukkan pada panah pada gambar di atas. Kode
programnya adalah sebagai berikut:
ontouchstart="showHelloWorld()"
Sehingga baris kode program untuk tombol tersebut adalah sebagai berikut:
Terlihat sekarang bahwa selain atribut class, data-uib, data-role, dan id,
terdapat satu atribut baru yaitu ontouchstart. Atribut ini berfungsi untuk
mendefinisikan bahwa saat pada elemen tersebut mendapatkan input berupa touch pada
device nanti (pada komputer PC berupa klik), maka akan memanggil fungsi
showHelloWorld() yang telah kita buat dan definisikan sebelumnya.
4. Meng-emulate aplikasi
Sekarang mari kita jalankan kembali aplikasi kita, seperti sebelumnya, klik tombol Emulate di
menu bagian atas.
30
Sekarang, silakan coba klik tombol bertuliskan Hello World Button pada aplikasi kita.
Seharusnya ketika tombol tersebut diklik akan merubah teks di bawahnya menjadi
bertuliskan Hello World Intel XDK.
31
Pada menu di bagian atas, terdapat tombol reload aplikasi dan slider untuk zoom in dan
zoom out device. Klik tombol reload aplikasi untuk mereload aplikasi yang sedang diemulate
untuk kembali ke kondisi awal dan gunakan tombol slider zoom in dan zoom out untuk
mengatur pembesaran tampilan device.
Dan pada bilah sebelah kiri dan kanan pada tampilan emulate terdapat beberapa fungsi
untuk membantu kita meng-emulate aplikasi kita. Terdapat menu Device untuk mengganti
pilihan device yang digunakan untuk meng-emulate aplikasi kita. Terdapat juga menu
Accelerometer, Device & Network Settings, dan Geo Location. Itu semua untuk membantu
kita dalam meng-emulate aplikasi kita dalam berbagai kemungkinan dan kondisi.
32
Sekarang silakan mencoba mengganti device yang kita gunakan untuk meng-emulate
aplikasi Hello World kita. Pada bilah sebelah kiri, bagian menu Device terdapat tombol
dropdown yang berisi list device yang dapat digunakan. Silakan diklik dan pilih device yang
Anda inginkan.
33
Lumayan bukan? J
34
Modul 4 Pengembangan
Aplikasi Mobile Learning
Menggunakan Intel XDK.
Overview
Sesi ini merupakan pembuka dari sesi selanjutnya yang berbasis project. Pada sesi ini kita
akan membuat sebuah project aplikasi mobile berbasis HTML5 dan JQM menggunakan Intel
XDK.
Kita akan membuat sebuah aplikai media pembelajaran yang berisi konten dan multimedia
serta quiz. Lalu pada sesi hari kedua nanti akan ditambahkan pula fitur untuk posting score
hasil quiz kita ke facebook J
Mari kita mulai..
Project Baru
Location J
Setelah setup project berhasil, package default dari Intel XDK seperti di bawah ini.
Selanjutnya kita akan mulai mengolah project ini.
App Designer
JQuery Mobile
Setelah JQuery Mobile dipilih, Refresh File Tree terlebih dahulu untuk menampilkan list file
yang terbaru pada project ini.
Refresh
Setelah File Tree di-refresh, maka list file pada project kita akan up-to-date. Hal ini akan
sering dilakukan.
Header
Gambar 7 - Header
Img src
IMG
Gambar 8 - IMG
Supaya lebih mantap, kita coba tambahkan Horizontal Line di bawah gambar tersebut. Mari
kita coba dengan coding J
Masuk ke dalam mode EDITOR, selanjutnya akan muncul tampilan code dari index.html ini,
lalu pada bagian bawah </figur/> kita isi dengan <hr/> seperti di bawah ini:
EDITOR
Gambar 9 - EDITOR
<hr/>
Untuk mencoba preview pada simulator device, klik tab EMULATE J Maka hasilnya akan
seperti di bawah ini.
EMULATE
10
Selanjutnya kita akan menambahkan komponen tombol untuk memulai. Seperti biasa, dalam
mode APP DESIGNER kita drag-n-drop komponen ke dalam canvas. Komponen button ada
pada jenis FORM.
Button
Gambar 11 - Button
Untuk menambahkan UX yang lebih mantap kita tambahkan Icon pada tombol tersebut.
Caranya: ceklist Icon pada tab properties, lalu pilih Icon yang tersedia.
11
Pilih Icon
Setelah Icon dipilih, lalu ubah Icon Posisition jadi RIGHT.. Bingoo! Hasilnya seperti di bawah ini
12
</div>
Mari kita test, apakah pop-up keluar atau tidak.. Hasilnya sperti ini:
14
New File
home.html
15
home.html
Gambar 19 - Home.html
Lalu tambahkan text menggunakan langkah drag-n-drop seperti sebelumnya. Text tersebut
berisi Hi, kamu namun sebelumnya kita tambahkan Header dengan title:Home
16
17
default.js
Gambar 24 - Default.js
Lalu kita isi file default.js tersebut dengan baris kode di bawah ini:
function actionMasuk(event){
$.mobile.changePage('home.html',
{reloadPage : true,
changeHash : true,
transition: "slide" });
}
Setelah file default.js terisi, kita import file tersebut pada index.html sehingga actionMasuk()
akan berfungsi. Pastikan import default.js di bawah baris import JQuery Mobile seperti
berikut ini:
<script type="application/javascript"
src="js/jquery.min.js">
</script>
<script type="application/javascript"
src="jqm/jquery.mobile-min.js">
</script>
<script type="application/javascript" src="js/default.js">
</script>
Jika berhasil, berikut preview nya J
18
Horay J kita sudah berhasil membuat aplikasi html5 menggunakan Intel XDK. Masih banyak
komponen yang bisa digunakan pada Intel XDK maupun menggunakan widget dari
JqueryMobile lainnya. Materi selanjutnya kita akan mencoba menambahkan beberapa
komponen yang sering digunakan pada sebuah aplikasi mobile.
Collapsible
ButtonGroup
Footer
ListView
Select
19
Referensi: http://view.jquerymobile.com/1.3.2/demos/
Selanjutnya mari kita coba satu persatu, namun sebelumnya kita harus mengetahui letak
penambahan kode yang tepat J Hal itu bisa kita lakukan setelah mengenal lebih dekat
HTML5, JQM dan Intel XDK.
Collapsible
Gambar 26 - Collapsible
Untuk mengambahkan komponen ini kita tinggal melakukan drag-n-drop J lalu selanjutnya
tambahkan konten yang ada di dalam collabsible berupa text, gambar dan lain sebagainya.
-
ButtonGroup
Komponen ini memiliki terdiri dari beberapa Button yang digabung menjadi satu kelompok.
Namun karakteristik tiap Button unique dan bisa dimanipulasi sesuai kebutuhan. Misal kita
bisa membuat grup tombol untuk pengaturan Media seperti di atas. Seperti halnya
komponen button, untuk menambahkan group Button ini kita tinggal melakukan Drag-n-drop
kemudia mengatur properties tiap Button sesuai kebutuhan J
-
21
Footer
Gambar 28 - Footer
Sama halnya dengan Header, komponen Footer ini biasa digunakan untuk menampilkan
informasi yang biasanya akan dibawa pada tiap halaman, bisa berupa navigasi atau text
biasa. Layout Footer sudah dirancang fixed berbeda dengan header yang ada pilihan untuk
fixed atau tidak.
Untuk menambahkannya: Just drag-n-drop J
-
22
ListView
ListView merupkan salah satu komponen penting yang sering digunakan untuk menampilkan
data dinamis maupun statis.
List Item
LISTVIEW
Gambar 29 - ListView
23
Cara menambahkan ListView cukup mudah, seperti yang lainnya tinggal drag-n-drop ke
canvas lalu atur properties nya melalui APP DESIGNER atau EDITOR.
-
Select
Komponen ini sering digunakan untuk menampilkan data yang disesuaikan dengan aturan
yang dibuat. Misal list data provinsi, kota, dll.
Berikut cara pembuatannya:
Label
Options
LISTVIEW
Gambar 30 - Select
24
Untuk menambahkan komponen Select, lakukan drag-n-drop seperti komponen lainnya, lalu
isi properties yang dibutuhkan.
-
COLLAPSIBLE
BUTTON GROUP
FOOTER
25
Setelah melakukan penyortiran dari hasil latihan pengenalan komponen sebelumnya, sisakan
yang terlihat seperti di atas. Selanjutnya kita akan memberi aksi pada Button Materi 1
sehingga akan membuka halaman Materi 1. Pada tab properties kita tambahakan id:
materi1
Selanjutnya kita tambahkan atribut onClick pada tombol materi1, berikut baris kode yang
ditambahkan (berwarna orange):
<a class="widget uib_w_11" data-uib="jquery_mobile/button"
data-role="button" data-icon="eye" id="materi1"
onclick="materi1()">Materi 1</a>
Lalu kita tambahkan method materi1() pada default.js seperti berikut:
function materi1(event){
$.mobile.changePage(
'materi1.html',
{ dataUrl :
"materi1.html?parameter=123", data : {
'paremeter' : '123' },
reloadPage : true,
changeHash : true,
transition: "pop" });
}
Lalu jangan lupa kita import default.js pada home.html ini J
<script type="application/javascript"
src="js/default.js"></script>
26
Gambar 32 - Materi1.html
27
HEADER
FOOTER
Catatan:
Header (Back Button)
Untuk menambahkan BackButton pada header, kita cukup menambahkan attribut pada
elemen header tersebut. Attribut yang ditambahkan seperti di bawah ini:
<div data-role="header" class="container-group innerelement uib_w_1" data-uib="jquery_mobile/header" dataposition="fixed" data-add-back-btn="true">
Attribut di atas akan secara otomatis menambahkan BackButton sekaligus memberikan
aksinya sehingga saat ditekan akan otomatis kembali ke halaman sebelumnya.
28
Accordion (Content)
Setelah accordion ditambahkan dengan cara drag-n-drop, selanjutnya untuk mengisi konten
dalam masing bagian caranya harus via EDITOR. Kita harus menambahkan paragraf yang
berisi teks di dalam <div> masing-masing bagian. Berikut contoh baris kode yang
ditambahkan untuk menambahkan konten pada accordion:
<div data-role="collapsible" class="no_wrap widget uib_w_4"
data-uib="jquery_mobile/collapsible">
<h4>Planet Bumi</h4>
<div class="col uib_col_2" data-uib="layout/col">
<div class="widget-container content-area verticalcol">
<p>Konten di sini!</p>
</div>
</div>
</div>
Pada dasarnya kita bisa menambahkan konten lain selain teks pada masing-masing bagian
accordion tersebut, caranya kita bisa menambahkan tag lain yang dibutuhkan.
Selanjutnya kita isi masing-masing bagian pada accordion dengan konten yang diambil dari
wikipedia J seperti di bawah ini:
29
Berikut baris kode yang ditambahkan untuk bagian accordion Planet Bumi:
<div data-role="collapsible" class="no_wrap widget uib_w_4"
data-uib="jquery_mobile/collapsible">
<h4>Planet Bumi</h4>
<div class="col uib_col_2" data-uib="layout/col">
<div class="widget-container content-area
vertical-col">
<p>Bumi adalah planet ketiga dari delapan
planet dalam Tata Surya. Diperkirakan usianya mencapai 4,6
miliar tahun</p>
</div>
</div>
</div>
Selanjutnya berikut baris kode yang ditambahkan untuk accordion Bentuk:
<div data-role="collapsible" class="no_wrap widget uib_w_5"
data-uib="jquery_mobile/collapsible">
<h4>Bentuk</h4>
<div class="col uib_col_3" data-uib="layout/col">
<div class="widget-container content-area verticalcol">
<p>Bentuk planet Bumi sangat mirip dengan bulat
pepat (oblate spheroid), sebuah bulatan yang
tertekan ceper pada orientasi kutub-kutub yang
menyebabkan buncitan pada bagian khatulistiwa</p>
</div>
</div>
</div>
Baris kode yang ditambahkan untuk konten accordion Komposisi Kimia:
<div data-role="collapsible" class="no_wrap widget uib_w_6"
data-uib="jquery_mobile/collapsible">
<h4>Komposisi Kimia</h4>
<div class="col uib_col_4" data-uib="layout/col">
<div class="widget-container content-area verticalcol">
<p>Massa Bumi kira-kira adalah 5,981024 kg.
Kandungan utamanya adalah besi (32,1%), oksigen
(30,1%), silikon (15,1%), magnesium (13,9%),
sulfur (2,9%), nikel (1,8%), kalsium (1,5%), and
30
31
Berikut penjelasannya:
HEADER
NAVBAR
FOOTER
Proses pembuatan header dan footer mengacu pada langkah pada pengisian materi 1.
Adapun untuk pembuatan IMG dan Navbar penjelasannya sebagai berikut:
NAVBAR
Untuk menambahkan Navbar, kita harus coding J adapun baris kode yang ditambahkan
sebagai berikut:
<div data-role="navbar">
<ul>
<li><a href="materi2.html" class="ui-btn-active uistate-persist" data-icon="grid">Gambar 1</a>
33
</li>
<li><a href="materi2-lanjutan1.html" dataicon="grid">Gambar 2</a>
</li>
<li><a href="materi2-lanjutan2.html" dataicon="grid">Gambar 3</a>
</li>
</ul>
</div>
Kode di atas di tambahkan di atas IMG atau tepatnya seperti di bawah ini:
IMG (Properties)
Cara menambahkan IMG sudah dijelaskan pada langkah sebelumnya, adapun catatan untuk
pengaturan propertiesnya sebagai berikut:
Img Src
Caption
34
Mari kita tambahkan halaman yang belum tersedia tersebut. Adapun file yang ditambahkan
adalah materi2-lanjutan1.html dan materi2-lanjutan2.html.
35
Gambar 42 - materi2-lanjutan2.html
36
Pada navbar, untuk menambahkan status navbar yang sedang aktif atau tidak, ditambahkan
atribut seperti berikut:
<li><a href="materi2-lanjutan1.html" class="ui-btn-active
ui-state-persist" data-icon="grid">Gambar 2</a>
Pastikan yang aktif hanya satu navbar button saja J
Materi2-lanjutan2
Untuk mengisi halaman ini, lakukan hal yang sama pada materi2-lanjutan1. Berikut hasilnya:
Baiklah, Modul 4 ini telah kita selesaikan, adapun untuk melihat hasil yang sudah kita buat
ada baiknya kita lakukan preview satu per satu halaman. Berikut halaman yang sudah kita
selesaikan:
37
38
39
Sekian pembahasan pada modul ini. Materi 3 dan quiz akan dilanjutkan pada modul
berikutnya.
40
Common Senses J
Beberapa hal yang harus kita biasakan pada saat menggunakan Intel XDK antara lain:
-
41
Modul 5 Pengembangan
Aplikasi Mobile Learning
Menggunakan Intel XDK Sesi
2.
Well, mari kita lanjut proyek kita. Terakhir kita sudah membuat dua halaman materi dan
sekarang mari kita lanjutkan dua halaman berikutnya pada proyek kita yaitu halaman materi
3 dan kuis. Pada halaman-halaman tersebut akan berisi tampilan materi secara multimedia
dan tampilan kuis. Sudah tidak sabar? Mari kita lanjutkan proyek kita.
Pilih framework JQuery Mobile pada App Designer dari halaman materi3.html tersebut.
Pertama-tama, mari kita buat sebuah folder baru pada folder proyek kita dengan nama
folder sounds. Lalu silakan kita salin file petirgelegar.mp3 yang telah disediakan ke dalam
folder sounds tersebut.
Silakan drag and drop control Audio dari bilah Controls bagian Media ke bagian bawah dari
gambar petir.png
AUDIO
Pada bilah Audio Settings bagian Properties pada elemen Audio tersebut yang masih
terseleksi, isikan Mp3 Src dengan sounds/petirgelegar.mp3 lalu centang Autoplay dan Loop
sehingga elemen audio kita tersebut akan otomatis diplay saat masuk halaman tersebut dan
akan terus menerus diulang-ulang.
Alangkah lebih baiknya menyediakan juga versi file Ogg dari audio yang
kita masukkan dan menyertakannya pada proyek kita dengan mengisikan
juga bagian Ogg Src. Hal tersebut akan memungkinkan lebih banyak
platform dan browser yang mendukung untuk memainkan audio pada
aplikasi kita.
File Audio telah berhasil kita masukkan, namun jika kita Emulate, tidak akan terjadi apa-apa
karena untuk Audio belum dapat diemulasikan pada virtual device di Intel XDK. Kita harus
menggunakan device asli untuk mencobanya.
Untuk menganimasikan, kita perlu melakukan aktivitas coding di Editor. Silakan buka Editor
dari materi3.html lalu di dalam tag elemen <head> masukkan script Javascript berikut:
<script type="application/javascript">
$( "#btnStartAnimasi" ).click(function() {
$( "#gbrPetir" ).animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in"
}, 1500 );
});
</script>
Script tersebut akan menambahkan animasi selama 1500 mili detik pada gbrPetir berupa
animasi lebar yang menjadi 70% dari ukuran stage, opacity yang menjadi 40%, dan margin
kiri sejauh 0,6 in. Namun seperti pada elemen Audio, efek animasi ini belum dapat dijalankan
pada device virtual di Intel XDK. Kita harus mencobanya di device asli.
POP UP
10
Dengan Popup yang terseleksi tersebut, isikan pada bilah Properties bagian Title yaitu
Benar Sekali, bagian Close Button dengan right, dan Id dengan popupBenar.
Dengan cara yang sama, buat satu lagi Popup dan isikan pada bilah Properties bagian Title
yaitu Maaf Belum Tepat, bagian Close Button dengan right, dan Id dengan popupSalah.
11
12
13
Dengan Button Group tersebut yang masih terseleksi, pada bilah Button Group Setting
bagian Properties centang Vertical.
Sehingga tampilan button group susunannya akan secara vertikal seperti berikut ini:
14
15
Ganti isi masing-masing dari ketiga tag <a> yang asalnya berisi Button dengan Bumi,
Krypton, dan Uranus. Sehingga skrip menjadi seperti berikut:
<div data-role="controlgroup" class="uib-jqm-flex no_wrap
widget-container widget uib_w_5 d-margins" datauib="jquery_mobile/button_group">
<a class="widget uib_w_6" datauib="jquery_mobile/button" data-role="button">Bumi</a>
<a class="widget uib_w_7" datauib="jquery_mobile/button" data-role="button">Krypton</a>
<a class="widget uib_w_8" datauib="jquery_mobile/button" data-role="button">Uranus</a>
</div>
Lalu pada elemen <a> pertama, yang berisi Bumi, tambahkan atribut berikut:
href="#popupBenar" data-rel="popup" data-positionto="window" data-transition="slide"
Sehingga elemen <a> pertama tersebut menjadi seperti ini:
<a class="widget uib_w_6" data-uib="jquery_mobile/button"
data-role="button" href="#popupBenar" data-rel="popup" dataposition-to="window" data-transition="slide">Bumi</a>
Lalu pada kedua elemen <a> berikutnya, tambahkan atribut berikut:
href="#popupSalah" data-rel="popup" data-positionto="window" data-transition="slide"
Sehingga kedua elemen tersebut menjadi seperti ini:
<a class="widget uib_w_7" data-uib="jquery_mobile/button"
data-role="button" href="#popupSalah" data-rel="popup" dataposition-to="window" data-transition="slide">Krypton</a>
<a class="widget uib_w_8" data-uib="jquery_mobile/button"
data-role="button" href="#popupSalah" data-rel="popup" dataposition-to="window" data-transition="slide">Uranus</a>
16
Berikutnya, kita akan memodifikasi masing-masing pop up benar dan salah. Pada bagian
<div> pop up benar, yang skripnya kurang lebih seperti berikut:
<div data-role="popup" class="outer-element uib_w_3 uibjqm-popup" data-uib="jquery_mobile/popup" id="popupBenar">
<div data-role="header" class="ui-corner-top">
<h1>Benar Sekali</h1>
</div><a href="#" data-rel="back" datarole="button" data-icon="delete" data-iconpos="notext"
class="ui-btn-right">Close</a>
<div class="col uib_col_2 single-col" datauib="layout/col">
<div class="widget-container content-area
vertical-col">
</div>
</div>
</div>
Isikan skrip ini di dalam tag <div class="widget-container content-area
vertical-col">:
<p align="center">Jawaban Anda benar sekali. Selamat!</p>
Sehingga kurang lebih skripnya akan menjadi seperti berikut:
<div data-role="popup" class="outer-element uib_w_3 uibjqm-popup" data-uib="jquery_mobile/popup" id="popupBenar">
<div data-role="header" class="ui-corner-top">
<h1>Benar Sekali</h1>
</div><a href="#" data-rel="back" datarole="button" data-icon="delete" data-iconpos="notext"
class="ui-btn-right">Close</a>
<div class="col uib_col_2 single-col" datauib="layout/col">
<div class="widget-container content-area
vertical-col">
<p align="center">Jawaban Anda benar sekali.
Selamat!</p>
</div>
</div>
</div>
17
Lakukan hal serupa dengan pop up salah dengan menambahkan skrip berikut di dalam tag
<div class="widget-container content-area vertical-col">:
<p align="center">Sayang sekali belum tepat. Silakan coba
lagi.</p>
Sehingga skrip pop up salah kurang lebih akan menjadi seperti berikut:
<div data-role="popup" class="outer-element uib_w_4 uibjqm-popup" data-uib="jquery_mobile/popup" id="popupSalah">
<div data-role="header" class="ui-corner-top">
<h1>Maaf Belum Tepat</h1>
</div><a href="#" data-rel="back" datarole="button" data-icon="delete" data-iconpos="notext"
class="ui-btn-right">Close</a>
<div class="col uib_col_3 single-col" datauib="layout/col">
<div class="widget-container content-area
vertical-col">
<p align="center">Sayang sekali belum tepat.
Silakan coba lagi.</p>
</div>
</div>
Selesai. Silakan mengetes aplikasi berjudul Duniawi yang baru saja kita selesaikan.
18
Common Senses
Beberapa hal yang harus kita biasakan pada saat menggunakan Intel XDK antara lain:
-
19
Pengantar
Pada saat ini kita telah berhasil mengenal Intel XDK Development Tools dan mencoba fiturfitur hebatnya untuk membuat aplikasi multiplatform. Nah, kali ini, pada modul ini, kita akan
membahas lebih lanjut tentang mengetes aplikasi yang telah kita kembangkan pada device
mobile. Untuk bisa mengikuti modul ini tentunya diperlukan sebuah device mobile sebagai
tempat kita mengetes aplikasi buatan kita. Sampai saat ini, untuk pengetesan, platform yang
didukung oleh Intel XDK adalah platform iOS dan Android.
Sebelum melanjutkan, pastikan Anda telah membuka sebuah proyek di Intel XDK.
Kita diminta untuk melakukan sinkronisasi dengan server testing untuk dapat melanjutkan
melakukan testing. Klik Sync dan silakan tunggu proses sinkronisasi yang akan berjalan.
Setelah selesai, maka akan disuguhkan tampilan seperti berikut ini:
Jika terdapat perubahan pada aplikasi kita, maka kita perlu melakukan Push Files kembali ke
server testing dengan mengklik tombol Push Files.
Selanjutnya ketika sudah dipastikan semua file sudah disinkronisasi, maka kita dapat
mengetes aplikasi kita pada device.
Setelah diunduh silakan buka aplikasi yang telah kita buat dan telah disinkronisasi ke server
dengan cara seperti berikut:
1.
2.
Alternatif cara 1: Pindai QR Code yang telah tersedia di tampilan Intel XDK
menggunakan device Anda untuk membuka aplikasi App Lab dan menjalankan aplikasi
yang telah kita buat.
Alternatif cara 2: Buka aplikasi App Lab di device, lalu pilih My Apps pada aplikasi App
Lab tersebut. Setelah itu silakan pilih aplikasi yang akan Anda jalankan dan tekan
tombol Launch.
MY APPS
Overview
Pada sesi ini kita akan mengintegrasikan aplikasi yang sudah dibuat dengan Facebook Graph
API. Aplikasi akan membuat profile Facebook kita mengiri status bahwa sudah mengerjakan
quiz pada aplikas xdk-duniawi
Graph API merupakan jembatan yang bisa disebrangi oleh aplikasi sehingga sehingga
Facebook bisa menerjemahkan request yang dikirim aplikasi dengan response yang sesuai.
Hmm.. ??
Berikut illustrasinya:
HTML5 Based
Mobile Apps
Gambar 1 Facebook Graph API Connect
Apps
Lakukan setup pada aplikasi baru yang akan kita buat sesuai penjelasan di bawah ini:
-
App ID
Icon aplikasi
Identias Aplikasi
Metode integrasi
App ID : Merupakan ID aplikasi yang unik dan digunakan sebagai kunci untuk
berinteraksi dengan aplikasi di luar Facebook
Metode Integrasi : Ada beberapa metode integrasi, masing-masing memiliki
karakteristik yang berbeda sesuai kebutuhan.
6
Adapun metode yang akan kita gunakan untuk XDKduniawi ini hanya dua, yaitu Website
with Facebook Login dan Aplikasi Android Natif.
Site URL
Package Name : Optional, package harus sama jikalau kita ingin menambahkan update
pada aplikasi yang sudah dibuat.
Class Name : Optional
Lalu setelah muncul dialog pilihan permissions, centang pilihan sesuai dengan yang
digambarkan dibawah ini:
Setelah pemilihan permission selesai, maka secara otomatis akan keluar dialog Oauth seperti
di bawah ini untuk permintaan permission yang sudah tadi kita set. Klik OK untuk tiap
permintaa permissions
Pengaturan Facebook Graph API sampai di sini pada fase ini berarti kita sudah berhasil
membuat sebuah aplikasi Facebook yang nantinya bisa menjembatani aplikasi mobile Intel
XDK yang kita buat dengan Facebook.
Android
10
Setelah uploading bundle berhasil, lalu masuk overview application lalu edit CREDENTIALS.
Credentials
Langkah selanjutnya:
-
isi FACEBOOK APPLICATION ID dengan App ID pada aplikasi Facebook yang sudah kita
buat tadi.
Lalu copy-paste FACEBOOK APPLICATION SIGNATURE ke Key Hashes pada
pengaturan cara integrasi menggunakan Android natif.
11
Lakuran pengaturan pada step selanjutnya sesuai dengan yang dibutuhkan. Setelah semua
pengaturan build pada Intel XDK berhasil, lakukan testing pada aplikasi yang sudah kita buat
tersebut.
Oke pengaturan pada Facebook App sudah, pengaturan pada Intel XDK langkah selanjutnya
adalah coding Kita akan melanjutkan project xdk-duniawi yang sudah kita buat
sebelumnya.
12
AppMobi.facebook.login("publish_stream,publish_actions,offli
ne_access");
}
"picture":"http://fbrell.com/f8.jpg",
"name":"XDK Duniawi",
"caption":"XDK Duniawi Android Apps",
"description":"Dikirim melalui aplikasi Android
yang dikembangkan menggunakan Intel XDK",
"message":"Saya telah menyelesaikan quiz pada
Aplikasi XDK Duniawi. Aplikasi ini dikembangkan menggunakan
Intel XDK. http://bit.ly/IntelXDK #IntelXDK #mLearning"
}
AppMobi.facebook.requestWithGraphAPI("me" +
"/feed","POST", objParameters);
}
Output-nya seperi di bawah ini:
Message
Informasi Aplikasi
Image Aplikasi
Gambar 16 - Output Post Status
14
AppMobi.facebook.login("publish_stream,publish_actions,offli
ne_access");
}
Method di atas akan menampilkan Oauth facebook, jika user belum login maka akan otomatis
muncul dialog login. Ouath di atas meminta permission publish_stream, publis_actions,
offline_access yang mana sudah merupakan standar permission dalam pengembangan
aplikasi mobile berbasis html5 dan diakses secara offline.
Share to Facebook
Button
15
document.addEventListener("appMobi.facebook.request.response
",function(e) {
console.log("News Feed Event Returned");
if (e.success == true) {
console.log("News feed updated successfully");
$.mobile.hidePageLoadingMsg();
} },false);
var objParameters = {
"picture":"http://fbrell.com/f8.jpg",
"name":"XDK Duniawi",
"caption":"XDK Duniawi Android Apps",
"description":"Dikirim melalui aplikasi Android
yang dikembangkan menggunakan Intel XDK Development Tools..
",
"message":"Saya telah menyelesaikan quiz pada
Aplikasi XDK Duniawi. Aplikasi ini dikembangkan menggunakan
Intel XDK. http://bit.ly/IntelXDK #IntelXDK #mLearning"
}
AppMobi.facebook.requestWithGraphAPI("me" +
"/feed","POST", objParameters);
}
Dikarenakan services yang digunakan pada Intel XDK adalah AppMobi, maka semua method
yang berhubungan facebook mengambil dari library AppMobi. Untuk baris kode di atas, yang
paling inti adalah bagian:
AppMobi.facebook.requestWithGraphAPI("me" + "/feed","POST",
objParameters);
16
Kode diatas meminta Graph API dengan parameter me yang merupakan standar parameter
yang digunakan Graph API untuk menunjukan user yang telah login dan diberikan auth.
Parameter /feed merupakan opsi ke-arah mana parameter selanjutnya POST akan
dilemparkan. Pada kasus ini kita akan melempar POST ke arah /feed (status facebook).
Parameter teakhir objParameters merupakan object yang dibuat sebelumnya dan isinya
adalah:
-
"picture":"http://fbrell.com/f8.jpg",
"name":"XDK Duniawi",
"caption":"XDK Duniawi Android Apps",
"description":"Dikirim melalui aplikasi Android yang dikembangkan menggunakan Intel
XDK Development Tools.. ",
"message":"Saya telah menyelesaikan quiz pada Aplikasi XDK Duniawi. Aplikasi ini
dikembangkan menggunakan Intel XDK. http://bit.ly/IntelXDK #IntelXDK #mLearning"
Object tersebut berisi array of params yang akan di POST ke /feed yang me miliki dan
sudah diberikan hak akses.
Berikut preview aplikasi
17
Horeee kita sudah sampai tahap akhir project Mobile Apps Menggunakan Intel XDK ini.
Mari kita sedikit flash-back apa saja yang sudah kita pelajari, selanjutnya jangan lupa
untuk terus dan terus berlatih
Selamat berlatih menggunakan Intel XDK..
Thats all.
18
Pengantar
Setelah aplikasi selesai dikembangkan dan lulus uji saat tahap testing. Saatnya kita
menerbitkan aplikasi kita ke pasar. Untuk menerbitkan aplikasi ke pasar sebenarnya cukup
sederhana. Langkah-langkahnya adalah kita mem-build aplikasi kita yang telah selesai di
Intel XDK, lalu kita akan mendapatkan kode binary program dari aplikasi kita untuk masingmasing platform secara otomatis, dan kita tinggal mengirimkan kode binary program
tersebut ke pengelola pasar untuk selanjutnya diverifikasi dan diterbitkan. Mari kita mulai,
kali ini sebagai contoh platform yang akan dibahas adalah platform Android.
Pada layar tersebut, terlihat sekali kemudahan yang ditawarkan Intel XDK. Kita dapat
membuild aplikasi yang telah kita kembangkan ke belasan platform sekaligus hanya dengan
beberapa klik. Kali ini mari kita klik Build untuk Android.
Maka proses sinkronisasi dengan server akan dimulai. Jika sebelumnya kita pernah
mengunggah kode proyek kita tersebut, maka akan diberi tawaran untuk menggunakan
kode kita yang lama, namun untuk lebih pasti bahwa kode yang akan dibuild adalah kode
yang benar-benar termutakhir. Maka kita klik Upload Code.
Gambar 4 Tawaran untuk menggunakan kode yang telah diunggah sebelumnya atau mengunggah ulang kode
Setelah proses unggah selesai, maka kita akan disuguhkan tampilan seperti berikut:
Pada tampilan tersebut terlihat semua sudah dicentang hijau dan aplikasi siap untuk dibuild.
Namun ada kalanya masih ada yang berwarna merah dan perlu diperhatikan lagi. Untuk itu
6
jika ada yang berwarna merah silakan klik tombol edit dari bagian yang berwarna merah dan
isi field-field yang salah atau masih kosong.
Jika sudah hijau semua dan siap untuk dibuild, silakan pada bagian kanan bawah layar klik
tombol Build App Now.
.
Gambar 8 Proses Build
Saat proses Build telah selesai maka akan muncul tampilan berikut:
Sekarang kita dapat mengunduh versi binary dari aplikasi kita untuk platform Android yang
berupa file .apk. Klik Download Build untuk mengunduh APK aplikasi kita lalu tentukan folder
tempat kita akan menyimpan hasil unduhan tersebut.
Tunggu beberapa saat sampai proses pengunduhan selesai, lalu silakan buka folder tempat
kita menyimpan hasil unduhan APK tersebut. Maka akan terdapat APK dari aplikasi kita.
10
11
12
13
Dan jika semuanya sudah selesai dilengkapi, pada pojok kanan atas, tombol Draft akan
menjadi Ready to publish, klik tombol tersebut dan klik Publish this app.
14
Dan selesai. Jika tidak ada masalah, aplikasi kita akan segera terbit di Google Play Store
dalam beberapa jam. Untuk menerbitkan aplikasi ke platform lain kurang lebih langkahnya
sama namun tentu dengan penyesuaian berupa website tempat kita menerbitkan aplikasi
kita harus sesuai dengan platform yang kita tuju.
Pada beberapa platform, terdapat pengecekan terlebih dahulu dari aplikasi yang diterbitkan
seperti pengecekan kode program kalau-kalau masih ditemui bug yang akan mengganggu
device, atau pengecekan isi konten aplikasi kalau-kalau mengandung konten pornografi,
menyesatkan, atau berbahaya. Jika aplikasi kita gagal pada tahap pengecekan tersebut,
maka akan diberitahu aspek apa yang membuat aplikasi kita gagal. Jika seperti itu silakan
perbaiki aplikasi dan terbitkan ulang aplikasi tersebut.
15
Setelah launcher diklik maka akan keluar halaman intro dari intel XDK ini. Jikalau sudah
terinstall dengan baik maka akan muncul splash screen intel XDK.
Bisa kita lihat bahwa sudah otomatis tampil sample app yang bisa kita coba dan
modifikasi.
Klik Tombol
Start New
Selanjutnya maka akan keluar pop-up untuk memilih tipe, metode dan tools yang
digunakan pada project yang akan dibuat.
Isi dengan
nama project
Pilih App
Starter
Klik tombol next maka akan muncul pop-up untuk menjalankan appstarter seperti di
bawah ini:
Launch App
Starter
Jikalau anda belum login atau membuat akun intel dev center maka akan ada perintah
untuk login atau daftar. Jika sudah mempunya akun maka akan muncul pada tab baru
workspace seperti di bawah ini:
Seperti biasa kita akan melakukan Hello World. Anda boleh merubah text pada tombol
yang sudah tersedia dengan text yang diinginkan.
Untuk mengganti text pada tombol Hello World yang sudah tersedia, kita cukup
menyorot dan memilih tombol terserbut sehingga keluar tab button properties dan
button styles.
Button
Properties
Button Styles
Lalu kita coba ganti title pada Button Properties menjadi Hello Indonesia kemudian
tekan tombol Apply pada tab Button Properties. (Masing-masing tab memiliki tombol
Apply sendiri)
Title: Hello
Indonesia
Tombol Apply
untuk Tab Button
Properties
Tombol Apply
untuk Tab Button
Styles