Login User Interface

In this tutorial you will develop a simple iOS app with login feature. User can login this app and the app will verify user credential. What you will be learn from this tutorial are

• Setup development environment
• Storyboards and interface builder
• Creating views
• Creating view controllers
• Connecting view controllers with views
• Calls JSON Web services
• Navigate programmatically between views
• Preview your app

What you need for this tutorial are

• Basic knowledge in Swift language – https://developer.apple.com/library/mac/documentation/Swift/Conceptual/Swift_Programming_Language/index.html
• Xcode6 – https://developer.apple.com/xcode/downloads/

Getting started

Open your Xcode6. Since swift only supported in Xcode6, so we will using it. ChooseCreate a new Xcode project.

Xcode6

Select Single View Application and click Next.

Choose a template for your new project

Enter your Product Name, Organization Name and Identifier. Leave it forLanguage, Devices and Use Core Data since we using swift, both devices (iphone and ipad) and store user credential in local database. Click Next. Then a popup will appear to let you create a new xcode project on your machine directory. Make sure tick Create Git Repository on My Mac because we can do versioning control. Then click Create.

Choose options for your new project

Open your Main.storyboard.

Main.storyboard

Now we need to create another View Controller.

View Controller

Select View Controller, drag and drop on storyboard. Now we have two View Controller on Main.Storyboard.

two View Controllers on Main.storyboard

Now we need to create a view controller class for second view controller that we already created. Open File > New > File.

create a new view controller class

Select Cocoa Touch Class under iOS > Source. Click Next.

Cocoa Touch Class

Name it as DashViewController. Click Next.

Choose options for your new file

Click Create to save.

Choose new view controller class

Remove all except override func viewDidLoad() .

1 2 3 4 5 6 7 8 9 10 11

import UIKit class DashViewController: UIViewController {     override func viewDidLoad() {         super.viewDidLoad()         // Do any additional setup after loading the view.     } }

Go back to Main.storyboard and open Document Outline. Now we need to connect second View Controller with DashViewController class. Open Identity Inspector and select DashViewController in Class selection field. Now you can close the Document Outline.

Connecting view controller with view

Create a login form like image below. The login form must has username textfield,password textfield and login button. Make sure you set autolayout for these three things (username textfield, password textfield and login button), so alignment will looks nice when it run inside the iphone and ipad. You can learn more details about the autolayout here, http://blog.revivalx.com/2014/10/22/swift-autolayout-tutorial/

Login Form in View Controller

Open Assistant Editor to start editing the code.

Assistant Editor

Remove all except override func viewDidLoad() .

1 2 3 4 5 6 7 8 9 10

import UIKit class ViewController: UIViewController {     override func viewDidLoad() {         super.viewDidLoad()         // Do any additional setup after loading the view, typically from a nib.     } }

Create outlets and action via Drag and Drop for each textfield and button. You can learn it from here, http://www.theappguruz.com/uncategorized/build-ios-outlet-action-via-drag-drop-method/. Make sure your end result will be like this.

ViewController class

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

import UIKit class ViewController: UIViewController {     @IBOutlet weak var txtUsername: UITextField!     @IBOutlet weak var txtPassword: UITextField!     @IBAction func btnLogin(sender: AnyObject) {     }     override func viewDidLoad() {         super.viewDidLoad()         // Do any additional setup after loading the view, typically from a nib.     } }

For this tutorial, we will using REST API to request and response JSON data between the app and server. Call REST API using GET method like sample below

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

import UIKit class ViewController: UIViewController {     @IBOutlet weak var txtUsername: UITextField!     @IBOutlet weak var txtPassword: UITextField!     @IBAction func btnLogin(sender: AnyObject) {         var url : String = "http://demo.revivalx.com/todolist-api/login.php"         var request : NSMutableURLRequest = NSMutableURLRequest()         request.URL = NSURL(string: url)         request.HTTPMethod = "GET"         NSURLConnection.sendAsynchronousRequest(request, queue: NSOperationQueue(), completionHandler:{ (response:NSURLResponse!, data: NSData!, error: NSError!) -> Void in             var error: AutoreleasingUnsafeMutablePointer<NSError?> = nil             let jsonResult: NSDictionary! = NSJSONSerialization.JSONObjectWithData(data, options:NSJSONReadingOptions.MutableContainers, error: error) as? NSDictionary             if (jsonResult != nil) {                 println(jsonResult)             } else {                 // couldn't load JSON, look at error             }         })     }     override func viewDidLoad() {         super.viewDidLoad()         // Do any additional setup after loading the view, typically from a nib.     } }