How do you develop apps for iOS?  It’s a common question, and one we hope to answer with this series of posts.

Learning how to develop software can be one of the most intimidating prospects for any computer enthusiast, and with the growing saturation of applications in mobile marketplaces, it is becoming increasingly difficult to get your work noticed. That’s what this series is for, helping you learn iOS development from a conceptual perspective. No prior knowledge of computer programming will be necessary. Over the coming weeks, we’ll examine the iPhone’s ability to deliver immersive, intuitive content, a unique opportunity for both developers and consumers.

Today, we’ll be building our first application for iOS devices, a simple text-viewer on the iPhone called Hello World. Coding is like swimming – you have to be thrown into the pool at some point.

What Is the Purpose of This Exercise?

Whenever you learn a new language, the best way to become completely immersed in the syntax is to surround yourself with it. Hello World is a rudimentary application that serves no function, but teaches you how to put text on the screen.

While it might feel like you’re being thrown into the deep end, you’re not alone. There’s a number of developers out there with great experience, and it never hurts to ask questions. With that, let’s begin building your first application!

Creating a New Project

First, you have to head on over to Xcode, Apple’s IDE. For more information about this particular facet of the development universe, be sure to check out Introduction to iOS Development: Installing Xcode. To create a new project, select File > New Project, opening up the template selection window. Select View-based Application, a simple skeleton that supports only a single view. When asked for your product name, type “HelloWorld” into the field. Proceed to save it in an appropriate area where your files will be neither lost nor vulnerable.

Note: When introducing Xcode, the new version of the IDE was not yet released, however due to the fact that it is the only current installment of the software available for download, we will be using Xcode 4 for these tutorials. If you want information on the changes that were made, click this link.

Breaking Down the Project Window

Immediately upon entry, the first thing you will notice is the way your workspace is set up. While it may appear to be flustering, we have made a simple chart that tells you where everything is. If you find yourself confused during this lesson, just click on the image for an expanded view.

Building Hello World Through Interface Builder

The simplest way to build Hello World is through Interface Builder. Just pan on over to your editor and double click on HelloWorldViewController.xib, which is the Interface file that we will be working with. A new window will pop up with a gray box, and this is where the fun begins.

Go to View > Utilities > Object Library to see the list of available Apple-esque interface elements.

Click and drag the “Text View” element onto the gray rectangle. Replace the obligatory “Lorem Ipsum” text with “Hello World!” Format the words to your liking, adjusting the alignment using the guides that will automatically appear and the Inspector tool to fix your font.

Another way to create a more visually striking version of Hello World is to create a picture the size of an iPhone’s screen that says, “Hello World!” on it in a unique way. Add the picture to your project’s “Supporting Files” folder, and then go back to your XIB to add an Image View. Go to the Inspector, which is on the top right and reference the file you added. It typically looks cleaner than using plain text. Feel free to snag the image below and try it out.

When you’ve finished completing either of these processes, run your application by saving the XIB and hitting the play button. The iOS Simulator will pop up and you will see words on your very first iPhone application!

Coding Hello World

What if you want to make the application the old fashioned way, through some Objective-C coding? Well, you’re in luck because next we will examine how to get the text to appear through manipulating code.

We’re going to create an entirely new Window-Based Application, so create a new project and make the title “HWCoding.” Delete HWCodingAppDelegate.h, HWCodingAppDelegate.m, and MainWindow.xib from your project by clicking them and hitting your backspace key. Move into your properties list (HWCoding-Info.plist) so that we can tell the program where to draw its interface from. Delete “Main nib file base name.” Now we can finally move onto the main.m file, found in the same folder.

Follow the image below, clicking on it for an expanded view when necessary, to see the coding take place. Comments are listed in green and act as a running commentary would.

Rather than trying to learn every little bit of information about the code that is found in this lesson, here are some interesting things to take note of with Objective-C:

  1. Variables are written in camel formatting (e.g. appleMakesComputers, it looks like a hump).
  2. All lines end with a semicolon, it tells the compiler that you have made a complete thought.
  3. You have to define the bounds of your screen, which is done in the code above when UIView is defined.
  4. Asterisks (*) are used as pointers, directing the complier to previous lines of code.

Questions?

Feel free to ask questions about this lesson in the comments section below and we’ll do our best to address your concerns.

To read previous installments from this series, check the links below.

Introduction to iOS Development: Understanding Your Platform
Introduction to iOS Development: Installing Xcode
Introduction to iOS Development: Creating an Intuitive User
Introduction to iOS Development: Taking Advantage of the iPad 2