Today, we can find an application for almost any problem that we encounter. This is thanks to various developers and their creative ideas, which have resulted in the development of so many interesting applications.
Firefox app development is a good place to begin with for those with an interest in making an open source contribution or who would like to increase their knowledge on how mobile apps are developed. Moreover, if you have the ideas, you need to put them into action or else they get wasted. Firefox apps are just like Web pages, which can be viewed in your browser.
Think of an interesting idea
The most important part of app development is the basic idea behind it. This could be anythingfrom solving a small issue in your locality to some giant project. The way we think decides the way we develop our app. We need to make good observations about things happening around us. Go out and understand the problems faced by people and then come out with a solution. Try to interact with mobile app users. Besides, use the mobile applications available and understand what is lacking in them what additional feature you could add to them to improve their performance. You may think your idea is too simple, but it could be of help to many.
You can also go to the Firefox Marketplace, where all the Firefox products are available, to check the various apps before thinking of an idea.
The coding skills you require
Once you are ready with some interesting idea, your next step is to implement it. An artist uses unique brushstrokes to give life to his imagination on canvas. For developers, this has to be done through various programming languages. So, you should have some knowledge of HTML, CSS and JavaScript, all of which will stand as the basic outline or skeleton of the application that you are going to develop. CSS will help you to beautify your app using interesting features. JavaScript will help you make the app dynamic by implementing interactions with the user. Ensure that you make the best use of all three, and make your app as user friendly and attractive as possible.
Tools needed
Once you have the idea and the coding skills, you need to ensure that you have got all the tools ready to shape up your app and also to view it in a comfortable way. First, you need a good editor to write the code. You can think of using Sublime, Kate, Geany, Brackets, or even the basic text editor available with the OS.
Make sure that you have a Firefox browser running in your system; update it to the latest version to avoid any issues. You can view the app in the browser. If you want to work in the mobile domain (which is preferable), install the Firefox OS simulator; you will get it as a Firefox browser add-on.
You will have four types of files:
1. HTML
2. CSS
3. JavaScript
4. webapp
The first three types are related to the coding process with which we are familiar. The .webapp file contains the basic details of the app you build. A more elaborate idea of .webapp (especially regarding its contents) will be given in the upcoming section.
Start building your app
I will demonstrate how to develop something very small like the Hello world app. To begin with, create a directory named app anywhere in your system. This will remain the directory of the Hello world app we are going to build.
Now, to create the outline of the app, lets make use of HTML. Create an index.html file with the following contents. There is no mandatory condition that you need to name the file index.html. You can name it any name.html.
<!DOCTYPE html> <html> <head> <title>Hello world App</title> </head> <body> <h1>Hello World</h1> </body> </html>
Now, once you go to the Firefox browser and open the .html file you have created, you will observe something like whats shown in Figure 1.
But, we do not have a mobile look in the browser. So press Ctr+Shft+M to get a mobile look and feel. You will get something like whats shown in Figure 2.
Once you have written the .html file, your next step is to create the manifest file of the type .webapp, which contains the basic details of the app. So, lets go ahead and create this file.
Given below is an example of a manifest.webapp file:
{
name: My App,
description: My awesome app,
launch_path: index.html,
icons: {
512: /img/icon-512.png,
128: /img/icon-128.png
},
developer: {
name: Your name or organization,
url: http://your-homepage-here.org
},
default_locale: en
}
You need to give the name of your app and a description of it. The launch path is within the apps origin that is loaded when the app starts (the index.html file in this case). It is recommended that you give two images of 128×128 pixels and the other of 512×512 pixels to be used as your apps icons. Now you need to provide the developer name and URL. Default_locale is the language in which the app communicates with the user.
Once you have completed your manifest.webapp file, you can add your app to the Firefox simulator. Now, go on and use all your CSS and JavaScript skills to make the app even more interesting.
You can also think of adding JQuery elements to make the app more responsive and attractive.
How to use the Firefox OS simulator
Once you have installed the Firefox OS simulator, you can access it through Tools->Web Developer->Firefox OS simulator
You will get something like what is shown in Figure 3.
Now you need to select the Add Directory option, and add the manifest file of your app. Your file gets loaded and will be visible in the dashboard (Figure 4).
The simulator starts running and you will get the app in the simulator (Figure 5).
Now, submit your app to Firefox Marketplace.
Once you complete building your app, you can upload it to Firefox Marketplace and share it with your friends, for which you need to have a Firefox account. Log in to your account, follow the instructions and upload your app to the Marketplace. Make sure you have good coding styles. The apps are tested under various conditions and are reviewed by experts. Once your app passes all the tests, it gets published in the Marketplace.
References
[1] https://developer.mozilla.org/en-US/Apps/Build
[2] http://shafiul.github.io/slides/kickstart_fxos.html#/
