Upload
others
View
25
Download
9
Embed Size (px)
Citation preview
App Inventor
Kartika Dwintaputri S, ST., MMSI
COLORING THE GLOBAL FUTURE
http://www.gunadarma.ac.id
Apa itu MIT App Inventor?
● MIT App Inventor adalah aplikasi inovatif yangdikembangan Google dan MIT untukmengenalkan dan mengembangkanpemrograman android denganmentrasformasikan bahasa pemrograman yangkompleks 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
● Login ke dalam akun gmail
● Pilih “I Accept the Term of Services”
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
Membuat Projek Baru
COLORING THE GLOBAL FUTURE
http://www.gunadarma.ac.id
Design View terdiri dari lima komponen dasar:
● Palette
● Viewer
● Component
● Media
● Properties
Mengenal Design View
COLORING THE GLOBAL FUTURE
http://www.gunadarma.ac.id
Pallete
Palette terdiri dari objek apasaja yang bisa andagunakan ke dalam aplikasianda. Palette terdiri daribeberapa grup, semuanyadikelompokkan ke dalamsatu grup jika memilikitema/fungsi yang sama.
Mengenal Design View
COLORING THE GLOBAL FUTURE
http://www.gunadarma.ac.id
Viewer
Terdiri dari tampilantelepon selular dankomponen–komponenyang bisa di klik.
Mengenal Design View
COLORING THE GLOBAL FUTURE
http://www.gunadarma.ac.id
Component
● Terdiri dari daftarkomponen apa saja yangtelah ditambahkan kedalam projek.
● Tampilannya berupasusunan atau daftar yangmemudahkan kita untukmengatur komponen ataumelihat apa saja yangberbentuk seperti direktori.
Mengenal Design View
COLORING THE GLOBAL FUTURE
http://www.gunadarma.ac.id
Media
● Terletak di bawah darikolom Component.
● Digunakan untuk mengatursemua media komponenuntuk mendukung aplikasi.
● Gambar, clip art, musik,dan video.
● Tidak boleh melebihi 5 MB
Mengenal Design View
COLORING THE GLOBAL FUTURE
http://www.gunadarma.ac.id
Property
● Mengatur komponenbagaimana diaberinteraksi denganpengguna maupun dengankomponen lain, ataubagaimana tampilannya.
● Setiap komponen memilikikolom properties yangberbeda-beda.
Mengenal Design View
COLORING THE GLOBAL FUTURE
http://www.gunadarma.ac.id
Code block pada App Inventor digunakan untukmelakukan atau mengatur jalannya program. Code blockterdiri 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
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
Control Blocks
● Code blocks padapada grup inidigunakan untukmengatur bagaimanaalur aplikasi yang kitabuat itu berjalan.
Mengenal Code Blocks
COLORING THE GLOBAL FUTURE
http://www.gunadarma.ac.id
Logic Blocks
● Nilai boolean. Biasanyadigunakan untukmenentukan kondisi
● Operator. Digunakan untukmemanipulasi nilai boolean.
● Jadi logic block biasanyaberhubungan dengan if elsedan while yang beradadalam control blocks.
Mengenal Code Blocks
COLORING THE GLOBAL FUTURE
http://www.gunadarma.ac.id
Math Blocks
● Block ini digunakanuntuk memanipulasiangka dan memasuk-kan angka.
Mengenal Code Blocks
COLORING THE GLOBAL FUTURE
http://www.gunadarma.ac.id
Text Blocks
● Block yang beradadalam grup inidigunakan untukmemanipulasi,mengolah, danmenyeleksi argumendalam bentuk text.
Mengenal Code Blocks
COLORING THE GLOBAL FUTURE
http://www.gunadarma.ac.id
List Blocks
● Block yang beradadalam grup ini di-gunakan untuk me-manipulasi, meng-olah, dan menyeleksilist atau kumpulandari nilai (variabel).
Mengenal Code Blocks
COLORING THE GLOBAL FUTURE
http://www.gunadarma.ac.id
Colors Blocks
● Block yang beradadalam grup inidigunakan untukmemanipulasi danmengolah warna.
Mengenal Code Blocks
COLORING THE GLOBAL FUTURE
http://www.gunadarma.ac.id
Variable Blocks
● Block yang beradadalam grup inidigunakan untukmemanipulasi danmengolah variabel.
Mengenal Code Blocks
COLORING THE GLOBAL FUTURE
http://www.gunadarma.ac.id
Procedure Blocks
● Block yang beradadalam grup inidigunakan untukmembuat danmemanggilprocedure, jadi kitatidak akan menulisulang kode yangsama.
Mengenal Code Blocks
Instalasi/Ekspor Aplikasi
COLORING THE GLOBAL FUTURE
http://www.gunadarma.ac.id
● Testing– AI Companion
– Emulator
– USB
● Building– Download APK
Instalasi/Ekspor Aplikasi
COLORING THE GLOBAL FUTURE
http://www.gunadarma.ac.id
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
COLORING THE GLOBAL FUTURE
http://www.gunadarma.ac.id
Testing: Emulator
● Requirement– Komputer
● Tahap– Instal aplikasi desktop App Inventor
– Jalankan aplikasi desktop App Inventor
– Pada aplikasi web App Inventor, pilih menuConnect – Emulator
Instalasi/Ekspor Aplikasi
COLORING THE GLOBAL FUTURE
http://www.gunadarma.ac.id
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
COLORING THE GLOBAL FUTURE
http://www.gunadarma.ac.id
Building: Scan QRCode
● APK dapat didownload dengan memindai QRCodeyang telah disediakan ketika memilih menuBuild – Provide QRCode for Apk
Building: Simpan ke komputer
● APK dapat disimpan ke dalam komputer Anda denganmemilih menu Build – Save .apk to My Computer
Instalasi/Ekspor Aplikasi