Creating Hello World App Using Xcode 5 and Interface Builder

192 Flares 192 Flares ×

Update: As Apple released Xcode 6 and Swift, we’ve updated the Hello World tutorial here.

The Hello World tutorial was the first programming article written for our free programming course. We think it’s time to update the tutorial to make it fit for Xcode 5. Since the release of Xcode 5, we received quite a lot of queries (or complaints) about the Hello World tutorial. Here are some of them:

  • I tried to follow the tutorial but the procedures no longer work for Xcode 5.
  • Where is the Interface Builder?
  • How can I create the XIB file?

The list goes on and on. Xcode 5 promotes the use of Storyboard instead of Interface Builder. When you create a new Xcode project using the Single View template, it defaults to Storyboard. There is no XIB file generated.

HelloWorld App Featured

We’ve completely updated the Hello World tutorial for Xcode 5. However, we intend to use Interface Builder to build the project. It doesn’t mean we prefer Interface Builder over Storyboard, which is great. We just want you to learn both.

Enter the Hello World tutorial for Xcode 5.

You may have heard of “Hello World” program if you have read any programming book before. It has become the traditional program for first-time learner to create. It’s a very simple program that usually outputs “Hello, World” on the display of a device. In this tutorial, let’s follow the programming tradition and create a “Hello World” app using Xcode. Despite its simplicity, the “Hello World” program serves a few purposes:

  • It gives you a better idea about the syntax and structure of Objective C, the programming language of iOS.
  • It also gives you a basic introduction of the Xcode environment. You’ll learn how to create a Xcode project and create user interface with the built-in interface builder.
  • You’ll learn how to compile a program, build the app and test it using the Simulator.
  • Lastly, it makes you think programming is not difficult. I don’t want to scare you away. :-)

Take a Look at Your First App

Before we go into the coding part, let’s first take a look at our version of the “Hello World” app. The final deliverable will look like this:

HelloWorld App Deliverable

It’s very simple and shows only a “Hello World” button. When tapped, the app prompts you a message. That’s it. Nothing complex but it helps you kick off your iOS programming journey.

Start Coding!

First, launch Xcode. If you’ve installed Xcode via Mac App Store, you should be able to locate Xcode in the LaunchPad. Just click on the Xcode icon to start it up.

Xcode Launchpad

Once launched, Xcode displays a welcome dialog. From here, choose “Create a new Xcode project” to start a new project:

Xcode 5 Welcome Dialog

Xcode 5 – Welcome Dialog

Xcode shows you various project template for selection. For your first app, choose “Empty Application” and click “Next”.

Xcode Empty Application Template

Select Empty Application

This brings you to another screen to fill in all the necessary options for your project.

Hello World Project Options

Hello World Project Options

You can simply fill in the options as follows:

  • Product Name: HelloWorld – This is the name of your app.
  • Company Identifier: com.appcoda – It’s actually the domain name written the other way round. If you have a domain, you can use your own domain name. Otherwise, you may use mine or just fill in “edu.self”.
  • Class Prefix: HelloWorld – Xcode uses the class prefix to name the class automatically. In future, you may choose your own prefix or even leave it blank. But for this tutorial, let’s keep it simple and use “HelloWorld”.
  • Device Family: iPhone – Just use “iPhone” for this project.
  • Use Core Data: [unchecked] – Do not select this option. You do not need Core Data for this simple project.
If you’ve used Xcode 4.6 or lower, you may find the option of “Use Automatic Reference Counting” and “Include Unit Tests” options are left out in Xcode 5. They are not options in Xcode 5 but defaults.

Click “Next” to continue. Xcode then asks you where you saves the “Hello World” project. Pick any folder (e.g. Desktop) on your Mac. You may notice there is an option for version control. Just deselect it. We’ll discuss about this option in the later tutorials. Click “Create” to continue.

Hello World File Dialog

Pick a folder to save your project

As you confirm, Xcode automatically creates the “Hello World” project based on all the options you provided. The screen will look like this:

Hello World Empty Xcode Project

Empty HelloWorld Project

Familiarize with Xcode Workspace

Before we move on to code your app, let’s take a few minutes to have a quick look at the Xcode workspace environment. On the left pane, it’s the project navigator. You can find all your files under this area. The center part of the workspace is the editor area. You do all the editing stuffs (such as edit project setting, class file, user interface, etc) in this area depending on the type of file selected. Under the editor area, you’ll find the debug area. This area is shown when you run the app. The rightmost pane is the utility area. This area displays the properties of the file and allows you to access Quick Help. If Xcode doesn’t show this area, you can select the rightmost view button in the toolbar to enable it.

Xcode 5 Workspace

Lastly, it’s the toolbar. It provides various functions for you to run your app, switch editor and the view of the workspace.

Xcode 5 Toolbar

Run Your App for the First Time

Even you haven’t written any code, you can run your app to try out the Simulator. This gives an idea how you build and test your app in Xcode. Simply hit the “Run” button in the toolbar.

Xcode Run Button

Run button in Xcode 5

Xcode automatically builds the app and runs it in the Simulator. This is how the Simulator looks like:

Xcode 5 iPhone Simulator

iPhone Simulator in Xcode 5

A white screen with nothing inside?! That’s normal. As your app is incomplete, the Simulator just shows a blank screen. To terminate the app, simply hit the “Stop” button in the toolbar.

By default, Xcode sets to use iPhone Retina (3.5-inch) as the simulator. You are free to select other simulators to test the app. Try to select another simulator and run the app.

Xcode Simulator Selection

Back to Code

Okay, let’s move on and start to add the Hello World button to our app. Before we can put a button, we first need to create a view and its corresponding controller. You can think of a view as a container that holds other UI items such as button. Go back to the Project Navigator. Right-click on the HelloWorld folder and select “New File”.

Xcode 5 Add New File

Adding a new file in Project Navigator

Under the Cocoa Touch category, select the Objective-C class template and click Next.

Xcode 5 Create New Class

Name the new class as HelloWorldViewController and the subclass as UIViewController. Make sure you check the “With XIB for user interface” option. By selecting this option, Xcode automatically generates a Interface Builder file for the view controller.

HelloWorldViewController Class with XIB

You’ll be prompted with a file dialog. Simply click the Create button to create the class and XIB. Once done, Xcode generates three new files including HelloWorldViewController.h, HelloWorldViewController.m and HelloWorldViewController.xib. If you select the HelloWorldViewController.xib file, you’ll find a empty view similar to the below image:

HelloWorldViewController XIB

HelloWorld Interface Builder (.xib)

Now we’ll add a Hello World button to the view. In the lower part of the utility area, it shows the Object library. From here, you can choose any of the UI Controls, drag-and-drop it into the view. For the Hello World app, let’s pick the button and drag it into the view. Try to place the button at the center of the view.

Interface Builder Drag Button

Drag button into the View

Next, let’s rename the button. To edit the label of the button, double-click it and name it “Hello World”.

Interface Builder Edit Label

If you now try to run the app, you’ll still end up with a blank screen. The reason is that we haven’t told the app to load the new view. We’ll need to add a few lines of code to load up the HelloWorldViewController.xib. Select the AppDelegate.m in Project Navigator. Add the following import statement at the very beginning of the file:

1
#import "HelloWorldViewController.h"

In the didFinishLaunchingWithOptions: method, add the following lines of code right after “self.window.backgroundColor = [UIColor whiteColor]”.

1
2
    HelloWorldViewController *viewController = [[HelloWorldViewController alloc] initWithNibName:@"HelloWorldViewController" bundle:nil];
    self.window.rootViewController = viewController;

Your code should look like this after editing:

HelloWorld AppDelegate Code

What you have just done is to load the HelloWorldViewController.xib and set it as the root view controller. Now try to run the app again and you should have an app like this:

HelloWorld App with Button

For now, if you tap the button, it does nothing. We’ll need to add the code for displaying the “Hello, World” message.

Coding the Hello World Button

In the Project Navigator, select the “HelloWorldViewController.h”. The editor area now displays the source code of the selected file. Add the following line of code before the “@end” line:

1
-(IBAction)showMessage;

Your complete code should look like this after editing:

1
2
3
4
5
6
7
#import <UIKit/UIKit.h>

@interface HelloWorldViewController : UIViewController

-(IBAction)showMessage;

@end

Next, select the “HelloWorldViewController.m” and insert the following code before the “@end” line:

1
2
3
4
5
6
7
8
- (IBAction)showMessage
{
    UIAlertView *helloWorldAlert = [[UIAlertView alloc]
                                    initWithTitle:@"My First App" message:@"Hello, World!" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
   
    // Display the Hello World Message
    [helloWorldAlert show];
}

After editing, your code should look like below:

Source Code of HelloWorldViewController After Editing

Source Code of HelloWorldViewController After Editing

Forget about the meaning of the above Objective-C code. I’ll explain to you in the next post. For now, just think of “showMessage” as an action and this action instructs iOS to display a “Hello World” message on screen.

Connecting Hello World Button with the Action

But here is the question:

How can the “Hello World” button know what action to invoke when someone taps it?

Next up, you’ll need to establish a connection between the “Hello World” button and the “showMessage” action you’ve just added. Select the “HelloWorldViewController.xib” file to go back to the Interface Builder. Press and hold the Control key on your keyboard, click the “Hello World” button and drag to the “File’s Owner”. Your screen should look like this:

Connect HelloWorld Button

Release both buttons and a pop-up shows the “showMessage” action. Select it to make a connection between the button and “showMessage” action.

ShowMessage Send Events

Send Events Selection

Test Your App

That’s it! You’re now ready to test your first app. Just hit the “Run” button. If everything is correct, your app should run properly in the Simulator.

HelloWorld  App

Congratulation! You’ve built your first iPhone app. It’s a simple app however, I believe you already have a better idea about Xcode and how an app is developed.

You can proceed to part 2 of the Hello World app and learn how the HelloWorld app actually works. For your own reference, you can download the complete Xcode project from here.

As always, if you come across any problem while creating your app, leave us comment below. Stay tuned. We’ll publish more tutorials about Xcode 5 and iOS 7.

You May Like These:

Get Free Chapters of Our Swift Book

Beginning iOS 8 Programming with SwiftIf you want to create an app but don't know where to begin, this book covers the whole aspect of Swift programming and iOS 8 development and shows you every step from an idea to a real app on App Store. This book features a lot of hands-on exercises and projects. You will first create a simple app, then prototype an app idea, and later add some features to it in each chapter, until a real app is built. Want to learn more? Check it out here and get three free chapters.


  • João Pinho

    I really love you! hahahahaha

    Another amazing tutorial! Thanks!

  • helemi

    thanks lot..we are waiting more xcode 5 and ios 7 tutorials

  • Rahimi Ramin

    hi there Simon here is a problem i have when I create my project on the first page of xcode it keeps telling me that I need some kind of matching code signing identity in order to add my account and then it asks me to join a program but right now i am just trying to learn only not producing any app is there anyway to bypass this process under identity tap because I tried but it seems like it wont allow me to edit any code.

    • Clara

      I’m having the same issue, is there anyway around this without having to enrol in the developers program?

      • Cane

        You have this problem because you are not registered like an apple developer. You need an apple certificate if you want to distribute your app. You can code without this, but if you want to test the app you can use only one iphone to debug your app

        • Jags

          I too have the same issue and i am just learning. i will use only one that is my iPhone to debug the app. how do i proceed?

  • Kaleng

    Hi Simon! Thanks for the great tutorial. It really help for me as a beginner.

    I want to develope app for earlier iOS eg. iOS5. However under the project info screen I could only select iOS7 and nothing else. What am I missing?

  • Sid

    Hey Simon, when I did these things to build the Hello World app, it showed me 7 errors. There was one that was repeated 4 times. This one:

    Property ‘window’ not found on object of type ‘AppDelegate *’

    And the other three were these

    Cannot find interface declaration for ‘AppDelegate’

    Duplicate interface definition for class ‘HelloWorldViewController’

    Use of undeclared identifier ‘AppDelegate’

    I followed your instructions accordingly.

    And when the auto fix came up, I selected it and it turned the code into the HelloWorldView Controller.h tab into

    #import

    @interface AppDelegate : UIResponder

    @end

    @interface HelloWorldViewController : UIViewController

    @end

    Then it moved down to two errors

    The first was in the main.m tab(which I didn’t even touch in the first place). It said

    Use of undeclared identifier ‘AppDelegate’

    And the second one was in the HelloWorldViewController.h tab

    It said

    Duplicate interface definition for class ‘HelloWorldViewController’

    Help me man…

  • Brick

    Can you update this guide for Xcode 5.1?

  • Kumar Subramani

    Many thanks for this tutorial. I am a new-bie to iOS development and this really help me to build my first iPhone app successfully.. Awesome Man.. Amazing.. Thanks lot

  • Youme

    Nice intro tutorial. Probably one of the easier ones I’ve found. I’m coming from a PC background with C#/C++ and a lot of this is incredibly confusing. It’s so visual. Click and dragging for button connections is just WEIRD to me. It’s really hard to do on a laptop, you’re using 3-4 fingers to do something that normally a double click on the button object on the PC side would do. So very very strange. I couldn’t imagine a somewhat handicapped person being able to do all this.

  • srihari

    Thanks for given information

  • Ed Phillis

    These are great tutorials. Not too dumbed down and not overly complex.

  • Алексей Андросов

    Thanks! Very good and well-formed tutorial

  • Yannick Van Broeck

    Thanks, starting your tutorials now.

  • Robert

    I am having an issue as when I try to drag the “File Owners” to the Hello World button I do not get the ShowMessages I get Button-HelloWorld what am I doing wrong?

    • Anton Pham

      Drag the Button to “File Owners” not the other way round.

  • Anatoliy

    I’m running Xcode 5.02, cant finish my first app these errors keep coming up. Help?

  • matt

    I found this article very helpful. However, I am having an issue. upon compiling I am receiving an error. “Interface Builder XIB Compiler Error: nterface Builder could not open the document “HelloWorldViewController.xib” because it does not exist”

    how do i fix this??

  • Greg

    I just installed xcode 5.02 I am having a problem that none of the UI controls show up in the list at the bottom right, I have a project open with a storyboard and I added a new file as per the tutorial. I don’t understand what I am missing to see buttons, labels and so on. It always says ‘No Matches’

    • sash

      Hey Greg did you get an answer to this? I also had the same issues..

      • sash

        Rather I still have the same issue?

    • sahil

      You have to do the same in xib file not in storyboard.
      While adding new file check xib interface and find the same file in supporting files

  • Vinicius de Paula

    Gr8 tuto dude! Tks 4 share it!

  • Pingback: Xcode 5 simple example | kamanijaydeep()

  • Jesse

    everything worked up until dragging hello world to the File’s owner button. File’s Owner will not highlight once the blue line is over it only File Responder, any suggestions?

    • TwoPinStudio

      Look for the File’s Owner and First Responder’s icon instead. It’s on the left of Editor pane, not in project navigator pane.

    • Abas Faris

      make sure you are using “control” button not command button. Us windows guys tend to think that the ctrl button means command automatically

      • Logic

        That doesn’t solve the stated problem.

  • Antiokus

    That was a great intro. I’ve been struggling with getting just the basics down, and this helped IMMENSELY! I’m new to this kind of scene, but I was wondering if anyone here knew how to use (or knew of some basic tutorials) for Ruby on Rails with xcode5. This kind of organized walkthrough would be preferable!

    Cheers!

  • Pradeep

    Thank you. I have built my first Hello World app by following your tutorial step by step. Great help, thanks.

  • Sahil

    HelloWorldViewController *viewController = [[HelloWorldViewController alloc] initWithNibName:@”HelloWorldViewController” bundle:nil];
    self.window.rootViewController = viewController;

    I didn’t understand the use of above.

  • James

    How do we do this with 5.02? I don’t see the code “self.window.backgroundColor = [UIColor whiteColor]“.

  • Lightjsc

    A very nice tutorial, Thanks!

  • Stefano Tacchino

    hi, i want to ask you something, how can you do it with Storyboard?. thanks

  • Pingback: Week 2 Reflection | m&m()

  • Pingback: Ruby Motion | My Blog / Website()

  • Zach

    On the IBAction the second line that is the curly brace I get an error saying, “Expected identifier or ‘(‘”. I tried googling this issue, and I found because of the semi colon on the previous line. If I took out the semicolon then that error went away, although another error pops up telling me that the semicolon needs to be their….
    Also, my screen is not set up the way your is all for the xib. I had to manually create it and then the whole File’s owner thing looks all different. Please help.

  • harpreet

    Getting this error – I did exactly same as told in this tutorial but still getting this error :(

    int main(int argc, char * argv[])

    {

    @autoreleasepool {

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

    }

    }

    libc++abi.dylib: terminating with uncaught exception of type NSException

    (lldb)

    • Harpreet

      I m using xcode 5.1 is that the problem ?

      • http://www.appcoda.com/ Simon Ng

        The tutorial should work with Xcode 5.1. You can download the complete Xcode project and compare with yours.

      • Capim

        You probably have already solved it, but just for the sake of anyone who might get this same error, the problem (for me, at least) is because when I ctrl dragged the button to the File’s Owner, the Sent Event assigned was Touch Up Inside. When I changed it to Touch Down (dragging from the side window to File’s Owner), it worked.

        I hope it helps :)

        • Capim

          Nevermind. The next step shows a printscreen with Touch Up Inside assigned and when I changed it to Touch Up Inside and back to Touch Down, it gave me the same error.

          • Capim

            Well, I’ve started all over again and it worked. Really strange and I’d love to know what was going on.

            I just hope it doesn’t happen again in the middle of a big project..

  • Pingback: Designing your iOS app: First Steps | iBeginner()

  • dhnjy 18

    Hi Very nice tutorial.. Worked for me.

  • Pingback: Creating Hello World iPhone App Using Xcode 5 and Interface Builder - appgong()

  • Fiddler

    Thanks for the tutorial. I’m using xcode 5.1.1 and with the help of the comments I changed the button to a Touch Down. Everything went fine afterward. I’m having trouble finding tutorials that work first time for 5.1.1. Maybe what I learned tonight will help me get the calculator tutorial from a different site working. I think it works with 5.0.

  • Deanna Robertazzi

    I can’t drag the file’s owner to the button to get the Touch Up inside- File’s Owner showMessage in sent events to be on. How do I do this?

  • Pingback: Android vs iPhone vs HTML – Amol Wankhede()

  • MLo

    Hi,
    Could you help me ?

    I cant see the app after the first set of codes. The simulator’s screen is black and I cant fix it. Im also getting the error “Thread 1: signal SIGABRT”

    Thanks!

  • Wilfred

    Mine says view not show message and now the simulator is blank. What did I do wrong?

  • leyu
  • NewProgrammer

    im using Xcode 6.0.1 and couldnt get my code to work. Will there be an update for this new version of xcode?

  • Pingback: Iphone Apps Xcode()

  • Pingback: grosir baju murah 5000()

192 Flares Twitter 32 Facebook 124 Google+ 18 LinkedIn 18 192 Flares ×