MENGENAL APP INVENTOR

Septi Retno Desi P.,S.Pd.

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

Login ke dalam akun gmail

Pilih I Accept the Term of Services
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 komponenkomponen 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 Logic blocks
Math blocks Text blocks
List blocks Colors blocks
Variables blocks Procedure 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
memasukkan 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
digunakan untuk memanipulasi,
mengolah, 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

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
Pada aplikasi 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
MEMBUAT MUSIC PLAYER
MEMBUAT SPLASH SCREEN
MEMBUAT APLIKASI
MEWARNAI
 1. Buat project baru dan beri nama project tersebut dengan Modul3 .
2. Tarik komponen yang ada di Pallet kedalam Screen sesuai dengan Gambar di
bawah ini.
 3. Untuk Horrizontal Arrangement dapat di ambil di Pallet Layout dan Canvas dapat di
ambil di Pallet Drawwing.
4. Untuk btnmerah ganti propertis BackgroundColor menjadi Red dan ganti Text menjadi
Merah
5. Untuk btnbiru ganti propertis BackgroundColor menjadi Blue dan ganti Text menjadi Biru
6. Untuk btnijo ganti propertis BackgroundColor menjadi Green dan ganti Text menjadi
Hijau
7. Untuk canvasgambar ganti propertis BackgroundImage menjadi gambar yang kita
upload, untuk Height = 300 pixel, untuk width=Fill Parent dan PaintColor menjadi Red
8. Untuk btnampbilgambar, btnhapus, btnbesar, dan btnkecil. Hanya mengganti Text nya
pada propertis.
 9. Hasil dari desain akan kelihatan seperti
gambar di samping.
 10.
Untuk Block lengka
pnya dapat di lihat
di gambar dibawah
ini, jika kalian
mengubah nama
dari componen,
sesuaikan dengan
yang ada
di Block ini.
11. Setelah selesai
lalu simpan dan
test aplikasi.
SELAMAT MENCOBA!