modul 5 pengembangan aplikasi mobile learning menggunakan intel xdk sesi 2

1

Pelatihan Intel XDK Modul 5 – Pengembangan Aplikasi Mobile Learning

Menggunakan Intel XDK Sesi 2

Dikembangkan oleh Intel Software.

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

Modul 5 – Pengembangan

Aplikasi Mobile Learning

Menggunakan Intel XDK Sesi

2.

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

- 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

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

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

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

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

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

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

Dan tampilan akan menjadi seperti ini:

Gambar 8 Tampilan Pop Up Salah

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

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

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>





</div>

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


uib="jquery_mobile/button" data-role="button">Bumi</a>


uib="jquery_mobile/button" data-role="button">Krypton</a>


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:


data-role="button" href="#popupSalah" data-rel="popup" data-

position-to="window" data-transition="slide">Krypton</a>


data-role="button" href="#popupSalah" data-rel="popup" data-

position-to="window" data-transition="slide">Uranus</a>

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:


jqm-popup" data-uib="jquery_mobile/popup" id="popupBenar">


<h1>Benar Sekali</h1>





uib="layout/col">


vertical-col">

<p align="center">Jawaban Anda benar sekali.

Selamat!</p>

</div>

</div>

</div>

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:


jqm-popup" data-uib="jquery_mobile/popup" id="popupSalah">


<h1>Maaf Belum Tepat</h1>





uib="layout/col">


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

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

http://www.w3schools.com/html/html5_intro.asp

http://www.w3schools.com/css/

http://www.w3schools.com/js/

http://view.jquerymobile.com/1.3.2/demos/

modul 5 pengembangan aplikasi mobile learning menggunakan intel xdk sesi 2

Documents