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.
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!
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.
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?).
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.
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!