Jumat, 14 November 2014

Pembuatan Aplikasi Android Menggunakan App Inventor

Halloooooo.. Kali ini saya akan menulis tahapan tutorial menggunakan app inventor.
App inventor?? Apan tuh? Jadi itu semacam aplikasi buat android gitu, TANPA NGODING.. haha seru kan bikin aplikasi tanpa ngoding?? Kita cuma drag and drop item doang..

Nah, dalam pembuatan nya bisa offline atau online. Kebetulan saya bikinnya online karena java yang sudah ter-install di laptop saya versi 1.8. Oh ya, sebelum kelupaan, fyi app inventor ini hasil research MIT, dan kalau mau install app inventor nya, di laptop harus sudah ter-install java 1.7 dulu dan jangan lupa setting path di laptopnya ya sesuai root folder nyimpen jdk nya.

Jadi, tahapannya begini untuk setting path nya : 
1. Pada myComputer klik kanan dan pilih properties
2. Pilih Advanced system settings -> environment variables
3. Pada system variables klik new
4. Lalu isi kan seperti screen shoot dibawah ini :


5. Pada system variables, pilih path kemudian klik edit. Tambahkan      root folder tempat penyimpanan jdk nya. 
 Seperti ini : C:\Program Files\Java\jdk1.7.0_03\bin;

Pengaturan path telah selesaaaiii..

Berhubung saya menggunakan versi online, tahapan dalam penggunaan nya adalah sebagai berikut :
  1. Install app inventor
  2. Setelah ter-install, run aiStarter. Maka akan muncul penampakan      seperti ini :


  3. Kemudian, buka browser lalu akses : http://ai2.appinventor.mit.edu/    
  a. Login terlebih dahulu pada account google.
  b. Pada tampilan awal login, jangan lupa centang sign in as            administrator.
     Maka akan muncul tampilan berikut:


      Lalu klik continue
   4. Klik start new project.

    

      Lalu isikan project name.


      Lalu klik ok
      Maka akan muncul tampilan seperti dibawah ini :




    5. Lalu kita dapat melakukan berbagai setting. Salah satunya            upload image sebagai background.
       Caranya :
       - Lakukan pengaturan pada kolom properties


     - Pilih background image lalu upload file


   6. Tahapan design :
      Lakukan drag and drop item yang diperlukan pada palette.
      a. Pembuatan button
       - Drag button dari palette user interface. Pengaturan tata            letak button dapat dilakukan pada kolom properties


     b. Memasukkan musik
      - Drag player dari palette media


       Lalu upload music dari laptop dengan cara :

       Pada components pilih player1
       pada properties klik source
       lalu upload file



   7. Setelah selesai melakukan design (drag and drop beberapa item        sesuai kebutuhan), lalu klik blocks pada bagian atas sebelah         kanan.


             Maka tampilannya adalah seperti berikut ini :



   -  Pada kolom blocks pilih button1 lalu pilih when button click.


   -  Kemudian pada kolom blocks pilih Player1 lalu pilih 
     call player1 start.


pemilihan dapat disesuaikan dengan fungsionalitas yang diinginkan, seperti start, play, pause, dan lain lain.

   - Lalu gabungkan puzzle button dan player yang telah dipilih tadi.


   8. Klik connect dan pilih emulator


   9. Tunggu beberapa saat, dan akan muncul tampilan seperti berikut       ini:




Buka aplikasi yang telah dibuat tadi, lalu klik button


Taddaaaaaaa music is playing..

Segitu dulu ya tutorial sederhana nya.. kebetulan saya cuma masukin item button dan ketika di klik musiknya jalan.
Selamat mencoba ya beberapa item dan fungsionalitas lainnya..

*Thanks to mas Handi yang udah ngajarin materi ini :)

Tidak ada komentar:

Posting Komentar