Membuat Fitur Delete, Custom Action Button dan MVC di iOS – FoodPin App

Jika di tutorial sebelumnya kita telah berhasil memodifikasi pilihan tabel di aplikasi, nah di tutorial kali ini kita akan menambahkan fitur delete pada aplikasi ini. Selain itu kita juga akan membahas tentang bagaimana membuat Custom Action Button di iOS dan juga bagaimana MVC Pattern menjadi model penting di aplikasi iOS.

Table Row Deletion Cover

Model-View-Controller

Sebelum memulai ke tahapan coding, di awal artikel ini mari kita membahas tentang Model-View-Controller (MVC), yang meruapakan design pattern paling banyak digunakan untuk pemograman user interface.

Memahami Model-View-Controller

Apapun bahasa pemograman yang kita pelajari, satu konsep penting yang membuat kita menjadi programmer terbaik adlah Separation of Concerns (SoC). Konsep ini sangat mudah. Concerns adalah aspkek berbeda dari fungsionalitas perangkat lunak. Konsep yang menganjurkan developer untuk memecahkan program kedalam beberapa area concern dan setiap area tersebut memeliki tanggung jawabnya msaing-masing. Delegate pattern yang biasanya ditemukan di pemograman iOS yang juga telah kita gunakan di pembahasan sebelumnya juga merupakan contoh dari SoC.

Di pembahasan kali ini, model-view-controller (MVC) merupakan contoh lainnya dari SoC. Ide utama di balik MVC adalam memisahkan user interface kedalam tiga area (group dari object) yang di setuap areanya memiliki tanggung jawab untuk fungsionalitas yang particular. Seperti yang telah disebutkan sebelumnya, MVC membagi user interface menjadi tiga bagian:

Model – model bertanggung jawab untuk memegang data atau operasi yang berhubungan dengan data. Model bisa dalam bentuk array object yang mengirimkan table data. Add, update, delete merupakan contoh operasinya. Di dunis bisnis, operasi ini dinamakan dengan business rules.

View – view lah yang mengatur tampilan dari informasi. Contohnya. UITabelView yang menampilkan informasi dalam format daftar. Atau UIButton yang ada di screen sebagai contoh lainnya.

Controller – controller adalah jembatan antara model dan view. Dia menerjemahkan user interface interaction dari view (contohnya sentuhan) ke dalam aksi yang nantinya dikerjakan oleh model. Sebagai cntoh ketik user menyentuh tombol di view. Sebagai konsekuensinya, controller lah yang memutuskan operasi delete yang ada di model. Ketika itu selesai, model akan memanggil view untuk memperbarui tampilan.

Untuk membantu kita memahami lebih dalam tentang MVC ini, mari kita contohkan kedalam aplikasi sederahana yang pernah kita buat di postingan sebelumnya. Aplikasi menampilkan dafat dari restaurant dalam table view. Jika kita tampilkan implementasi dalam bentuk visual, berikutlah gambarannya:

Ilustrasi Model MVC menggunakan contoh tabel sederhana
Ilustrasi Model MVC menggunakan contoh tabel sederhana

Data restaurantNames di simpan dalam object array adalah Model. Setiap baris table merupakan elemen dari array restaurantNames. Object UITabelView merupakan view yang dapat dilihat oleh user, dimana itu bertanggung jawab untuk semua tampilan (seperti warna dari table, gaya dari tableview, dsb). UITableViewController lah sebagai Controller nya, yang jadi jembatan antara table viewdan data model. Dia mengatur table view dan bertanggung jawab untuk me-load data dari model.


 

Menghapus Row dari UITableView

Saya harap Anda tambah mengerti dengan pernjelasan Model-View-Controller sebelumnya. Mari kita pindah ke bagian coding dan melihat bagaimana kita bisa menghapus sebuah baris dari table view. Kita akan melanjutkan pengembangan aplikasi FoodPin dan menambahkan fitur delete didalamnya.

Jika kita telah mengerti konsep model MVC, maka kita juga akan punya beberapa ide untuk mengimplementasikan row deletion. Berikut kegiatan yang akan kita lakukan selanjutnya:

  • Menggunakan fitur swipe-to-delete dari table view sehingga fitur delete dapat dijankan
  • Menghapus data dari table data yang sama yang add di data model
  • Reload table view untuk melihat perubahan dari data.

Menggunakan Fitur Swipe-to-Delete

Di Aplikasi iOS, umumya user akan menyentuh secara horizontal untuk menampilkan tombol delete. Nah untuk memanggil fitur bawaan tersebut kita harus memanggil kembali protoco UITableViewDataSource yang telah kita adopsikan sebelumnya, dimana disana terdapat method yang dinamakan dengan tableView(_:commitEditingStyle:forRowAatIndexPath:). Untuk menggunakan fitur swipe-to-delete dari table view, kita harus mengimplememtasikan method tersebut. Jika method tersebut sudah ada, table view akan otomatis menampikan tombol “Delete”.

Berikut cara termudah untuk menambah fitur tersebut di file RestaurantTableViewController.swift:

Coba jalankan aplikasi untuk melakukan testing, seharusnya akan tampil seperti gambar dibawah.

Fitur Swipe untuk mendelete
Fitur Swipe untuk mendelete

Menghapus Row dari Model

Kerjaan selanjutnya adalah mengimplementasikan method dan menyediakan beberapa code untuk bisa menghapus table data. Dari pernyataan method, paramates indexPath menyediakan kita dengan nomor baris dari cell untuk melakukan delete. Jadi kita bisa membuat informasi untuk menghapus elemen yang dinginkan dari data array.

Do aplikasi FoodPin, restaurantNames, restaurtanLocation, restaurantTypes dan restaurantIsVisited merupakan model data. Intinya kita harus menghapus data restaurant yang telah terpilih pada semua array. Di Swidt, kita bisa menghapus item dari array dengan menggunakan method removeAtIndex. Berikut code untuk menghapus row datanya:

Method diatas mendukung dua tipe untuk fitur edit seperti Insert dan Delete. Semenjak fokusan kita untuk fitur delete, kita hanya menghapus data ketika user menyentuh tombol Delete.

Coba test aplikasi sekali lagi. Ooopss!! Aplikasi ternyata tidak berjalan semestinya. Ketika kita menyentuh tombol Delete, cell-nya tidak terhapus. Mungkin kita akan berpikir datanya tidak benar-benar terhapus. Mari kita lakukan debug. Masukkan code dibawha ini di akhir method untuk menampilkan konten dari array yang telah update.

Di Swift, kita menggunakan method println untuk menampilkan pesan di console. Code diatas menampilkan total nomor dari item yang ada di array restaurantNames dan konten setelah dilakukan delete. Umumnya console ini tidak ditampikan di Xoce, untuk menampilkannya pilih View>Debug Area>Active Console.

Sekarang coba compile dan jalankan aplikasi kembali. Hapus baris pertama dari cell (contohnya Café Deadend) dari table view. Kita akan menemukan keluaran dair console dibawah area debug seperti gambar dibawah ini.

Area debug dan console
Area debug dan console

Awalnya array kita berisikan 21 item restaurant, tapi setelah dilakukan penghapusan menjadi 20. Dan output “Café Deadend” juga sebenarnya telah dihapus.

Jadi aplikasi secara umum telah menghapus data yang ada di array. Tetapi tidak bekerja pada tampilan aplikasi karena tidak update. Yup, itulah masalah utamanya, karena kita belum membuat fungsi update dari konten aplikasi.

Menghapus Row data dari UITableView

Aplikasi sudah berjalan bagus tetapi tidak mengupdate tampilan dari table view ketika kita menghapus salah satu cell. Mengingat kita hanya ingin menghapus satu barus, kenapa kita tidak menghapusnya saja langsung dari table view? Nah kita diperbolehkan untuk menggunakan method yang dinamakan dengan method deleteRowAtIndexPaths untuk menghapus baris khusus dengna animasi. Timpa method reloadData dengan code ini:

Compile dan coba jalankan aplikasi kembali, harusnya ketika kita telah menghapus salah satu cell maka cell tersebut sudah benar-benar terhapus.

 

Swipe untuk menambahka fitur lainnya

Aplikasi Email
Aplikasi Email

Ketika kita melakukan swipe pada table cell seperti aplikasi email, kita akan melihat tombol Trash dan juga tombol More. Tombol More ini lah ang akan membawa kita ke fitur/action tambahan lainnya seperti Replay, Flag, dsb. Ketika kita menggunakan fitur ini di iOS 7, fitur ini sebenarnya belum mengimplementasikan fitur/action tambahan seperti tombol More tersebut untuk mengatur table row. Hingga akhirnya fitur ini sudah tersedia di iOS 8.

Di iOS SDK mempunyai class baru yang dinamakan dengan UITableViewRowAction. Kita menggunkan class ini untuk membuat custom action pada row yang ada di table view. Untuk menyediakan custom action pada row table view, kita harus mengimplementasikan method tableView(_:editAactionForRowAtIndexPath:). Tambahkan method dibawah ini pada file RestaurantTableViewController.swift.

Swipe untuk tombol sharePenggunaan class UITableViewRowAction sama persis dengan UIAlertAction. Kita spesifikasikan judulnya, style-nya, dan bebepa code untuk mengeksekusi ketika seseorang menyentuh tombol. Untuk contoh kali ini, kita beri nama custom action nya dengan “Share”. Ketika user menyentuh tombol, maka akan muncul service yang tersedia untuk melakukan sharing.

Kita juga telah menambahkan delete action pada code diatas. Ketika kita mengimplementasikan method tableView(_:editActionForRowAtIndexPath:), table view tidak akan lagi membuat tombol delete, oleh karena itu kita harus membuat tombol delete kita sendiri.

Baris code terakhir adalah yang paling penting, karena itu kembaliannya berupa array dari object UITableViewAction (seperti deleteAction dan shareAction) yang memberitahu table view untuk membuat tombol ketika di swipe.

Compile dan jalan aplikasi, terus coba swipe table row maka akan tampil dua tombol. Coba sentuh tombol share maka akan menampilkan menu share seperti gambar disamping.

Class UITableViewRowAction menyediakan pilihan untuk developer agat bisa memodifikasi warna background menggunakan property backgroundColour:

UIKit menyediakan class UICollor yang merepresntasikan warna. Banyak method di UIKit yang meminta kita untuk menyediakan data warna menggunakan object UIColor. Misalnya class yang menggunakan nomor warna standar seperti UIColor.blueColor() dan UIColor.redColor(). Jika kita ingin menggunakan warna kita sendiri, kita bisa memembuatnya dengna object UIColor menggunakan nilai komponen RGB. Komponen tersebut harus berisikan 0 dan 1.

Selanjutnya kita tambahkan code dibawah ini pada method tableView(_:editActionForRowAtIndexPath:).

Nah selanjutnya kita mengetes aplikasi dan kita akan melihat warna yang berbeda. Untuk memodifikasi warna sesuai keinginan Anda, Anda bisa mendapat code warna di banyak tool seperti Adobe Photoshop atau lainnya.

Well mungkin cukup sekian pembahasan kali ini, oya untuk contoh code bisa di download disini: https://www.dropbox.com/s/wxlii33h2hoj865/FoodPinDeleteRow.zip

Semow informasinya bermanfaat Guys, See Yaa .. 😉

Iklan

Satu pemikiran pada “Membuat Fitur Delete, Custom Action Button dan MVC di iOS – FoodPin App

  1. mau kasih update untuk reloadData.swift. apabila tidak bisa. bisa dicoba code dibawah ini

    tableView.deleteRows(at: [indexPath], with: .fade)

    Suka

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