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!


examsheets – http://www.examsheets.com/onlinetest/gre-exam.htmbraindumps – http://www.braindumps.com/testprep/PCAT.htmselftestengine – http://www.selftestengine.com/test/PCAT.htmlcertkiller – http://www.certkiller.com/admissiontest/ged-test.htmtestking – http://www.testking.com/techking/uncategorized/visit-a-galaxy-far-far-away-in-this-new-photoshop-tutorial/


62 Responses to “iOS Development Tutorial Series: Hello World”

  1. Rodrigo Alves Vieira 22. Feb, 2011 at 12:41 pm #

    Thanks dude! Great work! Keep up!

  2. enkhbat 23. Feb, 2011 at 10:36 am #

    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.

    • Derek 24. Feb, 2011 at 11:25 pm #

      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 13. Nov, 2013 at 9:00 pm #

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

  3. KevinL 24. Feb, 2011 at 10:49 am #

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

    • skittels980 07. Apr, 2011 at 6:54 pm #

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

  4. Ronak 25. Feb, 2011 at 5:08 am #

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

  5. Newbie 27. Feb, 2011 at 5:52 am #

    THANKS!

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

    GREAT:-)

  6. Brittany 11. Mar, 2011 at 9:32 am #

    Great, easy to understand starting point, thanks!

  7. Craig 12. Mar, 2011 at 6:19 am #

    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 21. Mar, 2011 at 6:59 pm #

      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 29. Jan, 2012 at 5:13 pm #

      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..

  8. Rafael Kellermann Streit 16. Mar, 2011 at 7:50 pm #

    Thank you guy, that’s very nice.

  9. Jason 18. Mar, 2011 at 7:07 pm #

    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!

  10. Jeyakumar 25. Mar, 2011 at 10:15 pm #

    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.

  11. Saenchai 30. Mar, 2011 at 8:52 am #

    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.

  12. Fahad Abdul Majeed 14. Apr, 2011 at 12:57 am #

    thanks a lot …
    u r superb

  13. DMaurice 15. Apr, 2011 at 7:40 pm #

    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?

  14. Shakeel 03. May, 2011 at 5:04 pm #

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

  15. Ratnadeep 04. May, 2011 at 4:33 am #

    THANKS…..

  16. Mike 04. May, 2011 at 3:33 pm #

    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.

  17. Maurice 15. Jul, 2011 at 2:02 pm #

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

  18. Cyrus 17. Jul, 2011 at 3:56 am #

    Thanks a lot!

  19. Randy Hill 23. Jul, 2011 at 6:23 pm #

    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.

  20. Howel 24. Aug, 2011 at 5:11 am #

    that’s great!

  21. Will 17. Sep, 2011 at 8:08 am #

    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 04. Oct, 2012 at 8:22 am #

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

  22. sjroorda 20. Oct, 2011 at 1:15 pm #

    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 03. Jan, 2012 at 8:47 pm #

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

  23. Dario 10. Nov, 2011 at 4:57 am #

    Thank you man!
    Great Job! :)

  24. Web Design 14. Nov, 2011 at 11:04 pm #

    NIce one i like it

  25. Joe 10. Dec, 2011 at 2:38 pm #

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

  26. Luca Manassero 28. Dec, 2011 at 2:52 pm #

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

  27. LuckyP 29. Dec, 2011 at 8:10 pm #

    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 28. Oct, 2013 at 5:21 pm #

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

  28. Loguis 31. Dec, 2011 at 3:48 am #

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

  29. Gerry 06. Jan, 2012 at 3:39 pm #

    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.

  30. CTTan 12. Jan, 2012 at 1:30 am #

    Very good sample. Well done and keep it up!

  31. Ed 16. Jan, 2012 at 1:46 am #

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

  32. Anonymous 30. Jan, 2012 at 6:37 am #

    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..??

  33. Liam amster 05. Feb, 2012 at 2:27 am #

    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 :)

  34. Nauman 02. Mar, 2012 at 4:32 am #

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

  35. Nauman 03. Mar, 2012 at 1:07 am #

    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

  36. Henry Lee 13. Mar, 2012 at 8:09 pm #

    Awesome!Thanks a lot

  37. Rizwan Bashir 28. Mar, 2012 at 9:24 am #

    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

  38. besso 12. Apr, 2012 at 3:41 pm #

    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.

  39. BerlinExpat 17. Apr, 2012 at 5:26 am #

    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 12. May, 2012 at 4:23 pm #

      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.

  40. Kimberley 24. Oct, 2012 at 7:46 pm #

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

  41. Jonas Anton Östman 15. Jan, 2013 at 11:07 am #

    Thanks, excellent tutorial!

  42. jaga 06. Sep, 2013 at 11:53 pm #

    Thanks. great intro..!

  43. Geonismz 17. Sep, 2013 at 9:37 am #

    error stray ‘\342′ in program

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

  44. Kishore 28. Oct, 2013 at 5:16 pm #

    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.

  45. Jimma 13. Nov, 2013 at 9:01 pm #

    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

  46. kvvn 26. Nov, 2013 at 8:55 pm #

    works just fine

  47. Jimmy 25. Jan, 2014 at 7:16 am #

    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.

  48. Gold Iphone 5s news 25. Feb, 2014 at 12:49 am #

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

Trackbacks/Pingbacks

  1. iOS Development Tutorials | Mobile Interactions - 22. Nov, 2011

    [...] Hello World [...]

  2. Where can I learn the MVC pattern? - Quora - 07. Feb, 2012

    [...] gotten lots of traction in the web app world, it is equally usable for desktop or mobile apps, e.g. http://mobileorchard.com/ios-dev…This answer .Please specify the necessary improvements.CancelFlag AnswerUpvoteDownvote • Repost [...]

  3. 14 Online Resources to Learn iOS Development - 16. Feb, 2012

    [...] Mobile Orchard’s Hello World- We had to include at least one Hello World tutorial for sentimental reasons [...]

  4. IPhone Programming | - 21. May, 2012

    [...] Go ahead and make this. [...]

  5. iOS App Tutorial Attempts | techdeveloperwannabe - 14. Feb, 2013

    [...] second attempt was Mobile Orchard:  iOS Development Tutorial Series:  Hello World.  These instructions were easier to follow and had many screenshots.  The point of this app was [...]

Leave a Reply

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