You are on page 1of 7

Food

Living

Outside

Play

Technology

Workshop

Creating your first iOS app


by A-Nony-Mus on August 14, 2012 Table of Contents Creating your first iOS app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Intro: Creating your first iOS app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Step 1: Get Xcode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Step 2: Open Xcode & set up the project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Step 3: Write the code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Step 4: Connect the UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Step 5: Run the app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Step 6: Have some fun by adding things programmatically . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Related Instructables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 2 2 2 3 4 5 6 7

http://www.instructables.com/id/Creating-your-first-iOS-app/

Intro: Creating your first iOS app


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.

Image Notes 1. Hello World!

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.

Image Notes 1. search for Xcode 2. First result, also happens to be the only free one

Image Notes 1. Yours will say download

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

http://www.instructables.com/id/Creating-your-first-iOS-app/

Image Notes 1. I Selected iPhone 2. Name it Hello World 3. Make sure Use Storyboards and Use Automatic Reference Counting are checked 4. Click next

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

Image Notes 1. Notice the circle

http://www.instructables.com/id/Creating-your-first-iOS-app/

Image Notes 1. viewDidUnload function 2. @synthesize label 3. viewDidLoad function

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

Image Notes 1. Click this if you don't get the right hand bar

Image Notes 1. Click and drag this to the view 2. View, drag the label to here 3. Label 4. Attributes Inspector

http://www.instructables.com/id/Creating-your-first-iOS-app/

Image Notes 1. Font Preferences 2. Center Text 3. Resize Square

Image Notes 1. Click and drag from here to the label 2. The label will highlight when you connect it properly 3. Assistant Editor 4. Click on this to change files

Image Notes 1. Circle is filled now

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.

Image Notes 1. Hello World!

http://www.instructables.com/id/Creating-your-first-iOS-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

Image Notes 1. Notice there is no circle

Image Notes 1. Add this code

Image Notes 1. Hello World!

http://www.instructables.com/id/Creating-your-first-iOS-app/

Related Instructables
Build an Application in Xcode 2 on a Mac by Macworldwizardz

How to make and sell an iPhone app with My first own iOS no previous programming app - Gas By Numbers - a gas knowledge!! by howtowithmanish mileage calculator by Mike73

4.0 and 4.0.1 iOS Easy 2-Step iPhone RFID Jailbreak for iPhone/iPod/iPad Reader by by Chibichuba OniDaito

Controlling an Arduino with Cocoa (Mac OS X) or C# (Windows) by computergeek

http://www.instructables.com/id/Creating-your-first-iOS-app/

You might also like