Instalasi App Inventor Pada Windows

of 14 /14
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 :

description

Instalasi App Inventor Pada Windows

Transcript of Instalasi App Inventor Pada Windows

Page 1: Instalasi App Inventor Pada Windows

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.

Page 2: Instalasi App Inventor Pada Windows

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.

Page 3: Instalasi App Inventor Pada Windows

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.

Page 4: Instalasi App Inventor Pada Windows

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 :

Page 5: Instalasi App Inventor Pada Windows

 

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 :

Page 6: Instalasi App Inventor Pada Windows

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 :

Page 7: Instalasi App Inventor Pada Windows

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

Page 8: Instalasi App Inventor Pada Windows

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.

Page 9: Instalasi App Inventor Pada Windows

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

Page 10: Instalasi App Inventor Pada Windows

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 :

Page 11: Instalasi App Inventor Pada Windows

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

Page 12: Instalasi App Inventor Pada Windows

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

Page 13: Instalasi App Inventor Pada Windows

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.