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!
Thanks dude! Great work! Keep up!
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.
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.
It would be nice if you would describe how to test on the iPhone/iPod itself – before submitting to Apple.
you have to sign up to be a dev at appl and pay about 100 bucks per year
Thanks…..i find many useful info. while implementing….thanks a lot…
THANKS!
Both very instructive and easy to follow.
And it works!
GREAT:-)
Great, easy to understand starting point, thanks!
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.
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.
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..
Thank you guy, that’s very nice.
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!
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.
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© 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.
thanks a lot …
u r superb
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?
Thanks a lot Derek.
You made my day…..
THANKS…..
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.
Thanks. Very informative. Easy transition when you already know OOP.
Thanks a lot!
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.
that’s great!
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!
Thanks, was looking for that example – message passing instead of dot notation
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.
yeah! This could help newbies like me, if the author add this step in the tutorial.
Thank you man!
Great Job!
NIce one i like it
You might have mentioned the .h file needs to be saved before you can see the actions in the interface builder.
Very good (and simple!) tutorial. Thank you!!
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
Thank you for this article, it was really helpfull!
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.
Very good sample. Well done and keep it up!
cool, thanks. I’m just a 14 year old kid that can’t code, and i managed to follow your instructions easily enough! Thanks
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..??
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
Could not find Resourse folder as in option 4 using xcode 4.3
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
Awesome!Thanks a lot
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
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.
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
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.
Great intro. Thank you for the exact mouse clicks necessary with interface builder and the connector portion of this.
Thanks, excellent tutorial!