LifeinTECH

When Apple launched the App Store for iOS back in 2008, it instantly took the world by storm. Since then Apple have sold over 18 billion apps and rival services have been created for just about every other platform.

Historically, creating a native app for any mobile platform has required knowledge of a specific integrated development environment (IDE), as well as an object-orientated language such as C++, Objective-C or JAVA. Although I have a basic understanding of Objective-C and JAVA, I am most familiar with web technologies, such as HTML, CSS and JavaScript. Therefore wouldn’t it be great if I could use the skills I already have to create native apps?

Introducing PhoneGap, a HTML5 app platform that allows you to create native apps using web technologies as well as granting access to unique and powerful APIs. I have been using PhoneGap for the past couple of years to develop native iOS applications that are available on the Apple App Store, however written in standard web languages. Anyone that has a good understanding of HTML and advance CSS and JavaScript, will know that web languages can be just as polished and powerful as their native counterparts (with 3D games being the only real exception).

Another advantage of this approach is that PhoneGap is not platform specific, so you can take one code base (for example, basic HTML) and PhoneGap will package it natively for just about any mobile platform, for example Apple iOS, Google Android, Windows Phone 7, etc. This is an incredibly powerful feature, as it significantly reduces cross platform development time and the challenges of learning multiple programming languages.

Now we know what PhoneGap is, I thought I would run through the basic setup for Apple iOS (the most popular mobile platform). The aim is that by the end of the setup you will be in a position to write HTML code and have it instantly packaged as a native iOS application!

Requirements:

Before starting you will need the following three things:

• A Mac, running Mac OS X (Snow Leopard or Lion).
• Xcode (downloaded for free from the Mac App Store).
• The latest version of PhoneGap.

Installation:

Let’s start by installing Xcode. As this is Apple’s primary development environment for Mac and iOS it is quite big (1.7GB), but also very powerful. You can download Xcode from the Mac App Store, at which point an icon will appear in your “Applications” folder called “Install Xcode”. Run the installer and follow the wizard leaving all settings at default.

Once complete you are ready to install PhoneGap. Simply unzip, navigate to the “iOS” directory and run the installer until completion (again leave all settings at default).

Hooray! Your environment is now setup to create your first project in Xcode using PhoneGap (easy, right?).

Project Setup:

Start by opening Xcode and select “New” and “New Project”. Now select “PhoneGap-based Application” from “iOS > Application”.

Next add a “Product Name” and “Company Identifier” for your app. These can be anything you like.

Once complete you will be asked where you would like to save your application.

You should now see your project in Xcode. If you attempt to “Run” your project at this point you will be prompted with an error, stating the “index.html was not found”.

To resolve this, you need to copy your “www” folder into the project. Navigate to your project directory in Finder or right click on the project in Xcode (left navigation window) and click show in Finder.

IMPORTANT - Drag the “www” folder into Xcode, under the project name in left navigation window (See image below).

If done correctly you will be prompted with a few options (see image below). Make sure you select “Create folder references for any added folders” and click “Finish”.

Now if you “Run” your project it will open the contents of the “index.html”, which is pre-populated to prove the setup of PhoneGap has been completed successfully.

You can now edit the project just as if it was a standard web application. To get used to Xcode, I suggest you start by making some minor modifications to the “index.html” file.

Once you have mastered the basics you can start getting more advanced by adding custom JavaScript. I recommend checking out jQuery Mobile, which is a framework specifically for mobile devices that is very powerful, flexible and easy to work with.

That’s it! You are now an iOS developer. In fact, even better, you can now port the same code to any other PhoneGap supported mobile platform!