Tutorial membuat Colored Dots dengan App Inventor 2

       Color Dots merupakan aplikasi yang memungkinkan pengguna melukis dengan Dots sehingga membentuk suatu gambar. pada aplikasi ini terdapat dua layar dimana layar satu sebagai tempat untuk menggambar dan layar dua digunakan sebegai tempat memlih brush yang kita inginkan.


untuk memulai pembuatan aplikasi silahkan masuk ke alamat : http://appinventor.mit.edu/
dan pilih creat apps!

Kemudian pilih my project > start new project.

isikan nama project yang akan di buat.

Mulailah membuat tampilan untuk screen 1 dengan menambahkan komponen komponen yang di perlukan.

Kemudian tambahkan screen 2 dengan cara :

Mulailah membuat tampilan untuk screen 2 dengan menambahkan komponen komponen yang di perlukan.

Membuat Blocks Aplikasi

 Setelah melakukan pembuatan untuk aplikasi ,selanjutnya dilakukan blocks ataupun  dikenal sebagai pembuatan kode program berupa puzzle. Dalam hal ini dilakukan dua  blocks,yakni blocks “Screen 1” dan blocks “Brush_Picker”.

•  Blocks Screen 1

1. Langkah pertama yang harus dilakukan yakni melakukan drawing pada screen 1. Ketika Anda menyentuh kanvas,akan bisa dilakukan pemberian dot warna yang dingginkan. Warna tersebut ditentukan oleh latar belakang label ColorSample. Tombol erase membersihkan kanvas. Ketika layar terbuka, menginisialisasi radius 3 dan warna hitam. Berikut adalah blocks:

2. Langkah block selanjutnya yakni bagaimana cara komunikasi/berhubungan dengan brush picker. Dimana brush_picker ini menyediakan warna, dot size serta jumlah warna yang tersimpan. Maka dari itu brush_picker sangat berperan penting. Berikut blocks nya :

3. Membentuk sharing data melalui TinyDB. Dalam hal ini dibentuk procedures “PopulateList” guna sebagai penyimpanan database berupa jumlah warna yang akan disimpan. Berikut blocks nya :

4. Setelah dibentuk “Populate List”,tambahkan list picker ke blocks screen 1. initialized dan screen1.OtherScreenClosed. Tampilan Blocks seperti gambar dibawah :

5. Lakukan inisialisasi After Listpicker1 Click. Gunanya untuk melihat daftar semua warna yang Anda buat.
   

• Blocks Brush_Picker
  setelah melakukan pembuatan block pada screen 1 maka akan dilanjutkan dengan pembuatan block pada screen 2.

1.  Melakukan pembuatan blocks “check color” dan “limit range”. Prosedur checkColor mengambil nilai dan membatasi jangkauan untuk antara 0 dan 255. Prosedur checkColor memanggil prosedur limitRange dimana sebagai mengambil input, batas bawah, dan batas atas, dan membatasi masukan yang tidak sesuai dalam rentang itu (dan ia mengembalikan batas bawah jika input bukan angka). Berikut Blocks nya :

                   

2. Melakukan pembuatan blocks inisialisasi brush picker sekaligus blocks return to painting. Dimana menggunakan prosedur CheckColor dan LimitRange untuk memastikan bahwa nilai yang dimasukkan dalam kotak teks nomor berlaku untuk warna dan dot ukuran.

3. Melakukan Inisialisasi Test Color Button. Berikut Blocks Test Color Button :

Membuat Blocks untuk Notifier sebagai penghubung Screen 1 dan Brush Picker. Berikut tampilan blocks notifier :

5. Jangan lupa untuk membuat blocks reset button,seperti tampilan dibawah :

Setelah selesai dalam pemograman. Pilih dan klik menuBuild. Lalu pilih pilihan 1  (provide QR code for .apk) untuk penggunaan aplikasi pada android.

Setelah ini maka proses compiling akan segera dimulai. Tunggu sampai 100%.

Scan barcode yang di tampilkan menggunankan android

1. Bukalah software MIT AI2 Companion. Tampilan seperti gambar dibawah :

klik “Connect with code” untuk melakukan tahap penginstalan aplikasi pada android.

Pilih Install, sehingga aplikasi tersebut dapat digunakan pada android.

Kemudian akan terlihat tampilan dari screen 1 yang akan digunakan untuk melukis

 tampilan  dari screen 2 yang akan digunakan untuk memilih brush yang akan digunakan

Cobalah test drawing menggunakan aplikasi colored dots sesuai yang dinginkan. Jika sudah bisa,aplikasi sudah bisa digunakan. Berikut tampilan nya :