JayData.org

Creation of a hybrid mobile application, part 2

Author: Daniel Jozsef July 7th, 2012

, , , , ,


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.

1-DevCenter1

 

2-IOS_DevCenter2

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.

 

3-AppStore_xcode

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.

4-PhoneGap

 

5-PhoneGapZip

 

6-InstallCordova

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

7-CreateProj

Now the heart of a Phonegap (Cordova) app is the static HTML/Javascript UI. By default the project you created does not contain any of that. Compile and run the application, it will display a single error page, complaining about not finding index.html.

8-AppError

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.

9-AppFolder

 

10-Addwww

Now you have a www folder in your application. Rebuild and run it, and you will be awarded with a working hello world application.

11-FullApp

 

12-Working

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.

 

13-Bookreader

You can see the folder structure on the left, and on the right, I have the Phonegap interface file open for our plugin. If you need to use native capabilities, you either use a built-in Phonegap functionality from Javascript, download an existing third-party plugin, or you create your own.

We went with the third, since our requirements were quite unique. To build a Phonegap plugin, first you need to define its interface in Javascript, and map the JS function calls to PhoneGap.exec calls, that realizes the interoperation between native code and JavaScript. The programming model of Phonegap is built upon the paradigm of JavaScript calling native code as functions, and getting JSON objects as results. I will get into the details of building plugins in a later post.

 

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.

This is it for this week, we’ll dig into some details of native coding next week, and look at the possibilities of debugging JavaScript in Phonegap.


, , , , ,