iPhone Application Development – Getting Started

Kanya Srinisavan
This entry is part 1 of 10 in the series iPhone Application Development

iPhone Application Development

Developing an iOS application has become very simple, as we have numerous tools that make the whole process of development easier. I assure you that you will be thrilled to bits when you develop an iOS application and deploy it in the Appstore.

This tutorial will help you in developing an iOS application from scratch. It will also help in understanding the Xcode IDE and will cover some of the basic concepts in iOS programming.

How to set up the development environment

On your MacBook or iMac, install Xcode from the Appstore. This setup is enough to develop and run applications in the simulator. If you want to deploy the applications that you develop in the device or distribute your application in the Apple AppsStore, register yourself with the Apple Developer program.

Now, let’s learn the basics of Xcode and iOS programming by creating a simple iOS application.

Create an Xcode Project:

1. Open Xcode and select File -> New Project

2. Select Single view application from the Xcode templates and Click ‘Next’. There are various templates available in the Xcode. Try exploring all the templates. In this tutorial we will stick to the Single View Application Template.

select a template

3. The screen below allows you to configure some of your Project Settings.

project settings

  • Product Name: the name of your application
  • Organization Name: can be your name or the name of your organisation. This name will be added in the copyright notices to each and every source file.
  • Company Identifier: a unique string that is used to create a bundle identifier. In order to make this unique, Apple recommends following reverse naming convention, e.g. com.companyname
  • Bundle Identifier: the company identifier with the product name forms the Bundle Identifier.
  • Class Prefix: the name given here will be prefixed with the name of the new classes that you create. This is done to avoid name collision between the existing classes and the custom classes created.
  • Devices: specify whether you are targeting this application for iPhone, iPad or both. Let’s select iPad for this example.
  • Use Storyboard: the conceptual representation of your application flow. Let’s not worry about this for our simple example application. Disable this option.
  • Use Automatic Reference counting: select this option. Prior to iOS 5, developers should manage memory manually. By enabling this option, memory management will be taken care of automatically.
  • Include Unit Tests: disable this option. Enabling this helps the developers in performing unit testing.

Once you have configured the above settings select ‘Next’.

4. Specify the path where you want to save your project. Enabling the option ‘ Create local git repository for this project’ will place your project under version control. In this tutorial we will disable the option. Enable this option when you are actually working on some App Store projects. Explore and try to gain expertise on version control.

set a path for saving

5. Finally, click on the ‘Create’ button.

create project

Understanding Xcode IDE

main view

The Xcode window has the following components

1. Top Tool Bar. The run button in the toolbar enables you to run/stop the application. The editor and the view button on the right side of the toolbar change the look and feel of the Xcode user interface itself. Play around to find what each and every button does.
2. Navigator view on the left displays the source files of your project.
3. Main view at the center displays the contents of the file selected in the navigator. This is the editor view where you write the code and configure your build settings.
4. Inspector view on the right gives extra details and configuration settings on what is being selected or displayed in the main view.

Select the Project in the navigator. The project details will be displayed in the Main view.

simulator blank screen

The Main View contains two sections

  • Project refers to the repository of source files, resources and data that are required to build a product
  • Target refers to the actual build/product.

Selecting either the project or the target displays its settings on the right, which can be configured if required.

Run the Project

Click on the run button in the toolbar. The target/product displayed in the left side of the toolbar will be run on the simulator/device specified in the toolbar.

Since we did not modify the code, you should be able to see a blank screen in the simulator.

simulator

Understanding the files in the project

  1. Interface file: This is where the variables and methods of any class are declared.
  2. Ends with .h extension

  3. Implementation file: Actual implementation of the methods is done here. Ends with .m extension
  4. Interface builder file: As the name implies this file helps in building the application’s user interface. Ends with .xib extension.(Xcode’s Interface Builder)
  5. Precompiled header files: These files are compiled and stored in cache. It is automatically included with every source file during compilation. Ends with .pch extension. You can include import statements of common files in the .pch file.
  6. Frameworks: Libraries required for developing an application. By default, the following libraries are added. We can include other iOS frameworks if required. We can also create our own frameworks and include them in the project.
      UIKit framework is required for rendering the UI.
      Foundation framework handles low level data types manipulation.
      Coregraphics framework – Quartz 2D functionalities.
  7. Plist: An information property list file contains configuration information for the executable.
  8. Infoplist.strings: Stores the values for a particular localization.

What is the entry point for an application?

Any C program will start with a main function and Objective C is not an exception to it as it is the superset of C.

The main function is available in the main.m file.

#import <uikit /UIKit.h>

#import "TTTAppDelegate.h"

int main(int argc, char *argv[])
{
    @autoreleasepool {
        return UIApplicationMain(argc, argv, nil, NSStringFromClass([TTTAppDelegate class]));
    }
}

autorelease pool helps in automatic memory management of the objects created in an application.

UIApplicationmain function accepts four arguments. The first two denote the number and variable list of command line arguments which can be ignored. The third argument specifies the application class for which an instance should be created. If this argument is nil, UIApplication class is taken as the default value.

The fourth argument specifies what class the app delegate instance should be. UIApplicationMain makes this instance as the delegate of the application instance (3rd argument). This means that this delegate object gets notified whenever the UIApplication instance reaches certain states like application becomes active, application enters background state, etc.

Now the UIApplicationmain will start calling some of the delegate methods. As soon as the application launches application:didFinishLaunchingWithOptions: is called which is responsible for displaying the initial view to the user.

The app is now launched and UIApplicationmain will still be running and maintaining the event loop, which will respond to the user actions as and when they occur.

AppDelegate Launch Method

As mentioned earlier, application:didFinishLaunchingWithOptions: is the first method that is called after the application launches.

It creates a UIWindow object that manages the views that are displayed in the device screen. The UIWindow object sits at the top in the view hierarchy.

It also creates a view controller object and adds it as the rootviewcontroller of the window object. It displays the viewcontrollers’s view in the device screen.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.
    self.viewController = [[TTTViewController alloc] initWithNibName:@"TTTViewController" bundle:nil];
    self.window.rootViewController = self.viewController;
    [self.window makeKeyAndVisible];
    return YES;
}

Interface Builder

Let’s play with the Interface builder.

Select the TTTViewController.xib file in the Navigator Panel.

Select the view object in the MainView. A view object will be displayed in the main view.

Click on the Attributes inspector at the top.

Check for Background color property and change it to your favourite color.

background color

Select objects library at the bottom of the inspector panel.

Drag and drop a button object inside the view.

Add some text to it by clicking inside the button.

add some text

Run your application in the simulator.

run the simulator

Now it is your time to play around and familiarize yourself with the Interface Builder

Conclusion

By now you should be able to create a static user interface. Your iOS journey has begun, and it will continue.

iPhone Application Development

iPhone Application Development – MVC and Programming Basics >>

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Dom

    Finally, iOS development is part of Sitepoint ;) can’t wait for the next post!

  • G

    Nice. Hopefully next article soon.

  • Elizabeth Meyer

    And if you don’t have a MacBook or iMac? How do you get started then?

  • Dom

    Developing for iOS have an higher starting cost than developing for PC, what you could do is get a mac Mini, for 600$ it’s a good computer. Another option would be to buy a used one at +- 200$ and update the OS.

  • ryantonner

    This post is very helpful. I have tried this but I am facing problem while running this application. Can I get some more information?

    http://www.element8me.com/

    • Kanya

      Thanks. To run the application just press the run button in the toolbar or press cmd+R in your mac keyboard. If this does not solve you problem please let me know the exact issue.

  • dagmar2000

    So Xcited to see this!

  • Sam

    Very clean and understandable

  • Anonymous

    The project dialog screenshot mixes up the values of “Organization name” and “Company identifier”: The latter should have the domain-based notation.

    • Kanya

      Yes u r right…that was by mistake..

  • Dennis

    I’ve downloaded XCode 5 to follow this tutorial but it doesn’t create .xib files. Any ideas?

    • Kanya

      xCode 5 stable version with iOS 7 got released recently. The application in this tutorial was developed in 4.6.1. I will tell you an easy way to overcome this problem.

      Create a project with an Empty Application Template. Right Click on the project in the Navigator and Click ‘Add New file’. Select ‘Objective- C Class template’ and click ‘Next’. Enter the name of ViewController and select UIViewController in the ‘Subclass of’ field. Select ‘With XIB for User Interface option and then click ‘Next’. Select the file location and click on ‘Create’.

      Change the SPTAppDelegate.h as given below
      @class SPTViewController;

      @interface SPTAppDelegate : UIResponder

      @property (strong, nonatomic) UIWindow *window;

      @property (strong, nonatomic) SPTViewController *viewController;

      @end

      Change the application:didfinishlaunching method on SPTAppDelegate.m file as given below

      #import “SPTViewController.h”

      – (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
      {

      self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

      // Override point for customization after application launch.
      self.viewController = [[SPTViewController alloc] initWithNibName:@”SPTViewController” bundle:nil];
      self.window.rootViewController = self.viewController;

      [self.window makeKeyAndVisible];
      return YES;
      }

      Now you will have your XIB created.

      From my next article..i will use XCode 5 for my sample programs. I will also use storyboards to create our UI..

  • Anonymous

    .xib files are the interface builder files that are generated when you add visual components to your project.