{"id":588,"date":"2014-06-02T18:39:22","date_gmt":"2014-06-03T00:39:22","guid":{"rendered":"http:\/\/jamesonquave.com\/blog\/?p=588"},"modified":"2017-04-17T15:57:20","modified_gmt":"2017-04-17T21:57:20","slug":"developing-ios-apps-using-swift-tutorial-part-2","status":"publish","type":"post","link":"https:\/\/jamesonquave.com\/blog\/developing-ios-apps-using-swift-tutorial-part-2\/","title":{"rendered":"Developing iOS Apps Using Swift Tutorial Part 2"},"content":{"rendered":"

This section completely updated to reflect changes in Xcode 8.3.1, as of April 17, 2017<\/strong><\/p>\n

In part 1 we went over some basics of Swift, and set up a simple example project that creates a Table View and a puts some text inside of them. If you haven\u2019t read that yet, give it a read here<\/a>.<\/p>\n

For this section, we\u2019re going to do something a little more ambitious. We\u2019re going to hit the iTunes Search API for the iTunes Store, download the JSON results, parse them in to Dictionaries and then populate our Table View with this information. Then, we will add some user interaction by adding a click event to the tableview, so that when an item is clicked the iTunes store item will be opened.<\/p>\n

If this sounds like a lot of work, don\u2019t sweat it. This is pretty basic functionality for iOS apps and it\u2019s one of the most common things any developer has to do. Let\u2019s get going\u2026<\/p>\n

Connecting the UI<\/h2>\n

The first thing we need to do is get a reference to our tableView, so it can be used from code. Go ahead and add this line to your ViewController.swift file, just under the class definition, but outside of any functions.<\/p>\n

@IBOutlet<\/code> var<\/code> appsTableView : <\/code>UITableView<\/code>!<\/code><\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div><\/code><\/pre>\n
This bit of code allows up to connect our Table View in our Storyboard to this variable, \u201cappsTableView\u201d. Save this file and open up your storyboard. Now select the View Controller object (the one with a yellow icon) and in the right-hand side pane click the last tab, the Connections Inspector. Here you should now see an outlet for \u201cappsTableView\u201d. Click and drag from the dot next to this outlet on to the Table View in our scene.<\/p>\n
\"Connecting<\/p>\n
Let\u2019s also add a variable to hold the table data itself. Just under the class definition for ViewController add:<\/p>\n
var<\/code> tableData = [[<\/code>String<\/code>: <\/code>String<\/code>]]()<\/code><\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div><\/code><\/pre>\n
This variable is an Array<\/code> type that contains multiple  Dictionary<\/code> types (or hashable types if you prefer). Inside these values the key is of type String<\/code> as well as the value. Or in other words I can get or set String<\/code> values by accessing this variable with any String<\/code> key in the dictionary, as we’ll see in a moment. If that does’t make sense just yet, just keep going and you’ll see how it’s used later in the tutorial.<\/p>\n
Making the API Request<\/h2>\n
Now that we have the UI connected, we\u2019re ready to make an API call. Create a new function called searchItunesFor(searchTerm: String). We\u2019ll use this to make our requests happen for arbitrary search terms.<\/p>\n
To keep this tutorial short, I\u2019m going to just post my final code and let the comments do some of the explaining. I’ll also break it down line-by-line afterward. Also, I\u2019m always open to questions and further discussion in the comments though, so feel free to chime in!<\/p>\n
func<\/code> searchItunes(searchTerm: <\/code>String<\/code>) {<\/code><\/div>
    <\/code>\/\/ The iTunes API wants multiple terms separated by + symbols, so replace spaces with + signs<\/code><\/div>
    <\/code>let<\/code> itunesSearchTerm = searchTerm.replacingOccurrences(of: <\/code>\" \"<\/code>, with: <\/code>\"+\"<\/code>, options: .caseInsensitive, range: <\/code>nil<\/code>)<\/code><\/div>
    <\/code>\/\/ Also replace every character with a percent encoding<\/code><\/div>
    <\/code>let<\/code> escapedSearchTerm = itunesSearchTerm.addingPercentEncoding(withAllowedCharacters: [])!<\/code><\/div>
 <\/div>
    <\/code>\/\/ This is the URL that Apple offers for their search API<\/code><\/div>
    <\/code>let<\/code> urlString = <\/code>\"http:\/\/itunes.apple.com\/search?term=<\/a>\\(escapedSearchTerm)&media=software\"<\/code><\/div>
    <\/code>let<\/code> url = <\/code>URL<\/code>(string: urlString)!<\/code><\/div>
    <\/code>URLSession<\/code>.shared.dataTask(with: url) { (data, response, error) <\/code>in<\/code><\/div>
        <\/code>if<\/code> let<\/code> error = error {<\/code><\/div>
            <\/code>\/\/ If there is an error in the web request, print it to the console<\/code><\/div>
            <\/code>print<\/code>(error)<\/code><\/div>
            <\/code>return<\/code><\/div>
        <\/code>}<\/code><\/div>
        <\/code>\/\/ Because we'll be calling a function that can throw an error<\/code><\/div>
        <\/code>\/\/ we need to wrap the attempt inside of a do { } block<\/code><\/div>
        <\/code>\/\/ and catch any error that comes back inside the catch block<\/code><\/div>
        <\/code>do {<\/code><\/div>
            <\/code>let<\/code> jsonResult = try <\/code>JSONSerialization<\/code>.jsonObject(with: data!, options: []) <\/code>as<\/code>! [<\/code>String<\/code>: <\/code>Any<\/code>]<\/code><\/div>
            <\/code>self<\/code>.didReceive(searchResult: jsonResult)<\/code><\/div>
        <\/code>}<\/code><\/div>
        <\/code>catch <\/code>let<\/code> err {<\/code><\/div>
            <\/code>print<\/code>(err.localizedDescription)<\/code><\/div>
        <\/code>}<\/code><\/div>
        <\/code>\/\/ Close the dataTask block, and call resume() in order to make it run immediately<\/code><\/div>
    <\/code>}.resume()<\/code><\/div>
}<\/code><\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div><\/code><\/pre>\n
First, we fix some issues with the search terms. For one thing, the iTunes API is not going to like seing spaces, instead it wants plus signs (+), so the replacingOccurences function does this work, and we put the result in the itunesSearchTerm variable.<\/p>\n
Next, we also want to make sure no other characters will cause issues. For example a question mark (?) may be viewed by the API as the end of the request if it was included in the search term. So we use the method addingPercentEncoding<\/code> to encoded every character in to a percent-encoded form, and store this new value in to escapedSearchTerm.<\/p>\n
After that we define our URL, which is just the iTunes search API URL with the escapedSearchTerm<\/code> inserted in to the term<\/code> field. We store this in the variable urlString<\/code>. Next, we convert this URL String<\/code> in to a proper URL<\/code> object. This will basically validate that the URL is valid, or at least properly-formed, and then it gives it some useful methods as well that are common to URLs.<\/p>\n
Now comes the network request. We make the request from the URLSession<\/code> API that Apple provides. You could create a URLSession<\/code> for this task, but Apple’s API will provide a pre-constructed one called shared<\/code>. We access this with the simple dot-notation URLSession.shared<\/code>.<\/p>\n
From here, we use the shared sesion to create a new Data Task by calling it’s dataTask<\/code> function with the url<\/code> we created the line before. The next part is the completion handler. This itself is a function we define inline, inside of the curly braces.<\/p>\n
So, everything here inside of the curly braces, where the indentation is increased, is only executed after the Data Task has been completed. Hopefully when this happens, what we get back from the server is JSON data containing the search results! It’s also possible that there was some kind of error, so we check whether or not an error is present by using the optional binding syntax:<\/p>\n
if<\/code> let<\/code> error = error {<\/code><\/div>
...<\/code><\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div><\/code><\/pre>\n
This syntax replaces the optional error: Error?<\/code> with an unwrapped optional error: Error<\/code>, but only if it exists. Most of the time, the value of error<\/code> will be nil<\/code>, and this block of code will be skipped entirely.<\/p>\n
Next we are going to decode the result from a Data<\/code> object in to a dictionary we can use to access each JSON element in the results.<\/p>\n
Because the Apple APIs for JSON deserialization can throw<\/code> an error, we perform this work inside of a do { }<\/code> block, with a catch let err<\/code> block after it. If something goes wrong during JSON deserialization, the catch<\/code> block will be executed. But if everything goes to plan, the do<\/code> block will complete executing.<\/p>\n
Once we get the deserialized data back, we call a new method self.didReceive(searchResult: jsonResult)<\/code>.
\nThis method is not defined yet, so we’ll define it next.<\/p>\n
Finally we call resume()<\/code> at the end of the dataTask block in order to execute the API request immediately.<\/p>\n
Getting the data we need out of the JSON response<\/h3>\n
Now that we are getting a JSON response back, we will want to take out the values we care about. In this case that’s the price, a thumbnail, and the name of the app. So next, let’s create the didReceive<\/code> method inside our ViewController class in order to parse out this data and store it inside the tableData<\/code> variable that will inform our Table View.<\/p>\n
func<\/code> didReceive(searchResult: [<\/code>String<\/code>: <\/code>Any<\/code>]) {<\/code><\/div>
    <\/code>\/\/ Make sure the results are in the expected format of [String: Any]<\/code><\/div>
    <\/code>guard <\/code>let<\/code> results = searchResult[<\/code>\"results\"<\/code>] <\/code>as<\/code>? [[<\/code>String<\/code>: <\/code>Any<\/code>]] <\/code>else<\/code> {<\/code><\/div>
        <\/code>print<\/code>(<\/code>\"Could not process search results...\"<\/code>)<\/code><\/div>
        <\/code>return<\/code><\/div>
    <\/code>}<\/code><\/div>
 <\/div>
    <\/code>\/\/ Create a temporary place to add the new list of app details to<\/code><\/div>
    <\/code>var<\/code> apps = [[<\/code>String<\/code>: <\/code>String<\/code>]]()<\/code><\/div>
 <\/div>
    <\/code>\/\/ Loop through all the results...<\/code><\/div>
    <\/code>for<\/code> result <\/code>in<\/code> results {<\/code><\/div>
        <\/code>\/\/ Check that we have String values for each key we care about<\/code><\/div>
        <\/code>if<\/code> let<\/code> thumbnailURLString = result[<\/code>\"artworkUrl100\"<\/code>] <\/code>as<\/code>? <\/code>String<\/code>,<\/code><\/div>
            <\/code>let<\/code> appName = result[<\/code>\"trackName\"<\/code>] <\/code>as<\/code>? <\/code>String<\/code>,<\/code><\/div>
            <\/code>let<\/code> price = result[<\/code>\"formattedPrice\"<\/code>] <\/code>as<\/code>? <\/code>String<\/code> {<\/code><\/div>
            <\/code>\/\/ All three data points are valid, add the record to the list<\/code><\/div>
            <\/code>apps.append(<\/code><\/div>
                <\/code>[<\/code><\/div>
                    <\/code>\"thumbnailURLString\"<\/code>: thumbnailURLString,<\/code><\/div>
                    <\/code>\"appName\"<\/code>: appName,<\/code><\/div>
                    <\/code>\"price\"<\/code>: price<\/code><\/div>
                <\/code>]<\/code><\/div>
            <\/code>)<\/code><\/div>
        <\/code>}<\/code><\/div>
    <\/code>}<\/code><\/div>
    <\/code>\/\/ Update our tableData variable as a way to store<\/code><\/div>
    <\/code>\/\/ the list of app's data we pulled out of the JSON<\/code><\/div>
    <\/code>tableData = apps<\/code><\/div>
    <\/code>\/\/ Refresh the table with the new data<\/code><\/div>
    <\/code>DispatchQueue<\/code>.main.async {<\/code><\/div>
        <\/code>self<\/code>.appsTableView.reloadData()<\/code><\/div>
    <\/code>}<\/code><\/div>
}<\/code><\/div><\/div><\/td><\/tr><\/tbody><\/table><\/div><\/code><\/pre>\n
Here we are first off checking that we have the right data type. The results<\/code> argument passed in to the didReceive<\/code> function here is our JSON value returned from the iTunes Search API. We are going to want to check for three keys:<\/p>\n