Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
MEMBUAT APLIKASI KUIS
BERBASIS HTML
DENGAN INTEL XDK
Modul ini memberikan tutorial membuat aplikasi kuis android dengan
In...
Sebelum masuk ke tutorial, download bahan bahan dibawah ini :
Halaman materi : https://goo.gl/SKkQYb
Halaman soal : https:...
1. Side Menu App
 Membuat project baru, setelah membuka Intel XDK sekarang kita mulai
membuat project baru. Caranya klik ...
 Setelah klik side menu app, jangan lupa ceklis pada pilihan use app designer dan klik
continue.
 Selanjutnya beri nama ...
 Klik OK!
 Kemudian akan tampil layout yang akan kita gunakan untuk mendesain aplikasi kita.
Klik title pada header dan ...
 Disamping judul aplikasi ada icon side app yang bisa kita ganti dengan mengklik
iconnya kemudian di panel sebelah kanan ...
 Klik icon yang barusan diganti dan kita bisa edit side menu app. Untuk mengatur
actionnya kita bisa pilih di panel kanan...
 Selanjutnya kita tambahkan 2 button materi dan quiz dengan cara drag and drop
Button dari tab control.
 Kita bisa melih...
 Selanjutnya kita akan mengimport folder html yang akan digunakan sebagai
halaman materi dan soal. Caranya pada panel pal...
 Buat halaman baru yang nanti akan digunakan untuk menampilkan materi dan soal
dengan cara klik new page pada panel pages.
 Buka halaman materi yang baru saja dibuat kemudian drag and drop ifram dari tab
control lalu pada panel kanan atas pada ...
 Selanjutnya masuk ke halaman soal yang tadi dibuat lalu drag and drop iframe dari
tab control dan pada panel kanan atas ...
 Untuk menginputkan materi, masuk pada materi.html, akan muncul baris code.
Scroll kebawah sampe ketemu baris seperti gam...
 Selesai, pergi ke tab emulate dan lihat hasil aplikasi quiz yang tadi kita buat.
 Saatnya kita mengatur aplikasi yang akan kita build, pada tab project, atur build
settings.
 Gambar dibawah menampilkan dimana kita akan memasukkan icon dan splash
screen dari aplikasi kita.
 Terakhir, pergi ke t...
 Tunggu sampai muncul seperti gambar dibawah, klik build app now.
 Akhirnya kita telah berhasil membuild aplikasi, klik ...
2. Tab View App
 Yang kedua, kita akan membuat aplikasi jenis tab view. Caranya sama seperti side
menu app, bedanya pada ...
*Untuk mendownload sorce code dari aplikasi diatas, kunjungi : https://goo.gl/Y2oDSS
Thank You 
Membuat aplikasi quiz android dengan Intel XDK
Membuat aplikasi quiz android dengan Intel XDK
Membuat aplikasi quiz android dengan Intel XDK
Membuat aplikasi quiz android dengan Intel XDK
Membuat aplikasi quiz android dengan Intel XDK
Prochain SlideShare
Chargement dans…5
×

Membuat aplikasi quiz android dengan Intel XDK

7 316 vues

Publié le

Modul ini memberikan tutorial membuat aplikasi kuis android dengan Intel XDK. Dalam modul ini akan dibahas tentang menu sidebar dan menu tab view.

Publié dans : Logiciels

Membuat aplikasi quiz android dengan Intel XDK

  1. 1. 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
  2. 2. Sebelum masuk ke tutorial, download bahan bahan dibawah ini : Halaman materi : https://goo.gl/SKkQYb Halaman soal : https://goo.gl/BgB0Oi
  3. 3. 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.
  4. 4.  Setelah klik side menu app, jangan lupa ceklis pada pilihan use app designer dan klik continue.  Selanjutnya beri nama project dan klik create.
  5. 5.  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.
  6. 6.  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.
  7. 7.  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.
  8. 8.  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.
  9. 9.  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.
  10. 10.  Buat halaman baru yang nanti akan digunakan untuk menampilkan materi dan soal dengan cara klik new page pada panel pages.
  11. 11.  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.
  12. 12.  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.
  13. 13.  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.
  14. 14.  Selesai, pergi ke tab emulate dan lihat hasil aplikasi quiz yang tadi kita buat.
  15. 15.  Saatnya kita mengatur aplikasi yang akan kita build, pada tab project, atur build settings.
  16. 16.  Gambar dibawah menampilkan dimana kita akan memasukkan icon dan splash screen dari aplikasi kita.  Terakhir, pergi ke tab build dan pilih android.
  17. 17.  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.
  18. 18. 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.
  19. 19. *Untuk mendownload sorce code dari aplikasi diatas, kunjungi : https://goo.gl/Y2oDSS Thank You 

×