iOS Development Tutorial Series: Hello World

Although it seems very Cliché, our first iPhone app will be a Hello World program. Mostly everyone starts out programming with a Hello World exercise, so let’s not stray from the group since it seems they are doing well…

As we go through this series I will explain concepts like Objective-C (the programming language iOS apps are written in), iPhone development, and programming in general…

Lets get started!

1. Open Xcode and click “Create a new Xcode Project”
2. Select “View-Based Application” and click choose…

3.Give your app the name “HelloWorld”

When the application project opens you will be presented with a view similar to this…

If you click on the files from the classes folder you will be able to see the code in the right window. As you can see Apple gives you some pre-written code that is commented out. On that note, I’ll explain to you what a comment is… A comment is text that will not be executed by the compiler (Xcode). A comment that is just one line will with start with a “//” and a comment that is more than one line long is started with a “/*” and ended with a “*/”… Comments come in very useful when developing programs. You can use comments to document code for later viewing or to document code for other developers.

Before we start writing our first app I need introduce and explain a few concepts, OOP (Object Oriented Programming), MVC (Modal View Controller), and “.h” and “.m” files. Let me take a shot at explaining OOP to you… The Object in Object Oriented Programming is basically two files of code (.h and .m) that work together so that a developer can call that code in their own programs. This provides a massive framework for developers so that they don’t have to start completely from scratch. If you are having troubles understanding the object oriented programming concept you can ask me questions by emailing me at Derek@homeschooldev.com.

Now lets start with the “.h” and “.m” files. Open up the “HelloWorldViewController.h” file by single clicking on the file. As you can see, the code is displayed in the window to the right. A “.h” (header) file is a basically a blue print to an object and a “.m” (implementation file) is where all the code is implemented and executed from. If you don’t understand this concept yet, that’s ok, we will come back to it…

MVC (Model View Controller) is something that is used when developing apps for iOS and Mac OS X. It is something that splits up the code and the actual interface that the user sees. Model, is the users data and the data you display to the user, View is what the user interfaces with and a controller is your code that manages the link between the view and the model. This concept may seem edgy now, but it will grow on you very quickly and makes the life of a programmer much easier and organized.

Lets get coding!

In the header file, “HelloWorldViewController.h”, we are going to declare an IBOutlet. An IBOutlet is what connects your code to a visual object, such as a label or a button.

3. Between the curly braces type “IBOutlet UILabel *label;” and outside the curly braces type “-(IBAction)button;”

An IBAction is a method (block of code) that can be called. An IBAction is recognized by the view and allows you to connect that specific method (block of code) to a UI item, such as a button so that the button will execute that block of code.

That’s all we need to do in the header file… Now lets start designing the interface.

4. Open the folder named “Resources” and double click the file named “HelloWorldViewController.xib”

This will bring up a window similar to this:

This is the program you use to design your user interface. On the left you are given a list of objects that you can use in your user interface, to the right of that you are given the window where you put the objects to design the interface, the next window isn’t important right now, and the next window is called the inspector and is the window where you can change all the attributes of nearly everything in your UI.

Lets start designing!

5. From the left window, drag a label onto your view.


6. Now that you have your label on your view, resize the label using the blue lines as a guide.


7. Now center the text in the label using the button in the inspector window:

8. Clear the text from the label using the textfield in the inspector window named “Text”

 


9. Now lets put a button on our view and give it a name using the same methods that we just used to put a label on our view.

We are done designing the view, but the code we are about to write has no idea when to be called. We must add a link between the code and the UI element.

10. Select “Files Owner” from the main view and then click the connections tab on the Inspector window.

On the Inspector window, you can see the IBOutlet and IBAction you defined earlier.

11. Click on the plus button next to the label definition and drag it onto the label on the view.

12. Now drag the plus button next to the “button” definition on to the button in the view. A window will popup asking you when you want to perform this action… You can perform the action when the user touches the button and then lets up, touches the button, double taps the button, and a whole bunch of other things. We are going to use “Touch up Inside”, so select it.

13. Click File>Save or Command+S on your keyboard.

We now have our interface designed and our outlet and action linked up to our view. We can now start writing code.

14. Go the the “HelloWorldViewController.m” file (implementation file), this is where all the work gets done and is the place you write your code.

We are going to need to implement the IBAction we define earlier in our header file and give it some code.

15. Under the “@Implementation” line type:

-(IBAction)button {

}

This is called a method, and it is what’s called when the user presses the button (because we linked this IBAction to the button in interface builder).

This method is kinda boring, don’t you think? It doesn’t do anything…. Lets give it some life!

16. In the new method, type:

“label.text = @”Hello World!”;”

This line of code is assigning the text “Hello World!” to the label that we attached to our IBOutlet definition.

We are done!

17. Click File>Save or Command+S on your keyboard so that you don’t lose your progress.

18. Now you can click Build and Run at the top of the window to run your application in the simulator.

If you followed the instructions correctly you application should build and start up in the simulator with no errors or warnings.

You should see something like this:

If your app didn’t start up correctly or gave you errors, feel free to ask any question so that the community or I can help you.

We have learned a lot in this tutorial, hopefully I have explained everything well enough for you to understand…

Some key items you need to understand before moving on to the next tutorial are, the concepts of MVC and OOP. If you felt I didn’t explain these concepts very well you can leave a comment below or email me if you are needing help understanding them.

That’s it for this tutorial! You’ve now created your first iOS app, that wasn’t so bad, was it?

Keep an eye for the next tutorial!


  • http://rodrigo3n.com Rodrigo Alves Vieira

    Thanks dude! Great work! Keep up!

  • http://enkhu.blogspot.com enkhbat

    Hi! I tried to make this on latest iOS SDK, but it doesn’t work. The application loads and then exits instantly. There is no error information.

    • http://homeschooldev.com Derek

      enkhbat,

      I built this app with the latest SDK. You must of done something wrong. You say it crashes instantly? Your problem is most likely with your outlets. Go into interface builder and disconnect all of your outlets, reconnect them, and try to run your app again.

    • Anonymous

      Hey i have this same problem can u tell me how you fixed it?

  • KevinL

    It would be nice if you would describe how to test on the iPhone/iPod itself – before submitting to Apple.

    • skittels980

      you have to sign up to be a dev at appl and pay about 100 bucks per year

  • Ronak

    Thanks…..i find many useful info. while implementing….thanks a lot…

  • Newbie

    THANKS!

    Both very instructive and easy to follow.
    And it works!

    GREAT:-)

  • http://www.mediacrisis.net Brittany

    Great, easy to understand starting point, thanks!

  • Craig

    I’m using XCode4 and am spending all my time looking for what you’re referencing and can’t find half the things in the tutorial. It’d be nice if you spelled out what to do and where to find it rather than assume our environment is the same as yours. My XCode4 is bone stock but yet it’s totally different in appearance than yours. For example, how do I find “file’s owner” in the main view? Don’t see it. For a “hello world” app I think more details should be offered.

    Thanks for the example and I appreciate your work and help.

    • Dave

      Files owner is a yellow box on the left sidebar on the window.

      To the author of this post: Thanks, I got it working on xcode4 – you may want to update the screenshots.

    • Anonymous

      This tutorial is for xcode 3.2.6, if you have a different version perhaps you should search for a tutorial that uses your version of xcode..

  • http://www.twitter.com/rafaelks Rafael Kellermann Streit

    Thank you guy, that’s very nice.

  • Jason

    Great tutorial. Awesome to have access to some simple “here’s how to get started” guides. There’s so much information on the Apple dev site, it’s all a bit overwhelming. These tutorials are clear, concise and easy to follow.

    Thanks for going to the effort!

  • Jeyakumar

    Thanks for the example.

    Im New to Mac and bought a mac pro last week and downloaded xcode 3.2.6.I try your tutorial and run the program successfully.

  • Saenchai

    Hello. Nice Tut. But at the first it did not work for me and i search for error one hour. Now i found. What i did is used pase&copy for this part: “label.text = @”Hello”;”. But for some reason (Character-encoding?) that did not work. Now i wrote it by hand and voila: it works…

    Crazy.

  • Fahad Abdul Majeed

    thanks a lot …
    u r superb

  • DMaurice

    Pretty odd thing here. I have the latest and greatest version of Xcode however when I create the HelloWorld app my listview is different than what I see in this tutorial.

    For example I don’t have a folder labeled resources.

    I don’t see any steps that I missed, what am I doing wrong?

  • Shakeel

    Thanks a lot Derek.
    You made my day…..

  • Ratnadeep

    THANKS…..

  • Mike

    Thanks for the newbie tutorial, it helped make sense of how connections work with (not quite intuitive on their own for someone who has never done any Mac/iOS dev). With the complexity of new languages these days its still great to start with a hello world to get a handle on the basic concepts. Long live hello world.

  • http://www.appintelligent.com Maurice

    Thanks. Very informative. Easy transition when you already know OOP.

  • Cyrus

    Thanks a lot!

  • Randy Hill

    Thanks for the tutorial, it was a great quick start on how to build apps in XCode. The only confusion I had is that the layout of my project manager was different so it was hard to find the inspector and other palettes. That’s a weakness of XCode I think, it doesn’t seem to have an easy to find tutorial on how to use and find all of it’s features, but it didn’t take too long for me to find what I needed and your tutorial hit the key points on how to write a simple app.

  • Howel

    that’s great!

  • Will

    The dot notation “label.text = @”Hello World” is actually inconsistent with the Messaging syntax that newbies should become accustomed to early on with Objective-C.
    While iacceptable and is readable in this instance, most experienced coders (yes, even those from c/c++) advocate forcing yourself to use the Messaging Syntax until you experience that “Ah Ha” Moment with the foreign syntax. Much more readable in most cases.

    Messaging Syntax:

    [label setText:@"Hello World"];

    Otherwise, great Tutorial!

    • Michael Stoner

      Thanks, was looking for that example – message passing instead of dot notation

  • sjroorda

    All went fine until step 9, but it took me a while to find out that you have to save your project before “you can see the IBOutlet and IBAction you defined earlier” in step 10.

    • Sombat

      yeah! This could help newbies like me, if the author add this step in the tutorial.

  • Dario

    Thank you man!
    Great Job! :)

  • http://www.ediy.co.nz/ Web Design

    NIce one i like it

  • Pingback: iOS Development Tutorials | Mobile Interactions

  • Joe

    You might have mentioned the .h file needs to be saved before you can see the actions in the interface builder.

  • http://luca.manassero.net Luca Manassero

    Very good (and simple!) tutorial. Thank you!!

  • LuckyP

    Derek, thanks, this is just what I needed. I am running OSX 10.6 and downloaded xcode 3.2.6 and iOS SDK 4.3. Tried the tutorial at developer.apple.com/library/ios/navigation , “Your First iOS Application”. But I quickly realized that was for newer versions of both xcode and the sdk.

    Was able to follow your tutorial without any problems, though I was confused by the statement “On the Inspector window, you can see the IBOutlet and IBAction you defined earlier”, since I don’t see anything that I immediately recognize as related to that. After scratching my head over that for a while I continued, and the end result was fine.

    Lucky P

    • Kishore

      I am having the same problem, can you please explain how it worked for you.

  • Loguis

    Thank you for this article, it was really helpfull! :)

  • Gerry

    Thanks for the tutorial! Everything builds just fine (no issues), says it’s running on iPhone Simulator, but all I see is a white, blank iPhone simulator screen.(v.4.3 (238.2))
    X-Code version 4.1 build 48110. X-Code interface is not like yours. Very hard to find what you describe, called by different names.

  • CTTan

    Very good sample. Well done and keep it up!

  • Ed

    cool, thanks. I’m just a 14 year old kid that can’t code, and i managed to follow your instructions easily enough! Thanks :)

  • Anonymous

    i followed the same steps but i am not getting the library part in the helloworldviewcontroller.xlib
    file i am getting just view part displaying in screen may i get the solution for this problem..??

  • Liam amster

    This is great – I found another good one the other day too : http://ios-blog.co.uk/iphone-development-tutorials/create-your-first-iphone-hello-world-application/ together they make a really good pair

    Thanks for the share folks :)

  • Pingback: Where can I learn the MVC pattern? - Quora

  • Pingback: 14 Online Resources to Learn iOS Development

  • Nauman

    Could not find Resourse folder as in option 4 using xcode 4.3

  • Nauman

    THANX alot
    it takes time alot
    Now please tell me how to export it to .ipa so i can transfer it to iphone via ifunbox

  • Henry Lee

    Awesome!Thanks a lot

  • http://www.alm-soft.com Rizwan Bashir

    I am new to IOS and new to Mac Os, it was like a hell from last 3 days until i found this tutorial.
    All I learnt is that every single version of XCode has differences in code , they might be so minor that for new comers they might not notice them and for this tutorial author I can only say

    “God bless you”

    Best Regards
    Rizwan Bashir

  • besso

    Great one. Thank you DEREK

    Then i spend 2 Hours to wire Outlet correctly.
    I hope to emphasize to declare custom label and button in header file before any IB job.
    I did first IB UI job then declared variables in header file and tried to wire Referencing Outlet.
    .. and fail and remake new Hello World project.

  • BerlinExpat

    I get an error message saying ‘label’ undeclared (first use in this function). What does this mean and how do I fix the program so that it can run? Thanks, –EL

    • LN

      I had the same problem until I saw that I had written label with a capital L: IBOutlet UILabel *Label; instead of IBOutlet UILabel *label. Now it builds without an error. …however, I am having the problem of someone else that in the simulator, the HelloWord application starts up and quits instantly.

  • Pingback: IPhone Programming |

  • Kimberley

    Great intro. Thank you for the exact mouse clicks necessary with interface builder and the connector portion of this.

  • http://whitesnow.se Jonas Anton Östman

    Thanks, excellent tutorial!

  • Pingback: iOS App Tutorial Attempts | techdeveloperwannabe

  • jaga

    Thanks. great intro..!

  • http://www.geovannysalas.com Geonismz

    error stray ‘\342′ in program

    The symbol ” is not “. Those are called ‘smart quotes’ and are usually found in rich documents or blogs.

  • Kishore

    I am not able to view the IBAction and IBOutlet in the inspector window, As per your instruction in step 10. I have done exactly same till step 9.

  • Jimma

    I open it and run it and it says nothing is wrong but in the simulator it opens to the screen the crashes and goes back to the homescreen of an iphone and in xcode it says debugging terminated Please help

  • kvvn

    works just fine

  • http://www.taoteapps.com Jimmy

    Do you wanna develop your iOS Apps? No problem, we have huge information about Apps. If you need any help, please visit http://www.taoteapps.com & learn more.

  • http://moonbeam.ca/linksEn/add.php Gold Iphone 5s news

    WOW just what I was looking for. Came here by
    searching for apple tv ads

  • http://www.makemegeek.com Manishankar

    It was easy to understand.It will be really helpful for beginners.I made something like this here

    http://www.makemegeek.com/write-hello-world-app-ios/

  • Pingback: The App Home – XCODE TUTORIAL

© 2008-2014 • Mobile Orchard and the Bar-Tree Logo are service marks. ContactAdvertise