My First Firefox OS App hits the Firefox Marketplace

I’ve been using a Geeksphone Peak, runnning the nascent Firefox OS, as my everyday mobile phone for more than a month now. I tweet with it, I update Foursquare with it, I check my email with it, I search the web with it, I use maps with it.

In many ways it feels like 1993 all over again, back when we ran Linux 0.93 on IBM PCs and it sort of worked.

Through one lens Firefox OS is a technical triumph: an open mobile operating system conjured up in two years by a not-for-profit organization.

Through another lens running Firefox OS is like running Linux on an IBM PC in 1993: it sort of works; sometimes it crashes, sometimes the wifi mysteriously shuts itself off, and while it does a lot, and is capable of a lot more, right now it does much less than an iPod touch, if only because the ecosystem of open web apps to run on it is only just beginning.

But under the hood and, indeed, infused into almost every pore of its being, it is open. This means so many things and means so much.

It means that the documentation for developing for the OS is out in the open, not hidden behind a locked developer website.

It means that there’s an active and out-in-the-open discussion of the fundamental aspects of the OS.

It means that you (yes, you) can dial into weekly conference calls or jump on IRC and talk to the people developing the OS. Or, indeed, become one of the people developing the OS.

It means that rather than “we do not discuss future plans”, your answer to “when will feature X be added” can be found in a public spreadsheet.

It means that if you have a problem you can find an answer by looking in the source code, which is public and on Github.

It means that you can find out if the bug you’ve found is being worked on, because the bugtracker is open.

What it means most of all, though, is that Firefox OS is being developed by real people to solve real problems; it’s not built to sell you more apps or get you to buy more songs or to show you more ads more targeted at your consumer behaviour. It’s being built by people like you for people like you.

So I’m willing to put up with the disappearing wifi and the fact that I can’t (yet) upload photos to Flickr because I believe in Firefox OS under-the-hood and I want it to succeed.

To this end, I’ve been sitting down and learning about the ins-and-outs of developing for the OS. Much of the terrain is familiar, because Firefox OS apps are just HTML + CSS + JavaScript, and that’s a world that’s been my technical home for 20 years. And it’s also familiar because I’ve been developing mobile apps for iOS and Android in the same style, wrapping them up in PhoneGap for their respective app stores. But there are new APIs to learn and a new UI toolkit to flesh out.

The best way to learn is to scratch a personal itch and I decided to write an app that would let me check in to Foursquare.

I’d been using Foursquare’s mobile website to do this and found it frustrating: it doesn’t know about my location, so it can’t provide me with a list of nearby places and so every time I checked in I had to manually key in the name of the place on a tiny phone keyboard.

I’ve been a Foursquare user for many years, mostly using Foursquare’s own mobile apps on my iPod Touch and iPad, and I’ve always found them filled with too many features I never use: I look to Foursquare primarily as a repository for my geolocation history, and so what I really want is an app that shows me a list of nearby locations and allows me to checkin with a single tap.

So that’s what I built.

The app I coded, called Checkin, has just been reviewed and is available in the Firefox Marketplace. It looks like this in the Marketplace:

And the app itself looks like this:

I wrote the app to scratch my Foursquare itch, yes, but also to get code out there for others to build on and criticize, especially code that authenticates by OAuth to an external API (Foursquare). So you’ll also find the source code in Github (you’ll find the tricky Foursquare OAuth bits here).

A few notes about the development process, from back to front:

• Reviewed!? Didn’t you just say that Firefox OS is open? Yes, the OS is open. But the Firefox Marketplace – intended, ultimately, to be just one of many places to get packages Firefox OS apps – requires that all apps calling so-called privileged APIs be reviewed, the idea being that APIs that provide access to “sensitive” capabilities need to be approved by someone before being installable. In the case of Checkin, as you can see in the app’s manifest: the app requires the systemXHR, and browser APIs, both of which are “privileged,” and the “geolocation” API, which isn’t. I submitted the app on June 30, 2013 and it was approved today, so it took 10 days, which is about what it takes an app approved in the iOS app store.
• That all said, using Firefox on the desktop and the Firefox OS Simulator you can grab the source code for the app and install it without the Marketplace or, indeed, any intermediation.
• My original intention was to build cellular network cell-site detection into the app, using OpenCellID.org to retrieve approximate latitude and longitude of the device. Unfortunately Mobile Connection API falls into another even-more-sensitive class of APIs, “certified,” a class that, at least right now, “must be approved for a device by the OEM or carrier in order to have this implicit approval to use critical APIs”. So if I wanted my app in the Marketplace, I needed to leave that functionality out. I think that’s a bad thing, or at least an unfortunate one, and I’ve proposed that at least some of what the Mobile Connection API offers – namely the cell ID, LAC, MNC and MCC – be exposed more freely.
• Because I don’t have a way of determining the location of the device other than via the Geolocation API, the app is really only useful when the device can see GPS, which, at least for my Geeksphone Peak, means outside. Android and iOS devices have access to non-public APIs that use a combination of GPS, cell site and wifi to derive location, which is why the Foursquare app on my iPad can figure out that I’m at Casa Mia even when I’m deep inside Casa Mia out and out site of satellites.
• For the UI building blocks of Checkin I used excellent Building Firefox OS resource, which documents the building blocks used for the core Firefox OS apps. It’s not quite a mobile UI framework like jQuery UI, but it’s pretty good for simple apps like mine, and CSS transitions handle simple page transitions without the additional complexity a framework would bring (for the curious, the “main” and “settings” screens of the apps are just absolutely positioned divs that get their z-position changed to become foreground or background; I didn’t invent this, just copied from elsewhere).
• The OAuth authentication to the Foursquare API turns out to be actually quite simple, despite OAuth’s reputation (and my own previous experience) that it was a Darién Gap for mobile devlopment: the app opens up a full-screen IFRAME (hence the need for the Browser API, which enables this), sending Foursquare the client ID I set up in the Foursquare developer site along with a “redirect URI” of Foursquare.com itself; when Foursquare redirects after login and authentication the app uses a mozbrowserlocationchange event to look for an access token in the redirected URL and proceeds. Using mozbrowserlocationchange this way is another reason for the Browser API, for it’s not supported otherwise (i.e. if I just called window.open to authenticate to Foursquare).

I look forward to the app being out in the wild and to getting feedback from people using it (it’s quite possible that I’m the only person in the world who has a Firefox OS and wants a simple featureless Foursquare checkin app; we’ll see).