Building Your First iOS App

Building Your First iOS App

Written By: Mark Lassoff and Andrew Snyder-Spak

iOS application development can be challenging, but also quite lucrative for developers. The languages of iOS development, Objective C and Swift, are object-oriented languages and often difficult for new programmers. The rewards of iOS development, however, can be great. The iOS App Store from Apple is the biggest app store, and, perhaps more importantly, the most lucrative for developers.

In this tutorial we’ll create a simple iOS application. Despite the simplicity of the app, you’ll understand the app development process and be better prepared for further learning about the iOS app development process.

Obtaining the Tools

First the bad news (at least for many of you): You absolutely, positively need a Mac to create iOS applications. By design, the tools to create iOS applications are not available for any platform but the Mac platform.

First, I’d recommend making sure you have a current version of the Mac operating system. Xcode, which is the development environment for iOS apps, runs best with the most current installation of OSX. To verify what version you are running click the Apple Menu on your Mac and About This Mac.

About This Mac

Figure 1: The “About This Mac” Feature indicating that Version 10.11.2 of the Mac operating system is running.

If version 10.11.2 or later is indicated you should be just fine to work with Xcode and this tutorial.

Next, you need to obtain the Xcode development environment from the App Store. Note that this installation can take a while, especially if you have slower internet access. You might want to make a cup of coffee or have a sandwich while the installation process takes place. From the Apple Menu choose “App Store.” When the App Store opens use the search box in the upper right hand corner of the app store to search for “Xcode”.

The Xcode Development environment

Figure 2: The Xcode Development environment should be the first result from your search.

Click on Xcode and install the software. It’s a monster piece of software and will take up a considerable amount of storage space on your hard drive.

Xcode Version

Figure 3: Version 7.2 is the most current version of Xcode as of this writing. You can also use Xcode to create apps for Apple TV and Apple Watch.

Now that you have the tools installed we’re finally ready to create our first application.

Setting up Your App

Start Xcode by clicking on the icon. Upon booting, Xcode provides you with several options. We’re going to choose the option labeled “Create a new Xcode project.” In general a project translates to a single app created in the Xcode environment.

Welcome to Xcode!

Figure 4: Welcome to Xcode! (Note that your environment will look a bit different, as you likely haven’t created previous Xcode projects)

On the next screen that appears, we’ll configure our application. At this point we have to declare exactly what type of application we’re going to create. Take a moment a read through the different options and you’ll get a sense of all the different types of applications you can create in the Xcode environment.

Insure that from the left side of the menu that “Application” is selected under iOS. The right side of the window shows a number of templates (starting points) for different types of iOS apps that are available under Xcode. Choose “Single View Application” if it’s not already selected.

With the previously mentioned selections made, you can click the next button in the bottom-right hand corner of the dialog box.

template dialog box

Figure 5: The template dialog box with correct settings selected for this tutorial.

The next dialog box that appears will allow us to name our app and provide some additional information. Much of this information is more relevant to actually publishing our application in the app store, however, we still need to fill it in even if we never intend on publishing our application.

In the Product Name Field type Dog Years Calculator, which is the name of our application. For the organization name field you can type your name or your company name. For the organization identifier typically a reverse URL is used. Since our URL is Learntoprogam.tv, tv.learntoprogram is used for this section. This identifier uniquely identifies you as a publisher in the app store. A bundle identifier will be created automatically. This is also used for internal identification in the app store.

For the language drop down choose “Swift” as we’ll be using the Swift programming language to create our App. Finally, we’re going to target the iPhone for this particular App so make the appropriate choice from the final drop-down menu.

Click Next once you have everything correctly configured in this dialog box.

project options dialog

Figure 6: The project options dialog with fields correctly filled for this tutorial.

The next dialog box will allow you to choose where you’d like to save your app on your Mac. It’s not necessary to create a folder here as one will be created automatically for your app. For convenience, I saved my app on my desktop, although you can save yours in any location you prefer.

Once you save your app, the app configuration page will appear. This page allows you to configure almost all important aspects of your app. If you focus on the left side of the interface you should see the folder/file hierarchy that comprises your app. That’s where we’re going to start.

App configuration page

Figure 7: The App configuration page

Creating the App User Interface

In the file manager on the left side of the screen you’ll notice several folders and files. We’re going to be working in the Main.storyboard file first. Go ahead and click it once and the storyboard will appear. The storyboard is a visual representation of your app layout. Since we haven’t added any controls to the app, it appears mostly blank.

In the lower-right hand corner of the screen you’ll notice the toolbox. If you scroll through the tool box you see a couple dozen components you can add to your app. In the toolbox find the Label and Button controls.

The Storyboard with Label and Button components

Figure 8: The Storyboard with Label and Button components visible in the toolbox.

Drag a label component from the toolbox on to the surface of the storyboard. Guidelines will appear to help you position the label towards the top left of the app. Once you have it positioned, double-click the label and type “Dog Years Calculator.” You’ll probably need to position the label again because typing the label changed the width of the component. When you’re done the storyboard should look something like this:

storyboard

Leaving the label selected on the right side of the screen find your properties panel. It lists a number of properties that are relevant to the label control. Find the Font property in the panel and click the “T” icon on the right side of the Font selector. A sub-menu should appear.

In the submenu, increase the font size to 24. After doing so, you’ll notice that your label is no longer big enough to accommodate the text. (The label doesn’t dynamically change size when you increase the font size.) Drag the sizing handles away from the center of the label control to accommodate all the text. You’ll again have to position your text in the interface.

increase the font size

Find the Text Field control in the toolbox. Drag two Text Field controls on to the interface so that your interface now appears like this:

Text Field controls

These text fields can be used to allow users to enter data in to our application. They also can be used to display a result. Select the top Text Field so the associated properties are displayed in the property panel in the upper right of Xcode.

In the “Placeholder text” field type the text “Age in Dog Years” to prompt the user.

Placeholder text

Your interface now should appear like this in the storyboard:

Age in Dog Years in text field as placholder

Select the second Text Field control. In the properties scroll down until you see the option “User Interaction Enabled.” Remove the check mark next to this option so users can’t interact with the second Text Field. We’re simply going to use it to display the result of our dog years calculation.

To complete the interface, we’ll need to add a button. The button will actually instruct the app to calculate the age in dog years based on what the user enters in to the first Text Field control.

Drag a button out of the toolbox and double click it. Enter the text “Calculate” on the button. You’re probably thinking “Hey, that doesn’t look much like a button.”

And you’re correct. When Apple’s flat user interface guidelines came along a couple of years back, buttons were flattened. You’re free to create your own buttons in a program like Photoshop and use those instead. For convenience in this tutorial, we’re going to use the default boring, flat, Apple buttons.

The completed interface should appear like this:

Completed Interface

Adding Constraints

We now have a bit more user interface work to complete. We have to constrain our user interface elements so they don’t reposition themselves on different sized devices. For each control we’ll have to set separate constraints. Start by clicking the Dog Years Calculator label control.

You’ll notice the pin control at the bottom of the Storyboard. It’s third from the left in this set of controls:

pin controls

They appear tiny in the Storyboard interface so you may have to squint if you’re old—like me.

When you select the pin control the following pop-up menu appears:

Completed Interface

We’re going to constrain our label to the sides of the interface. Click the top and left red cross bar. (The actual numbers that appear in this menu may differ from what you see in the screen shots—Don’t worry about it. This is normal.) This will constrain the label to these sides of the application and keep our label in the top left regardless of screen size. When you’ve selected them the menu should appear like this:

Add 2 Constraints

Notice the “Add 2 Constraints” button at the bottom of the interface is now live. Click it to add the constraints. After you’ve done so, your user interface should appear like this:

Add 2 Constraints button

Now repeat the process for the two Text Fields and the button. Use the same constraints that we used for the text label. When you’re complete your user interface should have all of the constraints visible. Select all of the UI controls by holding the command key and clicking them. All of your constraints should be represented as in the screenshot below:

Layout with constraints

Wiring Up Our Interface

If there is one thing that confuses new iOS developer it’s the following fact: The Storyboard User Interface and code are not aware of each other until we make them aware of each other. Essentially everything we just did has no effect on the code. In order to write code for these controls we’ve got to make them in to outlets or actions.

The easiest way I have found to do this is with the Assistant Editor. From the drop down menus at the top of the screen choose View > Assistant Editor > Show Assistant Editor. The Assistant Editor will open showing your Swift view controller file. The screen may also be a bit crowded at this point, so we’re going to close the side panels.

From the Navigator View Panel control at the top right of Xcode close the right and left panel so the indicators appear like this:

Navigator View Panel control

With the left and right panels closed your Xcode screen should now appear something like this:

Xcode screen

You can adjust the centerline that separates the two editors if you wish to expose more of the Storyboard or more of the code.

Now let’s create the outlets. While holding the control key on your keyboard drag from the top text view to just below the line in the code that begins “class ViewController:”. A pop-up box will appear allowing us to define an outlet or an action.

In this box insure that the Connection dropdown is set to outlet. In the Name field type “txtAge” and leave the rest of the defaults alone.

In the Name field type txtAge

Click Connect and the following line of code will appear in the Assistant Editor:

This line of code essentially defines the Text Field in the code and gives it the name txtAge.

We’re going to add one more outlet. While holding the control key drag from the second Text View control to just below the line of code that was added by our previous action. Make sure the Connection dropdown is set to Outlet and use the name txtResult. This will result in the following line of code:

Outlets are basically connections through which our Swift code can manipulate the user interface. Since the code requires us to obtain a value from the first Text View and display a value in the second Text View, we have to make outlets. The button, however, causes something to happen in our app, so instead of making it an outlet, we’ll define it as an action.

Not to blow your mind entirely, but some user interface elements can be both outlets and actions. We’ll spare you the demonstration for this tutorial!

Again, while holding the control key, drag from the button to just above the last curley bracket in the code. Use the screen shot below as a guide for filling out the popup that appears to define your action.

define your action

The following code will be inserted in to the Assistant Editor:

We’ve essentially written the signature of the function that will execute each time the button is pressed. Now all we have to do is write the additional Swift code. You may be surprised that writing the code is one of the quickest and easiest parts of the project.

Adding the Swift Code

All the code that we need to write will be inside the calculate() function that was just created in our ViewController.swift file. This calculate() function will be called every time the user presses the calculate button in our app. The purpose of this function is to get the age that the user typed into the top text field, multiply it by 7, and then print the result into the bottom text field in a String that looks like “Your age in dog years is: XX”, with XX replaced with the age in dog years.

To get started we will need to create a variable to hold the value of the age that the user has typed. We will do this with the line of code you see below.

This will create an Int variable called userage, and the sets it to whatever value the user has typed into the txtAge text field using the built-in Int() function. The question mark (?) after the Int makes this an optional variable. Having an optional variable is necessary because it will keep our app from crashing if the user types something other than a number into the txtAge text field (or leaves it blank) and then presses the calculate button. It should be noted that this way of getting an integer value from a text field is new in Swift 2. In Swift 1 you would of needed to use the .toInt() method as opposed to the Int() method.

Now that we have our users age stored in an Int variable, the next step is to calculate the users age in dog years and then create and print our final message into the txtResult text field. The rest of our code will be contained inside the if statement you see below.

The purpose of containing our code in this if statement is, once again, to avoid our program crashing if the user types in an improper value in the txtAge text field. Once the code enters the if statement we know that userage contains a proper integer value, so we can go ahead and calculate the users age in dog years (if you didn’t know, the formula for dog years is simply Age multiplied by 7). The exclamation point (!) after userage is used because userage is an optional variable and we need to tell the compiler that it needs to be “unwrapped” and treated as if it were a normal Int variable.

Next, we create a String variable called message and we add our predetermined message “Your age in do years is: “. The following line adds our userage variable(which is now the users age in dog years) onto the end of our message String using the concatenation operator (+). Again, we use the exclamation mark (!) to “unwrap” our optional variable so it can be used like a normal Int variable. Finally, we print our message into the txtResult text field by setting txtResult.text equal to our message variable (Which now contains our full result message “Your age in dog years is: XX”. The full code for our calculate() function is seen below.

Testing Our Application

Now that we have finished coding our app, it’s time for testing. We will be running our app in XCode’s iOS Simulator. First you need to select which type of simulated device you would like to run our app on. To do this, click on the device in the top left corner of XCode as seen below, and you will see a list of different iPhones and iPads to choose from.

testing

Select one and then click the triangular play button in the top left corner to start the iOS Simulator and run our app. Your app should load up in the iOS Simulator, just as if it were on a real iOS device. Once it fully loads, click on the txtAge text field and enter an age. Next, press the calculate button and you should see your age in dog years printed in the txtResult text field! Try a few more ages to make sure every thing is working as intended. Also, be sure to try a few improper ages to make sure nothing crashes your app.

Congratulations, if you’ve made it this far, you have successfully completed your very first iPhone app using Swift!








Be the first to comment

Leave a Reply

Your email address will not be published.


*