In this post, I will demonstrate how to build a Firefox OS app. From beginning to finish, it took around half a day. But most of the time was spent on non-coding stuffs like taking screenshots of the app and making the icons.
For the purpose of this post, we will build something very simple - the
Percent Calculator.
Here are the tools and frameworks I used:
Percent Calcuator
Here are some screenshots of the app:
Install the Firefox OS Simulator
Before we begin, be sure you have the latest version of the Firefox browser.
In the Firefox browser, click on the Firefox menu -> Web Developer -> Firefox OS Simulator.
This is your Firefox dashboard.
Toggle the Simulator button to "Running" as shown above.
Congratulations! You now have the simulator running. Play around with it to get a feel of how it works.
Creating the App Source Structure
Create the folder structure like the following:
root
->css
->app.css
->images
->js
--app.js
index.html
manifest.webapp
Download the minified versions of jquery and jquery mobile and put them in the js folder above. You may also want to roll out your own
jquery mobile theme.
After you are done, add the links to the head section of the index.html
< link rel="stylesheet" href="css/app.css">
< link rel="stylesheet" href="css/mytheme.min.css" />
< link rel="stylesheet" href="css/jquery.mobile.structure-1.3.2.min.css" />
< script src="js/jquery-1.9.1.min.js">< /script>
< script src="js/jquery.mobile-1.3.2.min.js">< /script>
< script src="js/app.js">< /script>
app.css will store all the styles while app.js will store all the logic. Note that it is very important to place all javascript codes in files outside of the index.html due to
Content Security Policy (CSP).
Here's the code for index.html so far:
css/borderless.min.css is the css file I create using the jquery theme roller.
The Manifest File
manifest.webapp defines the app's metadata. You can specify version, description, icons, developer, permissions, language, etc.
Here's the sample manifest file:
Coding the App
If you know HTML, CSS and Javascript, you should have no problem with this part. If you do not know anything about it, click
here.
There will be three files you will be constantly working with:
index.html - holds your page markup
css/app.css - all your stylings
js/app.js - all the app logic
Here are the source code for the app (All the stuffs should be self-explanatory.).
index.html
css/app.css
js/app.js
Creating the icons
Download the PSD file (Icon circle) at the bottom of this
page. Open this in photoshop and create a logo. You will want sizes of 30x30 and 60x60.
Specify these in the manifest.
Publish to the Market
Test your zip file by uploading it to the
app validator. Select App Type as Packaged.
You will probably see a bunch of CSP warnings. It is okay as long as the app is not a privileged or certified app.
When you are ready, submit it to the market. You will need to write a privacy policy as well.
