Panduan Membuat Aplikasi HelloBee di MIT App Inventor untuk Pemula

Membuat Aplikasi Pertama Anda: helloBee

Sekarang setelah kamu menyiapkan komputer dan perangkatmu, serta sudah memahami cara kerja Designer dan Blocks Editor, kamu siap untuk membuat aplikasi helloBee . Pada tahap ini, pastikan Designer atau Blocks Editor sudah terbuka di browser, dan perangkat Android/iOS atau emulator sudah terhubung untuk pengujian saat membangun aplikasi. Pilih Start a New Project dari menu Projects, lalu beri nama helloBee .

helloBee : Ketuk Lebahnya, Dengar Suara Dengungnya!

helloBee adalah aplikasi sederhana yang bisa kamu buat dalam waktu singkat. Kamu akan membuat sebuah tombol dengan gambar lebah bernama Codi di dalamnya, lalu memprogram tombol tersebut agar saat ditekan, ponsel akan mengeluarkan suara dengung lebah.

Untuk membuat helloBee , kamu membutuhkan file gambar Codi si lebah. Unduh file ini ke komputermu dengan mengeklik tautan berikut. Cara mengunduh: setelah mengeklik tautan, klik kanan pada gambar dan pilih "Save As". Simpan file tersebut di desktop, folder unduhan, atau di tempat yang mudah ditemukan nanti.

• Gambar: codi.jpg (Right-click and Save)
• Suara: Bee-Sound.mp3 (Right-click and Save)

Pilih komponen untuk merancang aplikasimu

Untuk menggunakan sebuah komponen dalam aplikasimu, kamu perlu mengeklik dan menyeretnya ke Viewer yang ada di tengah Designer. Ketika kamu menambahkan sebuah komponen ke Viewer (#1 di bawah), komponen tersebut juga akan muncul dalam daftar komponen di sisi kanan Viewer.

Komponen (#2 di bawah) memiliki properti yang bisa disesuaikan. Properti ini mengubah cara komponen tersebut tampil atau berfungsi di dalam aplikasi. Untuk melihat dan mengubah Properti dari sebuah komponen (#3 di bawah), kamu harus terlebih dahulu memilih komponen yang diinginkan dalam daftar komponen.

Langkah-langkah untuk memilih komponen dan mengatur properti

helloBee akan memiliki komponen Button yang menampilkan gambar lebah yang telah kamu unduh sebelumnya. Untuk melakukannya:

• Langkah 1a. Dari palet User Interface, seret dan lepaskan komponen Button ke Screen1 (#1).
• Langkah 1b. Untuk memberikan gambar lebah pada tombol tersebut, di panel Properties, di bawah opsi Image, klik teks "None..." dan pilih "Upload File..." (#2). Sebuah jendela akan muncul untuk membiarkanmu memilih file gambar. Klik "Browse" lalu arahkan ke lokasi file codi.jpg yang telah kamu unduh sebelumnya (#3). Klik file codi.jpg, lalu klik "Open", dan kemudian klik "OK".

Langkah 2. Ubah properti Text dari tombol:
Hapus "Text for Button1", sehingga properti teks tombol menjadi kosong dan tidak ada tulisan yang menutupi gambar lebah.

Langkah 3. Dari palet User Interface, seret dan lepaskan komponen Label ke Viewer (#1), letakkan di bawah gambar lebah. Komponen ini akan muncul dalam daftar komponenmu sebagai Label1.

Di bawah panel Properties, ubah

• (2) Text properti dari Label1 menjadi "Sentuh Lebah". Kamu akan melihat teks berubah di Designer dan di perangkatmu.
• (3) FontSize menjadi 30.
• (4) BackgroundColor dari Label1 dengan mengklik kotaknya. Kamu bisa menggantinya ke warna apa saja yang kamu suka.
• (5) TextColor ke warna apa saja yang kamu suka. (Catatan: jika BackgroundColor dan TextColor sama, kamu tidak akan bisa membaca teksmu!)

Di sini, warna latar belakang diatur menjadi aqua dan warna teks diatur menjadi biru.

Langkah 4. Di bawah Palette, klik pada Media drawer dan seret komponen Sound ke Viewer (#1). Dimanapun kamu melepaskannya, komponen ini akan muncul di area bawah Viewer yang bertuliskan Non-visible components. Di bawah panel Media, klik Upload File... (#2), arahkan ke lokasi file Bee-Sound.mp3 yang telah kamu unduh sebelumnya dan unggah ke proyek ini (#3). Di bawah panel Properties, lihat bahwa properti Source saat ini tertulis None.... Klik kata None... untuk mengubah Source komponen Sound1 menjadi Bee-Sound.mp3 (#4).

Memprogram dengan Blocks Editor

Sejauh ini, kamu telah mengatur layar dan komponen aplikasi di Designer, yang ada di jendela peramban web. Untuk mulai memprogram perilaku aplikasi, kamu perlu pergi ke Blocks Editor. Klik tombol Blocks di pojok kanan atas layar untuk menuju ke Blocks Editor.

Setelah Blocks Editor terbuka, lanjutkan ke langkah berikutnya untuk mulai memprogram aplikasi kamu dengan blok.

Memainkan Suara

Langkah 1. Di sisi kiri Blocks Editor, klik Button1 drawer untuk membukanya. Seret dan lepaskan blok when Button1.Click ke area kerja (area terbuka di sebelah kanan).

Blok-blok kuning mustard itu disebut sebagai blok event handler. Blok event handler menentukan bagaimana perangkat seluler harus merespons kejadian tertentu: sebuah tombol telah ditekan, ponsel sedang digoyangkan, pengguna sedang menggeser jarinya di atas kanvas, dan lain-lain. when Button1.Click adalah sebuah event handler.

Langkah 2a. Klik Sound1 drawer dan seret blok Sound1.Play dan sambungkan ke bagian "do" dari blok when Button1.Click. Blok-blok ini akan terhubung seperti potongan puzzle dan kamu akan mendengar suara klik ketika mereka terhubung.

Blok-blok ungu disebut sebagai blok command, yang ditempatkan di dalam tubuh event handler. Ketika event handler dijalankan, ia mengeksekusi urutan perintah dalam tubuhnya. Sebuah perintah adalah blok yang menentukan tindakan yang akan dilakukan (misalnya, memutar suara) ketika kejadian (misalnya, menekan Button1) dipicu. Blok-blokmu seharusnya terlihat seperti ini pada titik ini:

Sekarang kamu dapat melihat bahwa blok perintah berada di dalam event handler. Sekumpulan blok ini berarti; "ketika Button1 diklik, Sound1 akan diputar." Event handler seperti kategori aksi (misalnya, tombol sedang diklik), dan perintah menentukan jenis aksi dan rincian dari aksi tersebut (misalnya, memutar suara).