Waryanto Founder of "Lalaris.com" 29 comments

Membuat Aplikasi Android Sederhana dengan App Inventor

Tutorial yang akan ane share merujuk pada ini gan. Disini ane mau coba buat dalam versi bahasa indonesia, buat jaga-jaga di kemudian hari kalo ane lupa, sekalian juga share buat agan-agan yang baru belajar develop app android. Oh iya project sederhana yang akan kita buat ini gak pake coding codingan yang bikin kepala pusing.

Pertama apa yang akan kita buat? sebagai gambaran disini kita (bahasanya kita ya biar lebih akrab...hoho) akan membuat aplikasi sederhana namanya HelloPur, Berikut SS dari aplikasi yang sudah jadi:


Jadi cara kerjanya ketika gambar kucingnya di klik, maka akan keluar suara kucing.... "meow".... kurang lebih begono gan... hehe... oke lah langsung saja ke permasalahan.

Kedua apa yang harus kita siapkan:
1. Agan harus sudah punya App inventor, bisa di download di sini, filenya sekitar 160.2 MB.
2. Setelah berhasil di download, extract filenya taruh di drive yang agan suka, misalnya di drive D
3. Untuk lebih lengkapnya agan bisa ikuti instruksinya disini.

Ketiga mari kita buat aplikasi pertama kali, saya asumsikan agan sudah berhasil menseting App Inventor, berikut tampilan pertama kali pada saat App Inventor di buka:


Jika sudah tampil seperti di atas, langsung saja klik tombol New dan isikan nama project yang akan kita buat yaitu "HelloPur" kemudian klik OK, berikut SS nya:
Kemudian agan drag Button ke dalam Screen1 untuk lebih jelasnya lihat SS berikut:


Setelah itu kita masukan gambar kucing, (tapi agan download dulu gambar kucingnya disini) jika sudah di download inputkan file gambarnya dengan cara klik di form None di bagian Image kemudian pilih Add pilih gambar kucing yang tadi sudah di downlod kemudian klik Ok.


Jika berhasil akan tampil seperti SS di bawah ini:

Kemudian Hapus Text for Button1 pada form Text, berikut SS nya:

Langkah selanjutnya adalah menambahkan Label yang akan di beri nama Pet the Kitty! caranya lihat SS berikut ini:


Jika Label sudah dibuat berikutnya tambahkan Sound (download dulu disini) kemudian klik Media pilih Sound dan tarik ke Screen1. Kemudian di bagian Properties klik None lalu klik Add dan pilih file meow tadi kemudian klik Ok Berikut SS nya agar lebih jelas:



Jika semuanya sudah lancar berarti tahap membuat tampilan sudah selesai, berikutnya kita akan masuk ke tahap logic nya. Tujuannya adalah jika gambar di klik akan keluar bunyi "Meow" Berikut adalah langkah-langkahnya:

1. Pilih Open The Blocks Editor yang berada di pojok kanan atas. (Tambahan: Jika muncul download pilih Open with kemudian klik Browse klik Browse lagi, cari folder Java/jre7/bin pilih file javaws kemudian Klik Open dan di Ok) disini komputer anda harus sudah terinstal Java kalo belum instal dulu ambil disini.
 Berikut adalah tampilah selanjutnya setelah di OK yaitu tampilan dari Blocks Editor:


Klik My Blocks lalu klik Button1 dan drag Button1.Click lihat gambar di bawah ini:


Kemudian Klik Sound1 dan pilih Sound1.Play lalu masukkan ke dalam Button1.Click:
Berikut hasilnya:





Jika tahapan di atas sudah selsai makan kita masuk ke tahapan uji coba, caranya adalah sebagai berikut:
Klik New Emulator kemudian tunggu hingga tampil seperti gambar berikut ini dan ada tulisan Android nya:

Langkah selanjutnya adalah klik tombol Connect to Device pilih emulator-5554, dan tunggu hingga tanda panah yang berada di pojok kanan atas berhenti bergerak, jika sudah berhenti bergerak klik gambar kucing yang berada di emulator, dan jika semua success akan keluar suara kucing.
Untuk tutorial selanjutnya adalah membuat aplikasi paint. Selesai lah Membuat Aplikasi Android Sederhana dengan App Inventor, Kalo ada yang mau nambahin mungkin tutorialnya ada yang keliru atau mau nambahin bisa di tulis di kolom komentar.... terimakasih....


Comments (29)

  1. icon
    # July 7, 2013 at 12:24 AM
    mas saya mau buat ebook. ini dah jadi rencananya mau tak tambahin fitur search kata. nah gmn caranya di app inventor kakak? mohon di tanggapannya ke agusmuliana@gmail.com
    • icon
      Waryanto Author
      # August 2, 2013 at 1:40 AM
      maaf masbro belum sempat nyoba, next postingan ya... :)
  2. Rully bae
    # August 21, 2013 at 3:42 AM
    gaann...waktu ane klik new emulator kok gak muncul emulatornya yah..??kluar tulisan "please loccate the command on your computer....
    apa harus instal manual emulatornya...?
    • icon
      Waryanto Author
      # August 23, 2013 at 4:35 AM
      Coba di instal dulu software app inventornya, bisa didownload disini=> http://appinventor.mit.edu/explore/install-app-inventor-software.html
      sesuaikan dengan OS agan, maaf baru reply
      semoga berhasil.. :)
  3. icon
    # August 25, 2013 at 6:32 PM
    aplikasi yang dibuat dengan app inventor bisa diunduh di play store gan? kalo bisa caranya bagaimana?
    mampir ke http://awidjaja.blogspot.com/
    terima kasih gan
    • icon
      Waryanto Author
      # August 26, 2013 at 1:12 AM
      aplikasi yang dibuat dengan app inventor bisa gan di unduh di play store, dengan catatan sudah di upload di play store, hehe... mungkin maksud agan di upload ya? disini gan cara lengkapnya-> http://beta.appinventor.mit.edu/learn/reference/other/appstoplay.html
      kalo udah di upload share disini ya.. :)
  4. icon
    # November 10, 2013 at 4:32 AM
    gan aku dah coba tapi gambarnya ko ga keluar ya pas di coba connect to device nya??
    apa ukuran gambarnya pengaruh?
    makasih
    • icon
      Waryanto Author
      # November 10, 2013 at 7:15 AM
      gambar yang di gunakan gambar kucing yang ada di tutorial ini atau bukan? kalo bukan, coba gambarnya di resize jadi 294x270px. semoga berhasil... :)
  5. icon
    # November 10, 2013 at 7:00 AM
    mas..kok pada saat dipindahkan ke hp suarany ga ada
    • icon
      Waryanto Author
      # November 10, 2013 at 8:14 AM
      jika suaranya pake suara kucing yang ada di tutorial ini:
      1. coba klik tombol di Blocks Editor "Connect to Phone atau Restart Phone App".
      2. jika tidak berhasil coba cabut terus hubungkan lagi kemudian tekan tombol "Connect to Device", kemudian tutup dan buka kembali Blocks Editornya.. semoga berhasil, terimakasih atas kunjungannya,..
  6. icon
    # December 11, 2013 at 5:22 AM
    Bermanfaat banget gan ,, lagi coba2 juga nih buat aplikasinya ..
    • icon
      Waryanto Author
      # December 11, 2013 at 6:12 AM
      Semoga berhasil gan... terimakasih atas kunjungannya...
  7. icon
    # July 6, 2014 at 9:08 PM
    gan, ane mau buat database nya ni, tpi belum ngerti, caranya giman gan?
    • icon
      Waryanto Author
      # July 7, 2014 at 3:50 PM
      kalo mau belajar membuat aplikasi android beserta database coba intip postingan ane yang ini http://waryantosite.blogspot.com/2013/12/membuat-aplikasi-diary-android.html
  8. Bintang
    # September 21, 2014 at 4:44 AM
    Gan ada istilah creator app android NO CODING , minta referensi situs2 tersebut yang free gan,,,,
  9. icon
    # December 24, 2014 at 12:30 AM
    kalo mau buat tampilan biar bisa di zoom in/out gmn gan?? mohon sarannya
    • icon
      Waryanto Author
      # December 24, 2014 at 1:38 AM
      Wah maaf ane belum sempet nyoba, sepertinya belum ada fungsi itu kalau dari gambar langsung, tapi mungkin bisa mencoba tutorial yang satu ini sis, tapi kasusnya gambar dari file web: https://puravidaapps.com/snippets1.php#zoom
  10. icon
    Anonymous
    # March 19, 2015 at 11:14 PM
    Bos,
    gimana cara nya kalau applikasi itu berpindah, masih tetap muncul suaranya. asumsi suara nya diisi lagu jadi masih panjang.
  11. icon
    # August 12, 2015 at 9:16 AM
    Gan ane mau buat bisa koneksi ke bluetooth dan wireles gimana caranya gan,,trims
    • icon
      Waryanto Author
      # August 12, 2015 at 6:40 PM
      mungkin tutorial ini bisa sedikit membantu, agan bisa kembangkan sendiri sesuai kebutuhan http://appinventor.pevest.com/?p=520
  12. Kaligo_fj
    # October 22, 2015 at 8:53 PM
    Mantap tutorialnya
    Kaligowongonline.wordpress.com
  13. icon
    # November 19, 2015 at 1:59 AM
    gan ada aplikasi Login pakek mit app inventor 2 gak, menggunakan komunikasi serial dengan bluetooth?
    • icon
      Waryanto Author
      # May 13, 2016 at 7:31 AM
      coba pake app inventor terbaru, http://ai2.appinventor.mit.edu/
  14. icon
    # May 11, 2016 at 7:22 PM
    gan mau nanya...

    itu kalo mau masukin bacaan yang terdiri dari banyak paragraf ke app inventor gimana caranya ya?
    • icon
      Waryanto Author
      # May 13, 2016 at 7:30 AM
      kaya buat ebook gitu ya? sepertinya belum ada menunya gan
  15. icon
    # June 15, 2016 at 8:22 AM
    Assalamualaikum bang mau nanya apakah tugas akhir/kerja praktek bisa menggunakan aplikasi ini atau tidak ya? Mohong jawabanya. Wassalamualaikum
    • icon
      Waryanto Author
      # June 17, 2016 at 2:48 PM
      wa alaikum salam, kalo untuk membuat aplikasi sesuai tugas akhir bisa saja, itupun selama fitur di appinventor nya mendukung. tapi ditanyakan dulu ke dosen pembimbingnya. Bisa dicek dulu disini versi online nya http://appinventor.mit.edu/explore/
  16. icon
    # June 15, 2016 at 8:24 AM
    Assalamualaikum bang mau nanya apakah aplikasi ini bisa di gunakan untuk skripsi/tugas akhir / kerja praktek ? Mohon jawabanya
    Wassalamualaikum
  17. icon
    # July 20, 2016 at 2:33 AM
    Assalamualaikum bang. Bang mau tanya kalo hubungin ke fusion table gimana yah caranya? Trims

Post a Comment

Cancel