How To Make iPhone Apps – An XCode 5 Tutorial For Beginners

Welcome to part 4 of my series on How To Make iPhone Apps with no programming experience – where we’ll turn even the non-programmer into an iOS developer! Here’s the article index for the entire series in case you missed it.

This is an XCode tutorial for beginners so we’ll be going through where to download XCode 5 and introduce you to the main parts of the development environment. By the end of this article, you’ll have a basic understanding of how to navigate the development environment and how to create your first XCode project.

Updated Sept 24, 2013: This article was updated for XCode 5. If you’re on XCode 4, everything in this guide still applies even though the look and feel may be different from XCode 5.

1. Where Can You Download XCode?

The easiest way to get XCode is through the Mac App Store. Click the link to go to the listing.

You can also download it manually if you don’t have the Mac App Store. Just visit the Apple Developer page for XCode.

2. Demystifying The XCode Interface

The diagram below is from the Apple Documentation for XCode. If your interface looks different, make sure you have XCode 5 and not an earlier version.

XCode 5 User Interface

The reason this is a great diagram is because it lets me refer to these different sections of the interface and you can refer back to this diagram to see what I’m talking about!

As you can see from the diagram, there are 4 major areas: the Navigator, Editor, Debug Area and Utility Area.

Keep in mind that you can adjust the size of each of those panes by hovering your cursor over the boundaries of each area and dragging.

You can also show and hide the various areas as needed via the “View” buttons in the upper right hand corner:
XCode View Toggle

This can be helpful, for example, when you’re writing code and you don’t need the debugger area or the utility area. Then you can use the View buttons to hide those 2 panes to give your editor more visible space.

Alright, let’s go through the Navigator area now!

3. The Navigator Area

In this pane, there are a bunch of different navigators that you can switch between using the Navigator selector bar (refer to diagram). The three navigators that you will use a lot are the Project, Search and Issue navigators.

Project Navigator
This is where you’ll see all the files associated with your project.

XCode 5 Project Navigator

Within the project navigator, you can also create “Groups” to organize your files in. The gotcha is that when you create a Group in the project navigator (by right clicking and choose Create Group), it doesn’t actually create a folder in the file system; it will only exist in your XCode project so while creating Groups here will organize your file in XCode, it won’t organize the actual files sitting on your hard drive. That’s why I prefer to create the actual directories on my hard drive, organize the files and then drag them back into the XCode project.

You can also right click on the project navigator and create new files or add existing files to your project. Or you can drag folders or files from your computer directly onto the project navigator and will popup a dialog asking how you want to add the files.

If you click on a file in the project navigator, it will display the file’s contents in the Editor area. If you double click a file instead, it will open a new window which can be useful when you have dual monitors.

The root node of the project navigator is your XCode project file (indicated by the blue icon). If you click that, the project properties will open in the editor area.

XCode Project Settings

Search Navigator

With the search navigator tab, you can easily look for pieces of text in your project.

XCode Search Navigator

You’ll find yourself using this a lot when you’re looking for a specific property, method or variable and you can’t remember exactly where it is.

Issue Navigator

The issue navigator shows you all the problems with your app.

XCode Issue Navigator

When you build and compile your application to test, if there are some problems where XCode can’t build your app, it will halt and show you the red colored errors in the issue navigator. You can click on an error and it will show you in the editor area which file and line it’s failing at.

It will also show yellow Warnings in the issue navigator. Although resolving warnings is not necessary for building your app, they’re warnings that there may be potential issues.

4. The Editor Area

The editor area is where we’ll probably be spending most of our time! This is where all the coding happens.

XCode Editor Area

As mentioned in the project navigator section, when you click a file there, it will open the contents in this editor area for you to edit the contents. However, that’s not the only way to navigate to different code files.

Navigation within the editor area

There are these little back and forward arrows in the upper left corner of the editor area. Unfortunately these arrows aren’t labeled in the trusty XCode interface diagram at the beginning of this article so I’ll call them “XCode back and forward arrows” and show you an image of them here:

XCode Editor Area Back and Forward Arrows

These guys are actually pretty useful. They act like the back and forward buttons on your browser and they let you navigate to previously viewed files.

Another way to quickly get to the file you need is to use the Jump Bar (see diagram). The jump bar allows you to quickly drill down through your groups and find the file you need. It looks like a breadcrumb at the top of the editor area but when you click a segment of it, it will open up a menu with other groups in that hierarchy level:

XCode Editor Area Jump Bar

If you click the tail segment of the jump bar (which is the current file you’re looking at), it will open up a menu showing you all the methods in the file which is not only useful to jump to another area within the file, but it will show you at a glance what methods are available in this file.

XCode Editor Area Jump Bar Method Menu

That does it for navigation within the editor area however, it still has some tricks up its sleeve.

Three types of editor views

The editor area has three different views and you can toggle between them with the set of buttons in the upper right hand corner:

XCode Editor Area View Buttons

The left most button is for the single editor pane view which is good for the small laptop screen if I don’t have an external monitor.

The middle button is the Assistant Editor view which will show you the accompanying file to the file you’re currently looking at. It looks like a two pane view. For example, if you’re looking at the implementation file for a class, the right pane will show you the header file for that class. Each pane also has independent jump bars, so you can also use that to change what file each pane is displaying.

XCode 5 Assistent Editor View

The right most button is the Version Editor view where you can compare two files. Personally, I haven’t found myself using this view so I can’t speak too much about it. Here’s the section for it in the Apple Documentation.

Interface Builder View
So far we’ve been talking about editing code files and writing code, however XCode has interface builder integrated in and when you’re viewing the Storyboard or a XIB file, the editor area will turn into a visual designer.

XCode 5 Editor Area XIB Interface Builder

We’ll be actually using this visual designer view in the next part of the series so we’ll talk about the various elements of it then.

Finding and replacing within the file

Just hit Command-F to bring up a search popup in the upper right corner that will look for whatever you type in within the current file. This is also a great way to jump to various areas of your file. You can also use this popup to do replacements within your file.

Jumping to definitions

If you’re looking at some code and you see a classname that you want to jump to the definition of, you can hold down Command and click the classname to quickly jump to that file.

The breakpoint gutter

The breakpoint gutter (see diagram at top) is where you can click to set breakpoints at certain lines of code. When you set a breakpoint, you’ll see a blue indicator appear. To turn off a breakpoint, just click the blue indicator again and it will dim out.

XCode 5 Editor Area Breakpoint

If you want to completely remove the breakpoint, you can click and drag the blue indicator off of the breakpoint gutter.

To view a list of all the breakpoints that are set in your project, there’s a “breakpoint navigator” tab in the Navigator area.

There’s also a global toggle to turn breakpoints on or off at the top of the editor area which we’ll see when we review the toolbar.

Don’t worry if you can’t remember everything right now. We’ll be working with all of these areas and when you start coding, this will all become second nature to you after a week.

5. The Utility Area

The XCode utility area is comprised of two panes: the inspector pane and the library pane.

XCode Utility Area

The Inspector pane will give you details about the file you’ve got highlighted in your project navigator. However, when you’re looking at a XIB file, the inspector pane will show you the different attributes that you can modify for a selected element.

XCode XIB Inspector Pane

The library pane won’t be very useful either until you’re looking at a XIB file. When you’re using the Interface Builder part of XCode, you can drag UI elements from the library pane onto the editor area to add that element to your user interface.

If I’m editing code files, I’ll usually hide the whole Utility Area to give my editor more space because I don’t need the inspector pane or the library pane.

6. The Debug Area

The debug area will show you console output and the state of various variables when you run your application.

XCode Debug Area

You’ll be using this a lot while debugging your code and trying to figure out why things aren’t working out the way you expect them to! I’ll need to write a separate XCode debugger tutorial because there’s too much to mention here.

7. The Toolbar

We’ve talked about some of the buttons on this tool bar already. Let’s start from the left.

XCode Toolbar

The left-most button is the run button. This will build and run your application and launch your app in the iOS Simulator. The button beside it will stop the execution of your application and return you to XCode.

If you click and hold down the Run button, you’ll get more options to run your app:

XCode Run Options

Test to run your unit tests if you have them in your project.

Profile to measure various aspects of your application such as performance, memory usage and more.

Analyze to let XCode analyze your code and check for potential leaks or bad practices.

You can read more about these actions in the Apple iOS Documentation.

The dropdown beside the Stop button indicates which build target you want to run (in most cases, you’ll have only 1) and you can also choose if you want to run it under the iPhone or iPad simulators (or different version if you have them installed). The selection “iOS device” is to run your app on your device if you have it plugged in and properly provisioned (which needs a whole tutorial in itself!).

XCode Run Target

And finally in the far right side of the toolbar, we have the editor view buttons, the buttons to toggle various XCode panels on or off and the Organizer button.

8. The XCode Organizer

The Organizer is located in the menu entry Window -> Organizer (or keyboard shortcut ⌘ ⇧ 2) and it brings up a separate window called the Organizer. There are several different purposes of the organizer and we’ll highlight them below.

For Xcode 4 users: The organizer button is located on the far right of the Xcode toolbar rather than a menu option.

The XCode Organizer Window

Devices
There are a lot of things you can do in the devices tab that I can’t list them all. However, the main uses are to manage your provisioning profiles on your system AND on various devices. We haven’t talked about provisioning profiles yet, but they’re important for deploying your app on actual physical iOS devices. I’ll need to create a separate tutorial for that.

You can look at crash log from devices, enable development use for various connected devices and more.

Check the Apple Documentation for more features of the devices tab.

Repositories
This only applies to XCode 4.
In XCode 5, Repositories are now managed in XCode->Preferences->Accounts

In the repositories tab, you’ll be able to manage local and remote repos that you have set up for your projects.

Projects
In the projects tab, you can see a list of projects you’ve opened before so you can quickly open them again and you’ll be able to manage derived data and snapshots of your projects as well.

Archives
In the archives tab, you can manage your archives for various projects. You would archive your app when you want to deploy it to the store or distribute it in some other manner.

Documentation
This is only for XCode 4.
In XCode 5, Repositories are now managed in XCode->Preferences->Downloads

You can view various iOS SDK documentation here.

9. The iOS Simulator

XCode 5 comes bundled with a wonderful iOS Simulator for you to test your application on. In fact, you can use the iOS simulator for most of your development and then find a device to test on when you’re nearly done.

The XCode iOS Simulator

You can actually do a lot with the simulator including:
-Device rotation
-Simulating various GPS coordinates
-Device shake
-Simulating low memory scenarios

If you want to test various network or low bandwidth conditions, there’s a tool called Charles Proxy that works brilliantly. I’ve written a Charles Proxy Tutorial that you can read.

Let’s Summarize

In this part of the series, I’ve acquainted you to the various areas of XCode.

Now you understand:
-The Navigator, Editor, Utility, Debug and Toolbar Areas of XCode!
-The various code editing features of the editor area!
-The XCode organizer!
-The iOS Simulator!

What’s Next?

We’re going to put what we’ve learned into practice in the next part of the tutorial series. We’ll build a simple demo app that will use the XCode areas and features that we talked about today as well as the Interface Builder bits.

We’ll also implement the MVC pattern with a real example so you can solidify your understanding of what was discussed in this tutorial.

Now you have all the basic ingredients to start iOS app development. Get ready to start making some iOS applications!

Go To Part 5

Let’s improve this article together!

I want to make this series and this article in particular the best and easiest to understand resource for beginners to learn how to develop iPhone apps. If you’ve got any feedback, good or bad, please let me know via the comments below so I can update parts which are confusing, add more examples and to continue updating this resource.

And if you’ve enjoyed this article or you know someone who might be interested in learning how to build iOS apps, please share this series with them. It’s targeted at the non-programmer (sort of like an iPhone application development for dummies book) so anyone you know will be able to pick this up and progress towards developing iPhone apps!


Feedback and Questions
  • Pingback: How To Make iPhone Apps – MVC, One Pattern To Rule Them All | Code With Chris

  • Nathaniel

    This is absolutely fantastic write-up! Such great detail!! Thanks Mr. Chris for this :) All I need now is a mac of my own instead of a VM!

  • Reshma

    Followed all your parts. Eagerly waiting for part 5.
    Thank you again. Is there a date for part 5 release?

  • Narendra

    Excellent

  • http://fakhrulzakry.com fakhrulzakry

    thank you so much chris ! i hope you can help how to use the storyboard and the xib. im very confusing about both of it. and hope you can teach how to pass value from first view controller to next view controller if using storyboard. Thank you…. you have a great tutorial!

  • Lorne

    Great tutorial so far. I love how it starts with the basics, and I’m looking forward to the next part. :) Great job!

  • Pingback: Creating The Demo App With XCode And Interface Builder – How To Make iPhone Apps

  • Aster Veigas

    Amazing article the effort you put in to make this article will definitely help a lot of people.Keep it up!!

  • http://www.soky.weebly.com Yahya Al-shaar

    Thanks very much for your effort

  • Nils Stritzel

    You made my day!
    “What you might not realize is that you can click the small magnifying glass icon to show additional search options!”
    I had a hard time finding this ;)

    • Chris Ching

      Glad i could help Nils and thanks for reading!

  • Melody

    I tried to download XCode for my MAC and it says that I need MAC OS X version 10.7.4 or later is required. I am very new to MAC and don’t know what to do. Can I upgrade my MAC to new the latest version and where can I upgrade?

    • Chris Ching

      Hey Melody, which version of OSX do you have? Do you have the Mac App Store? If so, you can upgrade to the latest OSX version through there but i think it costs $20 to upgrade. Hope that helps!

  • karthikeyan

    Wonderful…

    • Chris Ching

      Thanks for reading Karthi!

  • Pingback: XCode Tutorial Practice 1: Hello World iPhone App

  • lcondado

    thanks

  • Harikumar

    Its really very useful. Well written @ Chris.

    • Chris Ching

      Thanks for reading! :)

  • Chinthaka De Silva

    Great article . Most wanted for beginners explained nicely . Thanks

    • Chris Ching

      Thanks for reading!

  • http://jiniom.com siva

    Thanks for article ..

    • Chris Ching

      Thanks for reading Siva!

      • Linda

        do you tutor as well? please email me if you do.. i am looking for a tutor to help me understand app developing more in depth.. Thank you

        • Chris Ching

          Hello Linda, at this time i’m not doing any 1-on-1 tutoring, however, i am working on a paid course where members will have some more personalized help. Let me know if you’d like me to contact you when that’s ready!

  • gopinath

    hey chris i am using windows 7, do you know any xcode tool for windows 7 so that i can do all my coding and practise in windows7.
    thanks in advance dude

    • Chris Ching

      Hello gopinath, unfortunately I’m not aware of this! Sorry i can’t be of more help.

  • Basavakumar

    nice article. easily understanding ios 7

    • Chris Ching

      Thanks for reading, Basavakumar!

  • Basavakumar

    nice article

  • Rose

    Chris,
    Thank you for the Tutorial. I am totally new to the mobile app development environment. I am on Microsoft Window platform. Do I have to have Mac in order to develop the iPhone and iPad apps?

    • Chris Ching

      Hello Rose, unfortunately you do, but some people have had success using a virtualization program like vmware to run OSX on their PC and have been able to install Xcode and build iOS apps. The cheapest mac you can get is probably a used Mac Mini for $300 or so. In order to run Xcode 5, you’ll need Mountain Lion (OSX 10.8). There are also ways to code up the app in C# or Javascript/HTML and cross compile it into iOS apps, but you won’t be learning Objective-C and Xcode in that case :) Just Google that if you’re interested! Hope that helps!

  • ANAND

    very usefull

    • Chris Ching

      Thanks for reading, Anand!

      • Anand

        Any changes for X-Code 5 storyboard???

        • Chris Ching

          Basics of storyboards still work the same way!

  • rashu

    Hi Chris

    Thank you for this wonderful website…
    i am new to programming and it helped me a lot…
    I was wondering if i could get some more information like dealing with tables and images…. so that i could become a full fledged ios programmer….
    Are there any books on xcode 5 in the market or any links (for free!!!) which could help me …
    Thanks!!!!!!

    • Chris Ching

      Hey Rashu, thanks for your comment. There are actually a lot of UITableView tutorials out there! I was in the process of writing one but haven’t done so yet.
      There are some new Xcode5/iOS7 digital books over at Ray Wenderlich’s site that you can purchase.
      For free, you can search for “UITableView tutorial” or “UIImageView tutorial” and there should be plenty of resources!
      Hope that helps!
      Chris

  • Joe A

    Hi Chris,
    I’m very new to Mac and app development. I’m not very savvy at all when it comes to code but this article is amazing. The clarity and detail is perfect. Thank you.

    • Chris Ching

      Hey Joe,

      Thank you for your support and comment! I love hearing that readers are learning the material!

  • Aparna

    Excellent Chris!!! Explanation is too good!!

    • Chris Ching

      Thanks for reading, Aparna! :)

  • http://codewithchris.com/xcode-tutorial/ Nejc Perme

    How can I programming. I don’t know the commands

    • Chris Ching

      Hey Nejc, I want to introduce the syntax (commands) little by little. Is that a good way for you to learn, in your opinion? Instead of trying to learn all the commands at once before doing any practice. I appreciate your feedback! Thanks

  • David

    Motivating Tutorial.
    Thanks for making the App development not that intimidating after all.

    • Chris Ching

      Thanks David. Please let me know if you have any questions!

  • jefriiyer s

    thanks dude.. this is very interesting….

    • http://codewithchris.com/ Chris Ching

      Thanks for reading!

  • Franz Margareth Suela Cruz

    wow thank you for the tutorial :D im glad that i found complete tutorial for xcode ^_^

    • http://codewithchris.com/ Chris Ching

      Glad you enjoyed it Franz :) Thanks for taking the time to leave a comment!

  • Suriya Kumar

    Hi! Do you have the tutorials for the various app templates such as single view or master detail app version??

    • http://codewithchris.com/ Chris Ching

      Hey Suriya, not at the moment, but thanks for that suggestion! I’ll follow up with you if i do it in the future!

  • sankar ram

    Hi chris It is nice to see your tutorial I have tried all the option of organizer that you have given here, I Did’t know how to take a Screenshot of Xcode editor please help me in this!

    • http://codewithchris.com/ Chris Ching

      Hello, you’re trying to take a screenshot of your screen? You can press command+shift+3 and a screenshot will be taken. It’ll be placed on your desktop

      • sankar ram

        hai chris thanks for your reply I tried it ! ya it create a snapshot ,now I want to creeate a app for streaming a Audio using RTSP from device and it recieved at the client end like Mac pc where we developing an app you have any tutorial for this!

        • http://codewithchris.com/ Chris Ching

          Sorry i don’t but will let you know in the future if i do!

  • BS

    Hi Chris, thank you for sharing this professional tutorial.

    Nearby, I have found your tutorial, when I was looking for a hint to where the nice popup for filtering objects by sections (formerly placed nearby the objects tab in Xcode 4) is gone in Xcode 5?

    Does anyone know?

    • http://codewithchris.com/ Chris Ching

      Hmm.. i think they might’ve removed it in 5!

  • Ricky Starling

    hi Chris,
    I’m trying to create a button that links one page to another on xcode 5. Basically like a normal weblink but for xcode. I am completely new to this…any help is appreciated.

  • Nishant

    Hi Chris,
    I want to learn how to develop iphone apps. i am fresher in this, so can you give me some more information about xcode. how to create a design in xcode.
    Thanks

    • http://codewithchris.com/ Chris Ching

      Hey Nishant, please click “Start Here” from the top of the site!

  • Jia Shi

    Hi Chris, I wonder how can i create a new method under a class in x-code 5? Can u help me?

  • Nirali

    Nirali
    Thank u really very helpful tutorial

  • Nirali

    Really Very interesting .. Thanks a lot for all this materials….

    • http://codewithchris.com/ Chris Ching

      Thanks for reading and sharing Nirali!

  • Riz

    Glad i came across this looking forward to more :)

    • http://codewithchris.com/ Chris Ching

      Thanks Riz! Let me know if you have any questions!

  • Andy C.

    Just found your tutorial today, enjoying so far. Thanks.

    • http://codewithchris.com/ Chris Ching

      Thanks for reading my tutorials Andy!

  • Lalitha Syamaleswari

    good one… :)

  • marrwannabil12

    can i use the Xcode in windows 7

    • http://codewithchris.com/ Chris Ching

      Hello! Unfortunately not :(
      You’ll need a Mac, however, some PC users have emulated OSX using VMWare or you can also use a service called macincloud to rent a mac computer on the cloud for development.

  • Abood Imtair

    really good thanks chris keep it up bro (Y)

  • Zion Quest

    Very informative. Thank you.

  • Pranav Suby

    This was a great guide! One thing though, when I click the run button, it only shows the bottom of the screen. Do you think you could help?

  • John

    Just one little grammatical change under xCode Organizer -> Devices section. You said “….devices tab that I can list them all” and I think you mean “….devices tab that I can’t list them all”. Otherwise I think the tutorial is fantastic thus far!! :-)

    • http://codewithchris.com/ Chris Ching

      Thanks for catching that! Fixed it!
      A couple of letters changed the whole meaning :)

  • Pranav Suby

    Good tutorial, but for some reason, I can’t see the top of the screen when I try the demo. Do you know why?

    • http://codewithchris.com/ Chris Ching

      Hey Pranav,

      Maybe the simulator is too large? Try a different zoom level. You can see how to change the zoom level here: http://codewithchris.com/xcode-errors/#simulator under “My Simulator Looks Different”

  • Lokendra Surya

    hi Chris,
    I am trying to implement facebook button on xcode. so when i run the programme with initially state logged out perfectly, but when it is already logged in it creates problems. How can i make sure it works perfectaly??

  • EconomicExile

    Well written and easy to understand (so far) for a novice, good job, thanks

  • SAM LUX

    Hi chris, can you help me please i get the following issue with calling my method :

    My Code of TestAppViewController.m :

    #import “TestAppViewController.h”

    @interface TestAppViewController ()

    @end

    @implementation TestAppViewController

    - (void)viewDidLoad

    {

    [super viewDidLoad];

    // Do any additional setup after loading the view, typically from a nib.

    }

    - (void)didReceiveMemoryWarning

    {

    [super didReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

    }

    - (IBAction)btnBerechne:(id)sender {

    double zahl1= [_txtLabel1.text doubleValue];

    double zahl2= [_txtLabel3.text doubleValue];

    NSString *zeichen=_txtLabel2.text;

    //HERE IS THE MISTAKE IT SAYS: Use of undeclared identifier ‘plusA’
    double ergebnis=[plusA:zahl1 plusB:zahl2];

    NSString *ergebnisString= [[NSString alloc]initWithFormat:@”%.2f”,ergebnis];

    _txtLabel4.text=ergebnisString;

    }

    //Alle Felder leeren

    - (IBAction)btnLeere:(id)sender {

    _txtLabel1.text=@””;

    _txtLabel2.text=@””;

    _txtLabel3.text=@””;

    _txtLabel4.text=@””;

    }

    //Tastatur ausblenden bei return

    -(IBAction)removeKeyboard

    {

    [self.txtLabel1 resignFirstResponder];

    [self.txtLabel2 resignFirstResponder];

    [self.txtLabel3 resignFirstResponder];

    [self.txtLabel4 resignFirstResponder];

    }

    -(double)plusA:(double)a plusB:(double)b{

    return a+b;

    }

    -(double)minusA:(double)a minusB:(double)b{

    return a+b;

    }

    -(double)durchA:(double)a durchB:(double)b{

    return a+b;

    }

    -(double)malA:(double)a malB:(double)b{

    return a+b;

    }

    Lokendra Surya

    • http://codewithchris.com/ Chris Ching

      Hello!

      You were really close! Since that method is an instance method of this class, you need to reference “self”. So it’ll be like this:

      double ergebnis = [self plusA:zahl1 plusB:zahl2];

      You’re calling the plusA:plusB method of “self” (as in THIS class)

  • Jeffry Tambari

    Nice article

  • http://www.auminfotech.co.in/ Aum InfoTech

    Nice Guide…

  • http://www.auminfotech.co.in/ Aum InfoTech

    Chirs, Do you have PDF of these files. Please mail me auminfotechin@gmail.com

  • raymond trott

    Hi Chris, you have been asked this many times already, but do you have a quick resorce guide pdf that i can reference to? download and have easy access?

  • bhavdip bambhroliya

    Hello chris.. first i would like to thank you for this your job.. and i have starting my profession in ios by your tutorial. i like it.. but i want to see someone simple online apps by using parse database and i do not know that how to create parse database. so can you help me?

x
Private Tutorials, Source Code and Resources
  • My biggest mistake when learning iPhone development

  • The 9 steps of building any app

  • The best way for beginners to learn iPhone programming

Plus, you'll get exclusive iOS tutorials each week. Just enter your email address below and click "Get Updates"

    No spam here!