Daftar Isi
Pendahuluan ......................................................................................................................... 2
Persiapan Lab ....................................................................................................................... 4
Konsep Pemprograman dengan Blocky ................................................................................ 5
Mengenal Tampilan App Inventor.......................................................................................... 6
Aplikasi Goyang Wow ........................................................................................................... 7
Aplikasi Mengenal Buah...................................................................................................... 16
Aplikasi Mengenal Buah + Open Another Screen................................................................ 24
Mengenal Buah + Text To Speech ...................................................................................... 26
Game Space Star ............................................................................................................... 28
Editor dan Developers......................................................................................................... 40
Persiapan Lab
Kebutuhan Hardware (Perangkat Keras) Lab Android Dasar:
1. Laptop/PC
2. HP Android
3. USB
4. Internet (HP dan Laptop dalam satu jaringan)
Kebutuhan Software (Perangkat Lunak) :
1. Google Chrome versi >= 50 di Laptop
2. Aplikasi MIT AI Companion di Android (install melalui Play Store)
Aplikasi MIT AI2 Companion
Konsep Pemprograman dengan Blocky
Bahasa pemprograman yang akan kita gunakan untuk membuat program android
sekarang tidak dalam bentuk kode-kode seperti biasanya seperti Bahasa Java.
Perbandingan Bahasa Java dan Blocky
Namun kita akan membuat sebuah aplikasi dengan bahasa pemprograman bernama blocky.
Blocky berasal dari kata block (artinya Balok), adalah sebuha bahasa pemprograman yang
dikembangkan oleh MIT untuk bisa memudahkan semua kalangan untuk dapat belajar
membuat program.
Yap membuat program dengan blocky, kita hanya perlu memindah-mindahkan balok saja
untuk membuat program, menarikan bukan? :)
Untuk melatih dasar-dasar pemprograman dengan Blocky kita akan gunakan Hours of Code
dari [Link]
Yuk dibuka [Link]
Mengenal Tampilan App Inventor
Anda akan melihat tampilan App Inventor dengan mengaksesnya di alamat
[Link] . Maka akan muncul tampilan Welcome Screen.
Halaman awal create project MIT App Inventor
App Inventor terdiri dari tiga bagian penting :
● Component Designer. Digunakan untuk mengatur tampilan aplikasi dan pernak-
perniknya.
● Blocks Editor. Digunakan untuk mengatur interaksi antara user dengan aplikasi. Di
sinilah letak programming nya. Namun karena kode n a sudah dibuat dalam bentuk
blok maka tidak perlu lagi menuliskan kode-kode programming.
● Handphone Android untuk menjalankan secara langsung aplikasi yang sedang
Anda buat.
Halaman kerja MIT App Inventor
Aplikasi Goyang Wow
Sekarang kita akan membuat Aplikasi GoyangWow yaitu sebuah aplikasi android yang akan
mengeluarkan suara apabila hp tersebut kita goyang atau sebuah tombol ditekan.
Bentuk Aplikasi Akhir
Design
Komponen yang akan kita gunakan ada 3 yaitu
Nama Lokasi Deskripsi
Button User Interface Tombol, sebuah komponen
yang dapat menerima
masukan berupa klik
(touch).
TextToSpeech Media Komponen yang berfungsi
untuk mengubah tullisan
(teks) menjadi suara.
Accelorometer Sensor Komponen yang berguna
untuk mengakses sensor
accelorometer di
handphone.
Memasukkan komponen ke Layar
Selanjutnya masukkan komponen-komponen diatas, dengan cara menyeret (drag) icon ke
dalam Screen seperti berikut ini:
Masukkan kompo en yang dibutuhkan yaitu: Button, Accelerometer, dan TextToSpeech
Komponen terdiri dari 2 tipe yaitu:
- Visible Component adalah komponen yang terlihat di layar sebagai alat interaksi
dengan pengguna. Contoh: Button, Label, ImageView
- Non-Visibl Component adalah komponen yang menambahkan fitur dan interaksi ke
aplikasi namun tidak tampil di layar/tampilan (User Interface). Contoh: Sensor
Accelorometer, Sound, TextToSpeech
Beri Nama Komponen
Beri nama setiap komponen dengan klik button Rename
Versi Camel Case
- ButtonSuara
- TeksKeSuara
- SensorGoyang
Versi Snake
- button_suara
- teks_ke_suara
- sensor_goyang
Anda dapat memilih salah satu versi penamaan di atas.
Kita mengenal 3 komponen baru, mari kenali lebih jauh property (sifat) yang dimiliki
Nama Property Deskripsi
Button Warna Background dari
Komponen
Menentukan apakah
komponen dapat digunakan
atau tidak
Mengatur apakah tulisan
akan dicetak Bold (Tebal),
Italic (Miring). Mengatur
Font Size (besar kecilnya
ukuran Huruf), dan
FontTypeFace (tipe font
yang akan digunakan)
Mengatur ukuran, apakah
otomatis menyesuaikan
ukuran, berapa persen dari
layar (percent), atau
memenuhi layar/komponen
induk (fill_parent)
Tempat mengubah button
menjadi gambar, anda bisa
mengisi gambar di sini
Untuk merubah bentuk
button apakah oval atau
kotak.
Untuk mengatur apakah
akan ada efek seperti lik
atau tidak saat button
ditekan.
Mengatur isi tulisan dan
format yang berada di dalam
button (tombol).
Mengatur apakah komponen
terlihat di layar atau tidak.
TextToSpeech Mengatur suara sesuai
negara yang dipilih.
Mengatur bahasa yang akan
digunakan.
Mengatur tingkat tinggi
rendahnya suara.
Mengatur kecepatan
membaca.
Accelorometer Mengatur jarak antar
pembacaan sensor
akselerometer.
Mengatur kepekaan sensor
accelerometer.
Edit Property Setiap Komponen Sebagai Berikut
Nama Property Value
Button default default
TextToSpeech default default
Accelorometer default default
*default = artinya biarkan property seperti yang sudah ada (tidak perlu diedit)
Block
Kita mempunyai 3 komponen baru seperti berikut ini:
Nama Lok asi Deskripsi
[Link] Button Sebuah block dimana
akan melaksakan
perintah ketika sebuah
button (tombol)
ditekan.
[Link] TextToSpeech Mengubah teks
menjadi suara.
[Link] Accelerometer Sebuah komponen
yang akan
menjalankan perintah
apabila akselerometer
merasakan goyangan
(shake).
Text Text Tempat teks dapat di
isi.
Logika program akhir adalah sebagai berikut
Cara memasukkan hanya tinggal buka komponen yang dibutuhkan, ambil fungsi yang ada,
dan seret ke layar. Fungsi bisa dimasukkan ke fungsi lainnya (contoh [Link]
dimasukkan ke dalam [Link])
Aplikasi bisa dicoba menggunakan MIT AI2 Companion atau Download APK dengan Build.
Aplikasi Mengenal Buah
Kita akan membuat sebuah aplikasi yang mempun ai tampilan empat buah. Dimana apabila
buah ini ditekan (diklik), makan akan keluar suara anak kecil menyebut nama buah tersebut.
Bentuk Aplikasi Akhir
Design
Komponen yang akan kita gunakan ada 3, yaitu:
Nama Lokasi Deskripsi
Button User Interface Tombol, sebuah komponen
yang dapat menerima
masukan berupa klik
(touch).
HorizontalArrangement Layout Komponen yang berfungsi
mengatur kerapian
komponen secara horizontal
(mendatar)
Sound Media Komponen yang berguna
untuk memainkan suara
(sound).
Merapikan dengan Horizontal Layout
Secara bawaan (default), komponen yang akan kita masukkan ke dalam screen akan
dirapikan secara menurun (vertical)
Komponen dirapikan secara menurun (vertikal)
Apabila kita ingin membuat mendata (horizontal) kita membutuhkan yang namanya
HorizontalArrangement.
Komponen dirapikan secara mendatar (horizontal)
Cara yang dapat dilakukan adalah dengan memasukkan komponen Horizontal Layout
terlebih dahulu, lalu memasukkan button ke dalam Horizontal Layout tersebut.
Masukkan 2 komponen HorizontalLayout, 4 Button, dan 4 Sound seperti di bawah ini
Ganti Nama Komponen
Beri nama setiap komponen dengan klik button Rename
1. Horizontal rrangeme t1
a. btn_apel
b. btn_alpukat
2. Horizontal rrangeme t2
a. btn_ceri
b. btn_durian
3. suara_ape
4. suara_alpukat
5. suara_ceri
6. suara_durian
Edit Property
Edit property setiap komponen seperti berikut ini:
Nama Property Value
Button (semua) Height 50 percent
Width 50 percent
Image (upload gambar buah)
Text (kosong)
HorizontalArrangement Height 50 percent
(semua)
Width fill_parent
Sound (semua) Source (upload suara)
Upload Media
Upload gambar/suara/media dapat dilakukan langsung saat mengedit property setiap
komponen atau upload dulu di media.
Upload Melalui Media
Jangan lupa teks pada komponen button dihilangkan agar tidak terlihat dan hanya terlihat
gambar buah saja.
Block
Kita mempunyai 3 komponen baru seperti berikut ini:
Nama Lok asi Deskripsi
[Link] Sound Sebuah komponen
untuk memainkan
suara.
Logika program akhir adalah sebagai berikut
Aplikasi Mengenal Buah + Open Another
Screen
Tahap ini merupakan pengembangan dari tahap mengenal buah sebelumnya yaitu dengan
mambahkan deskripsi setiap buah di screen yang berbeda.
klik Add Screen
Ketik nama screen sesuai dengan nama buah yang akan ditampilkan
Maka akan muncul tampilan screen yang baru. Seperti pada tahap sebelumnya, kita
tambahkan layout HorizontalArrangement, Label dan Button. Label ini digunakan untuk
menambahkan text deskripsi dari setiap buah.
Width dari HorizontalArrangement dibuat Fill Parent agar ukurannya sesuai dengan layar.
Selanjutnya buat screen seperti diatas pada setiap buah.
Block
Agar buah pada screen utama ketika di klik dapat mengeluarkan suara dan berpindah ke
screen deskripsi, maka ditambahkan logika “open another screen screenName” yang
akan berpindah sesuai dengan text yang diinputkan. Sebelum ya kita telah membuat screen
dengan nama “apel” maka kita ketikkan apel dalam blok text. Nama screen yang diinputkan
harus sama dengan nama screen yang dibuat.
Agar screen deskripsi dapat kembali ke screen ut ma, maka kita tambahkan logika “Back
Pressed”.
Lakukan pada setiap screen buah. Yey! kita sudah bisa membuat halaman screen deskripsi
setiap buahnya :)
Mengenal Buah + Text To Speech
Kita sudah membuat halaman screen deskripsi setiap buahnya. Nah bagaimana kalau
deskripsi setiap buahnya di baca oleh mesin melalui suara? kita dapat menggunakan fitur
text to speech yang hampir disetiap smartphone telah ada fitur tersebut. Drag text to
speech ke screen setiap buahnya.
Karena Text to Speech pada App Inventor belum mendukung bahasa Indonesia, maka kita
dapat menggunakan option Negara dan Bahasa yang suaranya hampir sama dengan
bahasa Indonesia, yaitu Country = ESP dan Languange = de
Block
Ketika gambar buah di klik, maka fungsi text to speech akan membaca deskripsi buah.
Lakukan pada setiap screen buah.
Game Space Star
Kali ini kita akan membuat sebuah game sederhana yang bertujuan untuk menembak ufo,
untuk mendapatkan score sebanyak mungkin.
Bentuk Game Akhir
Design
Komponen baru yang akan di butuhkan sebagai berikut :
Nama Lokasi Deskripsi
Canvas Drawing and Animation Canvas, sebuah komponen
segi empat yang sensitif dan
dapat di gunakan untuk
menggambar atau membuat
objek bergerak didalamnya..
ImageSprite Drawing and Animation Komponen yang hanya
dapat di gunakan di dalam
canvas yang dapat bereaksi
terhadap touch atau drag
BallSprite Drawing and Animation Komponen yang hanya
dapat di gunakan juga di
dalam canvas, dan dapat
bereaksi juga terhadap
touch, drag, dan juga
terhadap antar sprites
Clock Komponen yang tidak
terlihat yang diguankan
untuk mengatur waktu .
Mengatur Layout Canvas
Secara bawaan segala komponen yang kita inputkan dapat kita posisikan secara bebas,
karena di dalam canvas menggunakan koordinat (X,Y,Z). Sebelumnya kita perlu mengatur
Width dari Canvas menjadi “Fill Parent” dan Height menjadi 300px, setelah itu kita perlu
menambahkan 2 ImageSprite dan BallSprite kedalam canvas.
Setelah itu uploa file gambar untuk background canvasnya, dan atur BackgroundImage
“[Link]”.
Mengatur Sprites
Setelah kita mengatur canvasnya, kita perlu mengatur pula sprites yang kita butuhk n untuk
project ini.
1. Rocket
● Upload gambar rocket dengan menguploadkan file “[Link]”.
● Atur ukuran roket dengan cara mengatur Height menjadi 70 px dan Width 50 px.
● Kita perlu mengatur properties Y menjadi 230 agar letak dari dari object roketnya
berada di b
agian bawah dari canvas.
2. UFO
● Upload gambar UFO degnan menguploadk an file “[Link]”.
● Atur ukuran UFO dengan cara mengatur Height menjadi 70 px dan Width 80px.
● Atur posisi ufo berada di bagian atas canvas.
3. Ball Sprites
● Ganti ukuran BallSprites dengan cara mengatur Radius menjadi 8.
● Ganti PaintColor dari BallSprites menjadi Red.
● Posisikan BallSprites sesuai keinginan.
Setelah kita selesai mengatur layout yang ada dalam canvas, berikutnya ta mbahkan
komponen lainnya yaitu Clock dan atur TimeInterval menjadi 3000.
Mengatur Layout Score
Beberapa hal yang kita butuhkan untuk mengatur layout score adalah, VerticalArrangement,
HorizontalArrangement, 2 buah Label, dan Button.
1. VerticalArrangement
● Tambahkan komponen VerticalArrangement kedalam screen.
● Atur Height dan Width menjadi Fill Parent.
● Atur AlignHorizontal menjadi Center.
2. Horizontal Arrangement
● Tambahkan komponen HorizontalArrangement kedalam VerticalArrangement.
● Atur Width menjadi Fill Parent.
● Atur AlignHorizontal menjadi Center .
3. Label1
● Tambahkan komponen Label kedalam HorizontalArrangement.
● Tulis Text “SCORE:” dancentang FontBold.
● Atur FontSize menjadi 14.
4. Label2
● Tambahkan 1 lagi komponen Label kedalam HorizontalArrangement.
● Tulis Text “0” dancentang FontBold.
● Atur FontSize menjadi 14.
5. Button
● Upload gambar tombol reset dengan menguploadkan file “[Link]”.
● Atur ukuran Button dengan cara mengatur Height menjadi 50 px dan Width 50
px.
Berikut ini hasil layout sesuai dengan keterangan sebelumnya:
Menambahkan Sound
Setelah kita selesai mengatur seluruh layoutnya (Canvas da n Score), berikutnya kita perlu
menambahkan komponen terakhir yaitu Sound. Langkah-langkahnya seperti berikut ini:
● Tambahkan 2 buah komponen sound kedalam screen.
● Setelah itu upload file raygun.mp3 dan Hit.mp3.
1. Sound1
● Pilih Source sou nd raygun.mp3
2. Sound2
● Pilih Source sou nd Hit.mp3
Edit Property Setiap Komponen Sebagai Berikut
Nama Property Value
Canvas (Canvas) Height 300 pixels
Width Fill Parent
BackGroundImage (upload gambar space)
ImageSprite (RocketSprite) Height 70 pixels
Width 80 pixels
Picture (upload gambar roket)
Y 230
ImageSprite (UFOSprite) Height 70 pixels
Width 80 pixels
Picture (upload gambar ufo)
BallSprite (Bullet) Radius 8
PaintColor Red
Clock TimeInterval 3000
VerticalArrangement Height Fill Parent
Width Fill Parent
AlignHorizontal Center
HorizontalArrangement Height Automatic
Width Fill Parent
AlignHorizontal Center
Label (ScoreLabel) Text Score:
FontBold yes
FontSize 14
Label (ScorePoint) Text 0
FontBold yes
FontSize 14
Button (BtnReset) Height 50 pixels
Width 50 pixels
Image (uplaod gambar reset)
Clock TimeInterval 3000
Sound Source (upload suara )
Block
Logika program akhir sebagai berikut:
1. Agar BallSprite(Bullet) pada saat aplikasi pertama kali di nyalakan tidak terlihat
maka kita arus membuat agar BallSprite( Bullet) agar tidak terlihat.
2. Setelah itu agar ImageSprite(Rocket) dapat kita gerakkan kenan dan kesamping
kita perlu mengatur perubahan arah horizontalnya ( X ).
3. Agar gambar ImageSprite(Rocket) dapat menembak kan Bullet, kita harus
membuat kondisi, dimana ketika Rocket TouchUp maka Bullet harus terlihat dan
bergerak dan suara raygun di putar.
4. Berikutnya setelah rocket bisa menembakkan bullet, maka ada kondisi ketika bullet
menabrak suatu objek, maka Label(ScorePoint) harus bertambah 1, lalu memutar
suara Hit.
5. Berikutnya kita perlu membuat sebuah kondisi dimana ketika bullet mencapai batas
atau ujungdari canvas, bullet harus menjadi tidak terlihat.
6. Agar permainan menjadi semakin seru, berikutnya buat agar ImageSprite(U FO),
agar dapat bergerak kekanan dan kekiri.
7. Hal terakhir yang kita perlukan berikutnya adalah, mengatur agar Button(Re set)
dapat mereset nilai dari Label (ScorePoint) menjadi 0.
8. Dan akhirnya game Space Star kita jadi, dan kita bisa memainkannya!! Selamat
mencoba!
Block Akhir