Building an iPhone App Using Swift: Part 1

In this post, I’ll be showing you how to create an iPhone app using Apple’s new Swift programming language.

Swift is a new programming language that Apple released in June at their special WWDC event in San Francisco, CA. You can find more information about Swift on the official page. Apple has released a book on Swift, The Swift Programming Language, which is available on the iBook Store or can be viewed online here.

OK—let’s get started!

The first thing you need in order to write an iPhone app using Swift is to download a copy of Xcode 6. Currently, the only way to get a copy of Xcode 6 is to sign up for Apple’s developer program. The cost to enroll is $99 USD/year, so enroll here. Once enrolled, click on the iOS 8 GM Seed link, and scroll down to the link that says Xcode 6 GM Seed.

Once Xcode is installed, go to File -> New -> New Project. We will click on Application within the iOS section and choose a Single View Application:

Click on the play button in the top left of the project to build the project. You should see the iPhone simular open with a blank white screen.

Next, click on the top-left blue Sample Swift App project file and navigate to the general tab. In the Deployment Info section, select portrait for the device orientation.

This will force the app to only be viewed in portrait mode.

First View Controller

If we navigate on the left to Main.storyboard, we see a single View Controller, with a single View.

First, make sure that Use Size Classes is unchecked in the Interface Builder Document section.

Let’s add a text view to the top of our view. In the bottom right text box, search for Text View. Drag the Text View and position it at the top of the View. Click on the Attributes inspectoron the right toolbar to adjust the font and alignment.

If we click the play button to build the project, we should see the same white screen, but now with our Swift Sample App text.

View a web page

Let’s add our first feature–a button that will open up a web page. First embed our controller in a navigation controller, so we can easily navigate back and forth between views. Select the view controller in the storyboard, then go to Editor -> Embed in -> Navigation controller. Note that you might need to resize the text view you added in the previous step.

Now, let’s add a button that will open up a web view.

Back to our view, in the bottom right let’s search for a button and drag it somewhere in the view and label it Web View.

The final product should look like this:

If we build the project and click on the button, nothing will happen. We need to create a destination controller that will contain the web view.

Go to File -> New and create a new Cocoa Touch Class:

Let’s name our new controller WebViewController and make it a subclass of UIViewController. Make sure you choose Swift as the language. Click Create to save the controller file.

Back to our storyboard, search for a View Controller in the bottom-right search box and drag to the storyboard.

In the Attributes inspector toolbar on the right side of the screen, let’s give this controller the title WebViewController.

In the identity inspector, let’s give this view controller a custom class of WebViewController:

Let’s wire up our two controllers. Ctrl + click on the Web View button we created earlier and hold. Drag your cursor over to your newly created WebViewController. Upon release, choose push.

On our storyboard, let’s search for a web view in the lower-right search box and drag it into our newly created WebViewController. Resize the web view so that it takes up the entire screen, except for the top nav bar area.

If we hit the large play button at the top left to build our app, clicking on the Web View link will take us to a blank screen. We’ll also have a back button that takes us back to the first screen.

Writing some Swift code

Let’s have the web view load up a pre-determined website. Time to get our hands dirty writing some Swift!

The first thing we need to do is link the WebView in our controller to the WebViewController.swift file.

In the storyboard, click on the Assistant editor button at the top-right of the screen.

You should see the storyboard view of WebViewController and WebViewController.swift next to each other.

Control click on WebViewController in the storyboard and drag it over to the line right before the WebViewController class is defined.

Name the variable webView:

In the viewDidLoad function, we are going to add some intitialization to load up our webpage.

After super.viewDidLoad(), let’s first declare the URL we want to use. This can be any URL; for the example, I’m going to use my own homepage. It will look something like this:

let requestURL = NSURL(string: http://ryanloomba.com)

In Swift, the keyword let is used to desiginate contsants, or variables that will not change.

Next, we will convert this URL into an NSURLRequest object.

Finally, we will tell our WebView to make this request and pass in the request object:

import UIKit
 
class WebViewController: UIViewController {
    @IBOutlet var webView: UIWebView!
 
    override func viewDidLoad() {
        super.viewDidLoad()
        let requestURL = NSURL(string: "http://ryanloomba.com")
        let request = NSURLRequest(URL: requestURL)
        webView.loadRequest(request)
 
        // Do any additional setup after loading the view.
    }
 
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
 
    /*
    // MARK: - Navigation
 
    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepareForSegue(segue: UIStoryboardSegue!, sender: AnyObject!) {
        // Get the new view controller using segue.destinationViewController.
        // Pass the selected object to the new view controller.
    }
    */
 
}

Try changing the URL to see different websites.

Here’s an example of what it should look like:

About the author

Ryan is a software engineer and electronic dance music producer currently residing in San Francisco, CA. Ryan started up as a biomedical engineer but fell in love with web/mobile programming after building his first Android app, you can find him on GitHub @rloomba