Colored Dots for App Inventor

Tujuan dari postingan berikut adalah:
- Membuat multiple screen dalam satu aplikasi
- Mengetahui cara meneruskan nilai dari satu layar ke layar lainnya melalui TinyDB.
- Mengetahui cara mengisi dan menggunakan ListPicker

Bahan-bahan yang dibutuhkan: PC, Internet, dan smartphone Android yang telah terinstall MIT AI2 Companion

Langkah-langkah:
1. Buka MIT App Inventor kemudian Create Apps dan bikin file project baru.

2. Pada Screen1 masukkan Components yang tertera pada gambar dibawah ini. Komponen dapat ditemukan di Pallete.
Petunjuk :
- Label, Button, ListPicker dapat ditemukan di Pallete > User Interface
- HorizontalArrangement dapat ditemukan di Pallete > Layout
- Canvas dapat ditemukan di Pallete > Drawing and Animation
- TinyDB1 dapat ditemukan di Pallete > Storage

3. Kemudian beri nama pada setiap komponen.

4. Kemudian setting setiap komponen dari mulai text, ukuran, dan posisi.
Berikut petunjuk untuk settingan pada setiap komponen:

Dari tabel settingan diatas akan menghasilkan tampilan seperti gambar dibawah ini

5. Selanjutnya untuk menambahkan screen pilih Add Screen

Selanjutnya beri nama Screen tersebut Brush_Picker, screen ini berfungsi sebagai pengaturan untuk skala warna yang diinginkan.

Sehingga sekarang sudah ada 2 buah screen yaitu Screen1 dan Brush_Picker.

6. Pada Brush_Picker masukkan Components yang tertera pada gambar dibawah ini. Komponen dapat ditemukan di Pallete.
Petunjuk :
- Label, Button, Notifier dapat ditemukan di Pallete > User Interface
- HorizontalArrangement dan VerticalArrangement dapat ditemukan di Pallete > Layout
- Canvas dapat ditemukan di Pallete > Drawing and Animation
- TinyDB1 dapat ditemukan di Pallete > Storage

Jangan lupa untuk memberi nama pada setiap komponen seperti Langkah 3

7. Kemudian setting setiap komponen dari mulai text, ukuran, dan posisi.
Berikut petunjuk untuk settingan pada setiap komponen:

8. Selanjutnya susun Blocks pada tiap screen:
- Screen1

Kemudian tambahkan ListPicker1.Elements to call populateList pada Screen1.Initialize dan Screen1.OtherScreenClosed
(( WARN : jangan membuat block baru dengan nama Screen1.Initialize dan Screen1.OtherScreenClosed karena blocks tidak akan bekerja karena telah diduplikat ))

- Brush_Picker

Setelah selesai menyusun blok seperti gambar diatas,maka klik connect dan pilih AI Companion, kemudian masuk ke aplikasi android MIT AI2 Companion dan scan barcode, maka akan muncul secara otomatis tampilan seperti berikut

[!!!] Pastikan anda memakai jaringan internet yang sama antara PC dan Android

Berikut hasilnya: