Getting started Writing Your First Firefox OS Apps

Firefox OS  A brand new OS for smart phones.This OS User-interface & Apps are written with HTML, CSS & JS .Today in this Article If you are interested in building apps which runs in devices having Firefox OS .  Firefox OS apps are basically Web Apps!these apps run not only in Firefox OS devices, but on any device that have a browser!!! Like Android Too !! Let’s Start Here……

STEP 1: CREATE A DIRECTORY NAMED FIREFOXOS

Create a directory named firefox anywhere in your computer.
This will be the base directory – we put all files of our app here.
Create a file index.html (it doesn’t need to be index.html, it could be any name with .html extension) in the hello directory.

SEE IT IN YOUR BROWSER

Open the index.html file with your Firefox Browser. You can double-click or right-click then open with Firefox.

---

---

But…doesn’t look like a mobile app!
Because, we’ve not taken care of screen size & others.
TIPS
To test mobile screens with various sizes, press Control + Shift + M in your Firefox!

---

---

STEP 3: CREATE MANIFEST FILE

All Firefox OS apps need a manifest file. The manifest file tells the app’s name, description, permissions it requires and some other basic settings.
Manifest file can have any name,I used heremanifest.webapp but it should have .webapp extension.

{
"name": "Hello FireFox OS",
"description": "This An FireFox Hello World Apps",
"launch_path": "/index.html",
"version": "0.0.1",
"icons":{
        "16": "/img/icon-16.png",
        "32": "/img/icon-32.png",
        "48": "/img/icon-48.png",
        "60": "/img/icon-60.png",
        "128": "/img/icon-128.png"
},
"developer": {
"name":"The DevLine",
"url":"http://www.thedevline.com"
}
"default_location":"en"
}

---

---

INSTALL APP IN THE SIMULATOR!

1. Open App Manager by typing about:app-manager in the address bar of browser
2. click Start Simulator > Firefox OS x.x from the bottom bar
3. Click Add Packaged App & select the folder which contains manifest.webapp file you just created.
4. Click update
Go to the simulator & fine our app installed.

---

---

MORE FUN: ADD SOME SCRIPTS

We will add a text input box and a button in our simple app.
When user clicks button, an alert box with the text in the input field will be shown.
CHANGE THE index.html FILE
TO ADD THE INPUT ELEMENTS

---

---

CREATE A FILE NAMED apps.js
INSIDE YOUR PROJECT JS DIRECTORY( Create A JS Directory for put JS file only )
And Add the flowing code insert  your apps.js file .

//to UI elements
var button = document.getElementById('myButton');
var txtInput = document.getElementById('myTextInput');
// Bind click event of the button with an event listener
button.addEventListener('click', function(){
    var text = txtInput.value;
    // Show alert box with this text
    alert(text);
})

Open  Simulator and click Update And See the Result

Done! You have created your first  Firefox OS app!

PUBLISHING YOUR APP

Once you’ve completed your app, you need to upload it in a server, and share the link.You can submit your app in the Firefox Marketplace for more publicity!

MOZILLA DEVELOPER NETWORK (MDN)

MDNWill be your one-stop center for docs. You may also check out: HTML5,JavaScript,CSS