Your First iOS App introduces you to the Three T’s of iOS app development:
- Tools. How to use Xcode to create and manage a project.
- Technologies. How to create an app that responds to user input.
- Techniques. How to take advantage of some of the fundamental design patterns that underlie all iOS app development.
After you complete all the steps in this tutorial, you’ll have an app that looks something like this:
As you can see above, there are three main user interface elements in the app that you create:
- A text field (in which the user enters information)
- A label (in which the app displays information)
When you run the finished app, you click inside the text field to reveal the system-provided keyboard. After you use the keyboard to type your name, you dismiss it (by clicking its Done key) and then you click the Hello button to see the string “Hello, Your Name!“ in the label between the text field and the button.
To benefit from this tutorial, it helps to have some familiarity with the basics of computer programming in general and with object-oriented programming and the Objective-C language in particular.
To create the iOS app in this tutorial, you need Xcode 4.3 or later. Xcode is Apple’s integrated development environment (or IDE) for both iOS and Mac OS X development. When you install Xcode on your Mac, you also get the iOS SDK, which includes the programming interfaces of the iOS platform.
Create and Test a New Project
To get started developing your app, you create a new Xcode project.
1.Open Xcode (by default it’s in
/Applications).
If you’ve created or opened a project in Xcode before, you might see a project window instead of the Welcome to Xcode window.
2. In the Welcome to Xcode window, click “Create a new Xcode project” (or choose File > New > Project).
Xcode opens a new window and displays a dialog in which you can choose a template. Xcode includes several built-in app templates that you can use to develop common styles of iOS apps. For example, the Tabbed template creates an app that is similar to iTunes and the Master-Detail template creates an app that is similar to Mail.
3. In the iOS section at the left side of the dialog, select Application.
4. In the main area of the dialog, select Single View Application and then click Next.
A new dialog appears that prompts you to name your app and choose additional options for your project.
5. Fill in the Product Name, Company Identifier, and Class Prefix fields.
You can use the following values:
- Product Name:
HelloWorld - Company Identifier: Your company identifier, if you have one. If you don’t have a company identifier, you can use
edu.self. - Class Prefix:
HelloWorld
7. Make sure that the Use Storyboards and Use Automatic Reference Counting options are selected and that the Include Unit Tests option is unselected.
8. Click Next.
Another dialog appears that allows you to specify where to save your project.
9. Specify a location for your project (leave the Source Control option unselected) and then click Create.
Xcode opens your new project in a window (called the work-space window), which should look similar to this:
Take a few moments to familiarize yourself with the workspace window that Xcode opens for you. You’ll use the buttons and areas identified in the window below throughout the rest of this tutorial.
If the utilities area in your workspace window is already open (as it is in the window shown above), you can close it for now because you won’t need it until later in the tutorial. The rightmost View button controls the utilities area; when the utilities area is visible, the button looks like this:
If necessary, click the rightmost View button to close the utilities area.
Even though you haven’t yet written any code, you can build your app and run it in the Simulator app that is included in Xcode. As its name implies, Simulator allows you to get an idea of how your app would look and behave if it were running on an iOS-based device.
To run your app in Simulator
After Xcode finishes building your project, Simulator should start automatically (you might have to wait a few seconds for Simulator to appear on top of the workspace window). Because you specified an iPhone product (rather than an iPad product), Simulator displays a window that looks like an iPhone. On the simulated iPhone screen, Simulator opens your app, which should look like this:
