Dokumen ini membahas pengenalan App Inventor untuk pengembangan aplikasi perangkat bergerak berbasis Android, yang terdiri dari dua bagian utama: komponen desainer dan block editor. Komponen desainer membantu pengguna memilih dan mengatur elemen aplikasi, sementara block editor berfungsi sebagai tempat penulisan kode aplikasi. Dalam proses pembuatan aplikasi, pemahaman tentang struktur dan fungsi setiap komponen sangat penting untuk merancang aplikasi secara efektif.

1. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 1
BAB VII - PENGENALAN IDE APP INVENTOR
Tujuan Pembelajaran:
Setelah mempelajari bab ini siswa diharapkan dapat mampu:
1. Memahami mengenai komponen desainer
2. Memahami mengenai block editor
3. Menerapak dan menggunakan komponen desainer dan block editor
4. Menjalankan aplikasi yang di kembangkan
App Inventor pada dasarnya bekerja secara online melalui browser internet, tetapi
Anda juga dapat bekerja dengan offile namun perlu men-download beberapa software
pendukung pada komputer Anda dan mengubah beberapa pengaturan pada laptop dan
perangkat bergerak Anda.
Untuk dapat bekerja membuat produk aplikasi perangkat bergerak berbasis
Android dengan menggunakan App Inventor tentu Anda harus memahami dan
mengenal terlebih dahulu lingkungan kerja dan menu-menu yang ada pada App
Inventor.
Lingkungan kerja App Inventor memiliki tiga bagian besar, yaitu:
 Komponen Desainer. Anda dapat menggunakannya untuk memilih komponen yang
dapat Anda gunakan untuk membangun aplikasi. Komponen desainer ditunjukan
pada gambar berikut
Gambar 3.1 Kornponen design
 Block Editor berjalan pada jendela yang terpisah dari komponen design. Hal ini
memudahkan Anda menyusun Block yang telah Anda rencanakan. Sebagaian yang

2. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 2
sudah disampaikan bahwa membuat produk aplikasi perangkat bergerak dengan
App Invengor berbasis Block-Block. Anda menggunakan Block editor untuk
membuat behavior dari komponen-komponen yang diqunakan.
A. Komponen Desainer
Komponen Desainer terbagi atas 5 jenis komponen yaitu :
a. Main Menu
b. Palette
b. Viewer
c. Components
d. Properties
Berikut adalah bentuk Komponen Desainer pada App Inventor Environment:
Gambar 3.4 Komponen Desain App Inventor Environment
a. PALETTE
Palette digunakan untuk mengambil objek yang akan digunakan oleh Block
Editor. Palette terdiri atas berbagai jenis komponen, di antaranya adalah
 User Interface
 Layout
 Media
 Drawing and Animation
 Map
 Sensor
 Social
 Storage
 Conectivity
 LEGO@MINDSTORM@
 Experimental
 Extension

3. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 3
b. VIEWER
Viewer disebut juga Form Desainer. Viewer digunakan untuk mendesain
tampilan interface dari aplikasi yang akan dibuat. Anda dapat mengambil dari
Palette, klik, drag dan meletakannya di dalam viewer.
c. COMPONENTS
Components digunakan untuk melihat daftar komponen yang terdapat pada
suatu screen atau form. Compeonen digunakan untuk merename dan
menghapus komponen yang telah diletakkan pada viewer.
d. PROPERTIES
Properties digunakan untuk mengubah tampilan, teks atau kelengkapan
sebuah komponen.
e. MAIN MENU
Main menu meruakan menu utama App Inventor yang terletak pada bagian
atas.
B. Block Editor
Block editor ibarat dapur utama dari App Inventor. Block Editor dapat juga
disebut dengan kode program App Inventor. Block editor terdiri atas beberapa
bagian, yaitu
 Main Menu
 Block Palette
 Block Desainer
 Zoom Panel
a. MAIN MENU
Main menu digunakan sebagai akses menu utama pada Block editor. Dengan
main menu, pengguna dapat mengakses emulator, menyimpan project dan
mengatur perangkat yang terhubung. Berikut adalah tampilan main menu dari
Block editor.
b. BLOCK PALETTE
Block Palette digunakan untuk mengambilpart Block yang akan diletakan
pada block desainer. Untuk meletakkan part Block pada block desainer, Anda
cukup drag part Block yang dirnaksud, kemudian meletakannya pada Block
desainer.

4. BAHAN AJAR | PEMROGRAMAN WEB DAN PERANGKAT BERGERAK 4
c. BLOCK DESAINER
Block Desainer digunakan untuk meletakkan part Block yang seterusnya
akan digunakan sebagai program utama aplikasi. Penggunaan bahasa Block
membuat pemrograman Android menjadi lebih mudah bagi orang yang belum
mengetahui koding program pada pengembangan software Android.
d. ZOOM PANEL
Jika Block rancangan Anda sudah terlalu panjang, mungkin Anda akan
sedikit kesulitan untuk melihat struktur program Block Anda. Hal ini karena
panjang Block Anda telah melebihi lebar layar monitor Anda. Maka, untuk
mempermudah pengguna melihat struktur Block, App Inventor dilengkapi dengan
zoom panel.
RANGKUMAN
1. Untuk dapat bekerja membuat produk aplikasi perangkat bergerak berbasis
Android dengan menggunakan App Inventor tentu Anda harus memahami dan
mengenal terlebih dahulu lingkungan kerja dan menu-menu yang ada pada App
Inventor.
2. Lingkungan kerja App Inventor memiliki tiga bagian besar, yaitu:
a. Komponen Desainer
b. Block Editor
3. Komponen Desainer terbagi atas 5 jenis komponen yaitu :
a. Main Menu
b. Palette
c. Viewer
d. Components
e. Properties
4. Block editor ibarat dapur utama dari App Inventor. Block Editor dapat juga disebut
dengan kode program App Inventor. Block editor terdiri atas beberapa bagian,
yaitu
a. Main Menu
b. Block Palette
c. Block Desainer
d. Zoom Panel