How to make iPhone Apps – Part 1: Xcode suite and Objective-C

By
On October 4, 2010

In this series i’m going to show you how to make iPhone/iPod-Touch applications using the iPhone SDK (Software Development Kit). During this course we are going to make many applications to illustrate basic iphone development workflows and coding techniques that are fundamental for your formation as an iPhone Developer.

Before you read:

You should know that the iPhone development can only be done in a Mac. You cannot create iPhone applications in a different operating system than Mac OS X.

You may also know that you need to register as an Apple Developer (it is free) to download the iPhone SDK. To test your application in a real iPhone you need to join the Apple Developer Program (It’s $99 the standard version and $299 the enterprise version), if not, you’ll have to settle for the iPhone simulator which is built in the SDK. It all can be done at https://developer.apple.com/devcenter/ios/program/

I’ll assume that you know how to program, no matter the language. If you come from C/C++, Java, C#, or any similar, you’ll find Objective-C (the language to make iPhone apps) easier to learn. But you have to be familiar with variables, methods, classes, Object Oriented Programming, etc. Objective-C is not better or worse, it is just different, it may look a little ugly at the beginning, but in the end you’ll see it is simpler than you thought. So don’t panic.

Xcode

Xcode is an IDE (Integrated Development Environment), like Visual Studio .NET, NetBeans or Eclipse, created by apple. It is the main application of the suite with the same name.

Here is where we’ll write the code, compile, test, debug, etc, our application.

Open up Xcode and click File->New Project. It will display a “New Project” window. In the left list navigate to iPhone OS and click Application, then in the right menu, double click on “View-Based Application”, i’m going to explain what this is later when we talk about project templates.

How to make iPhone Apps - Part 1: Xcode suite and Objective-C image

Give a name to your project, mine is going to be XcodeTest.

The main window is going to show.

How to make iPhone Apps - Part 1: Xcode suite and Objective-C image 2

In the left side of this window is a list with some folders. Each folder represents a group of files that not necessarily have to exist in the real representation of the project in finder.

How to make iPhone Apps - Part 1: Xcode suite and Objective-C image 3

When the entire project is selected you can see all the files in the right list.

How to make iPhone Apps - Part 1: Xcode suite and Objective-C image 4

If you click one of the folders you’ll have a more filtered view in the right.

How to make iPhone Apps - Part 1: Xcode suite and Objective-C image 5

Usually developers are more interested in the “Classes” and “Resources” folders.

Clicking one of the files in classes it will show the content in the editor. You’ll realize the content is code. Surprised?. This “Classes” folder is the one that you are going to add files or modify the ones that already are there in order to develop your application.

How to make iPhone Apps - Part 1: Xcode suite and Objective-C image 6

You don’t have to understand this code yet, i’m going to talk more about it later.

Interface Builder

By now you may be thinking that i forgot to explain what is in the “Resources” folder, but i didn’t. I just delayed it.

If you go to the “Resources” folder you are going to find two files that have .xib as extension.

How to make iPhone Apps - Part 1: Xcode suite and Objective-C image 7

This “.xib” files store our user interface. Double click XcodeTestViewController.xib and it will bring Interface Builder.

How to make iPhone Apps - Part 1: Xcode suite and Objective-C image 7

Interface Builder is an application that comes with the Xcode suite. It’s purpose is to make your life easier when you create graphical user interfaces.

Most of the time it shows four windows that can be closed and open independently, so it is very easy for yours to look a little different from mine. But most of the time you will use this four windows:

The View window:

How to make iPhone Apps - Part 1: Xcode suite and Objective-C image 10

Here is where you see how your interface looks like.

The library window:

How to make iPhone Apps - Part 1: Xcode suite and Objective-C image 11

Here is where all the interface elements are, you can drag and drop them in the View window.

The Inspector window:

How to make iPhone Apps - Part 1: Xcode suite and Objective-C image 12

This window allow you to modify some properties of the interface elements you have in the View Window.

And The document window:

How to make iPhone Apps - Part 1: Xcode suite and Objective-C image 9

This window shows you some objects that the view window can not show, it lets you see objects that are within the code and it also serves a bridge between your UI elements and the implementation.

And yes, you can create an interface by code in xcode but it would be quite difficult. The prefered way to do it is with interface builder.

If the library or the inspector windows are not visible for you, you can open them by clicking Tools->Library and Tools->Inspector. If can’t see the View window you can open it by double clicking the View icon in the document window. If you close the document window, then you will have to double click your “.xib” file again to open it back.

The iPhone Simulator

The iPhone simulator is where you test your app without having an actual iPhone.

To launch it you just have to build and run your app. It can be done by clicking the hammer button in the top of the xcode window4

How to make iPhone Apps - Part 1: Xcode suite and Objective-C image 13

Xcode will compile, build some files, open the simulator and launch your app.

How to make iPhone Apps - Part 1: Xcode suite and Objective-C image 14

Right now it’s just a gray square because we haven’t added anything to it yet.

If you click the home button you’ll notice that it can do most of the things that the iphone does. But there are some other things that it can’t do because it does not have the hardware.

Some of them are:

It can not use the camera.
It does not have and accelerometer.
It can’t use the compass.
It doesn’t have a gyroscope.

If your application need any of this hardware you need to test it in a real iPhone, but in some cases you can simulate a few situations like:

– Rotate left
– Rotate Right
– Shake gesture.
Memory Warning.
A call.
TV out.

All of this can be done in the Hardware menu at your toolbar.

Objective-C

Objective-C was created by Stepstone in the early 1980s and it is an object-oriented extension to the C language.

If you copy C code and paste it in an Objective-C project it will run perfectly without any problem, Objective-C is C with some stuff added.

(The following examples and explanations are pure Objective-C, they won’t be focused on the iphone development but in the language itself. In order to test the codes that are going to be given you have to go to File->New project, click on Command Line Utility and select “Foundation Tool”)

Clases

If you open the “Classes” or “Sources” folder, depending of the project you are working on, you’ll realize there are couples of files that have the same name but different extensions. One “.h” and one “.m”.

The “.h” files are the header and “.m” files are the implementation. If you are a little lost, don’t worry. You will understand this better with an example.

Right-Click on Classes or Sources and select Add->New File…

The “New File” window will show up. Click on “Cocoa Touch Class” in the left and “Objective-C Class” in the right. Down you’ll see it says “Subclass of NSObject” this is the standard, all the classes inherits from NSObject class in Objective-C, like in Java all classes inherits from the Object class.

How to make iPhone Apps - Part 1: Xcode suite and Objective-C image 15

Click next. Give your class a name (I’m going to call it “Person”), and click finish.

Now we have two files. For me they are Person.h and Person.m.

The .h files has an interface, it starts with “@interface” and ends with “@end”. Here is where you say to the world how you are going to define your class. Inside the curly braces is where we define the variables and outside you define the public methods names and the parameters it is going to receive. Other kind of methods, like the private ones are defined in the implementation.

Let’s add a variable.

   @interface Person : NSObject {

	NSString *Name;

   }

   @end

I added a name which is a string. Now let’s add some behaviors (Remember, outside the curly braces).

   - (void) walk;
   - (void) setName: (NSString) a;

I typed a minus (-) sign because this is an instance level method, this are me mayority of the methods that we are going to use. If you see at any moment one with a plus (+) sing, that means it is a class level method. Within parenthesis i typed void because this is a procedure, it does not returns any value. The second procedure takes a value, we are going to talk about it when we talk about method specifically.
Your “.h” file should look like this:

   #import

   @interface Person : NSObject {

	NSString *Name;

   }

   - (void) walk;
   - (void) setName: (NSString *) a;

   @end

Methods

Open Person.m. Within the @implementation we are going to say what our methods do. Let’s add the methods.

   -(void) walk {

	NSLog(@"Hi, i'm @% and i'm walking",Name);

   }

   -(void) setName:(NSString *)a{

	Name = a;

   }

In the first method we use NSLog, it is a built in method, it is used to print out messages through the console. You can open it at Run->Console if you want to test this codes when we finish the tutorial.

The @% sign means that there goes a string variable, it is specified at the end of the line, in this case the name of the person.

The second method sets the value of the name to a. In Objective-C, parameters are not defined like most of other languages, it has to be done like you where talking to the computer. A better example of it could be this:

   -(void) CreateHouse:(NSString *)name withNumberOfDoors:(int)numDoors andWindowsColor:(NSString *)color;

After this your implementation file should look like this:

   #import "Person.h"

   @implementation Person

   -(void) walk {

	NSLog(@"Hi, i'm %@ and i'm walking",Name);

   }

   -(void) setName:(NSString *)a{

	Name = a;

   }

@end

Now Calling methods is very easy. You have to create an instance of the class and call the method you need. For example, if you are willing to test your code and you created a Command Line Utility with Foundation Tool, you are going to find a file that has the same name of your project in the “Source” folder. Open it.

There is the main function, it is the first that is called when the application start.

Let’s import the class we just created adding #import “Person.h” right after #import and erase everything within the main method except for the return command.

Now we create an instance of our class:

     Person *p = [Person new];

Then we set the name by calling a method. In Objective-C we call methods within [ ]:

    [p setName:@"Oscar"];

We are saying, object p set the name of the person to “Oscar”

And finally we call the walk method:

   [p walk];

Your main file should look like this:

   #import
   #import "Person.h"

   int main (int argc, const char * argv[]) {

	Person *p = [Person new];
	[p setName:@"Oscar"];

	[p walk];

        return 0;
   }

Now if you want to test it you have to go to Run->Console, and hit “Build and Run”

How to make iPhone Apps - Part 1: Xcode suite and Objective-C image 16

Conclusion

We have learned the very basics of Objective-C. In the next tutorial we are going to talk about memory management, delegation and we are going to build a basic iphone app start working with some interaction.

See ya!.