Introduction: Creating Your First IOS App

About: Drafter by trade, but roboticist, designer, programmer, and reverse engineer by hobby

Looking around this site, it occurred to me that there weren't many 'ibles on programming the iOS platform, so I thought I'd fix that deficit. This is a simple "hello, world!" app for iPhone (or iPod Touch, or iPad). This 'ible will also serve the purpose of helping others become familiar with the IDE known as Xcode, which is what you need if you want to program for the iOS platforms.

Step 1: Get Xcode

If you already have Xcode, you can skip this step.

If you want to develop apps for iOS, you need the SDK, which is provided with Xcode. Xcode only runs on Mac OS X (yes, Apple is doing that on purpose), so if you are running a windows (or linux, or pretty much any non-Mac OS X) operating system, you have a couple options:

1. Get a mac, by far the easiest, but it can be rather expensive.

2. Find a friend with a mac, if they are nice, they'll let you use it for programming, you should warn them, however, that programming takes a long time.

3. Give up, Those are your legal options, there are some other options that are either illegal, or are in the gray area (meaning it's debatable whether or not it is illegal), so I am not mentioning them, you want to know them, find them yourself, I won't be responsible.

Now that's settled, onto the IDE. Go to the mac app store (available in mac os x 10.6.8 and later) and search Xcode. It's the first option, click on it. Download it, it's a lengthy download, ~4 Gb, so if you have a slow internet connection you may want to consider doing something else while it is downloading.

Step 2: Open Xcode & Set Up the Project

1. Open Xcode.
2. Go to File>New>Project.
3. Click on Single View Application and click next.
4. Name it Hello World!
5. Decide whether you want it to be an iPhone app, an iPad app, or universal (I will be doing iPhone)
6. Make sure use storyboards and Use Automatic Reference Counting are checked
7. Click Next
8. Navigate to where you want to save the file and click Create

Step 3: Write the Code

You will be doing the programming in the ViewController.m file, but it doesn't hurt to look at the other files. The MainStoryboard.Storyboard file is the UI, we'll deal with that later. The appDelegate is what is called on startup, in this tutorial, we will be leaving that alone.

Ok, time to start programming.

1. Open up ViewController.h

2. Between @interface ViewController : UIViewController and @end add the following code: 
@property (strong, nonatomic)IBOutlet UILabel *label;
This is the label that will show the Hello World text. If an empty circle appeared next to the line of code, then you wrote it right

3. Go to ViewController.m

4.  Under @implementation ViewController add @synthesize label; and in the viewDidUnload function add [self setLabel:nil];

5. In viewDidLoad, add the following code: self.label.text = @"Hello World!";

6. That completes the programming for now

Step 4: Connect the UI

Next We'll deal with the UI.

1. Open MainStoryboard.Storyboard

2. Find a label and drag it onto the view (if this sounds confusing, refer to the picture)

3. Resize the Label to your liking by clicking and dragging on the squares in the corners of the label

4. Go to the Attributes inspector (if you are not already there, refer to the picture)

5. Make sure it is centered, and choose the font and size you want. I will stay with the system font, but scale it up to size 25

6. Open the Assistant Editor, it should open ViewController.h, if not, you need to change it to ViewController.h (again, refer to the picture)

7. Remember that circle I told you about earlier? Click and drag from it to the label you just added. If you did it right, the circle should be filled

Step 5: Run the App

That's it! Hit the Run Button and if you did everything correctly, your app will say Hello World!
Pat yourself on the back, you just wrote your first app.

Step 6: Have Some Fun by Adding Things Programmatically

To make it a little more advanced, we are going to add everything programmatically.

1. Delete the label we added to the UI as well as all the code we wrote up to this point.

2. Open ViewController.h and add the Following code between the @interface ViewController: UIViewController and @end:
@property (strong, nonatomic)UILabel *label;
Notice how a circle did not appear this time? That's an indication that you did it correctly

3. In ViewController.m add @synthesize label; right beneath @implementation ViewController and add [self setLabel:nil]; in the viewDidUnload function.

4. In the viewDidLoad function add the following lines of code:
//Define where the label will be displayed
self.label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 100)];
//Define the text to be displayed
self.label.text = @"Hello World";
//Center the Text
self.label.textAlignment = UITextAlignmentCenter;
//Programmatically add the label to the view
[self.view addSubview:self.label];

5. Hit run and admire your handiwork, you've completed your first iOS application

Hands-on Learning Contest

Participated in the
Hands-on Learning Contest

Hurricane Lasers Contest

Participated in the
Hurricane Lasers Contest