Pelatihan Intel XDK. Modul 4 Pengembangan Aplikasi Mobile Learning Menggunakan Intel XDK. Dikembangkan oleh Intel Software.

Transkripsi

1 Pelatihan Intel XDK Modul 4 Pengembangan Aplikasi Mobile Learning Menggunakan Intel XDK 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 4 Pengembangan Aplikasi Mobile Learning Menggunakan Intel XDK. 3

4 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.. Langkah 1: Buat Project Baru Langkah pertama kita akan membuat project Intel XDK baru. Project Baru Gambar 1 - Membuat Project Baru Langkah 2: Setup Project Selanjutnya kita gunakan pengaturan project seperti di bawah ini: 4

5 Use App Designer xdk-duniawi Location J Gambar 2 - Project Setup Setelah setup project berhasil, package default dari Intel XDK seperti di bawah ini. Selanjutnya kita akan mulai mengolah project ini. Gambar 3 - Default Package Langkah 3: Menggunakan JQuery Mobile Oke mari kita mengolah project ini J Project ini menggunakan JQuery Mobile sebagai framework Javascript-nya. Pertama kita seleksi index.html à App Designer 5

6 App Designer Gambar 4 - Menggunakan APP DESIGNER Setelah muncul pilihan Framework, pastikan kita pilih JQuery Mobile J JQuery Mobile Gambar 5 - Pilihan Framework Setelah JQuery Mobile dipilih, Refresh File Tree terlebih dahulu untuk menampilkan list file yang terbaru pada project ini. 6

7 Refresh Gambar 6 - File Tree Setelah File Tree di-refresh, maka list file pada project kita akan up-to-date. Hal ini akan sering dilakukan. Langkah 4: Membuat Halaman Intro Secara defacto, halaman pertama yang akan diload pada sebuah aplikasi berbasis html adalah index.html, maka kita pastikan bahwa index.html akan menjadi halaman intro project ini J Mari kita JQM Header supaya lebih mantap. JQM = JQuery Mobile Pada Tab Controls, pilih HEADER lalu drag-n-drop ke canvas, tunggu beberapa saat hingga muncul header yang kita buat. Selanjutnya ceklis Title dan isi dengan Selamat Datang 7

8 Header Gambar 7 - Header Langkah 5: Mengisi Halaman Intro Mari kita isi halaman intro ini dengan beberapa komponen. Pertama-tama kita akan mengisi dengan image. Caranya hampir sama seperti di atas, cukup melakukan drag-n-drop dari tab controls ke canvas. Penjelasannya seperti di bawah ini: Sebelum menambahkan komponen IMG, pertama kita tambahkan image intel.jpg yang sudah tersedia ke dalam folder images pada workspace project xdk-duniawi ini J Selanjutnya seperti biasa kita refresh file tree. Hal ini dilakukan supaya pada saat mengisi img src kita tinggal memilih pada dropdown pada IMG SETTINGS. 8

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

10 <hr/> Gambar 10 - Menambahkan <hr/> Untuk mencoba preview pada simulator device, klik tab EMULATE J Maka hasilnya akan seperti di bawah ini. EMULATE 10

11 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

12 Pilih Icon Gambar 12 - Button Icon Setelah Icon dipilih, lalu ubah Icon Posisition jadi RIGHT.. Bingoo! Hasilnya seperti di bawah ini Gambar 13 - Button dengan Icon 12

13 Langkah 6: Membuat Pop-Up Form Pengisian Nama Pengguna Saatnya kita menambahkan pop-up form pengisian nama pengguna J Intel XDK juga sudah menyediakan komponen pop-up, tapi kita coba cara yang lebih cepat. Pada sesi ini kita akan full coding.. (Mode EDITOR : ON) Langkah pertam kita harus memodifikasi properties Button yang sudah kita buat tadi. Tambahkan atribut berikut ini (code berwarna orange) <a class="widget uib_w_3 d-margins" datauib="jquery_mobile/button" data-role="button" dataicon="arrow-u-r" data-iconpos="right" href="#popuplogin" data-rel="popup" data-position-to="window" datatransition="slide">mulai</a> Selanjutnya <div> Pop-up, pada bagian seperti di bawah ini: Code: Pop-up Gambar 14 - Baris Kode untuk Pop-up Baris kode yang ditambahkan adalah sebagai berikut: <div data-role="popup" id="popuplogin" data-theme="a" class="ui-corner-all"> <div style="padding:10px 20px;"> <h5>isi dengan nama anda!</h5> <label for="un" class="ui-hidden-accessible"> Nama: </label> <input type="text" name="user" id="un" value="" placeholder="nickname" data-theme="a"> <button type="button" data-theme="a" data-icon="check" id="btnmasuk" onclick="actionmasuk()"> Sign me in! </button> </div> 13

14 </div> Mari kita test, apakah pop-up keluar atau tidak.. Hasilnya sperti ini: Gamb ar 15 - Prev iew Ap pli kasi Gambar 16 - Preview Aplikasi: Button Clicked Langkah 7: Menambahkan Halaman HOME Pada sesi ini kita akan memberikan aksi pada pop-up yang sudah dibuat sehingga ketika ditekan akan berpindah ke halaman lain. Sebelumnya kita terlebih dahulu buat sebuah halaman home.html dengan isi sebuah text Hi, kamu lengkap dengan Headernya. Caranya sebagai berikut: 14

15 New File Gambar 17 - New File home.html Gambar 18 Nama File Langkah 8: Mengisi Halaman Home Setelah file dibuat, kita akan mengisinya dengan text. Pilih file home.html, lalu kita masuk mode APP DESIGNER. Seperti halaman index sebelumnya, kita pilih JQuery Mobile sebagai framework. Berikut langkah detailnya: 15

16 home.html Gambar 19 - Home.html Gambar 20 - Pilihan Framework Lalu tambahkan text menggunakan langkah drag-n-drop seperti sebelumnya. Text tersebut berisi Hi, kamu namun sebelumnya kita tambahkan Header dengan title:home Gambar 21 - Header Home Selanjutnya tambahkan text seperti di bawah ini: 16

17 Text: Hi, Kamu Gambar 22 - Text pada Home Langkah 9: Membuat Aksi Pop-Up Form Pengisian Nama Pengguna Pada sesi ini kita akan mencoba mengeksplor HTML dan Javascript pada Intel XDK ini. Pertama-tama kita buat file Javascript pada folder js dengan nama default.js berikut langkah2nya: New File pada Folder js Gambar 23 - File Javascript Baru 17

18 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

19 Gambar 25 - Preview Aplikasi 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. Langkah 10: Menambahkan Common Component JqueryMobile pada Intel XDK Oke mari kita menambahkan beberapa komponen yang sering digunakan pada aplikasi mobile. Berikut list yang akan kita coba yang tersedia pada Intel XDK: - Collapsible - ButtonGroup - Footer - ListView - Select 19

20 Referensi: 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. - Label: Text yang tampil pada layar - Theme: Tema JQM yang akan digunakan - Current Theme: Tema yang sekarang digunakan - Mini: Ukuran komponen menjadi mini - Inset: Komponen dalam satu set - Rounded Corner: Ujung komponen yang berbentuk rounded - Closed Icon: Icon pada saat konten tertutup - Open Icon: Icon pada saat konten terbuka - Icon Position: Poisi ikon pada option yang tersedia - Id: digunakan untuk CSS dan JS 20

21 ButtonGroup Gambar 27 - Button Group 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 - Vertical: Orientasi button vertikal - Id: digunakan untuk CSS dan JS 21

22 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 - Title: Judul yang tampil pada footer - Theme: Tema JQM yang akan digunakan - Id: digunakan untuk CSS dan JS 22

23 ListView ListView merupkan salah satu komponen penting yang sering digunakan untuk menampilkan data dinamis maupun statis. List Item LISTVIEW Gambar 29 - ListView 23

24 Cara menambahkan ListView cukup mudah, seperti yang lainnya tinggal drag-n-drop ke canvas lalu atur properties nya melalui APP DESIGNER atau EDITOR. - Theme: Tema JQM yang akan digunakan - Inset: Rounded - Ordered: List tergabung - Filter: Menampilkan filter untuk List - Auto Devider: Menampilkan pemisah list secara otomatis - Mini: Ukuran komponen menjadi mini - Id: digunakan untuk CSS dan JS 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

25 Untuk menambahkan komponen Select, lakukan drag-n-drop seperti komponen lainnya, lalu isi properties yang dibutuhkan. - Label: Text yang tampil pada layar - Label Position: Posisi label pada layar - Options: Berisi pilihan yang tersedia - Theme: Tema JQM yang akan digunakan - Mini: Ukuran komponen menjadi mini - Icon Position: Poisi ikon pada option yang tersedia - Id: digunakan untuk CSS dan JS Langkah 11: Project Mobile Learning Menggunakan Intel XDK (lanjutan) Oke, setelah mengenal beberapa komponen dan sekaligus mencobanya, kita akan melanjutkan project ini. Sebelumnya kita sortir dulu komponen yang akan dipakai sebagai berikut: HEADER TEXT COLLAPSIBLE BUTTON GROUP FOOTER Gambar 31 - Project (lanjutan) Tampilah home.html 25

26 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> Langkah 12: Membuat Halaman Materi 1 Proses selanjutnya adalah membuat halaman materi1.html yang berisi materi bab 1 pengenalan planet bumi (sesuai nama project: xdk-duniawi J ) 26

27 Gambar 32 - Materi1.html Langkah 13: Mengisi Halaman Materi 1 Setelah materi1.html dibuat, selanjutnya kita masuk APP DESIGN tentunya dengan framework JQM. Lalu kita isi dengan komponen sebagai berikut: - Header : Materi 1: Tentang Dunia o BackButton : Tombol kembali ke halaman sebelumnya - Text : Berisi overview materi 1 - Footer : (c) {nama}, Accordion : Berisi text deskripsi planet bumi. o Planet Bumi : sekilas tentang plante bumi o Bentuk : sekilas tentang bentuk planet bumi o Komposisi Kimia : sekilas komposisi kimia dari planet bumi o Sumber : sumber : wikipedia 27

28 HEADER FOOTER Gambar 33 - Design materi1.html 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

29 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: Gambar 34 - Konten Accordion 29

30 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, 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 aluminium (1,4%); dan 1,2% selebihnya terdiri dari berbagai unsur-unsur langka.</p> </div> </div> </div> Selanjutnya yang terakhir adalah baris kode yang ditambahkan untuk konten accordion Sumber adalah sebagai berikut: <div data-role="collapsible" class="no_wrap widget uib_w_6" data-uib="jquery_mobile/collapsible"> <h4>sumber</h4> <div class="col uib_col_4" data-uib="layout/col"> <div class="widget-container content-area verticalcol"> <p>wikipedia</p> </div> </div> </div> Setelah masing-masing konten dimasukan, lakukan preview pada aplikasi. 31

32 Langkah 14: Mempersiapkan Gambar untuk Materi 2 Setelah materi 1 sudah selesai kita buat dan diisi dengan konten berbasis text, pada bagian ini kita akan membuat materi 2 dan mengisinya dengan konten gambar. Konten gambar yang akan diisi adalah illustrasi planet bumi. Adapun gambar yang akan dimasukan ada 3 buah sebagai berikut : Gambar 35 - Gambar Earth (Sumber: Google) Langkah 15: Membuat Halaman Materi 2 Pada file tree, Klik Kanan à New File à materi2.html Gambar 36 - New File materi2.html Langkah 16: Mengisi Halaman Materi 2 Halaman Materi 2 terdiri dari komponen sebagai berikut: 32

33 - Header : Materi 1: Tentang Dunia o BackButton : Tombol kembali ke halaman sebelumnya - Footer : (c) {nama}, IMG: Gambar planet bumi - Tab Navbar: Navigasi Tab yang akan menampilkan dan memunculkan gambar. Berikut penjelasannya: HEADER NAVBAR IMG with Caption FOOTER Gambar 37 - Layout Materi 2 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

34 </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: Gambar 38 - Letak Kode Navbar IMG (Properties) Cara menambahkan IMG sudah dijelaskan pada langkah sebelumnya, adapun catatan untuk pengaturan propertiesnya sebagai berikut: Img Src Caption Gambar 39 - Properties IMG 34

35 Langkah 17: Menambah Halaman Materi Lanjutan yang Digunakan Navbar Setelah kita menambahkan navbar, ada bebeapa halaman yang belum dibuat, hal ini menyebabkan ketika navbar ditekan akan keluar pesan ERROR. Gambar 40 - Error Loading Page Mari kita tambahkan halaman yang belum tersedia tersebut. Adapun file yang ditambahkan adalah materi2-lanjutan1.html dan materi2-lanjutan2.html. Gambar 41 - New File materi2-lanjutan1.html 35

36 Gambar 42 - materi2-lanjutan2.html Langkah 18: Mengisi Halaman Materi Lanjutan yang Digunakan Navbar Halaman materi lanjutan berisi konten yang mirip dengan materi 2 karena memang lanjutan dari materi tersebut. Adapun konten dan layout nya sebagi berikut: Materi2-lanjutan1 Posisi active nav pada Gambar 2 IMG mengacu gambar lain Gambar 43 - Layout Materi2-lanjutan1 36

37 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: Posisi active nav pada Gambar 3 Gambar 44 - Halaman Materi2-lanjutan2 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 Gambar 45 - Halaman Intro Gambar 46 - Pop Form Nama 38

39 Gambar 47 - Halaman Home Gambar 48 - Halaman Materi 1 39

40 Gambar 49 - Halaman Materi 2 Sekian pembahasan pada modul ini. Materi 3 dan quiz akan dilanjutkan pada modul berikutnya. 40

41 Common Senses J 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 J - Sering mengakses resources HTML5 di: - Dianjurkan sering mengakses resources CSS di: - Resources JavaScript lengkap di: - Resources JQM lengkap di: - Keep Smile J 41