It’s been the little whispers on the breeze this year, that far off calling, it’s niggling at you now… You’ve heard about Firefox OS (or ‘Boot to Gecko’), you’ve read about Firefox OS, but you haven’t had a chance to have a play with it yourself. Today I want you to take some time for yourself, away from distractions, put your phone on silent, close your Twitter client, ignore your emails, we’re going to see what it’s all about.

But what is it?

An OS! :) One that is completely open source and has been developed using the same rendering engine as Firefox (Gecko). Which means apps are developed in everyday web technologies: HTML, CSS and Javascript. The big project at the moment is Gaia, which is a smart phone OS built on top of the Boot to Gecko technology.

Two preview phones running FirefoxOS have been released by Geeksphone specifically for developers: The Peak and the Keon. However the scope for other devices is endless – it has already been booted on a Raspberry Pi.

In this tutorial I want to take you over the basics of making an app. Wait, what? You already know some/a lot of HTML, CSS and Javascript? Then I hope you’re ready to have your mind blown, because that is all you need!

I don’t have a Geeksphone :( can I run it?

You sure can. The easiest way to do this is to simulate it on your computer. Firstly make sure you have Firefox nightly downloaded and installed, then grab the simulator add on here and click on the install link for your relative platform.

N.B. The simulator will work just fine with the regular Firefox browser, (as long as you check it’s updated), however it is recommended you use Nightly so you have the most up to date version of Gecko.

Once downloaded and installed you should be looking at something like this:

Slide the button to the unlock icon and have a look around. Click and hold to slide (or if you prefer keyboard shortcuts: On a Mac fn + rightarrow and fn + leftarrow, or home and end keys on Linux, can help you navigate). There are plenty of apps there already – one of my favourites is CrystalSkull, it’s shiny :) gets distracted… sorry. Must. Stop. Rotating. Skull.

It’s also worth bearing in mind at this point that Firefox OS and Gaia are still very much in development (as are most of the apps) and you can see on the simulator add-on screen that it’s only in ‘Alpha’, so please bear with any glitches.

So let’s roll!

If we hop back to the add on page in Firefox, we can see there are two options for installing an app in the simulator. You can choose a local file, or you can link to a URL. Here we’re going to do the former. So let’s start creating some app files.

The app we’re going to build here is called Pocket Kitten. It displays a picture of a kitten, and when you tap the device is displays a different picture of a kitten. Begin by creating a folder for your app and inside that create two more folders, one for your CSS (style) and one for your javascript (js). The first file we need is manifest.webapp, this just sets up some data (and permissions if you’re using web APIs), in json format, about our app.

We can now open index.html in Firefox Nightly and we can develop Pocket Kitten in the browser for the next bit. If we set the view to be the same dimensions as the simulator, we can see what the app will look like as we add CSS. Go to Tools -> WebDeveloper -> Responsive Design View and choose 320×480 from the drop down that appears.

So let’s get cracking with a little CSS. I’m going to create a custom design, which is always advised with FirefoxOS apps. There has been a pattern library, Gaia building blocks, created for Gaia develpment, but part of the point about harnessing open web technologies is we can have any app look any which way we want… yay!

As it’s such a small example, I have only one CSS file style/pocket-kitten.css:

As you may have noticed there are 3 background images in the CSS file, two are just background textures, whilst the other is a placeholder for the kitten image. Once you’ve dropped those in to style/images you can refresh Pocket Kitten in the browser and see what it looks like.

Now let’s take a sneaky peak at what it looks like in the simulator. Go back to the simulator add on tab and click on ‘Running’ to stop the simulator. Click on the ‘Add Directory’ button, browse to the Place Kitten folder and select the manifest.webapp file. Click open and our Pocket Kitten app will be added to the screen. Now start the simulator again and there should now be a ‘Pocket Kitten’ app with our icon. Tap it to open and our app should now be running!

All we need now is a little tapping action so the picture changes. Let’s create a javascript file: pocket-kitten.js and save it in our js folder. I’m going to use an external web service – placekitten.com, which serves different kitten images depending on parameters set in the url. This does however mean that the user will need a data connection for the app to work, so user feedback will be necessary should they not be connected.

Let’s start by showing an alert if the user is not connected:

if (navigator.onLine == false) {
alert('Oh nos! It seems you're not online :(nSorry but this app only works if you are online, please connect and try again.');
}

Test this by saving the file, turning off your internet connection and clicking the ‘Update’ button, next to Pocket Kitten, in the simulator tab. Check it out – there’s shiny default styling! Wahay, nothing more to do here (we can now turn our internet back on).

To generate an image from placekitten.com we need to add width and height parameters to the end of the url. Different sizes produce different images. The javascript below generates random values for the width and height, creates a url for placekitten.com and then replaces the source of the image element in the HTML.

Add this to your javascript file, save it and go back to the simulator add on. Click on ‘Update’ button next to the Pocket Kitten app. The simulator should restart and the app load automatically. Now if you click the screen a new kitten picture should load!

Now turn around and pat yourself on the back – you just made an app which runs on Firefox OS :D

Did you notice what just happened there – you actually just built a web app, it just so happens that that really is all you need to do. Amazedev! As it is just web technology it’s worth taking a look at the WebAPI list to see all the amazing functionality which is/will be available for your apps.

Now I bet you’re wondering how you get all this onto a device. Sorry I’m not going to go into it in detail here, no doubt it’ll be tl;dr. A quick summary is you need the Android SDK installed and the Gaia code. Also a compatible device (Galaxy S2, Galaxy Nexus, Nexus One, LG Optimus to name a few). There are instructions here and more notes on it here. There’ll soon be more detail from me too, so keep an eye out.

Go forth my friends, with your new knowledge and make some awesome apps :)

NB I did actually make Pocket Kitten(!) – you can see it in it’s full glory here.

Ruth John

Ruth is a web technologist and Google Developer Expert. She likes to educate people about new web technologies and inspire them to try them, coming up with exciting and engaging ways to use them. Her favourite things include interactive audio/visual installations and 80s cartoons, usually at the same time!

2 Comments

Arun

Niladri Dutta

Hi Ruth , great tutorial . I am running an app in Firefox simulator 1.3 . The problem is an animated GIF image is showing while I am making an Ajax request.The GIF image is showing in browser but not in simulator.I can see the alternative text for the GIF image.Please advise if there is any permission needed in the simulator to show the animated GIF image.