[Xamarin iOS] Hello World

Xamarin… menghadirkan solusi pengembangkan aplikasi native mobile berbasis Windows Phone, Android dan iOS dengan bahasa pemrograman C#. Dari ketiga platform mobile yang dipenuhi oleh Xamarin  Android masih merajai tapi pengembangan aplikasi iOS juga sangat menjanjikan.  Windows Phone? walau pendapat saya pribadi OS WP powerfull dan enak digunakan plus perangkat nokia memang punya kualitas baik, tapi entah kenapa trendnya tidak terlalu baik. Kembali ke pengembangan aplikasi iOS, apa yang dibutuhkan untuk mengembangkan aplikasi iOS pada xamarin?

  1. Anda harus menggunakan PC / laptop Mac (karena xcode dan pasukannya cuma tersedia untuk OS Mac)
  2. Xamarin Studio (dapat diunduh di https://www.xamarin.com/)
  3. Xcode beserta komponen pendukungnya

Jika telah selesai menyiapkan semua kebutuhan, mari kita coba membuat sebuah aplikasi iOS dengan Xamarin.

Buka Xamarin Studio lalu buat aplikasi iOS dan pilih jenis project “Single View App”. Nama aplikasi? terserah anda, saya sendiri memberi nama aplikasinya “ios_playground”. Setelah membuat aplikasi maka akan terlihat sebuah iOS project dengan struktur direktori seperti berikut :

screen-shot-2016-10-27-at-12-00-03-pm

Berikut penjelasan masing-masing direktori dan file dari struktur di atas :

  • Reference : menyimpan kumpulan library/komponen yang akan digunakan.
  • Components : menyimpan components yang digunakan pada aplikasi, anda dapat melihat/mencari kumpulan components yang menarik dari direktori ini caranya secondary click pada direktori “components” kemudian klik “get more..”
  • Packages : menyimpan kumpulan package yang digunakan aplikasi. Secondary click pada direktori ini lalu pilih “Add package” agar anda bisa melihat dan mendapatkan package-package menarik dari nuget.org dan source lainnnya.
  • Assets.xcassets : direktori ini digunakan untuk menyimpan image assets.
  • Resource : digunakan untuk menyimpan berbagai resource yang digunakan aplikasi.
  • AppDelegate : file ini adalah file yang menentukan UI mana yang akan di launching saat pertama kali program dipanggil
  • Entitlements.plist : jika anda menginginkan kebutuhan khusus pada aplikasi, anda dapat melakukan konfigurasinya disini.
  • Info.plist : tempat dimana anda menyimpan informasi identitas aplikasi anda dan beberapa informasi general misal nama aplikasi, target deployment, dll.
  • LaunchScreen.storyboard dan Main.storyboard : Pada pengembangan aplikasi iOS, anda dapat melakukan design UI pada suatu tempat yang disebut storyboard. Jadi file-file yang memiliki extension “.storyboard” artinya file tempat anda meletakkan UI aplikasi anda. Dalam suatu storyboard bisa jadi terdapat beberapa UI yang saling terkait antara satu screen dengan screen yang lainnya.
  • Main.cs : class ini adalah class pertama yang akan dipanggil oleh aplikasi.
  • ViewController.cs : Pada pengembangan aplikasi iOS anda akan mengenal Controller. File ViewController.cs adalah controller default dari yang di generate saat pertama kali kita membuat aplikasi. Anda dapat menambahkan controller lain melalui storyboard.

Sekilas Tentang Storyboard

Dalam pengembangan iOS, storyboard digunakan untuk melakukan perancangan aplikasi dan UI dari aplikasi yang kita buat.

screen-shot-2016-10-28-at-9-55-45-am

Storyboard terdiri dari satu atau lebih controller dimana salah satu controller akan menjadi controller awal yang dijalankan ketika suatu storyboard dipanggil. Setiap controller yang masuk ke dalam storyboard harus diberikan identitas nama class-nya agar xamarin secara otomatis melakukan generate file class-class dari controller tersebut. Dimana class dari controller-nya di generate? pada direktori root aplikasi anda.

Secara default aplikasi yang telah kita buat akan menjalankan UI file Main.storyboard, dimana pengaturan yang menentukan Main.storyboard akan dijalankan di awal? Anda bisa lihat pada file Info.plist

screen-shot-2016-10-27-at-3-15-03-pm

Pada kolom “Main Interface” telah dijelaskan bahwa “Main” storyboard akan dijadikan sebagai interface utama.

Hello Xamarin Dev

Untuk melestarikan tradisi turun temurun, hal pertama yang perlu kita pelajari adalah membuat aplikasi “Hello World”. Kita akan membuat aplikasi seperti berikut :

screen-shot-2016-10-27-at-3-44-35-pm

Aplikasi tersebut adalah aplikasi hello world dan ditambah sebuah inputan yang harus diisi oleh pengguna. Ketika pengguna mengetikkan sesuatu pada textField yang disediakan, maka aplikasi secara otomatis menghitung jumlah karakter dari inputan tersebut dan menampilkan hasilnya pada label berwarna biru.

screen-shot-2016-10-27-at-4-02-45-pm

Okey, pertama-tama bukalah Main.storyboard kemudian tambahkan dua buah UILabel dan  sebuah UITextField pada UIViewController yang ada pada storyboard. Cara menambahkan control tersebut adalah dengan melakukan drag n drop control yang pada box toolbox. Jika selesai silahkan atur tata letak tampilan.

Properties

Kita dapat melakukan beberapa konfigurasi dan pengaturan sederhana pada setiap control seperti UILabel dan UITextField. Silahkan anda coba click salah satu control yang telah ditambahkan pada storyboard :

screen-shot-2016-10-27-at-7-20-14-pm

Control yang sudah terpilih akan terlihat seperti gambar di atas. Anda dapat melakukan pengaturan atau konfigurasi control tersebut pada boks “Properties”

screen-shot-2016-10-27-at-7-16-18-pm

Boks properties akan menyajikan beberapa pengaturan yang dapat dilakukan. Terdapat tiga buah tab pada boks properties :

    1. Widget : berisi konfigurasi general yang ada pada control seprti nama control, font, warna, label, dll.
    2. Layout : konfigurasi yang berkaitan dengan layout dan tata letak suatu control.
    3. Events : berkaitan dengan proses menangkap masukan dan memprosesnya. Sebagai contoh ketika pengguna melakukan click, double click, mengetik sesuatu, dll.

Contoh pengaturan properties :

screen-shot-2016-10-27-at-7-31-07-pm

Berilah sebuah identitas nama pada UITextField yang kita buat dan buat agar memiliki placeholder seperti tampilan di atas. Maka pengaturan property yang harus dilakukan adalah seperti berikut :

screen-shot-2016-10-27-at-7-33-29-pm

Buatlah identitas pada UILabel yang telah ditambahkan kemudian rubah warna hurufnya menjadi berwarna biru :

screen-shot-2016-10-27-at-7-34-57-pm

Pengaturan property-nya adalah seperti berikut :

screen-shot-2016-10-27-at-7-36-49-pm

Mengapa kita harus memberikan identitas nama pada suatu control? Pemberian nama berguna untuk menangkap control yang dimaksud melalui code program. Misal control Label_count semula memiliki label “Count of Character” dengan warna biru, kita menginginkan agar warna dari label “Count of Character” tersebut dapat diubah-ubah melalui code program. Setiap anda menambahkan sebuah nama pada suatu control, maka class dari controller tersebut akan men-generate code pendefinisian control tersebut. Sebelumnya kita telah memberikan identitas nama pada UILabel dan UITextField yang kita miliki, maka pada class controllernya :

screen-shot-2016-10-27-at-7-53-43-pm

Seperti terlihat pada gambar bahwa masing-masing class controller akan terdiri dari class aslinya dan class .designer. Silahkan buka class .designer dari controller tersebut.

screen-shot-2016-10-27-at-7-56-33-pm

Pada code tersebut sudah didefinisikan UILabel dengan nama Label_count dan UITextField dengan nama Txt_Name. Bukannya kita tadi menambahkan dua buah UILabel? Iya, tapi yang satu tidak kita beri identitas nama sehingga tidak di-generate.

Event

Setelah berhasil melakukan pengaturan tampilan, sekarang kita akan menampilkan jumlah karakter yang diketik pada Label_count. Buka class controller lalu masukkan code berikut pada fungsi “ViewDidLoad()”

 base.ViewDidLoad();
 this.Txt_Name.EditingChanged += (sender, ea) =>{
      this.Label_count.Text = "Count of character : " + ((UITextField)sender).Text.Length;
 }; 

Code di atas akan mengeksekusi setiap pengguna mengetik suatu nilai pata Txt_Name dimana setiap pengguna mengetikkan sesuatu maka tampilan pada Label_count akan menampilkan jumlah karakter yang telah dimasukkan.

Sekarang silahkan jalankan aplikasi anda.. berikut tampilannya :

screen-shot-2016-10-27-at-3-44-35-pm

Selesai, selamat mencoba.. happy coding.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: