Mempelajari Lebih Jauh Tentang CloudKit di iOS Part III – FoodPin Apps

Jika dipostingan sebelumnya kita membahas tentang API Convenience, API Operational, Activity Indicator di iOS dan Lazy Loading di iOS, nah di postingan kali ini kita sedikit membahas tentang NSCache untuk optimasi aplikasi. So check this …

Implementasi CloudKit di iOS Part III

Pada aplikasi sebelumnya kita sudah membuatnya resposive dan sudah mengalami peningkatan performa, tapi ada satu bagian lagi yang masih bisa kita tingkatkan efisiensinya, yaitu di gambanya. Mari kita contohkan, pada halaman Feed pada aplikasi coba scroll kebawah, maka cell sebelumnya (bagian atas) akan hilang. Jika kita kembali lagi ke cell atas maka aplikasi harus mendownload kembali data cell di iCloud. Nah inilah yang dinamakan kurang efisiennya sebuah sistem.

Untuk membuatnya menjadi efisien, kita akan menggunakan teknik chacing (bukan cacing loh ya.. :D)Nah pada iOS SDK, untuk memanfaatkan teknik ini kita menggunakan class yang dinamakan dengan NSCacheNSCache berfungsi sebagai kamus dan pemyimpanan data, tapi ini berbeda dengan database. Kurang lebih cara kerjanya seperi yang terlihat pada gambar dibawah ini:

Cache Memory
Cache Memory

Seperti yang telah dijelaskan sebelumnya bahwa CloudKit akan otomatis mendownload gambar dan menyimpannya dalam sistem file lokal. Dan untuk mendapatkan lokasi gambar tersebut kita menggunakan property fileURL dari class CKAssets. Nah sama halnya dengan NSCache, untuk mengimplementasikan teknik caching kita membutuhkan lokasi gambar dengna fileURL. Untuk itu kita perlu meng-update halaman Feed dengan beberapa kondisi berikut:

  • Jika gambar telah didownload dari iCloud untuk pertama kali, maka gambar tersebut harus di cache menggunakan fileURL nya, danmenggunakan ID record sebagai kata kunci NSCache nya.
  • Ketika table view memanggil kembali gambar yang telah didownload, maka aplikasi harus mengecek gambar telah ada di chace atau belum. Jika ada, kita ambil file URL gambar dari cache dan menampilkannya. Jika belum belum ada, maka aplikasi harus mendownload dari iCloud.

Untuk membuat object cache menggunakan NSCache, kita harus menambahkan code dibawah ini pada class FeedTableViewController:

var imageCache:NSCache = NSCache()

Pada method tableView(_:cellForRowAtIndexPath:) kita tambahkan beberapa kondisi untuk mengecek apakah URL image sudah ada di cache atau belum. Disini kita menggunakan ID record dari restaurant sebagai kata kuncinya:

Nah sekarang kita sudah bisa menjalankan aplikasi untuk mencobanya. Seharusnya gambar yang telah didownload sudah berada di cache.


 

Pull to Refresh

Pull RefreshNah sekarang aplikasi kita sudah menjadi lebih responsive lagi setelah mengimplementasikan NSCache. Tapi masih terdapat kelemahan dari implementasi sebelumnya, yaitu saat kita scroll konten kebawah dan kembali lagi ke atas, tidak ada data pembaruan yang bisa ditampilkan walaupun sudah ada data baru yang sudah ditambahkan. Dibanyak aplikasi populer yang ada di iOS, pada umumnya memperbolehkan user untuk me-refresh kontennya dengan menggunakan Pull-to-Refresh. Interaksi Pull-to-Refresh ini di buat oleh Loren Bricher yang berfungsi untuk mengupdate data dari table view. Semenjak interaksi ini diperkenalkan, sudah banyak aplikasi yang mengimplementasikannya bahkan aplikasi bawaan Apple.

Nah oleh karena itu Apple menambahkan interaksi ini menjadi control pull-to-refresh di iOS SDK yang dikenal dengan UIRefreshControl. Dengan adanya control ini, kita hanya perlu menambahkan sedikit code untuk mengimplementasikannya pada aplikasi kita.

Pada FeedTabelViewController, tambahkan code dibawah ini pada method viewDidLoad :

Sangat mudah untuk menggunakan UIRefreshControll ini, kita hanya perlu menginisiasinya dan menambahkannya pada property refreshControl yang ada di table view.

Oya, jika kita coba menjalankan aplikasi, harusnya pull-to-refresh nya sudah bekerja. Dan ketika kita menambahkan restaurant baru maka data restaurant itu juga sudah ditampilkan. Tapi masih ada masalah, yaitu refresh controllnya masih berjalan walaupun kontenya sudah di load (tidak ada lagi data baru).

Pull-to-refresh pada aplikasi FoodPin
Pull-to-refresh pada aplikasi FoodPin

Jadi bagaimana kita menghandle control ini?

Nah disini kita harus menambahkan kondisi untuk menyembunyikan refresh control. Ketika data sudah berhasil di-load pada table view, kita hanya perlu menambahkan method endRefreshing untuk menyembunyikan control. Update queryCompletionBlock yang ada di method getRecordFromCloud dengan code dibawah ini:

Sekarang coba jalankan aplikasi, seharusnya sudah bekerja seperti yang kita inginkan. Nah untuk contoh code pada pembahasan bagian ini bisa didownload disini: https://www.dropbox.com/s/lq0aue4jrne35a1/FoodPinCloudKit-2.zip?dl=0


Menyimpan Data menggunakan CloudKit

Kita telah membahas tentang query dari cloud tapi kita belum membahas bagaimana kita bisa menyimpan data di cloud. Pada pembahasan ini, kita akan meng-explore lebih lanjut tentang framework CloudKit dan melihat bagimana cara melakukan penyimpanan data.

Disini kita menggunakan API Convenience yang ada di class CKDatabase:

func saveRecord(_ record: CKRecord!, completionHandler completionHandler: ((CKRecord!, NSError!) -> Void)!)

Method saveRecord diatas bertugas untuk mengambil object CKRecord dan meng-uploadnya ke iCloud, lalu akan ada laporan berupa status berhasil atau tidak.

Untuk mendemonstrasikan penggunaan API, kita akan membuat fungsi Add Restaurant pada aplikasi FoodPin. Ketika user menambahkan restaurant, maka akan disimpan ke dalam local database juga menguploadnya ke cloud.

Tambahkan method dibawah ini pada class AddTableViewController:

Method saveRecordToCloud berfungsi untuk mengambil object Restaurant yang merupakan object penyimpanan. Nah yang perlu kita lakukan selanjutnya adalah bagaimana cara code untuk memanggil method ini pada aplikasi. Untuk melakukannya, tambahkan code dibawah ini tepat sebelum method performSegueWithIdentifier:

saveRecordToCloud(restaurant)

Sekarang kita telah siap untuk menjalankan aplikasi dan melihat perubahannya. Klik tombol untuk menambahkan restaurant yang baru, ketika kita selesai menyimpan restaurant yang baru, halaman Feed akan menampilkan restaurant baru di cellnya, seperti yang terlihat pada gambar dibawah ini.

Restaurant baru yang telah di upload ke Cloud
Restaurant baru yang telah di upload ke Cloud

Mengurutkan Restaurant berdasarkan Waktu Pembuatan

Kita telah berhasil menyimpan data restaurant yang baru pada cloud, tapi data cell restaurant yang ditampilkan bisa dibilang masih acak, sehingga susah menemukan mana data restaurant yang baru ditambahkan. Nah tentu dengan mengurutkan berdasarkan waktu pembuatan akan membuat aplikasi menjadi lebih efektif.

Nah pertama kali buka dashboard CloudKit dan atur tipe dari record Restaurant. Dibawah index meta, klik pilihan Field dan pilih checkbox Sort untuk “Date Created”, lalu simpan. Seperti yang terlihat pada gambar dibawah ini.

Mengaktifkan fitur sorting table untuk field Data Created
Mengaktifkan fitur sorting table untuk field Data Created

Setelah filed metadata di atur, kita pindah kebagian coding. Sebenarnya Sorting sudah ada di class CKQuery, jadi pada method getRecordFormCloud ini:

// Prepare the query
let predicate = NSPredicate(value: true)
let query = CKQuery(recordType: "Restaurant", predicate: predicate)

Tambahkan sebaris code dibawah ini untuk mengimplementasikan fungsi sortingnya:

query.sortDescriptors = [NSSortDescriptor(key: "creationDate", ascending: false)]

Well mungkin cukup sekian pembahasan kali ini guys, oya untuk contoh codenya bisa didownload disini: https://www.dropbox.com/s/dl5zf3czo5lblix/FoodPinCloudKit-3.zip?dl=0

Semoga bermanfaat ya Guys.., See yaa .. 😉

 

 

Iklan

Good People write good comments ..

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s