Cara Mudah Membuat Aplikasi Drawing Canvas Dengan MIT App Inventor - Sharingzona.blogspot.com

Sebelum masuk ke tutorial Cara Mudah Membuat Aplikasi Drawing Canvas Dengan MIT App Inventor, kita akan membahas dulu tentang apa itu MIT App Inventor .

App Inventor adalah sebuah tool untuk membuat aplikasi android, yang menyenangkan dari tool ini adalah karena berbasis visual block programming, jadi sobat Sharingzona bisa membuat aplikasi tanpa kode satupun. Mengapa disebut visual block programming?, karena Sobat Sharingzona akan melihat, menggunakan, menyusun dan drag-drops “blok” yang merupakan simbol-simbol perintah dan fungsi –event handler tertentu dalam membuat aplikasi, dan secara sederhana kita bisa menyebutnya tanpa menuliskan kode program –coding less. 

Tutorial kali ini kita akan membuat aplikasi menggambar sederhana melaliu App Inventor dari MIT. Sebelum membahas lebih jauh perlu kita ketahui bahwa pada MIT App Inventor terdapat banyak sekali tutorial-tutorial untuk membuat aplikasi secara sederhana, dan kali ini kita akan mengulas salah satu tutorial yang ada dengan cara yang lebih sederhana dan tentunya dalam bahasa Indonesia (MIT App Inventor defaulnya berbahasa Inggris).

1. Membuat Project Baru

Buatlah project baru pada akun MIT anda, dan beri nama yang sesuai untuk aplikasi yang akan kita buat, karena nama project ini akan menjadi nama aplikasi kita nantinya. pada project ini kita gunakan nama “canvas”.

2. Masukkan Interface yang akan kita gunakan

Saat memulai satu project baru kita harus mengtahui kebutuhan kebutuhan apa saja yang akan kita gunakan pada aplikasi kita nantinya. Pada project ini kita membutuhkan interface buttun dan canvas sebagai media gambar

·         Button

tambahkan button untuk memilih warna kuas yang akan digunakan dan button untuk menghapus gambar

pastikan kita membuat layout terlebih dahului agar button dapat tersusun rapi.

kita dapat merubah nama dan warna button pada menu Properties di sebelah kanan, tampilan yang kita butuhkan dapat menjadi seperti berikut

•   Canvas
  Tambahkan palletes drawing and animation “Canvas” ke menu viewer dengan drag and drop “Canvas” ke viewer. Patikan untuk tinggi dan lebar canvas dalam keadaan “fill parrent”.

Tambahkan sensor “Acceleromate Sensor” dengan drag & drop ke viewer.

tampilan akhir yang kita inginkan yaitu seperti berikut

3. Membuat Block

setelah selesai menyusun semua interface viewer di menu draw, kemudian kita membuat Block Program. Setelah selesai, klik screen 1 lalu pilih blocks. Maka akan muncul jendela block pada screen. berikut printah-perintah yang perlu di tambahkan.

·         Program Warna Kuas

Di block editor:

1.      Buat perintah “when __ click, do ____ ” pada setiap tombol

2.      Berikan perintah “set canvas1 . paintColor to ___” dari block canvas

tampilan block akan menjadi seperti di bawah ini.

• Program Clear Canvas

Clear canvas di buat untuk menghapus gambar yang telah di buat pada kanvas. program ini di buat pada button wipe.

·         Program drag canvas

Susunlah blocks canvas saat di drag. Dalam blocks ini, canvas tersebut akan mengikuti jari 

yang disentuh kelayar aplikasi untuk membuat suatu gambar. Setiap kali menyeret blok ini, itu akan menarik suatu garis kecil antara lokasi sebelumnya (Prevx, prevY) ke lokasi baru (CurrentX, CurrentY) ketika jari tersebut digunakan sebagai menggambar.

progarm block nya sebagai berikut:

• Program sentuh pada canvas

program ini akan membuat tanda titik saat layar canvas di sentuh. block program nya dapat di susun seperti berikut.

4. Menjalankan Aplikasi pada ponsel Android

setelah semua block selesai di susun, kita dapat menguji aplikasi ini dengan Ai Companion demikian tutorial kali ini.. nantikan tutorial berikutnya dan selamat mencoba. 

Source Site -- Klik --