Mengenal Designer dan Blocks Editor Pada App Inventor 2

Setelah pada artikel sebelumnya kita membahas area kerja app inventor 2, selanjutnya pada artikel kali ini admin akan membahas lebih mendalam mengenai dua area kerja pada App Inventor 2 sebagai berikut: 

Sumber Gambar : Google

Designer 

Designer merupakan area kerja App Inventor 2 untuk mendesain tampilan (user interface) aplikasi. Area ini terdiri dari beberapa panel yaitu Pallate, Viewer, Components, dan Properties.

Berikut ini adalah penjelasan dari beberapa panel tersebut:

1.Menu Bar, terdiri dari barisan menu-menu yang tersedia di App Inventor 2. Menu bar terbagi dua baris yaitu Menu Projects, Connect, Build, Help, My Projects, Gallery, Guide, Report an Issue, English dan User Profile. Sedangkan baris menu kedua terdiri dari Add Screen, Designer and Blocks.  

• Menu Projects memiliki banyak sub menu yang berfungsi untuk mengatur proyek aplikasi. Sub menu tersebut seperti gambar dibawah ini. 
• Menu Connect berfungsi untuk menguji coba beberapa jenis koneksi aplikasi. Uji coba dilakukan melalui tiga buah koneksi yaitu: emulator, kabel data, atau WiFi. 
• Menu Build berfungsi terdiri dari 2 sub menu yaitu App (Provide QR Code for. apk) dan App (Save .apk to my computer). sub menu App (Provide QR Code for. apk) berfungsi untuk membuat kode QR dari Aplikasi.  Sedangkan sub menu app berfungsi untuk membuat file paket aplikasi yaitu file .apk. Berikut ini adalah gambar dari menu tersebut. 
• Menu Help berfungsi untuk membantu pengguna (user) jika mengalamai masalah. Tampilan sub-sub menu help dapat dilihat pada gambar berikut ini. 
• Menu My Projects berfungsi untuk menampilkan semua proyek aplikasi. 
• Menu Gallery berisikan galeri proyek aplikasi yang sudah jadi dan proyek tersebut bisa langsung dibuka di App Inventor. Berikut adalah tampilan menu Gallery. 
• Menu Guide  berfungsi untuk membuka pustaka/library App Inventor. Tampilan menu Guide dapat dilihat pada gambar dibawah ini. 
• Menu Report An Issue berfungsi untuk menyampaikan berbagai permasalahan melalui MIT App Inventor Support Forum.
• Menu English berfungsi untuk memilih bahasa yang digunakan di App Inventor. Pada menu ini terdiri dari beberapa pilihan yang dapat dilihat pada gambar di bawah ini. 
• Menu User Profile berfungsi untuk menampilkan alamat email yang digunakan pengguna untuk melakukan login  ke App Inventor. 
• Menu Add Screen berfungsi untuk menambah screen baru. 
• Menu Remove Screen berfungsi untuk menghapus screen terpilih. 
• Menu Designer berfungsi untuk membuka area designer, yaitu area untuk mendesain tampilan aplikasi.
• Menu Blocks  berfungsi untuk membuka area blocks editor, yaitu area untuk mendesain susunan kode-kode program. 

2.Panel Palette merupakan panel yang berisi berbagai jenis  komponen yang disediakan oleh App Inventor 2. Panel palette ini dibagi menjadi beberapa tab yaitu User Interface, Layout, Media, Drawing & Animation, Sensors, Social, Storage, Connectivity, LEGO MINDSTORMS, Experimental, dan Extension. Berikut ini adalah tampilan dari panel palette. 

Tab-tab tersebut dapat dijelaskan sebagai berikut:

• Tab User Interface merupakan tab yang berisi komponen-komponen untuk mendesain tampilan aplikasi. Komponen-komponen tersebut dapat dilihat pada gabmar berikut. 
• Tab Layout merupakan tab yang berisi komponen-komponen visible di layar aplikasi. Komponen-kompenen tersebut dapat dilihat pada gambar berikut. 
• Tab Media merupakan tab yang berisi komponen-komponen multimedia, seperti kamera, pemutar video, pemutar musik, perekam suara, dan lain-lain. Tampilan nya dapat dilihat pada gambar berikut. 
• Tab Drawing and Animation merupakan tab yang berisi komponen-komponen untuk membuat objek bergambar dan animasi. Tampilannya dapat dilihat pada gambar berikut. 
• Tab Sensors meruapakan tab yang berisi komponen-komponen sensor, seperti sensor lokasi, orientasi, jarak dan lain-lain. Tampilannya dapat dilihat pada gambar berikut. 
• Tab Social merupakan tab yang berisi komponen-komponen untuk membuat aplikasi sosial seperti sms, email, twitter, panggilan telepon dan lain-lain. Tampilannya dapat dilihat pada gambar berikut. 
• Tab Storage merupakan tab yang berisi komponen-komponen untuk menyimpan file dan membuat aplikasi-aplikasi database. Tampilannya dapat dilihat pada gambar berikut. 
• Tab Connectivity merupakan tab yang berisi komponen-komponen untuk koneksi perangkat. Tampilannya dapat dilihat pada gambar berikut.

3.Panel Viewer merupakan panel yang berisi tampilan layar perangkat. Tampilan tersebut berfungsi untuk tempat mendesain user interface. Untuk tampilannya rekan-rekan bisa lihat langsung di interface App Inventor 2. 

4.Panel Components merupakan panel yang berfungsi untuk menampilkan seluruh komponen yang digunakan dalam mengembangkan aplikasi. Untuk tampilannya rekan-rekan bisa lihat juga langsung di interface App Inventor 2.

5.Panel Properties merupakan panel yang berfungsi untuk menampilkan properti/atribut screen maupun komponen. Untuk tampilannya rekan-rekan bisa lihat langsung di interface  App Inventor 2. 

6.Panel Media merupakan panel yang berfungsi sebagai media untuk mengunggah file-file suara maupun gambar yang diperlukan aplikasi ke server App Inventor 2. Untuk tampilannya rekan-rekan bisa lihat langsung di interface App Inventor 2. 

Blocks Editor 

Blocks editor merupakan area kerja App Inventor 2 yang berfungsi untuk menyusun blok-blok kode program. Area ini terdiri dari 2 panel yaitu, panel blocks dan panel block viewer. 

Berikut ini adalah penjelasan dari kedua Panel:

1. Panel Blocks berisikan daftar blok kode program built-in (default) maupun kode program yang tersedia di masing-masing komponen. Daftar blok built-in dibagi ke dalam beberapa group yaitu Control, logic, math, text, list, colors, variables dan procedures. Kelompok ini muncul di panel blocks. Sedangkan daftar blok komponen akan muncul jika pengguna menambahkan komponen tersebut ke program aplikasi yang dibuat.  
2. Panel Block Viewer merupakan panel yang berfungsi sebagai temapat mendesain susunan blok-blok kode program. Panel ini memilki area yang laus dan kita bebas meletakkan susunan blok-blok kode program di area ini. 

Sumber: ShopanSoft.com

Demikianlah informasi yang dapat admin bagikan bersumberkan dari shopansoft.com. Semoga bermanfaat dan salam satu data. 

Share this post