But you don’t want to learn Objective-C, you aren’t trying to build something that requires high performance graphics, you want it to look and feel like an application, and you are primarily web developer that thinks that things should run cross platform simply. If this describes you then this series of posts may help motivate you to get started. In part 1 of this series I’ll look at some of the tools and components that I used to build the GoodDay app.
1. PhoneGap is essentially a set of project templates for iPhone, Android, Symbian, Blackberry, and Palm that allows you to access common smartphone
functionality inside of a web application that runs natively on these devices. Choosing PhonGap allowed me to leverage existing skills and, honestly, made this project a learning experience that benefitted my day job. I got to focus on creating web applications, learning jQuery, CSS3, and other modern browser features like persistent local storage databases in SQLLite.
With PhoneGap you’ll focus on developing from the inside of a WWW directory in your project. When your app is run the index.html page will be opened and become your blank canvas. What you do from there is up to you. There is a good set of getting started documentation here… but I recommend checking out this Oreilly book here.
- jQtouch is a jQuery plugin that provides a lot of default controls, styles, and transition effects. With it you can create
your own themes or leverage one of the standard themes that look most similar to the default iPhone controls. Essentially you can define different application screens as divs on the same page or new html pages that are dynamically loaded on request. I’d recommend checking out this PeepCode cheatsheet and pay for the video. Both were very helpful.
If I were starting again now I would probably check out jQuery Mobile as well.. which seems to provide a similar set of functionality.
Qunit – At Telligent we require that all code come with tests and I wasn’t going to break this rule for my personal
learning projects. Since a phonegap application ends up being a big hunk of javascript I wanted a testing framework that would run on the phone, in a debugger, and didn’t require a desktop browser. This fit the bill perfectly and I smiled when I saw a sea of green before submitting to the App Store. After building a large suite of tests I also found YUI Tests that probably would have fit the bill as well.iScroll – If your application needs to have a fixed header/footer, but a scrolling list in the middle then you are going to need this… or something like it to enable a native feeling scrolling functionality.
SliderControl – By now you can probably tell I’m a believer in leveraging off the shelf components whenever
possible. Any new code I have to write is probably not going to be as good as code that’s already been proven in other projects. In this case I had to make several modifications to the component to get the behaviors I was looking for, but I don’t think I stretched it too far. SparkLines – I needed something lightweight to show the users trend over time. I first tried some of the heavier duty
javascript charting components like HighCharts, but realized that those controls took longer to render and provided a ton of functionality I didn’t need. So I figured I’d scale this library up instead of trying to scale others down to a small screen.
At this point you realize that one advantage of building a PhoneGap application is that there is a whole world of existing libraries and controls you can leverage to build a good user experience. So far, in my testing, the performance of these applications is pretty comparable to similar native apps… even on older phones.
In the next part I’ll get a little more specific about the code used to build GoodDay.
