Jaringan Menjadi Mudah Dengan AFNetworking

() translation by (you can also view the original English article)

Jaringan itu sulit. Ada berbagai bagian yang bergerak yang terlibat dan banyak faktor yang perlu dipertimbangkan untuk membuatnya bekerja. Untungnya, sejumlah perpustakaan open-source telah muncul dari waktu ke waktu untuk membuat jaringan lebih mudah. AFNetworking, dibuat dan dipelihara oleh orang-orang Gowalla, adalah salah satu perpustakaan semacam itu. Tutorial ini akan memperkenalkan Anda kepada kerangka AFNetworking sementara juga menunjukkan bagaimana cara query iTunes Store API!

Dalam tutorial ini, saya akan memperkenalkan Anda kepada AFNetworking dan menunjukkan kepada Anda sekilas tentang apa yang ditawarkan perpustakaan ini. Setelah menghabiskan beberapa menit dengan perpustakaan ini, Anda akan melihat bahwa itu dirancang dengan kemudahan penggunaan dalam pikiran. Ini tidak hanya mempercepat pengembangan Anda, tetapi juga akan mengurus banyak tugas jaringan yang telaten. Kami akan membangun aplikasi sederhana yang mempertanyakan iTunes Store untuk film yang cocok dengan istilah pencarian 'harry'. Hasil kueri kami akan ditampilkan dalam tampilan tabel.

Ringkasan proyek

Aplikasi yang kami maksudkan adalah untuk membuat kueri di iTunes Store Search API. Secara khusus, kami mencari di iTunes Store untuk film yang cocok dengan istilah pencarian 'harry'. Jika permintaan kita berhasil, kita memproses hasilnya dan menampilkannya dalam tampilan tabel. Setiap baris mewakili film dengan judul, sutradara, dan thumbnail yang menampilkan karya seni film. Siap? Mari kita mulai.

Pengaturan Proyek

Sebelum tangan kita kotor dengan AFNetworking, kita perlu membangun fondasi dasar. Ini berarti mengatur proyek kami, membuat tampilan tabel, dan menambahkan tampilan indikator aktivitas. Kami akan menunjukkan indikator aktivitas saat permintaan kami diproses oleh iTunes Store. Ini akan memberi pengguna sedikit tambahan umpan balik yang berharga yang sering diabaikan.

Buat proyek baru di Xcode dengan memilih Templat Aplikasi Tampilan Tunggal dari daftar templat. Beri nama aplikasi Anda NetworkingIsFun, masukkan pengenal perusahaan, atur 'iPhone' untuk keluarga perangkat, dan hapus centang 'Gunakan Papan Cerita'. Anda dapat membiarkan sisanya tidak tersentuh, tetapi pastikan bahwa Gunakan Penghitungan Referensi Otomatis dicentang. Beri tahu Xcode di mana Anda ingin menyimpan proyek Anda dan tekan 'Simpan'.

AFNetworking is Fun: Project Setup - Figure 1

AFNetworking is Fun: Project Setup - Figure 2

Menambahkan Tabel dan Tampilan Indikator Kegiatan

Meskipun Interface Builder luar biasa, saya sering membangun antarmuka saya secara terprogram, dan itulah yang akan kami lakukan dalam tutorial ini juga. Ini akan memungkinkan kita untuk hanya fokus pada kode tanpa terganggu oleh Interface Builder. Buka ViewController.h dan buat tiga variabel instan (ivar) serta properti untuk ivars ini. Karena kita akan bekerja dengan tampilan tabel, jangan lupa untuk membuat pengendali tampilan Anda sesuai dengan protokol UITableViewDataSource dan UITableViewDelegate. File header pengontrol tampilan Anda sekarang akan terlihat mirip dengan yang di bawah ini:


#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UITableViewDataSource, UITableViewDelegate> {
    UITableView *_tableView;
    UIActivityIndicatorView *_activityIndicatorView;
    NSArray *_movies;
}

@property (nonatomic, retain) UITableView *tableView;
@property (nonatomic, retain) UIActivityIndicatorView *activityIndicatorView;
@property (nonatomic, retain) NSArray *movies;

@end

Jika Anda bingung dengan penggunaan underscores, saya sarankan Anda membaca tentang hal ini di sini. Jangan ragu untuk mengabaikan garis bawah jika menurut Anda terlihat jelek atau membuat Anda merasa tidak nyaman. Terlepas dari garis bawah, seharusnya tidak ada kejutan. Kami menyatakan UITableView dan UIActivityIndicatorView serta NSArray, yang akan kami gunakan untuk menyimpan hasil yang kami dapatkan dari permintaan pencarian kami. Siap? Mari kita menuju ke file implementasi pengontrol tampilan kami.

Karena kami menyatakan tiga properti di file header kami, kami perlu mensintesis aksesor mereka di ViewController.m. Sekali lagi, jika garis bawah membingungkan Anda, Anda dapat meninggalkannya.

1
2	@synthesize tableView = _tableView, activityIndicatorView = _activityIndicatorView, movies = _movies;

Dalam metode viewDidLoad kami, kami menyiapkan tampilan tabel dan indikator aktivitas kami. Kode di bawah ini harus cukup jelas untuk sebagian besar. Jika Anda belum pernah mengatur tampilan tabel tanpa menggunakan Pembuat Antarmuka, Anda mungkin melihat beberapa baris yang tidak Anda kenal. Alih-alih memasang tampilan tabel di Interface Builder, kami akan mengurusnya dalam metode viewDidLoad. Setelah memanggil metode viewDidLoad superclass, kita initizalize tampilan tabel kami dengan bingkai dan gaya, dan kami mengatur controller pandangan kami sebagai sumber data dan delegasi dari tampilan tabel kami. Saat aplikasi kami diluncurkan, kami menyembunyikan tampilan tabel kami karena kami tidak memiliki apa pun untuk ditampilkan selama permintaan kami belum mengembalikan hasil apa pun. Sebelum menambahkan tampilan tabel sebagai subview ke tampilan pengontrol tampilan kami, kami menetapkan topeng autorisasi. The autoresizing mask mendefinisikan bagaimana tampilan tabel harus diubah ukurannya jika tampilan induk - tampilan pengontrol tampilan yang kita tambahkan tampilan tabel - perubahan ukuran. Ini terjadi ketika perangkat diputar, misalnya. Bingung? Jangan khawatir tentang itu. Itu tidak penting untuk aplikasi ini.


- (void)viewDidLoad {
    [super viewDidLoad];
    
    // Setting Up Table View
    self.tableView = [[UITableView alloc] initWithFrame:CGRectMake(0.0, 0.0, self.view.bounds.size.width, self.view.bounds.size.height) style:UITableViewStylePlain];
    self.tableView.dataSource = self;
    self.tableView.delegate = self;
    self.tableView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    self.tableView.hidden = YES;
    [self.view addSubview:self.tableView];
    
    // Setting Up Activity Indicator View
    self.activityIndicatorView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
    self.activityIndicatorView.hidesWhenStopped = YES;
    self.activityIndicatorView.center = self.view.center;
    [self.view addSubview:self.activityIndicatorView];
    [self.activityIndicatorView startAnimating];
    
    // Initializing Data Source
    self.movies = [[NSArray alloc] init];
}

Menyiapkan tampilan indikator aktivitas sama mudahnya. Kami menginisialisasi tampilan indikator aktivitas dengan gaya yang ditentukan sebelumnya, menyetel hidesWhenStopped properti ke YES, dan menempatkannya di tengah tampilan induknya. Setelah menambahkannya ke tampilan pengontrol tampilan, kami mulai menghidupkan indikator aktivitas. Indikator aktivitas akan secara otomatis menampilkan dirinya karena kita mengatur hidesWhenStopped properti ke YES.

Pada akhir metode viewDidLoad kami, kami menginisialisasi susunan film. Kami akan menggunakannya nanti untuk menyimpan hasil dari permintaan pencarian kami.

Protokol Tampilan Tabel

Untuk tutorial ini, kami hanya akan mengimplementasikan dua metode dari protokol sumber tampilan data tabel. Kedua metode ini diperlukan. Ini adalah implementasi minimum yang diperlukan untuk mendapatkan tampilan tabel kami dan berjalan. Meskipun kami telah menetapkan kontroler pandangan kami sebagai delegasi tampilan tabel, kami tidak akan menggunakan salah satu metode delegasi dalam aplikasi kami. Jika Anda telah menggunakan tampilan tabel sebelumnya, Anda tidak akan menemukan kejutan apa pun dalam implementasi metode yang ditunjukkan di bawah ini.


- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    if (self.movies && self.movies.count) {
        return self.movies.count;
    } else {
        return 0;
    }
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *cellID = @"Cell Identifier";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID];
    
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellID];
    }
    
    return cell;

}

Dalam tableView: numberOfRowsInSection :, kita perlu mengembalikan jumlah baris di setiap bagian dari tampilan tabel. Dalam contoh kami, tampilan tabel hanya berisi satu bagian (default), yang membuat semuanya sedikit lebih mudah. Pertama kita periksa apakah variabel film kita tidak nol dan kita verifikasi bahwa ini berisi item. Jika kedua persyaratan ini terpenuhi, kita kembalikan jumlah item dalam susunan film, jika tidak, kita kembalikan nol.

Metode tableview: cellForRowAtIndexPath: kita juga dasar. Kami mulai dengan menanyakan tampilan tabel kami apakah ada sel yang dapat kami gunakan kembali. Jika bukan ini masalahnya, kami membuat sel baru dengan style dan menggunakan kembali identifier. Kita akhiri implementasi kita dengan mereturn sel kita. Ini akan lakukan untuk saat ini. Anda sekarang dapat membangun dan menjalankan aplikasi Anda. Jika Anda mengikuti langkah-langkah dengan benar, Anda akan melihat indikator aktivitas berputar seperti orang gila dan tampilan tabel harus disembunyikan.

Tambahkan AFNetworking ke Mix

Menambahkan AFNetworking ke proyek Anda sangatlah mudah. Mulailah dengan mengunduh pustaka dari GitHub dan ekstrak arsip. Arsip berisi folder bernama AFNetworking, yang berisi file sumber yang perlu kami sertakan dalam proyek kami. Seret seluruh folder ini ke dalam proyek Xcode Anda dan pastikan Anda memeriksa item Salin ke folder grup tujuan (jika diperlukan) dan tambahkan file sumber ke target Anda juga.

AFNetworking is Fun: Adding AFNetworking to the Mix - Figure 3

Setelah menambahkan pustaka AFNetworking ke proyek Anda, buat dan jalankan aplikasi Anda dan saksikan semuanya berantakan. Apa yang terjadi dengan proyek kami? Mengapa kita mendapatkan semua peringatan dan kesalahan ini? Ketika kami menyiapkan proyek Xcode kami, kami mengaktifkan Automatic Reference Counting (ARC). Pada saat penulisan, pustaka AFNetworking tidak menggunakan ARC. Namun jangan khawatir, kami masih dapat menggunakan pustaka yang rapi ini dengan sedikit usaha. Yang perlu kita lakukan adalah memberi tahu compiler bahwa semua file sumber dari pustaka AFNetworking tidak menggunakan ARC. Itu dia.

Bagaimana kita melakukan ini? Pilih proyek Anda di Navigator Proyek dan pilih target Anda. Klik tab Build Phases di navigasi atas dan buka drawer Compile Source. Tabel ini menunjukkan kepada Anda semua file sumber kompilator akan dikompilasi pada waktu kompilasi. Kolom kiri menunjukkan nama-nama file dan kolom kanan menunjukkan bendera yang harus diketahui oleh kompilator.

AFNetworking is Fun: Compiler Flags - Figure 4

Anda dapat melihat bendera ini sebagai instruksi atau pesan untuk compiler. Yang perlu Anda lakukan adalah menambahkan bendera compiler ke setiap file sumber dari pustaka AFNetworking. Untuk melakukan ini, pilih file sumber dari daftar dan klik dua kali sel di kolom kanan. Sebuah jendela kecil akan muncul di mana Anda dapat menambahkan satu atau beberapa flag kompilator. Dalam kasus kami, cukup ketik -fno-objc-arc dan klik Selesai. Bendera ini memberitahu compiler bahwa file sumber tidak menggunakan ARC. Pastikan Anda menambahkan bendera ini ke semua sepuluh file sumber pustaka AFNetworking.

AFNetworking is Fun: Compiler Flags - Figure 5

Meminta API Pencarian iTunes Store

AFNetworking adalah pustaka yang dapat melakukan banyak hal untuk Anda, tetapi saat ini kami hanya akan menggunakan dua fitur yang rapi. Sebelum kita dapat mulai menggunakan kelas AFNetworking, kita perlu menambahkan pernyataan impor berikut tepat di bawah pernyataan impor pertama dalam file implementasi pengontrol tampilan Anda.

1
2	#import "AFNetworking.h"

Pernyataan impor ini akan memberi kita akses ke semua kelas AFNetworking. Kembali ke metode viewDidLoad pengontrol tampilan kami dan tambahkan cuplikan berikut segera setelah inisialisasi susunan film.


NSURL *url = [[NSURL alloc] initWithString:@"http://itunes.apple.com/search?term=harry&country=us&entity=movie"];
NSURLRequest *request = [[NSURLRequest alloc] initWithURL:url];

AFJSONRequestOperation *operation = [AFJSONRequestOperation JSONRequestOperationWithRequest:request success:^(NSURLRequest *request, NSHTTPURLResponse *response, id JSON) {
    NSLog(@"%@", JSON);
    
} failure:^(NSURLRequest *request, NSHTTPURLResponse *response, NSError *error, id JSON) {
    NSLog(@"Request Failed with Error: %@, %@", error, error.userInfo);
}];

[operation start];

Biarkan saya menjelaskan apa yang sedang terjadi. Di baris pertama, kami membuat NSURL untuk permintaan kami. String yang kami gunakan dalam inisialisasi sesuai dengan format yang diharapkan oleh iTunes Store Search API. Sintaks dari API Pencarian cukup mudah: Istilah yang kami cari adalah 'harry', kami membatasi pencarian kami ke US iTunes Store, dan kami hanya mencari film. Mudah, kan?

Selanjutnya, kami menginisialisasi NSURLRequest dan meneruskan NSURL yang baru saja kami buat. Kemudian AFNetworking menendang masuk. AFNetworking berisi beberapa kelas yang sangat khusus yang membuat pekerjaan kami sangat mudah. Yang kami gunakan di sini adalah AFJSONRequestOperation. Ini adalah kelas yang dirancang untuk mengambil dan mengurai data JSON di latar belakang. Sesuai namanya, kelas ini adalah subkelas NSOperation atau, lebih tepatnya, salah satu superclasses kelas ini mewarisi dari NSOperation. Kelas memungkinkan Anda mengambil data yang diminta dan juga mem-parsing respons JSON. Ini berarti bahwa kita tidak harus berurusan dengan JSON mentah. Data yang dikembalikan sudah siap digunakan dalam aplikasi Anda. AFNetworking menggunakan built-in JSON parser pada iOS 5 dan kembali ke parser JSON sendiri untuk versi iOS yang lebih lama.

Menggunakan AFJSONRequestOperation mudah karena hanya memiliki satu metode kelas. Metode kelas ini menerima tiga argumen: (1) NSURLRequest, (2) blok sukses, dieksekusi ketika permintaan berhasil, dan (3) blok kegagalan, dieksekusi ketika permintaan gagal. Jika blok baru untuk Anda atau Anda tidak nyaman menggunakannya, maka saya sarankan membaca tutorial oleh Collin Ruffenach tentang blok dan enumerasi di Mobiletuts +. Blok keberhasilan membutuhkan tiga argumen: (1) NSURLRequest kami, (2) NSHTTPURLResponse permintaan kami, dan (3) objek JSON yang diurai. Blok kegagalan hampir identik. Satu-satunya perbedaan adalah bahwa dibutuhkan argumen tambahan, NSError yang berisi lebih banyak informasi tentang apa yang salah jika permintaan kami gagal.

Untuk tujuan pengujian, kami membuat log objek JSON yang diurai untuk melihat apa yang dikirimkan API iTunes Store Store kembali kepada kami. Selain itu, kami juga mencatat kesalahan di blok kegagalan jika permintaan kami gagal. Sebelum membangun dan menjalankan aplikasi kita sekali lagi, kita perlu memulai operasi dengan memanggil start dari objek operasi kita. Bangun dan jalankan aplikasi Anda dan lihat hasilnya di konsol.

Jika semua berjalan dengan baik, Anda akan melihat hasil permintaan kami masuk ke konsol. Objek JSON yang diurai adalah kamus dengan dua kunci: (1) resultCount, yang berisi jumlah hasil yang dikembalikan dan (2) hasil aktual sebagai larik kamus. Kami tidak hanya mencatat respons ke konsol untuk melihat apakah permintaan kami berhasil, sekarang kami dapat melihat kunci untuk setiap item dalam larik hasil. Kami akan membutuhkan kunci ini untuk menampilkan beberapa informasi dalam tampilan tabel kami.

Mempopulai Tampilan Tabel

Kami sekarang siap untuk menunjukkan hasil dalam tampilan tabel kami. Ganti pernyataan log di blok sukses dengan cuplikan yang ditunjukkan di bawah ini. Kita mulai dengan menetapkan larik hasil dari objek respons ke susunan film. Satu-satunya hal yang tersisa untuk dilakukan adalah menyembunyikan indikator aktivitas dengan menghentikannya, menunjukkan tampilan tabel, dan me-reload tampilan tabel dengan data baru yang disimpan dalam susunan film.


self.movies = [JSON objectForKey:@"results"];
[self.activityIndicatorView stopAnimating];
[self.tableView setHidden:NO];
[self.tableView reloadData];

Selanjutnya kita mengubah metode tableView: cellForRowAtIndexPath:. Sesuaikan penerapan Anda untuk mencerminkan yang di bawah ini. Setelah mendapatkan referensi ke sel, kami meminta susunan film untuk item yang benar, dan memperbarui label sel dengan judul dan sutradara film. Bangun dan jalankan aplikasi Anda.


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *cellID = @"Cell Identifier";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellID];
    
    if (!cell) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellID];
    }
    
    NSDictionary *movie = [self.movies objectAtIndex:indexPath.row];
    cell.textLabel.text = [movie objectForKey:@"trackName"];
    cell.detailTextLabel.text = [movie objectForKey:@"artistName"];
    
    return cell;
}

Anda mungkin telah memperhatikan bahwa tidak ada thumbnail yang terlihat. Mari kita perbaiki dengan menambahkan tiga baris tambahan ke metode tableView: cellForRowAtIndexPath: kami. Bangun dan jalankan aplikasi Anda.

1
2	NSURL *url = [[NSURL alloc] initWithString:[movie objectForKey:@"artworkUrl100"]];
3	NSData *data = [NSData dataWithContentsOfURL:url];
4	cell.imageView.image = [[UIImage alloc] initWithData:data];

Apakah Anda memperhatikan bahwa tampilan tabel kami tidak bergulir dengan mulus. Mengapa demikian? Seperti yang saya sebutkan di tutorial sebelumnya, Anda harus selalu memastikan bahwa utas utama aplikasi Anda tetap responsif. Dalam penerapan metode tableView: cellForRowAtIndexPath: kami saat ini, kami mengunduh thumbnail pada utas utama. Ini berarti antarmuka pengguna tidak dapat diperbarui sampai permintaan untuk thumbnail selesai. Gambar mini kami sangat kecil sehingga permintaan tidak butuh waktu lama untuk diselesaikan, tetapi bayangkan menggunakan pendekatan yang sama untuk aset yang lebih besar. Pengalaman pengguna akan sangat buruk. Bahkan untuk aplikasi sederhana kami, pengalaman pengguna tidak dapat diterima. Namun, kami dapat memperbaiki ini dengan fitur yang sangat berguna dari perpustakaan AFNetworking.

AFNetworking ke Rescue

Pencipta AFNetworking melihat kebutuhan untuk mengunduh aset di latar belakang juga. Oleh karena itu mereka menciptakan kategori untuk UIImageView. Kategori ini memungkinkan Anda mengunduh gambar di latar belakang hanya dengan dua baris kode. Kategori ini adalah penghemat kehidupan sejati. Lihatlah cuplikan di bawah ini.

1
2	NSURL *url = [[NSURL alloc] initWithString:[movie objectForKey:@"artworkUrl100"]];
3	[cell.imageView setImageWithURL:url placeholderImage:[UIImage imageNamed:@"placeholder"]];

Baris kode pertama tetap sama. Pada baris kedua, kami memberi tahu tampilan gambar tempat thumbnail berada dengan meneruskan NSURL dan kami meneruskan gambar placeholder, yang ditampilkan selama permintaan kami belum mengembalikan respons. Betapa kerennya itu? Yang perlu kita lakukan adalah menambahkan gambar placeholder ke proyek kita. Ini dapat berupa gambar apa pun yang Anda inginkan, tetapi Anda dapat menemukan gambar yang saya gunakan sebagai placeholder dalam file unduhan yang dilampirkan pada tutorial ini. Setelah Anda menambahkan gambar placeholder, buat dan jalankan aplikasi Anda dan uji sendiri seberapa halus tampilan tabel bergulir!

Kesimpulan

Perhatikan bahwa aplikasi kami sangat mendasar dalam pelaksanaannya karena tidak melakukan caching dan kami hanya dapat mencari di iTunes Store untuk istilah 'harry' di bagian film. Namun, dengan sedikit usaha Anda dapat membuat aplikasi rapi untuk mencari di iTunes Store dengan cara yang lebih dinamis.

Saya harap tutorial ini meyakinkan Anda bahwa perpustakaan AFNetworking adalah alat yang hebat untuk dimiliki di gudang senjata Anda. Hal ini dapat melakukan lebih banyak dari yang saya tunjukkan dalam posting ini, tetapi tujuan utama dari tutorial ini adalah untuk membuat Anda siap bekerja dengan AFNetworking dan siap untuk menggunakannya dalam skenario dunia nyata.