Dokumen tersebut memberikan panduan lengkap tentang pengembangan aplikasi mobile learning menggunakan Intel XDK, mulai dari membuat halaman materi, menambahkan multimedia, membuat halaman kuis, dan menambahkan kode program interaktif.

1. 1
Pelatihan Intel XDK
Modul 5 – Pengembangan Aplikasi Mobile Learning
Menggunakan Intel XDK Sesi 2
Dikembangkan oleh Intel Software.

2. 2
Versi 1.0. September 2013.
Hak Cipta (C) 2013 Intel Software..
Adobe, Adobe Edge, dan Adobe Edge Animate merupakan merk dagang dan merk dagang
terdaftar milik Adobe, Inc.
Android, Chrome, dan Google adalah merk dagang dan merk dagang terdaftar milik Google,
Inc.
Intel, Intel XDK merupakan merk dagang dan merk dagang terdaftar milik Intel Corporation.
iOS dan OS X adalah merk dagang dan merk dagang terdaftar milik Apple, Inc.
Windows, Windows Phone, Windows Store adalah merk dagang dan merk dagang terdaftar
milik Microsoft Corporation.
Semua merk dagang terdaftar lainnya yang tercantum pada modul ini merupakan milik
pemiliknya masing-masing yang peduli.
Modul ini bebas untuk disebarluaskan secara hardcopy ataupun softcopy dengan tanpa
menambah atau mengurangi isi dari modul ini termasuk isi halaman ini. Modul ini tidak boleh
diperjual belikan atau digunakan untuk tujuan komersial lain.

3. 3
Modul 5 – Pengembangan
Aplikasi Mobile Learning
Menggunakan Intel XDK Sesi
2.

4. 4
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. 
Langkah 19: Membuat halaman materi3.html
Pasti masih ingat cara menambahkan halaman. Pada file tree, silakan klik kanan  New File
 materi3.html sehingga tampilan pada file tree akan seperti berikut:
Gambar 1 materi3.html sudah berhasil dibuat
Pilih framework JQuery Mobile pada App Designer dari halaman materi3.html tersebut.
Langkah 20: Mengisi Halaman Materi 3
Halaman Materi 3 terdiri dari komponen dasar sebagai berikut:
- Header : Materi 3: Animasi Petir
o BackButton : Tombol kembali ke halaman sebelumnya
- Footer : (c) {nama}, 2013

5. 5
- Button: Berlabelkan “Start Animasi” dengan Id “btnStartAnimasi”
- IMG: Berupa gambar petir dengan path folder “images/petir.png” dengan Id “gbrPetir”
(silakan salin dulu file petir.png tersebut ke dalam folder images di proyek kita).
Sehingga tampilan pada halaman materi3.html akan seperti berikut:
Gambar 2 Tampilan awal materi3.html
Langkah 21: Menambahkan Suara / Sound
Langkah berikutnya, kita akan menambahkan sebuah elemen multimedia yaitu suara. Pada
proyek ini, skenarionya kita akan memasukkan sebuah suara petir yang akan otomatis
dimainkan terus menerus saat membuka halaman materi3.html ini.

6. 6
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
Gambar 3 Control Audio

7. 7
Sehingga tampilan akan menjadi seperti berikut:
Gambar 4 Audio telah dimasukkan ke kanvas
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.
Gambar 5 Properties pada Elemen Audio
AUDIO

8. 8
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.
Langkah 22: Menambahkan Efek Animasi
Langkah berikutnya adalah menganimasikan. Yang akan kita animasikah adalah gambar
petir.png yang telah kita masukkan sebelumnya.
Sebelum menganimasikan, jangan lupa, pastikan kita telah memberi Id gambar petir.png
tersebut dengan Id “gbrPetir” dan tombol Start Animasi dengan Id “btnStartAnimasi”
Gambar 6 Properties pada petir.png

9. 9
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.
Langkah 23: Membuat Halaman Kuis
Seperti sebelumnya saat menambahkan halaman baru, buat sebuah halaman quiz.html di file
tree dan pilih framework JQuery Mobile pada App Designer dari quiz.html.
Langkah 24: Mengisi Halaman Kuis
Halaman Kuis terdiri dari komponen dasar sebagai berikut:
- Header : Quiz Time
o BackButton : Tombol kembali ke halaman sebelumnya
- Footer : (c) {nama}, 2013
- Teks: Berlabelkan pertanyaan pada kuis ini yaitu “Apakah nama planet yang dapat
ditinggali oleh makhluk hidup?”

10. 10
Sehingga tampilan pada halaman quiz.html akan seperti berikut:
Gambar 7 Tampilan dasar halaman quiz.html
Langkah 25: Membuat Pop Up Hasil Jawaban
Berikutnya, mari kita siapkan Pop Up untuk jawaban benar dan jawaban salah. Pop up ini
akan memberitahu pengguna atas jawaban yang telah dipilihnya. Pertama mari kita buat
Pop Up Jawaban Benar. Drag Pop Up dari bilah Controls bagian Layout ke kanvas.
POP UP

11. 11
Sehingga tampilan menjadi seperti berikut:
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”.

12. 12
Dan tampilan akan menjadi seperti ini:
Gambar 8 Tampilan Pop Up Salah

13. 13
Langkah 25: Membuat Pilihan Jawaban
Berikutnya, kita akan menambahkan button group untuk pilihan jawaban. Dengan cara yang
pernah dijelaskan sebelumnya, drag and drop Button Group yang terdapat di bilah Controls
bagian Form ke kanvas di bagian bawah teks pertanyaan.
Gambar 9 Button Group pada bilah Controls

14. 14
Sehingga tampilan akan menjadi seperti berikut:
Gambar 10 Menambahkan Button Group
Dengan Button Group tersebut yang masih terseleksi, pada bilah Button Group Setting
bagian Properties centang Vertical.
Gambar 11 Pilihan Vertical pada Properties Button Group
Sehingga tampilan button group susunannya akan secara vertikal seperti berikut ini:

15. 15
Gambar 12 Tampilan Button Group yang vertikal
Langkah 25: Membuat kode program untuk kuis
Sekarang saatnya kita masuk ke tampilan Editor dari quiz.html.
Pada bagian elemen <div> yang berisi button group yang telah kita buat, yaitu kurang
lebih bentuk skripnya seperti ini:
<div data-role="controlgroup" class="uib-jqm-flex no_wrap
widget-container widget uib_w_5 d-margins" data-
uib="jquery_mobile/button_group">
<a class="widget uib_w_6" data-
uib="jquery_mobile/button" data-role="button">Button</a>
<a class="widget uib_w_7" data-
uib="jquery_mobile/button" data-role="button">Button</a>
<a class="widget uib_w_8" data-
uib="jquery_mobile/button" data-role="button">Button</a>
</div>

16. 16
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" data-
uib="jquery_mobile/button_group">
<a class="widget uib_w_6" data-
uib="jquery_mobile/button" data-role="button">Bumi</a>
<a class="widget uib_w_7" data-
uib="jquery_mobile/button" data-role="button">Krypton</a>
<a class="widget uib_w_8" data-
uib="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-position-
to="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" data-
position-to="window" data-transition="slide">Bumi</a>
Lalu pada kedua elemen <a> berikutnya, tambahkan atribut berikut:
href="#popupSalah" data-rel="popup" data-position-
to="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" data-
position-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" data-
position-to="window" data-transition="slide">Uranus</a>

17. 17
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 uib-
jqm-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" data-
role="button" data-icon="delete" data-iconpos="notext"
class="ui-btn-right">Close</a>
<div class="col uib_col_2 single-col" data-
uib="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 uib-
jqm-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" data-
role="button" data-icon="delete" data-iconpos="notext"
class="ui-btn-right">Close</a>
<div class="col uib_col_2 single-col" data-
uib="layout/col">
<div class="widget-container content-area
vertical-col">
<p align="center">Jawaban Anda benar sekali.
Selamat!</p>
</div>
</div>
</div>

18. 18
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 uib-
jqm-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" data-
role="button" data-icon="delete" data-iconpos="notext"
class="ui-btn-right">Close</a>
<div class="col uib_col_3 single-col" data-
uib="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.
Gambar 13 Hasil akhir aplikasi Duniawi

19. 19
Common Senses 
Beberapa hal yang harus kita biasakan pada saat menggunakan Intel XDK antara lain:
- Sering melakukan refresh terhadap File Tree
- Pada saat menambahkan komponen biasanya Intel XDK melakukan prosesing
beberapa saat, bersabarlah 
- Sering mengakses resources HTML5 di:
http://www.w3schools.com/html/html5_intro.asp
- Dianjurkan sering mengakses resources CSS di: http://www.w3schools.com/css/
- Resources JavaScript lengkap di: http://www.w3schools.com/js/
- Resources JQM lengkap di: http://view.jquerymobile.com/1.3.2/demos/
- Keep Smile 