Introduction
One of my favorite quotes / aphorisms is from Clifford Stoll, astronomer and author of the book, The Cuckoo’s Egg. In that book, he gives the astronomer’s rule of thumb:
Clifford Stoll
If you didn’t write it down, it didn’t happen.
I think it’s that way for software development too. I’ve done things in the past that are so distant now, it’s as if someone else wrote those programs. As developers, we often race into some new technology or language or API in an effort to get something working, then we move on to other things and forget most of what we learned a month or less later.
I also like to document what I’m learning in an effort to help the material gel. Because it is so easy to forget what I’ve done and learned, I like to document what I’m learning as I go as a kind of Engineer’s Notebook. Finally, I like to share what I’ve learned as a way to build connections and community in the people who are interested in the same topics.
Finally, as I document things, I like to create a walk-thru of the material as best I can and I find the best way to do that is with copious screenshots so you will find over thirty pictures in this first chapter. This provides a way of experiencing the material before you even open up the development environment.
Background
My First iOS App
A couple of years ago, I built an iOS app (for iPhones and iPads) and at the time, I learned just enough Xcode (iOS Development environment) and Swift to get it going as fast as I could.
I also developed that app as a WinForm app, Web App, Android app and as a UWP (Universal Windows Platform) app.
However, now there are a lot of other apps I’d like to write for iOS and I find that I barely remember Swift, Xcode and the rest so I decided I needed to focus on learning iOS Development again.
I Want to Learn to Create Apps
Recently, I started reading a really great book which suddenly jumped its focus on pure Swift and the functional programming parts of Swift so intensely that it became boring by the middle of the second chapter. I was looking for something different. I wanted a book that teaches me the language and development environment as it pertains to creating apps.
There were a lot of things that I wanted from a book and I couldn’t exactly find them so I decided to take a shot at it myself and that is how this book came about.
In the first chapter, we will jump in and build an app that will give you an overview of the Xcode IDE (Integrated Development Environment) and some very basic Swift language concepts. After that, each chapter will walk you through building apps that will help you get the feel for iOS development and hopefully provide you with a few iOS utility apps that you may use later.
Best Way to Learn: Write Code and Build
I find that the best (and most memorable) way to learn programming and programming languages is to build apps with the language.
Of course, it is important to have the code explained along the way also so I will do that with each chunk of code that we add. I will walk you through the steps as we encounter them. It’ll be a bit like you’re sitting with me and looking over my shoulder (screenshots all along the way) as I design an app and write the code. Then, after you watch me, you can try walking through the material so you will own the material for yourself.
No Repeats, and No Installation Walk-thru
However, once I cover something, I won’t repeat it, because you can always look back and figure out how to do it. Also, I’m not going to take up valuable time showing you how to do things like installing the Xcode Development environment (Apple’s IDE (Integrated Development Environment)). Those things are documented nicely all over the Internet and if you’re interested in developing iOS apps, you are already motivated and experienced enough to know how to follow a wizard to install an application on your Mac.
Here's a GIF of the simple app you will build in this first chapter.
Main Goal of This Book
The main goal of this book is to help you learn to design and build apps that do something useful.
It’s possible that you are attempting to create an app that will help you do something and you aren’t interested in sharing those apps in the Apple Store. That’s fine and you can do that, however, we will also learn how to deploy your apps so you can share them with everyone who has an iPhone and/or iPad.
With all of that in mind, let’s get started on your first app.
Starting up XCode
When you start up the XCode application on your Mac, you will see a window similar to the one shown below:
On the left side, you can choose one of three actions to take.
We are going to choose the second one, “Create a new Xcode Project”, but I’ll explain the other two just so you know what they are.
Get Started With a Playground
The first one is “Get started with a playground”. That is a mini-development environment which allows you to play around with the Swift programming language so you can write code snippets and try out the language. That option doesn’t require (or allow) you to create an app or any GUI (Graphical User Interface) items in order to allow you to just learn the Swift programming language. Since I told you our focus in this book is creating iOS apps, we won’t use playgrounds in this book. However, as you are learning Swift concepts, you can try them out there if you like. Just keep in mind that not all code will work there. That’s because code that is directly related to iOS apps contains special GUI components that are not available in the playground. Playground is exclusively for learning Swift code and does not support those special components.
Clone an Existing Project
That last choice has to do with working with projects that have already been created in a Git (Version Control Software). Git is a special software that tracks changes that have been made to source files (Swift code) so that multiple users can work on a project and share the changes they’ve made. We’ll learn more about Git later, since it is a very helpful system for ensuring we don’t lose code. Git is also related to Github.com since you can create Git repositories and share them there. If none of this makes sense right now, it is fine. Again, we are concentrating on the middle choice, “Create a new Xcode project”, because our main goal is to get you creating iOS apps.
Right Side of Xcode Start Screen
The items you see on the right side of the screen are projects I’ve already created. You will use that list later as a quick way to open up a project you’ve worked on before.
For now, go ahead and click the “Create a new Xcode project” and Xcode will start and present you with another window that includes a number of choices.
Single View App
Most likely, yours will default to the IOS tab and automatically select the Single View App. That is the one we will be building as our first app. But take a moment and notice that there are a number of different kinds of project templates for your app. The Game template provides some extra resources that makes developing a game easier (such as drawing libraries, etc.).
You can also see there are things like Tabbed App which will give you multiple views in your app that you can switch to for different functionality. There’s even an iMessage App template to help you get started there.
Once you’ve selected the iOS Single View App, go ahead and click the [Next] button which will present another dialog box which will allow you to name your project.
Whatever you enter into the [Product Name] text box will be the name of your project / product.
There are some limitations on characters used in names. Avoid spaces as much as you can. You’ll find as a developer that you’ll generally want to avoid spaces in names, since they can often make things difficult.
The [Team] text box is related to your Apple ID. However, most likely you don’t have one so you can just leave that empty.
The [Organization Name] text box is used to identify the organization who is responsible for the app. In this case, you can just put your name in there. You’ll see later that most of this is really only important when you go to deploy your app to the App Store.
The [Organization Identifier] is generally the organization’s web site in reverse order. In the snapshot, you can see that I put com.happy, which would actually relate to the web site happy.com.
My web site is raddev.us so normally I’ll put us.raddev in there. Again, if you don’t have a web site domain, you can just use whatever you like for now. It’s only important when you go to deploy your app to the App Store.
Xcode concatenates the Organization Identifier and the ProductName together in an attempt to create a globally unique [Bundle Identifier] which you can see in the snapshot.
However, since we haven’t added a [ProductName] yet, it has the generic name.
Finally, the last option on this dialog box that we are concerned with now is the [Language] option. Of course, we want to choose Swift, because this book’s focus will always be on the Swift language. If you click the list, you will see that you can also choose Apple’s Objective-C language that previously was required for building apps.
Let’s fill out the dialog like the following and click the [Next] button to create our first app.
Here’s how I filled mine out. You should (obviously) change the [Organization Name] (so it includes your name) and the [Organization Identifier] so it includes your domain name if you have one.
You can see that you will then have a valid [Bundle Identifier]. Mine is us.raddev.chpt1-UIKitExamples.
Once you fill out all of the appropriate fields, go ahead and click [Next] button.
When you click the [Next] button, Xcode is going to prompt you with a Finder dialog (file location) so you can choose where you want to save your project. Xcode will create a project folder (named after your project) in the target folder that you choose. You can see that I’ve chosen the Dev folder. I’ve also chosen to allow Xcode to [Create a Git repository on my Mac]. That simply means that a special .git folder will be created under the project folder and changes will be tracked using the Git Version Control System. We’ll learn more about that later.
Once you choose the folder where you want to create your project, go ahead and click the [Create] button to create your project.
After Xcode creates the project, it will display the main project view.
I’ve highlighted (red box) the project folder in the upper left corner of Xcode because it is so subtle.
The initial view is just of the project settings but those aren’t really all that interesting to us at this time. We are trying to get to some code. To see some code, we have to examine the items that are created for us by the project template.
Those items are listed on the left side under the yellow folder named after our project.
AppDelegate.swift
The first item listed is the AppDelegate.swift file. That file contains all the template code so that our project will build as an iOS app. Most of it is just a bunch of empty functions that we can use later if we need them.
You can click on the file name on the left and Xcode will open the file in the editor on the right so you can view the file.
Once the app starts, it will load a displayable View which is what the user will see. iOS apps follow the MVC (Model-View-Controller) pattern to split the code into manageable pieces for developers.
What Is MVC?
ViewController.swift
The ViewController is the application code that runs and reacts to user interactions such as the user typing text in an text box or the user clicking the button. After the ViewController handles the action, it may also tell the View to redraw itself or take other actions to insure the user interface reflects the actions that are occurring in the app.
The ViewController.swift file is mostly empty but we’ll do some work to add code here later.
Right now, there is just one function in the ViewController named viewDidLoad(). That function is called when the application initially loads the View. That allows us as developers to take actions such as initializing a UIPickerView with values after the View has loaded.
Xcode tries to help developers to create user interfaces using only a drag and drop style (versus forcing devs to write code to create the graphical elements).
The graphic designer (Interface Builder) loads up when we choose the Main.storyboard file which is the representation of the View objects as a graphical user interface. When you select the Main.storyboard on the left Xcode will load the UI (user interface) on the right.
-
View Controller Scene
Notice that middle section (hierarchical view) shows the View Controller Scene highlighed in blue. That indicates the item is currently selected.
If you click the next item down, [View Controller] you have selected that item and your selection will be updated in the graphical display also (on the right).
Next, you can click the [View] item and you will see that the preview on the right will highlight in blue.
This is an attempt to show you that whatever you do to this area pertains to the entire user interface which even includes the top title bar (area where the time and battery status are shown). Notice that there is a [Safe Area] beneath that. That safe area indicates that you can do normal app stuff in there and not affect any title bar messages or notifications that the OS (operating system) may try to send to the user.
If you click the Safe Area, you will see that the UI below that area is highlighted in blue.
Basically, the area that displays the time and battery life is now unhighlighted.
This is the area where we want to drag and drop the controls that we want to add to the View.
Adding a Control to the View
Now we are going to add a control to the View. However, to do that, I just want to make sure you know what the entire Xcode window looks like, because there is a lot there.
I’ve highlighted (red boxes) a couple of items to focus on in the view. First of all, the top button that I highlighted will actually present another window when clicked. That window will contain the list of controls (labels, buttons, textedit boxes, and many others) that we can add to form.
The lower red box is highlighting a submenu made up of a list of icons starting with the folder icon. Currently, that item is showing the details of whatever is chosen in the storyboard. Right now, you can see it is detailing some things that are related to the storyboard. Later, when we add a control and it is selected, it will provide additional details for the individual control when it is selected.
Displaying the List of Available Controls
Go ahead and click the top button I highlighted and when you do, a new dialog box will pop up above the main Xcode window.
When that new dialog box appears, Xcode will give it focus and place an I-bar cursor in the Search entry box (where you see the word Objects).
It does that because there are numerous controls to choose from. In my snapshot above, you can see that I’ve scrolled down a bit to show a few of the more common controls (Label, Button, Text Field, Slider).
Let’s add a simple Label to our view. The Label provides a way to add static text (unchanging text) to the View. Labels normally do not react to events like being tapped either. While buttons and other control objects do.
Go ahead and click and drag a label from the dialog box over to the View. When you click the Label item, it will turn blue for a moment and then as you drag, the dialog box will disappear and you will be dragging the label into the View area.
Finally, you can just let go and the Label will drop onto the storyboard and you will see some sizing handles appear.
--
You can also see that the Label has been added under the View in the hierarchical view over on the left.
Again, I’ve highlighted some items (red boxes). The bottom highlight is simply to draw your attention to the Location element. The Xcode storyboard is using a positioning type of [Relative Group] for this item. That means the Label is simply positioned relative to a group of controls that are added to the form.
I’ve also highlighted the warning icon on the top left. That icon is warning us that something might not be quite right. If we click it, then we will see a warning that we are not using constraint layout and items may drop off the screen to an unviewable area.
To get more details about the label, we need to click that button at the top right (has a slider control on it) that I’ve highlighted. Go ahead and do that now.
Now you can see some details about the Label on the right side. The first one is that it is using Plain Text and the second textbox down shows that the Label will display the text “Label”. That is the place where we can change the text that appears in the Label.
Let’s change it to the word “Keys”.
When you type the new text and press <ENTER>, the change will be applied and you will see that the storyboard is updated with your new Label text.
I’ve highlighted (red boxes) all the places where you’ll see the changes.
iPhone Simulator
This is a ridiculously simple app at this point, but let’s go ahead and build it and run it on the iPhone Simulator. Running our app will give us a chance to get the emulator set up and see it in action.
Xcode provides a way to run a complete emulated iPhone right on your Mac. That way, you don’t have to hook up a iPhone (or even own one) and you can still test your apps on a simulated device that will behave exactly like a real device.
Near the top of our Xcode window, the development environment has suggested an iPhone version to target for the app. Mine was originally iPhone XR. Yours may be something different depending on when you read this book and what versions of the iPhone are released.
That item also serves as a drop list that can be clicked to choose another iPhone or iPad image.
Here’s the extensive list of devices that appear when I click the list. Again, yours may be slightly different.
I’m going to change mine to the iPhone XS simply so we can see what happens when you first choose a Simulator image that has not yet been run. This will be similar to what you will see when you try if this is the first time you’ve built an app and tried to run it on a simulator.
Once I select the image, I will click the Run button (right-pointing triangle) to build the app and start the simulator.
When you press that button, you will see a bit of activity at the top of Xcode as it builds your program. Next, Xcode will start the Simulator and a new window should pop up.
At first, the window is blank and it can take a bit for the OS to load since your Mac is now also running a full iPhone instance while it is also handling its other duties.
At some point, you’ll see the familiar iOS loading screen appear on the device.
And eventually, the iPhone OS (Operating System) will start and run your app.
Yes, it’s quite boring because all the app does is display that one Label that we added. However, if you’ve gotten this far, you’ve really done quite a lot since we have now:
- Created a new iOS Project
- Familiarized yourself with a bit of the Xcode IDE (Integrated Development Environment)
- Viewed some code (
ViewController.swift and AppDelegate.swift). - Seen how to add UI elements to the screen
- Built the project
- Created and run an iPhone Simulator
- Run our basic program
Add Some Functionality
But, before we wrap up this chapter, let’s add a button and make it update our Label with a counter that is activated by a timer. It won’t be pretty, but at least we’ll write some Swift code and get something to happen in our app.
First of all, drop a button on your View and change the text of the button to “Start Timer”.
Now we want to make the button do some work when we click the button.
We also want to update the text that is shown on the label when our timer fires each time. We are going to use our label as the output for the value of our counter. That means each time the timer fires, we will increment a counter variable and then output that value to the label. That way, the user will see the Label change as the counter increments. We will also want to change the text on the Start Timer button while it is running (after it is clicked) so that it will say “Stop Timer” so the user can toggle between the counter running and not running.
We want to add some code in our ViewController.swift file that represents the Label and Button so we can manipulate them with code.
To do that, we add an Outlet for each of the items in the view.
Switch back to the ViewController.Swift file (select it on the far right where all the project files are listed) and we will add the following code:
@IBOutlet var counterLabel : UILabel!
@IBOutlet var counterButton : UIButton!
var isRunning : Bool = false
var counter : Int : = 0
You can see where to add that code in the file in the image below.
The first two lines inside the class (lines 13 & 14) add the IBOutlets that we have been talking about.
The @IBOutlet is named with the prefix IB for Interface Builder. The item isn’t really Swift code but is a special macro that tells the Interface Builder that this variable is to be used as a special item. This is all indicated by that first @ sign. In a moment, we will see the @IBAction and it is the same type of thing.
Next, on line 15, we add a Boolean variable (holds values of true or false) that we will use to determine if the counter is running or not. Since it is not running when the app starts, we initialize the value to false.
Finally on line 16, you can see we’ve added a counter variable that will hold the value of our counter which will be incremented each time a timer fires. We initialize the counter’s value to zero.
Swift Syntax
Now that we’ve seen a few Swift variables declared and initialized, let’s talk about the specifics of declaring a Swift variable.
Declaring Variables
We declare variables so that the Swift compiler will know the names and types (data types like, characters, integers, etc.) of the things we will be using in our program.
The Swift compiler needs to know their names so it can store your values in memory and then provide you with an easy way to read and write to that same memory (using the variable name instead of a cryptic memory address).
In Swift, you can declare a variable and tell the compiler explicitly what type you want to store in it. That’s what we’ve done when we’ve declared our variables.
For example, we can declare a variable named isRunning and tell the compiler it will be a Boolean:
var isRunning : Bool
However, we have not initialized the Boolean to a value. Instead, we’ve just told the Swift compiler that we only want to store Boolean values in that variable. After that, Swift will not allow you to store any other type of data in that variable. This is good because the compiler will be able to warn us when we accidentally try storing a number or character value in there by mistake.
Swift Can Determine the Type
Swift is also very good at determining the type you want to store in a variable and will do so if you don’t explicitly tell it the type. Here’s how you can do that.
var isRunning = true
Now the swift compiler will determine the type that the value is (in this case, it will evaluate it as a Boolean) and then it will also initialize the variable to the value. In this example, we have declared and initialized the variable without explicitly telling the compiler the type.
Generic Syntax For Creating Swift Variables
Whenever you create a variable, you:
- start with the keyword
var - follow the keyword with the name of the variable
- either initialize the variable to a value with = <value>
- or follow the variable name with a colon (
:) and the name of the type - or you can explicitly tell the compiler the type and then initialize the value.
So the generic syntax will look something like the following:
var [variableName] <: typeName> <= initialValue>
This indicates that you must use the var keyword.
The square brackets [ ] indicate that you must provide a unique variable name.
The angle brackets <> indicate that you may include the type name or the initial value or both type name and initial value. However, you must include one or the other (type name or initial value).
However, you cannot declare a variable with just the keyword and the variable name like the following:
var myThing
In that case, the compiler which always wants to know the type of variable cannot determine what type it may store in the variable because you have not provided it explicitly using a <typeName> or implicitly by providing an initialization value.
Variable names can contain most any character except whitespace characters like spaces and tabs but they cannot start with symbols or numbers. The following variable declarations will give you an odd compiler error and your program will not build. Notice that the second one starts with the @ symbol and that is why the @IBOutlet is a special thing that is defined by the Interface Builder and it is not a normal Swift variable or type.
var #garbage
var @trash
Let’s take a look at the variables we declared as @IBOutlets. Ignoring the @IBOutlet macro they look like the following:
var counterLabel : UILabel!
We have declared a variable named counterLabel as a type that is a UILabel. The exclamation point is not a part of the variable type but indicates that it the variable is an Optional. That means the variable can have a non-value known as nil in Swift (often referred to as null in other languages). Nil is a special value that objects can have and we’ll talk more about it as we go.
The UILabel type is a built-in type that the Apple Developers have created for us and put in a library named UIKit which is imported at the top of our ViewController.swift file. If you were to remove that import statement from the top of the file, your program will not build because it will not know how the UILabel or UIButton types are defined.
Now, let’s continue setting up the @IBOutlet using the Interface Builder.
Click the ViewController in the hierarchical view on the left. We need to hold down the Command key (or CTRL key if you are using a Windows keyboard like I am) and then drag down to the Keys Label on the storyboard. While you are still dragging and you float over the Keys Label, it will look like the following:
When the Label is highlighted like that you need to let go of the Command (or CTRL) key and then another small menu will appear.
This is the Outlets menu. We want to connect the IBOutlet we created in code to our control on the storyboard so we choose (click) the one named counterLabel. It only offers that one as a choice (along with the main view) because the Interface Builder knows valid types that can be selected for the label and it knows our counterLabel is a UILabel.
Now, let’s do the same thing for our Start Timer button. This time, the storyboard will know that we are probably wanting to connect it to the counterButton.
If that all went as expected, there is a way to check to ensure things were properly set up.
Under the View Controller => View area in the hierarchical list, you should see the two new items (Counter Label and Counter Button) now (see red highlights in next image).
You can also click the [circle right-arrow] on the right side and it will change to show you the Outlets that are set up.
Now we need to set up our button so it does something when the user clicks it. When the user clicks the button, it can take an action. However, we need to add an action (IBAction) that the button will run when it is clicked. An IBAction is basically a special function that the button will call when it is clicked. Let’s go back to the ViewController.swift file and add that IBAction now.
We really just need to add a normal function to our ViewController. However, to make the Interface Builder know we want to allow it to wire up the function to the button we set a special decorator on the function (@IBOutlet). The function also must take a reference to the button that is clicked as a parameter. You will see it is named sender in the function call below.
Here is the normal Swift function that will toggle the button.
func counterButtonClicked(_ sender: UIButton){
if isRunning{
counterButton.setTitle("Start Counter", for:UIControl.State.normal)
isRunning = false
}
else {
counterButton.setTitle("Stop Counter", for:UIControl.State.normal)
isRunning = true }
}
To turn that function into an IBAction, we add the @IBAction decorator before the func keyword in the function definition as you can see in the following listing of all the code we’ve added so far. If we do not add that decorator, then the Interface Builder won’t display the method when we try to connect the button on the storyboard.
Interface Builder is also aware that an action associated with a UIButton must accept a parameter that represents the clicked button as part of the function’s parameter list so you can see that we pass a parameter also. Even if we defined the function as an @IBAction but we forgot to add the parameter, then the Interface Builder would not consider this function to be one it is looking for when we attempt to connect it to our user interface.
Now that we’ve added the @IBAction function, we want to switch back over to the storyboard view so we can connect the button click to this outlet.
Connecting @IBAction Is Backwards
Switch back to that view and this time, you have to click the Button first and then drag to the ViewController in the hierarchical view and then let go of the Command (or CTRL) key. When you do, you will be presented with a list of items you can select. Of course, we want to click the counterButtonClicked: item to connect it up. The dialog will disappear and the action is set up.
If you’ve done all of that, we can test by running it now. So go ahead and run the app on your simulator and click the Start Timer button. When you do, it should toggle back and forth between the two text settings (Start Timer, Stop Timer).
If you’ve got that running, let’s add the additional code to get our timer running and then we’ll wrap this chapter up.
Here’s a snapshot of the complete ViewController.swift file so you have all the code in one place in case you can’t get it working for some reason.
Code Explanation
I will start explaining the code from line 30 since that is where the button click is handled.
This is the function we added as an @IBAction.
When the user clicks the button, the program checks the value of isRunning (on line 31) to determine if it is true or false.
If isRunning is true, the first block of code (indicated by an opening { and closing }) will run. Of course, the first time the code runs and the view loads up isRunning is set false so the first time counterButtonClicked is called, the code will enter the else block.
The first thing we do is set the title of the button (the text that is displayed on the button) to “Stop Counter” since we are going to start the counter. After that, we keep the isRunning variable initialized properly by setting it to true to indicate that the timer is running.
Finally, we start the special Timer object which is provided by a pre-created programming library, similar to the UIKit library.
In this case, we send in a few values which include the timeInterval that the timer should fire. In our app, we’ve set it to .25 seconds so the timer will fire about 4 times each second. Next, we set the target of the timer to the current View. That ensures that this view will receive a message when the timer fires at each interval.
The next thing we do is provide a function that will be called (selector) that is available to the scheduledTimer. We’ve named that method updateLabel. That means that each time the timer fires, the updateLabel function will be called.
We don’t have any additional data to send into selector method so we set userInfo to nil (nothing).
Finally, we set the repeats Boolean variable to true to indicate that the scheduledTimer should keep repeating every 0.25 seconds. If you set this to false, then the updateLabel would only be called once.
When the user clicks the button the first time, the button’s text will be changed to “Stop Timer” and the timer will be started. Each time the timer fires, the updateLabel will be called.
When the updateLabel is called, it will increment the counter value:
counter += 1
That is shorthand for counter = counter + 1.
Next, we set the counterLabel.text equal to the String value of the counter (which is an integer).
A String is a representation of one or more characters and since the text property of the counterLabel expects a String we have to cast (convert) the value of the integer variable (counter) to a String so the label can use the value to display it in the label.
Of course, the next time the user clicks the button, the top part of the if block will run and will:
- set the button’s title text back to "Start Counter"
- set the value of
isRunning back to false - stop the
timer with the call to timer.invalidate()
Finally, here is the programming running:
This is a good start and gets us set up to start writing our next app in Chapter 2.
We will begin working on a simple app that allows us to take notes and save them for later.
That app will help us to learn how to accommodate a growing list of items on the view and how to save data to a device.
History
- 9th December, 2018: First publication
Submit an article or tip
