Create your first Hello World iOS Application with this great tutorial.

UPDATE:
There is a newer version of this tutorial aimed at creating your first iOS Application with iOS 7 – Check it out: iOS 7: Hello World Tutorial

I’ve recently taken it upon myself to get into iOS development. As the owner of both an iPhone and an iPad I use iOS on a daily basis and as that’s sparked an interest for me to start developing for the devices as well, just as using the internet made me want to build websites. So after finally getting my hands on a MacBook Pro (lovely machine that it is), I’ve been able to delve into Xcode and start creating.

If you need to learn the basics of Objective-C, We have a great Beginners Guide to Objective-C Tutorial, check it out.

As a web developer of a couple of years experience and having spent 4 years at University learning to program in things like C, C++ and Delphi I have enough of an understanding of basic programming and development environments so at least I have a good base to work from when it comes to learning to develop for iOS. Also as someone who is going to be following a lot of tutorials and reading books aplenty over the next few months I thought it would be good to document my progress and also try and write some tutorials from my perspective as a newbie iOS developer.

Diving in at the shallow end

Now there’s probably a good reason why you don’t see many complete amateurs write tutorials but what the hell, I like to write and I want to keep writing in different styles so here goes on my first ever tutorial. Hopefully for those who are new to iOS development it’ll provide a helpful start and for those already experienced in iOS development I’m hoping I don’t make any complete howlers and make an ass of myself (I do enough of that in person let alone in writing).

A cliché start

This tutorial does make a couple of assumptions (as any good tutorial does – look at me eh!), I’ll assume that you have at least a basic knowledge of programming and hopefully some Object Oriented programming as well, in as much as you know what an object is and for instance how an if statement works! Not that any of that will really be needed for this tutorial but having a basic understanding of OO languages will help in the long run. The language iOS uses is Objective-C, which is a superset of the C language (meaning you can use any valid C syntax and it will also be valid in Objective-C) with the addition of object orientation. Objective-C is a very lightweight language which comes in very handy as it’s being used with the limited resources iOS devices have to offer.

If you’re new to Objective-C it would be good to have a quick flick through some of the Objective-C documentation available from Apple (The Objective-C primer and The Objective-C Programming Language), I had a read through most of them a while ago before I even picked up anything to do with iOS and it has proved extremely helpful as I now understand enough of the basic syntax and how the language processes objects etc.

So first things first, to start developing for iOS there’s some pretty standard stuff that you’ll need and should be aware of. iOS development is done using 2 main programs, Xcode and the Interface Builder (there is also the iOS simulator, which is used to test your apps at first), all of which run solely on Intel based Macs. So unfortunately if you’re a PC and not a Mac you’re a bit stuck, sorry. Assuming you do have a Mac, the next thing you’ll need is to sign up as an iOS developer in order to download these programs. To do this you need to go to developer.apple.com/devcenter/ios/ and follow the register link in the top right corner. Registering gives you access to download Xcode and the iOS SDK which includes Interface Builder and the iOS simulator.

note:If you’re starting out you will inevitably be signing up to the developer program for free like I have. However this only allows you to test out your apps in the simulator, in order to run them on a real device you need to sign up to the paid membership which allows you to use devices for development and can in some situations allow you to get hold of the newest releases of iOS updates to develop on. The paid for program starts at $99 per year and there is also an enterprise version for companies which is $299.

OK, now you’re all signed up and you’ve downloaded Xcode and the iOS SDK you should be ready to start writing you’re first program. Hang on a second though, as I’ve recently read a fair amount and watched a ton of video on the subject of Hello, World! apps you don’t just go rushing head-first into the coding part do you! I’m meant to be doing this properly so lets do so shall we.

The developing environment

Firstly let’s have a look at those programs you’ll be using to develop for iOS, starting with Xcode, so go ahead and open the xcode application (easiest way to do so is to use spotlight and type xcode and run the application from there, or you can find xcode in /Developer/Applications/). When it’s loaded you should see a screen like figure 1 shows.

xcode screen 1

This is the opening splash screen for Xcode which gives you the option to start a new project or open an existing project (with a list of the recently opened projects on the right hand side). So I think the obvious choice to go for is “Start a new Xcode project”, click that and you’re brought to is shown in figure 2.

xcode screen 2

The next screen gives you a whole choice of different projects you can create, what Xcode does is set up the basic parts of the projects for you and allows you to get straight in to the important stuff, handy eh! If you click around the menu’s you can see what the different projects are and there’s some short descriptive text in the bottom window explaining the selected project type. If you’re used to using iOS devices you should be able to recognise a few of those already. For now though the one we want to select is the “View based application”, one thing to make sure is that the product drop down (located above the description) is set to iPhone, with that done select View based application and click choose. This will bring up the usual save dialog, choose a name for your project, Hello World is rather appropriate, and save it in a directory you’re happy with (I’ve set up a developer directory for all of my projects to go into).

Once you’ve chosen a name for your project the next screen you’re brought to is shown in figure 3.

xcode screen 3

In Xcode’s main window the top section shows the files which are available in your current selection from the Groups & files pane on the left hand side and the bottom section shows the contents of that file. In the Groups & files pane you can see all of the files used in your app, the screenshot in figure 3 shows all of the folders expanded to show the files in each one, although we’re not going to be looking at many of the files in this simple app I’ll quickly run through what you can see in the Groups & Files pane:

  • Classes: this is where most of the code for the app is written as Objective-C is based around classes and this is the classes folder (simple).
  • Other sources: contains files that aren’t Objective-C classes, there are 2 files there currently, the .pch file (pch stands for precompiled header) is created by Xcode and won’t need any editing and the main.m file, which contains the main() function of the app (again this won’t usually need editing).
  • Resources: is where well, resources belong, these are non-code files such as the app icon, audio files, image files. This folder also contains the nib files (.xib – they used to be .nib hence the name) which is the information for the Interface builder (coming up) and the .plist file which contains the property list of the app.
  • Frameworks: this folder contains all the libraries which the app has access to (libraries can contain class declarations as well as image and audio files) you will normally see at least one of the default libraries included in every project (have a look at either of the .h files in the classes folder and see if you can find the UIKit framework included).
  • Products: is where the application itself is stored – at the moment as we haven’t compiled the Hello World app yet you will see the Hello World.app file but listed in red which means Xcode can’t find the file.

Interface builder

So let’s move on now and take a look at the Interface builder. To do this we will need to open up a file to be edited in there, if you remember from earlier these are the nib files which can be found in the Resources folder, the one we want to select is the Hello_WorldViewController.xib. Once you’ve opened that up you should see something figure 4.

xcode screen 4

Starting from left to right I’ll go through the 4 windows you can see, the left most window is the nib file’s main window where you can see what’s contained within the nib file. There are 3 files there at the moment; the File’s owner will always be the first file in the main window as it is the object that represents this particular nib file, there’s much more to it than that but for now you just need to know that it’s an important file. The First responder is next in the list, this represents the object with which the user is currently interacting, the first responder will be important when writing more complex apps later on. The next file and any other files in the main window will represent objects that will be created when the nib file loads, for now the only other file there is the view which represents an instance of the UIView class, this object instance of UIView is what the user will be able to see and interact with, some apps can have more than one view however in this simple Hello, World! app we’ll only need the one.

The next window shows the view itself, this blank grey screen is what the user will see if the app were to be run in it’s present state. Finally the library is the last window on the right, this is where you can find all of the default objects that you can display in your view provided for you by the Interface builder.

The iOS simulator

Now for the final of the three programs that you’ll be using to build iOS apps, the iOS simulator. The easiest way to open the iOS simulator is by going back to Xcode and pressing build and run, but before you run off and press the shiny green button, go and have a look at the dropdown box in the top left corner of Xcode (figure 5), this is where you can find the settings for how the app will be opened when you click on build and run. Drop the box down and just make sure that the simulator is set to Hello World – iPhone, instead of iPad, we are creating an iPhone app after all (why Xcode doesn’t automatically set this to iPhone when you choose to create an iPhone app I don’t know, seems to be clever enough to do everything else).

xcode screen 5

Anyway, now you’ve set that to iPhone go ahead and click on build and run and what you should see is in figure 6.

xcode Screen 6

Almost finished

So there you go, technically that’s your first ever iPhone app, bit boring isn’t it. It is however missing something that you find in all good Hello, World! programs, the “Hello, World!” bit. Having read a few different tutorials already there are a few different ways this can be done, I’m going to opt for the simplest one and that’s by using interface builder instead of writing code – although this might be the simplest way to do it, it’s going to be the way that you will come to build apps, there’s no point in writing three lines of code to put some text on the screen if you can just use drag and drop in a GUI. The next step then is to close the iOS simulator – you can do this by closing the application itself or by going back to Xcode and pressing the big red button which stops the app from running. Now bring up the Interface builder again by double clicking on the Hello_WorldViewController.xib.

We’re going to do this the easiest way possible so go to the library pane and scroll down until you find the label object – there’s also a search box at the bottom of the library pane which will live search through the list of available objects, the one you want is shown highlighted in figure 7.

Xcode screen

Click and hold on that icon then drag it to the view panel, before you drop it try moving it around the view screen especially towards the edges as you will see blue guidelines appear which are there to help with positioning objects in the view. Now you can drop the label wherever you like in the view, next thing is to make it say something a little better than “label”, what ever could that be, well I’ll stick with convention and say it should be “Hello, World!” to change the text in the label you can double click on the label which will highlight the text and allow you to edit it.

When that’s changed to “Hello, World!” or whatever you decided to put, press Cmd+s to save the nib file (or go to File > Save, old school but still works), then go back to Xcode and click on Build and run and hey presto there’s your first ever iPhone app that says something to your user (figure 8).

xcode

So there you have it, you’ve just managed to compile your first ever iPhone app (well second really but still), not too hard was it! Hopefully this won’t be where you stop though, I’m sure you’ve seen what’s possible to build on the iPhone and as much as I’m sure everyone would like to go out there and write a Cut the Rope or Tiny Wings app, there has to be a starting point and hopefully this has been helpful to you.

Thanks for reading

So that’s it from me for now, I’m hoping to get my head back into iOS dev now quite heavily and maybe come back in the not too distant future with a couple more tutorials as I start learning more exciting stuff on iOS.

Enjoyed this post?

Subscribe to our RSS Feed or Follow us on twitter to keep up to date with the latest from iOS-Blog. Remember, Sharing is caring so please click one of the following options:

Tags: , , ,