See discussions, stats, and author profiles for this publication at: https://www.researchgate.

net/publication/324745475

MEMBUAT APLIKASI ANDROID DENGAN MIT APP INVENTOR 2

Book · April 2018

CITATIONS READS

0 4,869

1 author:

Puput Dani Prasetyo Adi

Universitas Merdeka Malang
7 PUBLICATIONS   1 CITATION   

SEE PROFILE

Some of the authors of this publication are also working on these related projects:

SISTEM PENDETEKSI GEMPA LAUT DAN TSUNAMI DINI JARAK JAUH MENGGUNAKAN TEKNOLOGI MIKROKONTROLLER ATMEGA 328P DAN VIBRATION SENSOR DENGAN
SISTEM PENGIRIMAN DATA BERBASIS GSM SIM900A View project

Temperature And Humidity Control System In The Broiler Chicken Coop Using ATmega 328P Microcontroller And Fuzzy Logic Mamdani Method With MATLAB View
project

All content following this page was uploaded by Puput Dani Prasetyo Adi on 25 April 2018.

The user has requested enhancement of the downloaded file.

 MEMBUAT APLIKASI ANDROID

DENGAN MIT APP INVENTOR 2

Oleh :

PUPUT DANI PRASETYO ADI, S.KOM, M.T

1|Membuat Aplikasi Android Mudah dengan AppInventor2

Ada 2 versi MIT App Inventor 2, yaitu versi online dan versi offline.

Alamat MIT App Inventor 2 online :

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

Alamat MIT App Inventor 2 Offline versi installer,

Untuk OS Windows 32 Bit :
https://sourceforge.net/projects/ai2u/files/ai2u%202.4/AI2U%2032bit%20v2.4.exe
/download
Untuk OS Windows 64 Bit :
https://sourceforge.net/projects/ai2u/files/ai2u%202.4/AI2U%2064bit%20v2.4.exe
/download
Untuk alamat MIT App Inventor 2 offline versi Portable :
Untuk Portable 32 Bit :
https://sourceforge.net/projects/ai2u/files/ai2u%202.4/portable%20AI2U%2032bit
%20v2.4.zip/download
Untuk Portable 64 Bit :
https://sourceforge.net/projects/ai2u/files/ai2u%202.4/portable%20AI2U%2064bit
%20v2.4.zip/download

Tampilan dari MIT App inventor 2

Untuk tampilan, kita bisa melihat pada gambar dibawah ini.

Gambar 01. Tampilan MIT App Inventor 2 versi Online / Cloud

2|Membuat Aplikasi Android Mudah dengan AppInventor2

Perlu diketahui bahwa MIT Appinventor menggunakan bahasa pemrograman dengan Tipe
Blok. Jadi dalam penyusunan pemrogramannya menggunakan blok-blok program.

Tampilan programnya seperti dibawah ini :

Gambar 02. Tampilan Blocks Program Spell.apk

Memunculkan emulator

Emulator adalah tampilan simulasi smartphone yang akan kita gunakan

untuk menampilkan hasil kerja kita di MIT Appinventor.
Untuk mendapatkan emulator kita install aplikasi
MIT_App_Inventor_Tools_2.3.0_win_setup, untuk mendapatkan aplikasi ini
sangat mudah, tinggal memasukkan kata kunci pada google seperti dibawah
ini :

3|Membuat Aplikasi Android Mudah dengan AppInventor2

 Gambar 08. Pencarian Google untuk MIT App Inventor tools_2.3.0

Atau download pada link berikut :

https://onedrive.live.com/?authkey=%21AO3XZuulwxqlKAc&cid=B2B68218E4
EF2EB4&id=B2B68218E4EF2EB4%211613&parId=B2B68218E4EF2EB4%211036&
action=locate

Untuk instalasi sangat mudah, klik 2 kali pada aplikasi, maka akan muncul
tampilan dibawah ini :

4|Membuat Aplikasi Android Mudah dengan AppInventor2

 Gambar 09. Aplikasi MIT App Inventor Tools 2.3.0 Setup

Gambar 10. Tampilan License Agreement MIT AppInventor

Klik button I Agree, lanjutkan instalasi seperti biasa sampai selesai.

Apabila proses instalasi sudah finish, tinggal kita melihat Folder hasil
instalasi MIT Appinventor 2 yang berhasil diciptakan saat proses instalasi,
seperti dibawah ini :

5|Membuat Aplikasi Android Mudah dengan AppInventor2

 Gambar 11. Installation Place folder for AppInventor

Klik 2 kali folder untuk melihat isinya, kita bisa melihat isi folder
Appinventor seperti dibawah ini :

Gambar 12. Tampilan isi Appinventor

Untuk menjalankan klik 2 kali aiStarter atau klik kanan -> Open atau kita
bisa temukan pada desktop icon.

Gambar 13. aiStarter Running Status Process

6|Membuat Aplikasi Android Mudah dengan AppInventor2

 Untuk menjalankan simulator kita bisa memilih menu Connect -> Emulator
pada bidang kerja kita.

Gambar 14. Klik Konek emulator untuk menjalankan emulator

Tampilan emulatornya seperti dibawah ini

Gambar 15. Emulator 5554 Start <build>

7|Membuat Aplikasi Android Mudah dengan AppInventor2

Project Pertama “Spell.apk”

“Mengubah Teks Menjadi Suara melalui textbox ”

Langkah-langkah dari project ini sederhana, mari kita lihat langkah berikut :
1. Buka MIT Appinventor seperti tampilan dibawah ini :

Gambar 03. Tampilan MIT App Inventor 2

2. Klik Button Start new Project pada sebelah kiri tampilan MIT App
Inventor 2.

Gambar 04. Tampilan Jendela Create new App Inventor Project

Tulislah Project Name pada teksbox yang sudah disediakan kemudian Klik
OK

Gambar 05. Pengisian Project Name

8|Membuat Aplikasi Android Mudah dengan AppInventor2

 3. Maka akan muncul tampilan berikut :

Gambar 06. Tampilan Bidang Kerja pertama kita

Tempatkan button1 dan textbox1 pada bidang kerja, seperti tampilan

dibawah ini

Gambar 07. Tampilan pada Screen1

Selanjutnya ubah pada Text for Button1, Pilih menu pada sebelah kanan
dan ubah pada Teks. Kemudian lihat sebelah kanan atas menu Blocks
untuk berpindah ke tampilan blocks programmingnya.

9|Membuat Aplikasi Android Mudah dengan AppInventor2

 Gambar 08. Mengubah Button name dan menuju ke blocks

Gambar 09. Tampilan Built-in Block

Setelah masuk ke tampilan Blocks, kita sudah mendapatkan banyak tipe blocks
programming yang berupa control, Logic, Math, Text, Lists, Colors, Variables dan
Procedures. Arahkan ke Screen 1 untuk melihat Button1 dan textBox1.

Bila kita pilih Screen1 -> Button1 maka viewer akan menunjukkan blocks yang bisa
dipilih untuk menu Button1, demikian juga untuk textbox1.

10 | M e m b u a t A p l i k a s i A n d r o i d M u d a h d e n g a n A p p I n v e n t o r 2
 Gambar Block Programming Button1

Gambar Block Programming TextBox1

11 | M e m b u a t A p l i k a s i A n d r o i d M u d a h d e n g a n A p p I n v e n t o r 2
Bila kita tambahkan dengan teks spelling, maka tampilannya adalah seperti
dibawah ini, pilih media -> teks to Speech

Gambar TextToSpeech pada Menu Media

Tarik pada bidang kerja maka textToSpeech akan muncul seperti gambar dibawah
ini

Gambar TextToSpeech1 sudah di inputkan pada Bidang Kerja

Apabila textToSpeech sudah kita tempatkan dibidang kerja, lanjutkan untuk

melihat di bagian blocks

Gambar Block Programming pada TextToSpeech1

12 | M e m b u a t A p l i k a s i A n d r o i d M u d a h d e n g a n A p p I n v e n t o r 2
Pilihlah Call TextToSpeech1.Speak, seperti tampilan dibawah ini …

Gambar Block Progam Spelling teks

Arti dari program diatas adalah jika Button1 di Tekan yang dilakukan adalah
TextToSpeech1 akan berbicara sesuai dengan Pesan yang dituliskan pada textBox1.

Langkah berikutnya adalah menjalankan emulator, dengan memilih menu Connect

-> emulator, jangan lupa jalankan terlebih dahulu aiStarter nya.

Kalau belum dijalankan maka akan ada peringatan tampilan seperti dibawah ini

Gambar tampilan aiStarter belum di jalankan

Apabila aiStarter sudah dijalankan, maka akan muncul tampilan berikut

Dan berselang beberapa menit akan muncul emulatornya, seperti tampilan

dibawah ini :

13 | M e m b u a t A p l i k a s i A n d r o i d M u d a h d e n g a n A p p I n v e n t o r 2
 Gambar emulator running

Kemudian akan muncul project spelling yang kita buat sebelumnya otomatis
terdapat pada emulator, seperti pada tampilan dibawah ini

Gambar Project yang berhasil di jalankan di emulator

Untuk menjalankan, masukkan hint for textbox1 kemudian tekan Spelling, dengar
suara yang dihasilkan, pasti sesuai dengan teks yang dimasukkan.

14 | M e m b u a t A p l i k a s i A n d r o i d M u d a h d e n g a n A p p I n v e n t o r 2
 Project 2 “Mengubah Teks Menjadi Suara Bagian 2”.

Membuat Project Talk To Me melalui text komponen

Buatlah Block Programming pada Bagian Block seperti berikut :

Arti Block diatas adalah :

“ Jika Button1 di tekan maka yang dilakukan adalah Komponen
TextToSpeech1 akan mengatakan sesuai dengan teks atau message yang
ditulis, seperti pada coding diatas, message = “ Danny How Are You Today?
” ”. maka tinggal kita klik Button Talk To Me pada emulator, maka akan
mengatakan sesuai dengan Message yang dituliskan.

Gambar GUI Talk To Me pada Android Smartphone emulator

15 | M e m b u a t A p l i k a s i A n d r o i d M u d a h d e n g a n A p p I n v e n t o r 2
Project 3 “ Menggunakan Accelerometer Sensor ”

Fungsi dari project 3 ini adalah mencoba membuat aplikasi jika handphone atau
smartphone kita goyang maka smartphone akan berbunyi sesuai dengan text pada
block programming yang kita tuliskan.

Khusus project 3 ini kita perlu menggunakan smartphone beneran kita untuk
percobaan bukan emulator.

Buatlah block program seperti dibawah ini :

Apabila smartphone kita gerakkan atau digoyang-goyang maka akan ada pesan
suara berbunyi “Stop Shaking me ! ”.

16 | M e m b u a t A p l i k a s i A n d r o i d M u d a h d e n g a n A p p I n v e n t o r 2
 Project 04. Ball Bouncing atau Bola melambung

Pada tutorial kali ini, kita akan membuat awal mula game sederhana menggunakan
bola. Bagaimana cara membuatnya, mari kita lihat langkah – langkah dibawah ini :

Pertama kita ambil komponen pada Drawing and Animation -> Ball

17 | M e m b u a t A p l i k a s i A n d r o i d M u d a h d e n g a n A p p I n v e n t o r 2

View publication stats