Tutorial Belajar Membuat Aplikasi Android dengan MIT App Inventor 2 - PaintPot[bagian 1]

Tutorial ini memiliki dua bagian: Bagian 1 | Bagian 2

Tutorial ini memperkenalkan komponen kanvas untuk membuat grafik dua dimensi sederhana. Anda akan membangun sebuah aplikasi yang memungkinkan Anda menggambar di layar ponsel dalam berbagai warna.

Catatan sejarah: PaintPot adalah salah satu program pertama kali dikembangkan untuk menunjukkan potensi komputer pribadi, sejauh tahun 1970-an.

Download Book Chapter PDF

Dengan aplikasi PaintPot, Anda dapat:

• Mencelupkan jari Anda ke dalam panci cat virtual untuk menarik warna itu.
• Seret jari Anda di sepanjang layar untuk menggambar garis.
• Ketuk layar untuk membuat titik-titik.
• Gunakan tombol di bagian bawah untuk menghapus layar bersih.
• Sertakan gambar sebagai latar belakang gambar.

Tutorial ini mengasumsikan bahwa Anda telah menyelesaikan tutorial HelloPurr. Tutorial ini memperkenalkan berikut App Inventor konsep:

• Kanvas komponen untuk menggambar.
• Mengontrol tata letak layar dengan komponen Arrangement.
• Penangan acara yang mengambil argumen.
• Variabel

Sebelum memulaiPastikan komputer Anda dan telepon Anda diatur untuk menggunakan App Inventor. Memulai sebuah proyek baru di jendela Designer, dan nama itu "PaintPot". Buka Blok Editor, klik Connect to Phone, dan pastikan ponsel telah mulai App Inventor app.

Judul layarUntuk memulai, pergi ke panel Properties di sebelah kanan Designer dan mengubah Judul layar untuk "PaintPot". Anda akan melihat perubahan ini di telepon, dengan judul baru yang menunjukkan dalam judul bar.
Ada tiga nama di App Inventor, dan sangat mudah untuk membingungkan mereka:

1. Nama yang Anda pilih untuk proyek Anda saat Anda bekerja di atasnya (dalam hal ini, PaintPot). Ini juga akan menjadi nama dari aplikasi jika Anda paket untuk telepon.
2. Nama "Screen1", yang merupakan nama dari komponen layar. Anda akan melihatnya tercantum dalam Komponen panel di Designer. Anda tidak dapat mengubah nama komponen Layar pertama dalam versi saat ini dari App Inventor tetapi Anda dapat membuat layar tambahan dengan nama apa pun yang Anda harus memilih. 
3. Judul milik layar, yang adalah apa yang akan Anda lihat di bar judul telepon. Judul adalah properti dari komponen layar. Judul dimulai menjadi "Screen1", yang adalah apa yang Anda gunakan di HelloPurr. Namun, Anda dapat mengubahnya, seperti yang Anda lakukan untuk PaintPot. Untuk mengulangi, nama dan judul Screen1 awalnya sama, tetapi Anda dapat mengubah judul jika Anda ingin.

 Mengatur Komponen
Anda akan menggunakan komponen ini untuk membuat PaintPot:

1. Tiga Tombol untuk memilih merah, biru, atau cat hijau, dan tombol lain untuk menyeka gambar. 
2. Sebuah kanvas, permukaan gambar. Kanvas ini memiliki backgroundImage, yang kitty ini dari tutorial HelloPurr. Anda juga dapat menarik sebuah kanvas kosong. Itu hanya sebuah kanvas tanpa gambar latar belakang. 
3. Ada juga komponen Anda tidak melihat: Anda menggunakan HorizontalArrangement untuk membuat tombol warna tiga berbaris.

Itu membuat lima komponen dalam semua. Mari kita mendapatkan mereka dan membangun aplikasi.Tombol warna

1. Tarik komponen Button ke Viewer dan mengubah teks tombol ini atribut untuk "Merah" dan membuat backgroundColor merah. 
2. Klik Button1 dalam daftar komponen dalam Viewer untuk menyorotnya (mungkin sudah disorot) dan menggunakan Rename ... tombol untuk mengubah namanya dari "Button1" untuk "ButtonRed". 
3. Demikian pula, membuat dua tombol lebih untuk biru dan hijau, bernama "ButtonBlue" dan "ButtonGreen", menempatkan mereka secara vertikal di bawah tombol merah.

Berikut adalah cara ini akan terlihat pada designer, dengan nama-nama tombol muncul dalam daftar komponen proyek. Dalam proyek ini, Anda mengubah nama-nama komponen daripada meninggalkan mereka sebagai nama default seperti yang Anda lakukan dengan HelloPurr. Menggunakan nama-nama bermakna membuat proyek Anda lebih mudah dibaca untuk diri sendiri dan orang lain.

Anda juga harus melihat tiga tombol pada layar ponsel.
Tata letak dengan Layar Arrangement

Anda sekarang harus memiliki tiga tombol, satu di atas yang lain. Langkah selanjutnya adalah membuat mereka berbaris horizontal. Anda melakukan ini dengan menggunakan komponen HorizontalArrangement.

1. Dari kategori Layout Palette ini, tarik keluar komponen HorizontalArrangement dan tempat di bawah tombol. Mengubah nama komponen ini dari "HorizontalArrangement1" untuk "ThreeButtons". 
2. Pada panel Properties, mengubah Lebar ThreeButtons untuk "Isi Parent ..." sehingga memenuhi seluruh lebar layar. 
3. Memindahkan tiga tombol berdampingan ke dalam komponen HorizontalArrangement. Petunjuk: Anda akan melihat garis vertikal biru yang menunjukkan di mana potongan Anda menyeret akan pergi.

Jika Anda melihat di daftar komponen proyek, Anda akan melihat tiga tombol menjorok di bawah ThreeButtons untuk menunjukkan bahwa mereka sekarang subkomponen yang. Perhatikan bahwa semua komponen yang menjorok di bawah Screen1.

 

 

Anda juga harus melihat tiga tombol Anda berbaris dalam satu baris pada layar ponsel, meskipun hal-hal mungkin tidak terlihat persis seperti pada Designer. Misalnya, garis besar Arrangement ini menunjukkan dalam Designer tetapi tidak di telepon.
Secara umum, Anda menggunakan layar Pengaturan untuk membuat layout vertikal atau horizontal sederhana. Anda dapat menciptakan lebih banyak layout kompleks dengan komponen bersarang Layar Arrangement. Ada juga komponen TableArrangement (tidak tercakup dalam tutorial ini).Kanvas dan menghapus tombol
Dua komponen terakhir adalah kanvas dan tombol menghapus.

1. Dari Menggambar dan Animasi kategori Palette ini menyeret komponen kanvas ke Viewer. Mengubah nama menjadi "DrawingCanvas". Set yang Lebar untuk "Isi Parent" dan mengatur tinggi untuk 300 piksel. 

 
2. Tambahkan Gambar Latar Belakang kanvas. Klik pada bidang yang mengandung "Tidak ..." sebelah backgroundImage di panel Properties kanvas itu. Anda dapat menggunakan file kitty.png yang sama, jika Anda masih memilikinya di desktop Anda dari tutorial sebelumnya. Atau Anda dapat menggunakan gambar lain.
note:
Anda dapat menggunakan gambar apapun yang Anda suka, tetapi Anda akan mendapatkan hasil terbaik jika ukuran gambar (dalam pixel) dekat dengan ukuran di mana Anda akan menunjukkan itu di telepon. Juga, gambar besar akan memakan waktu yang lama untuk memuat, dan mungkin melebihi kapasitas memori mengalokasikan telepon untuk aplikasi. 

 

3. Dari Palette, tarik tombol akhir ke layar, menempatkannya di bawah kanvas. Ganti nama komponen tombol ini untuk "ButtonWipe" dan mengubah teks yang atribut untuk "Lap".

Anda sekarang telah menyelesaikan langkah-langkah untuk mengatur tampilan aplikasi Anda. Berikut adalah cara ini akan terlihat di Designer. Berikutnya, Anda akan menentukan bagaimana komponen berperilaku.

 

 

Tambahkan perilaku untuk komponen

Klik tombol Blok untuk beralih ke Blok Editor. Pertama Anda akan mengatur tombol yang mengubah warna cat. Kemudian Anda akan menambahkan blok untuk memutuskan apa yang terjadi ketika seseorang menyentuh atau menyeret layar.

 
Tambahkan tombol event handler

 In the Blocks Editor:

1. Open the drawer for ButtonRed and drag out the when ButtonRed.Click block.
2. Open the DrawingCanvas drawer. Drag out the set DrawingCanvas.PaintColor to block (remember that the set block of components is a dropdown so PaintColor is a selection in the dropdown) and place it in the do section of when ButtonRed.Click .

3. Open the Colors drawer and drag out the block for the color Red and put it into set DrawingCanvas.PaintColor to . (Clicking on a color block after it's been placed will display a table of colors that you can select from.)
4. Repeat steps 2-4 for the blue and green buttons.
5. The final button to set up is the Wipe button. Make a click event handler for ButtonWipe by dragging when ButtonWipe.Click from the ButtonWipe drawer. From the DrawingCanvas drawer, drag call DrawingCanvas.Clear and place it in the do area of the when ButtonWipe.Click block.

The blocks for the buttons should look like this:

Add Touch-event Handlers

Now for the next step: drawing on the Canvas. You'll arrange things so that when you touch the canvas, you get a dot at the spot where you touch. If you drag your finger slowly along the canvas, it draws a line.

• In the Blocks Editor, open the drawer for the canvas and drag the when DrawingCanvas.Touched block to the workspace. As soon as you drag the block out, you may notice three argument names (highlighted in orange) located at the top of the block x, y, and touchedSprite. These arguments are also known as local variables and can get accessed by using the get or set block found in the Variables drawer and then selecting the proper variable in the drop drown menu. You can also access these variables by moving your cursor over to the highlighted name and selecting the variable you would like to use.

You've already seen button click events. Clicks are simple, because there's nothing to know about the click other than that it happened. Other event handlers such as when ... Touched need information about the event. In App Inventor, this information is expressed as the value of arguments associated with the event handler. For the when ... Touched event, the first two arguments stand for the x and y coordinates of where the touch happened. We'll save touchedSprite for a later tutorial.

• For this touch event, make the canvas draw a small circle at the point with coordinates (x, y). Drag out a call DrawingCanvas.DrawCircle command from the canvas drawer and place it in the do section of when DrawingCanvas.Touched.

On the right side of the call DrawingCanvas.DrawCircle block are three sockets where you must specify values for the x and y coordinates where the circle should be drawn, and r, which is the radius of the circle. For x and y, you'll use values of the arguments that were supplied to the Touched handler:

1. Move your cursor over the x variable (highlighted in orange). Find the get x block and drag it into the corresponding x socket in the when DrawingCanvas.Touched block.
2. Do the same for the y variable.
3. You'll also need to specify the radius of the circle to draw. Five (pixels) is a good value for this app. Click in a blank area of the screen and type the number 5 followed by return to create a number block with a value of 5. Typing on the blank area of the screen is called typeblocking and is a useful shortcut to know. This can be done for any block, not just numbers. Plug the block for 5 into the radius slot.

Click on the following links for more information on arguments and typeblocking.
Here's how the touch event handler should look:

Try out what you have so far on the phone. Touch a color button. Now touch the canvas, and your finger should leave a spot at each place you touch. Touching the Wipe button should clear your drawing.

Add Drag Events

Finally, add the drag event handler. Here's the difference between a touch and a drag:

• A touch is when you place your finger on the canvas and lift it without moving it.
• A drag is when you place your finger on the canvas and move your finger while keeping it in contact.

When you drag your finger across the screen, it appears to draw a giant, curved line where you moved your finger. What you're actually doing is drawing hundreds of tiny straight lines: each time you move your finger, even a little bit, you extend the line from your finger's immediate last position to its new position.
A drag event comes with 6 arguments. These are three pairs of x and y coordinates that show:

• The position of your finger back where the drag started.
• The current position of your finger.
• The immediately previous position of your finger.

There's also a sprite, which we'll ignore for this tutorial.
Now make dragging draw a line between the previous position and the current position by creating a drag handler:

1. From the DrawingCanvas drawer, drag the when DrawingCanvas.Dragged block to the workspace.
2. Also from the DrawingCanvas drawer, drag the call DrawingCanvas.DrawLine block into the do slot of the when DrawingCanvas.Dragged block.
3. Drag a get prevX block to the open x1 slot in when DrawingCanvas.DrawLine. Do the same for the other spaces: y1 should be get prevY, x2 should be get currentX, and y2 should be get currentY.

Here's the result:

 

Test your work by trying it on the phone: drag your finger around on the screen to draw lines and curves. Touch the screen to make spots. Use the Wipe button to clear the screen.
In PaintPot Part 2, you'll see how to use global variables to create dots of different sizes.

Review

Here are some of the ideas covered in this tutorial:

• You can use Screen Arrangement components to specify screen layouts other than just placing components one under the other.
• The Canvas component lets you draw on it. It can also sense touches and drags.
• Some event handlers are called with information about the event, such as the coordinates of where the screen was touched. This information is represented by arguments. When you select an event handler that has arguments, App Inventor creates value blocks for these.

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.



Or download the apk