This is the first section of the iOS crash course. These three lectures will cover the basics of the development process. By the end of the third you should have a solid foundation to begin iOS development yourself. However, this is only a brief primer! In the rest of the iOS lectures we will be diving into more difficult and complex topics in a more comprehensive way. For theses three lectures, the whole picture will not be clear; follow along closely and try to understand each step.

Lecture 1 will cover:

• The programming environment
• Xcode
• HelloWorld

You may notice as you make progress through the tutorial that your IDE colors do not match those from the screenshots. That's my fault: I can't stand a white background on my IDE's, so my Xcode color scheme is set to “Dusk.” If you'd like to change yours to match, instructions are included below.

1. Go to Xcode > Preferences > Colors
2. Select “Dusk”

Xcode is the IDE used for all iOS development. Although 3rd party IDE's exist, you should learn and appreciate Xcode, its fast, slick, and optimized for iOS. Because Apple has vertical control over their products (i.e. they have control over their products from hardware to operating system to application) Xcode can make a lot of menial tasks very easy and integrates well into the development cycle.

1. Open the program to begin. We will start by creating a new project through File > New
2. Enter a name for your new project. Make sure “iPhone” is selected under the “Devices” dropdown. Enter a name for the Company Identifier (contents don't matter right now)
3. The next panel provides some preconfigurations for your new project. Don't worry about them for now– make sure the highlighted options are selected

Xcode's main view may seem a little overwhelming right now, but a lot of the options are not needed at this point. The two circles on the image below show everything you need to pay attention to now. On the top left you'll see a play button. This runs your application in the Simulator. Top right contains six buttons. The three on the left represent panes currently open in Xcode. The three buttons on the right allow you to change editor types. Don't worry too much about them now!

Click on the Main.Storyboard file in the project navigator in the left pane so your screen looks like the screenshot below. This is a storyboard, which lays out the interface of your application.

Run your application to make sure everything works. If the simulator does not start you get an error, go back to the iOS home page and follow the instructions under the Lab Simulator Fix section.

InterfaceBuilder (commonly abbreviated as IB) is Xcode's integrated interface-building tool. It is a WYSIWYG (what-you-see-is-what-you-get) editor that allows you to drag and drop Views onto the screen easily. One of the nicest features of Xcode, InterfaceBuilder allows you to deal with the View creation process without ever having to write a single line of code. The file that InterfaceBuilder operates on is called the storyboard.

IB can look a little complicated, but there are only a two broad kinds of items that appear on the screen.

1. View Controllers- every long rectangle on the screen represents a ViewController. These rectangles are the only things that can “float” in IB's main window
2. and 3. Arrows- arrows in IB represent relationships between ViewControllers. The arrow on the left of the image above identifies the first ViewController to appear when the app launches. Arrows between ViewControllers are called segues and represent a transition between ViewControllers

That's all fine and dandy, but you haven't actually learned what Views and Controllers actually are. One of the ways in which iOS is structured is called MVC, which stands for Model, View, Controller. This is just a way of thinking of different objects in code and keeping them separate.

• Views are interface items that interact directly with the user by displaying data or receiving button clicks.
• Controllers are each responsible for a different “scene” in the app, each which serves a particular function. A Settings scene , a Home scene , and a Contact scene each have different controllers. Controllers own views, and each gets their own setup of them in InterfaceBuilder. They also, obviously, control.

The following are examples of views in the pictures below

1. Button
2. Image
3. Table

The following are examples of view controllers in the pictures below

1. Settings
2. General
3. Autolock

Its useful to do a quick Hello, World starter just to get your feet wet. We will code two variations to get an idea how InterfaceBuilder works.

Click on the ViewController.swift file on the project navigator. Type the following line before the closing brace in the viewDidLoad method.

println(“Hello, World!”) Run your program by clicking the play button in the top left corner. Check the console for your message!

Ok, that was pretty basic! println() is a library function call that logs the message within the quotes to the console. This call takes in a String object.

In this next step, we're going to make a Hello, World button and label on the main interface.

1. Select the Main.storyboard file in the project navigator
2. Ensure the Object Library is selected in the bottom right of the screen (circled)
3. Select the ViewController on the Interface Builder.
4. Scroll through the list of objects to find a Label, or type “label” in the search box on the bottom right corner
5. Double-click on the view controller on the storyboard to ensure it is in focus. Drag the label onto the top of the view controller
6. Repeat the last two steps with a Button, placing it below the label

This is what your view controller should look like after the last steps. We have two minor changes to make to the format and then you will hook up the views you just added to code.

• Change the title of the button to “Greetings! Welcome to CS 407.” To change the title of the button, double-click on it and type in the new title.
• Change the width of the label to accommodate our greeting.

At this point you can run your app again and see the views laid out on the root view. Unfortunately, since the views are not connected to code, they don't do anything terribly interesting.

What does this mean? Remember, MVC splits objects into different types, keeping their code and interaction seperate. Each type of object's source code shouldn't ever mix with other types of object source code. Views don't merge into controllers and vis-versa. You have already seen Views (the label and the button) and Controllers (the rectangle in the middle of the screen, and the file you wrote “Hello, World!” in.) Controllers are the masters of the program, so to make Views do anything interesting we have to connect the two.

We connect Views to Controllers using a simple drag and drop. There are two kinds of connections you can make:

• IBOutlet - gives the owning view controller a reference to the view. It can change the content, properties, and functionality. This is used for non-interactive views that need to be changed dynamically.
• IBAction - establishes a callback from a view to a view controller. When some action happens, the view calls a method in the controller. This is used for responsive functionality.

IB stands for InterfaceBuilder. It is an established convention in iOS to prefix your objects with 2 letters that tell the programmer from what library they come from.

When the user presses the button, we want to change the text of the label to “Welcome to CS407!” In order to do this, we need access to the label through an IBOutlet, and we need to know when the button is pressed through an IBAction. In order to make connections, we have to use the Assistant Editor to see the storyboard and the code

To open the assistant editor, press the second button from the left in the top right corner. The icon looks like a two intersecting circles.

• Create an outlet from the view to the controller by right clicking on the label (or pressing control), dragging to the right, and releasing inside of the braces. A small notice will appear when you are in the right section.
• Name the label labelHello, make sure the connection values is set to “outlet” and click connect in the popup that appears
• Create an action from the button to the controller.
• Ensure the Connection field reads Action, not Outlet. Name the action buttonHello.

When the button is pressed, we want to change the text of the label. This is done by setting the button's text property. Your code should look like this

Place the following statement in between the braces of the buttonHello(sender: UIButton) method labelHello.text = “Welcome to CS407!“

Run your program! If it works, go crazy.

Ok. That was a lot of unexplained steps in quick succession. If this seems painful, don't worry. Its really quite simple, and at this point you've performed all the steps you'll ever need to build almost any iOS interface! If you can't quite understand what just happened, don't worry. You can just repeat the previous steps over and over to build your interfaces, and eventually things will click. We will discuss a little more of the theory of InterfaceBuilder in later classes.

Add 3 views to your view controller

• A text box
• Label
• Button

Create an app such that when the button is clicked the label changes to “Hi, <Text Box Content>”. Essentially we want a functionality, where we type something into the Text Field, then tap the Button and change the contents of the Label

If this seemed a little slow, don't worry. The fun is just starting. Covering iOS development is a little weird for most people at first, because they have to deal with a new language, IDE, and set of conventions like MVC. Hold on tight!

In Xcode “Why is the default-provided canvas square?” Well, as was told to us in the class, it wasn't a square from the beginning.

In previous versions of Xcode, this Default Storyboard Scene had the basic proportions of an iPhone in Portrait mode. Now We have things like the iPhone 6, the iPhone 6 Plus, the 5, the 4s. A Square is simply the most generic starting point. Therefore we now need to build interfaces which are responsive to a change in screen size and position. This is where auto layout comes in.

We discussed auto layout in detail in class. Before we dive into a challenge problem, here are some tricks to remember while working on auto layout.

1. Auto layout is all about constraints. There are two ways to edit/add constraints, one is by using the buttons present in the bottom right.

second, by pressing control and dragging the pointer towards the direction where you want to add constraints.

2. Use “Document outline” to understand the hierarchy.

3. If you see the color “orange” something is wrong with the layout. The issue navigator can give you more details. “Blue” is good.

Please read Ray Wenderlich's tutorial on Autolayout here, that would help in understanding the concepts at the grassroots.

• Start a new single view application project.
• Create a view which looks like the image shown below. It has the following view objects - Slider control, 4 buttons on each corner, text box, text view

You challenge is to add constraints to all the view objects, and make them work for different screen sizes and orientation.