Laman

Kamis, 21 Desember 2017


Membuat Aplikasi Android Dengan App Inventor 2

sumber : http://codenesia.my.id/android/membuat-aplikasi-android-dengan-app-inventor-2/

app-inventor
Halo Sahabat Codenesia, 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
appinventor1

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
appinventor2
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
appinventor5
5. Kemudian kalian harus mengubah layout tersebut sesuai keinginan anda. Sesuaikan layout anda seperti gambar dibawah ini
appinventor6
6. 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
appinventor7
7. Kemudian ubahlah dan sesuaikan layout “Screen2” Seperti gambar dibawah ini. Sesuaikan dengan kreasi kalian
appinventor8

8. 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.
9. 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
appinventor9
appinventor10
10. Kemudian lakukan hal yang sama dan silahkan di eksplor sehingga membentuk “blocks”seperti pada gambar dibawah ini
appinventor11
11. 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
appinventor12
appinventor13
Screenshot (70)
12. Kemudian buatlah variabel pilihan_A, pilihan_B, pilihan_C, pilihan_D, jawaban. Sehingga akan jadi seperti gambar di bawah ini
Screenshot (71)
Screenshot (72)
13. 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.
appinventor15
14. 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
appinventor16
15. Selanjut kita tinggal men-copy paste blocks kode “when Button1.Click”. Dan lalu diedit sehingga jadi seperti gambar di bawah ini
appinventor161
appinventor162
16. Lalu kita pindah ke Screen 2. kita akan mengubah Blocks pada Screen 2. Ubahlah seperti gambar di bawah ini
appinventor17


Silahkan dukung developer indonesia dengan mendownload aplikasi buatan anak bangsa. Silahkan klik https://play.google.com/store/apps/details?id=com.codenesia.mathgames
Aplikasi codenesia
FacebookTwitterGoogle+WhatsApp

Tidak ada komentar:

Posting Komentar