App Inventor : Hello World

Baca Juga

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.

2. Buat projek baru dari New > Helloworld

Gb. Membuat Projek Baru

3. 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

4. Set properti nya pada Text = My Hello World , Font = Bold, Background = Orange
5. 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

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

 Gb. Image pada Button1

7. 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.
8. 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

9. Kita telah selesai pada tahap ini, selanjutnya adalah bagaimana membuat komponen-komponen yang ada ini bisa berfungsi sesuai dengan yang kita inginkan
10. 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

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

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

12. 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

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

Gb. Memasukkan Event untuk Komponen Button1

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

Gb. Memasukkan Event Button1 & Suara

15. 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

16. 
    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

17. 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

18. 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

19. 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

20. 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

21. 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

22. 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

Subscribe to receive free email updates: