MODUL PRAKTIKUM 2

MEMBUAT APLIKASI GAMBAR BICARA MENGGUNAKAN MIT APP INVENTOR

TAHAP PERSIAPAN
1. Buka website MIT App inventor pada google chrome : https://appinventor.mit.edu/
2. Klik Create Apps!
3. Login dengan akun google dan klik I Accept … dan klik Continue saat layar pembuka muncul

TAHAP DESAIN / PERANCANGAN USER INTERFACE (UI) DAN PENGKODEAN

1. Buat projek baru dengan meng-Klik New Project
2. Isi bagian Project Name, dengan nama projek misalnya GambarBicara (tanpa Spasi) > OK

 Perancangan UI dilakukan dengan menggunakan tampilan Designer, yang tampil dengan

mengklik tombol designer pada bagian kanan atas.
 Tampilan Designer App Inventor memiliki empat kolom.
1. Kolom Palette merupakan tempat komponen-komponen yang tersedia dari App Inventor,
2. kolom Viewer merupakan kolom untuk perancangan UI aplikasi,
3. kolom Components berisi komponen-komponen yang digunakan pada proyek,
4. kolom Properties yang merupakan kolom untuk melakukan pengaturan terhadap
komponen-komponen yang digunakan.

Langkah Perancangan User Interface

1. Pada Kolom Pallete bagian User Interface klik dan geser Button ke layar Viewer. Pada Kolom
Properties bagian Text ubah menjadi Klik Disini
2. Ubah Background Screen1 dengan cara klik Screen1 pada Kolom All Component > pilih
BackgroundImage > Upload File > Choose File > pilih File gambar > OK

3. Pada Kolom Pallete bagian User Interface klik dan geser Label ke layar Viewer. Pada Kolom
Properties bagian Text ubah menjadi Proklamasi Kemerdekaan RI > TextColor > White
4. Pada Kolom Pallete bagian Media klik dan geser Player ke layar Viewer. Pada Kolom All
Componen > Klik Player1 > pilih Source > Upload File > Choose File > pilih file mp3 > OK
Tahap Pengkodean
5. Klik bagian Bloks pada bagian kanan samping tombol Designer
Maka akan tampil kolom Bloks dan Viewer
6. Buat Event Button1 yaitu ketika tombol ditekan maka Player akan
memainkan mp3 yang telah diupload, dengan langkah-langkah :
a. Pada kolom Blocks bagian Screen1 > klik Button1 > pada kolom Viewer pilih when
Button1.Click. Klik dan geser ke samping kanan
b. Pada kolom Blocks bagian Screen1 > klik Player1 > pada kolom Viewer pilih call
Player1.Start Klik dan geser tempelkan pada puzzle Button1
7. Simpan project dengan cara klik menu Project > pilih Save Project

TAHAP PENGUJIAN
1. Aplikasi yang kembangkan adalah aplikasi pada mobile phone, maka pengujian idealnya
dilakukan dengan ponsel secara live, dengan langkah-langkah :
a. Sambungkan ponsel dengan komputer menggunakan kabel USB atau wifi / Scan QR-Code
b. Unduh dan install aplikasi MIT AI2 Companion di App Store / Play Store
c. Pada komputer, Klik menu Connect > pilih AI Companion, maka akan muncul kode QR Code
disertai kode . Pada ponsel buka MIT AI2 Companion > masukkan kode tersebut dan klik
Connect With Code atau pilih Scan QR Code lalu Scan QR Code pada komputer
 Tunggu hingga proses konektivitas selesai hingga desain aplikasi tampilan pada ponsel

2. Silakan Tekan tombol Tekan Disini

3. Jika suara yang bunyi sesuai mp3 yang diupload, maka projek Anda berhasil

PUBLIKASI APLIKASI
Aplikasi yang Anda kembangkan dapat diunduh dan dibagikan kepada orang lain dengan cara :
1. Pilih menu Build > pilih Android App (apk) > tunggu proses > klik Download .apk now

2. Aplikasi yang telah di download siap untuk di bagikan dan di install di ponsel lain.
a. Jika dalam penginstallan ponsel tidak mengenali aplikasi tersebut, tetap lanjutkan install.
b. Setelah selesai instalasi, aplikasi dapat langsung digunakan tanpa terhubung lagi dengan
google chrome seperti ketika membuat aplikasi tersebut.