Membuat Aplikasi Android Sederhana

Oke selamat berjumpa rekan-rekan sekalian.. Ini adalah tutorial pertama saya tentang teknologi Adobe Flash Platform for Mobile Solution.
Ada beberapa hal fundamental yang harus kita pahami terlebih dahulu sebelum turun untuk coding, hehe. Pertama adalah bahwa perkembangan Android sedang san
gat pesat sekali, sehingga membuat iri para pesaingnya. Kedua adalah bahwa Adobe dan Android melakukan kesapakatan sehingga aplikasi berbasis Adobe AIR bisa running-well di platform Android. Itu yang harus kita pahami dulu.
Sekarang kita tahu bahwa Aplikasi berbasis Adobe AIR bisa berjalan di Android, itu adalah modal pertama kita untuk membuat Aplikasi Android menggunakan Adobe Flash Builder “Burrito” dengan SDK Flex “Hero”.
Oke kita langsung praktekan.


1 -> Pastikan PC anda telah terinstall Adobe Flash Builder “Burrito”. (Jika belum, bisa diunduh DI SINI) SDK Flex “Hero” sudah terinclude secara default bersama Adobe Flash Builder “Burrito”.

2 -> Selanjutnya kita buka Adobe Flash Builder “Burrito”

3 -> Buat project baru, pilih Flex Mobile Project

4 -> Isi nama project terserah anda, saya coba dengan nama “helloKita”

Penyimpanan project bisa disesuaikan dengan keinginan anda, dan jangan lupa pastikan bahwa SDK yang kita pakai adalah Flex “Hero”.
5 -> Selanjutnya atur settingan mobile untuk aplikasi yang akan kita buat.

Pastikan bahwa pada Target platforms terpilih Google Android dant template nya adalah Mobile Application serta jangan lupa pada Application Setting terpilih Automatically reorient.
6 -> Selanjutnya kita memilih settingan server. Biarkan saja default karena aplikasi yang kita buat tidak membutuhkan interaksi dengan server.

8 -> Selanjutnya kita atur build paths, saya lebih senang membiarkannya scara default saja.

Oke DONE! Langkah-langkah untuk membuat project baru sudah dilewati dengan aman, jika sudah benar maka secara default Adobe Flash Builder “Burrito” akan langsung menampilkan halaman helloKita.mxml yang merupakan halaman utama dari aplikasi yang akan kita buat.

Tampilan di atas adalah mode source code, kita juga bisa merubahnya ke dalam mode desain. Maka muncul worksapce seperti di bawah ini.

9 -> Selanjutnya kita akan mendesain GUI untuk aplikasi yang akan kita buat ini. Tapi sebelum itu, kita pilih jenis device yang akan kita gunakan sebagai template ukuran untuk aplikasi yang akan kita buat ini. Di sebelah atas ada pilihan Device, di sana tersedia berbagai yang ber-platform Android, kita tinggal pililh salah satu.

Saya coba untuk memilih Google Nexus One. Hehe :D

10 -> Coba kita ubah title pada halaman utama kita, menjadi “HelloKita”. Caranya kita klik pada bagian tengah stage, kemudian pada properties kita ubah Title nya.

Kalo sudah benar, maka title Home pada stage akan berubah menjadi HelloKita.

11 -> Selanjutnya kita masukan beberapa komponen, yang pertama kita masukan sebuah InputText ke dalam stage. Ada beberapa cara, bisa kita mendeklarasikan melalui mode source code, tentunya dengan mxml, atau kita langsung drag & drop pada mode desain. Kita coba pada mode desain saja ya, biar gampang.. hehe :D
Di sebelah kiri bawah, ada Components, kita pilih text input, kemudian kita drag & drop komponen tersebut ke stage.

Jangan lupa kita beri ID untuk komponen ini, karena nanti akan digunakan saat melakukan aksi yang tentunya berinteraksi dengan ActionScript 3.0 (bagusnya setiap komponen kita beri ID supaya lebih mantap)

12 -> Seperti pada langkah 11 di atas, kita masukan komponen Label, kita beri ID txt_hello. Atur penempatan dan ukuran dari label tersebut sesuai dengan keinginan kita.
13 -> Selanjutnya kita masukan juga komponen Button ke Stage, kita beri ID btn_hello, Atur juga penembaptan dan ukurannya sesuai dengan yang kita ingin kan.
Setelah langkah 12 dan 13 dilewati, maka stage akan jadi seperti di bawah ini.

Setelah semua komponen yang kita butuhkan sudah kita tempatkan di Stage dengan pas dan mantap, selanjutnya kita akan sedikit coding untuk memberikan sentuhan, hehe.
Sekenario nya, kita akan membuat agar aplikasi ini sedikit interaktif. Saat kita memasukan nama pada input text yang tersedia, kemudian tombol ditekan, maka akan keluar teks pada label yang sudah kita buat “Hello, [nama]”.
Oke deh kita langsung turun panggung nih.. hehe :D
14 -> Ubah ke mode source code terlebih dahulu. Pada mode ini kita akan melihat tag-tag mxml yang mendeklarasikan komponen yang ada pada stage. Kita pahami dulu sejenak properties-properties yang nampak pada tiap tag nya. Hehe :D

Kita lihat bahwa terdapat properties x dan y. Itu sangan memudahkan kita dalam penempatan komponen di stage, tentunya sangat berbeda dengan jika membuatnya menggunakan Eclipse, hehe :D
15 -> Selanjutnya kita akan mendeklarasikan beberapa fungsi, tentunya menggunakan bahasa pemrograman ActionScript 3.0 yang sangat keren, hehe.
Oke pertama kita akan membuat fungsi initialState() yang diperuntukan untuk mengatur kondisi awal dari aplikasi ini pada saat dijalankan.

Jangan lupa untuk memasukan fungsi initialState() ke dalam properties di tag

Bisa dilihat bahwa masih ada error pada baris pengisian event listener, knp? Karena fungsi onHello() yang kita panggil pada pengisian event listener belum ada. So..
16 -> Selanjutnya kita akan membuat fungsi onHello() yang merupakan kondisi pada saat button hello ditekan.

Hoho.. error nya hilang kan? Yo mari kita test aplikasi yang kita buat ini, meski cukup sederhana tapi lumayan lah buat belajar mah.. hehe :D
17 -> Kita coba untuk melakukan test ato debugging pada aplikasi ini, pada first-run, kita akan diberikan opsi untuk memilih metode yang akan digunakan saat menjalankan aplikasi ini.

Pastikan launch method nya adalah on desktop (karena kita akan menjalankan di PC bukan pada device yang dimaksud), dan pilih Google Nexus One sebagai Virtual Device nya. Lalu Apply kemudian klik Run! (settingan ini bisa kita ubah pada Run Configuration)


Maka akan tampil aplikasi yang sudah kita buat tadi,

18 -> Selanjutnya kita cek event pada button yang telah kita buat tadi, coba masukan nama anda pada input text yang tersedia kemudian klik tombol hello!

Tutorial dalam format .pdf dapat di untuh DI SINI
Source Code bisa diunduh DI SINI


Terima kasih, semoga tutorial ini bermanfaat. Sampai berjumpa kembali di tutorial-tutorial sederhana berikutnya. Karena Knowledge is for share..