Learn to Code iOS Apps 3: Your First App

Learn how to make an iOS app.

Learn how to make an iOS app.

Welcome to Part 3 of the Learn to Code iOS Apps series! This series introduces you to the basics of programming with the goal of creating an iOS app; no prior programming experience is required.

In the first two tutorials in the series, you learned the basics of programming in Objective-C. Specifically:

• In Part 1, you learned the basics of Objective-C programming and you created a simple command line number guessing game.
• In Part 2, you learned about objects and classes in Objective-C and you created a simple app to track people’s names and ages.
• In Part 3 (You are Here!), the real fun begins! Now that you know the basics of programming, you will take all that you’ve learned and create a simple iPhone game of your own.
• In Part 4, you will take this app and make it beautiful, learning more about customizing the look and feel of iPhone apps.

You learned a lot in those tutorials, but you might have thought to yourself – “Wait a minute, I thought this was supposed to be about making iOS apps, but all I’ve made so far is command line apps!”

Well, good news – the long wait is over! You are now ready to make your first iOS app at long last!

In this tutorial, you will create a simple iOS game where you have to tap a button as many times as you can in 30 seconds. Just don’t get too excited and smash your screen by mistake! :]

In this first part, you’ll create the basic app with all of the required functionality in place. In the second part of the tutorial, you will add custom images and sounds to your app to give it a more polished appearance!

Sound good? Then time to dive right in and get started!

Getting Started

Start up Xcode, and select File > New > Project. In the left sidebar, select Application under iOS. Then double click Single View Application, as below:

Fill in the project options as follows:

• Product Name: Tap Me
• Organization: can be left blank.
• Company Identifier: use something like com.yourname, such as com.janesmith
• Class Prefix: can be left blank.
• Devices: select iPhone.
• Make sure that Use Storyboard and Use Automatic Reference Counting are the only two items checked.

Now choose the directory to where you want to save the project files, and click Create.

Off and Running!

Great! You now have everything setup in Xcode to start developing your iOS app; now is a great time to make sure that everything is configured correctly by running the app. Make sure that iPhone Simulator is selected in the upper left corner of the screen and then press Run, as below:

Xcode projects start off as fully-functional apps, but the starter project will do nothing but display a blank white screen in the simulator. Your stunning app should look like this:

Have you finished admiring your awesome app yet? :] Return to Xcode and press the Stop button to stop the app.

Take a look at the project navigator. This project looks quite a bit different than the project in the previous tutorials. There are a lot of new files inside this project that you didn’t see with your previous Mac application.

For example, where is main.m? No worries; it’s in the Supporting Files folder. But wait a minute — that’s a little odd. Why is main.m in the Supporting Files folder, if all of your code needs to go inside that file?

Open up main.m and have a look at the code inside:

Hmm — in the section where you placed your code in the Mac application, there is a strange line of code:

return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));

What on earth is this and what does it do? In simple terms, the UIApplication serves as the central brain of your app. It gives you a powerful app with graphical capabilities that allows your app to take advantage of all of the features of an iOS device.

While command-line applications will normally have more useful code in main.m, the typical iOS app just needs to boot up UIApplication and hand off control.

So the first code that runs in your application is still main.m, but now the sole purpose of this file is just to create a new UIApplication. In 99.99% of the iOS apps you’ll encounter as a developer, you never need to edit main.m; therefore it is stored away in the Supporting Files folder.

Did you just breathe a sigh of relief? :] You’ll leave main.m for now and head on into building the rest of your app!

Two Sides to Every Story — Introducing Storyboards

Where do you start building the app if not in main.m? One great feature in iOS is called Storyboards. Storyboards are a method of designing the visual appearance and flow of your app, without having to write any code! This is sounding easier and easier, isn’t it ? :]

The default project already has a Storyboard file in it called MainStoryboard.storyboard. Go ahead and open it up! You’ll see the following:

This is the basic storyboard file. So far, it is just displaying a blank white screen, just like the simulator showed when you ran the app earlier:

You’ll notice there are sidebars on both sides of the storyboard view. Most of the time in this tutorial, you’ll want to have both sidebars visible to make your life a little easier! :]

To toggle the Utilities sidebar on the right, click the button in the top-right of the Xcode toolbar in the View section, as below:

To toggle the Document Outline sidebar on the left, click the round arrow button in the lower-left corner of the storyboard. The left-pointing arrow will hide the sidebar; if it’s hidden, it will turn into a right-pointing arrow to show the sidebar.

As exciting as the white background is, you’ll probably want to change it to something a little snappier! :]