More Related Content
What's hot (20)
Similar to BAB VII - PENGENALAN IDE APP INVENTOR (20)
![[PBO] Pertemuan 11 - GUI Java Desktop](https://cdn.slidesharecdn.com/ss_thumbnails/pbopertemuan11-guijavadesktop-181213104350-thumbnail.jpg?width=560&fit=bounds)
More from TeukuMahawira (20)
Recently uploaded (20)
BAB VII - PENGENALAN IDE APP INVENTOR
- 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