Page 1 of 3
Firefox OS looks promising and now we have the first standard hardware that runs it from Geeksphone. Creating a new app for the Keon is easy, getting it run is also easy, once you know how. In this first of a series of articles on Firefox OS app development, we start with getting a development environment set up and deploying apps to the Keon.
Firefox OS - Building Apps
This article is part of a first draft of a book on Firefox OS.
First a quick look at the structure of Firefox OS.
Firefox OS is a Linux based system. Starting at the bottom of the technology stack there is
- Gonk - a Linux kernel and hardware abstraction layer.
- Gaia - The User Interface that runs on top of Gecko.
You don't really need to get to know how any of these layers do their job, but it helps to realize how your app sits alongside Gaia when it runs.
Mozilla have made available a simulator (at version 3.0 at the time of writing) and you can use this to get started and test your apps. The simulator works very much like the real phone but it does have some missing facilities at the moment. You cant test vibration, proximity, ambient light and so on. The APIs that depend on the real hardware and interaction with the real hardware tend to be ignored by the simulator. However it is still usually useful to test you app using the simulator and to move to the real device later.
The simulator is installed as a Firefox addon and to run it you use the command Tools,WebDeveloper, Firefox OS Simulator.
Once you have installed the simulator in principle it should keep itself up-to-date by downloading upgraded but it is worth keeping a check on the version number.
If you just run the simulator you initially just see the dashboard. To actually run the simulator you have to toggle the simulator button to Green - Running. A few seconds later the simulator proper appears. This works like the real phone but it also has some additional buttons on the bottom edge and two menu items. You can work with the simulator using the mouse in place of touch. You can tap by clicking and swipe by dragging with the mouse button down.
Throughout this article NetBeans 7.3 is use to create and maintain the project but you can use any IDE or text editor you want to.
A First Simulator Project
Getting started is easy but let's make it as simple as possible. Assuming you have installed the Simulator, have run it and got to know how Firefox OS is used let's create the simplest possible application. This consists of an HTML file and a manifest.
If you are using NetBeans create a new blank HTML5 project and add an HTML file called index.html containing:
<h1>Hello Firefox OS</h1>
I told you this example was simple!
If you want the HTML to run on other targets then you might need to add some additional tags but this is all you need for Firefox OS.
Next we need the manifest. Create a new file called manifest.webapp and enter:
"name": "My App",
"description": "My First App",
"name": "I Programmer",
If you now make sure that both files are saved and up-to-date we can now run the app.