Cara Membuat aplikasi game kuis sederhana tanpa coding dengan App Inventor

Assalamualiakum Wr. Wb

Hari ini saya ingin berbagi mengenai tutorial bagaimana membuat aplikasi android tanpa coding. Nah untuk bisa membuat aplikasi android tanpa coding, kita akan menggunakan aplikasi App Inventor 2. Aplikasi ini berupa web based, jadi kalian harus mempunyai koneksi internet. Kalian bisa mengakses App Inventor lewat link berikut: http://ai2.appinventor.mit.edu/

Disini saya akan mencoba membuat aplikasi Quiz yang dimana pada aplikasi ini saya akan menampilkan 5 pertanyaan saja. Dan nanti pengguna bisa menjawab pertanyaan tersebut dan akan mendapatkan skor. Untuk membuat aplikasi quiz, berikut ini langkah-langkahnya:

1. Login ke aplikasi App Inventor http://ai2.appinventor.mit.edu/

2. Buat project baru dengan cara mengklik start new project, kemudian ketikkan nama projectnya. Terus klik OK

3. Langkah berikutnya adalah membuat layout aplikasi yang akan kita buat. Kita akan membuat background gambar. Langkahnya yaitu klik tombol upload file pada sisi sebelah kanan bawah. Kemudian pilih gambarnya

4. Kemudian klik component screen pada sisi sebelah kanan layar. Kemudian ubahlah BackgroundImage dan pilihlah gambar yang baru saja anda upload

5. Lalu kita akan membuat layout seperti gambar dibawah ini. Layoutnya terdiri dari 3 Text Label dan 4 Button. Kalian tinggal drag and drop saja ya

6. Kemudian kalian harus mengubah layout tersebut sesuai keinginan anda. Sesuaikan layout anda seperti gambar dibawah ini

7. Selanjutnya kita akan membuat layout kedua yang nantinya akan digunakan untuk menampilkan skor kuisnya. Untuk membuat layout atau screen baru caranya yaitu klik tombol add screen lalu klik ok seperti pada gambar dibawah ini

8. Kemudian ubahlah dan sesuaikan layout “Screen2” Seperti gambar dibawah ini. Sesuaikan dengan kreasi kalian

9. Setelah semua layout selesai dibuat. Kita akan masuk ke menu block disamping kanan. Kita akan membuat sebuah blocks sehingga aplikasi yang kita buat berjalan sesuai dengan yang kita inginkan.

10. Kita akan mendeklarasikan variabel di “Screen1”. Kita pilih Screen1. Selanjutnya kita klik “Blocks”. Pertama-tama kita akan mendeklarasikan sebuah variabel pertanyaan. Caranya cukup mudah yaitu klik “variables” yang berada disamping kiri, kemudian drag and drop “initialize global” ke area sebelah kanan

11. Kemudian lakukan hal yang sama dan silahkan di eksplor sehingga membentuk “blocks”seperti pada gambar dibawah ini

12. Pada gambar diatas variabel “pertanyaan” memiliki sebuah list, tetapi listnya hanya berisi dua text, padahal kita akan membuat quiz dengan 5 pertanyaan, Berarti kita perlu menambah listnya lagi dong. Caranya cukup mudah, klik icon gerigi yang ada di blok “make a list”. Kemudian tinggal drag and drop ke samping kanan. Silahkan lihat gambar dibawah ini

13. Kemudian buatlah variabel pilihan_A, pilihan_B, pilihan_C, pilihan_D, jawaban. Sehingga akan jadi seperti gambar di bawah ini

14. Selanjutnya kita akan membuat 2 variabel yaitu variabel skor dan variabel index. Kemudian kita akan membuat sebuah prosedure yang kita namanakan “soal”. Procedure “soal” ini berfungsi untuk menampilkan sebuah soal.

15. Kemudian kita akan membuat OnClick Handler. Yaitu kita akan membuat tugas yang akan dilakukan oleh aplikasi jika pengguna memencet tombol pilihan Jawaban. Silahkan lihat gambar di bawah ini