Membuat Aplikasi Tabel Sederhana di iOS – FoodPin App

Nah sekarang kita telah mengerti cara membuat prototyping aplikasi dan aplikasi Hello World di iOS. Karena di postingan ini kita akan membuat sesuatu yang lebih menarik seperti membuat aplikasi table-based sederhana menggunakan UITableView. Aplkasi ini akan kita berinama Food Pin, sesuai dengan nama aplikasi yang telah kita buat prototype sebelumnya. So check this out!!

Membuat Aplikasi Tabel Sederhana di iOS

Pertama kali, kita harus tahu apa yang itu sebenarnya table view yang ada di iPhone app?  Table View adalah satu dari kebanyakan element UI yang ada di aplikasi iOS. Banyak aplikasi (kecuali game) yang menggunakan table view untuk menampilkan konten aplikasi. Contohnya seperti yang sudah ada di sistem iPhone yaitu tampilan kontak yang di tampilkan dalam konten table view. Contoh lainnya adalah aplikasi Email, itu menggunkan table view untuk menampilan kotak email dan emailnya.

Tidak hanya berfungsi untuk menampilkan daftar data, table view juga menampilkan data dalam bentuk gambar. TED, Google+ dan Airbnb juga contoh yang bagus. Seperti gambar dibawah yang merupakan contoh aplikasi table-based lainnya. Memang ada beberapa aplikasi yang terlihar berbeda, tapi pada dasarnya mereka menggunakan table view.

Sampe Table View App 2

 

Membuat Project SimpleTable

Mari kita mulai membuat aplikasi sederhana. Ya, aplikasi ini memang simple, dimana kita hanya akan menampilkan daftar dari nama restaurant. Jadi buka Xcode, buat project baru menggunakan template “Single View Application”.

Template Project

Klik Next untuk melanjutkan. Sekali lagi, isi semua form untuk keperluan project.

  • Product Name : SimpleTable – Merupakan nama dari aplikasi.
  • Organization Name : AppCoda – Merupakan nama dari organisasi dari project.
  • Organization Identifier : com.appcode – Merupakan nama domain kita, soal ini bisa kita ganti sesuai dengan nama domain yang kita inginkan seperti “edu.self”.
  • Bundle Identifier : com.appcoda.SimpleTable – Merupakan identifier unik dari aplikasi yang nantinya kita gunakan untuk submit aplikasi. Kita tidak perlu mengisi form ini, karena Xcode akan otomatis membuatnya untuk project kita.
  • Language : SwiftXcode 6 mendukung pengembangan menggunakan bahasa pemograman Objective-C dan Swift. Nah untuk tutorial ini, kita hanya akan menggunakan Swift untuk pengembangan aplikasi iOS.
  • Device: iPhone – Memilih “iPhone” untuk device project ini.
  • User Core Data: [jangan di checlist] – Jangan menceklis pilihan ini, karena kita tidak membutuhkan Core Data untuk project simple ini. Kita akan menggunakan Core Data di pembahasan lain.

Klik Next untuk melanjutkan, Xcode akan bertanya dimana kita akan menyimpan project “Hello World”. Pilih folder manapun yang Anda ingikan sebagai lokasi penyimpanan project. Lalu klik continue.


 

Membuat Design dengan Storyboard

Pertama kali, kita akan membuat usert interface dan menambahkan table view. Pilih “Main.storyboard” untuk mengganti tampilan Storyboard.

Disable Size Classes

Sekali lagi kita tidak akan menggunkan Size Classes di project ini seperti pembahasan sebelumnya. Di File Inspector, jangan centang “Use Size Classes” yang ada di bawah Interface Builder Document. Apabila File Inspector dalam kondisi tidak terlihat, kita bisa menampilkannya dengan memilih View>Utility>Show File Inspector. Ketika kita men-disable size classes, Xcode akan memberitahu untuk memilik target device yang akan digunakan. Nah untuk project ini pilih iPhone dan klik “Disable Size Classes” untuk mengkonfirmasinya. Maka setelah itu view controller akan terlihat seperti iPhone.

Selanjutnya mari kita tambahkan object table view ke dalam view. Di Object Library, pilih object “Table View” dan pindahkan object tersebut ke view seperti gambar dibawah ini.

Table View

Selanjutnya pilih table view. Di dalam Attributes Inspector (jika tidak menemukan di Xcode Anda, pilih View>Utilities>Show Attributes Inspector), ganti nomor dari Prototype Cell dari 0 menjadi 1. Prototype Cell akan kelihatan di table view, dimana Prototype Cell ini memperbolehkan kita untuk mendesign layout dengan mudah dari table view cell kita. Didalamnya juga terdapat standar dari cell styles seperti basic, right detail, left detail dan juga subtitle. Di project ini kita menggunakan basic style.

Pilih cell dan buka Attributes Inspector. Ganti cell style menjadi Basic. Style ini sudah cukup bagusn untuk di tampilan pada sebuah cell dengan text dan juga gambar. Selanjutnya, kondisikan identifier menjadi Cell, hal ini berfungsi untuk mengidentifikasi prototype cell. Kita akan menggunakannya dalam code.

Table View 2


 

Jalankan Aplikasi Sebelum Memulai Coding

Simulator Table ViewSebelum kita memulai langkah selanjutnya, coba jalankan aplikasi menggunakan Simulator. Klik tombol “Run” untuk mem-build aplikasi dan mengetesnya. Harusnya sih tampilan aplikasi terlihat seperti gambar disamping.

Mudah bukan, nah kita telah membuat table view di aplikasi kita. Walaupun tidak menampilkan data apapun. Nantinya juga kita akan menulis bebera code untuk mengisi data tabel.


 

UITableView dan Protocols

Seperti yang telah disebutkan sebelumnya dimana kita harus mengerti dasar class dari iOS SDK. Class yang telah terorganisasi yang dinamakan dengan frameworks. Framework UIKit merupakan satu dan banyak framework yang digunakan untuk membuat aplikasi iOS.

Class ini nantinya menyediakan cara untuk membangun dan mengatur tampilan dari aplikasi kita. Semua objek yang ada di Object Library di storyboard telah disediakan oleh framework. Object tombol yang kita gunakan pertama kali contohnya, Object Table View yang kita kerjakan sekarang ini juga merupakan framework. Istilah Table View yang kita gunakan merupakan class yang ada di UITableView. Kita bisa meng-klik item apapun yang ada di Object Library untuk menampilkan pop-over untuk menampilkan nama class.

Class Table View

Nah sekarang kita sudah punya gambaran tentang hubungan antara Tabel View dengan UITabelView. Selanjutnya kita akan menulis beberapa code untuk menabahkan data pada tabel. Pilih file ViewController.swift yang ada di project nagivator untuk membuka file kedalam editor pane. Tambahkan “UITableViewDataSource, UITableViewDelegate” setelah “UIViewController” untuk mengadopsi protocolnya.

Setelah kita menambahkan code setelah UIViewController, Xcode akan mendeteksi sebuah error. Xcode akan menampilkan tanda pemberitahuan bewarna merah ketika terjadi masalah. Klik tanda tersebut disebalak kiri dari editor dan Xcode akan menandai baris dimana terjadi masalah di baris code tersebut. Pesan ini sangat membantu memberitahu masalah tapi tentu tidak akan memberikan kita solusi secara gamblang.

UIViewController

Jadi apa arti “ViewController does not conform to protocol UITableViewDataSource”?

UITableViewDelegates dan UITableViewDataSource dianggap sebagai protocols di bahasa pemograman Swift. Untuk menampilkan data di table view, kita harus mengkonfirmasi pemasang dari kebutuhan protocol di object (class ViewController), telah diimplementasikan untuk semua method.

Mungkin Anda masih bingung, apa itu protocols? Kenapa harus menggunakan protocols?

Untuk membacanya lebih detail Anda bisa mengunjungi website iniWell, kita umpakan kita akan membuat sebuah bisnis baru. Kita ingin mempekerjakan seorang graphic designer untuk mendesign logo perusahaan. Dia adalah seorang yang mempunyai skill untuk membuat jenis logo apapun. Tapi tentunya saja dia tidak bisa membuat logo secara tiba-tiba, kita harus memberikannya beberapa gambaran seperti nama perusahaan, warna yang diinginkan, dan juga jenis bisnis dari perusahaan kita sebelum bisa membuat logo.

Nah di dunia pemograman iOS, class UITableView sama halnya dengan graphic designer. Itu cukuk fleksibel dalam menampilan beberapa jenis data (seperti gambar dan teks) di dalam sebual tabel. Kita bisa menampilkan daftar negara di dunia atau pada contoh project ini kita menampilkan daftar restaurant + icon gambarnya.

Tetapi itu semua membutuhkan delegate agar bisa menyediakan beberapa informasi dasar seperti:

  • Seberapa banyak baris yang ingin kita tampilkan di table view?
  • Apa itu table data?

Seperti layaknya asisten, class ViewController lah yang menempatkan delegate untuk menyediakan informasi tersebut.

Jadi bagaimana kita bisa memberitahu UITableView, data apa yang ingin ditampikan?

Kuncinya adalah protocol UITableViewDataSource, dimana itu menghubungkan antara data dengan table view. Berikut method yang digunakan untuk protocol UITableViewDataSource:

  • tableView(_:numberOfRowsInSection:)
  • tableView(_:cellForRowAtIndexPath:)

Semua yang kita perlukan adalah memilki object yang bisa mengimplementasikan method tersebut, sehingga UITableView tahu jumlah baris data yang akan di tampilkan.

Protocol UITableViewDelegate juga memiliki hubungan dengan tampilan yang ada di UITableView. Dimana itu semua memperbolehkan kita untuk mengatur ketinggian garis tabel, header dan footers, reorder table cell, dsb. Nah dengan pengetahuan dasar dari protocols, mari kita lanjutkan untuk membuat code. Pilih file ViewController.swift dan deklarasikan sebuah variabel untuk kebutuhan tabel data. Beri nama variabelnya seperti “restaurantNames” yang nantinya kita gunakan untuk banyak nama restaurant, seperti contoh berikut:

Di contoh ini, kita menggunakan array untuk menampilkan data tabel. Syntax untuk mendeklarasikan array di Swift sama halnya dengan Objective-C. Nilanya di pisahkan dengan koma dan ditutup dengna kurung siku.

Sekilas tentang Array

Array adalah struktur dasar dari pemograman komputer, kita bisa mengasumsikan array merupakan sekumpulan elemen data. Nah untuk kebutuhan project ini, array kita definisikan dengan kumpulan elemen dari “String”. Berikut gambarannya:

Contoh Array

Setiap elemen array telah di identifikasi oleh yang namanya indeks. Misalnya ada 10 array, maka setiap elemennya akan memiliki nilai index 0-9. Ini berarti restaurantNames[0] adalah indeks pertama dari array kita.

Selanjutnya kita akan memerlukan dua method dari protocol UITableViewDataSource.

Method pertama yang digunakan adalah untuk memberitahukan table view terkait jumlah baris. Kita hanya perlu memanggil method count  untuk mendapatkan angkat dari item yang ada di array restaurantNames.

Method kedua yang akan kita panggil setiap saat adalah untuk menampilkan baris tabel. Menggunakan object indexPath, kita bisa mendapatkan baris sebelumnya (indexPath.row). Jadi apa yang kita lakukan adalah mendapatkan iten yang telah terindex dari array restaurantNames dan menempatkannya di label text untuk ditampilkan.

Ok, tapi apa maksud dari dequeueReuseableCellWithIdentifier di code bagian baris kedua?

Method dequeueReusbaleCellWithIndentifier digunakan untuk menempatkan kembali table cell dari queue ke identifier cell yang spesifik.

Kita tentu ingin aplikasi table-based kita menjadi lebih cepat dan responsive ketika menangani ribuan baris data. Jika kita menyediakan sebuah cell baru untuk setiap baris data maka aplikasi kita akan menggunakan banyak memori sehingga mengakibatkan performa aplikasi menjadi lamban ketika user men-scroll table view. Perlu diingat bawah setiap cell membutuhkan biaya performat, khususnya ketika disediakan dalam waktu yang dekat.

Layar iPhone itu terbatas, jadi aplikasi kita akan menampilkan 1000 records, kemungkinan dilayar hanya akan tampil 10 record paling banyak. Jadi kenapa aplikasi kita tidak menyediakan 1000 cell table view dari pada menyediakan 10 tabel cell lalu menggunakannya kembali?

Hal ini dikarenakan akan menghemat banyak memory dan membuat table view terlihat lebih efisien. Dengan alasan performa itulah kenapa kita harus membuat table view yang dapat digunakan kembali untuk aplikasi ini.

Table View Efisien

Sekarang coba tekan tombol “Run” untuk melakukan testing aplikasi. Dan oopss, aplikasi masih menampilkan table view kosong seperti gambar sebelumnya.

Lah kenapa table view tidak menampilkan data yang kita inginkan?

Untuk itu kita harus menulis code untuk menampilkan data table dan mengimplementasikannya ke semua method. Hal ini dikarenakan masih ada satu tugas lagi yang tertinggal, yaitu:

Menghubungkan DataSource dengan Delegate

Semenjak class ViewController telah di adopsi oleh protocol UITableViewDelegate dan UITableViewDataSource, object UITableView yang ada di storyboard tidak memiliki peranan lagi. Kita telah memberi tahu object UITableView bahwa ViewControoler adalah object delegate untuk data source.

Kembali lagi ke storyboard, pilih table view. Tekan dan tahan tombol key, klik table view dan pindahkan ke View Controller yang ada di Document Outline seperti gambar dibawah:

Document Outline

Lepas kembali tombolnya, maka akan muncul pop-over dan pilih “dataSource”. Ulangi langkah diatas dan buat koneksi dengan “delegate”.

ViewController Scene

Nah untuk memastikan keduanya telah terhubung, kita bisa meng-klik table view kembali. Lalu klik icon Connection Inspector yang ada di area Utility untuk membuka koneksi yang sudah ada sebelumnya. Alternatif lain adalah dengan meng-klik kanan tabel untuk memperlihatkan koneksinya.

UIViewcontroller Scene


 

Table View TestingMengetes Aplikasi

Akhirnya aplikasi pertama kita telah siap untuk di testing. Dengan menekan tombol “Run” maka Simulator akan men-load aplikasi. Harusnya sih aplikasi kita telah menampilkan daftar nama restaurant seperti gambar disamping.

Menambahkan Gambar ke dalam Table View

Hanya menapilkan sebuah tabel dengan teks tentu terlihat kaku, nah bagaimana jika kita menambahkan gambar ke setiap barisnya?

UITableView membuat hal ini menjadi muda, kita hanya perlu menambahkan satu baris code untuk menambahkan gambar ke dalam baris yang ada di table view.

Langkah pertama coba download contoh gambarnya disini: . Ekstrak file zip nya yang berisikan tiga gambar. Setiap gambar memiliki gambar yang sama tapi dengan resolusi yang berbeda. Ketika kita mengembangka aplikasi iOS, sangat direkomendasikan kita mempersiapkan 3 versi gambar. Gambar pertama dengan ukuran #3x suffix yang digunakan untuk iPhone 6 Plus. Gambar kedua dengan ukuran @2x suffix yang digunakan untuk 4/4s/5/4s/6, dan gambar terkahir tanpa @suffix yang digunakan untuk device non Retina.

Project Xcode telah menyediakan catalog untuk contoh gambar ini (images.xcassets) untuk mengatir tipe dari gambar yang ada di project kita. Untuk meggunakan gambar coba unzip file, pilih images.xcassets untuk membuka assets catalog. Pindahkan tiga gambar yang ada di folder hasil ekstrak dan letakkan di folder list/viewer.

Image for Table View

Xcode akan otomatis mendeteksi gambar yang bisa di tampilkan di Retina atau tidak. Satu gambar telah tersedia folder images set, sekaran kita bisa menggunakan gambar.

Rename Image

Table View Testing2Sekarang edit file ViewController.swift dan tambahkan satu barus code ke method tableView(_:cellForRowAtIndexPath:). Letakkan code dibawah ini sebelum “return cell” :

cell.imageView.image = UIImage(named: “restaurant”)

Class UIImage disediakan oleh framwork UIKit dimana kita bisa membuat gambar dari file. Ini juga support terhadpa bebarapa format gambar seperti PNG, GIF, dan JPEG. Nah sekarang kita sudah bisa melakukan testing kembali dan tekan tombol “Run”. Harusnya aplikasi akan menampilkan gambar seperti gambar disamping.

Menghilangkan Status Bar

Awalnya di iOS 7, view controller ditampilkan dalam bentuk full screen. Konten dari table view sekarang dilengkapi dengna status bar, dimana ini terlihat tidak begitu bagus untuk tampilan aplikasi. Nah kita perlu menghilangkannya, untuk itu kita mengatur tampilan dari status bar di per view controller basis. Jika kita tidak ingin menampilkan status bar di view controller, maka tambahkan beberapa baris code dibawah ini:

Tambahkan code diatas pada file ViewController.swift dan lakukan testing aplikasi kembali. Seharusnya sekarang aplikasi telah menampilkan konten dengan mode fullscreen tanpa adanya status bar.

Memabahkan Auto Layout Constraints untuk UITableView

Sejauh ini aplikasi kita sudah terlihat lumayan ciamik, tapi aplikasi kita juga harus bisa responsive di iPhone 5/5s. Sudahkah Anda mencoba testing apikasi menggunakan device iPhone 4 dan melakukan rotasi ke mode landscape ketika menjalankan aplikasi?

Nah mungkin aplikasi kita nantinya akan terlihat seperti gambar dibawah ini.

Table View Landscpe

Table view terlihat tidak tampil secara utuh di layar 3.5-inch, dan juga terjadi ketika kita merotasi device dalam mode landscape. Seperti pembahasan di postingan sebelumnya, kita bisa menggunakan auto layout untuk membuat aplikasi ini terlihat responsive di device manapun

Add New ConstraintBuka storyboard dan pilih table view, di menu Auto Layout klik tombol Pin untuk membukan menu Pin Tool. Pilih setiap garis merah yang ada di pop-up, setelah itu klik tombol “Add 4 Constrain” untuk menambahkan constrainnya. Disini kita menyediakan 4 spaceing constrain untk setiap sisi dari UITableView. Nah sekarang kita sudah melakukan testing aplikasi kembali, aplikasi akan tampil lebih ciamik dan responsive tentunya. Well, mungkin cukup sekian pembahasan kali ini, Anda bisa mendownload contoh project Xcodenya disini: https://www.dropbox.com/s/kufb6373g1rrsn8/SimpleTable.zip

Semoga bermanfaat, see u next chapter .. 😉

Iklan

6 pemikiran pada “Membuat Aplikasi Tabel Sederhana di iOS – FoodPin App

  1. mas wira, saya sudah ikuti semua langkah langkah yang diberikan, tapi simulator saya force close dan mengarahkan saya ke AppDelegate
    class AppDelegate: UIResponder, UIApplicationDelegate {
    dan terdapat intention Thread1 : signal SIGABRT

    itu kenapa ya ???

    Suka

  2. padahal sudah semua sesuai dengan yang dilakukan, tapi ada keterangan Thread 1 : signal SIGABRT, saya googling itu hanya permasalahn connectionnya saja

    Mohon bantuannya mas wira

    Thanks Before

    Suka

  3. okey solved. ada beberapa perbedaan sih dgn code yang dikasih oleh mas wira

    var restaurantName = [“Cafe Deadend”, “Homei”, “Teakha”, “Cafe Loisl”, “Petite Oyster”, “For Kee Restaurant”, “Pos Atelier”,
    “Bourke Street Bakery”, “Haigh’s Chocolate”, “Palomino Espresso”,
    “Upstate”, “Traif”, “Graham Avenue Meats And Deli”, “Waffle & Wolf”, “Five Leaves”, “Cafe Lore”, “Confessional”, “Barrafina”,
    “Donostia”, “Royal Oak”, “CASK Pub and Kitchen”]
    //Menghitung Index Array
    public func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
    {
    return restaurantName.count
    }

    //Menampilkan Index Baris
    public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
    {
    let cell = UITableViewCell(style:UITableViewCellStyle.default , reuseIdentifier: “cell”)

    //Configure Cell
    cell.textLabel?.text = restaurantName[indexPath.row]
    return(cell)
    }

    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