MIT App Inventor (Integrated Development Environment) Merupakan sebuah aplikasi IDE berbasis drag and drop visual block programming yang memungkinkan kita untuk membuat dan mengembangkan aplikasi android tanpa harus memiliki pengalaman dalam bahasa pemrograman.
Cukup dengan memiliki pemahaman alur logika sebuah program saja, kita sudah dapat membuat sebuah aplikasi android dengan sederhana.
Fitur Visual Block Programming yang ada pada MIT App Inventor ini mampu mengubah bahasa pemrogramman berbasis teks menjadi sebuah block puzel yang dapat kita susun sesuai dengan tindakan yang kita inginkan.
App Inventor merupakan aplikasi opensource berbasis web yang disediakan oleh google dan sekarang dikelola oleh Massachusetts Institute of Technology (MIT).
Membuat Project Android Sederhana
Pada bagian ini kita akan coba untuk membuat sebuah project aplikasi android di MIT App Inventor, untuk memulainya kita perlu mengakses alamat https://appinventor.mit.edu/
Setelah muncul seperti dibawah ini, selanjutnya klik Create Apps! untuk memulai sebuah project baru.
Website Utama App Inventor
Setelah itu kita akan diarahkan ke Sign in Google Account, silahkan pilih akun google mana yang akan kalian gunakan untuk login ke aplikasi App Inventor ini.
Login Google Account App Inventor
Setelah itu kita akan diarahkan ke halaman workspace project, disana akan muncul list project apa saja yang sudah kita buat sebelumnya seperti yang saya miliki.
Untuk membuat project baru, pilih menu Start new project yang ada disamping kiri seperti gambar dibawah ini.
Membuat Project Baru App Inventor
Berikan nama project yang akan kita buat, setelah itu klik OK untuk menyimpannya.
Membuat Nama Project App Inventor
Selanjutnya kita akan diarahkan ke halaman editor aplikasi android yang akan kita buat di app inventor, disana kita bisa melihat disamping kiri ada panel komponen tools yang bisa kita drag and drop ke bagian tengah yaitu halaman aplikasi android.
Disamping sebelah kanan adalah bagian properties untuk mengedit rincian dari komponen yang kita sedang pasang, maupun workspace dari android yang sedang kita buat.
Workspace Android App Inventor
Setelah ini kalian dapat langsung mencoba menjelajahi aplikasi app inventor ini, mualilah membuat beberapa tampilan sederhana didalam sana.
Tampilan MIT App Inventor
Pada MIT App Inventor terdapat dua halaman utama, yaitu halaman designer dan halaman blocks. Halaman designer digunakan untuk mendesain tampilan aplikasi dengan berbagai komponen dan layout yang disediakan sesuai dengan keinginan. Sedangkan halaman blocks digunakan untuk memprogram jalannya aplikasi android sesuai dengan tujuan.
Gambar 1. Tampilan Halaman Designer
Gambar 2. Tampilan Halaman Blocks
Halaman Designer
Pada halaman designer terdapat beberapa jendela seperti Palette, Viewer, Components, Media, dan Properties. Tools tersebut berfungsi untuk mendesain tampilan aplikasi android sesuai keinginan.
Palette merupakan jendela tempat mengambil komponen-komponen yang dikategorikan dalam beberapa kategori untuk dimasukkan dalam aplikasi yang dibuat. Terdapat kategori User Interface, Layout, Media, Drawing and Animation, Maps, Sensors, Social, Storage, Connectivity, LEGO MINDSTORMS, Experimental, dan Extension.
Viewer merupakan tempat untuk mengatur tampilan komponen pada aplikasi nantinya.
Components merupakan tempat untuk mengatur komponen-komponen yang telah diletakkan di viewer, seperti misalnya mengganti nama komponen, dan menghapus komponen.
Properties merupakan tempat untuk mengatur properti layar, dan komponen-komponen yang digunakan pada aplikasi yang sedang dibuat seperti lebar, tinggi, warna latar, besar huruf, dll.
Media merupakan tempat untuk mengunggah gambar untuk digunakan pada aplikasi yang sedang dibuat.
Pada bagian Palette terdapat komponen penyusun untuk mendesain aplikasi, berikut adalah komponen penyusunnya:
1. User Interface
Simbol
Nama
Fungsi
Button
Dapat mendeteksi ketukan, hold down ketika pengguna menekan tombol, atau ketika pengguna melepas tombol. Ketika button mendeteksi salah satu dari hal tersebut, button akan menjalankan perintah.
Checkbox
Dapat mendeteksi ketukan dari pengguna dan mengganti state-nya menjadi true/false (boolean).
Date Picker
Memunculkan kalender untuk memilih tanggal.
Image
Memasukkan gambar dalam aplikasi.
Label
Menampilkan teks dalam aplikasi.
List Picker
Menampilkan list yang dapat dipilih oleh pengguna ketika pengguna menekan list.
List View
Menampilkan list.
Notifier
Memunculkan pesan/peringatan pop-up pada aplikasi. Pesan dapat hilang secara otomatis, atau harus menerima input dari pengguna terlebih dahulu baru menghilang.
Password Text Box
Menyediakan textbox yang menyembunyikan teks yang dimasukkan.
Slider
Menyediakan progress bar yang dapat digeser.
Spinner
Menampilkan pop-up list dengan elemen yang dapat dipilih ketika ditekan.
Text Box
Menyediakan area untuk mengetik teks.
Time Picker
Memunculkan jam untuk memilih waktu.
Web Viewer
Menyediakan area yang dapat menampilkan laman web.
2. Layout
Simbol
Nama
Fungsi
Horizontal Arrangement
Menyusun komponen secara horizontal.
Horizontal Scroll Arrangement
Menyusun komponen secara horizontal, namun jika lebar komponen melebihi lebar komponen ini, maka dapat digeser (scroll).
Table Arrangement
Membuat tabel.
Vertical Arrangement
Menyusun komponen secara vertikal.
Vertical Scroll Arrangement
Menyusun komponen secara vertikal, namun jika tinggi komponen melebihi tinggi komponen ini, maka dapat digeser (scroll).
3. Media
Simbol
Nama
Fungsi
Camcorder
Mengaktifkan kamera HP dan merekam.
Camera
Mengaktifkan kamera HP dan memotret.
Image Picker
Menampilkan galeri pada aplikasi. Pengguna dapat memilih gambar yang akan disimpan dari galeri yang ditampilkan.
Player
Memainkan musik/audio dan mengatur vibrasi HP.
Sound
Memainkan musik/audio dan mengatur vibrasi HP dalam interval waktu tertentu.
Sound Recorder
Merekam suara.
Speech Recognizer
Mengkonversi suara menjadi teks menggunakan fitur speech recognition pada HP.
Text to Speech
Mengkonversi teks menjadi suara. Pitch dan kecepatan pembacaan dapat diatur.
Video Player
Memutar video serta menampilkan pengaturannya.
Yandex Translate
Menerjemahkan teks dari satu bahasa ke bahasa yang lainnya.
4. Drawing and Animation
Simbol
Nama
Fungsi
Ball
Sprite bola yang dapat berinteraksi pada sentuhan dan tarikan, serta berinteraksi dengan sprite lainnya pada kanvas.
Canvas
Kanvas tempat sprite berinteraksi dengan pengguna atau dengan sprite lainnya, atau tempat pengguna menggambar.
Image Sprite
Sprite gambar yang dapat berinteraksi pada sentuhan dan tarikan, serta berinteraksi dengan sprite lainnya pada kanvas.
5. Maps
Simbol
Nama
Fungsi
Circle
Memvisualisasikan lingkaran dengan radius tertentu (dalam meter) pada koordinat tertentu. Dapat juga digunakan untuk menjalankan program ketika pengguna berada di suatu area.
Feature Collection
Mengelompokkan fitur-fitur Maps. Event yang terjadi pada salah satu komponen pada kelompok tersebut, akan memicu event pada komponen-komponen lainnya.
Line String
Menggambar garis pada peta.
Map
Menampilkan peta pada layar aplikasi.
Marker
Memberi tanda pada suatu lokasi di peta.
Polygon
Membuat perimeter pada peta.
Rectangle
Merupakan polygon dengan garis lintang dan garis bujur untuk batas utara, selatan, timur, dan barat. Jika sudut segiempat dipindahkan, maka informasi koordinat akan diperbaharui.
6. Sensors
Simbol
Nama
Fungsi
Accelerometer Sensor
Mendeteksi goyangan dan percepatan dalam m/s2.
Barcode Scanner
Membaca barcode.
Gyroscope Sensor
Mengukur kecepatan sudut dalam derajat/detik.
Location Sensor
Menyediakan informasi geografis seperti koordinat, ketinggian, kecepatan, dan alamat. Dapat juga mengkonversi alamat menjadi koordinat.
Near Field
Memungkinkan aplikasi mengaktifkan fitur komunikasi jarak dekat (NFC).
Orientation
Menentukan orientasi HP.
Pedometer
Menentukan banyaknya langkah, dan jarak yang ditempuh.
Proximity Sensor
Mengukur jarak antara objek dengan layar HP.
7. Social
Simbol
Nama
Fungsi
Contact Picker
Menampilkan list berisi kontak ketika ditekan.
Email Picker
Menampilkan list berisi email ketika pengguna mengetikkan kata kunci ataupun email dari orang yang dituju.
Phone Call
Melakukan panggilan telepon.
Phone Number Picker
Menampilkan list berisi nomor kontak pada layar HP.
Sharing
Memungkinkan pertukaran berkas atau pesan antara satu aplikasi dengan aplikasi lainnya yang terdapat pada HP.
Texting
Mengirim pesan teks ke suatu nomor kontak.
Twitter
Memungkinkan komunikasi dengan Twitter sehingga pengguna dapat membuat tweet, melihat tweet, dll.
8. Storage
Simbol
Nama
Fungsi
File
Menerima atau mengirim berkas. Dapat juga digunakan untuk membaca atau menulis berkas.
Fusiontables Control
Memungkinkan komunikasi dengan Google Fusion Table. Google Fusion Table dapat menyimpan, membagikan, query, dan memvisualisasikan tabel data.
TinyDB
Menyimpan data untuk aplikasi sehingga ketika aplikasi ditutup, dan kemudian dibuka kembali, data masih tersimpan.
TinyWebDB
Menyimpan data pada web.
9. Connectivity
Simbol
Nama
Fungsi
Activity Starter
Memanggil aplikasi lain.
Bluetooth Client
Membuat aplikasi sebagai Bluetooth client.
Bluetooth Server
Membuat aplikasi sebagai Bluetooth server.
Web
Memungkinkan aplikasi untuk berinteraksi dengan web dan menyediakan fungsi untuk HTTP GET, POST, PUT, dan DELETE.
10. Experimental
Simbol
Nama
Fungsi
CloudDB
Memungkinkan pengguna aplikasi untuk saling bertukar data pada database dengan software Redis.
FirebaseDB
Memungkinkan pengguna aplikasi untuk saling bertukar data pada database dengan Firebase.
Halaman Blocks
Pada halaman blocks terdapat beberapa codeblock yang berfungsi untuk memprogram aplikasi android sesuai yang diinginkan. Pada halaman block terdapat beberapa komponen seperti Control, Logic, Math, Text, Lists, Colors, Variables, dan Procedures. Berikut adalah komponen yang terdapat pada halaman blocks:
1. Control
Blok Kode
Fungsi
If kondisional. Jika “if” memenuhi syarat, maka blok yang ada setelah “then” dieksekusi.
Looping dari angka pertama hingga angka terakhir dengan suatu interval. Maka gambar disamping berarti loop dari angka 1 hingga 5 dengan interval 1: 1, 2, 3, 4, 5.
For bertingkat. Untuk setiap objek dalam list, dilakukan looping.
Jika nilai test true, maka loop while berjalan.
2. Logic
Blok Kode
Fungsi
Boolean true/false.
Jika dipasangkan dengan true/false maka true menjadi false, dan false menjadi true.
Memeriksa apakah satu objek sama dengan/tidak sama dengan objek di kanan. Jika sesuai kriteria, maka blok akan bernilai true, dan false jika tidak sesuai.
Pada logika and jika kedua syarat terpenuhi, maka nilainya menjadi true. Sedangkan pada logika or, jika salah satu syarat atau keduanya terpenuhi, maka nilainya menjadi true.
3. Math
Blok Kode
Fungsi
Digunakan untuk menginput angka.
Digunakan untuk membandingkan dua angka. Perbandingan dapat berupa sama dengan, tidak sama dengan, lebih dari, kurang dari, lebih dari sama dengan, dan kurang dari sama dengan.
Operasi matematika dasar, yaitu tambah, kurang, kali, bagi, pangkat, dan modulus.
Mengambil nilai integer secara acak dari range yang ditentukan.
Operasi trigonometri sin, cos, tan.
4. Text
Blok Kode
Fungsi
Teks kosong.
Menggabungkan dua atau lebih teks.
Memeriksa jika teks kosong atau tidak.
Memeriksa apakah ada bagian tertentu dalam suatu teks.
Memisahkan teks pada penanda tertentu dan membuatnya menjadi list.
5. List
Blok Kode
Fungsi
Membuat list kosong.
Membuat list.
Menambahkan elemen pada list.
Memeriksa apakah ada elemen tertentu pada list.
Memeriksa banyaknya elemen pada list.
Memeriksa apakah list kosong atau tidak.
Mengambil elemen dari suatu list.
Menghapus elemen dari suatu list.
6. Colors
Blok Kode
Fungsi
Pilihan warna yang disediakan MIT AI.
Membuat warna sendiri dengan menggunakan kode RGB warna.
7. Variables
Blok Kode
Fungsi
Membuat suatu variabel global.
Mengambil variabel global.
Memodifikasi isi dari variabel global.
8. Procedure
Blok Kode
Fungsi
Membuat suatu prosedur.
Membuat suatu fungsi yang mengembalikan hasil tertentu.
