Modul 1

HelloCodi:
Sentuh Lebah, dengarkan Bzzzzz!!!!
HelloCodi adalah aplikasi sederhana yang dapat dibuat dalam waktu yang sangat singkat. Anda membuat
tombol yang bergambar Codi si lebah, lalu memprogram tombol tersebut sehingga bila diklik ponsel akan
mengeluarkan suara mendengung.

Untuk membuat HelloCodi, Anda memerlukan file gambar Codi si lebah. Unduh file-file ini ke komputer Anda
dengan mengklik tautan berikut. Untuk mengunduh: setelah mengeklik tautan, klik kanan pada gambar dan
pilih "Save As". Simpan file ke desktop atau folder unduhan, atau di mana pun yang mudah Anda temukan
nanti.

• Gambar codi: codi.jpg

(https://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/helloCodi/codi.jpg)
• Suara lebah: Bee-Sound.mp3
(https://appinventor.mit.edu/explore/sites/all/files/ai2tutorials/helloCodi/Bee-Sound.mp3)

1. Pilih komponen untuk mendesain aplikasi

Components App Inventor terletak di sisi kiri Jendela Desainer di
bawah Palette. Komponen adalah elemen dasar yang Anda gunakan
untuk membuat aplikasi di ponsel Android atau iPhone. Mereka
seperti bahan-bahan dalam resep. Beberapa komponen sangat
sederhana, seperti komponen Label, yang hanya menampilkan teks di
layar, atau komponen Button (#1 kiri) yang Anda ketuk untuk memulai
suatu tindakan.

Komponen lainnya lebih rumit: Canvas drawing yang dapat

menampung gambar diam atau animasi, sensor Accelerometer yang
berfungsi seperti pengontrol Wii dan mendeteksi saat Anda
menggerakkan atau menggoyangkan ponsel, komponen yang
mengirim pesan teks, komponen yang memutar musik dan video,
komponen yang mendapatkan informasi dari situs Web, dan
sebagainya.
Untuk menggunakan komponen di aplikasi Anda, Anda perlu mengeklik dan menyeretnya ke penampil di
tengah Designer. Saat Anda menambahkan komponen ke Viewer (#1 di bawah), komponen tersebut juga
akan muncul di daftar komponen di sisi kanan Viewer.

Components (#2 di bawah) memiliki properti yang dapat disesuaikan. Properti ini mengubah cara komponen
muncul atau berperilaku dalam aplikasi. Untuk melihat dan mengubah komponen Properties (#3 di bawah),
Anda harus terlebih dahulu memilih komponen yang diinginkan dalam daftar komponen Anda.

2. Langkah-langkah memilih komponen dan mengatur properti

HelloCodi akan memiliki komponen Button yang menampilkan gambar lebah yang Anda unduh sebelumnya.
Untuk menyelesaikan ini:

Langkah 1a. Dari User Interface palette, seret dan lepas komponen Button ke Screen1 (#1).

Langkah 1b.Untuk memberikan gambar lebah pada tombol, di panel Properties, di bawah Gambar, klik pada
teks "None..." dan klik "Upload File..." (#2). Sebuah jendela akan muncul untuk memungkinkan Anda memilih
file gambar. Klik "Browse" lalu arahkan ke lokasi file codi.jpg yang Anda download tadi (#3). Klik file codi.jpg,
klik "Open", lalu klik "OK".
Langkah 2. Ubah properti Button Text:
Hapus "Text for Button1", biarkan properti teks Button kosong sehingga tidak ada tulisan di atas gambar
lebah.

Langkah 3. Dari User Interface palette, drag dan drop komponen Label ke Viewer (#1), letakkan di bawah
gambar lebah. Ini akan muncul di bawah daftar komponen Anda sebagai Label1.

Di bawah panel Properties, ubah

(2) Properti Teks Label1 berbunyi "Touch the Bee!". Anda akan melihat perubahan teks di Desainer
dan perangkat Anda.
(3) FontSize hingga 30.
(4) BackgroundColor dari Label1 dengan mengklik pada kotak. Anda dapat mengubahnya ke warna
apa pun yang Anda suka.
(5) TextColor ke warna apa pun yang Anda suka. (Catatan: jika BackgroundColor dan TextColor sama,
Anda tidak akan dapat membaca teks Anda!)

Di sini, warna latar belakang diatur ke aqua dan warna teks diatur menjadi biru.
Langkah 4. Di bawah Palette, klik Media dan tarik keluar komponen Sound dan letakkan di Viewer (#1).
Dimanapun Anda menjatuhkannya, itu akan muncul di area di bagian bawah Penampil bertanda Non-visible
Component. Di bawah panel Media, Klik Upload File... (#2) Telusuri ke lokasi file Bee-Sound.mp3 yang Anda
unduh sebelumnya dan unggah ke proyek ini (#3). Di bawah panel Properties, lihat bahwa properti Source
saat ini bertuliskan None.... Klik kata None... untuk mengubah Source komponen Sound1 menjadi Bee-
Sound.mp3 (#4).

3. Pemrograman dengan Editor Blok

Sejauh ini Anda telah mengatur layar dan komponen aplikasi Anda di Designer, yang ada di jendela browser
web. Untuk mulai memprogram perilaku aplikasi, Anda perlu membuka Block Editor. Klik tombol Block di
kanan atas layar Anda untuk membuka Block Editor.

Setelah Anda memiliki Block Editor di depan Anda, lanjutkan ke langkah berikutnya untuk mulai memprogram
aplikasi Anda dengan Block.

4. Bermain dengan Suara

Langkah 1. Di sisi kiri Editor Blok, klik laci Button1 untuk membukanya. Seret dan lepas blok
when Button1.Click di area kerja (area terbuka di sebelah kanan).

Blok cokelat tersebut disebut blok event handler. Blok event handler menentukan bagaimana perangkat
seluler harus merespons peristiwa tertentu: tombol telah ditekan, telepon diguncang, pengguna menyeret
jarinya ke atas kanvas, dll. when Button1.Click adalah event handler.

Langkah 2a. Klik Sound1 dan seret blok Sound1.Play dan sambungkan ke bagian "do" di blok When
Button1.Click. Balok-balok tersebut saling terhubung seperti potongan puzzle dan Anda dapat mendengar
bunyi klik saat balok-balok tersebut tersambung.
Blok ungu disebut command block, yang ditempatkan di badan event handler. Saat event handler dijalankan,
ia menjalankan urutan perintah di tubuhnya. Perintah adalah blok yang menentukan tindakan yang akan
dilakukan (misalnya memutar suara) ketika peristiwa (misalnya menekan Tombol1) terjadi.

Blok Anda akan terlihat seperti ini pada saat ini:

Sekarang Anda dapat melihat bahwa command block ada di event handler. Kumpulan blok ini berarti; " when
Button1 is clicked, Sound1 will play." event handler seperti kategori tindakan (misalnya, sebuah tombol
sedang diklik), dan perintahnya menentukan jenis tindakan dan detail tindakan tersebut (misalnya, memutar
suara).

Cobalah di perangkat Anda atau dengan emulator! Saat Anda menekan tombol, Anda akan mendengar
dengungan lebah. Selamat, aplikasi pertama Anda sudah berjalan!

5. Pengemasan Aplikasi
Saat ponsel/tablet/emulator Anda telah terhubung ke App Inventor, aplikasi Anda telah berjalan secara real-
time di perangkat Anda. Jika Anda memutuskan sambungan perangkat/emulator, aplikasi akan hilang. Anda
selalu dapat mengembalikannya dengan menghubungkan kembali perangkat, tetapi untuk menjalankan
aplikasi tanpa terhubung ke App Inventor, Anda harus "mengemas" aplikasi tersebut untuk menghasilkan
paket aplikasi (file apk).

Untuk saat ini, langkah terakhir, mengemas aplikasi, hanya berfungsi untuk ponsel Android. Kami secara aktif
berupaya untuk segera menghadirkan kemampuan ini ke perangkat iOS!
Untuk "mengemas" aplikasi untuk dipasang di perangkat Anda atau dikirim ke orang lain, klik tab Bangun di
bagian atas layar. Di bawah Build, ada dua opsi yang tersedia untuk Anda pilih:

1. App (provide QR code): Anda dapat membuat Barcode (Kode QR), yang dapat Anda gunakan untuk
menginstal aplikasi pada perangkat seluler yang memiliki kamera.

barcode ini hanya berlaku selama dua jam. Jika Anda ingin berbagi aplikasi dengan orang lain melalui kode
batang dalam jangka waktu yang lebih lama, Anda perlu mengunduh file .apk ke komputer Anda dan
menggunakan perangkat lunak pihak ketiga untuk mengonversi file menjadi kode batang. Informasi lebih
lanjut dapat ditemukan di sini.

2. App (save to my computer): Anda dapat mengunduh aplikasi ke komputer Anda sebagai file apk, yang
dapat Anda distribusikan dan bagikan sesuka Anda dengan menginstalnya secara manual di perangkat lain
(terkadang disebut "side loading").