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……

Firefox OS

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.


Firefox OS

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!


Firefox OS

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"
}

Firefox OS

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.


Firefox OS

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


Firefox OS

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

Firefox OS

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

Leave a Reply

avatar
  Subscribe  
Notify of