What’s FireFox OS?

FireFox OS is a mobile operating system that came into existence as a result of Mozilla’s ‘Boot to Gecko’ project. It won’t be out of context to mention that it is based on Linux kernel and Firefox’s Gecko rendering engine. This OS is completely open source and hence it is not in the shackles of proprietary rights. The user interface of FireFox OS is a web application with built in ability to launch and display various other web apps. Unlike other giants in the mobile OS segment (such as Android, iOS), it targets emerging markets. It also aims to provide end users superior features of smartphone for low price.
The types of Firefox OS applications.
Packaged:
These apps are basically .zip archive files containing the resources used by the applications (such as HTML, CSS, and JavaScript files). The user will have to download and install it just like any other mobile OS apps. Developers can push updates to users via the Firefox marketplace. It is also possible to make the app update on its own.
Hosted:
Hosted apps are primarily run from a server just like a website with a given domain name. All of the app’s files are hosted on the server. Developers have more control over hosted apps, as the application resources are located on the server.

1. Development Environment Setup

Every Firefox OS app (packaged or hosted) requires one mandatory file named manifest.webapp located in the project’s root directory. It is a JSON file that provides information (such as name, description, author, icon, etc.) about the app to the OS. In this tutorial we’ll use the following simple manifest.webapp.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "version": 1.0,
  "name": "ToDo App",
  "description": "App to make a note of to-do tasks",
  "launch_path": "/index.html",
  "developer": {
    "name": "your name",
    "url": "http://yoururl.com"
  },
  "icons": {
    "512": "/img/icon-512.png",
    "128": "/img/icon-128.png"
  },
  "default_locale": "en"
}
To learn more about the manifest file you can check out the documentation. Manifest files can be validated by manifest validator. An API can also be used to validate.
In our project root, create the manifest.webapp file, as well as the following directories:
  • css
  • js
  • lib
  • img
Finally, you need to install the Firefox OS simulator to completely setup the development environment. After installation, the simulator can accessed from the Developer section of the Firefox browser menu.

Once the simulator is started, you should see Firefox OS screen, shown in the following figure.

2. Web APIs and Web Activities

There has always been one overwhelming issue of accessing mobile device features via web technologies. Mozilla has come up with wide range of JavaScript APIs to solve this issue by providing access to manage and control device features like contacts, power management, camera, FM, Bluetooth hardware, etc. These are called WebAPIs, and as a developer you must check them out on the Mozilla Developer Network.
In the case of web activities, the operations carried out by the app are done by a chain of task allocation from one app to another app. For example if the application needs to open a PDF file, it will ask the user to choose one the applications that he or she is already using to open PDF files. Once the particular file is opened, it is returned to the caller or source app.

3. Writing a Sample App

We’ll be using AngularJS to develop this to-do app. Download the Angular source and copy it to our project’slib directory. Next, create index.html in the root directory. Copy the following code into the file.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html lang="en">
  <head>
    <title>Todo List App</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
  </head>
  <body>
    <div ng-app="todoApp">
      <h2>Todo</h2>
      <div ng-controller="TodoController">
        <span>{{remaining()}} of {{todos.length}} remaining</span>
        [ <a href="" ng-click="archive()">archive</a> ]
        <ul class="unstyled">
          <li ng-repeat="todo in todos">
            <input type="checkbox" ng-model="todo.done">
            <span class="done-{{todo.done}}">{{todo.text}}</span>
          </li>
        </ul>
        <form ng-submit="addTodo()">
          <input type="text" ng-model="todoText"  size="30"
                 placeholder="add new todo here">
          <input class="btn-primary" type="submit" value="add">
        </form>
      </div>
    </div>
    <script type="text/javascript" src="lib/angular.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
  </body>
</html>
Next, create style.css inside the css directory and copy the following code:
1
2
3
4
.done-true {
  text-decoration: line-through;
  color: grey;
}
Next, create app.js in the js directory and copy the following code.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
angular.module('todoApp', [])
  .controller('TodoController', ['$scope', function($scope) {
    $scope.todos = [
      {text:'Todo Item 1', done:true},
      {text:'Todo Item 2', done:false}];
    $scope.addTodo = function() {
      $scope.todos.push({text:$scope.todoText, done:false});
      $scope.todoText = '';
    };
    
    $scope.remaining = function() {
      var count = 0;
      angular.forEach($scope.todos, function(todo) {
        count += todo.done ? 0 : 1;
      });
      return count;
    };
    $scope.archive = function() {
      var oldTodos = $scope.todos;
      $scope.todos = [];
      angular.forEach(oldTodos, function(todo) {
        if (!todo.done) $scope.todos.push(todo);
      });
    };
}]);

4. Testing the App

To test our app, we’ll be using the Firefox OS simulator. In Firefox, go to Tools > Developers > FireFox OS simulator. Next, click on the Add Directory button and navigate to manifest.webapp file to load it.
If everything is done correctly, you should be able to see the simulated app right on your laptop/desktop. You may have to scroll through screens in order to access the app.

Click on the app present on the screen to access your application.

After finalizing the app, create the .zip archive of the entire root directory files and use the validator to give it a complete round of testing.
Check out the WebIDE testing tool that allows you to connect desktop Firefox to a compatible device via usb. Moreover it lets you push apps straight to the device and debug them while they run.

5. Publishing the App

It is very easy to distribute your Firefox OS app. It can be hosted on your own server as a self-published app. However, for greater reach and visibility it can pushed to the Firefox marketplace. Once the manifest file is validated, extra information (such as OS support, price, screenshot) about the app can be submitted. Users wil be able to purchase your app, rate it, and provide feedback.

TAGS :