Instalasi App Invertor dan Contoh Program

App Inventor adalah sebuah tool untuk membuat aplikasi android bersifat open source. Kelebihan dari aplikasi ini adalah berbasis visual block programming, visual blok programming sendiri adalah program yang dibuat dengan menyusun blok yang mirip dengan lego. blok tersebut merupakan simbol-simbol perintah dan beberapa fungsi event handler tertentu.

Penampakan App Invertor

Dalam post saya kali ini, saya akan memberikan tutorial instalasi app invertor stand alone beserta contoh programnya

Persiapan

Untuk persiapan instalasi persiapkan hal-hal berikut

  • jdk 1.7.0 ( Untuk java sebaiknya menggunakan versi 1.7 karena app invertor belum support untuk versi ke atas, disini saya menggunakan jdk1.7.0_10  )
  • ai4a configurations (disini saya menggunakan versi V1.4.7)
  • AppInventor Setup Installer  v.2 .1
    (note : bila android emulator tidak muncul, ganti app invertor dengan versi terendah yaitu 1.2)

Instalasi

  • Instal dahulu java. Kemudian install app invertor
  • Ekstrak file zip dari ai4a configurations ke Local host > Program Files > Java
  • Kemudian buka Advanced System Setting > Advanced > Environtmen Variables > pada system variabel pilih new lalu buatlah variabel berikut

Variable name : JAVA_HOME
Variable value : C:\programfiles\Java\jdk1.7.0_1

Tampilan Edit System Variable

(note: jdk sesuai denga seri java yang saya gunakan)

  • Kemudian edit variable path

Tampilan variabel path yang telah dirubah

  • Tambahkan value pada dua sub terakhir sperti yang di garis merah yaitu seri jdk\bin.
    Hati – hati dalam penggantian value dalam variable ini karena kesalahan akan membuat system dalm OS crash.
  • Lalu kembali ke  ai4a configurations yang telah di ekstrak di program java, masuk ke folder AppEngine dan run administrator pada startAI.cmd hingga muncul running

Tampilan running

  • Jangan tutup, karena saat memulai aplikasi app invertor cmd harus tetap running. Jika telah selesai cmd bisa di tutup dengan menekan ctrl+c agar tidak terjadi eror saat melakukan web surfing

Memulai apliaksi app invertor

  • Masuk ke web broser dan ketik localhost:8888/ anda akan memasuki form login. anda bisa langsung memulai tanpa memasukkan alamat email yang asli.

Tampilan Login

  • Setelah masuk dalam tampilan pembuka pilih new dan beri nama project sesuai dengan keinginan anda hingga muncul blank project

Tampilan blank project

  • Dalam komponen screen masukkan foto latar belakang dengan cara meng upload foto pada background image pada jendela propertis
  • Kemudian masukkan button dari jendela pallete pada viewer dengan cara di drag, lalu edit tombol dengan cara rename di bagian komponen dan edit text pada properties
  • Masukkan media player dengan cara yang sama untuk memasukkan lagu kemudian upload lagu yang diinginkan. size maksimal file yang bisa diupload ialah 5MB. Kemudian set volume menjadi 70

Tampilan project

Memberi perintah

  • Masih pada aplikasi app invertor, pilih open block editor pada pojok kanan atas lalu akan muncul jendela dimana kita akan mulali menyusun blok pemrograman
  • Pada jendela my blok Berikan perintah play.clik pada opsi play
  • Kemudian beri perintah lagi di opsi media > player1> player.start hingga mncul suara klik kecil, menandakan proses bisa saling menyambung

Tampilan blok

Memulai emulator

  • Masih pada jendela java pilih opsi new emulator di pojok kanan atas, kemudian jendela emulator akan muncul. Mungkin butuh waktu 2-5 menit untuk proses ini tergantung prosesor pada komputer yang anda gunakan .
  • Setelah  emulator keluar, tunggu hingga proses booting android hingga muncul blank lalu pada jendela java pilihlah connect to emulator 5554 (jenis emulator tergantung dari versi app invertor yang diinstal)
  • Otomatis program android pada home akan muncul. Buka kunci layar dengan cara menggeser dan aplikasi yang tadi telah dibuat akan otomatis terbuka.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s