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 :
- 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.
 
- Buat
     projek baru dari New >
     Helloworld
 
Gb. Membuat Projek Baru
- 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
- Set
     properti nya pada Text = My Hello World , Font = Bold, Background = Orange
 - 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
- Maka
     gambar akan diupload dan masuk menjadi image pada tombol button1.
 
- 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.
 - 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
- Kita
     telah selesai pada tahap ini, selanjutnya adalah bagaimana membuat
     komponen-komponen yang ada ini bisa berfungsi sesuai dengan yang kita
     inginkan
 - 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
 
- Akan
     terbuka, jendela Downloading application biarkan sampai selesai,
 
Gb. Seting javaw –
Java Webstart untuk membuka file yg didownload
- 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
- Klik
     pada MyBlok > Button1 kemudian pilih event Button1.Click sehingga muncul di
     viewer
 
Gb. Memasukkan Event untuk Komponen Button1
- Kemudian
     pilih Sound1 > Sound1.Play tarik dan tempatkan
     pada Button1.Click
 
Gb. Memasukkan Event Button1 & Suara
- 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
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
- 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
- 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
- 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.
 
- 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.
 
- 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
- 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 :
- Mengenal
     Lingkungan kerja yaitu Komponen Desainer, Blok Editor, juga Emulator
 - Kita
     melihat adanya komponen yang terlihat pada Interface aplikasi kita  -Visible
     dan komponen yang tidak terlihat –Non-Visible
 - Mengenal
     beberapa komponen dan bagaimana mensetting properti dari komponen tersebut,
     memberikan event dan juga mengatur fungsionalitas –Behavior dari event 
 - 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
Download di Slideshare : App Inventor Hello World

0 komentar:
Posting Komentar