App Inventor

Dwi Standar Education, S.Kom

 Apa itu MIT App Inventor?

● MIT App Inventor adalah aplikasi inovatif yang

dikembangan Google dan MIT untuk mengenalkan
dan mengembangkan pemrograman android
dengan mentrasformasikan bahasa pemrograman
yang kompleks berbasis teks menjadi berbasis
visual (drag and drop) berbentuk blok-blok.
 Membuat Projek Baru

http://appinventor.mit.edu/
Membuat Projek Baru
 Membuat Projek Baru
● Login ke dalam akun gmail
● Pilih “I Accept the Term of Services”
Membuat Projek Baru
Membuat Projek Baru
Membuat Projek Baru
Membuat Projek Baru
 Mengenal Design View
Design View terdiri dari lima komponen dasar:
● Palette
● Viewer
● Component
● Media
● Properties
 Mengenal Design View
Pallete
Palette terdiri dari objek
apa saja yang bisa anda
gunakan ke dalam aplikasi
anda. Palette terdiri dari
beberapa grup, semuanya
dikelompokkan ke dalam
satu grup jika memiliki
tema/fungsi yang sama.
 Mengenal Design View
Viewer
Terdiri dari tampilan
telepon selular dan
komponen–komponen
yang bisa di klik.
 Mengenal Design View
Component
● Terdiri dari daftar
komponen apa saja yang
telah ditambahkan ke
dalam projek.
● Tampilannya berupa
susunan atau daftar yang
memudahkan kita untuk
mengatur komponen atau
melihat apa saja yang
berbentuk seperti direktori.
 Mengenal Design View
Media
● Terletak di bawah dari
kolom Component.
● Digunakan untuk mengatur
semua media komponen
untuk mendukung aplikasi.
● Gambar, clip art, musik,
dan video.
● Tidak boleh melebihi 5 MB
 Mengenal Design View
Property
● Mengatur komponen
bagaimana dia berinteraksi
dengan pengguna maupun
dengan komponen lain,
atau bagaimana
tampilannya.
● Setiap komponen
memiliki kolom properties
yang berbeda-beda.
 Mengenal Code Blocks
Code block pada App Inventor digunakan untuk
melakukan atau mengatur jalannya program. Code block
terdiri dari beberapa grup yang memilki fungsi berbeda-
beda. Grup yang ada pada Code block Antara lain:
● Control blocks ● Colors blocks
● Logic blocks ● Variables blocks
● Math blocks ● Procedure blocks
● Text blocks
● List blocks
Mengenal Code Blocks
Mengenal Code Blocks
 Mengenal Code Blocks
Control Blocks
● Code blocks pada pada
grup ini digunakan
untuk mengatur
bagaimana alur aplikasi
yang kita buat itu
berjalan.
 Mengenal Code Blocks
Logic Blocks
● Nilai boolean. Biasanya
digunakan untuk
menentukan kondisi
● Operator. Digunakan untuk
memanipulasi nilai boolean.
● Jadi logic block biasanya
berhubungan dengan if else
dan while yang berada
dalam control blocks.
 Mengenal Code Blocks
Math Blocks
● Block ini digunakan
untuk memanipulasi
angka dan memasuk-
kan angka.
 Mengenal Code Blocks
Text Blocks
● Block yang berada
dalam grup ini
digunakan untuk
memanipulasi,
mengolah, dan
menyeleksi argumen
dalam bentuk text.
 Mengenal Code Blocks
List Blocks
● Block yang berada
dalam grup ini di-
gunakan untuk me-
manipulasi, meng-
olah, dan menyeleksi
list atau kumpulan dari
nilai (variabel).
 Mengenal Code Blocks
Colors Blocks
● Block yang berada
dalam grup ini
digunakan untuk
memanipulasi dan
mengolah warna.
 Mengenal Code Blocks
Variable Blocks
● Block yang berada
dalam grup ini
digunakan untuk
memanipulasi dan
mengolah variabel.
 Mengenal Code Blocks
Procedure Blocks
● Block yang berada
dalam grup ini
digunakan untuk
membuat dan
memanggil
procedure, jadi kita
tidak akan menulis
ulang kode yang
sama.
Instalasi/Ekspor Aplikasi
 Instalasi/Ekspor Aplikasi
● Testing
– AI Companion
– Emulator
– USB

● Building
– Download APK
 Instalasi/Ekspor Aplikasi
Testing: AI Companion
● Requirement
– Komputer
– Perangkat Android
– Koneksi Wi-Fi
● Tahap
– Instal aplikasi “MIT AI2 Companion” di PlayStore
– Koneksikan perangkat android dan komputer pada Wi-fi yang sama
– Pada aplikasi App Inventor, pilih menu Connect – AI Companion
– Scan QRCode dengan menggunakan perangkat Android
 Instalasi/Ekspor Aplikasi
Testing: Emulator
● Requirement
– Komputer

● Tahap
– Instal aplikasi desktop App Inventor
– Jalankan aplikasi desktop App Inventor
– Padaaplikasi web App Inventor, pilih menu
Connect – Emulator
 Instalasi/Ekspor Aplikasi
Testing: USB
● Requirement
– Komputer
– Perangkat Android
– Kabel USB
● Tahap
– Instal aplikasi desktop App Inventor
– Jalankan aplikasi desktop App Inventor
– Atur pengaturan USB pada perangkat Android “USB Debugging ON”
– Pada aplikasi web App Inventor, pilih menu Connect – USB
 Instalasi/Ekspor Aplikasi
Building: Scan QRCode
● APK dapat didownload dengan memindai QRCode
yang telah disediakan ketika memilih menu
Build – Provide QRCode for Apk

Building: Simpan ke komputer

● APK dapat disimpan ke dalam komputer Anda dengan
memilih menu Build – Save .apk to My Computer