[AI2]Tutorial Membuat Multiple Screen dan Database

APP Inventor merupakan sebuah aplikasi web based editor yang digunakan untuk membuat aplikasi android dengan script yang sudah disediakan. Script tersebut dibuat seperti blok-blok yang disusun yang saling berkaitan. Pada kali ini saya akan membuat sebuah aplikasi sederhana untuk menampilkan text yang diinputkan dan ditambahkan dengan mengganti warna text serta background.

1. Buka website berikut http://ai2.appinventor.mit.edu/ untuk menggunakan app inventor

2. Kemudian akan diminta login dengan account google dan akan diminta autentikasi

3. Buatlah projek baru dengan memilih Project > Start New Project pada tampilan App Inventor

 

 4. Maka akan tampil jendela pertama dari APP Inventor

Pada gambar diatas ada tampilan menu, berikut beberapa fungsi dari menu tersebut:

User Interfaces Menu
Menu	Fungsi
Button	Sebuah tombol dengan kemampuan untuk mendeteksi klik, yang dapat mengeksekusi suatu perintah
Checkbox	Sebuah kotak centang memunculkan suatu kejadian ketika pengguna mengkliknya
DatePicker	Sebuah tombol yang ketika diklik meluncurkan dialog popup yang memungkinkan pengguna untuk memilih tanggal
Image	Sebuah komponen untuk menampilkan gambar
Label	Label digunakan untuk menampilkan teks, biasa untuk memberikan informasi
ListPicker	Sebuah tombol yang ketika diklik menampilkan daftar teks bagi pengguna
ListView	ListView digunakan menampilkan daftar yang dibuat
Notifier	Notifier digunakan untuk menampilkan pesan dan notifikasi.
PasswordTextBox	Sebuah box untuk menginputkan password dengan enkripsi
Slider	Slider digunakan untuk progress bar yang dapat digeser
Spinner	Sebuah komponen untuk menampilkan pop-up dengan daftar elemen
TextBox	Sebuah box yang digunakan untuk menginputkan teks
TimePicker	Sebuah tombol yang digunakan untuk memilih waktu (jam, menit, detik)
WebViewer	Sebuah komponen untuk melihat web pages

5. Kemudian lakukan drag and drop palette yang ingin digunakan pada menu, dan susun dengan keinginan masing-masing.

 

6. Kemudian drag and drop palette yang ingin digunakan pada menu, dan susun dengan keinginan masing-masing pada screen yang lainnya.

 

Berikut pallete yang dibutuhkan pada Screen 1

No	Komponen	Bagian
1	Canvas	Drawing and Animation
2	Table Arrangment	Layout
3	Label	User Interface
4	Label	User Interface
5	Button	User Interface
6	Button	User Interface
7	List Picker	User Interface
8	Table Arrangment	Layout
9	Label	User Interface
10	Label	User Interface
11	TinyDB	Storage

Berikut pallete yang dibutuhkan pada screen 2

No	Komponen	Bagian
1	Table Arrangment	Layout
2	Table Arrangment	Layout
3	Label	User Interface
4	Label	User Interface
5	Label	User Interface
6	Label	User Interface
7	Label	User Interface
8	Label	User Interface
9	Canvas	Drawing and Animation
10	Label	User Interface
11	Table Arrangment	Layout
12	Text Box	User Interface
13	Label	User Interface
14	Button	User Interface
15	Canvas	Drawing and Animation
16	Notifier	User Interface
17	TinyDB	Storage

7. Setelah selesai didesain masuk ke menu blocks pada pojok kanan atas, kemudian pilih blok-bloknya dan susun sesuai gambar dibawah.

Screen 1

Screen 2