Advertisement
  1. Code
  2. Web Development
Code

Getting Started With Firefox OS App Development

by
Difficulty:BeginnerLength:ShortLanguages:
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.

WebIDE

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:

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

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

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:

  1. Open WebIDE
  2. Select Project.
  3. 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!

App installed through WebIDE

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

Hello World app is installed

Our installed application now looks like this:

Opening the app
Interacting with the app

Porting Existing Web Apps to FxOS

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

  1. Just build a standard web application, using any of your favorite tools.
  2. 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.
  3. 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.
  4. 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.

Porting a Webapp to FxOS

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.