App Inventor

Kartika Dwintaputri S, ST., MMSI

 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.

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
 Membuat Projek Baru

http://appinventor.mit.edu/

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
Membuat Projek Baru

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
 Membuat Projek Baru
● Login ke dalam akun gmail
● Pilih “I Accept the Term of Services”

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
Membuat Projek Baru

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
Membuat Projek Baru

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
Membuat Projek Baru

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
Membuat Projek Baru

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
 Mengenal Design View
Design View terdiri dari lima komponen dasar:
● Palette
● Viewer
● Component
● Media
● Properties

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
 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.

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
 Mengenal Design View
Viewer
Terdiri dari tampilan
telepon selular dan
komponen–komponen
yang bisa di klik.

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
 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.

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
 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

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
 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.

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
 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:
● Colors blocks
● Control blocks

● Logic blocks ● Variables blocks

● Math blocks ● Procedure blocks
● Text blocks
● List blocks

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
Mengenal Code Blocks

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
Mengenal Code Blocks

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
 Mengenal Code Blocks
Control Blocks
● Code blocks pada
pada grup ini
digunakan untuk
mengatur bagaimana
alur aplikasi yang kita
buat itu berjalan.

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
 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.

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
 Mengenal Code Blocks
Math Blocks
● Block ini digunakan
untuk memanipulasi
angka dan memasuk-
kan angka.

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
 Mengenal Code Blocks
Text Blocks
● Block yang berada
dalam grup ini
digunakan untuk
memanipulasi,
mengolah, dan
menyeleksi argumen
dalam bentuk text.

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
 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).

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
 Mengenal Code Blocks
Colors Blocks
● Block yang berada
dalam grup ini
digunakan untuk
memanipulasi dan
mengolah warna.

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
 Mengenal Code Blocks
Variable Blocks
● Block yang berada
dalam grup ini
digunakan untuk
memanipulasi dan
mengolah variabel.

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
 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.

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
Instalasi/Ekspor Aplikasi
 Instalasi/Ekspor Aplikasi
● Testing
– AI Companion
– Emulator
– USB

● Building
– Download APK

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
 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

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
 Instalasi/Ekspor Aplikasi
Testing: Emulator
● Requirement
– Komputer
● Tahap
– Instal aplikasi desktop App Inventor
– Jalankan aplikasi desktop App Inventor
– Pada aplikasi web App Inventor, pilih menu
Connect – Emulator

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
 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

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id
 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

COLORING THE GLOBAL FUTURE

http://www.gunadarma.ac.id