Dokumen tersebut memberikan penjelasan singkat tentang MIT App Inventor, yaitu aplikasi web open source untuk membuat aplikasi Android secara visual tanpa harus mengetahui sintaks pemrograman. Dokumen tersebut juga menjelaskan komponen-komponen dan fitur-fitur utama dari MIT App Inventor beserta contoh-contoh aplikasi sederhana yang dapat dibuat menggunakan MIT App Inventor.

1. Pengenalan MIT App
Inventor
Akhmad Alimudin
Teknologi Multimedia Broadcasting
Politeknik Elektronika Negeri Surabaya

2. Apa itu MIT App Inventor
 App Inventor adalah aplikasi web Open Source yang
awalnya dikembangkan oleh Google, dan saat ini
dikelola oleh Massachusetts Institute of Technology
(MIT).
 App Inventor memungkinkan seorang newbie untuk
melakukan pemrograman komputer untuk menciptakan
aplikasi perangkat lunak bagi sistem operasi Android

3. Engine MIT App Inventor
 MIT App Inventor dikembangkan dengan menggunakan
engine pemrograman visual yang dikembangkan
google
 Yaitu Google Blockly
 MIT Inventor merupakan riset gabungan antara MIT
dengan google

4. Keunggulan MIT App Inventor
 Berbasis Google Blockly, Pemrograman visual dengan
tujuan untuk mempermudah semua orang untuk
melakukan pemrograman tanpa harus mengetahui
syntax program
 Komponen & Blok event tersedia dengan lengkap dan
user hanya perlu melakukan drag n drop

5. Aplikasi yang bisa dibuat dengan
App inventor
 Beberapa aplikasi sederhana
 Beberapa aplikasi sederhana yang melibatkan
beberapa sensor, misal :
 Text to speech
 Speech to text
 Barcode reader
 Hingga Aplikasi yang digunakan untuk integrasi dengan
perangkat luar seperti mikrokontroller

6. Kekurangan MIT App Inventor
 Kurang fleksibel apabila dibandingkan dengan native
programming
 Pada saat melibatkan aplikasi yang menggunakan
sensor, terkadang tidak di dukung oleh beberapa
device

7. Alamat MIT App Inventor

8. Halaman Utama

9. Palette
• MIT Inventor
Menggunakan Istilah
Palette untuk
mengelompokkan
komponen-komponen
yang digunakan

10. Viewer
• Untuk Workspace atau
area kerja, MIT App
inventor menggunakan
istilah viewer
• User hanya butuh
melakukan drag n drop
dari Palette menuju
Viewer

11. Components & Properties
• Components Merupakan
item2 dari Palette yang
kita gunakan dalam
project
• Properties merupakan
detail properties dari tiap
Palette Item yang kita
gunakan, misal
memberikan label, warna
background, dll

12. Tab Bar
• Komponen Green Bar
– Lalalal  Contoh Nama Project yang dibuat
– Tab Screen  Digunakan untuk mengatur
Viewer/Workspace untuk menampilkan screen yang
ingin digunakan
– Add Screen  Digunakan untuk menambah screen
– Remove Screen  hanya aktif pada saat kita berada
pada selain Screen1

13. Tab Bar (2)
• Komponen Green Bar
– Designer  Tombol ini terlihat inactive
dikarenakan posisi saat ini berada pada
tampilan designer
– Blocks  Digunakan untuk berpindah ke
area pemrograman Block

14. Blocks Area
 Blocks area digunakan untuk melakukan event handling atau
melakukan pemrograman pada setiap komponen yang sudah kita di
desain melalui Area Designer

15. • Blocks  merupakan komponen-
komponen untuk melakukan event
handling
• Komponen ini berbasis Google
Blockly

16. Viewer
• Backpack  Tools yang bentuknya mirip tas
Dora ini digunakan untuk melakukan copy
paste, keunggulan tools ini bisa digunakan
untuk copy paste antar screen

17. Emulator
• Untuk melakukan pengujian
terhadap aplikasi yang kita buat,
kita dapat menggunakan
emulator dengan cara :
– Klik Connect  Emulator
– Kemudian anda akan diarahkan
untuk melakukan install Emulator
apabila di komputer anda di
deteksi belum ada emulator

18. • Berikut ini adalah tampilan dari
emulator yang menampilkan
project yang kita buat

19. Build APK
 Setelah program selesai dan siap untuk digunakan,
Langkah terakhir yang kita lakukan adalah melakukan
packaging akhir untuk aplikasi sehingga keluar dalam
bentuk APK
 Ada dua metode yang ditawarkan, yaitu kita download
APK tersebut ke komputer, atau langsung di download
di HP android dengan melakukan scan barcode

20. Gallery
• Gallery Merupakan
project-project milik
user lain yang bisa
kita gunakan
kembali
• Project tersebut
bisa kita lihat
source code nya
dan bisa kita
modifikasi kembali

21. Contoh Aplikasi dari Gallery

22. Contoh Source Code
Kalkulator dari Gallery

23. Percobaan 1
 Buatlah aplikasi sederhana dengan MIT inventor dengan
fitur sebagai berikut
 Component Designer yang digunakan:
 Screen
 Button
 Textbox
 Block :
 Button When Click
 Button Set Textbox value
 Text Value
 Action :
 Ketika tombol di klik, textbox akan berisikan tulisan “halo halo
halo”

26. Percobaan 2
 Buatlah aplikasi sederhana dengan MIT inventor dengan fitur
sebagai berikut
 Component Designer yang digunakan:
 Screen
 Button
 Textbox
 Label
 Horizontal arrangement
 Block :
 Button When Click
 Button Set Label text to Text value
 Action :
 Ketika tombol di klik, akan muncul tulisan “nama yang anda isikan
di textbox” dengan background merah

29. Percobaan 3
 Buatlah layout untuk membuat kalkulator sederhana
 Component :
 Screen
 Button
 label
 Block :
 Tampilkan setiap value dari tombol kedalam label

32. Contoh action button

33. Tugas
 Buatlah Block untuk untuk layout kalkulator yang anda
kerjakan
 Cobalah Design yang anda kerjakan di emulator atau
di android anda masing-masing

34. Project Akhir Semester
 Project Akhir Semester :
 Demo 1 Minggu Setelah UAS
 Topik :
 Membuat Aplikasi Android dengan menggunakan App
Inventor dengan spesifikasi :
 Minimal Menggunakan Palette/Component Sensors
 Bagi yang TA menggunakan Android, bisa juga dijadikan
sebagai project

35. Tugas Minggu depan
 Mengumpulkan Judul Aplikasi yang akan dibuat,
dengan content :
 Deskripsi, tujuan dan fitur aplikasi
 Wireframe rencana aplikasi
 Dikerjakan di kertas A4, minimal 3 Halaman