Leaf Peepr: My First Mobile App

A chunk of my summertime work this year was consumed with coding up a mobile version of the foliage-reporting tool we created for Yankee Magazine 7 years ago that’s been running on the web every autumn since.

The free app, called Leaf Peepr, is now available for both iOS (App Store link) and Android (Market link); it lets people report foliage conditions – i.e. what colour the leaves are – while on the go, and to submit photos and descriptions of foliage at the same time. These reports get aggregated together and are used to colour the live fall foliage map that’s on the web and also viewable from within the app.

Although I’ve been making websites targeted at mobile devices for many years now – the mobile City Cinema timetable, for example, and the mobile bus schedule – this was my first time developing a bona fide installable application for mobile devices, and it was a good learning experience.

The app shares a common HTML and JavaScript code base for both iOS and Android, uses jQuery Mobile as its UI framework, and is wrapped inside PhoneGap to allow it to be distributed as an executable through the App Store and the Android Market.

While this isn’t quite “write once, run anywhere,” it’s certainly a more streamlined process than coding native apps in their respective native languages of choice, and the common browser engine parentage of iOS and Android meant that, UI-wise, everything pretty well “just worked” on both platforms. Response time of the UI isn’t quite as fluid as it would be with a native app, but it’s certainly more than acceptable.

The only place I ran into some difficulties during development was with slight variations of returning network status information (“is the device online?”) and geolocation (we need to know where the device is so that we can associate reports with a location); PhoneGap has a standard method for obtaining these, but there are quirks that I needed to work around for various edge cases (i.e. device was online when app launched, then went offline, etc.).

Because the development is in HTML and JavaScript, the designer at Yankee, who coded up the UI elements, was working in a familiar environment, and the learning curve for me was primarily getting the development and compilation environments set up in XCode and Eclipse respectively (along with the frustration of the slightly-different key bindings for each).

Our initial submission to the App Store was rejected on a technicality: the Google Maps log was scrolling out of view on the map view, which violates the requirement that it be always visible. We re-submitted the app and it was approved; total time from initial submission to being available to the public was 10 days. For the Android Market, because it lacks this review process, the turnaround was about 30 minutes.

If you’re in New England this fall and want to help in the foliage reporting effort, please install the app on your device and let me know how it goes.