Kemal Muhammad Hariwibawa

It's Time Capsule for my Stories

Tutorial Instalasi Offline AppInventor & Membuat

Aplikasi Android Pemutar Musik

Posted on November 13, 2014 by kemalmuhammadhariwibawa

2

Selamat datang di blog saya, kali ini saya akan menjelaskan bagaimana cara menginstall
AppInventor secara oine. Perlu diketahui AppInventor adalah sebuah aplikasi berbasis drag n
drop yang di develop oleh MIT bersama Google untuk membuat suatu aplikasi android, dan ini
sangatlah mudah digunakan

Hal pertama yang harus kalian lakukan adalah mendownload 2 le dibawah ini, yang satu untuk
instalasi emulator android dan yang satu lagi untuk aplikasi AppInventor itu sendiri, oh ya pastikan
juga di komputer/laptop kalian sudah terinstal Java jdk versi 1.7 dan atau 1.8 ya :

AppInventor (h ps://drive.google.com/le/d/0B7t2jVfonddZcjZPWU9pdDFpNkE
/view?usp=sharing (h ps://drive.google.com/le/d/0B7t2jVfonddZcjZPWU9pdDFpNkE
/view?usp=sharing))
Emulator Android ()

Kemudian Install emulator android nya, tinggal klik-klik next aja kok, setelah selesai maka akan
terinstall di C:/Program Files/AppInventor seperti gambar di bawah ini
(h ps://kemalmuhammadhariwibawa.les.wordpress.com/2014/11/1.png)Setelah itu kita akan
menambahkan JAVA_HOME pada environment variables dengan cara klik kanan pada my
computer>pilih properties>lihat bagian kiri, klik advanced system se ings>pilih environment
variables pada kanan bawah. Sehingga muncul dialog window seperti dibawah ini

(h ps://kemalmuhammadhariwibawa.les.wordpress.com/2014/11/3.png)

pada system variables klik new dan beri nama JAVA_HOME dan beri value sesuai dengan path java
jdk 1.7 yang sudah diinstal

(h ps://kemalmuhammadhariwibawa.les.wordpress.com/2014/11/4.png)

kemudian pada user variable for nama user klik 2x pada path dan masukkan path java jdk 1.7 yang
tadi dimasukkan sebelumnya di baris paling akhir, jangan lupa beri tanda ; sebelum memasukkan
path java jdk
(h ps://kemalmuhammadhariwibawa.les.wordpress.com/2014/11/5.png)

Setelah semua beres klik ok dan ok. Kemudian Extract lah le .zip AppInventor yang telah kalian
download, terserah mau dimana di extractnya. Setelah di extract, buka AppIn>AppEngine dan klik
kanan startAI pilih run as administrator

(h ps://kemalmuhammadhariwibawa.les.wordpress.com/2014/11/2.png)Kemudian sebuah console

akan keluar dan tunggulah beberapa saat, hingga tampilannya seperti ini

(h ps://kemalmuhammadhariwibawa.les.wordpress.com/2014/11/capture.png)

sehingga ada tulisan INFO: Dev App Server is now running

Setelah itu buka browser kalian dan ketik pada bar, localhost:8888, kemudian isi beberapa form
disana, ada email dan kemudian klik klik saja yang ada disana hingga tampilannya seperti dibawah
ini

(h ps://kemalmuhammadhariwibawa.les.wordpress.com/2014/11/6.png)Setelah website bisa

dibuka maka kalian telah berhasil meng-Install AppInventor secara oine

Kemudian kita akan membuat suatu aplikasi sederhana yang apabila kita men-click tombolnya maka
aplikasi tersebut akan memutar sebuah lagu. Cara yang pertama dilakukan adalah men-click tombol
new dan beri nama project kalian. Kemudian tampilan browser kalian akan seperti ini
(h ps://kemalmuhammadhariwibawa.les.wordpress.com/2014/11/6.png)

(h ps://kemalmuhammadhariwibawa.les.wordpress.com/2014/11/7.png)Karena kita akan

membuat suatu aplikasi sederhana, yaitu apabila sebuah tombol ditekan maka sebuah musik akan
ter play. Oleh karena itu pada Pale e sebelah kiri klik and drag Bu on pada Basic dan klik and
drag Player pada Media.
(h ps://kemalmuhammadhariwibawa.les.wordpress.com/2014/11/8.png)Ubah nama value dari
bu on1 pada Properties sebelah kanan dan lihat ada kolom Text, ganti Text for Bu on1 menjadi
Play/Pause. Kemudian pada kolom Components disebelah kanan, klik Player1 dan pada
propertiesnya, klik form source dan akan muncul dialog baru dan kalian masukkan lagu yang ingin
diputar Upload new>Choose File> OK

Setelah selesai semua , klik Open the Block Editor pada kolom kanan atas dan nanti akan muncul
dialog box untuk menyimpan le dengan format .jnlp, save dimana saja le itu untuk membuka
block editor aplikasi nantinya

(h ps://kemalmuhammadhariwibawa.les.wordpress.com/2014/11/9.png)Setelah le berhasil di
download, jangan langsung dibuka. Karena kita harus memberi exeception pada Java sehingga bisa
menjalankan le yang self-signed, caranya dengan search Congure Java pada komputer anda
dengan memanfaatkan fungsi search, kemudian klik tab security pada exception site list
masukkanlah h p://localhost:8888&#8217 (h p://localhost:8888&#8217); setelah selesai klik ok ok
dan buka lah le yang tadi di download
(h ps://kemalmuhammadhariwibawa.les.wordpress.com/2014/11/10.png)

pada saat membuka le akan ada sebuah warning, lewati warning tersebut dengan men check I
accpet. lalu klik run. Dan sebuah tampilan seperti dibawah ini akan muncul

(h ps://kemalmuhammadhariwibawa.les.wordpress.com/2014/11/11.png)

Ini adalah tampilan logika (kalau menurut saya) sebuah aplikasi yang telah kita buat dengan berbasis
blok blok seperti puzzle anak TK, dan ini digunakan sebegai pengganti coding saat membuat
aplikasi. Cara membacanya pun sangatlah gampang.

Ok untuk membuat aplikasi pemutar musik, kita pilih My Block pada sisi sebelah kiri. Kemudian
kalian akan melihat tulisan My Denitions, Bu on1, Player1,Screen1. klik Bu on1 dan akan
muncul beberapa pilihan

(h ps://kemalmuhammadhariwibawa.les.wordpress.com/2014/11/12.png)

jangan bingung dan jangan panik, block block tersebut mudah dibaca, coba baca dan pahami
sebentar. ok kita akan menggunakan block paling atas yang artinya Apabila Bu on1 di click makan
akan dilakukan/terjadi.. klik and drag block itu ke dalam canvas disebelah kanan.

setelah itu klik Built-In pada menu sebelah kiri dan pilih Control drag block ifelse dan masukkan
pada blok Bu on1 yang telah dimasukkan sebelumnya
(h ps://kemalmuhammadhariwibawa.les.wordpress.com/2014/11/13.png)

ini seperti if else pada bahasa pemrograman, cara membacanya Apabila .(suatu kondisi) makan
lakukan.selain itu laukan..). Logika yang akan kita pakai yaitu, apabila musik belum terputar
makan lakukan pemutaran musik, selain itu matikan musik.

Pilih Logic dan klik and drag block ke 4 atau block yang berwarna hijau, kemudian pasangkan pada
block if else di paling atas, kemudian klik My Blocks pilih Player1 dan pilih block Player1.IsPlaying
dan pasangkan pada block yang sebelumnya sudah dimasukkan dan masukkan block False yang
bisa ditemukan di menu Logic. Tampilan sementara Block kalian adalah seperti ini

(h ps://kemalmuhammadhariwibawa.les.wordpress.com/2014/11/14.png)

yang kalau dibaca Apabila Player1.IsPlaying = False atau Apabila lagu pada Player1 tidak diputar
maka tambah block pada Player1 yaitu call Player1.Start dan pasangkan pada block if else
then-do kemudian ambil block call Player1.Pause pada block Player1 dan pasangkan pada kolom
else-do seperti ini adalah tampilan block terakhir kalian
(h ps://kemalmuhammadhariwibawa.les.wordpress.com/2014/11/15.png)

bila dibaca seperti ini, saat Bu on1 di click maka dia akan melakukan pemutaran musik apabila
musik tersebut berhenti (tidak diputar) dan atau pemberhentian musik apabila musik itu terputar.

Setelah beres lihat kanan atas layar kalian maka kalian akan menemukan tombol new emulator dan
Connect to Device

(h ps://kemalmuhammadhariwibawa.les.wordpress.com/2014/11/16.png)

untuk mecoba menjalankan aplikasi ini, kita harus membuat emulator android dulu dengan men
click new emulator, tunggu beberapa saat sehingga ada window baru muncul dan tunggu hingga
Android tersebut selesai booting

(h ps://kemalmuhammadhariwibawa.les.wordpress.com/2014/11/17.png)
Setelah emulator android ready, klik tombol Connect to Device dan pilih emulator-5554 yang artinya
aplikasi yang telah kita buat akan di coba di emulator android yang telah dibuka sebelumnya, tunggu
beberapa saat hingga tampilan emulatir menjadi seperti ini

(h ps://kemalmuhammadhariwibawa.les.wordpress.com/2014/11/18.png)

wah tampilannya seperti yang kita lihat pada saat pembuatan aplikasi ya hehehhe dan apabila
tombol Play/Pause di klik maka musik akan terputar wuhuuuuu, dan apabila musik sudah terputar
dan kalian klik tombol Play/Pause itu kembali maka musik akan berhenti, YEAH!!
SELAMAT KAMU BERHASIL MEMBUAT APLIKASI ANDROID PERTAMAMU !

Sekian tutorial dari saya, semoga bermanfaat Terima Kasih

 POSTED IN KULIAH, MATRIKULASI SEAMOLEC | TAGGED ANDROID, APPINVENTOR,
TUTORIAL

2 thoughts on Tutorial Instalasi Offline AppInventor &

Membuat Aplikasi Android Pemutar Musik

1. Cindy V
MARCH 29, 2016 AT 12:16 AM
ini masih app inventor old ya?? kalau cara instal app inventor 2 apakah sama??

Reply
kemalmuhammadhariwibawa
MARCH 29, 2016 AT 12:24 AM
kalau untuk app inventor 2 kurang tau untuk instalasi oine, tapi kalau untuk online tinggal
menuju link h p://ai2.appinventor.mit.edu/ . menurutku lebih enak yang online sih

Reply

Blog at WordPress.com. The Ever After Theme.