App Inventor adalah aplikasi berbasis web untuk membangun source code mobile application yang awalnya dikembangkan oleh Google, dan saat ini dikelola oleh Massachusetts Institute of Technology (MIT).
Dengan menggunakan App Inventor ini pengguna yang belum mengenal bahasa pemrograman dan bahkan anak-anakpun bisa menciptakan sebuah mobile application baik dalam Android. Hal ini disebabkan adanya graphic user interface seperti user interface pada Scratch dan StarLogo TNG yang memungkinkan pengguna untuk drag and drop obyek visual untuk menciptakan aplikasi yang akan dijalankan di mobile phone.
Persiapan untuk menggunakan App Inventor
IDE dari App Inventor ini tidak terinstal di dalam PC / Laptop kita, melainkan berada di server pada link berikut http://ai2.appinventor.mit.edu sehingga memerlukan koneksi internet dan gmail account. Untuk menggunakan App Inventor maka berikut ini adalah apa saja yang perlu dipersiapkan
- Mac atau Windows computer dengan system requirement seperti pada link berikut
- Koneksi Wifi
- Browser (Chrome, Firefox, Safari) disarankan tidak menggunakan Internet Explorer
Langkah-langkah yang dibutuhkan adalah sebagai berikut:
- Tentukan bagaimana nanti anda akan mencoba aplikasi yang anda buat
- Daftarkan akun gmail anda atau bisa juga memilih untuk tidak menggunakan akun
Apabila anda memilih tidak menggunakan akun maka anda akan terkoneksi di server yang berbeda yaitu di http://code.appinventor.mit.edu dan kode kunjungan ulang yang secara acak akan ditampilkan. Kode ini dapat disimpan di dalam file atau dicatat agar saat anda kembali melanjutkan pembuatan aplikasi yang belum selesai.
Membuat aplikasi Hello Codi
Hello Codi adalah salah satu contoh aplikasi sederhana yang disediakan oleh App Inventor yang berfungsi mengaktifkan suara BUZZZ dan menggetarkan perangkat kita saat gambar lebah (Bee) disentuh.
Dalam App Inventor terdapat dua bagian utama yaitu Designer dan Block Editor. Bagian Designer adalah bagian di mana kita akan meletakkan komponen-komponen
dan Bagian Block Editor tempat kita merancang kode.
Kita dapat berpindah dari Bagian Designer ke Block melalui tombol pada gambar di bawah ini.
Pada Bagian Designer terdapat lima bagian yaitu Bagian Palette, Bagian Viewer, Bagian Components, Bagian Media dan Bagian Properties.
Bagian Palette adalah bagian di mana kita dapat melakukan drag and drop komponen dan meletakkannya di Bagian Viewer
Bagian Viewer adalah bagian di mana kita nanti akan melihat bagaimana tampilan aplikasi nanti
Bagian Components yang menampilkan komponen apa saja yang sudah kita ambil
Bagian media yang menampilkan media file apa saja yang sudah kita upload
Ambil button dari bagian User Interface di Bagian Palette dan drop ke Bagian Viewer
Ambil Label dari Bagian User Interface di Bagian Palette dan letakkan di Bagian Viewer di bawah Button
Ambil Sound dari Bagian Media di Bagian Palette dan letakkan di Bagian Viewer
Karena bagian ini merupakan bagian yang tidak nampak atau non visible maka bagian ini akan turun dan tampil di bagian bawah di bagian non visible components
Kemudian pada Bagian Components, klik button dan perhatikan Bagian Properties
Atur height property ke automatic dan width property ke fill parents sehingga aplikasi yang kita buat nanti akan seluas layar yang kita gunakan.
Atur image property dengan file codi.jpg dan hapus tulisan di bagian body text sehingga tulisan pada tombol di Bagian Viewer juga hilang
Klik Bagian Label sehingga Bagian Properties akan tampil seperti berikut
Atur BackgroundColor property dengan warna yang anda inginkan dan atur Font Size property dengan 30 lalu isi Text property dengan “Touch the Bee!”. Atur TextColor property dengan warna yang anda inginkan dan sebaiknya kontras dengan BackgroundColor.
Pada bagian ini Aplikasi Codi mulai dapat kita lihat layoutnya dan dapat dicoba dilihat tampilannya. Langkah berikut ini adalah untuk mencoba aplikasi. Bila kita memiliki Android atau IOS yang bisa dicoba maka pilih AI Companion pada Bagian Connect
Lalu lakukan scan QR Code pada perangkat Android atau IOS anda dan lay out akan tampil pada perangkat anda.
Berikutnya kita dapat mengatur suara yang akan diperdengarkan saat tombol ditekan dengan mengatur field source pada Bagian Properties saat komponen Sound di Bagian Components di klik.
Pilih Bee_sound.mp3 dan klik OK.
Selanjutnya kita dapat mulai menuliskan kode di Bagian Blocks Editor dengan diawali menekan tombol Block.
Di sana terdapat tiga bagian yaitu Bagian Block, Bagian Media dan Bagian Viewer. Bagian Media sama seperti pada Bagian Media di Bagian Designer yaitu menampilkan file-file yang kita upload.
Bagian Block yang merupakan palette berisi block-block yang dapat kita gunakan. Di sini terdapat tiga bagian yaitu Bagian Built In Block, Bagian Components Block (bagian yang menampilkan komponen yang sedang digunakan di aplikasi) dan Bagian Any Components Block.
Bagian Viewer adalah bagian tempat kita meletakkan block-block untuk membangun kode yang kita rancang
Pada bagian ini, kita awali dengan menambahkan event saat tombol ditekan. Ini dapat dilakukan dengan klik blok button1 dan pilih “when button1 click do”
Kemudian klik bagian blok sound1 di Components Block dan pilih call sound1 play serta letakkan di when button1 click seperti berikut
Juga drag and drop call sound1.vibrate seperti pada gambar di atas. Bagian ini berfungsi untuk menggetarkan perangkat saat tombol ditekan. Untuk menentukan bagaimana getarannya kita dapat memberikan nilai numerik ke bagian milisecond dengan menggunakan komponen math di Bagian built in components seperti pada gambar berikut
Kemudian dengan asumsi koneksi dengan perangkat Android masih terhubung kita dapat langsung mencoba menekan pada gambar Bee. Namun apabila koneksi telah terputus, kita dapat pilih AI Companion lagi di Bagian Connect dan lakukan scan QR Code lagi.
Di sini pada saat gambar Bee kita tekan, maka perangkat kita akan mengeluarkan suara dan bergetar.
Kemudian apabila kita ingin melakukan instalasi ke perangkat kita maka pilih Menu Build dan klik Android App (.apk)
Pastikan perangkat android anda sudah ter-instal QR Code Scanner dan lakukan scanning pada QR Code yang dihasilkan.
Kita akan diarahkan ke link di mana kita dapat mendownload file APK dan pilih install anyway apabila google protect menanyakannya. Maka pada bagian ini, aplikasi Hour of Code Codi telah ter install di perangkat anda.
Paulus Andi Nalwan, ST