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

Transkripsi

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

2 Versi 1.0. September 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. 2

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

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

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

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 6

7 Sehingga tampilan akan menjadi seperti berikut: AUDIO 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 7

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 8

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}, Teks: Berlabelkan pertanyaan pada kuis ini yaitu Apakah nama planet yang dapat ditinggali oleh makhluk hidup? 9

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 10

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

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

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 13

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

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" datauib="jquery_mobile/button_group"> <a class="widget uib_w_6" datauib="jquery_mobile/button" data-role="button">button</a> <a class="widget uib_w_7" datauib="jquery_mobile/button" data-role="button">button</a> <a class="widget uib_w_8" datauib="jquery_mobile/button" data-role="button">button</a> 15

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

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 uibjqm-popup" data-uib="jquery_mobile/popup" id="popupbenar"> <div data-role="header" class="ui-corner-top"> <h1>benar Sekali</h1> <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"> 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> <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> 17

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 uibjqm-popup" data-uib="jquery_mobile/popup" id="popupsalah"> <div data-role="header" class="ui-corner-top"> <h1>maaf Belum Tepat</h1> <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> Selesai. Silakan mengetes aplikasi berjudul Duniawi yang baru saja kita selesaikan. Gambar 13 Hasil akhir aplikasi Duniawi 18

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: - Dianjurkan sering mengakses resources CSS di: - Resources JavaScript lengkap di: - Resources JQM lengkap di: - Keep Smile 19