HelloWorld(); – A Swift Way to Get Into iOS Development #1

Welcome to my first tutorial series on how to program for iOS with Swift. In this one you gonna learn how to make your own apps. And I won’t bore you with theory. We’re doing this with example apps.

Swift 3.0

The programming language we are going to use will be Swift 3.0.
Swift is a programming language that was introduced by Apple in 2014. I have been programming in Swift ever since, although I have only had one app in the AppStore so far.

print(“Hello World!”);

The most iconic start to everything concerning programming is a little program called HelloWorld. It basically teaches you how to output a small sentence, commonly “Hello World” hence the name. So we are going to start with this.

Getting Started!

The tutorial will be on macOS and we will use Xcode and iOS 10. You might read this in the future and 10 won’t be the current version of iOS. Doesn’t matter. The basics I try to convey to you won’t change that much. I try to keep each blog post updated when a big change happens.

The first thing you have to do is to download Xcode from the Mac AppStore.
Download here!

If you have done this fire up Xcode, accept the EULA and you are good to go. It could happen that Xcode has to download additional content on its first startup. While you wait you can set up your free Apple Developer Account.
If you already have an AppleID you are almost finished. Just log in on the website and your AppleID is converted to a Developer Account. This allows you to access certain parts of the site which has ton of resources and sample code.
Become an Apple Developer!

Now you should be ready to conquer the world of iOS programming. We start at the welcoming screen Xcode presents on startup.

First startup window
This is the screen that should be displayed if you start Xcode.

One small step, my first app.

We are going to create a new Xcode project. It will be a Single View Application.

Application type
Choose Single View Application and hit ‘Next’

Enter all the necessary details of your app. First you have to set its name. I’ll call mine HelloWorld, but you can call yours however you like. If you have already paired your AppleID with Xcode you can choose your account as team. However, this is not obligatory so you can leave it empty. As organization name  you can set your name, or your iOSDev company, your choice. The organization identifier is commonly just your domain backwards. It is used to identify each of your apps when you upload it to the AppStore, so this is not as important now. Language is Swift and Devices is iPhone. You can uncheck CoreData, Unit Tests and UI Tests.

Setup preferences
Here you set all the details of your app.

After you hit ‘next’ you choose where you want your app to be saved to. Make sure you uncheck ‘Create Git repository’ because we won’t need source control for our simple app.

Now you can press Create and you are done!

Basically you have just made your first app. Right now it doesn’t do anything useful. It just displays a blank white screen.

That’s it?

Nope, I promised you a HelloWorld app. You should now have a window that kinda looks like this.

Application information
The standard start screen of every newly created app.

I won’t give you an detailed description of every part of Xcode right now. We will learn about each function when we need it. So now on the left side of the window you have your Navigator. Here you can see all the files that currently make up your app.

File Navigator
A quick overview of all the files that make your app do stuff.

Storyboards, Storyboards, STORYBOARDS!!

Select Main.storyboard. The middle section should change and you should see a blank iPhone shaped canvas. This is called the Interface Builder. Your current User Interface (UI) setup doesn’t display much. We’re going to change that.

Interface Builder
Your first storyboard. It’s empty now, but not for long.

 

You might also noticed that the right section of the window changed. This is the Utilities section. Xcode uses this section to show you details about currently selected things in your editor.

We continue by pressing on ViewController at the top of your iPhone canvas. The utilities section now shows detail about the current view controller.

Focus on the bottom part of the utilities section.

Object library
This part of the utilities section is called the Object Library. Here you can choose parts for your app’s user interface.

Now scroll down (or filter with the text field below) until you find an object called Label. Press and drag the label onto your view controller in the editor. Xcode automatically helps you aligning your label. Put it dead center on the view.

Storyboard window
A nearly perfect UI. Minimal and effective.

But what if I want to try it on another device?

Now to make sure that the label is in the center on every device we have to use something called Constraints. Constraints are instructions for you app to allow it to scale on every kind of iOS Device. Which is awesome because you don’t have to manually create storyboards for every iPad and iPhone your app supports.

You can easily add them from within the Interface Builder at the bottom you can see a bar which has some information on which device is currently simulated, what’s the current size (in %) and on the right side you have some icons. These icons are used for constraints.

Constraint controls
One design to rule them all. Constraints allow you to focus on programming and not worry about display sizes.

You now select the icon in the middle. That one with the two rectangles that are aligned to the left. Pressing that icon reveals a popup. In this popup you check Horizontally in Container and Vertically in Container. Then you hit Add 2 Constraints.

And now your label has constraints and your app knows how to display it properly on every device.
The only thing left to do is to hook up the label to our code to allow us to change its properties. So let’s do that now.

I Want to Code, God Dammit!

First we switch the editor to the Assistant Editor. The icon is the one with two circles overlapping each other. You can also hide the utilities section because we won’t need it any longer.

This menu allows you to customize your workspace layout for efficient usage.

Your window should look somewhat like that.

Using the Assistant editor.
By viewing the storyboard and the code at the same time you can easily add connections between the two.

Now all that’s left to do is to Ctrl + Click on the label and drag somewhere inside the code on the right. When you let go Xcode shows you a popup menu where you can set some properties of your Storyboard to Code connection. There are two types of connections available in this menu. IBOutlet and IBAction, IB stands for Interface Builder. An outlet lets you change the properties of the object it is connected to, in this case the Label. An action is used if user input is processed, an example would be the tap on a button. We will use an IBOutlet for the time being. Give it a good sounding name and hit connect.

Add a connection between storyboard and code.
The popup lets you set some preferences for the connection.

Now you can switch back to the standard editor, by pressing the button left of the two circles. After that you can select the ViewController.swift file in your Navigator on the left side. And now onto the coding part.

Finally.

When you look at the file you can see two predefined functions, viewDidLoad() and didReceiveMemoryWarning(). The former gets called once the view and all necessary resources are loaded into memory. One mistake I made when I started out was to assume that the view was already displayed at this time. That is not the case, there’s a separate function for that. But that’s topic of another tutorial. For now we’re gonna use the viewDidLoad. didReceiveMemoryWarning gets called by the system if your app is using to much RAM. You can ignore it for now.

override func viewDidLoad() {
        super.viewDidLoad()
(1)     let myString = "Hello World!"
(2)     myLabel.text = myString
        // Do any additional setup after loading the view, typically from a nib.
}

In line 1 we create a constant, indicated by the keyword let, and we give it the value of “HelloWorld”. This is called a string and it is used every time you want to handle text.

In line 2 we get our label connection, myLabel in this case, and we access its property text by using a period. Now we can set the text property to our string.

And after that we are really done! No really try it out. You can run your app directly on you Mac by pressing the play button in the top left corner of the window.

Run your app for the first time.
You did it! Your first app for iOS. Press the play button to view it in all its glory.
App running
Your first app running on an iPhone 7 Plus.

What you have learned in this tutorial.

We have covered a lot. You now know how to get started with Xcode. How to set up a new project. You also learned a little bit about Xcode itself, what the different sections are called and how to switch between files. You got a glimpse of the Interface Builder and you know how to connect a label, and every other object, to your codebase. And in the end you learned about constants and how to set properties of your UI objects.
That is a lot of new stuff to process.

Not enough?

If you still feel curious and you can’t wait for the next tutorial try to change the background color of the view or the text.

A small hint: every file can access itself with the keyword self. And every ViewController has a view property. Colors are handled with UIColor which has some standard colors as properties.

 

Happy Coding!

Michael.

 

All the files of the finished project can be downloaded here.

 


Did you find this tutorial helpful?
Do you want to learn more about iOS and all its in and outs?
Tell me in the comments what you would like to see covered.

Leave a Reply