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

(1)

1

Pelatihan Intel XDK

Modul 5 – Pengembangan Aplikasi Mobile Learning

Menggunakan Intel XDK Sesi 2

(2)

2 Versi 1.0. September 2013.

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

(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

(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”

(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 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.

(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:

(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.

(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

(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:

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" role="button" href="#popupSalah" rel="popup" data-position-to="window" data-transition="slide">Krypton</a> <a class="widget uib_w_8" data-uib="jquery_mobile/button" role="button" href="#popupSalah" 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="#" rel="back"

data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>

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

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

<p align="center">Sayang sekali belum tepat. Silakan coba lagi.</p>

</div> </div>

Selesai. Silakan mengetes aplikasi berjudul Duniawi yang baru saja kita selesaikan.

(19)

19