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 berbedabeda. 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 memasukkan 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 digunakan untuk memanipulasi, mengolah, 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
