Skip to main content
Contoh Panel Mobile

Cara Buat Project Mobile Dengan Intel XDK

Pembahasan kali ini tentang cara pembuatan project aplikasi mobile menggunakan Intel XDK. Seperti pembahasan sebelumnya bahwa IDE Intel XDK membantu kita pengembang aplikasi mobile dengan menggunakan bahasa web (Hybrid App). IDE ini bisa kita pelajari walaupun untuk tingkatan pemula. Untuk mengenal apa itu Intel XDK dan proses instalasi nya, sebaiknya baca lagi pembahasan sebelumnya.

Baca : Cara Instalasi Intel XDK
Pembahasan kali ini kita akan coba untuk membuat tampilan aplikasi seperti halnya sebuah Panel.

Baca  : Cara Buat Panel jquery mobile

Hasil Akhir dari aplikasi ujicoba kali ini bisa diperhatikan lewat video berikut :

Cara Buat Project Baru

Kita mulai ke tahap pertama pembuatan aplikasi. Sebelumnya, buka dulu Intel XDK kemudian klik START A NEW PROJECT

Mobile Intel XDK

Setelah itu, pilih template dan klik layout and user interface.
Mobile Intel XDK
Kemudian akan tampil beberapa pilihan template, pilih Side Menu App dan jangan lupa ceklis pada use app designer, lalu klik continue
Intel Mobile XDK
beri nama project, kemudian create!
Mobile intel XDK
Tunggu Proses Download nya,,
Mobile Intel XDK
Selanjutnya kita akan melihat tampilan layout awal seperti dibawah ini:
Kita bisa mengedit judul (title) aplikasinya, disini saya beri nama  Aplikasi Pertama.

Menambahkan Halaman dan sub halaman

Untuk menambah halaman atau sub halaman, klik new page pada panel pages, tampilannya seperti dibawah ini:

sebagai contoh, beri nama page “About” dan pilih page, kemudian klik ok! Buat juga page lainnya sesuai dengan kebutuhan masing-masing.

Mengatur menu samping

Untuk mengatur menu samping, klik left #side menu (warna hitam di kanan atas tampilan preview) kemudian akan muncul properti side menu di sebelah kanan atas seperti gambar dibawah:

Menambahkan Gambar

XDK telah menyediakan beberapa gambar, namun apabila anda ingin menambahkan gambar, tambahkan pada direktorikerja\www\images. Misal Project anda berada di D:\Belajar Intel XDK\Project\App_pertama, maka lokasi gambar anda letakkan di D:\Belajar Intel XDK\Project\App_pertama\www\images


Untuk menambahkan gambar ke aplikasi setelah ditambahkan ke folder, masuk ke halaman awal tadi dengan cara double klik mainpage pada panel pages. Kemudian drag and drop IMG dari tab control di sebelah kiri :

Menambahkan Tombol

Untuk menambahkan tombol pada halaman awal tadi, drag and drop BUTTON pada tab control kemudian atur tombol seperti gambar dibawah ini:

Memberikan Link

Kemudian kita akan mengatur link untuk tombol yang telah dibuat, mengatur action trigger pada panel kiri bawah dan pilih page #about untuk tombol about yang telah dibuat sebelumnya.

Mengatur Background

Untuk mengatur background, pada panel style disebelah kanan klik background lalu beri nama classnya dan atur seperti gambar dibawah ini, kita bisa menggunakan background warna atau foto:

Demikian Sekilas Tentang Pembuatan Project Awal menggunakan IDE Intel XDK

Jika Bingung, post berikutnya akan saya buatkan video nya langsung tentang Materi ini dan link untuk download project source code nya, Tetap Stay di Blogciqwan.com

Bersambung ….!

Facebook Comments

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com

More Posts - Website

Follow Me:
TwitterFacebookYouTube

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com