developer24hours: August 2013

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:

sublime 3 Text Editor
jquery mobile

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.

Download the Firefox OS Simulator as an add-on.

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:

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">

	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width">

	<!-- Place favicon.ico in the root directory -->

	<link rel="stylesheet" href="css/app.css">
	<link rel="stylesheet" href="css/borderless.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>
	</head>
	<body>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

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:

	{
	"version": "1.0",
	"name": "Percent Calculator",
	"description": "Calculates Percent and Percentages. For example, putting in 20 in the value input and 50 in the percentage(%) input will give you 10 as the result",
	"launch_path": "/index.html",
	"icons": {
	"16": "/images/icons/percent_16.png",
	"30": "/images/icons/percent_30.png",
	"48": "/images/icons/percent_48.png",
	"60": "/images/icons/percent_60.png",
	"128": "/images/icons/percent_128.png"
	},
	"developer": {
	"name": "Kenneth",
	"url": "http://developer24hours.blogspot.ca"
	},
	"installs_allowed_from": ["*"],
	"default_locale": "en",
	"orientation": ["portrait"]
	}

view raw manifest.json hosted with ❤ by GitHub

You will want to bookmark the permission page.

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

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">

	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width">

	<!-- Place favicon.ico in the root directory -->

	<link rel="stylesheet" href="css/app.css">
	<link rel="stylesheet" href="css/borderless.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>
	</head>
	<body>
	<div data-role="page" id="main">

	<div data-role="header">
	<h1>% calculator</h1>
	</div><!-- /header -->

	<div data-role="content">
	<div id="result_panel" class="result_panel">
	0.00
	</div>
	<div data-role="fieldcontain">
	<label for="value_input" class="label_style">Value:</label>
	<input type="number" name="value_input" id="value_input" value="">
	</div>
	<div data-role="fieldcontain">
	<label for="percent_input">Percentage (%):</label>
	<input type="number" name="percent_input" id="percent_input" value="">
	</div>

	</div><!-- /content -->

	<div data-role="footer" data-position="fixed">
	<a href="#" id="action_clear" data-role="button" data-icon="delete" class="footer_margin button_style">Clear</a>
	<a href="#about" data-role="button" data-icon="info" data-rel="dialog" data-transition="pop" class="footer_margin button_style" style="float: right;">About</a>
	</div><!-- /footer -->

	</div><!-- /page about-->
	<div data-role="page" id="about">

	<div data-role="header">
	<h1>About</h1>
	</div><!-- /header -->

	<div data-role="content">
	<p>
	Thank you for using Percentage Calculator.
	</p>
	<p>
	Contact support at <a href="mailto:clevre.developer@gmail.com&subject=Percentage Calculator%20Support%20Request">clevre.developer@gmail.com</a>.
	</p>
	</div><!-- /content -->
	</div><!-- /page about -->
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

css/app.css

	.result_panel {
	margin-top: 25px;
	text-align: center;
	font-size: 2em;
	word-wrap:break-word;
	}

	a.footer_margin {
	padding-top: 3px;
	}

	a.button_style {
	border: none;
	background: none;
	}

	a.button_style:hover {
	background: none;
	color: #0077cc;
	}

	label.label_style {
	width: 20%;
	}

view raw app.css hosted with ❤ by GitHub

js/app.js

	function calculatePercentage(value, percent) {
	return value * percent / 100;
	}

	function calculatePercentageForResultPanel() {
	var valueInput = $('#value_input');
	var percentInput = $('#percent_input');
	var resultPanel = $('#result_panel');
	var finalValue = calculatePercentage(valueInput.val(), percentInput.val());
	resultPanel.html(finalValue);
	}

	function clearInputs() {
	$('#value_input').val('');
	$('#percent_input').val('');
	$('#result_panel').html('0.00');
	}


	$(document).ready(function(){
	var valueInput = $('#value_input');
	var percentInput = $('#percent_input');
	var resultPanel = $('#result_panel');

	valueInput.keyup(function(){
	calculatePercentageForResultPanel()
	});

	percentInput.keyup(function(){
	calculatePercentageForResultPanel()
	});

	$('#action_clear').click(function(){
	clearInputs();
	});
	});

view raw app.js hosted with ❤ by GitHub

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

When you are ready, zip everything inside the root folder. Login to the Firefox Marketplace.

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.

developer24hours

Sunday, August 25, 2013

Uninstall NodeJS from MacOSX

Sunday, August 18, 2013

FireFox OS Tutorial - Creating a Percent Calculator App