How to develop Firefox OS Apps

Are you a developer ? Do you want to develop Apps for  Firefox OS ? Here is a small walk through which will be helpful in getting you started with it. But before directly jumping into developing the App let’s first define what is Firefox OS.

Firefox OS (codenamed Boot2Gecko or B2G) is a mobile operating system based on Linux and Mozilla’s Gecko technology. It is built upon open web standards like HTML5, CSS3, and JavaScript.

Here is a screenshot of a Firefox OS device.

geeksphone

Though this new mobile OS is an emerging technology, it is quickly catching the eyes of users, developers, and critics. Now let’s get down to the development of the Apps.

Where to run and test my App:

1.. Firefox OS device to run your app and check how it’s working.

2. Simulator: If you are not having a Firefox OS device still you can run and check you App on the simulator. Simulator is an add-on which is used to test apps in a Firefox OS-like environment that looks and feels like a mobile phone. If you need here you can download the Simulator and install.

3. Firefox Browser :  If you are not having Simulator installed still you can check your app on the Firefox browser opening it in the mobile mode using Ctrl+Shift+M also you can check it in various sizes choosing the sizes given.

It was all about running and testing the app. Now Let’s start building an App.

There are two types of apps you can build: packed Apps which are essentially a zip file containing all of of an apps assets: HTML, CSS, JavaScript, images, manifest, etc or hosted Apps, which are basically a website wrapped in an app. You’ll need server hosting for a hosted app.

Here I will be building a small App to write something into an text field and output it on the screen.

App Manifest:

Every Firefox OS App contains a manifest file.

1. create a folder and inside it create a file named manifest.webapp and paste the following code.

{
“name”: “Hello World”,
“description”: “An appication to check the entered value”,
“launch_path”: “/index.html”,
“icons”: {
“128”: “/images.png”
},
“developer”: {
“name”: “Your name”,
“url”: “Your Blog site url”
},
“default_locale”: “en”
}

2. Create a file named index.html and paste the following code.

<!DOCTYPE html>
<html>
<head>
<title>My First App!</title>
</head>

<body>
<h1>Hello, World!</h1>
<br />
<input type=’text’ id=’myTextInput’ value=’Type something!’onclick=”this.value=”;” />
<button id=’myButton’>Click Me!</button>
<!– link to your javascript folder –>
<script src=’hello.js’></script>
</body>
</html>

3. create a file named hello.js and paste the following code.

var button = document.getElementById(‘myButton’);
var txtInput = document.getElementById(‘myTextInput’);
button.addEventListener(‘click’, function(){
var text = txtInput.value;
// Show alert box with this text
document.write(“You have successfully typed: <strong>”+text +”</strong> !!!”);
})

4. paste any image of size 128*128 pixels and name it images.png.

Now you are done with your code. To run your App open Simulator (go to Firefox browsers Tool->Web Developer->Firefox OS Simulator) and if you are having apps installed you will see a screen like this otherwise a blank screen.

simulatorscreen

5. Click Add Directory and add your manifest file to it. Now open the simulator by clicking the stopped button and your App is installed now. Slide left on your Simulator device and click on your app you will see a screen like this:

hello_worldType something and test it.

testingappWoohha!!! Now you are done with your first app. For making the user interface of your app stylish play with css and making the buttons alive play with JavaScript codes to make the mobile world wonderful. Thank you.

5 thoughts on “How to develop Firefox OS Apps”

  3. Pingback: How To Develop Firefox OS Apps | Fx OS
  4. Amir Farsi says:

    Hi Mr thakur. Your weblog and your posts are very useful. Developing firefox os apps is very good.
    Amit, is Firefox os phones available in India? I doesn’t found Firefox os phones in Iran.

    Like

    Reply

Leave a comment