Creating your first mobile application for Firefox OS, the new Rockstar!

If you are new to Firefox OS, the definition says it all. "Firefox OS (project name: Boot to Gecko also known as B2G) is a Linux-based open source operating system for smartphones and tablet computers being developed by Mozilla."

Thing is that, there is a new OS coming to market sometime near future. Smartphones will be equipped with a fresh new OS known as Firefox OS. In this post, let us create a first hello world application and see it running inside Firefox OS.

No No. You don't have to learn a new language. It's a promise. Well, stop guessing now. Firefox OS is designed to allow HTML5 applications to integrate directly with the device's hardware using JavaScript. So, you just need to know a bit of html, css and javascript to begin writing awesome apps for Firefox OS.  You can access your phone's contacts, camera, settings, so on and so forth just like you did with your Hybrid Mobile Apps. Firefox OS is not just a framework like Phone Gap. It is an open source operating system written in HTML/CSS/JS/C++.  As a developer, you can modify anything and everything. Firefox OS is not a garden with a wall like other Mobile Operating systems. It is open and wall-less !!






This post is not about the history of Firefox OS, the need or its future. Read the below posts if you interested in such stuff. We shall start using it instead !!

Wiki Definition
Documentation from Firefox
Architecture


There is also a marketplace now for Firefox OS apps. Here it is https://marketplace.firefox.com 

As a developer, you only need to learn three things.

Think of a concept, use a responsive frameworks to design it, develop your apps using web technologies and publish it to marketplace. Oh Yes, you can make some money too :)

Now, the first thing to know, there are only few phones at present with Firefox OS installed. I know its difficult to get one at this point of time. So, it's obvious. There is a simulator available using which you can install your app, test it and then you can publish it.

Firefox OS Simulator

The Simulator is easy to install and runs on Windows, Linux and Mac. To install it, use Firefox as your browser and click here. (Simulator is around 60 MB. Do not worry if your browser goes for a task during installation. Just 'continue' running it.)


Once you install it, On the Firefox menu (Windows) or the Tools menu (Mac, Linux), go to Web Developer and click Firefox OS Simulator. The dashboard appears.


Click the Stopped button. It changes into the Running button and Firefox OS boots up in its own window. The default size for this window is 320x480.

 

Let us now create an application locally (without a web server) and deploy it inside the simulator. 
Follow the steps written below. (Create all the files mentioned below in a single folder)

STEP 1: WRITING HTML CODE
Create a basic index.html in your favorite editor with the below html.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<h1>Hello World from Firefox OS</h1>
</body>
</html>
STEP 2- ICONS FOR YOUR APP
Create a folder by name "img". Within that, create one more folder by name"icons" and you can add three icons with size 16 X 16 , 48 X 48 , 128 X 128 respectively. This step is just for adding an icon for your app. In my case, I have three icons by names mortar-16.png, mortar-48.png and mortar-128.png. You can have your own icons for your app.

STEP 3 - CREATE MANIFEST.WEBAPP
The Open Web App manifest contains information that a Web browser needs to interact with an app. A manifest is one of the key things that distinguish an Open Web App from a website. It is a JSON file with a name and description for the app, and it can also contain the origin of the app, icons, and the permissions required by the app, among other things.

Using your favorite text editor, create a file by name manifest.webapp. Copy the below json contents into it. Save the file.

{
  "version": "0.1",
  "name": "MY First App",
  "description": "Some Description for my awesome App",
  "launch_path": "index.html",
  "icons": {
    "16": "/img/icons/mortar-16.png",
    "48": "/img/icons/mortar-48.png",
    "128": "/img/icons/mortar-128.png"
  },
  "installs_allowed_from": ["*"],
  "appcache_path": "/cache.manifest",
  "default_locale": "en"
}

You are almost ready. I have created a video on how to deploy the application you just created. Watch it.


It is a matter of few minutes to get started with a basic hello world app for Firefox OS. This post only talks about creating and installing a basic app. You can use the device capabilities to access maps, camera, sensors and settings using javascript inside Firefox OS. We shall look into it in coming days. Happy Coding !

Popular posts from this blog

Image upload using JQuery + Uploadify + ASP.Net Custom Handler

Image
Recently, I worked on a small POC to upload image files to web server and without a visible postback. There are many solutions to upload a file to server and among many of them, one of the interesting solution is to use a jquery plugin called Uploadify . Well, the advantages of Uploadify are You can upload one or more files  It is a Jquery implementation. Works on multiple browsers. Many options to try (Set file size limit, File type filter, Callback after upload etc) You can bend it based on  your needs. Look and feel is customizable.
Read more

Generating reports with Templater, MS Word & C#

Image
Whenever developers think of report design or development, they actually think of SSRS or other report designers/engines. But many times it happens like just for the sake of few basic reports, customers will not be ready to buy those expensive reporting tools and also it is obvious that using such tools are meaningless for a small requirement. You can create reports with MS Word and MS Excel easily, it was not so easy to push data into it programmatically. In this post, let us look into a small reporting library known as " Templater " to push data into reports. Well ,
Read more

Creating a cool Microsoft Word Report for listing Scientists with Templater and C# Generic List

Image
Some time back, I had written a post on Templater Library for creating a simple "Prize Winner Notification" e-mailer template using MS Word & Templater. It was a simple one. If you have not read it yet, please have a look at this Post . In this post, let us create a Microsoft Word Report which lists few great scientists across the world. Also, let us see how the Templater supports Generic List as a data source for the report.
Read more