Cara Mudah Membuat Aplikasi Android “Soal Pilihan Ganda” dengan App Inventor

Soal pilihan ganda atau multiple choice adalah cara paling populer untuk menguji pemahaman siswa terhadap materi pelajaran di sekolah. Kini sobat khususnya para pengajar bisa membuat sendiri soal-soal pilihan ganda berbasis aplikasi android dengan mudah dengan bantuan App Inventor.
Pada kesempatan kali ini saya akan berbagi cara membuat soal-soal latihan (kuis) pilihan ganda yang paling sederhana dan mudah dipraktekkan.
Mula-mula kita persiapkan soal-soal dan pilihan jawabannya (jangan lupa kunci jawabannya).
Di sini saya buat hanya 3 soal: Screen1 untuk pertanyaan nomor 1, pindah (next)  ke Screen2 untuk soal nomor 2, next ke Screen3 untuk soal nomor 3.

Catatan: untuk jumlah soal yang banyak saya sarankan jangan menggunakan cara multiple screen seperti di atas, karena loading akan berat dan keterbatasan server bila sobat bekerja di App Inventor online. Solusinya dengan “multiple screens in one screen” insha Alloh nanti saya buat tutorialnya.

Contoh soal:
1. Di manakah letak ibukota Amerika Serikat?
     A. New York        B. Washington D.C.
     C. Hollywood      D. Brooklyn
Jawaban benar: B. Washington D.C.
2. Berapa akar pangkat dari 121?
     A. 22         B. 12
     C. 21         D. 11
Jawaban benar: D. 11
3. Who wrote "Dilan 1991"?
     A. Asma Nadia   B. Dewi Lestari
     C. Pidi Baiq         D. Andrea Hirata
Jawaban benar: C. Pidi Baiq

Langsung saja buka App Inventor-nya dan buat proyek baru (mis. : Latihan1)
Ubah Title Screen1dengan “Soal 1 IPS”
Buat layout untuk soal no 1:
Seret dan lepaskan Label ke viewer, Label1 ini untuk menuliskan  teks pertanyaan nomor 1, silakan ganti Text dengan “1. Di manakah letak ibukota Amerika Serikat?”
Untuk pilihan jawaban gunakan layout Horizontal Arrangement, Height = Automatic, Width = Fill parent.
Ke dalam kotak Horizontal Arrangement1 ini masukkan 2 buah Button. Agar button rapi dan sejajar buat Width = Fill parent, TextAlignment= left.
Ubah Text: Text for Button2 dengan “A. New York “ dan Text for Button3 dengan “B. Washington D.C.”.
Ganti BackgroundColor = None.
Supaya tidak pusing ganti nama (Rename) Component-nya.
Lakukan hal yang sama untuk pilihan C dan D.
Tambahkan di bawahnya Label untuk konfirmasi pilihan benar atau salah. Kosongkan Text-nya.
Tambahkan lagi di bawahnya tombol “Ulangi”. Tombol ini untuk mengulangi pilihan bila salah.
Tambahkan lagi tombol untuk “Next”. Tombol ini untuk melanjutkan ke soal berikutnya.
Layout soal no 1 di layar 1 selengkapnya seperti berikut:

 


Untuk soal no 2 silakan Add Screen, biarkan namanya tetap Screen2, ubah Title-nya: “Soal 2 Matematika”
Pengerjaan layoutnya sama seperti untuk soal no 1.
Hasil akhir seperti di bawah ini:

Untuk soal no 3 silakan Add Screen, biarkan namanya tetap Screen3, ubah Title-nya: “Soal 2 Bahasa Inggris”
Pengerjaan layoutnya sama seperti untuk soal no 1.
Hasil akhir seperti di bawah ini:

Selanjutnya adalah menyusun perintah-perintah Blocks-nya.
Kembali ke Screen1, klik editor Blocks.
Saat layar pertama dibuka, yang akan ditampilkan (Visible = true) adalah:
Label1 : “1. Di manakah letak ibukota Amerika Serikat?”
Button :
A. New York (btnA)       B. Washington D.C. (btnB)
C. Hollywood (btnC)    D. Brooklyn (btnD)
Sementara yang tidak terlihat (Visible = false) adalah:
Label2, button “Ulangi” dan button “Next”
Sehingga block codenya:

Jika tombol pilihan A (btnA) disentuh, maka selain menampilkan pertanyaan dan pilihan jawaban, juga menampilkan konfirmasi “Salah!” dan button “Ulangi” dan menebalkan (FontBold)  jawaban yang dipilih, tapi tidak menampilkan tombol “Next”. Begitu juga bila menyentuh tombol C dan D. Sehingga blok kodenya:

Karena jawaban yang benar adalah B, maka Jika tombol pilihan B (btnB) disentuh, maka selain menampilkan pertanyaan dan pilihan jawaban, juga menampilkan konfirmasi “Benar!” dan button “Next” dan menebalkan huruf (FontBold) jawaban yang dipilih, tapi tidak menampilkan tombol “Ulangi”. Sehingga blok kodenya:

Jika tombol “Ulangi” disentuh maka akan kembali menampilkan pertanyaan dan pilihan jawaban. Blok selengkapnya:

Jika jawaban benar dan tombol “Next” disentuh maka layar berpindah ke Screen2 untuk menampilkan soal no 2. Blok perintahnya:

Untuk Screen2 dan Screen3 proses penyusunan blok perintahnya sama. Namun perhatikan mana jawaban yang benar.

Catatan: karena susunan bloknya hampir sama, sobat tinggal meng-copy semua blok ke backpack. Caranya klik kanan di editor pilih “Copy All Blocks to Backpack”. Kemudian pindah ke editor Blocks Screen2/Screen3 klik kanan lagi pilih “Paste All Blocks from Backpack  (n)”

Langkah terakhir adalah menjalankan aplikasinya dengan emulator atau instal apk-nya.
Kalau sobat ingin lebih jelas, tonton aja videonya di bawah ini (jangan lupa like, comment, dan subscribe).


Untuk lebih jelas bisa tonton videonya. Jangan lupa Subscribe!

Tips MIT App Inventor bagi Pemula

Kali ini saya ingin berbagi beberapa tips berupa penjelasan singkat beberapa fungsi untuk memudahkan dalam pembuatan aplikasi dengan App Inventor, tidak semuanya hanya beberapa yang cukup penting dari menu Designer maupun Blocks editor.

Menu drop down Projects :

• Import project (.aia) from my computer – untuk mengimpor/menerima projek App Inventor yang sudah jadi (file berekstensi .aia, misalnya: BolaPantul.aia, myprofile.aia, MPI.aia) yang disimpan di komputer, sehingga kita bisa mengeditnya.
• Import project (.aia) from my repository – untuk mengimpor file berekstensi .aia dari server online.
• Export selected project (.aia) to my computer - untuk mengekspor/mengirim projek App Inventor yang sedang aktif ke komputer, untuk back-up atau berjaga-jaga bila terjadi error bisa di-impor kembali.

Menu drop down Connect :

• AI Companion – untuk melihat atau preview project yang sedang dibuat di ponsel secara online via wifi.
• Emulator - untuk melihat atau preview project yang sedang dibuat dengan emulator yang sudah built-in dalam App Inventor.
• USB - untuk melihat atau preview project yang kita buat di ponsel via kabel USB.
• Reset Connection /Hard Reset – untuk mereset bila terjadi error saat Connect.

Menu drop down Build :

• App (save .apk to my computer) – untuk membuat file apk dari projek yang sudah dibuat sehingga bisa ditransfer dari komputer ke ponsel untuk diinstal dan dijalankan.

My Projects – tombol untuk melihat semua proyek yang pernah kita buat.

Mode Blocks Editor
Bila kita mengklik kanan mouse di editor blocks akan muncul menu drop down ini:

Sedikit penjelasan fungsi dari daftar menu tersebut adalah:
Clean up Blocks – untuk merapikan blok-blok.
Download Blocks as Image – mengubah blok-blok yang ada di editor menjadi image .png (berguna untuk dokumentasi atau sharing).
Collapse Blocks – untuk meringkas susunan blok-blok yang banyak sehingga tidak memenuhi editor. Blok yang di-Collapse akan seperti di bawah ini:

Expand Blocks – untuk mengembalikan blok-blok yang di-Collapse.
Untuk meng-Collapse satu bloks tingggal klik pada handler blok kemudian klik kanan pilih Collapse Block

Delete (n) Blocks – untuk menghapus blok. Menghapus blok bisa juga dengan menyeretnya ke tempat sampah.

Arrange Blocks Horizontally – untuk menyusun blok-blok secara horisontal (dari kiri ke kanan).
Arrange Blocks Vertically – untuk menyusun blok-blok secara vertikal (dari atas ke bawah).
Sort Blocks by Category – untuk mengurutkan blok-blok berdasarkan kategorinya.
Paste All Blocks from Backpack (n) – mem-paste semua blok yang ada dalam backpack.
Backpack atau ransel adalah tempat untuk menyimpan blok-blok penting yang sering digunakan. Untuk melihat blok-blok yang ada dalam backpack kita tinggal mengkliknya, dan menyeret blok yang kita perlukan.

Copy All Blocks to Backpack – untuk menyalin semua blok ke dalam backpack.
Empty the Backpack – untuk mengosongkan backpack.
Enable/Disable Workspace Grid – untuk menampilkan/menyembunyikan kisi-kisi pada editor.

Menu drop down klik kanan pada sebuah blok:
Duplicate – untuk menggandakan sebuah blok/susunan blok.
Add Comment – untuk menambahkan komentar atau catatan pada blok/susunan blok, bila Add Comment di-klik akan muncul tanda tanya dalam lingkaran biru, bila tanda tanya itu di-klik akan muncul editor teks untuk menuliskan komentar/catatan.
Remove Comment – untuk menghilangkan komentar.

Arrange Parameters Vertically – untuk mengubah susunan parameter yang ada pada blok perintah tersebut secara vertikal.

Disable Block – untuk menonaktifkan blok. Bila sebuah blok disable maka programnya tidak akan dijalankan, tampilannya akan seperti di bawah ini:

Warning dan Error:
Bila ada peringatan dan kesalahan (error) pada blok-blok perintah, maka akan diberi tahu, ada berapa peringatan dan ada berapa error?

Dan bila diklik tanda seru atau tanda silang pada sebuah blok, maka akan muncul penjelasan mengapa terjadi error.

Penambahan dan pengurangan item pada suatu blok ditandai dengan adanya tanda pengaturan/setting, bila tanda ini diklik, dimungkinkan untuk menambah atau mengurangi item, untuk menambah tinggal diseret item dari kanan ke kiri, untuk mengurangi diseret sebaliknya.

Zoom editor

Tanda target lingkaran - untuk fokus atau tampilan normal.
Tanda plus dalam lingkaran - untuk Zoom In atau memperbesar tampilan.
Tanda minus dalam lingkaran – untuk Zoom Out atau memperkecil tampilan.
Tempat sampah/Trash – untuk membuang satu atau beberapa blok.
Untuk mengetahui fungsi sebuah event handler atau blok perintah, sobat bisa mengapungkan mouse di atas blok tersebut tunggu beberapa detik… dan akan muncul penjelasannya.

Inline Inputs – untuk menempatkan input-input dalam satu baris.
External Inputs – untuk menempatkan input-input di luar dalam satu kolom (default).

Kalau masih ada yang belum dijelaskan, silakan sobat menambahkannya dalam kolom komentar.

Cara Menambahkan User Name dan Password pada MIT App Inventor Offline

Cara Menambahkan User Name dan Password pada MIT App Inventor Offline. Cara masuk dan menggunakan MIT App Inventor Offline cukup mudah, sobat tinggal mengklik “Click Here to use your Google Account to login” pada layar “Welcome to App Inventor!”

Namun untuk menjaga privasi agar proyek aplikasi kita tidak ada yang mengotak-atik dan mengubahnya oleh pengguna lain, sobat perlu menguncinya dengan password. Caranya cukup mudah, ikuti paparan di bawah ini:

Setelah MIT App Inventor offline diaktifkan (klik tombol Start Invent) maka akan muncul layar “Welcome to App Inventor!” seperti di bawah ini:

Silakan klik pada “Click Here to use your Google Account to login” dan bila muncul jendela Log In seperti di bawah ini, silakakan dicontreng pada “Sign in as Administrator”, kemudian klik tombol  “Log In”

Maka tambahan menu “Admin” akan muncul setelah menu “Help”. Untuk mulai menambah user silakan klik menu Admin tersebut, setelah muncul menu drop down pilih “User Admin”

Maka muncul jendela “Add User”, setelah tombol “Add User” diklik, Anda tinggal mengisikan User Name: … dan Password: …

Misalnya diisi seperti ini:

is Admin? dan Hide Password boleh dicentang atau tidak. Selanjutnya akan muncul Terms Of Service, dan bila setuju Anda tinggal klik “I accept the terms of service!”

Dan muncul layar Welcome, yang berarti penambahan User berhasil.

Dan Anda siap untuk membuat aplikasi Android. Untuk keluar dari User ini, tinggal klik nama user (menu di ujung paling kanan) dan klik “Sign out”

Untuk masuk lagi di User ini Anda tinggal memasukan nama user pada Email: dan Password: di layar “Welcome to App Inventor!” lalu klik Login.

Demikian, mudahkan?

Cara Membuat Game Sederhana “Bola Pantul” dengan App Inventor

Dalam tutorial kali ini, kita akan belajar mengenai animasi pada App Inventor dengan membuat game sederhana “Bola Pantul” (Ball Bounce), dimana bola akan memantul pada batas layar ponsel setelah disapu dengan jari kita.

Tahap-tahapnya adalah:
Buat projek baru pada MIT App Inventor dan beri nama “BolaPantul”.
Pada Screen1 ini biarkan ShowStatusBar dan TitleVisible dicentang, dan beri Title = Bola Pantul

Dari laci Drawing and Animation, seret component Canvas dan lepaskan ke dalam penampil (viewer)

Ubah tinggi (Height) dan lebar (Width) Canvas menjadi “Fill Parent” (pastikan component Canvas dipilih sehingga properties-nya muncul), kalau suka BackgroundColor bisa diubah, misalnya Green.
Setelah Canvas dibentangkan di Screen1, kini kita dapat menambahkan Sprite Ball masih dari laci Drawing and Animation, seret component Ball tersebut dan lepaskan di atas Canvas. Untuk tampilan yang lebih menarik Ball bisa diubah warnanya di PaintColor, dan juga besarnya bisa diubah di Radius. Misalnya PaintColor: Blue dan Radius : 10.

Sprite adalah grafis bitmap dua dimensi yang menyatu dengan adegan yang lebih besar, misalnya dalam video game 2D.

Selanjutnya buka Blocks Editor

Klik Ball1 untuk menampilkan block-block perintah Ball1, pilih blok perintah when Ball1.Flung seret dan lepaskan di area kerja. Blok perintah Flung ini mengacu pada gestur jari yang menyapu pada layar untuk melemparkan bola.

Klik lagi Ball1, gulung daftar blok ke atas untuk mencari blok perintah set Ball1.Heading to dan set Ball1.Speed to.

set Ball1.Heading to = blok perintah untuk arah gerak bola
set Ball1.Speed to = blok perintah untuk kecepatan bola

Pasangkan kedua blok di atas ke dalam handler when Ball1.Flung

Ujung set Ball1.Heading to bisa diisi dengan angka 0 – 360 derajat. 0 artinya bola bergerak ke kanan dari layar, 90 derajat bola bergerak ke arah atas dari layar, dst.
Ujung set Ball1.Speed to bisa diisi dengan angka kecepatan dalam pixels/millisecond (piksel/milidetik), misalnya 4, 10, atau 100 (piksel/milidetik). Blok angka bisa diambil dari daftar blok Math yang paling atas.

Sekarang, bagaimana kalau arah dan kecepatan bola disesuaikan/sama dengan arah dan kecepatan gerak jari? Caranya ujung blok heading dan speed tidak diisi dengan angka, tapi dengan blok get speed dan get heading. Lalu dari mana kita mendapatkan blok-blok tersebut bila tidak bisa didapatkan dari daftar blok Ball1? Mudah saja kita tinggal mengapungkan mouse (tanpa meng-klik) di atas parameter “speed” dari handle when Ball1.Flung, seketika akan muncul menu pop up yang berisi blok get speed dan set speed to, kita klik dan seret get speed lalu pasangkan ke ujung set Ball1.Speed. Begitu juga untuk Heading.

Selengkapnya seperti di bawah ini:

Saatnya mengujicoba proyek ini pada emulator, namun sebaiknya pada smartphone agar kita bisa mempraktekan dengan jari kita.

Apa yang terjadi ketika bola dilempar (disapu) pada layar ponsel? Bola berhasil bergerak saat disapu jari, namun saat menyentuh sisi layar bola menempel di sana. Itu terjadi karena arah bola tidak berubah ketika menabrak sisi canvas. Agar bola memantul dari tepi layar, kita perlu memprogramnya dengan blok baru yang bernama “When Edge Reached” (bahasa Indonesia-nya kira-kira Ketika Menyentuh Tepi).

Klik laci Ball1, cari blok when Ball1.EdgeReached dari daftar, seret dan lepaskan di area kerja.
Kembali klik laci Ball1, cari blok call Ball1.Bounce dari daftar, seret dan pasangkan pada handle when Ball1.EdgeReached

Blok call Ball1.Bounce memerlukan argumen edge (tepi). Agar bola memantul saat menyentuh setiap tepi layar, maka argumen edge musti dipasangi blok get edge, yang bisa diambil di parameter edge pada handle when Ball1.EdgeReached.
Blok-blok selengkapnya seperti di bawah ini:

Ayo dites lagi.
Nah, sekarang saat bola “dilempar”, seharusnya bola akan memantul saat mencapai setiap tepi canvas.

Dari permainan simpel ini sobat bisa mengembangkan berbagai kemungkinan, seperti:

• mengubah warna bola saat kecepatan berubah atau saat mencapai tepi layar
• mengubah kecepatan bola agar melambat atau berhenti setelah dilempar
• memberi rintangan atau sasaran saat bola bergerak dan menabrak
• membuat papan yang bergerak untuk menahan bola, seperti game Pong