http://www.mirchu.net/swift-programming-language-is-now-open-source/

iOS Development Course at FEMTech UC Berkeley

This is a post written on 2016–04–12 and transferred from satorusasozaki.com.

This is a written walkthrough of the iOS development workshop for beginners that I did at FEM Tech Berkeley. The whole Xcode project is on my Github. The slides I used in the demo are here.

We will create a simple iOS app with a switch and button and learn things below. At the end of this tutorial, I put some good resouses to keep learning iOS development.

  1. Create a Xcode project
  2. Build a basic UI with a button and a switch
  3. Add actions to the UI to make it work

You are going to make this app in this walkthrough. First, you need to download Xcode which has pretty much everything you need in order to make iOS apps. Go to the Mac App Store and download it.

Step 1. Create a Xcode project

Open Xcode

Open Xcode. You will see the welcome window. In the window, click “Create a new Xcode project”.

start xcode project

In the iOS section, choose Application and then Single View Application. Click Next.

Choose app
Choose name

All you need to care about here is Product Name and Language.

Product Name: Name it HelloWorldApp.

Organization Name: You can leave this blank. If you want, name it your name

Organization Identifier: With Organization Identifier and your app name, Xcode will create an unique identifier for your app. In this case, com.satorusasozaki.HelloWorldApp is the unique identifier. You will need the identifier when you release the app to the App Store.

Language: Choose Swift.

Devices: You have selections of iPhone, iPad or Universal. Universal supports both. We will choose Universal for now.

Leave all the check boxes blank because we don’t need them for this app.

The layout

This is the basic layout of Xcode. All the files are in the left most section called the Navigator Area. The middle is the Editor Area. In the Utility Area on the right, you can change the settings of a file specified and do some more detailed things.

Xcode layout

Check Point: Run the app on the simulator.

Run simulator

You can choose a device that you want to run your app on by clicking a device name. Choose iPhone 5 this time. Click the “Play” button next to the “Stop” button. If you are asked like “Enable Developer Mode on this Mac?”, click Enable.

The app simulator starts up and you are going to see this screen like an iPhone screen. We are going to build a basic UI on this screen in the next step.

Simulator

Step 2. Build a Basic UI

We are going to work on two files Main.storyboard and ViewController.swift.

We will always use Main.storyboard to build the UI. After that, we are going to write some code in ViewController.swift to add actions to the UI we built.

Set up Storyboard

Open Main.storyboard, then you will see the square canvas. This is where you will draw your app UI. What you draw is going to be exactly on the screen of the simulator.

Square storyboard

But wait, why is the canvas square? The iPhone simulator was rectangular like an iPhone, wasn’t it?. This is because Apple made Xcode so that we can make apps for a variety of iOS devices from iPhone 4 to iPad pro with the same storyboard (canvas). But in this tutorial, we are going to make an app only for iPhone 5. We don’t need the universal environment. So let’s make the canvas exactly the same as the simulator.

Go to the Utility Area on the very right. And select the document mark on the very left at the top.

Leave Use Size Classes blank.

Disable size classes

You are going to be asked like the box below. Just choose disable size classes and confirm that the canvas turned a rectangular. We are ready to build a UI here.

Conform disable size classes

Add a switch and a button

All of the UI components we are going to implement today are from the Object Library. What is it? If you look at the down right corner, there is the list that has a lot of UI components that you can use to build your app UI. That is the Object Library.

Object library

We want to use a switch, so just type in “switch”, and then a switch component made by Apple will show up.

Type switch

Drag and drop the switch to the canvas. The blue dot lines help you put it in the center.

Drag drop switch gif

Do the same thing to implement a button. Change the label saying “button” to “Tap Me!” by double-clicking inside the button.

You will see the simulator screen showing exactly the same as the storyboard you build. Try to touch the switch and the button. Did anything happen? No. Because we haven’t added any actions to the UI.

[Column] Storyboard vs code

We built the app UI visually by using storyboard. However we can built a UI by code. What you can do with storyboard is also done programmatically. There are some advantages and disadvantages using each method.

Storyboard

  • Not only iOS developers but also design people can modify the app thanks to the storyboard.
  • The bigger an app UI structure gets, the more complicated its storyboard becomes, and harder to manage.

programmatically

  • You can manage your project with version control systems like git easily.
  • You have to write more code than simply dragging and dropping in storyboard.

Which to use is your choice, but be aware of these advantages and disadvantages.

iOS User Interfaces: Storyboards vs. NIBs vs. Custom Code


Step 3. Add actions to the UI

Look into ViewController.swift

We will write some code to add actions to the UI connecting them together. Go to the Navigation Area on the very right and click ViewController.swift. All code we write go here. But first, why is it called “ViewController”? That’s because ViewController.swift is a file to hold the code that controls the view (UI) that we just created in the storyboard canvas.

First, please delete all lines inside the pink line because we are not going to need them.

Delete default code

The code will look like this.

Default code explained

Let’s see what we have here. import UIKit is importing Apple’s UIKit framework. Framework? importing? Framework is a bunch of useful code Apple already wrote for you. We want to borrow some code from UIKit framework to deal with the UI we built. To do so, we import the UIKit.

Let’s move onto the next line. If you don’t know what the word class means, see this youtube video (5 mins).

The basic concept of Object Oriented Programming is explained in the video. Here, ViewController class inherits UIViewController class.

Inside { } is where we write code.

[Column] Look inside of UIKit classes

You are going to use a lot of classes from some frameworks made by others as you go. We can use the classes without knowing how they work thanks to abstraction. However we sometimes want to look inside what is inside of the class we use and how it works. Xcode allows you to do that by very simple steps.

  1. Move the pointer over the class you want to look inside
  2. Hold down COMMAND key and click the name of the class

You will see the header file of the class.

Look inside class gif

To be a good iOS developer, you should be a good friend of the Apple documentation. In the documentation, you can get descriptions of all the classes made by Apple. To see the documentation,

  1. Move the pointer over the class you want to see the description
  2. Hold down OPTION key and click the name of the class

You will see the description of it.

See class reference gif

Connect the UI to code

To write code to add actions to the UI in the storyboard, we need to connect the UI to this ViewController class. Let’s create the connection between the UI and this file.

Click Main.storyboard file.

Click the double-ring button to split the Xcode screen.

Click double ring

The screen has been split with Main.storyboard on the left and ViewController.swift on the right.

The section between Navigation area and the canvas is a bit annoying hiding the canvas, so let’s disable it by clicking the square button at the bottom.

Hide unused section

If you don’t see ViewController.swift, click that button and select Recent Files > ViewController.swift manually.

Select view controller file
Split screen

Now, we are ready to make connections between the UI in Main.storyboard and ViewController.swift file.

connect switch gif

Move the cursor over the switch

Hold down Control Key, click and drag the cursor from the switch to ViewController.swift

  1. Change Connection to Action because we want to add an action to the switch.
  2. Name it onSwitch.
  3. Change Type to UIButton because we are passing UIButton object into the method.
  4. Click Connect.

What we did here is that we created a method which is called when the switch is changed. (For those who don’t know what is method, see here.

It is an action in programming. A function associated with an object is called method in object oriented programming.)

Do the same thing to the Tap Me! button.

connect button gif

Since we made the connections between Main.storyboard and ViewController.swift, we don’t need Main.storyboard to show up. Let’s go back to the single screen with ViewController.swift.

Back to single screen

Click this button and select ViewController.swift in the Navigation Area.

Add the code below into “onSwitch” method.

if sender.on {
self.view.backgroundColor = UIColor.yellowColor()
} else {
self.view.backgroundColor = UIColor.blackColor()
}

What this code block does is

If the switch (sender) is on, then change the background color of the screen to black.

If the switch (sender) is not on, then change the background color to yellow.

Add the code below into “onTapMe” method.

let alert = UIAlertController(title: "Hi",
message: "Hello World!",
preferredStyle: UIAlertControllerStyle.Alert)
alert.addAction(UIAlertAction(title: "Bye",
style: UIAlertActionStyle.Default,
handler: nil))
self.presentViewController(alert, animated: true, completion: nil)

Let’s see what these lines of code are doing.

let alert = UIAlertController(title: "Hi",
message: "Hello World!",
preferredStyle: UIAlertControllerStyle.Alert)

In the first line, we created an alert object from UIAlertController class passing in some configuration as arguments. This code is going to create an alert dialog box. title specifies the title of the alert box. message specifies the body. preferredStyle specifies the type of the design of the dialog box. If you want to see a dialog box with another design, try and change UIAlertControllerStyle.Alert to UIAlertControllerStyle.ActionSheet. Run it and see the change.

alert.addAction(UIAlertAction(title: "Bye",
style: UIAlertActionStyle.Default,
handler: nil))

In the next line, we added an action object created from UIAlertAction class. It adds a button to the alert box. title specifies the message that shows up on the button at the bottom of the dialog box. style specifies the style of the button. Try and change the part after . from Default to Cancel or Destructive. Run it and see the change. With handler, you can add another action when the button is pushed.

self.presentViewController(alert, animated: true, completion: nil)

The third line makes the alert box to show up.

Last Check point: Run the app

Test if we added the actions to the UI successfully.

test if UI works

That is it. I hope you learned the flow of an iOS app development. If you are interested in learning more about iOS, here is the list of some good resourses.

Videos

Online tutorials

Books

Meetups

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.