Wednesday, March 2, 2011

Belajar Developing Aplikasi Untuk iPad:Mengenal Xcode dan Interface Builder

Xcode adalah sebuah suite of tools, yang dikembangkan oleh Apple, untuk mengembangkan software untuk platform Mac OS X dan iOS. Untuk menggunakan Xcode, tentunya kita harus menggunakan Mac OS X. Xcode yang saya gunakan adalah Xcode versi 3.2.5 yang sudah terinstal pada Mac OS X 10.6. Untuk mendownload Xcode, dapat didownload dari situs resmi Apple di http://developer.apple.com/technologies/xcode.html. Sedangkan untuk mendownload iOS, dapat dilakukan pada alamat http://developer.apple.com/devcenter/ios. iOS dibutuhkan jika kita ingin men-develop aplikasi yang ditujukan untuk iPad atau iPhone. Karena saya tertarik mengembangkan aplikasi untuk iPad, maka saya menggunakan iOS versi 4.2.

Langsung saja. Untuk men-develop aplikasi, baik untuk Mac OS X ataupun iOS, mau tidak mau kita harus mempelajari bahasa pemrograman Objective-C. Saya tidak akan membahas tentang Objective-C di tulisan saya kali ini, tetapi akan lebih membahas tentang pengenalan Xcode.

Xcode dapat dijalankan dengan mengeksekusi aplikasi Xcode pada /Developer/Application/Xcode.


Seperti biasa, pertama kali belajar bahasa pemrograman atau environment yang baru, kita akan memulai dengan membuat aplikasi HelloWorld yang akan dapat dijalankan pada iPad.
Pertama-tama, membuat project HelloWorld di Xcode, dengan membuka menu File > New Project. Kemudian pada dialog New Project yang muncul, pilih kategori template untuk iOS, dan untuk template-nya, kita akan menggunakan View-based Application. Karena kita akan men-develop aplikasi untuk iPad, pastikan pada pilihan Product yang terpilih adalah iPad. Kemudian pilih Choose.

Pada contoh ini saya menamakan project yang saya buat dengan nama HelloWorld. Kemudian pilih Save.

Berikut ini adalah tampilan awal dari project HelloWorld yang telah saya buat.

Kemudian, untuk mengatur tapilan GUI dari aplikasi yang akan kita buat, klik 2x pada file HelloWorldViewController.xib, maka secara otomatis aplikasi Interface Builder akan aktif. Dengan Interface Builder, kita dapat merancang tampilan GUI dari aplikasi yang akan kita buat.


Pada aplikasi Interface Builder, terdapat 4 jendela, yaitu jendela Library (tampak yang paling kiri pada gambar di atas), jendela View, jendela HelloWorldViewController.xib, dan jendela Inspector (Paling kanan). Kemudian drag item Label yang terdapat pada jendela Library ke dalam jendela View. Aktifkan Attributes Inspector dengan mengakses menu Tools > Attributes Inspector. Pada jendela Attributes Inspector, saya mengisi isian Text dengan "Hello World". Kemudian Font Size saya set dengan nilai 140. Kira-kira tampilannya seperti gambar di bawah ini.


Kemudian saya mengaktifkan Size Inspector dengan mengakses menu Tools > Size Inspector. Pada properti Autosizing, saya mencoba mengeset nilai propertinya seperti terlihat pada gambar di bawah ini.


Properti autosizing berguna untuk mengatur ukuran elemen yang kita buat, karena iPad dapat digunakan secara Portrait ataupun Landscape. Jadi properti ini mengatur agar ukuran teks "Hello World" yang kita buat dapat menyesuaikan ukurannya secara otomatis ketika iPad digunakan secara Portrait maupun. Landscape. Simpan perubahan dengan mengakses menu File > Save. Kemudian kita kembali ke aplikasi Xcode. Coba jalankan aplikasi dengan meng-klik tombol Build and Run. Maka, secara otomatis,  iOS simulator akan mensimulasikan perangkat iPad untuk menjalankan aplikasi yang baru kita buat. 


Pada awalnya, orientasi iPad adalah Portrait, kita dapat mengubah orientasi iPad dengan mengakses menu Hardware > Rotate Right. Kira-kira tampilan Aplikasi Hello World ketika iPad berada dalam orientasi Landscape akan terlihat seperti di bawah ini.

Tanpa melakukan coding sebaris pun, kita dapat membuat aplikasi Hello World. :D
Yup, sekian dulu untuk pengenalan Xcode dan Interface Builder. Pada tulisan selanjutnya (jika ada waktu), saya ingin membahas lebih dalam lagi tentang Xcode, dimana kita akan melakukan sedikit coding untuk memodifikasi aplikasi Hello World ini agar lebih interaktif. ^^

Sekian...

No comments:

Post a Comment