Cara Membuat Aplikasi dan Game Menggunakan App Inventor

Men-search “App Inventor” di Google. Lalu klik link yang paling atas yaitu https://appinventor.mit.edu/. Kemudian akan muncul tampilan seperti gambar dibawah ini, lalu tekan “Create Apps”.

Selanjutnya akan terbuka tab baru secara otomatis yang akan menyuruh kita untuk log in/membuat akun. Pilihlah akun google, lalu tampilan yang akan muncul yaitu “Term of Service” dan klik lah “I Accept” dipaling bawah. Maka tampilan menjadi seperti dibawah ini, kemudian klik “Start New Project” di kiri atas.

Setelah itu akan muncul kotak untuk memberi nama project yang akan dibuat, lalu klik “OK”. Tapi ingat nama tidak boleh menggunakan spasi.

Lalu akan muncul tampilan seperti dibawah ini.

Sebelum memulai untuk membuat aplikasi, sebaiknya mempersiapkan terlebih dahulu gambar, background, desain ataupun icon yang akan dipakai agar nanti tinggal mengupload saja.

Selanjutnya saya akan membuat Splashscreen (tampilan yang biasanya muncul saat pertama kali mengklik icon aplikasi) untuk Screen 1 dengan menggunakan fitur clock. Klik “Sensors” pada menu palette, lalu pilih clock dan drag pada layar hp.

Lalu pada kotak paling kanan ada “Properties”. Nah aturlah “Time Interval” untuk mengatur berapa lama tampilan layar yang akan muncul sebelum masuk ke menu utama, dengan aturan 1000 untuk 1 detik.

Kemudian saya akan memasukkan background gambar dengan meng-upload file. Tetapi klik terlebih dahulu pada component “Screen 1” agar tampilan properties nya keluar.

Kemudian akan muncul kotak untuk upload file. Setelah memilih lalu klik ”OK”.

Setelah itu buatlah screen baru untuk perpindahan dari splash screen, dengan cara klik “Add Screen” lalu tulis nama pada screen baru, kemudian klik OK.

Pada screen 2 atau Home, disini saya akan memasukkan gambar untuk background dengan langkah yang sama seperti pada screen 1.

Atur layout yang akan digunakan. Layout ini merupakan pengaturan tata letak, terdapat 5 pengaturan. Layout yang akan digunakan pada kali ini hanya tiga, yaitu table arrangement, vertical arrangement, dan horizontal arrangement.

Berhubung saya telah memasukkan background yang sudah ada tulisannya diatas, maka untuk mengatur agar button itu diletakkan berada dibawahnya kita perlu table arrangement untuk membatasinya, karena jika tidak memakai layout semua yang di drag akan terletak dibagian atas. Sehingga akan terjadi penumpukan menu. Step pertama drag table arrangement pada layar. Lalu aturlah properties yang ada dikanan untuk mengatur ukuran tabel baik tinggi maupun lebarnya. Disini saya mengatur ketinggiannya hanya 20 percent dan lebar 100 percent, karena saya hanya ingin menggunakan tabel ini untuk memberi jarak dengan tulisan yang ada di gambar atas.

Lalu drag layout horizontal arrangement dibawahnya. Bedanya horizontal dan vertical itu pada peletakannya, jika ingin meletakkan button/gambar/teks disampinya maka gunakan horizontal. Sedangkan jika ingin meletakan button/gambar/teks dibawahnya gunakan layout vertikal. Seperti biasa, setelah men drag atur properties untuk mengukur tinggi dan lebar yang diinginkan. Supaya background layar tidak tertutupi maka saya mengatur background color untuk horizontal arrangement ini “none” agar transparan.

Disini saya akan membuat menu yang terdiri dari materi, video, soal, dan game. Sehingga tata letaknya itu akan menjadi 2 kesamping dan 2 kebawah. Maka ulangi untuk cara menambahkan horizontal arrangement pada step sebelumnya untuk diletakkan di bawahnya. Kemudian drag vertical arrangement kedalamnya supaya dibawah setiap tombol itu ada text.

Aturlah setiap vertical arrangement menjadi transparan (background color menjadi none), lalu drag button pada layar didalam vertical arrangement, dan drag juga label (teks) dibawahnya

Supaya ada jarak antara button maka drag table arrangement ditengahnya, karena walaupun pada tampilan tersebut terlihat ada jarak tapi ternyata jika disimulasi itu tidak ada jarak. Atur properties column nya menjadi 1 agar jarak menjadi kecil.

Jangan lupa atur “align horizontal” menjadi center agar button berada di tengah baik pada vertical arrangement maupun horizontal arrangement.

Setelah itu hapus text pada semua button, agar kosong. Lalu ganti background button dengan icon yang telah disiapkan dengan cara mengupload file. Kemudian atur aturlah tinggi dan lebar sesuai yang diinginkan. Setelah itu editlah teks yang ada di bawah semua button.

Tambahkan table arrangement di sisa tempat yang kosong di bawah, lalu atur tinggi dan lebarnya. Setelah itu masukan horizontal arrangement didalamnya sebanyak 2, dan atur kembali tinggi beserta lebarnya. Pastikan bahwa background color nya transparan atau di “none” kan.

Kemudian atur “Align Vertical” untuk horizontal arrangement 1 dan 2 menjadi “bottom”, lalu jika untuk horizontal arrangement 2 atur “Align Horizontal”nya juga menjadi right. Supaya letak nya berada di ujung ujung layar. Setelah itu, tambahkan button di masing masing horizontal, lalu ubah background dan hapus teksnya.

Kemudian buat screen baru lagi untuk tampilan layar jika telah menekan tombol “materi”. Disana drag terlebih dahulu table arrangement untuk menjadi batasan jika menambahkan teks dan gambar, karena tampilan layar kurang lebih akan menampilan gambar, teks serta background. Berhubung tampilan untuk materi ini akan banyak sehingga harus mengaktifkan fitur scroll yaitu dengan centang “scrollable” pada properties. Selanjutnya tinggal mengatur-atur teks serta table/vertical arrangement hingga enak untuk dilihat.

Selanjutnya kita membuat screen baru untuk “Game”. Tambahkan background yang telah disiapkan, lalu drag component table arrangement, horizontal arrangement, label, vertical arrangement dan button. Selanjutnya isi label sebagai judul dan juga mengganti tulisan button menjadi mulai.

Setelah itu membuat screen baru lagi untuk peralihan screen setelah tombol “mulai” ditekan. Saya beri nama sebagai soal1. Lalu mengatur layout menjadi seperti dibawah ini. Tidak lupa “rename” label menjadi “Soal” jika itu memang tempat untuk diletakannya soal. Lalu “rename” button untuk pilihan A, B, C, dan D agar memudahkan dalam pengaturan blocknya. Untuk spasi spasinya saya menggunakan table arrangement agar layout yang dihasilkan sesuai dengan harapan. Dan jangan lupa untuk screen soal ini biarkan kosong karena kita akan mengisinya melalui block. Berhubung disini soal digunakan sebagai game, agar lebih menarik kita masukkan backsound melalui “Media” lalu pilihlah “Player” dan drag tepat pada layar, lalu upload file di “Source”.

Setelah itu buatlah screen baru lagi untuk menu “Tentang pembuat” dan juga “Petunjuk penggunaan aplikasi”. Layout untuk disana sama yaitu menggunakan background lalu mendrag vertical/horizontal/table arrangement serta tambahkan button dan label sebagai teks. Button disini diganti backgroundnya agar lebih menarik menjadi icon x lalu untuk label backgroundnya diberi warna seperti dibawah ini.

Pertama kita akan membuat splash screen dengan mengatur “Block” pada screen 1 untuk dapat berpindah ke menu utama / screen selanjutnya, karena tanpa mengatur block, screen itu tidak akan berpindah sendiri. Kemudian pilih “Blocks” di paling ujung kanan atas, setelah mengklik maka tampilannya akan seperti dibawah ini. Lalu klik pada blocks “Clock”.

Setelah mengklik, maka tampilan yang muncul akan seperti dibawah ini. Disana akan muncul beberapa perintah, disini kita pilih perintah “when clock1...” kemudian drag.

Berhubung block tersebut masih kosong, sehingga harus kita isi dengan mengklik kembali “Clock” scroll ke bawah, lalu pilih “Set Clock 1. Timer Enabled”

Lalu pilih block “Logic”, dan pilih “False”.

Kemudian pilih block “Control” dan scroll, lalu pilih “Open another screen name” supaya screen dapat berpindah setelah waktu habis.

Setelah itu pilih block “Text” dan pilihlah yang kosong agar kita dapat mengisi sendiri screen yang ingin kita pindahkan setelah waktu habis. Catatan nama screen harus sesuai dengan yang kita beri nama sebelumnya pada saat penambahan screen.

Lalu aturlah block untuk screen “Home” dengan mengalihkan terlebih dahulu screen.

Berhubung pada layar home itu ada 6 tombol, kita atur semua tombol untuk dapat ditekan, dengan cara klik terlebih dahulu button yang pertama lalu pilihlah block “When button click do ..” setelah itu drag dan pilih lagi pada block “control” lalu drag “open another screen..” lalu klik block text dan pilih block yang kosong lalu isi dengan nama screen yang ingin dipindahkan.

Lakukan hal yang sama seperti diatas untuk beberapa tombol kecuali untuk tombol video dan test karena akan di tambahkan link. Untuk tombol video akan langsung diarahkan ke youtube dan untuk test akan langsung diarahkan ke Google form. Cara yang pertama sama yaitu tekan dulu block untuk button masing-masing dan memilih “when butten click”. Lalu pilih “Activity starter” yang telah ditambahkan sebelumnya pada menu pallete. Selanjutnya memilih block set activity dan untuk diujungnya tambahkan block text untuk mengetik link nya. Jika untuk google form tinggal mengganti saja link yang diisi link youtube. Tapi sebelumnya ditambahkan terlebih dahulu action “android.intent.action.VIEW” sebelum url supaya saat tombol ditekan akan langsung mengarahkan ke aplikasi yang dituju melalui tautan link.

Selanjutnya mengatur block home, agar jika menekan tombol back itu langsung menutup aplikasi. Dengan cara klick block untuk “Home/nama screen kalian” lalu pilihlah “when home backpressed” dan drag lalu pilih kembali block “control” supaya mengisi block yang masih kosong, dan pilihlah “close application”.

Selanjutnya kita pindah ke screen berikutnya yaitu screen “Materi” disana kita hanya mengatur tombol backpressed agar kembali ke menu utama/ home. Caranya sama seperti diatas

Lalu berikutnya kita mengatur screen “Game”. Berhubung pada screen tersebut hanya ada satu tombol yaitu button, maka kita atur jika tombol ditekan maka akan berpindah ke screen berikutnya. Caranya sama seperti pada langkah 33 diatas.

Kemudian atur screen yang telah dipindahkan dari screen game, yaitu screen “Soal1”. Pertama kita klik block “Variable” lalu pilih yang paling atas, fungsinya agar kita dapat memasukkan soal, pilihan, beserta jawabannya. Duplicate menjadi beberapa dengan mengganti “name” itu sesuai yang kita inginkan, misal Soal, A, B, C, D dan Jawaban. Jadi ada 6 block yang sama hanya berbeda nama. Cara duplicate yaitu klik kanan pada block lalu pilih duplicate.

Setelah itu kita pilih block list, agar dapat mengisi daftar pertanyaan, maka drag block “Make a list ...”

Jika pertanyaan yang diinput itu banyak, maka kita dapat menambahkan list nya dengan cara klik tombol yang berwarna biru, lalu masukkan “item” yang ada dikiri ke kanan.

Selanjutnya pilih block text yang kosong untuk menuliskan pertanyaan. Duplicate untuk list dan juga text lalu drag pada nama block A, B, C, D dan jawaban. Tinggal merubah text nya saja

Lalu kita pilih block “procedure” agar dapat memanggil soal yang telah kita susun secara bertahap. Sebelumnya duplicate “initialize global” lalu isi namanya menjadi “indeks” dan klik pada block math lalu pilih yang isinya 0 baru kita ganti menjadi 1. Fungsi block ini agar tahu ada berapa soal yang muncul. Kemudian klik pada label yang akan kita jadikan sebagai tulisan soal kemudian pilih “set soal text to” lalu klik block list dan pilih “select list item” kemudian kita arahkan kursor ke “initialize global indeks” pada tulisan indeksnya kita akan menemukan beberapa pilihan block dan pilih “get global indeks”. Setelah mendrag nya kita dapat mengganti indeks menjadi soal dengan cara mengklik tulisan “global indeks” nya, lalu disana muncul beberapa pilihan. Buatlah hal yang sama hingga seperti dibawah ini.

Nah, yang diatas itu baru pengaturan untuk memunculkan soal dan pilihan pada layar saja. Selanjutnya kita akan mengatur bagaimana jika kita memilih bukan jawaban yang benar dan bagaimana hasil skor nya. Caranya sama pertama kita buat block ang berwarna orange dulu, dan mengganti name nya menjadi “Score” lalu pilih lah block pada button yang dijadikan tempat sebagai pilihan, kemudian drag “when A click...” lalu klik block “control” dan pilih “if..then” hingga menjadi seperti gambar dibawah ini. Jika blocknya berwarna hijau berarti itu diambil dari block “Logic” lalu jika biru muda diambil dari block “List”, jika biru tua diambi dari block “Math”, jika ungu kemerahan diambil dari block “Text”, dan jika ungu tua diambil dari block "Procedure". Untuk block berwarna orange kita duplicate saja yang sudah ada disana, tinggal mengganti tulisan “indeks” nya. Ulangi langkah ini untuk semua tombol yang dijadikan pilihan, tinggal men duplicate dan ganti nama “A” nya saja menjadi B, C, dan D.

Lalu atur lagi menjadi seperti dibawah ini, agar ketika layar screen tersebut muncul langsung dapat memanggil soal dan juga memulai musik yang telah ditambahkan. Untuk call player itu memilih dari block “Player”.

Selanjutnya karena diatas akan ditampilkan skor, maka kita atur screen skor, menjadi seperti dibawah ini, supaya skor yang telah diperoleh dapat ditampilkan.

Setelah itu kita atur screen “tentang pengguna” dan juga “petunjuk penggunaan”. Disana berhubung hanya ada satu tombol jadi diatur block nya menjadi seperti langkah 33, agar ketika ditekan tombol kembali ke menu utama.

Setelah semua selesai, kita bisa mencoba terlebih dahulu aplikasi tersebut sebelum dijadikan apk. Mencobanya dengan cara klik connect, lalu disana terdapat beberapa pilihan. Disini saya akan menggunakan “Ai companion” yaitu aplikasi yang telah di instal pada hp. Lalu masukan barcode, dan tunggu hingga nanti aplikasi yang telah kita buat dapat dicoba di hp secara langsung.

Jika tidak ada perubahan dan sudah tidak akan diedit lagi lalu save file menjadi .aia dengan cara klik “Project” lalu pilih “export”. Sedangkan jika untuk menjadi apk kita klik “Build” lalu pilih “save .apk”. Tunggu dan akan terdownload secara otomatis