Aswin Balaji

Aswin Balaji

186 Sadasivam Nagar,Madipakkam,Chennai, TN 600091
Aswin Balaji

Swift Tutorial – Developing iOS Apps Part 1

August 10, 2015, by Aswin Balaji, category IOS
iOS Development moves to Swift
This tutorial updated to reflect changes in Xcode 7.2 and iOS 9, as of December 22, 2015
Apple announced at WWDC a major change to the way iOS apps are developed, it can now be done using a new programming language called Swift. In my efforts to adapt and learn the language’s common patterns and best practices, I will be posting regularly as I step through the learning process, sharing everything I find. I hope you decide to follow along!
In this tutorial we will build an iOS application that will pull down iTunes tracks from the iTunes web API (or application programming interface), display that information on the iPhone using a common UI element called a Table View, and finally allow us to drill down in to an album and play some of the tracks.

Tutorial Index

Hello World (You are here!)

Making a web API request and parsing the JSON

Some best practices using Protocols and Delegates

Adding an interactive Table View

Async image loading and caching

Interaction with multiple views

Animations, Audio, and Custom Table View Cells

So I’m going to start with a pretty basic app and explain how the code works. Ready? Here we go…

The Basics

Swift opts to use a Javascript-like ‘var’ keyword to define any new variable.
So for example to create a new variable with a bit of text in it, you would have this:
var myString = “This is my string.”

This is declared with a var so the variable can change at any time, similar to most languages.
However the let keyword creates constants. These can not ever be changed once they are defined. If you try, a compiler error will appear and the program just won’t run.
let someConstant = 40

In this case kSomeConstant is implicitly defined as an integer, or Int.
If you want to be more specific you can specify which type it is like so:
let someOtherConstant: Int = 40

With both arrays and dictionaries, they are described using brackets []
var colorsArray = [“Blue”, “Red”, “Green”, “Yellow”]
var colorsDictionary = [“PrimaryColor”:”Green”, “SecondaryColor”:”Red”]

You can access the members of an array with integer value indexes, and the members of a dictionary with String keys (or other types, but that’ll come in later tutorials)
let firstColor = colorsArray[0]
// firstColor is now “Blue”
let aColor = colorsDictionary[“PrimaryColor”]
// aColor is now “Green”

There’s a lot more to go over, but I think these basics are important to get a start going on to the tutorial. So with that, let’s move on to Hello World. If you want to play around with this a bit yourself before getting going on our first iPhone App. Be sure to check out the Playground containing this sample code on Github.

Hello World

Hello World in Swift and iOS
First, we’re going to write the simplest app imaginable to get started, Hello World. This segment comes directly from my upcoming book on Swift development, but it’s so important and fundamental to getting started I thought it would be good to release for free here.
Our app will only do one thing: print “Hello World” to the console. You’ll need a developer copy of Xcode in order to follow along, which requires a developer account. If you have one, head on over tohttp://developer.apple.com and get your copy before we begin.
So now you’ve got your IDE set up. Let’s write hello world out to the console. This example demonstrates the simplest app that can be built, and more importantly shows that you’re environment is set up correctly.
Set up an Xcode project using the single-view application template, and make sure you opt for Swift as the language.

You should now find an AppDelegate.swift file in the project hierarchy. Inside of this file find the line that says:
“// Override point for customization after application launch.”

Replace this line with our amazing hello world code:
print(“Hello World”)

Hello World Swift Code
Now press run and you should see a blank app boot up, and the words “Hello World” print to the console.
Note that this will not show up in the iPhone simulator. Look at the bottom of your Xcode window and you’ll see a console that says ‘Hello World!’.
Hello World Output
Congratulations! You just wrote your first app in Swift! This app probably won’t win any awards, let’s trying doing something a little deeper…

Adding a Table View

In this section, we’re going to actually put some stuff on the screen.
Open up your Main.storyboard file in Xcode and lets drag in a “Table View” object from the Object Library (don’t use a table view controller.) Position this fullscreen in your app window and make sure it lines up with the edges. Then resize the height by dragging down the top edge and giving a little bit of space (this gives room for the status bar at the top of the phone.) If you run the app at this point, you should see an empty table view in the simulator.
UITableView drag on to StoryBoard
The empty table view in the iPhone Simulator:
The empty table view in the iPhone Simulator
Now we need to set up a delegate and data source for the table view. This is easy to do in interface builder. Just hold control, and then click and drag from the tableview to the “View Controller” object in your storyboard’s hierarchy, and select ‘data source’. Repeat with the ‘delegate’ options.
Note: If this tutorial is moving too fast for you, take a look at my Swift eBook. I spend a lot more time on the basics. If you aren’t ready to take the plunge just yet, I am offering a free sample chapter that covers some of the basics of Swift syntax, just for subscribing to be notified of the book’s release. Interested? You can subscribe here.
If you still need to get your bearings in Xcode, I recommend first going through the interactive tutorial teaching you how to work with Xcode to make the most basic app imaginable for Apple Watch. Try theWatchKit Apple Watch Tutorial, and after you’re done you can come back here and work through the iOS tutorial. WatchKit is much more simplified, and Xcode is confusing, so it’s a good place to start to begin your journey in to iOS development.

Setting up the UITableView Data Source and Delegates

I’ve received a ton of questions about this, and many people reporting errors about the table view not being set, so to make things a little easier I made a quick video showing how connecting Storyboard objects to your code works. Make sure to go fullscreen and select the 720p option to make sure you can see what’s happening. This will look slightly different from the Xcode interface you are using, but functionally all this works the same.
Connecting Storyboard Objects to Code in Xcode
Okay, now let’s dig in to the protocol methods for Table Views. Because we’re using the UITableViewDataSource and UITableViewDelegate in our view controller, we need to modify the class definition to say as much.
So open ViewController.swift and modify this line:
class ViewController: UIViewController {

to this:
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

This will cause some errors to pop up, but don’t worry this is expected. In fact, the errors are the primary purpose of indicating these protocols on our class. It lets us know that we aren’t done actually implementing the UITableViewDataSource or the UITableViewDelegate yet.
Command+clicking on either of these protocols will show the required functions at the very top. In the case of a tableview delegate, we need at least these two:
public func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int
public func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell

So let’s modify our View Controller class by adding these two functions
func tableView(tableView: UITableView, numberOfRowsInSection section:    Int) -> Int {
return 10
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell: UITableViewCell = UITableViewCell(style: UITableViewCellStyle.Subtitle, reuseIdentifier: “MyTestCell”)
cell.textLabel?.text = “Row #(indexPath.row)”
cell.detailTextLabel?.text = “Subtitle #(indexPath.row)”
return cell
}

The first method is asking for the number of rows in our section, in this simple tutorial we just hard-code 10, but normally it would be the length of an array controller. This example is intentionally simple.
The second method is where the magic happens. Here we create a new instance of a UITableViewCell called cell, using the Subtitle cell style.
Then, we assign the text value of this cell to the string “Row #(indexPath.row)”
In Swift, this is how variables are embedded within a string. What we’re doing is retrieving the value of indexPath.row by inserting (indexPath.row) in to our string, and dynamically replacing it with the row number of the cell. This allows results such as “Row #1″, “Row #2″, etc.
The detail text label is only available in the Subtitle cell class, which we are using here. We set it similarly to “Subtitle #1″, “Subtitle #2″, and so on.
Go ahead and run your app and you’ll now see an amazing list of cells with titles and subtitles indicating their row numbers. Don’t see the cells? Make sure you connected your storyboard delegate and data source to the ViewController class. See the Youtube video here
This is one of the most common ways to display data in iOS, and will be sure to serve you well. For the full code to my View Controller file, take a look at the full source for this section on github.

You’re doing great!

Made it this far and everything is working? Awesome! If not, let me know if you got stuck. I’m happy to help :)
In my Swift book we spend some more time going over the basics, as well as delving much deeper in to the advanced details. Learn more about it here
Full code for this part here »

Thanks and Regards
Aswinbalaji.R
Android developer
PixelSoft Solution Pvt Ltd
Chennai