Welcome to a series of tutorials on getting started with Firefox OS development.
I will assume that the reason you are here is to learn how to write Firefox OS apps. Well, if you are web developer, I can safely state that you already know how to write Firefox OS Applications since what the Firefox OS device runs are web applications.
There is enough material on the web available on the history of Firefox OS, the reasons for its existence, the devices that currently run the OS and more. I will not get into those details but briefly touch upon them so that we are on the same page. If you want to know more about why I want Firefox OS to succeed, here is my blog post titled “Firefox OS – The Mobile Platform That Needs To Succeed”
What is Firefox OS? A Quick Overview Please !
Mozilla has done a great job of this via their videos. I strongly suggest to check out the following for a developer centric overview.
Current list of devices supporting Firefox OS
We have 2 devices at the moment:
There is a 3rd device now (Peak+) and it is taking orders, if you want one.
If you want to learn about specifications for each of the devices like memory, screen size, Chip, etc – you should visit the Geeksphone page.
What do I need to learn?
Chances are that if you are web developer, you know everything there is to building Firefox OS Apps. Use all the tools/frameworks that the Web provides and it should work well. Remember these are days of infancy for Firefox OS, so do expect hiccups along the way.
Is there a Firefox Marketplace?
Yes, there is a Firefox Marketplace for your apps. This is one similar lines to the ones for other Vendors and if you are familiar with the submission process for them, you will find this no different.
Few things to note here:
- There is no one-time registration fee or yearly fee for being a publisher on the Firefox Marketplace.
- You can have both paid and free applications.
- There is a review process after you submit your application and on approval, it is listed as available in the Marketplace.
We shall cover the complete process of submitting your Firefox OS application to the Marketplace in a future episode. This will suffice for now.
Can we get going with the installation of Dev Tools, please?
Sorry mate ! There is no need for any special IDE for Firefox OS App Development. Feel free to use whatever tools you have in your toolbox for Web Development. As long as you are able to generate a standards based HTML5 Web app, you will be all set. All you really need is your good old text editor to get going.
In later episodes, we shall show how we could take an existing web application, do a little bit of manifest work and boom, the app is ready for Firefox OS. But more on that later.
Firefox OS Simulator
Mozilla makes available a Firefox Browser plugin that gives you a simulator to test out your Firefox OS Apps. Do note that since this is a simulator, its functionality will be limited when it comes to Device specific APIs, but we do not need to worry about that for the moment.
So, this is what you need to do:
- Ensure you install the latest version of the Firefox Browser. I have version 22.0 running on my machine.
- From your Firefox Browser, visit the following url:
- This will bring up the following Add-On page as shown below:
- Click on the green Add to Firefox button. This will start downloading the Firefox OS Simulator add-on as shown. It might take a while on slow connections, so be patient. You will see a downloading progress window as shown below:
- When the download is complete, it will show a dialog where you will be asked to give your permission to go ahead and install the add-on.
- Click on Install Now. Once it is installed, it should ideally display a message as shown below:
- The add-on is now available available from the Firefox main menu, under Web Developer -> Firefox OS Simulator.
Test Drive the Firefox OS Simulator
It is important for you to get familiar with the Simulator.
Click on Web Developer -> Firefox OS Simulator. This will bring up the Add-on page as shown below.
You will notice that it says “Stopped“. Toggle the button by clicking on it. This will change to “Running” and you should find the Firefox OS Simulator come up, as shown below:
and then the following:
Go ahead, use your mouse and use it like a phone. Swipe with your mouse to the left and right and it will bring up other screens, as shown below:
If you have worked with other mobile development environments, this should look familiar. You have a full fledged phone simulator and you can play around with it, just like you would use a normal phone.
Try some of the following with the Simulator:
- Launch the browser and navigate to any site. Ensure that you have internet connection on your desktop/laptop.
- Get used to the Home button at the bottom of the Simulator screen as shown below. The button will take you back to the Home screen from wherever you may be.
- The pull down bar that Android made popular is availabe here too. Just drag your mouse right from the top and you will get a bar with settings for WiFi, Bluetooth, etc. The last option is for Settings for your Simulator.
This marks the end of Episode 1. In the next episode, we shall look at writing our first application. We will stick to tradition and write Hello World on Firefox OS.
Complete Firefox OS Tutorial
- Episode 1 : Setting up your Development Environment
- Episode 2 : Hello World
- Episode 3 : Working with the OS Simulator
- Episode 4 : Submitting your Application to the Firefox Marketplace
- Episode 5 : Location, Location, Location
- Episode 6 : Enabling Storage
- Episode 7 : Storage using IndexedDB
- Episode 8 : Using Web Activities
- Episode 9 : Device Storage
- Episode 10 : Using mBaaS