iPhone programming itu seperti kumbang – menyenangkan dan hanya sedikit menakutkan!

Update 2/16/12:Update untuk iOS5

Platform iPhone adalah platform pengembangan yang hebat bagi para indie software developers. Tidak ada cara yang lebih mudah ketika mendapatkan ide unik untuk apps kita, melakukan coding dan langsung tersedia untuk jutaan potensial user.

Beberapa saat yang lalu, saya mendapat banyak pertanyaan dari orang-orang yang baru mengenal pengembangan iOS tentang bagaimana cara memulainya. Jadi saya rasa akan sangat berguna jika saya menulis beberapa seri tutorial yang disesuaikan bagi para pemula.

Tapi, daripada fokus ke hanya satu topik, kita akan masuk dan membuat satu aplikasi lengkap dari awal. Setelah selesai, kalian akan mencoba semua aspek dari pengembangan aplikasi di iPhone dan siap untuk menggali lebih dalam.

Jadi, aplikasi apa yang akan kita buat?Hmm, saya ceritakan dulu awalnya..

Suatu malam, saya melihat foto dari Potato Bug untuk pertama kalinya, saya langsung kaget karena serangga tersebut sangat besar dan menyeramkan! Kemudian saya terobsesi melihat semua foto serangga yang menyeramkan di internet. Jadi untuk membagi semua kesenangannya, kita akan membuat aplikasi untuk itu-memberi peringkat serangga yang menyeramkan!

Sambil membuat aplikasi ini, kita akan membahas beberapa topik yang sering digunakan pada pengembangan aplikasi iPhone

• Apa yang diperlukan untuk memulai pengembangan aplikasi di iPhone
• Bagaimana menyimpan data dari aplikasi kita ke dalam Model
• Bagaimana menggunakan Table Views – termasuk menambah dan menghapus row/baris
• Bagaimana membuat detail view dari suatu row
• Bagaimana untuk mendukung orientasi Portrait & Landscape
• Bagaimana menggunakan Navigation Controllers
• Bagaimana menggunakan Image Picker
• Bagaimana menggunakan control yang umum seperti, text field, button dan image view
• Bagamana menambah icon dan default image
• Bonus : bagaimana menghandle operasi yang terus menerus

Memang, sepertinya banyak, tapi jangan kuatir – kita tidak takut terhadap serangga!

Pada bagian pertama dari tiga bagian ini, kita akan membahas bagaimana memuat model kita dengan daftar dari serangga dan menampilkannya di table view (Silahkan lihat Part 2 atau Part 3)

Tutorial ini ditujukan untuk pemrogrammer iOS pemula, tapi diharapkan anda sudah familiar dengan Objective-C dan programming secara umum. Jika anda baru dalam Objective-C, saya merekomendasikan anda membaca Objective-C Programming Language Guide  dari Apple.

Apa yang anda perlukan

Pertama-tama, untuk mengembangkan aplikasi di iPhone, anda memerlukan komputer Mac. Mac apapun cukup, asalkan bisa menjalankan versi Mac Os terakhir, Lion. Tapi jika ingin mencari yang paling murah, anda bisa menggunakan Mac Mini, ini sudah bisa digunakan dengan baik sebagai mesin development.

Kemudian, anda perlu mendapatkan copy dari XCode, IDE dari Apple untuk pengembangan iOS. Jika anda belum mendapatkannya, silahkan daftar secara gratis di iPhone Dev Center dan silahkan download XCode dari Mac App Store.

Jika mau, anda bisa mendaftar Program iPhone Developer berbayar, yang memungkinkan anda untuk menjual aplikasi anda di App Store, tapi jika hanya ingin mencoba pengembangan aplikasi iOS, account yang gratis sudah cukup.

Jika anda ingin serius dalam pengembangan iOS, disarankan anda memiliki iPhone/iPhone4/iPod Touch/iPad. Memang sih anda bisa melakukan testing lewat simulator, tapi ada beberapa API yang tidak jalan di Simulator, dan anda memerlukan salah satu device di atas untuk testing.

Nah – jika anda belum melakukan langkah diatas, silahkan download XCode, jalankan dan mari kita lanjutkan!

Halo, Table View!

Kita akan mulai dengan menggunakan salah satu control yang paling sering digunakan di iPhone – yaitu Table View. Anda mungkin sudah sering melihat Table View di beberapa aplikasi, berikut beberapa contohnya:

Jadi, layar pertama aplikasi kita akan memiliki Table View, untuk menampilkan daftar serangga-serangga yang menakutkan!

Mari kita mulai dengan mengklik File- New- Project di XCode, pilih iOS -Application-Master-Detail Application, dan klik Next.

Di halaman berikutnya, ketik ScaryBugs sebagai Product Name, masukkan identifier yang unik di Company Identifier(com.namaperusahaananda atau com.namaanda sudah cukup), pilih iPhone untuk device family, dan pastikan Use Storyboard dan Use Automatic Reference Counting tercentang. Klik Next setelah selesai.

Pilih lokasi untuk menyimpan proyek anda dan klik Create. Dan sebelum kita melakukan apapun, mari kita lihat apa yang sudah kita peroleh sejauh ini! Di toolbar pada layar paling atas pilih iPhone Simulator dari daftar yang tersedia, klik tombol Run. Jika semuanya berjalan dengan lancar, anda akan melihat simulator seperti ini:

Anda dapat menekan tombol ‘+’ untuk membuat entry baru, kemudian tekan baris yang baru untuk melihat detail viewnya :

Seperti yang anda lihat, kita sudah memiliki project yang sudah berfungsi karena kita memilih Master-Detail Application template.

Kita tidak akan membahas lebih banyak mengenai template karena pembahasan tersebut diluar tutorial ini, tapi bisa dilihat bahwa kita mempunyai table view dan detail view yang masih kosong namun bisa segera digunakan – kita hanya harus mengisinya dengan data!

Untuk mengetahui caranya, mari kita buat sebuah class untuk meng keep track serangga-serangga kita.

Model Data: Pengorganisasian

Template ini hadir dengan root grup, dan Supporting Files grup. Grup-grup ini hanya untuk pengaturan, jadi silahkan ganti sesuai selera anda. Dalam tutorial ini, kita akan memiliki banyak files, jadi mari kita atur sedikit file-file tersebut.

Pertama-tama, kita buat grup baru untuk menyimpan file-file User Interface. Caranya, Control-Klik grup Scary Bugs dan pilih New Grup. Kemudian klik grup yang baru dibuat, dan ganti namanya menjadi “GUI”. Tarik file-file dari root ke dalam GUI Grup (bukan Supporting Files). Sekarang tampilan XCode anda harusnya seperti dibawah ini:

Sekarang kita buat grup baru yang kedua dan kita beri nama “Model” karena kita akan menambahkan beberapa class untuk model data kita. Sekarang tampilannya akan seperti dibawah ini:

Sebelum kita mulai, berikut ini bagaimana kita akan mengatur proyek kita:

1. ScaryBugData : berisi nama serangga dan peringkat
2. ScaryBugDoc: Berisi gambar full size, thumbnail, ScaryBugData

Kenapa kita mengatur seperti ini agar mudah dalam memfollow up tutorial ini, dimana kita akan menyimpan data ke disk drive, mengimplementasikan file sharing, dan lain2.

Model Data: Implementasi

Ok, mari kita mulai! Control-klik pada Model grup dan klik “New File..”.Pilih iOS- Cocoa Touch- Objective-C class template, dan klik Next.

Masukkan nama classnya ScaryBugData, masukkan NSObject untuk subclass, dan klik Next.

Di jendela popup yang terakhir, pilih Create. Jika semuanya berjalan dengan lancar, Project Navigator anda akan terlihat seperti dibawah ini:

Ok, sekarang saatnya membuat ScaryBugData class. Ubah ScaryBugData.h menjadi seperti dibawah ini:

#import <Foundation/Foundation.h>

@interface ScaryBugData : NSObject

@property (strong) NSString *title;
@property (assign) float rating;

- (id)initWithTitle:(NSString*)title rating:(float)rating;

@end

Sebenarnya ini adalah sesuatu yang simple – kita hanya mendeklarasikan suatu object dengan dua properties – string untuk nama serangga dan tipe data float untuk merating seberapa menakutkan serangga tersebut. Kita menggunakan dua properti attribut untuk ini:

• strong:  ini menspesifisikan bahwa runtime harus secara otomatis menjaga referensi strong pada object tersebut. Atau dengan kata lain, kita menginginkan agar ARC runtime tetap mengkeep object di dalam memori selama ada referensi, dan men-deallocate ketika tidak ada referensi lagi. Untuk informasi lebih detail, silahkan lihat Beginning ARC in iOS 5 Tutorial.
• assign:  ini berarti property di set secara langsung, tanpa ada keterlibatan dari memory management. Ini yang biasa kita set untuk tipe data primitive (non-object) seperti float.

Kita juga mendefinisikan initializer untuk class ini, supaya kita bisa menset title dan rating ketika kita membuat suatu serangga.

Buka ScaryBugData.m dan ubah seperti dibawah ini:

#import "ScaryBugData.h"

@implementation ScaryBugData

@synthesize title = _title;
@synthesize rating = _rating;

- (id)initWithTitle:(NSString*)title rating:(float)rating {
    if ((self = [super init])) {
        self.title = title;
        self.rating = rating;
    }
    return self;
}

@end

Simple bukan? Kita men-synthesize properties, dan membuat initializer kita untuk mengisi instance variables dari passed-in parameters, perhatikan bahwa dealloc tidak diperlukan karena kita menggunakan ARC.

Ok, selesai untuk ScaryBugData. Sekarang lakukan langkah yang sama seperti diatas untuk membuat subclass NSObject lain, kali ini kita namakan ScaryBugDoc.

Ubah ScaryBugDoc.h menjadi seperti dibawah ini:

#import <Foundation/Foundation.h>

@class ScaryBugData;

@interface ScaryBugDoc : NSObject

@property (strong) ScaryBugData *data;
@property (strong) UIImage *thumbImage;
@property (strong) UIImage *fullImage;

- (id)initWithTitle:(NSString*)title rating:(float)rating thumbImage:(UIImage *)thumbImage fullImage:(UIImage *)fullImage;

@end

Tidak ada sesuatu yang khusus pada langkah ini, hanya membuat suatu instance variables/properties dan sebuah initializer.

Ubah ScaryBugDoc.m seperti dibawah ini:

#import "ScaryBugDoc.h"
#import "ScaryBugData.h"

@implementation ScaryBugDoc
@synthesize data = _data;
@synthesize thumbImage = _thumbImage;
@synthesize fullImage = _fullImage;

- (id)initWithTitle:(NSString*)title rating:(float)rating thumbImage:(UIImage *)thumbImage fullImage:(UIImage *)fullImage {   
    if ((self = [super init])) {
        self.data = [[ScaryBugData alloc] initWithTitle:title rating:rating];
        self.thumbImage = thumbImage;
        self.fullImage = fullImage;
    }
    return self;
}

@end

OK..model data kita sudah selesai. Sekarang kita akan membuat beberapa sample data dan menampilkannya di table view.

Daftar serangga yang berbeda dari yang biasanya

Pertama-tama,  kita setup dulu table view kita supaya bisa menampilkan list dari ScaryBugDocs. Yang harus kita lakukan pertama kali adalah memodifikasi table view kita supaya bisa menampilkan baris yang dynamic (daripada harus menghard code baris dari template yang sudah disiapkan)

Langkahnya, buka MainStoryboard.storyboard. Ini membuat kita bisa melihat layout “screen” dari aplikasi kita. Seperti yang bisa kita lihat, app ini sudah disetup untuk memiliki satu navigation controller (sesuatu yang mempermudah perpindahan antara screen), dengan root controller adalah “master” screen, dan secondary controller adalah “detail” screen.

Plih Master View Controller, dan pada selection area di panel kiri, pilih table view. Di bagian inspector sebelah kanan, pastikan Content diset ke Dynamic Protoypes.

Setting ini yang membuat kita bisa mendesign single cell dari table view seperti yang kita inginkan di Storyboard editor, dan dengan mudah membuat instance dari cell melalui coding. Kita hanya ingin cell yang standar, jadi sekarang kita pastikan style yang kita gunakan adalah Basic.

Pilih Table View Cell di sebelah kiri, dan pada Atrributes Inspector pastikan Style di set ke Basic. Dan juga set Identifer menjadi MyBasicCell.

Untuk informasi lebih detail mengenai pembuatan custom cells, silahkan lihat tutorial kami Beginning Storyboards in iOS 5 Tutorial.

Ok, karena kita sudah mensetup table view kita secara visual, kita hanya perlu mengupdate code programmnya untuk mengisi table kita dengan daftar dari serangga-serangga.

Kita akan menyimpan ScaryBugDocs kita kedalam suatu NSMutableArray, yaitu koleksi class yang digunakan untuk array yang sizenya bisa berubah secara dinamis.

Tambahkan baris dibawah ini ke dalam MasterViewController.h, antara baris @interface dan @end :

@property (strong) NSMutableArray *bugs;

Ini akan menjadi instance variable/property yang kita gunakan untuk mentrack daftar serangga kita.

Sekarang buka MasterViewController.m dan ubah seperti dibawah ini:

// Pada baris paling atas
#import "ScaryBugDoc.h"
#import "ScaryBugData.h"

// Setelah @implementation
@synthesize bugs = _bugs;

// baris paling akhir di viewDidLoad
self.title = @"Scary Bugs";

// Ganti return di shouldAutorotateToInterfaceOrientation menjadi :
return YES;

// Ganti return di tableView:numberOfRowsInSection menjadi:
return _bugs.count;

// Ganti tableView:cellForRowAtIndexPath menjadi :
- (UITableViewCell *)tableView:(UITableView *)tableView
         cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView
                             dequeueReusableCellWithIdentifier:@"MyBasicCell"];
    ScaryBugDoc *bug = [self.bugs objectAtIndex:indexPath.row];
    cell.textLabel.text = bug.data.title;
    cell.imageView.image = bug.thumbImage;
    return cell;
}

Ok, ini menarik untuk kita diskusikan..!

Pertama-tama, perhatikan bahwa kita menset sendiri property “title” menjadi “Scary Bugs”. Title adalah special built-in property dari view controllers. Ketika Navigation Controller menampilkan sebuah view controller, dia juga menampilkan apapun “title” property yang ada di title bar. Jadi dengan menset ini, kita seharusnya melihat “Scary Bugs” di title atas!

Selanjutnya, perhatikan bahwa kita membuat return menjadi yes pada bagian shouldAutorotateToInterfaceOrientation, dimana ini memberi instruksi kepada OS bahwa kita akan mensupport semua orientasi baik Portrait, Landscape, dan kebalikannya masing-masing. Kita hanya perlu melakukan langkah ini , dan dikarenakan class ini adalah UITableViewController, maka view nya akan berputar secara otomatis!

Kemudian, ketika membuat table view dengan baris yang dinamis kita harus mengubah numberOfSectionsInTableView dan numberOfRowsInSection untuk memberitahu OS berapa banya section/baris yang harus ditampilkan di table view. Karena kita hanya memiliki 1 section, kita tidak perlu mengubah apa-apa karena templatenya sendiri sudah mensetup 1 section. Untuk baris, kita hanya perlu mengembalikan jumlah object yang ada di array serangga kita.

Terakhir, kita mengimplement tableView:cellForRowAtIndexPath, dimana ini adalah method yang paling penting dalam pembuatan table view. Disini kita mensetup cell yang akan ditampilkan untuk baris tertentu. OS akan memanggil method ini satu persatu untuk setiap baris sehinga kita bisa mensetup nya.

Mari kita lihat method nya secara detail karena ini merupakan topik yang penting :

- (UITableViewCell *)tableView:(UITableView *)tableView
         cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView
                             dequeueReusableCellWithIdentifier:@"MyBasicCell"];
    ScaryBugDoc *bug = [self.bugs objectAtIndex:indexPath.row];
    cell.textLabel.text = bug.data.title;
    cell.imageView.image = bug.thumbImage;
    return cell;
}

Baris pertama memanggil fungsi bantuan dengan nama “dequeueReusableCellWithIdentifier” yang akan mengembalikan reusable cell. Apa artinya ini?

Ini adalah informasi penting untuk mengoptimalkan performance. Perlu diketahui bahwa table view dapat berisi jumlah baris yang sangat besar, tapi hanya beberapa saja yang ditampilkan di layar dalam satu waktu. Jadi, daripada kita membuat suatu cell baru setiap ada baris baru yang muncul di layar, OS bisa meningkatkan performance dengan menggunakan cell yang sudah pernah dibuat, tapi tergulung keluar layar.

Jadi itu yang dimaksud dengan dequeueReusableCellWithIdentifier. Jika tidak ada cell yang bisa digunakan, kita bisa membuat cell baru yang sudah kita setup di Interface Builder (ingat tadi kita sudah menset Basic dan memberi nama “MyBasicCell”?).

Di editor storyboard kita bisa meng-customize layout/tata letak dari suatu cell, atau menggunakan built-in yang tersedia. Dalam tutorial ini, kita memilih basic style, yang menambahkan label dan gambar yang bisa kita set.

Jika anda ingin tahu lebih mengenai beberapa opsi tampilan standard dari table view cell, silahkan lihat “Standard Styles for Table-View Cells” section pada tutorial Table View Programming Guide

Terakhir, kita mengconfigure cell dengan menset textLabel dan imageView (tersedia pada pilihan Basic style).

Percaya atau tidak, hanya itu yang kita perlu lakukan! Sekarang kita hanya perlu mensetup beberapa sample data untuk ditampilkan di table view.

Gambar-Gambar Serangga yang menyeramkan!

Untuk memperoleh gambar-gambar serangga, anda bisa mencarinya di internet atau mendownload dari Scary Bug Pictures yang saya temukan di  stock.xchng

Setelah anda mendownload atau anda memiliki koleksi sendiri, drag gambar-gambar tersebut ke root dari Project Navigator. Ketika muncul popup, pastikan “Copy items into destination group’s folder (if needed)” dicentang, kemudian click Finish.

Kemudian buka AppDelegate.m dan ubah seperti dibawah ini:

// Di baris paling atas
#import "MasterViewController.h"
#import "ScaryBugDoc.h"

// Pada awal dari application:didFinishLaunchingWithOptions
ScaryBugDoc *bug1 = [[ScaryBugDoc alloc] initWithTitle:@"Potato Bug" rating:4 thumbImage:[UIImage imageNamed:@"potatoBugThumb.jpg"] fullImage:[UIImage imageNamed:@"potatoBug.jpg"]];
ScaryBugDoc *bug2 = [[ScaryBugDoc alloc] initWithTitle:@"House Centipede" rating:3 thumbImage:[UIImage imageNamed:@"centipedeThumb.jpg"] fullImage:[UIImage imageNamed:@"centipede.jpg"]];
ScaryBugDoc *bug3 = [[ScaryBugDoc alloc] initWithTitle:@"Wolf Spider" rating:5 thumbImage:[UIImage imageNamed:@"wolfSpiderThumb.jpg"] fullImage:[UIImage imageNamed:@"wolfSpider.jpg"]];
ScaryBugDoc *bug4 = [[ScaryBugDoc alloc] initWithTitle:@"Lady Bug" rating:1 thumbImage:[UIImage imageNamed:@"ladybugThumb.jpg"] fullImage:[UIImage imageNamed:@"ladybug.jpg"]];
NSMutableArray *bugs = [NSMutableArray arrayWithObjects:bug1, bug2, bug3, bug4, nil];

UINavigationController * navController = (UINavigationController *) self.window.rootViewController;
MasterViewController * masterController = [navController.viewControllers objectAtIndex:0];
masterController.bugs = bugs;

Disini kita hanya menggunakan initializer ScaryBugDoc untuk membuat 4 sample serangga, membuat title, rating dan gambar untuk setiap serangganya. Kita menambahkan semuanya ke dalam NSMutableArray, dan menset nya ke dalam table view.

Sebenarnya, kita juga bisa mendapat pointer ke RootViewController karena kita tahu ini adalah controller pertama dari stack navigation controller. Memang ada cari lain untuk mendapatkan pointernya, tapi sepertinya ini adalah cara yang paling gampang.

Selesai sudah! Complile dan run app nya, dan jika semua berjalan dengan baik, anda bisa melihat daftar dari serangga yang menakutkan di table view!

Apa selanjutnya setelah ini?

Ini  adalah sample projectnya dengan semua code yang sudah kita buat sejauh ini.

Silahkan infokan ke saya jika ada dari tutorial diatas yang membingungkan atau anda ingin saya menampilkan lebih detail mengenai apapun.

Pada seri berikutnya, kita akan membahas bagaimana membuat detail view dari serangga-serangga supaya kita bisa mengedit dan merating nya!