Over the holiday weekend I had the opportunity to take a project that I have been working on for the web and see if I could port it directly to a native app on iOS.
Now your first thought is probably, “Don’t you have better things to do in your free time than code?”
Possibly, but I don’t know what those things are. I used to think I had a problem that needed professional help, but now I just accept it. Perhaps we need support groups.
“Hello, my name is Burke and I am a developer”
So as I fed my arguably unhealthy lifestyle choice, I got to know my way around PhoneGap. It’s a remarkable little framework that makes application development for mobile really trivial. The trade-off is that you don’t get all the neat iOS interface components that come with a standard XCode project. Kendo UI has you covered of course. 2012 shall be a big year for mobile HTML5 development.
In the meantime, let’s look at how I setup my own development environment and got to know PhoneGap so that you can get rolling and be ready for the Kendo UI Mobile release coming at you very soon.
Just for fun, here is a screenshot of my application running on the emulator. I was building an iPad application. There is some controversy around whether or not you should build separate applications for phone / tablet. My personal feeling is that you should always try and be universal. Even Apple offers tools for building native universal applications. Having multiple codebases can really bog down your ability to turn around fixes and enhancements as you will find yourself making the same changes in multiple places. I was building an Instagram viewer for iPad and not worrying about the phone experience because the actual Instagram application is on the iPhone.
My love of Instagram is well known and I don’t hide my inner fanboi, so my application deals with showing Instagram photos on the iPad in a way that you can easily scroll through them and share them in high resolution. It looks something like this…
What can I say about PhoneGap? It’s such a great little framework. It’s a simple download and getting rolling with XCode is as easy as creating a new project and dragging in the www folder that is created the first time you run the project. You can find the instructions for getting started with PhoneGap and XCode here.
After you get up and running, you have an application that looks somewhat like mine does here. I used the project title “kendomobile” not because I was using the mobile framework, but because I was using standard Kendo UI Web widgets. You can see above that I used the Kendo UI Menu Widget. The Kendo UI DataSource is also used to grab the images from Instagram and there is some templating mixed in there as well.
You can see the “www” folder at the top in blue and then the native project below that. From here on out, we are only concerned about the www folder. Let’s have a look inside.
There are really only a couple of things that I want to point out.
There is also a OnDeviceReady which I’m not using because I’m not dealing with any native features at this point. A good idea would be to use pub/sub and dispatch an event when this function fires so that you know you are good to go.
One of the things that you will need immediately is a way to debug your application. There is an article here on how to do that with PhoneGap, but I abandoned that pretty quickly and went to a different route.
I decided to build and debug in the browser and then occasionally test in the emulator. I’m on a Mac, and since I don’t really understand Apache and I’m lazy, I use the built-in Web Sharing in Lion. This creates a root site at http://localhost/~username. The physical location on the disc is ~/Sites.
My XCode project is pointed at the same place. It’s the same project. From here, I’m switching to TextMate at the “www” level and editing the project. Now I can run the project and hit it from http://localhost/~burkeholland/kendomobile/www.
I’m using Chrome and Chrome Tools to debug. I also use a Chrome Add-in called Window Resizer that allows you to resize the browser to preset dimensions. The first setting is for iPhone and the second says “Older Computers”, but 1024 x 768 is also iPad’s resolution. You can also create on for 768 x 1024 which is the iPad in portrait mode.
I was working with remote data and each time I would run the application and make a JSONP call with the Kendo UI DataSource, XCode output would report an error and no images were displayed. I have highlighted the key error below.
It turns out that you can’t call a remote URL without specifying in the PhoneGap.plist file which URL’s are OK to call. It blocks everything by default. The PhoneGap.plist file is found in the Supporting Files folder in the XCode project. Once you highlight it, you can change the allowed URL’s under External Hosts. I just put a * which allows everything, but you should probably be more specific. A good rule of thumb in security is “lowest required permissions”.
Are You Ready?
Kendo UI Mobile is coming in the early part of 2012. If you are a Mac user, this should be a good guide to get you ready to start building native HTML5 applications with PhoneGap and Kendo UI.
Building HTML5 native applications is remarkable easy and quite a bit of fun. It’s really neat to fire up the emulator and see your application running.
Now that I know how to build a native HTML5 application, step 2 is to get this thing in the app store and get a million downloads. How hard could that be?