Pengenalan MIT App Inventor

MIT App Inventor merupakan platform untuk memudahkan proses pembuatan aplikasi sederhana
tanpa harus mempelajari atau menggunakan bahasa pemrograman yang terlalu banyak. Kita dapat
mendesain aplikasi android sesuai keinginan dengan menggunakan berbagai macam layout dan
komponen yang tersedia.

Berikut di bawah ini cara menggunakan MIT App Inventor.

• Pertama Anda dapat mengakses homepage MIT App Inventor online dengan cara
mengunjungi [Link]
• Selanjutnya, pilih menu Get started dengan gambar ikon bendera di bagian tengah.
• Setelah itu, lakukan login menggunakan akun Google dan klik setuju mengenai terms of
service.
• Pada halaman selanjutnya, Anda dapat membuat aplikasi baru dengan cara klik tombol
Project lalu pilih opsi Start New Project. Di halaman ini, Anda dapat memasukkan berbagai
komponen dan objek visual sesuai dengan keinginan. Komponen dan objek visual ini berada
pada kolom Palette.
• Anda juga dapat memasukkan file suara dengan cara klik bagian yang ingin ditambahkan
suara, lalu tahan hingga muncul menu Button.
• Setelah dirasa bahwa tampilan utama dari aplikasi sudah selesai Anda buat, maka
selanjutnya adalah menyusun sisi backend aplikasi. Cara ini dapat dilakukan dengan masuk
ke halaman Blocks, kemudian akan tampil jendela baru berupa Designer.
• Jika semua proses sudah selesai Anda lakukan, maka langkah berikutnya adalah menguji
keberhasilan dari aplikasi tersebut.

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.
1. 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.
2. Viewer merupakan tempat untuk mengatur tampilan komponen pada aplikasi nantinya.
3. Components merupakan tempat untuk mengatur komponen-komponen yang telah
diletakkan di viewer, seperti misalnya mengganti nama komponen, dan menghapus
komponen.
4. 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.
5. 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
Dapat mendeteksi ketukan, hold down ketika pengguna menekan tombol,
Button atau ketika pengguna melepas tombol. Ketika button mendeteksi salah satu
dari hal tersebut, button akan menjalankan perintah.
Dapat mendeteksi ketukan dari pengguna dan mengganti state-nya menjadi
Checkbox
true/false (boolean).
Date Picker Memunculkan kalender untuk memilih tanggal.
Simbol Nama Fungsi
Image Memasukkan gambar dalam aplikasi.

Label Menampilkan teks dalam aplikasi.

Menampilkan list yang dapat dipilih oleh pengguna ketika pengguna menekan
List Picker
list.
List View Menampilkan list.
Memunculkan pesan/peringatan pop-up pada aplikasi. Pesan dapat hilang
Notifier secara otomatis, atau harus menerima input dari pengguna terlebih dahulu
baru menghilang.
Password
Menyediakan textbox yang menyembunyikan teks yang dimasukkan.
Text Box
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
Menyusun komponen secara horizontal.
Arrangement
Horizontal Scroll Menyusun komponen secara horizontal, namun jika lebar komponen
Arrangement melebihi lebar komponen ini, maka dapat digeser (scroll).
Table Arrangement Membuat tabel.

Vertical Arrangement Menyusun komponen secara vertikal.

Vertical Scroll Menyusun komponen secara vertikal, namun jika tinggi komponen
Arrangement 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.
Menampilkan galeri pada aplikasi. Pengguna dapat memilih gambar yang
Image Picker
akan disimpan dari galeri yang ditampilkan.
Player Memainkan musik/audio dan mengatur vibrasi HP.
Memainkan musik/audio dan mengatur vibrasi HP dalam interval waktu
Sound
tertentu.
Simbol Nama Fungsi
Sound
Merekam suara.
Recorder
Speech Mengkonversi suara menjadi teks menggunakan fitur speech recognition
Recognizer pada HP.
Mengkonversi teks menjadi suara. Pitch dan kecepatan pembacaan dapat
Text to Speech
diatur.
Video Player Memutar video serta menampilkan pengaturannya.
Yandex
Menerjemahkan teks dari satu bahasa ke bahasa yang lainnya.
Translate
4. Drawing and Animation
Simbol Nama Fungsi
Sprite bola yang dapat berinteraksi pada sentuhan dan tarikan, serta
Ball
berinteraksi dengan sprite lainnya pada kanvas.
Kanvas tempat sprite berinteraksi dengan pengguna atau dengan sprite lainnya,
Canvas
atau tempat pengguna menggambar.
Image Sprite gambar yang dapat berinteraksi pada sentuhan dan tarikan, serta
Sprite berinteraksi dengan sprite lainnya pada kanvas.
5. Maps
Simbol Nama Fungsi
Memvisualisasikan lingkaran dengan radius tertentu (dalam meter) pada
Circle koordinat tertentu. Dapat juga digunakan untuk menjalankan program ketika
pengguna berada di suatu area.
Mengelompokkan fitur-fitur Maps. Event yang terjadi pada salah satu
Feature
komponen pada kelompok tersebut, akan memicu event pada komponen-
Collection
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.
Merupakan polygon dengan garis lintang dan garis bujur untuk batas utara,
Rectangle selatan, timur, dan barat. Jika sudut segiempat dipindahkan, maka informasi
koordinat akan diperbaharui.
6. Sensors
Simbol Nama Fungsi
Accelerometer
Mendeteksi goyangan dan percepatan dalam m/s2.
Sensor
Barcode Scanner Membaca barcode.
Simbol Nama Fungsi
Gyroscope Sensor Mengukur kecepatan sudut dalam derajat/detik.
Menyediakan informasi geografis seperti koordinat, ketinggian,
Location Sensor kecepatan, dan alamat. Dapat juga mengkonversi alamat menjadi
koordinat.
Memungkinkan aplikasi mengaktifkan fitur komunikasi jarak dekat
Near Field
(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.
Menampilkan list berisi email ketika pengguna mengetikkan kata kunci
Email Picker
ataupun email dari orang yang dituju.
Phone Call Melakukan panggilan telepon.
Phone Number
Menampilkan list berisi nomor kontak pada layar HP.
Picker
Memungkinkan pertukaran berkas atau pesan antara satu aplikasi dengan
Sharing
aplikasi lainnya yang terdapat pada HP.
Texting Mengirim pesan teks ke suatu nomor kontak.
Memungkinkan komunikasi dengan Twitter sehingga pengguna dapat
Twitter
membuat tweet, melihat tweet, dll.
8. Storage
Simbol Nama Fungsi
Menerima atau mengirim berkas. Dapat juga digunakan untuk membaca
File
atau menulis berkas.
Memungkinkan komunikasi dengan Google Fusion Table. Google Fusion
Fusiontables
Table dapat menyimpan, membagikan, query, dan memvisualisasikan
Control
tabel data.
Menyimpan data untuk aplikasi sehingga ketika aplikasi ditutup, dan
TinyDB
kemudian dibuka kembali, data masih tersimpan.
TinyWebDB Menyimpan data pada web.
9. Connectivity
Simbol Nama Fungsi
Activity
Memanggil aplikasi lain.
Starter
Simbol Nama Fungsi
Bluetooth
Membuat aplikasi sebagai Bluetooth client.
Client
Bluetooth
Membuat aplikasi sebagai Bluetooth server.
Server
Memungkinkan aplikasi untuk berinteraksi dengan web dan menyediakan
Web
fungsi untuk HTTP GET, POST, PUT, dan DELETE.
10. Experimental
Simbol Nama Fungsi
Memungkinkan pengguna aplikasi untuk saling bertukar data pada database
CloudDB
dengan software Redis.
Memungkinkan pengguna aplikasi untuk saling bertukar data pada database
FirebaseDB
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.

Mengubah Ke Aplikasi Android

Terdapat 3 cara yaitu pertama kita bisa mensimulasikannya ke simulator smartphone yang kita
miliki. Kedua kita bisa simpan file aplikasi yang sudah jadi ke komputer/device yang digunakan untuk
membuka MIT App Inventor ini. Cara ketiga yaitu kita bisa mengekspor dalam bentuk barcode yang
nantinya barcode ini mengarahkan ke link download aplikasi yang sudah jadi.