Self-Explained Swift

// Self-Explained Swift #1
// AutoLayout... Programmatically

import UIKit // Can't do a layout post without UIKit
import PlaygroundSupport // So we can have this class run in a playground

// I will demonstrate a clear concise way to add elements, separate
// layout concerns, and configure your UI... All without Storyboards.

class OurAwesomeViewController: UIViewController {

    // For each of our UI Elements, we are going to make a lazy
    // var property, and an in-line initializer.

    // Because these are lazy, the variables will call their in-line initializer
    // once they are ready to be added to the view hierarchy. Ideally, I would
    // like these to be lazy let so that you wont accidentally change them
    // once they are on-screen, but as of Swift 3 it is not supported.

    // We could just do let, but with a let, it won't let you wire up selectors
    // to self because self is not ready at initialization.
    lazy var titleLabel: UILabel = {

        // Initialize our new label with the default initializer
        let label = UILabel()

        // Always disable this, otherwise you will get layout errors
        // in the debug log. I am not even sure why this defaults to
        // "true" anymore as you will never need it.
        label.translatesAutoresizingMaskIntoConstraints = false

        // We can set fonts
        label.font = UIFont(name: "Menlo", size: 14)

        // Set some text color (note, we are not going for design awards here)
        label.textColor = .white

        // And of course, we can set the text
        label.text = "Awesome"

        // Center our text
        label.textAlignment = .center

        return label
    }()

    // Buttons are fun
    lazy var button: UIButton = {

        // Initialize
        let button = UIButton()

        // Disable this stupid "feature"
        button.translatesAutoresizingMaskIntoConstraints = false

        // Set a button title
        button.setTitle("Press Me", for: .normal)

        // Let's also wire up a button action
        button.addTarget(self,
                         action: #selector(OurAwesomeViewController.buttonTest),
                         for: .touchUpInside)

        return button
    }()

    // This is where you want to build your layout code. This is called by UIKit
    // when your view is being prepared to be put on the screen.
    override func loadView() {

        // Make sure you call super if you plan to use the default view
        // provided by UIKit, if you don't need it, make sure you set
        // self.view to be something
        super.loadView()

        // Customize the view
        view.backgroundColor = .blue

        // StackViews will make your life much easier. The will automatically
        // manage the layout of their owned views and expose some properties
        // to tweak that layout without manually managing potentially dozens
        // of constraints. StackViews can also be nested and given margins, this
        // can allow for quite a bit of flexibiliy AND ease. IMHO, this is much
        // better than manually building all of your constraints.
        let verticalLayout = UIStackView(arrangedSubviews: [titleLabel, button])

        // again, we never need this
        verticalLayout.translatesAutoresizingMaskIntoConstraints = false

        // Make it vertical, and tweak the distribution and alignment
        // feel free to play with these to get a feel for how this works.
        verticalLayout.axis = .vertical
        verticalLayout.alignment = .fill
        verticalLayout.distribution = .fill

        // If you want to have some margins on your StackView, you can enable it like this.
        verticalLayout.isLayoutMarginsRelativeArrangement = true
        verticalLayout.layoutMargins = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)

        // Lets create some constraints to keep our StackView layout in check.
        // This is essentially boilerplate code and you might want to create
        // a micro library to wrap up these common tasks. I will show mine in
        // another post later.
        let topConstraint = NSLayoutConstraint(item: verticalLayout,
                                               attribute: .top,
                                               relatedBy: .equal,
                                               toItem: view,
                                               attribute: .top,
                                               multiplier: 1,
                                               constant: 0)

        let bottomConstraint = NSLayoutConstraint(item: verticalLayout,
                                                  attribute: .bottom,
                                                  relatedBy: .equal,
                                                  toItem: view,
                                                  attribute: .bottom,
                                                  multiplier: 1,
                                                  constant: 0)

        let leftConstraint = NSLayoutConstraint(item: verticalLayout,
                                                attribute: .left,
                                                relatedBy: .equal,
                                                toItem: view,
                                                attribute: .left,
                                                multiplier: 1,
                                                constant: 0)

        let rightConstraint = NSLayoutConstraint(item: verticalLayout,
                                                 attribute: .right,
                                                 relatedBy: .equal,
                                                 toItem: view,
                                                 attribute: .right,
                                                 multiplier: 1,
                                                 constant: 0)

        // Now add our view...
        view.addSubview(verticalLayout)

        // And our constraints.
        view.addConstraints([topConstraint, bottomConstraint, leftConstraint, rightConstraint])
    }

    // Here is our test function to be called when our button is tapped.
    func buttonTest(sender: UIButton) {
        // Nothing fancy here, we will just change the background color.
        view.backgroundColor = .red
    }

}

// Fire up our awesome view controller in a playground.
PlaygroundPage.current.liveView = OurAwesomeViewController()
PlaygroundPage.current.needsIndefiniteExecution = true

// Layout in-code might look a bit daunting, but it allows you to become more familiar with
// the UI elements, their placement, and their properties. It improves change tracking in git
// and personally, I find this much easier to reason as opposed to the black magic of
// Interface Builder.

// BONUS CONTENT!!!

// You might want to know how to use this in an actual Xcode Project, rather than Playgrounds.

// First, in your project file, you might have a "Main Interface" configured, this is normally
// your first storyboard to load. Just open your project file and clear it out.

// Next

// This should be similar to your default AppDelegate. However, the only lines you need to
// change are in the applicationDidFinishLaunchingWithOptions function.
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication,
                     willFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey : Any]? = nil) -> Bool {

        // Let's create a new window. Every app needs one to start.
        // We will set its frame to be the same size of the screen.
        window = UIWindow(frame: UIScreen.main.bounds)

        // Set the window's rootViewController to be the
        // ViewController you want to start with.
        window?.rootViewController = OurAwesomeViewController()

        // This will push it on to the screen.
        window?.makeKeyAndVisible()

        // Unless you have some major failure during this function, you should
        // return true here to let your application know it's ready to go.
        return true
    }
}

// And that's it for my first post, let me know via twitter (@WestonHanners) if you like this
// format and want to see more.

// Keep an eye out for my next post where we will write a few extensions to make the code
// above much easier to manage and read.

Download This Playground


Easy, Automatic Server Mocking for iOS Testing

What do you do when you need to run UI tests on an integration server for an app that requires a VPN to reach its web service?

This was a question that I needed an answer for earlier this week. My first thought was to try to stub out the service calls with dummy data and bundle it with my app, but this was going to need a lot of work to maintain and I am pretty lazy. After an hour or so of research, I came upon mitmproxy. Here is the solution…

Project Configuration

First set up a new project configuration and call it something like “Mock” In your app’s target build settings, find the section called “Other Swift Flags”. Twirl down the arrow and add “-D MOCKING” next to your mocking configuration. This works similarly to preprocessor macros in Objective-C, and will allow you to set up code that will only be compiled when it is defined. Hopefully you are using NSURLSession for your API calls, find the place where you initialize it and set its configuration like this.

#if MOCKING

let proxyDict: [AnyHashable: Any] = [
    "HTTPSEnable"   :1,
    "HTTPSProxy"    :"localhost",
    "HTTPSPort"     :8080,
    "HTTPEnable"    :1,
    "HTTPProxy"     :"localhost",
    "HTTPPort"      :8080
]

URLSession.configuration.connectionProxyDictionary = proxyDict

#endif

This will redirect your http and https requests made with that session through your local proxy.

Install and Configure mitmproxy

Now you are ready to install mitmproxy. brew install mitmproxy. After installing, run it once from the terminal to make sure everything works. This will also install a certificate into ~/.mitmproxy.

Clone this repository somewhere.

This tool will install the certificate into your simulators. Run this command:

./iosCertTrustManager.py -a ~/.mitmproxy/mitmproxy-ca-cert.pem

You will have to enter “y” for any of the simulators you want to use. Now comes the moment of truth. Run mitmproxy again and start-up your app. Requests should appear in the window.

Recording

SUCCESS!!!

Start Recording

Finally we can start recording, when you are ready, run this command.

mitmdump -w output_file_name

You can name the output file whatever you want. Once it is running, do any actions you want to record in the Simulator, and they will be saved to that file.

Playback

Press CTRL+C when you are done. Now when you want to replay the responses you saved, run this command.

mitmdump -S saved_file

If your server is uses https, you can prevent mitmdump from trying to check the certificates during replay by adding the option “–no-upstream-cert”. You will now be able to run your app, even if you have no internet connection. This works especially well for UI testing since your requests are not likely to differ between runs. …and that’s it. I hope you find this useful, and if you have any questions, feel free to poke me on twitter.


UITableView Storyboard Design

Frequently I will come across some code for an iOS app that looks like this.

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("basicCell", forIndexPath: indexPath)
        cell.textLabel?.text = "Some Test Data"
        return cell
    }

    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 1
    }
    
    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 20
    }
}

And a storyboard that looks like this.

Screenshot 1

Now, there is nothing wrong about this, a lot of Apple code demonstrates doing this exact thing. You insert a tableView where it is required, implement delegate and datasource protocols, drag connections in your storyboard and you are done, but we can do a lot better. Let’s begin by describing two of the big issues with this particular pattern.

  • This tableView is not reusable, you will have to rebuild it, along with it’s prototype cells in every screen that requires this data.
  • Your viewController will become polluted with code to handle taps, edits and actions for this tableView and will contribute to creating a “Massive View Controller”

Xcode has given us the tools to improve this quite a bit right off the bat. If you look in the object browser in Xcode, you will find an object you are unlikely to have used before.

Screenshot 2

This will allow you to embed a scene from your storyboard directly into another. Let’s see what this looks like. Start by deleting your old tableView then dragging out a UIContainerView and setting its constraints. You would want the container to be positioned in the exact spot you want your tableView to be. You will notice it created a new scene attached to it, it’s a generic UIViewController, go ahead and delete that for now. Drag a new UITableViewController out into your storyboard, we need to reconnect it to the container.

Segue Connection

You now have a UITableViewController that can be used between multiple scenes in your storyboard. You just set the controller’s class, stick your delegate/datasource methods in and you are good to go. But we aren’t done yet, in Xcode 7, Apple gave us Storyboard references. By using references, you can embed this tableView in completely different storyboards. Start by dragging out one of these guys into your other storyboard

Screenshot 4

Next you want to set its storyboard and identifier (I have my tableView scene from the above the identifier “tableViewController”, but you can make something more fitting for your app). The identifier here needs to match whatever you put in your tableView scene’s “Storyboard ID”.

Screenshot 5

Now you can repeat the same steps as above to create and connect a UIContainerView to this new reference and voila you have embedded the tableView here as well. I hope this helps you improve your app structure and write less code. I was blown away when I found out how to do this. If you have any questions, poke me on twitter and I will try to help you out.


How to Start an iOS App Portfolio

Since my post yesterday, the most common question I have received is

“What sort of app should I build for my Portfolio?”

This is an interesting question. Ideally, you would do the same thing you would if you wanted to build an app not for a portfolio. Start by identifying a problem that you feel like you can solve and then solve it in the best way possible. But I can imagine a new developer might not be ready to deal with all the issues surrounding developing an original idea from scratch. That said, my goto response is usually “Make a Twitter app”. Twitter clients are interesting because they will exercise a lot of the skills required to build apps in general. I will list a few of the things I would expect a portfolio quality Twitter app to use (or any portfolio quality app).

It Uses UITableView…

Most iOS apps that I have built have used UITableView in some way or another, it’s probably the most common user interface element in a standard app and being able to demonstrate its usage looks great when applying for a job. This works great for building a Twitter timeline. Try to implement swipes to add actions to your rows and make sure you show proper cell reuse. Look up methods for paging tweets so that when you reach the bottom of the timeline, more cells will load in.

It Uses HTTP API…

There are not many apps for iOS that won’t need some sort of network resource and being able to connect, authenticate and use data from a web service is something you end up doing a lot. Now, I do think you can get away with using the Twitter SDK, but attempting their REST web service would really show you know how to connect to and use HTTP web services.

It Uses Interesting UI…

A lot of customers like their iOS apps to stand out and a Twitter app presents a lot of opportunities to flex your UI building skills and make something interesting and fun to use. Interesting UI can be anything from some sort of custom-built button to a use of graphics and animations to make your app feel fun and alive. Something I like to do is look at some of the more popular apps on the AppStore and try to see if I can duplicate some of the animations and UI elements that they use.

It Uses Persistence and Security…

There is not much you really need to persist in a twitter app except for one important piece, credentials. You will need to show how to store user credentials (or more likely their token) in a secure way. Use of the Keychain API is your friend here and while it’s a bit of a pain to learn, it’s better than leaking user data and putting accounts at risk. Don’t take security lightly

It is relatively simple to build…

A Twitter app doesn’t take a year to build, so you can probably whip one out in a week or two if you can find the time to sit down and code. Portfolio apps don’t need to be big complex pieces of software, iOS tends to work best with simple apps and so it’s perfectly fine to build simple apps for your portfolio. Twitter is just one of the things I like to suggest because it touches so many commonly used parts of iOS. If you are still wanting more, here are a few other ideas to get your gears turning.

  • Notes app ( Demonstrates text manipulation, bonus points for iCloud syncing the notes)
  • Where Did I Park? (An app to mark places on a map and store them for later, demonstrate the use of the location API)
  • Painting App (Demonstrates use of Touch and Graphics API)
  • Alarm Clock (Use local notification and audio playback)

Whatever you decide to build, try to follow some sort of style guide and make your code as clean and easy to read as possible, you will want to to be something you can print out and show to recruiters if need-be.

TL;DR: Build an app that is simple, yet uses as many common iOS features as possible. Make it as pretty as you can, and polish to a shine. Repeat till you have a couple of apps under your belt.

Good Luck!


How to become an entry level iOS developer

I have been mentoring some friends who are interested in a career in iOS development, and was asked to come up with some sort of list of what they should know to get started. This seems like a good topic for a blog post, so without (much) further ado, I give you my list of what you should know to become an Entry Level iOS Developer.

Basic CS Knowledge

I don’t believe that being a computer science PHD is a requirement for getting into mobile application development, In my experience, heavy CS concepts don’t often come up in day-to-day work, but a lot of employers still like to run their interviewees through CS puzzles. So, for the novice, I would recommend watching the Harvard CS50 courses on YouTube as a great place to get started, they are easy to follow and actually pretty interesting to watch.

If you are planning to interview with one of the big companies like Google or Apple, you might benefit by picking up a couple algorithm books to study.

Cracking the Coding Interview by Gayle Leekman

The Algorithm Design Manual by Steven S. Skiena

Swift or Objective-C

You don’t have to be an expert, but you should be able to write in at least one of these languages without having to look up syntax very often. Just get yourself to a point where you can write classes, structs, loops, functions, assign variables and evaluate expressions without help.

Right now we are in a strange time where it’s still acceptable to be hired only knowing Objective-C. Swift is pretty new and unless you are applying for a company that has a lot of project turnover, you will mostly be writing in Objective-C anyways. That said, there are plenty of companies taking the plunge to Swift (including the one I work for) and I don’t think it will be too difficult to find a job if it’s the only language you know. The important thing is to be fairly proficient in whichever you choose, and get familiar enough with the other that you can at least read the code.

Frameworks and API

Cocoa Touch is updated yearly and with it things come and go. It is not unusual for me to work with the Apple Documentation open most of the time; there is just too damn much to try to keep in your head.

I don’t think its necessary that you memorize all of the iOS API’s, but you should have a good idea of what is available to you, and be fluent in a few of the big ones.

UIKit (IUViewController, UITableView, UIButton, UINavigationController, GestureRecognizers)

Interface Builder (Storyboards, Segues, and the odd .xib)

Foundation Types (NSArray, NSDictionary, NSString) and their Swift counterparts (Array, Dictionary and String)

HTTP API (NSURLSession, Basic REST API concepts, JSON Parsing with NSJSONSerialization)

Grand Central Dispatch (GCD, NSOperationQueue)

Persistence (NSCoding, NSUserDefaults, CoreData)

Memory Management (what Retain Cycles are and ARC fundamentals)

Third-Party frameworks can also fun, but try to not depend on them too much; if it’s something I can do myself, I usually do.

Development Patterns

Patterns are important, they make development easier and they make your code cleaner. Make sure you understand these basic patterns, they are used A LOT in the iOS Frameworks and it is not likely that you will be able to do much without knowing them. There are many more, but you can learn those as you go.

Delegation (This is sort of the workhorse of most iOS API’s, you should DEFINITELY understand this)

Model View Controller (MVC, I don’t think Apple did the best job of encouraging best MVC separation, but it’s an important pattern that can help improve your code if you take the time to implement it properly. Also, it’s pretty much guaranteed to be on any iOS interviewer’s question list.)

Subclassing or Object-Oriented Programming (The most part you will be writing apps in this style)

Singleton (This one can definitely be abused… use sparingly.)

Familiarity with the Environment

This might seem obvious, but if you don’t have a Mac, get one! If you don’t have an iOS device, get one! While it’s not impossible to get started just writing apps for the simulator, you will eventually want a real device for development. As for computer, it’s gonna be pretty hard to learn Xcode without a mac to run it on. I started out with a 2009 MacBook Pro 13″ and a first-gen iPod Touch. It is quite possible to get by with the lower end devices to start, it was nearly a $1500 investment, but totally worth it in the long run.

UX/UI

All mobile developers should at least know some of the basic concepts of design. You should know the difference between mockups and wireframes and how to use both in your development process. Knowing what Apple considers usable UI will help as well; for this you will definately want to read the Apple Human Interface Guidelines

Tools

You should be familiar with a few of the common development tools.

Xcode (of course)

Source Control (Git, Subversion or Mercurial… probably just git though)

Issue Tracking Software (JIRA is the big one here, but there are others. Just play with some of them if you can.)

Opinions

Having an opinion about iOS, Swift, or even a specific API is a great way for interviewers to understand how deep your knowledge about a topic goes. It also allows us to see your passion. If you are having an interview and you are asked, “So what do you think of Swift?” saying “It’s alright, I guess” is not the correct answer, you should tell them what you think of optionals, how you like using a specific feature. There aren’t many wrong answers here, the important thing is to have something to say.

Portfolio

Actions can speak louder than words. If you really want to nail that interview, put together a couple of simple apps (or even better, launch them on the AppStore); they really like to see that you have the ability to complete a project. GitHub is nice too, but make sure your code is easy for the interviewers to compile if they wanna test it out.

If you are wanting more resources to get started, please checkout my iOS Developer Resources page where I link to blogs and pages I found helpful when I started out.

I guess the last thing I would add is JUST DO IT! Right now iOS developers are in high demand and if you can get yourself to a decent skill level, you won’t be without work for a while. It’s a rewarding job that allows you to practice both engineering skills and creativity.

DO IT/

Did I forget something? Let me know on Twitter (@WestonHanners). I want to make this my go-to resource for helping new developers start their career. by the way the company I work for is hiring iOS Developers of all skill levels, if you are interested, click this link to find out more Y Media Labs Careers Be sure to tell them I sent you ;)