UITableView Tutorial in Swift using Alamofire, Haneke and SwiftyJSON

In this tutorial, I will show you how to use Alamofire, Haneke and SwiftyJSON with UITableView.

Alamofire - Elegant Networking in Swift

Alamofire – Elegant Networking in Swift

AFNetworking is one of the most popular third-party libraries on iOS and OS X and is one of the most widely-used open source projects on Github with over 14K stars and 4K forks.

Recently the creator and maintainer of AFNetworking, Mattt Thompson, released a new networking library like AFNetworking, but designed specifically to use modern Swift conventions and language features: Alamofire.

Reference: http://www.raywenderlich.com/85080/beginning-alamofire-tutorial

Haneke - A lightweight generic cache for iOS written in Swift with extra love for images.

Haneke – A lightweight generic cache for iOS written in Swift with extra love for images.

Haneke is a lightweight generic cache for iOS written in Swift. It’s designed to be super-simple to use.

Haneke provides a memory and LRU disk cache for UIImage, NSData, JSON, String or any other type that can be read or written as data. Particularly, Haneke excels at working with images. It includes a zero-config image cache with automatic resizing. Everything is done in background, allowing for fast, responsive scrolling. Asking Haneke to load, resize, cache and display an appropriately sized image is as simple as:

imageView.hnk_setImageFromURL(url)

Reference: https://github.com/Haneke/HanekeSwift

SwiftyJSON makes it easy to deal with JSON data in Swift.

Open your Xcode6 and select Create a new Xcode project. Select Single View Application and click Next.

Single View Application

Single View Application

For product name, use RevivalxTableView and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices. Click Next. Select workspace and click Create.

Xcode6 New Project

Xcode6 New Project

Open Main.storyboard and drag UITableView inside View Controller.

UITableView

UITableView

Main.storyboard

Main.storyboard

Set Prototype Cells from 0 to 1.

Prototype Cells

Prototype Cells

Then set Row Height for Table View Cell to 320.

Table View Cell

Table View Cell

Drag UIImageView to UITableViewCell.

UIIMageView

UIIMageView

Drag UILabel to UIImageView. SetUILabel background colour to black and font colour to white.

Main.storyboard

Main.storyboard

Set Label tag to 100.

label tag

label tag

Set Image View tag to 101.

image view tag

image view tag

Set constraints for each UIImageView and UILabel.

UIImageView

UIImageView

UILabel

UILabel

Now you need register your application here, https://instagram.com/developer/.  Enter your Application Name, Description and Website. Enter Captcha and click Register.

Instagram developer

Instagram developer

Copy Client ID and save it into save place. Now get data from instagram API. Run this sample URL in your web browser. XXXXXXXXXXXXXXXXXXXXXXXXX is your Client ID. We use Malaysia tag for example.

https://api.instagram.com/v1/tags/malaysia/media/recent?client_id=XXXXXXXXXXXXXXXXXXXXXXXXX

The data we will use for this tutorial is images (standard_resolution) and captions.

Instagram data

Instagram data

Then we download Alamofire (https://github.com/Alamofire/Alamofire), Haneke (https://github.com/Haneke/HanekeSwift) and SwiftyJSON (https://github.com/SwiftyJSON/SwiftyJSON) from github website. Copy Alamofire, Haneke and SwiftyJSON into project.

Finder

Finder

Xcode6 - Project info

Xcode6 – Project info

Go to the ViewController.swift file and import Alamofire and Haneke.

import Alamofire
import Haneke

Add UITableViewDelegate and UITableViewDataSource to ViewController class.

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

Add the following properties.

var datas: [JSON] = []
@IBOutlet weak var tableView: UITableView!

Change the viewDidLoad method to

Alamofire.request(.GET, "https://api.instagram.com/v1/tags/malaysia/media/recent?client_id=XXXXXXXXXXXXXXXXXXXXXXXXX").responseJSON { (request, response, json, error) in
            if json != nil {
                var jsonObj = JSON(json!)
                if let data = jsonObj["data"].arrayValue as [JSON]?{
                    self.datas = data
                    self.tableView.reloadData()
                }
            }
        }

Add three methods after didReceiveMemoryWarning method.

// MARK: - Table view data source
    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        // #warning Potentially incomplete method implementation.
        // Return the number of sections.
        return 1
    }

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // #warning Incomplete method implementation.
        // Return the number of rows in the section.
        return datas.count
    }

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("ImageCell", forIndexPath: indexPath) as UITableViewCell //1
        let data = datas[indexPath.row]
        if let captionLabel = cell.viewWithTag(100) as? UILabel {
            if let caption = data["caption"]["text"].string{
                captionLabel.text = caption
            }
        }
        if let imageView = cell.viewWithTag(101) as? UIImageView {
            if let urlString = data["images"]["standard_resolution"]["url"].string{
                let url = NSURL(string: urlString)
                imageView.hnk_setImageFromURL(url!)
            }
        }
        return cell
    }

Bind tableView outlet property with UITableView in ViewController.

Outlets

Outlets

Set identifier as ImageCell.

TableViewCell as ImageCell

TableViewCell as ImageCell

Finally we need to set Referencing Outlets (dataSource and delegate) to TableView.

Referencing Outlets

Referencing Outlets

Run your project and you output will get like this one.

Final output iOS app

Final output iOS app

Source code: https://github.com/datomnurdin/RevivalxUITableView

Paynow feedback

Whether you sell a product or service on social media such as Facebook and Instagram?

If yes, I would like to get your feedback for our mobile app idea. This mobile app cooked up specifically for online sellers like you to help increase sales and make you more efficient commercial operations.

You may find out more about the app ni via the link below:

http://www.esaezzat.com/recommends/go.php?c=paynow

If you give the feedback for this app, we will also give incentives worth over RM500. I give this offer to future LIMITED, so click the link below to watch the video on my app and so give feedback:

http://www.esaezzat.com/recommends/go.php?c=paynow

Thank you.

paynow app

paynow app

My Next Big Thing Project, PayNow

For those who are curious, I’m currently developing a mobile app that caters to e-commerce sector. The app is called as PayNow.

What is PayNow? If you are an online seller and selling your products on social media such as Facebook and Instagram, this app can be an excellent selling tool for you. PayNow lets you create and upload your products quickly and easily. Sharing your products with your customers via social media can be done in just a tap.

paynow

paynow

Below are some of the features of this app:

  • Quick and easy product creation
  • Instant sharing to Facebook Profile & Page, Twitter and Instagram
  • Unique product link, copy and paste the link to anywhere you want
  • Automated payment processing and order management
  • And much much more…

You can download the app from the links below. Please don’t forget to leave a review too!

Enjoy!!