modul 4 intel xdk pengembangan aplikasi mobile learning menggunakan intel xdk sesi i

7/23/2019 Modul 4 Intel XDK Pengembangan Aplikasi Mobile Learning Menggunakan Intel XDK Sesi I

1/41

1

Pelatihan Intel XDKModul 4 Pengembangan Aplikasi Mobile Learning

Menggunakan Intel XDK

Dikembangkan oleh Intel Software.


2/41

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

3

Modul 4 Pengembangan

Aplikasi Mobile Learning

Menggunakan Intel XDK.


4/41

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!

Mari kita mulai..

Langkah 1: Buat Project Baru

Langkah pertama kita akan membuat project Intel XDK baru.

Gambar 1 - Membuat Project Baru

Langkah 2: Setup Project

Selanjutnya kita gunakan pengaturan project seperti di bawah ini:

Project Baru


5/41

5

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 !

Project ini menggunakan JQuery Mobile sebagai framework Javascript-nya. Pertama kita

seleksi index.html"App Designer

Use App Designer

xdk-duniawi

Location!


6/41

6

Gambar 4 - Menggunakan APP DESIGNER

Setelah muncul pilihan Framework, pastikan kita pilih JQuery Mobile!

Gambar 5 - P i l ihan Framework

Setelah JQuery Mobile dipilih, Refresh File Tree terlebih dahulu untuk menampilkan list file

yang terbaru pada project ini.

App Designer

JQuery Mobile


7/41

7

Gambar 6 - F i le 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 IntroSecara 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!

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

Refresh


8/41

8

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 tabcontrols 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 !Selanjutnya

seperti biasa kita refresh file tree. Hal ini dilakukan supaya pada saat mengisi img src kita

tinggal memilih pada dropdown pada IMG SETTINGS.

Header


9/41

9

Gambar 8 - IMG

Supaya lebih mantap, kita coba tambahkan Horizontal Line di bawah gambar tersebut. Mari

kita coba dengan coding !

Masuk ke dalam mode EDITOR, selanjutnya akan muncul tampilan code dari index.html ini,

lalu pada bagian bawah kita isi dengan seperti di bawah ini:

Gambar 9 - EDITOR

IMG

Img src

EDITOR


10/41

10

Gambar 10 - Menambahkan

Untuk mencoba preview pada simulator device, klik tab EMULATE !Maka hasilnya akan

seperti di bawah ini.

EMULATE


11/41

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.

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.

Button


12/41

12

Gambar 12 - Button Icon

Setelah Icon dipilih, lalu ubah Icon Posisition jadi RIGHT.. Bingoo! Hasilnya seperti di bawah ini

Gambar 13 - Button dengan Icon

Pilih Icon


13/41

13

Langkah 6: Membuat Pop-Up Form Pengisian Nama

Pengguna

Saatnya kita menambahkan pop-up form pengisian nama pengguna !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)

Mulai

Selanjutnya Pop-up, pada bagian seperti di bawah ini:

Gambar 14 - Baris Kode untuk Pop-up

Baris kode yang ditambahkan adalah sebagai berikut:

Isi dengan nama anda!

Nama:

Sign me in!

Code: Pop-up


14/41

14

Mari kita test, apakah pop-up keluar atau tidak.. Hasilnya sperti ini:

Gambar 16 - Preview Apl ikasi : Button Cl icked

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:

Gambar 15 - Preview Appl ikasi


15/41

15

Gambar 17 - New Fi le

Gambar 18 Nama Fi le

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:

New File

home.html


16/41

16

Gambar 19 - Home.html

Gambar 20 - P i l ihan Framework

Lalu tambahkan text menggunakan langkah drag-n-drop seperti sebelumnya. Text tersebutberisi Hi, kamu namun sebelumnya kita tambahkan Header dengan title:Home

Gambar 21 - Header Home

Selanjutnya tambahkan text seperti di bawah ini:

home.html


17/41

17

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:

Gambar 23 - F i le Javascript Baru

Text: Hi, Kamu

New File pada

Folder js


18/41

18

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:

Jika berhasil, berikut preview nya !

default.js


19/41

19

Gambar 25 - Preview Apl ikasi

Horay!kita sudah berhasil membuat aplikasi html5 menggunakan Intel XDK. Masih banyak

komponen yang bisa digunakan pada Intel XDK maupun menggunakan widget dariJqueryMobile 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


20/41

20

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

Selanjutnya mari kita coba satu persatu, namun sebelumnya kita harus mengetahui letak

penambahan kode yang tepat !Hal itu bisa kita lakukan setelah mengenal lebih dekat

HTML5, JQM dan Intel XDK.

Collapsible

Gambar 26 - Col lapsible

Untuk mengambahkan komponen ini kita tinggal melakukan drag-n-drop !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


21/41

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 !

-

Vertical: Orientasi button vertikal

-



22/41

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 !

- Title : Judul yang tampil pada footer

-

Theme : Tema JQM yang akan digunakan

-



23/41

23

ListView

ListView merupkan salah satu komponen penting yang sering digunakan untuk menampilkan

data dinamis maupun statis.

Gambar 29 - L istView

LISTVIEW

List Item


24/41

24

Cara menambahkan ListView cukup mudah, seperti yang lainnya tinggal drag-n-drop ke

canvas lalu atur properties nya melalui APP DESIGNER atau EDITOR.

-


-

Inset : Rounded

-

Ordered: List tergabung-

Filter : Menampilkan filter untuk List

- Auto Devider : Menampilkan pemisah list secara otomatis

-

Mini : Ukuran komponen menjadi mini

-


Select

Komponen ini sering digunakan untuk menampilkan data yang disesuaikan dengan aturanyang dibuat. Misal list data provinsi, kota, dll.

Berikut cara pembuatannya:

Gambar 30 - Select

LISTVIEW

Options

Label


25/41

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-


- Mini : Ukuran komponen menjadi mini

-

Icon Position : Poisi ikon pada option yang tersedia

-


Langkah 11: Project Mobile Learning MenggunakanIntel 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:

Gambar 31 - Project lanjutan) Tampilah home.html

HEADER

TEXT

COLLAPSIBLE

BUTTON GROUP

FOOTER


26/41

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

Materi 1

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 !

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


27/41

27

Gambar 32 - Materi1 .html

Langkah 13: Mengisi Halaman Materi 1Setelah 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}, 2013

- Accordion : Berisi text deskripsi planet bumi.

o Planet Bumi : sekilas tentang plante bumi

o Bentuk : sekilas tentang bentuk planet bumi

o Komposisi Kimia : sekilaskomposisi kimia dari planet bumi

o Sumber : sumber : wikipedia


28/41

28

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:

Attribut di atas akan secara otomatis menambahkan BackButton sekaligus memberikan

aksinya sehingga saat ditekan akan otomatis kembali ke halaman sebelumnya.

FOOTER

HEADER


29/41

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 masing-masing bagian. Berikut contoh baris kode yang

ditambahkan untuk menambahkan konten pada accordion:

Planet Bumi

Konten di sini!

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 !seperti di bawah ini:

Gambar 34 - Konten Accordion


30/41

30

Berikut baris kode yang ditambahkan untuk bagian accordion Planet Bumi:

Planet Bumi

Bumi adalah planet ketiga dari delapan

planet dalam Tata Surya. Diperkirakan usianya mencapai 4,6

miliar tahun

Selanjutnya berikut baris kode yang ditambahkan untuk accordion Bentuk:

Bentuk

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

Baris kode yang ditambahkan untuk konten accordion Komposisi Kimia:

Komposisi Kimia

Massa Bumi kira-kira adalah 5,98!1024 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


31/41

31

aluminium (1,4%); dan 1,2% selebihnya terdiri

dari berbagai unsur-unsur langka.

Selanjutnya yang terakhir adalah baris kode yang ditambahkan untuk konten accordion

Sumber adalah sebagai berikut:

Sumber

Wikipedia

Setelah masing-masing konten dimasukan, lakukan preview pada aplikasi.


32/41

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 3buah 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 Fi le materi2 .html

Langkah 16: Mengisi Halaman Materi 2

Halaman Materi 2 terdiri dari komponen sebagai berikut:


33/41

33

-

Header : Materi 1: Tentang Dunia

o BackButton : Tombol kembali ke halaman sebelumnya

-

Footer : (c) {nama}, 2013

-

IMG : Gambar planet bumi

-

Tab Navbar : Navigasi Tab yang akan menampilkan dan memunculkan gambar.

Berikut penjelasannya:

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 !adapun baris kode yang ditambahkan

sebagai berikut:

Gambar 1

HEADER

NAVBAR

IMG with Caption

FOOTER


34/41

34

Gambar 2

Gambar 3

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:

Gambar 39 - Propert ies IMG

Img Src

Caption


35/41

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 Fi le materi2- lanjutan1.html


36/41

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

Gambar 43 - Layout Materi2- lanjutan1

Posisi active nav pada

Gambar 2

IMG mengacu gambar lain


37/41

37

Pada navbar, untuk menambahkan status navbar yang sedang aktif atau tidak, ditambahkan

atribut seperti berikut:

Gambar 2

Pastikan yang aktif hanya satu navbar button saja!

Materi2-lanjutan2

Untuk mengisi halaman ini, lakukan hal yang sama pada materi2-lanjutan1. Berikut hasilnya:

Gambar 44 - Halaman Materi2- lanjutan2

Baiklah, Modul 4 ini telah kita selesaikan, adapun untuk melihat hasil yang sudah kita buatada baiknya kita lakukan preview satu per satu halaman. Berikut halaman yang sudah kita

selesaikan:

Posisi active nav pada

Gambar 3


38/41

38

Gambar 45 - Halaman Intro

Gambar 46 - Pop Form Nama


39/41

39

Gambar 47 - Halaman Home

Gambar 48 - Halaman Materi 1


40/41

40

Gambar 49 - Halaman Materi 2

Sekian pembahasan pada modul ini. Materi 3 dan quiz akan dilanjutkan pada modul

berikutnya.


41/41

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

modul 4 intel xdk pengembangan aplikasi mobile learning menggunakan intel xdk sesi i

Documents