In the first part, I looked at why it makes sense to build hybrid applications, and addressed some of the pitfalls you need to avoid in order to keep your application responsive, and get the maximum out of the hardware.
This week, I’ll be walking you through the steps of setting up a development environment on your Macintosh, and give you a skeletal overview of the hybrid application we built.
Getting your developer licence
Apple charges money for the iOS developer licence. To build code and run it in the simulator, you only need a free registration, but to be able to deploy to an actual device, you need to pay the full $100 per year subscription. Now this may strike some people as expensive, but then again, you get the full dev environment for free, while Microsoft charges you thousands of dollars for theirs. This is mostly a battle of preferences.
Anyway, you’ll need to go online at http://developer.apple.comto sign up. I’d suggest going with the free membership for the first few weeks, and paying only when you are ready to do some meaningful work on an actual device. I’ll be covering the task of deploying to a device as well in a later post.
So first navigate to the iOS Developer Center page, select Register, and follow the instructions. If you use Apple devices, chances are you already have an Apple ID. I suggest using that to create your developer profile.
Now that your profile is created, you need to install your tools. Before Snow Leopard, you needed to download XCode from the Developer Center, but now you install it from the App Store. (By the way, if you do not have at least Snow Leopard, you won’t be able to develop for iOS. I suggest you upgrade to Lion, just to be safe. Apple offers extremely limited support for legacy OS versions.) Open the App Store, just search “xcode”, and click Install. It will take its time, but eventually you’ll end up having XCode on your computer.
Now you could open the IDE and play around, but to do hybrid development, first you need Phonegap. Go online to http://phonegap.comand grab the latest bundle. This zip file contains every platform of Phonegap, and some documentation as well. What you really need is the dmg file under ./lib/ios. Just open it, and run the installer.
Your first hybrid application
Once done, start XCode and select Create New XCode Project, or File > New > Project from the menu. You will see that the Phonegap installer has added the template “Cordova-based Application” to the available project types. Select that and create your project. As the Phonegap documentation will also tell you, make sure to unselect Automatic reference counting. This is an unfortunate side effect of using Phonegap, you won’t be able to enjoy easy memory management available to iOS5-only native apps, but don’t get scared, Objective-C memory management isn’t that hard. (And it is possible that you will not be doing any Objective-C coding anyway.)
So to bootstrap your project, open its folder in Finder. You will see a folder called www, containing a single html file and the Cordova library js file. Grab this www folder, and drag it onto the project in the left-hand navigator column in XCode. Select “Create folder references”, unselect copy, and click Finish.
Now you have a www folder in your application. Rebuild and run it, and you will be awarded with a working hello world application.
A quick look at the anatomy of a hybrid app
While your empty hello world app is interesting enough for a first, I’d like to show you what our full-blown bookreader application looked like.
You can see that we have a rather extensive structure under www, it is basically a full-blown web application built on a variety of JS frameworks including JayData. The yellow folders are the native part of the application. Under Plugins, we have the native implementation of the interface I just talked about. Classes contains the essential objects needed to start up an iOS application. You’ll be making good use of these later.
As you probably know, iOS does not allow developers to dynamically link to and install third-party libs. So all third-party code is either statically linked, or lifted over as source. The Vendor folder is a conventional location to place third party source code. You can see the source folders of several components we used. As for statically linked libraries, and system components, they reside in the Frameworks folder.