MIT App Inventor adalah aplikasi visual programming yang dikembangkan Google dan MIT untuk memperkenalkan pemrograman Android secara mudah melalui antarmuka drag-and-drop berbasis blok."

1. Pemrograman Visual

2. Apa itu MITApp
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.
●

3. Capaian Pembelajaran
1. Memahami Pengertian AppInventor 2 Ultimate
2. Memahami Operasi Matematika
3. Memahami Operasi Boolean dan Pengambilan Keputusan
4. Memahami Penggunaan Variabel
5. Memahami Operasi Perulangan
6. Memahami Pemrosesan Senarai/Array
7. Memahami Pemrosesan String
8. Pembuatan Prosedur
9. Pemanfaatan Layout
10.Memahami Eksplorasi Notifier
11.Memahami Eksperimen dengan Kompoen Clock
12.Memahami Serba serbi Operasi Pada Layar
13.Memahami Berinteraki Dengan Media
14.Memahami Eksplorasi Sensor

4. Membuat Projek Baru
http://appinventor.mit.edu/

5. Membuat Projek
Baru

6. ●
●
Login ke dalam akun gmail
Pilih “I Accept the Term of Services”
Membuat Projek
Baru

7. Membuat Projek
Baru

8. Membuat Projek
Baru

9. Membuat Projek
Baru

10. Membuat Projek
Baru

11. Design View terdiri dari lima komponen dasar:
COLORING THE GLOBAL FUTURE
http://www.gunadarma.ac.
●
●
●
●
● Palette
Viewer
Component
Media
Properties
Mengenal Design
View

12. 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

13. Viewer
Terdiri dari tampilan
telepon selular dan
komponen–komponen
yang bisa di klik.
Mengenal Design
View

14. 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

15. 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

16. Property
●
● Mengatur komponen
bagaimana dia
berinteraksi dengan
pengguna maupun dengan
komponen lain, atau
bagaimana tampilannya.
Setiap komponen memiliki
kolom properties yang
berbeda-beda.
Mengenal Design
View

17. 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
Mengenal Code
Blocks
●
●
● Colors blocks
Variables blocks
Procedure blocks

18. Mengenal Code
Blocks

19. Mengenal Code
Blocks

20. Control Blocks
● Code blocks pada
pada grup ini
digunakan untuk
mengatur bagaimana
alur aplikasi yang kita
buat itu berjalan.
Mengenal Code
Blocks

21. 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

22. Math Blocks
● Block ini digunakan
untuk memanipulasi
angka dan memasuk-
kan angka.
Mengenal Code
Blocks

23. Text Blocks
● Block yang berada
dalam grup ini
digunakan untuk
memanipulasi,
mengolah, dan
menyeleksi argumen
dalam bentuk text.
Mengenal Code
Blocks

24. 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

25. Colors Blocks
● Block yang berada
dalam grup ini
digunakan untuk
memanipulasi dan
mengolah warna.
Mengenal Code
Blocks

26. Variable Blocks
● Block yang berada
dalam grup ini
digunakan untuk
memanipulasi dan
mengolah variabel.
Mengenal Code
Blocks

27. Procedure Blocks
● Block yang berada
dalam grup ini
digunakan untuk
membuat dan
memanggil
procedure, jadi kita
tidak akan menulis
ulang kode yang
sama.
Mengenal Code
Blocks

28. Instalasi/EksporAplikasi

29. ● Testing
– AI Companion
– Emulator
– USB
● Building
– Download APK
Instalasi/Ekspor
Aplikasi

30. Testing: AI Companion
●
● Requirement
– Komputer
– PerangkatAndroid
– Koneksi Wi-Fi
Tahap
– Instal aplikasi “MITAI2 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

31. 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

32. Testing: USB
●
Instalasi/Ekspor
Aplikasi
● Requirement
– Komputer
– PerangkatAndroid
– Kabel USB
• Tahap
– Instal aplikasi desktop App Inventor
– Jalankan aplikasi desktop App Inventor
– Atur pengaturan USB pada perangkatAndroid “USB Debugging
ON”
– Pada aplikasi web App Inventor, pilih menu Connect – USB

33. 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
Instalasi/Ekspor
Aplikasi