Bekerja Pada Blocks Viewer App Inventor

Published · Updated

Tulisan ini adalah kelanjutan dari tulisan sebelumnya, mind  Membuat Project Baru Pada App Inventor.

Setelah kita berhasil mendesain tampilan aplikasi, page maka sekarang saatnya kita memberi “nyawa” pada aplikasi tersebut supaya dia bisa berfungsi sebagaimana mestinya.

Sebagaimana kita tahu bahwa aplikasi “TalkToMero” yang sedang kita buat, belum dapat melakukan apa-apa, sebelum kita memberikan event pada komponen yang ada di dalamnya. Event bisa dikatakan sebagai sesuatu yang akan terjadi ketika sebuah komponen dijalankan. Misalnya ketika tombol “Ucapkan” ditekan, maka yang terjadi adalah HP Android anda akan mengeluarkan suara tertentu.

Untuk menentukan event pada sebuah komponen, kita bisa melakukannya pada Blocks viewer. Blocks viewer  merupakan Viewer App Inventor yang digunakan untuk memberikan event pada komponen yang kita gunakan.

Perlu anda ketahui bahwa script pemrograman yang biasa dituliskan oleh para programmer android untuk memberikan event terhadap sebuah komponen, pada App Inventor diwujudkan dalam bentuk block yang memiliki bentuk dan warna tertentu. Block inilah yang sering disebut sebagai event handler, yang mana dia berfungsi untuk memberikan event pada komponen yang diinginkan. Setiap block mewakili event tertentu yang dipasangkan pada block lain yang sesuai.

Sebuah  block dapat dianalogikan sebagai potongan kata atau kalimat, yang mana apabila kata tersebut disusun dengan benar dia akan membentuk sebuah kombinasi kalimat yang memberikan instruksi kepada handphone anda untuk melakukan sesuatu.

Sebagai contoh, misalnya saya memiliki 3 block berikut:

Gambar 1

Maka apabila 3 block di atas disusun, akan membentuk sebuah block baru sebagai berikut:

Block TalktoMero

Yang mana apabila diterjemahkan ke dalam bahasa kita..kira-kira begini: “Ketika tombol Ucapkan (Btn_Ucapkan) ditekan, maka bunyikan “Suara” dengan pesan (Text) yang telah diinputkan user pada “Kotak_Teks”.

Cukup jelas, bukan? 🙂 Nah.. sekarang mari kita mulai bekerja pada Blocks viewer ini!

Untuk mengaktifkan Blocks viewer, kita bisa mengeklik tombol Blocks pada bagian kanan halaman, dan halaman Blocks viewer akan ditampilkan dan terlihat seperti pada  gambar berikut:

Gambar 3 Blocks viewer (kosong)

Gambar 4 Blocks viewer yang terisi 1 block (group)

Keterangan :

  • Built-in Drawer : Berisi kumpulan event yang sesuai dengan jenis fungsinya. Misalnya Drawer Logic (berisi daftar block untuk melakukan operasi logika), Drawer Math (berisi daftar block untuk melakukan operasi aritmatika), Drawer Text (berisi daftar block untuk menentukan behavior yang berkaitan dengan manipulasi teks), dan seterusnya.
  • Components Specifics Drawer : Berisi daftar komponen yang saat ini sedang digunakan pada project beserta jenis block yang dapat digunakan
  • Viewer / Blocks Viewer Workspace : Merupakan area tempat block yang dipilih berada. Dalam viewer bisa terdapat 1 atau lebih block, tergantung pada tingkat kompleksitas sebuah aplikasi

Jadi, bisa saya katakan di sini bahwa  Drawer merupakan kumpulan block yang dikelompokkan berdasarkan jenis dan fungsinya. Untuk menggunakan block, anda bisa memilih (mengeklik) salah satu drawer dan memilih jenis block yang sesuai. Selanjutnya tarik (drag) ke area kosong Blocks viewer workspace.

Hwess! Cukup ya..kenalan sama block viewer-nya. Sekarang mari kita kembali ke project “TalkToMero”.

Yang harus kita lakukan sekarang adalah.. memberi event pada aplikasi tersebut supaya bisa mengeluarkan suara saat tombol “Ucapkan” ditekan. Untuk melakukannya, silahkan ikuti langkah berikut:

1. Klik pada komponen Btn_Ucapkan

Gambar 5

2. Pilih block When – Click – Do (Lihat gambar 5 no.2) dan drag ke viewer (atau klik 1 kali pada block tersebut). Maka daftar pilihan block Btn_Ucapkan akan hilang dan block yang dipilih akan tampak pada viewer.

3. Lakukan cara yang sama dengan langkah 1 s/d 2 untuk komponen “Suara” dan pilihlah block “Call-Speak-Message”

Block “Call-Speak-Message”

4. Selanjutnya, kita tentukan apa yang akan diucapkan oleh HandPhone, dalam hal ini yang akan diucapkan oleh HP adalah teks yang ada pada textbox “Kotak_Teks“. Maka pilihlah komponen Kotak_Teks dan pilih block Kotak_Teks- Text.

Block Kotak_Teks- Text.

5. Apabila masing-masing block sudah kita tentukan/pilih, maka kita tinggal memasangkan block yang satu dengan lainnya dengan cara drag and drop tepat pada bagian socket masing-masing block layaknya kita bermain puzzle. Berikut adalah tampilan hasil pemasangan block di atas.

Socket Pada Block

Hasilnya…

Block TalktoMero

Langkah selanjutnya adalah menguji coba, apakah event yang sudah kita berikan dapat berjalan dengan baik? Baca tulisan sebelumnya Menguji Coba Project Pada HP Android.

Menyenangkan bukaaan? Selamat mencoba 😀

Referensi:

http://appinventor.mit.edu/explore/designer-blocks.html

Referensi:

Tylor, Jason. App Inventor For Android : Build Your Own Apps – No Experience Required!, 2011, a John Wiley and Son, Ltd., Publication.

http://appinventor.mit.edu/explore/ai2/tutorials

http://appinventor.mit.edu/explore/sites/all/files/hourofcode/AppInventorTutorials.pdf

You may also like...