Anda di halaman 1dari 13

Instalasi App Inventor pada Windows

Ada dua cara untuk menggunakan membuat Aplikasi Android menggunakan App Inventor, yaitu
secara Online maupun offline. Kali tutorial kali ini kita akan membahas cara Instalasi App
Inventor offline pada windows. Yang harus kita persiapkan antara lain : Java SDK, App
Inventory Bundle, dan yang terakhir App Inventor Setup Installer. Pada tutorial ini saya
menggunakan beberapa resource denga versi sebagai berikut :
App Inventor Bundle versi 1.4.7 yang berisi engine dari App Inventor.
Java SDK versi versi 1.7. Disarankan versi 1.7, karena jika memakai versi 1.8 nantinya tidak
akan bias membuka fitur Blocks pada App Inventor.

App Inventor Setup Installer versi 1.2 yang akan kita gunakan sebagai Android Emulator.
Instal terlebih dahuli Java SDK pada perangkat computer Anda, disarankan Java versi 1.7. Install
seperti biasa, kemudian masuk ke My Computer > Advanced System Settings > Environment
Variables, kemudian buat System variable baru dengan nama JAVA_HOME, masukan direktori
dimana Java JDK terinstall, misalnya seperti berikut :

Lalu set juga pada System Variable Path, edit kemudian tambahkan path JDK ditambah dengan
direktori bin, sehingga variablenya seperti berikut :

Jika sudah, klik OK. Selanjutnya ekstrak App Inventor engine tadi di sembarang direktori.

Jika sudah di ekstrak, buka folder AppEngine, kemudian klik kanan pada file StartAI pilih Run
As Administrator.

Pastikan keterangan Server Running tertampil pada startAI tersebut.

Sampai tahap ini kita telah menjalankan Server untuk App Invertor, selanjutnya silahkan akses
alamat localhost:8080 pada web browser.

Karena kita masuk dalam keadaan offline (localhost), pada bagian login biarkan saja default.
Klik Login sehingga akan tampil jendela seperti berikut :

Sampai tahap ini Anda telah berhasil menginstall App Inventor pada computer Anda. Selanjutnya
kita akan membuat sebuah Project baru untuk melihat apakah emulatornya bejalan dengan baik
atau tidak. Pilih new kemudian masukan nama project Anda

Jika selesai, klik OK kemudian akan masuk pada jendela Desain seperti berikut :

Ini adalah jendela untuk menambahkan komponen-komponen user interface dan beberapa fungsi
sederhana yang akan kita gunakan dalam pembuatan aplikasi. Kita akan membuat sebuah
pemutar MP3 sederhana, sehingga kita membutuhkan Tombol Button dan sebuah komponen
media player yang harus ditambahkan pada aplikasi tersebut. Pada Palette basic drag-n-drop
Button pada Screen1 seperi pada gambar berikut :

Pada menu Properties > Text , ganti text default menjadi Play. Selanjutnya tambahkan komponen
Player. Pilih media pada menu palette, kemudian drag-n-drop Player pada screen 1.

Perhatikan pada menu Components, kita telah memiliki 2 buah object, yaitu button dan Player.
Player ini tidak mempunyai UI karena dia berfungsi sebagai player yang akan memutar file MP3
nantinya. Oleh karenanya kita harus upload terlebih dahulu file MP3 yang akan kita Putar. Plilih
Player1, kemudian pilih Source pada properties kemudian tambahkan file MP3

Jika telah selesai, klik OK. Ingat, kita sudah mempunyai sebuah tombol dan nantinya tombol ini
ketika di klik akan memanggil player, kemudian player ini akan memutar file MP3 yang telah
kita upload tadi. Untuk mengatur tersebut, kita harus mengakses Blocks Editor terlebih
dahulu.Pilih Open The Blocks Editor pada menu pojok kanan atas.

Kemudian kita akan mendownload sebuah ekstensi, download saja kemudian pilih open. Jika
terjadi error pastikan settingan java security pada control panel dalam keadaan medium.

Klik Accept, kemudian akan muncul jendela Blocks Editor seperti berikut :

Sekarang kita mulai susun logikanya. Dalam penyusunan blocks pada App Inventor kita harus
menegerti terlebih dahulu alur aplikasi yang akan kita buat. Alur aplikasi yang akan kita buat tadi
adalah ketika tombol di klik, maka akan memutar file MP3. Silahkan pilih menu My Blocks,
kemudian pilih Button1 dan pilih puzzle when button1 click.

Drag-n-drop pada halaman puzzle, kemudian pilih kembali Player1 pada menu My Blocks.
Kemudian dra puzzle Player1.start dan sambungkan dengan puzzle button tadi. Seperti pada
gambar berikut :

Yep, kita sudah membuat fungsinya. Perhatikan ambar block. Secara sederhana pengertian dari
blok ini adalah : Ketika button1.click maka Player1 akan Start. Untuk membuktikan apakah
fungsi tersebut berjalan dengan benar, kita akan menjalankannya pada emulator. Klik menu New
Emulator yang ada pada blocks editor, sehingga emulator tertampil :

Jika emulator sudah berjalan, pilih connect to device

Pilih yang emulator-5554 yang sudah kita jalankan tadi. Jika berhasil, maka aplikasi yang yelah
kita buat akan tertampil pada emulator.

Klik tombol play untuk melihat apakah file MP3 yang telah kita upload dapat diputar. Jika
berhasil, maka file MP3 tersebut akan diputar ketika menyentuh tombol Play.