Getting Started With Firefox OS App Development

Final product image — What You'll Be Creating

In this tutorial, you will learn about Firefox OS, devices running Firefox OS available in the market, running FxOS for testing and debugging apps on WebIDE, and making a basic app for FxOS. Finally you will learn how to port existing web applications to FxOS by developing a manifest file.

Firefox OS

Firefox OS has been developed by Mozilla which is best known for the Firefox Web Browser and Webmaker. It is a free (free from proprietory technology) operating system that has been suited for smartphones, tablets and even televisions. It's project name is Boot to Gecko (B2G).

Firefox OS aims at providing a web based solution for developers as it's applications are built with HTML5, CSS and Javascript, along with some open web APIs which help a developer in accessing the device's hardware and services such as camera, battery state and vibrations. Actually, the entire User Interface of FxOS is a web application called Gaia, which can launch and display other web applications.

WebIDE for Running FxOS Simulator

You can run Firefox OS by launching WebIDE (available in Firefox Developer Edition). I will be running FxOS 2.2.

If you are more inclined to test your apps or carry on the development work on a real device, you can check out the device catalog.

Building a Basic App for FxOS

Let's build a simple Hello World App for FxOS to outline the procedure of building an app for the platform. First of all, we will have to develop a manifest file. It will be named manifest.webapp. A manifest file looks like this:

{
  "name": "Hello World",
  "description": "Hello Tuts+ App",
  "version": "1.0",
  "launch_path": "/index.html",
  "developer": {
    "name": "Tanay Pant",
    "url": "http://twitter.com/tanay1337"
  },
  "permissions": {}
}

Great, since we have now created the manifest file, we can move on to developing our index.html page.

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Tuts+</title>
  </head>
  <body>
    <h1>Hello Tuts+</h1>
    <input type="text" id="myTextInput" value="Hey Envato!">
    <button id="myButton">Hit Me!</button>
    <script src="js/app.js"></script>
  </body>
</html>

And finally the app.js which is the core engine of our app and is located at js/app.js.

var button = document.getElementById('myButton');
var txtInput = document.getElementById('myTextInput');

button.addEventListener('click', function(){
    var text = txtInput.value;
    alert(text);
});

So our very basic application for FxOS has been built, and now it's time to run it in the simulator! To do that, first of all:

Open WebIDE.
Select Project.
Select Open Hosted App.

It will ask you for the URL of your app's manifest. In my case, it is http://localhost/manifest.webapp, since I am hosting the code samples on my local server. Doing so will install your app in the simulator!

Now, open the simulator and you will see that your Hello World app is amongst the list of installed apps.

Our installed application now looks like this:

Porting Existing Web Apps to FxOS

For porting an existing web application to FxOS, you just need to carry out the following few steps:

Just build a standard web application, using any of your favorite tools.
Identify this as an installable web app by adding a manifest.webapp file to the web app root directory. This is for defining the names, icons, localization information and most importantly the permissions that your app will request from the user for accessing the device APIs.
Create any functionality you require that makes use of special device APIs like camera, SMS, notifications or alarms, and create the asset files such as icons.
Package and distribute your application. You can either publish it on the marketplace as a packaged app or you can publish it as a self-hosted application.

Here is an illustration from Mozilla Developer Network, which outlines the above process in the form of a flowchart.

Conclusion

Building applications for Firefox OS is quite interesting because it makes use of the web technologies that we all are so familiar with. However, the addition of the device APIs, allowing us to access the hardware, makes the process of building the application even more engaging. With just a little study of the APIs, you can create applications like camera, alarm, notes and reminder applications, and much more. Feeling excited and confident? You should definitely try to hack on Gaia's repository on Github and contribute to the development of the front-end and UI development of Firefox OS.

Even porting existing web apps to FxOS can be done on the fly in just four easy steps, and Firefox's Marketplace, even though big, isn't as comprehensive as either App Store or Play Store, so there are a lot of opportunities for amazing applications that can be a hit!

HIGHLIGHTS OF THE DAY