Programming with Swift 4.2: Building iOS Apps with Swift, #1

Preface

This is my 51st title, but to me, it is a very special book.

I wanted to write the book that - had it existed - I would have bought myself, many years ago.

In 2010, when I set myself to learning iOS app development, I quickly got stuck. Regardless how often I tried, I found it all difficult and complicated. I finally got frustrated and gave up on it. But that iOS stuff was intriguing, so every year, usually around the time of the World Wide Developers Conference, I would try again. After all, I had been programming for almost 30 years - how difficult could it be?

All in all, I needed three years before it finally made sense. Something was missing, obviously.

Then, I finally had discovered the only approach that worked - a highly efficient approach to learn how to make iOS apps. I realized that I had wasted a lot of time - had I only known that approach three years earlier!

Things happened quickly from then on. In 2013, I published my first app. In 2014, I founded the iOS Academy (a Dutch website) where I use my approach to train people just like you, in a very short time, how to build apps.

And now there is this book.

To write this book, I have locked myself up for weeks, together with my trusty old MacBook, lots (I mean lots) of coffee and my let’s write a book music playlist.

You know, it only takes about one hour to write the first chapter of a new book. Writing Chapter Two costs a day or so, and then the misery begins… I’m so happy I made it through all those blank screens!

The Dutch version of this book was published in 2014. In 2016 my partner, Carola, advised that I write an English version. I liked the idea, so I started immediately. Then, I postponed, started again, etc… I needed another three years, much longer than I expected, to finish it, Again, three years. There must be a message there somewhere.

But here we are! Now it‘s your turn.

Finally, here is the paragraph that few people will read, except of course those who are in it. Thank you Carola, Andrea, Daan, Vivienne, Fiete, Erik, Jeroen, Bob, Sid, Joe D., Paul H., and Lee Ritenour, whose music has accompanied me since I wrote my very first book, way back in 1985!

January 2019,

Roelf Sluman

Introduction

You have purchased this book with a clear goal in mind: you want to learn how to build your own iOS apps, using the Swift programming language. This book will teach you how to do this. Even better: if you have worked your way through the book, you can write your own apps. Promise! Since 2014, the Dutch version of this book has helped many, many readers getting their apps in the App Store and I will help you achieve that same level of success. The only things I need from you are time, dedication and a healthy amount of optimism. Even if you have never programmed before: you can learn how to make your own apps and this book will teach you how to do it.

There are a few things you can do to get the most out of this book.

First, work through this book, in the exact order as I have written it. Resist the temptation to skip chapters, or even several pages, even if you have programmed before. I have written everything in the following chapters with only one goal in mind: to teach you how Swift works and to get you up and running in the shortest amount of time. The order in which subjects appear is intentional: you will learn things when you need to learn them.

Try out all examples! This book has do this written all over it. You won’t achieve your goal by just reading about programming, you need to invest time in doing it, too. Make sure you have installed the latest version of Xcode and try out every example, regardless how basic it is. Don’t copy and paste the examples, but type them in!

Take your time! Although many readers of this book have got their first app in the App Store in a short time (a few weeks), this should not be a goal you need to reach as soon as possible. Or, as Confucius wrote once: The journey is more important than the destination. Mind you, you will arrive at your destination. But if you take the time to work through this book, you will arrive at a level you wouldn’t have believed possible!

Don’t download the examples, but type all program code yourself. Although you can download all examples from

www.appbuildersacademy.com/book-downloads/programming-with-swift-42/apps-and-playgrounds.zip

, you will only learn how to code by coding yourself, as often as possible. Even the mistakes you will make while typing in example code will help you become a better app developer.

Those are the ‘rules of the house’. Let’s get started!

1 Getting to know Xcode

To build apps for iPhone, iPad, Mac and other Apple platforms, you will use Xcode. You can download Xcode from the Mac App Store - you will find the app in the Developer Tools category. In this book, we’ll assume you have installed the most recent version of Xcode.

Xcode is a very extensive programming environment. And although its developers have gone through great lengths to make Xcode user-friendly and intuitive, you will probably need some time to get to know the various parts of the Xcode user interface. The most fun way to do that is by building your first app! And that is exactly what we will do in this chapter.

The first thing you see after Xcode has launched, is the Welcome window (Figure 1-1).

Figure 1-1. The Xcode Welcome window

Once you have built your first few apps, the right-most part (where the text No Recent Projects is being displayed) will contain a summary of the apps you have most recently worked on.

In the left part of the window, you see three options. Since we will build our first app in this chapter, select the second option: Create a new Xcode project. Every app you will create, starts its life as a Xcode project. A project is nothing else than a collection of files; as you will see later, each of those files has a specific job to do.

As you see in Figure 1-2, Xcode displays a panel. The categories in the top bar are iOS, watchOS, tvOS, macOS and Cross-platform. As you can see from these categories, you can use Xcode to build apps not only for iOS, but for other platforms too.

Figure 1-2. Developing in Xcode starts with selecting a template

Since we want to build an iOS app, we select the first option, as shown in Figure 1-2: iOS.

The main part of the panel has two sections: Application and Framework & Library. In this book, we will focus on the first section, Application This section contains several templates, for the most frequently created types of apps. We will get back to this in a later chapter, but for now, select the first template, Single View App (see Figure 1-2). This is probably the most frequently used template, and it contains all files needed for the app we will build in this chapter.

It is time for the next step: click Next to display the project options panel, shown in Figure 1-3.

Figure 1-3. The project options panel

In this panel, we’ll select a few important options for our first app:

Product Name: The name for our first app. Type First App.

Team: Have you already used Xcode and entered your Apple ID? In that case, you can select your own ‘team’ here. Don’t worry if you haven’t entered your Apple ID yet: you can leave this field blank for the app we will build in this chapter.

Organization Name: Do you own a company, or do you work for one? In that case, type its name. You can also leave this field blank.

Organization Identifier: If you have your own domain name, type it here, but type it in reverse order: the extension, followed by the domain name, etc. No domain name? Then type something else, for instance com.your-last-name. You should not leave this field blank: Xcode will use the contents of both the Product Name and the Organization Identifier fields to create a unique identification code for your app: the Bundle Identifier.

Make sure to select Swift as the (programming) language to use. Leave the remaining fields as they are; your project options panel should now look like the one in Figure 1-4.

Figure 1-4. Compare your settings with the ones in this illustration.



Click Next. Xcode will ask you (Figure 1-5) where to store the files for your first app. Although you can select any place you like, I’d recommend you create a special folder in your home directory for all your apps.

Figure 1-5. Select a folder to store your project

At the bottom of the window shown in Figure 1-5, you’ll see an Source Control  option. By selecting this option, you can activate _Source Control_ to make ‘snapshots’ of a project in development, allowing you to ‘rewind’ to previous versions.

If you have worked with the Source Control system Git before, feel free to check the Source Control box. You don’t need Source Control to work with the examples in this book, however. In this example, we won’t be using Source Control.

You’ve just built your first app! After you have clicked on Create, Xcode will create several files (based on the template we have selected earlier) and save those files in a project folder. Once done, Xcode will display its regular editing screen, as shown in Figure 1-6. Don’t get alarmed by the overwhelming number of options on this screen - it will all make sense soon.

Figure 1-6. The Xcode editing screen

1.1 Xcode’s main screen

Xcode might seem very complicated, but things will make sense once you realize the Xcode window has five parts.

At the top you see the toolbar.

In the middle, you see (from left to right):

The Navigator pane

The Editor

The Utilities pane

At the bottom of the screen, at times you will see the debug area.

1.1.1 The toolbar

The toolbar, displayed in the upper part of the Xcode screen, has several elements.

On the left, you see the buttons to start and stop the app you are working on (Figure 1-7).

Figure 1-7. Use these buttons to start and stop your app

The next part of the toolbar displays the name of the target Xcode will build: in our case, that name is First App. Next to the name, you’ll see the device you will use to test your app. There are many simulated devices for you to choose from; as you can see in Figure 1-8, we have set the device to a (simulated) iPhone XR.

Figure 1-8. The target: our app will run on a (simulated) iPhone XR

Xcode includes a Simulator you will use to test apps on your Mac, so you don’t need a real iPhone or iPad. The Xcode symbol next to ‘iPhone XR’ in Figure 1-8 shows that this is a Simulator version of the iPhone XR. However, you can also install the app on your own iPhone or iPad for testing.

Any iPhone or iPad you have connected to your Mac will also appear in this target list. Figure 1-9 shows an example. Note the icon, showing that this is a real iPhone as opposed to the Simulator version. Unlock your phone to allow Xcode to install apps on it.

Figure 1-9. A new target for our app: a real iPhone 6S

Although everyone can use Xcode to develop apps, it takes an additional step to place your apps in the App Store. To do so, join Apple’s iOS Developer Program. By paying the yearly $99 contribution fee, you can submit your apps for review by Apple. Once approved, Your apps will appear in the App Store.

The panel at the center of the toolbar shows information about our app’s status (Figure 1-10). You can use this panel to check if your app is running and to see if Xcode has encountered any errors.

Figure 1-10. Use this panel to check your app's status

1.1.2 The Navigator pane

The Navigator pane (Figure 1-11), displayed on the left side of the screen, is pretty versatile. Initially, it will assist you when navigating through the files that are part of your app. Later, when you add program code to your app, you will use the Navigator to quickly look for errors and to search for specific parts of your app.

Figure 1-11. The Navigator pane

As you see in Figure 1-11, the Navigator has its own toolbar, allowing you to quickly select one of the navigation options. Each of the toolbar options has its own keyboard shortcut, from ⌘1 to ⌘9. In this chapter we will only use the first option, which displays a list of all files that are part of our app.

Do you need more screen space? In that case, you can hide the Navigator by using the group of pane buttons on the right of the main toolbar (Figure 1-12).

Figure 1-12. Use these buttons to hide or display the most important Xcode panes

Click on the first of these buttons, or press ⌘0 (zero) to hide or show the Navigator.

1.1.3 The Editors

To change your app, you will use one of the Editors available in Xcode. Which of the Editors you use depends on what you are trying to change. For instance, you will use the Interface Builder Editor to add or change buttons, labels or other visual elements. To edit program code, you will use the Program Editor. You will change your app’s settings using the Settings Editor (the Editor displayed in Figure 1-13). You need not worry about all these different Editors, since Xcode will switch to the appropriate one automatically.

Figure 1-13. The Xcode main Editor, displaying our project settings

Xcode has three editor modes. In almost all cases, you will use the Standard editor mode. The second editor mode, the Assistant editor mode, is useful when you want to link buttons, labels and other visual parts of your app to your program code. You can use the third mode, the Version editor mode, when your app is under version control, to compare different versions of your program code.

In this chapter, we will use the Standard editor mode. In later chapters, you will also use the Assistant editor mode. To select another editor mode, use the editor mode buttons on the main Toolbar (Figure 1-14).

Figure 1-14. The three Xcode editor modes: Standard editor, Assistant editor and Version editor

1.1.4 The Utilities

On the right side of the screen, next to the Editor, you’ll find the Utilities Pane (Figure 1-15). The Utilities pane is context-sensitive; its contents depend on what you have selected in either the Navigator or the Editor. You’ll see examples of this later.

Figure 1-15. The Utilities pane

If you need more screen space, you can hide the Utilities pane by clicking on the rightmost of the pane buttons, up in the main toolbar (as shown earlier, in Figure 1-12). If you prefer to use the keyboard, the shortcut to hide and display the Utilities pane is ⌥⌘0 (zero).

1.1.5 The debug area

At times, you’ll see the debug area below the Editor (Figure 1-16). Once you have written program code, you will use this pane to search for errors and bugs (hence the term debug).

Figure 1-16. The debug area

The debug area can show you the inner workings of your app in real-time. Maybe you have already heard about debugging and how frustrating it can be at times. Although debugging will probably never be your favorite activity, the debug area is a very powerful tool and it can be a true help in finding bugs quickly!

To hide (or show) the debug area, click on the middle of the three pane buttons, up in the Main toolbar (as shown earlier, in Figure 1-12). If you prefer to use the keyboard, the shortcut to either show or hide the debug area is ⇧⌘y. It’s actually easy to remember the letter y as a shortcut for the debug area. Just press the shortcut every time you are wondering: why isn’t my app working?

1.1.6 The Library

The Toolbar has one more button as shown in Figure 1-17. This button provides access to the Library. Its keyboard shortcut is ⇧⌘l

Figure 1-17. The Library button on the toolbar

The Library (see Figure 1-18) contains things you can add to your app: snippets with program code, screen objects such as buttons and labels. Later in this chapter we will use this Library to add several screen objects to our app.

Figure 1-18. The Snippets library

1.2 Let’s start our first app!

After this introduction of Xcode’s application screen, it is time to start our first app. That’s right: Xcode has already created a complete, ready-to-run app, based on the template we have selected. And although our app doesn’t do much yet, we can already run it and then, after we’ve seen our app in action, stop it again.

Make sure you have selected the iPhone XR Simulator as target (see Figure 1-19).

Figure 1-19. The target for our app: a simulated iPhone XR

In Xcode’s main toolbar, click on the Play button. Alternatively, you can select Product → Run or press ⌘R.

Now, several things will happen:

Step 1

Xcode will build an executable version of our app (see Figure 1-20).

Figure 1-20. The status panel shows the progress while Xcode is building your app

Step 2

Xcode adds our app to the Simulator. The Simulator, included with Xcode, is an application that simulates an iPhone or iPad, without the need for a real device.

Step 3

The Simulator is launched. If this is the first time you are using Xcode and its Simulator, it will ask you for permission to change a few macOS settings (Figure 1-21). Similar to installing a Mac application you have downloaded from the internet, you will need an admin account to give this permission.

Figure 1-21. Xcode needs to install a helper application

Step 4

The Simulator runs our new app (Figure 1-22).

Figure 1-22. Our first app is running on a (simulated) iPhone XR

If the Simulator’s window is too large to fit on your screen, change the Simulator’s screen size. Select (in the Simulator app) Window → Scale to do so.

As you can see in Figure 1-22, the Simulator only displays a white screen at the moment. However, Xcode has built our app. To verify that this is the case, swipe up using your mouse (in the Simulator app), select Hardware → Home, or press the shortcut ⇧⌘ H (Figure 1-23).

Figure 1-23. Our first app icon, displayed on the (second) Home screen

As you see, our new App has its own icon on the Simulator’s Home screen: a white wire-frame with the title First App.

1.2.1 The Simulator

The Simulator is a very useful macOS application. It allows you to test your own iOS apps, without the need to install them on a real iPhone or iPad. Although the Simulator is a Mac application, it behaves like a real iPhone or iPad. Using your mouse, you can mimic all gestures you use on your iPhone or iPad. Additionally, menu options and shortcuts are available for actions such as Home, Lock and Shake.

Pointing and clicking with your mouse in the Simulator has the same effect as tapping something with your finger on a real device. You can try this out by clicking on the First App icon.

To simulate the Home action, use the shortcut ⇧⌘H.

To swipe, drag your mouse pointer (move it while keeping your left mouse button pressed). You can pinch in and pinch out as well: move your mouse while keeping ⌥ pressed. Two gray circles show how much you are pinching (Figure 1-24).

Figure 1-24. Keep the ⌥ key pressed while moving your mouse to simulate a pinch gesture

To simulate turning your iPhone or iPad, use two options from the Hardware menu: Rotate Left and Rotate Right. You can also use the shortcuts ⌘← and ⌘→, respectively.

Simulating a different device

In the previous figures, we have used the Simulator to simulate an iPhone XR. You can simulate other devices too. Typically, you will do this using Xcode’s Target panel, shown in Figure 1-25.

Figure 1-25. Use this panel to select another simulator or device that should run your app

By clicking on the device name, you’ll get a menu with more devices to choose from (Figure 1-26).

Figure 1-26. The devices (both real and simulated) we can use to install and test our app

As an example, select the iPhone XS. Now stop your app (by clicking the Stop button on the main toolbar) and start it again. Xcode will build another version, the Simulator can use to simulate an iPhone XS. After a few moments, you’ll see the result (Figure 1-27): the title bar in the Simulator application displays iPhone XS, showing that our app is now being simulated on a different device.

Figure 1-27. A simulated iPhone XS

In the Simulator, press ⇧⌘H to switch to the Home screen. Put the new iPhone XS window next to the iPhone XR window to see both simulated iPhones - a very powerful feature of the Xcode Simulator is to simulate several devices at the same time (Figure 1-28).

Figure 1-28. You can simulate several devices at the same time

1.2.2 Stopping the app

To stop the app, go back to Xcode and either press the Stop button or use the shortcut ⌘. (Command Dot). Not only will this tell the Simulator to stop the app, you will also return to the Xcode editor, where you continue working on your app.

And that is exactly what we will do in the next step. Although our app seems to work, all we see is an empty white screen. In the next step you will learn how to change that screen using Xcode.

1.3 We change our app

By now, we have learned how to build an app and how to use the Simulator to run it. For our app we have used one of the templates that Xcode provides: Single View App. As the template’s name shows, our app has one ‘view’. We’ll get back to views shortly.

Let’s change our apps’ appearance. We’ll set its color to yellow and we’ll place some red text on the screen.

1.3.1 Views

One term you will encounter more and more often is view. Every app contains one or more views. A view is a rectangular area of the screen that can display information. Remember our first app’s white screen? That is the app’s main view: it occupies the whole screen, and it has a white background color.

As said, everything you see on the screen of your iOS device is nothing other than a series of views. Controls (such as buttons, sliders and pickers) are also views, themselves containing one or more so-called subviews. While a view can have one or more subviews, a view itself has only one superview: its ‘parent view’, the view it descents from.

Figure 1-29 shows a (somewhat simplified) example, in the form of an iPhone app with one button.

Figure 1-29. A simple iPhone app, containing one button

The button in Figure 1-29 is a subview of our app’s main view, the view with the white background color that occupies the screen of the iOS device. The text displayed on the button is a subview of the button. So there are three views in total:

The text Button! is a subview of the button. This makes the button the text’s superview. The button is a subview of our app’s main view: therefore, the app’s main view is the button’s superview. Figure 1-30 illustrates this.

Figure 1-30. Views and subviews

Figure 1-31 shows another example: an app with two buttons, Button 1 and Button 2.

Figure 1-31. An app with two buttons.

In this example, our main view has two subviews: two buttons. The buttons each have one subview, containing the button text. Figure 1-32 shows a schematic version of the so-called view hierarchy .

Figure