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.
Here is a screenshot of a Firefox OS device.
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
Here I will be building a small App to write something into an text field and output it on the screen.
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”,
“name”: “Your name”,
“url”: “Your Blog site url”
2. Create a file named index.html and paste the following code.
<title>My First App!</title>
<input type=’text’ id=’myTextInput’ value=’Type something!’onclick=”this.value=”;” />
<button id=’myButton’>Click Me!</button>
3. create a file named hello.js and paste the following code.
var button = document.getElementById(‘myButton’);
var txtInput = document.getElementById(‘myTextInput’);
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.
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: