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.