App Inventor : Hello World


Hello World
  
Pada bab awal ini kita akan memperlajari beberapa hal mendasar pada App Inventor, terutama bagaimana bekerja menggunakan Komponen Desainer – Component Designer , Blok Editor –Block Editor juga menggunakan Emulator untuk menguji aplikasi. Dan projek pertama kita adalah membuat projek ritual, yang juga dibuat pada semua awal belajar membuat aplikasi, yaitu membuat aplikasi dengan nama Helloworld. Ok kita langsung mulai :

  1. Aplikasi ini adalah sebuah aplikasi sederhana, ketika kita menyentuh layar –Click button akan terdengar dering jam wekker dan juga bergetar -Vibrate, dan kemudian setelah itu kita akan mengembangkannya dengan sebuah fitur ketika menggoyangkan handset –Accelerometer sensor akan langsung terdengar suara dering wekker otomatis seperti ketika kita menyentuh layar. Aplikasi ini akan menggunakan gambar jpg dengan dimensi sekitar 300x300px yang akan ditempatkan pada sebuah button – tombol dan juga suara dering dengan format mp3.
  1. Buat projek baru dari New > Helloworld


Gb. Membuat Projek Baru

  1. Maka akan terbuka jendela Blok Editor berisi Viewer, Components dan Properties yang merupakan kanvas kerja kita. Kemudian masukkan Label dari Pallete > Label , seperti pada gambar


Gb. Memberi Label


  1. Set properti nya pada Text = My Hello World , Font = Bold, Background = Orange
  2. Masukkan Button dari Pallete, dan klik button yang telah dimasukkan pada viewer sehingga terlihat propertinya, dan kemudian masukkan image untuk button dengan cara : klik button dan pada jendela properti image > add sehingga muncul jendela upload file, pilih browse untuk mencari file gambar anda, kemudian klik OK.


 Gb. Mengeset image Button

  1. Maka gambar akan diupload dan masuk menjadi image pada tombol button1.


 Gb. Image pada Button1

  1. Setelah itu kita akan menambahkan suara, dari jendela Pallete > Media kemudian drag drop komponen Sound kedalam viewer.  Komponen Sound adalah Non-Visible sehingga dimanapun dia diletakkan akan berada dibawah viewer.
  2. Klik pada Sound sehingga terlihat propertinya di jendela Properties, set source dengan suara yang kita miliki. Ini akan membuat source suara diupload, dengan cara seperti file gambar pada button tadi -browse.


Gb. Menambahkan Suara

  1. Kita telah selesai pada tahap ini, selanjutnya adalah bagaimana membuat komponen-komponen yang ada ini bisa berfungsi sesuai dengan yang kita inginkan
  2. Klik pada Open the Block Editor, sehingga muncul jendela Opening …. Pilih Run langsung, atau Pilih simpan atau save file .jnlp tersebut. Apabila disimpan Setelah tersimpan di komputer kita, jalankan dengan meng-kliknya dua kali file tersebut –RUN  , pastikan ketika membuka file ini adalah menggunakan javaw \ javaws – Java Webstart. Cara setingnya adalah klik kanan pada file, Open With > Choose Default Program > kemudian cari pada C:\Program Files\Java\jre6\bin\javaw atau C:\Program Files\Java\jdk\jre6\bin\javaws dan kemudian cheklist pada Always use the selected progam .....  abaikan peringatan security warning


 Gb. Save Aplikasi

  1. Akan terbuka, jendela Downloading application biarkan sampai selesai,


Gb. Seting javaw – Java Webstart untuk membuka file yg didownload


  1. Pilih OK pada pertanyaaan starting Block Editor, hingga muncul Editor seperti dibawah ini yang berarti jendela kerja Blocks Editor kita sudah terbuka dan siap untuk digunakan
  
Gb. Jendela Blocks Editor

  1. Klik pada MyBlok > Button1 kemudian pilih event Button1.Click sehingga muncul di viewer



Gb. Memasukkan Event untuk Komponen Button1

  1. Kemudian pilih Sound1 > Sound1.Play tarik dan tempatkan pada Button1.Click


Gb. Memasukkan Event Button1 & Suara

  1. Untuk mencobanya kita set terlebih dahulu emulatornya, klik pada new emulator, OK pada starting the emulator hingga muncul emulatornya, buka key lock dengan menggeser tanda kunci disebelah kiri

Gb. Emulator


  1. Kemudian kembali ke Block Editor, klik pada Connect to Device > pilih emulator tunggu hingga proses download selesai dan aplikasi akan tampil di emulator. Coba klik pada layar emulator apakah aplikasi yang kita bikin berfungsi, yaitu akan mengeluarkan suara dering weker ketika di klik. Apabila kita mencobanya pada Handset Android, kita bisa menyentuh layarnya.






Gb. Aplikasi pada Emulator

  1. Kemudian kita akan tambahkan fungsi lainnya, yaitu fungsi getar. Dari My Block > Sound1 tambahkan event Sound1.Vibrate , kita akan melihat event ini memiliki text bertuliskan millisecs ini berarti kita bisa mengeset waktu getarnya –variabel ini disebut juga argument. Caranya klik pada layar block editor diluar block event, yang akan membuat munculnya deretan menu tombol Text, List, Math dan yang lainya,  untuk memberikan nilai vibrasi-nya yaitu pada tombol Math > 123


Gb. Event Sound1.Vibrate

  1. Hingga muncul block number, klik pada block number dan ubah angkanya -dalam satuan milisecond . Cuma sayangnya dengan emulator kita tidak bisa mencobanya, karena getaran hanya bisa dirasakan di Handset.


Gb. Event Sound1.Vibrate & Set waktu

  1. Kita akan belajar lebih jauh dan mengembangkan aplikasi yaitu dengan menambahkan sensor accelerometer, caranya kembali ke Komponen Desainer di Browser, pilih Pallete > Sensor kemudian drag-drops AccelerometerSensor1. Sekali lagi mengingatkan dia adalah komponen yang Non-Visible, sehingga akan langsung berada diluar layar.


 Gb. Komponen AccelerometerSensor1

  1. Kembali ke Block Editor, dan pada MyBlock sudah terdapat komponen AccelerometerSensor1 tarik keluar blok event AccelerometerSensor1.Shaking , juga komponen Sound1.play . Ini berarti kita membuat event ketika handset di goyangkan maka akan langsung terdengar suara dering wekker. Kemudian bisa kita coba di handset kita.


 Gb. Event AccelerometerSensor1


  1. Untuk membuat aplikasi kita menjadi aplikasi yang mandiri, bisa kita memaket -Packaging dan download aplikasi yang kita buat ini dengan cara dari Komponen Desainer kemudian menu Package For Phone pada sebelah kanan. Terdapat dua pilihan yaitu disimpan pada komputer atau langsung di Handset kita.




Gb. Packaging Aplikasi


  1. Apabila kita pilih disimpan di komputer, maka akan dipaket dan didownload ke komputer, sedangkan apabila di download ke Handset maka akan langsung terinstall.

Worktoon



Learning Point
Dari yang telah kita praktekkan kita telah belajar beberapa hal dasar tentang :

  1. Mengenal Lingkungan kerja yaitu Komponen Desainer, Blok Editor, juga Emulator
  2. Kita melihat adanya komponen yang terlihat pada Interface aplikasi kita  -Visible dan komponen yang tidak terlihat –Non-Visible
  3. Mengenal beberapa komponen dan bagaimana mensetting properti dari komponen tersebut, memberikan event dan juga mengatur fungsionalitas –Behavior dari event
  4. Memaket – Packaging aplikasi dengan extention .apk , hingga bisa kita bagikan aplikasi ke pengguna selain kita dan diinstall di handsetnya, entah itu nantinya kita bagikan secara gratis atau dijual di market.


WhacKecoa di Market

Buku App Inventor  Klik disini

Download di Slideshare : App Inventor Hello World
Diposting oleh indo-android
Label: , , , ,

Memulai App Inventor


Memulai App Inventor

 Untuk menggunakan App Inventor ada beberapa hal yang harus di siapkan terlebih dahulu, yaitu :

  1. > Memiliki Account Gmail terlebih dahulu, dan masuk –Log In  ke  http://www.appinventorbeta.com http://beta.appinventor.mit.edu/ , apabila anda belum memiliki Account Gmail maka terlebih dahulu mendaftar pada http://www.gmail.com
  2. > Setelah masuk anda akan diminta untuk membaca & menyetujui term of service dari google, klik pada tombol I accept the terms of service.



Gb. Term Of  Service

  

Untuk memulai App Inventor :
1.      Miliki Account gmail, http://www.gmail.com
2.      Masuk ke http://www.appinventorbeta.com http://beta.appinventor.mit.edu/
  1. 3. Download & Install Java 6 (1.6) dari http://www.java.com
  2. 4. Download & Install AppInventor_Setup_Installer_v_1_2.exe http://www.appinventorbeta.com/learn/setup/setupwindows.html 

  4. http://beta.appinventor.mit.edu/learn/setup/setupwindows.html
  5. 5. Install & Setting driver HP Android apabila ada
  6. 6. Have fun with App Inventor .. :D



  1. > anda akan dibawa ke halaman App Inventor Setup, dimana terdapat dua tahapan dasar pada setup yaitu :
    1. Pada platform windows, - apabila anda menggunakan Linux anda bisa download App Inventor setup untuk Linux :
v     Setup Komputer, yaitu memiliki komputer PC dgn syarat untuk Windows. Sistem Operasi Windows yang didukung Windows XP, Windows Vista, Windows 7
v     Telah menginstall Browser minimal Google Chrome 4.0 – rekomendasi  , Apple Safari 5.0 , Microsoft Internet Explorer 7, Mozilla Firefox 3.6
v     Menginstall Java 6– java 1.6, bisa juga java 1.7 yg bisa download di http://www.java.com,
v     Kemudian install AppInventor_Setup_Installer_v_1_2.exe yg bisa di download di http://www.appinventorbeta.com/learn/setup/setupwindows.html
http://beta.appinventor.mit.edu/learn/setup/setupwindows.html


Gb. App Inventor Setup


    1. Setup lingkungan Developing, yaitu :
v     Menggunakan Emulator,: pada penggunaan emulator tidak memerlukan setup diawal, karena tinggal diaktifkan dari blok editor.
v     Menggunakan Handset Android. - Kalau tidak ingin mengesetnya kita bisa langsung melakukan developing.
Setup Handset Android
Tahap ini dilakukan apabila anda ingin langsung mencoba hasil develop anda ke handset android. Pertama anda harus memiliki kabel data USB, dan menginstall driver handset Android anda. Hampir semua handset android di dukung oleh App Inventor, dan pastikan juga anda telah memiliki memory SD Card yang terpasang.
Setelah itu setting pada handset kita :
1.      Masuk pada home screen
2.      Pilih Setting > applications
3.      Pada Unkown sources di ceklist

Gb. Setting
4.      Pilih Development, ceklist pada USB Debugging dan Stay Awake  

Gb. Setting
Setelah itu koneksikan Handset anda dgn kabel USB Data ke komputer – dalam keadaan screen unlock, hingga akan muncul dua pesan notifikasi pada atas layar yaitu :
v     USB Connected, yang berarti handset telah terhubung ke komputer.
v     USB Debugging Connected, yang membuat App Inventor di komputer mengontrol handset.
Sampai disini berarti handset android kita telah siap untuk digunakan untuk mencoba aplikasi yang kita buat dengan App Inventor.

     Catatan :
Perlu diingat apabila anda menggunakan browser Mozila firefox agar semua berjalan lancar, apabila kita menggunakan fasilitas script  - NoScript extension , dan juga apabila ada firewall yang aktif, silahkan di konfigurasikan apabila mengganggu atau menghalangi koneksi developing. App Inventor akan mencari Setup secara otomatis, tapi apabila ada pertanyaan path lokasi App Inventor biasanya ada pada C:\Program Files\AppInventor\commands-for-Appinventor.

  1. > Setelah semua konfigurasi dan setting selesai, anda bisa langsung masuk ke lingkungan developing dengan melalui http://www.appinventorbeta.com http://beta.appinventor.mit.edu/ - apabila tadi masih login anda langsung akan dibawa ke jendela developing :


 Gb. Jendela Developing


  1. Klik pada New, dan mulai projek baru misal dengan nama Helloworld, kemudian klik pada tombol OK
  


Gb. Membuat Projek Baru


  1. Maka akan terlihat langsung projek kita



Gb. Projek Baru


Lingkungan Kerja App Inventor
Sebelum kita melanjutkan untuk memulai developing, kita mengenal terlebih dahulu lingkungan kerja pada App Inventor yang terdiri dari :
  1. Komponen Desainer – Component Designer yang berjalan pada Browser, digunakan untuk memilih komponen dan mengatur property.





Gb. Komponen desainer
Komponen desainer , terdiri dari :
    1. Viewer             : untuk menempatkan komponen dan mengaturnya sesuai tampilan yang diinginkan.
    2. Pallete              : adalah list dari komponen yang bisa dipakai
    3. Component list : merupakan tempat list komponen dari projek yang kita pakai
    4. Media              : mengambil media audio dan gambar untuk projek kita
    5. Properties         : ketika anda klik komponen pada viewer maka propertiesnya akan terlihat pada panel ini


  1. Blok Editor – Blocks Editor berjalan diluar browser, dimana digunakan untuk membuat dan mengatur behaviour dari komponen yang kita pilih pada komponen desainer.



Gb. Blocks Editor

  1. Emulator , digunakan untuk menjalankan dan mengetest aplikasi yang kita bangun. Ini sangat bermanfaat apabila kita belum menggunakan handset langsung, karena Emulator Android ini telah terintegrasi dengan baik.




Gb. Emulator

Ketiga Lingkungan kerja diatas, akan bisa tampil secara bersamaan dan secara bergantian juga berpindah kita akan menggunakannya dalam membuat aplikasi android dengan App Android.

Contoh Aplikasi yg mimin bikin pake App Inventor di market : WhacKecoa ,silahkan dicoba



Cek ttg Buku App Inventor disini 

Artikel selanjutnya : Hello World

Download di Slideshare : Memulai App Inventor
Diposting oleh indo-android
Label: , , ,

Apa Itu App Inventor

App Inventor adalah sebuah tool untuk membuat aplikasi android, yang menyenangkan dari tool ini adalah karena berbasis visual block programming, jadi kita bisa membuat aplikasi tanpa kode satupun. Mengapa disebut visual block programming?, karena kita akan melihat, menggunakan, menyusun dan drag-drops “blok” yang merupakan simbol-simbol perintah dan fungsi –event handler tertentu dalam membuat aplikasi, dan secara sederhana kita bisa menyebutnya tanpa menuliskan kode program –coding less. Wow kedengarannya menyenangkan bukan?.


Misalnya seperti gambar dibawah ini, sebuah block program pada App Inventor untuk sebuah daftar warna, tanpa kode bukan?






































Betul skali, kita tidak harus memiliki basic programmer, mengerti kode-kode atau berkecimpung dalam dunia teknologi informasi untuk membuat aplikasi dengan App Inventor. Bahkan App Inventor tidak hanya untuk membuat aplikasi, karena bisa digunakan untuk mengasah logika anda, sperti halnya menyusun sebuah puzzle. Untuk programmer tentu ada opsi-opsi advance untuk membuatnya sesuai dengan level kita.

Framework visual programming ini terkait dengan bahasa pemrograman Scratch dari MIT, yang secara spesifik merupakan implementasi dari Open Block yang didistribusikan oleh MIT Scheller Teacher Education Program yg diambil dari riset yang dilakukan oleh Ricarose Roque. App Inventor menggunakan Kawa Language Framework dan Kawa’s dialect – yg di develop oleh Per Bothner dan di distribusikan sebagai bagian dari GNU Operating System oleh Free Software Foundation sebagai Compiler yang mentraslate visual block programming untuk diimplementasikan pada platform Android. Tentu disini anda tinggal menikmati kemudahan yang ada. alu, apa yg bisa kita lakukan dengan App Inventor?, yang bisa kita lakukan dengan App Inventor adalah :

  1. Just for fun
Katakanlah anda memiliki Handset Android, atau baru memasang virtual handset Android pada komputer anda, atau bahkan tidak sama sekali, App Inventor akan bisa menjadi sesuatu yang menyenangkan seperti halnya anda menyukai mengedit gambar, bermain puzzle, mengasah otak anda seperti mengisi TTS, atau belajar sebagai basis menguatkan kemampuan logika anda, semua terasa menyenangkan.
  1. Learning tool
Entah anda seorang pelajar, mahasiswa, guru, dosen atau hobbist anda akan bisa menjadikan App Inventor sebagai tool belajar anda. Jika anda seorang guru atau dosen anda akan membuat App Inventor menjadi alat pengajar yang hebat, karena visualisasi akan mempermudah siswa memahami dan menguasai apa yg anda ajarkan.
  1. Membuat aplikasi
Mulai dari membuat prototype, aplikasi untuk kebutuhan pribadi & organisasi, atau aplikasi serius yang bisa anda jual

Apabila anda telah mencoba menggunakan App Inventor, anda akan merasakan betapa mudahnya, tentu disamping karena berbasis visual drag drops ini juga karena anda :
  1. >Tidak perlu menghafal dan mengingat instruksi atau kode-kode program
  2. >Komponen & Blok event tersedia dengan lengkap anda tinggal menggunakannya. Layaknya sebuah objek anda tinggal merangkainya dengan Komponen & Blok yang sesuai fungsinya, tinggal meletakkanya seperti puzzle tinggal merubah propertinya, misal memberikan nilai angka untuk mengeset timer dll.
  3. >Event handler akan memudahkan anda dalam menangani setiap “kejadian” atau event yang anda ingin handle. Misal anda membuat sebuah aplikasi untuk menangani sms, dalam App Inventor anda tinggal mengambil –drag drops blok yang menangani event sms.
Aplikasi yg bisa dibuat dengan App Inventor
Dari tadi kita membicarakan tentang mudahnya menggunakan App Inventor, anda tentu kemudian bertanya-tanya aplikasi apa yang bisa kita buat dengan App Inventor, apa “Cuma” main-main saja?, well jawabannya tergantung anda menginginkanya menjadi seperti apa.

Karena dengan App Inventor relatif kita bisa menggunakan imajinasi kita seluas-luasnya, seperti pepatah pada android “Dalam Android imajinasi adalah batasannya”. Disini kita akan bisa membuat Games, Tool App misal barcode reader, aplikasi berbasis lokasi, untuk mengontrol LEGO Robot atau juga aplikasi untuk berkomunikasi dengan web.


App Inventor Saat ini bisa di akses di http://beta.appinventor.mit.edu/ versi beta dari MIT, bisa jadi nanti akan berubah so stay tune di blog ini :D ..... ,harus online ketika membuat aplikasi-nya, silahkan baca di posting selanjutnya 


Contoh aplikasi yg dibuat dgn App Inventor, Silahkan download di market : 
WhacKecoa & Song Of Android Indonesia




Artikel Selanjutnya disini Memulai App Inventor
Download di Slideshare : Berkenalan dengan App Inventor
Buku App Inventor klik disini
Diposting oleh indo-android
Label: , ,
Langganan: Postingan (Atom)
Return top