The Firefox OS Hello World

I recently got my hands on a Firefox OS preview device, a Keon and today I'm going to show you how to get a simple Hello World app running on the phone. Note that you don't need a phone to follow through - we will also use the Firefox OS simulator which can run on any machine (it's a Firefox browser plugin) and you can easily run your application through that. The phone is just the extra bonus bit at the end!

To install the simulator just load up Firefox and head to the simulator download page. From there you can install it to Firefox OS. Hit the button on the left of the simulator dashboard to run the simulator and you should see the "device" appear:

Now lets make an app. Apps are almost deceptively simple to create. It really is just HTML, CSS and JavaScript! As always, you can find all the code on Github.

The first thing to do is create an index.html page. This just links to a couple of JS files, one of which is jQuery, and contains an empty div:

Create a js directory and grab the latest version of jQuery into it. Then create app.js and put this within:

$(function() { $("div").text("Hello World!"); });

When the app loads we should see the text "Hello World" appear in the empty div.

Finally, we need to create a manifest.webapp file. This is similar to how package.json works with Node and npm apps in that it tells the system about the app and how to run it. Inside the application manifest goes some simple JSON:

{ "name": "Hello World", "description": "Jack's test Hello World app", "version": "1.0", "launch_path": "/index.html", "developer": { "name": "Jack Franklin", "url": "http://jackfranklin.co.uk" } }

The main property there to note is launch_path. This is the file that the app will load up first when it is run by the user.

Now we have our app, we can try running it through the simulator. On the simulator dashboard, click the "Add Directory" button and then navigate to the folder which contains the manifest file. Double click on that manifest file to select it. You'll see the device boot and run your app, complete with the "Hello World" text we inserted.

Finally, lets install it on the device itself. The instructions on how to do this vary depending on your OS, so rather than type them all here, I suggest reading the MDN documentation. Once you've done that, and enabled remote debugging on the device, connect it to your computer via the USB lead.

You should see a new "Push" icon appear:

Hit that, and your app should be installed on the phone.

I hope this quick tutorial helps. The aim here wasn't to go into any huge depth, but provide a very quick "Getting started" app. In the future I'll delve into more of the APIs available and what can be done with them. In the mean time, The MDN page has a huge amount of documentation.