Top Banner
MEMBUAT APLIKASI KUIS BERBASIS HTML DENGAN INTEL XDK Modul ini memberikan tutorial membuat aplikasi kuis android dengan Intel XDK. Dalam modul ini akan dibahas tentang menu sidebar dan menu tab view. Dibuat oleh: Nur Rohman
24

Membuat aplikasi quiz android dengan Intel XDK

Aug 09, 2015

Download

Software

Nur Rohman
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Membuat aplikasi quiz android dengan Intel XDK

MEMBUAT APLIKASI KUIS BERBASIS HTML

DENGAN INTEL XDK

Modul ini memberikan tutorial membuat aplikasi kuis android dengan

Intel XDK. Dalam modul ini akan dibahas tentang menu sidebar dan menu

tab view.

Dibuat oleh:

Nur Rohman

Page 2: Membuat aplikasi quiz android dengan Intel XDK

Sebelum masuk ke tutorial, download bahan bahan dibawah ini :

Halaman materi : https://goo.gl/SKkQYb

Halaman soal : https://goo.gl/BgB0Oi

Page 3: Membuat aplikasi quiz android dengan Intel XDK

1. Side Menu App

Membuat project baru, setelah membuka Intel XDK sekarang kita mulai

membuat project baru. Caranya klik menu Start A New Project disebelah kiri

bawah.

Kemudian pilih template lalu pilih layout and user interface, akan muncul beberapa

pilihan, langsung saja pilih yang side menu app.

Page 4: Membuat aplikasi quiz android dengan Intel XDK

Setelah klik side menu app, jangan lupa ceklis pada pilihan use app designer dan klik

continue.

Selanjutnya beri nama project dan klik create.

Page 5: Membuat aplikasi quiz android dengan Intel XDK

Klik OK!

Kemudian akan tampil layout yang akan kita gunakan untuk mendesain aplikasi kita.

Klik title pada header dan ketikkan nama aplikasi yang akan dibuat. Disini saya

contohkan “Quiz” sebagai nama aplikasinya.

Page 6: Membuat aplikasi quiz android dengan Intel XDK

Disamping judul aplikasi ada icon side app yang bisa kita ganti dengan mengklik

iconnya kemudian di panel sebelah kanan pilih icon yang diinginkan.

Nah, iconnya sudah bisa diganti.

Page 7: Membuat aplikasi quiz android dengan Intel XDK

Klik icon yang barusan diganti dan kita bisa edit side menu app. Untuk mengatur

actionnya kita bisa pilih di panel kanan bawah. Double klik Home pada side menu

untuk mengatur halaman awal aplikasi.

Sekarang kita masuk di halaman home, kita bisa menambahkan gambar dengan cara

drag and drop IMG pada tab control kemudia pada panel kanan atas kta pilih

gambarnya. Sebelumnya pastikan anda sudah memiliki gambar pada folder aplikasi

yang tadi dibuat.

Page 8: Membuat aplikasi quiz android dengan Intel XDK

Selanjutnya kita tambahkan 2 button materi dan quiz dengan cara drag and drop

Button dari tab control.

Kita bisa melihat hasilnya di tab emulate yang ada diatas.

Page 9: Membuat aplikasi quiz android dengan Intel XDK

Selanjutnya kita akan mengimport folder html yang akan digunakan sebagai

halaman materi dan soal. Caranya pada panel paling kiri klik kanan lalu pilih Show In

Explore.

Kemudian copykan folder materi dan soal yang tadi sudah di download kedalam

folder /www.

Page 10: Membuat aplikasi quiz android dengan Intel XDK

Buat halaman baru yang nanti akan digunakan untuk menampilkan materi dan soal

dengan cara klik new page pada panel pages.

Page 11: Membuat aplikasi quiz android dengan Intel XDK

Buka halaman materi yang baru saja dibuat kemudian drag and drop ifram dari tab

control lalu pada panel kanan atas pada kolom src ketikan alamat

materi/materi.html setelah itu pada halaman materi akan otomatis tampil.

Kemudian pindah ke halaman home dan klik tombol materi lalu beri link action pada

panel kiri bawah, pilih page #materi.

Page 12: Membuat aplikasi quiz android dengan Intel XDK

Selanjutnya masuk ke halaman soal yang tadi dibuat lalu drag and drop iframe dari

tab control dan pada panel kanan atas masukkan link soal/soal.html. otomatis akan

tampil halaman soal.

Pada panel kanan bawah pilih button quiz dan pilih page #soal.

Page 13: Membuat aplikasi quiz android dengan Intel XDK

Untuk menginputkan materi, masuk pada materi.html, akan muncul baris code.

Scroll kebawah sampe ketemu baris seperti gambar dibawah . Edit tulisan materi 1

sebagai judul dari materi 1 dan dibawahnya sebagai isi dari materi. Edit sampai

jumlah yang diinginkan.

Lalu untuk menginputkan soal quiz, masuk ke soal.html kemudian scroll ke bawah

sampai terlihat seperti gambar dibawah. Edit pertanyaan 1, 2, 3 dst. Tentukan juga

jawabannya. Options untuk menambahkan pilihan jawaban dan answer untuk

menentukan jawaban yang benar.

Page 14: Membuat aplikasi quiz android dengan Intel XDK

Selesai, pergi ke tab emulate dan lihat hasil aplikasi quiz yang tadi kita buat.

Page 15: Membuat aplikasi quiz android dengan Intel XDK
Page 16: Membuat aplikasi quiz android dengan Intel XDK
Page 17: Membuat aplikasi quiz android dengan Intel XDK
Page 18: Membuat aplikasi quiz android dengan Intel XDK
Page 19: Membuat aplikasi quiz android dengan Intel XDK

Saatnya kita mengatur aplikasi yang akan kita build, pada tab project, atur build

settings.

Page 20: Membuat aplikasi quiz android dengan Intel XDK

Gambar dibawah menampilkan dimana kita akan memasukkan icon dan splash

screen dari aplikasi kita.

Terakhir, pergi ke tab build dan pilih android.

Page 21: Membuat aplikasi quiz android dengan Intel XDK

Tunggu sampai muncul seperti gambar dibawah, klik build app now.

Akhirnya kita telah berhasil membuild aplikasi, klik download build untuk

mendapatkan file .apk yang bisa diinstall di smartphone android atau dipublish ke

google play.

Page 22: Membuat aplikasi quiz android dengan Intel XDK

2. Tab View App

Yang kedua, kita akan membuat aplikasi jenis tab view. Caranya sama seperti side

menu app, bedanya pada awal saat memilih layout, pilih tab view dan jangan lupa

ceklis pada use app designer. Untuk selanjutnya, ikuti cara pada side menu app.

Page 23: Membuat aplikasi quiz android dengan Intel XDK

*Untuk mendownload sorce code dari aplikasi diatas, kunjungi : https://goo.gl/Y2oDSS

Thank You

Page 24: Membuat aplikasi quiz android dengan Intel XDK