Firefox OS Tutorial : Episode 1 : Overview and Development Setup

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:

Keon


ff-keon

Peak

ff-peak-plus

There is a 3rd device now (Peak+) and it is taking orders, if you want one.

ff-peak

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.

Developing for Firefox OS means developing for the Web. You will need to be comfortable with HTML5, CSS and JavaScript language. That is the bare minimum you will need to know. The better you are at it, the easier it will be. Since Firefox runs Web applications, you can use all the cool JavaScript frameworks/libraries that you are used to. Nothing prevents you from using that.

Along the way, I shall try and cover some of the HTML5 JavaScript APIs but I strongly suggest that you be comfortable with basic Web technologies like HTML5/CSS/JavaScript. Code Academy has some great tutorials (HTML/CSS and JavaScript), if you want to learn about them.

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.

ff-marketplace

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:

  1. Ensure you install the latest version of the Firefox Browser. I have version 22.0 running on my machine.ff-version
  2. From your Firefox Browser, visit the following url:

    https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/

  3. This will bring up the following Add-On page as shown below:ff-addon-install
  4. 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:ff-addon-downloading
  5. 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.ff-addon-install-permission
  6. Click on Install Now. Once it is installed, it should ideally display a message as shown below:

    ff-addon-install-success
  7. The add-on is now available available from the Firefox main menu, under Web Developer -> Firefox OS Simulator.ff-addon-browser-lin

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.

ff-addon-screen

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:

ff-simulator-screen1

and then the following:

ff-simulator-screen2

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:

ff-simulator-screen3

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.ff-simulator-screen-homebutton
  • 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


Firefox OS

Advertisements

15 thoughts on “Firefox OS Tutorial : Episode 1 : Overview and Development Setup

    1. Hi Rohit,

      Thanks for the feedback. I do not have any problem installing apps from the Marketplace.

      Few things:
      a) Upgrade to the latest version of the Simulator.
      b) Does the Marketplace App launch?
      c) Are you able to install any app?

      I was able to install a bunch of them, including my own apps from the marketplace.

      Cheers
      Romin

    1. Thank you very much for your feedback. Hope you got a chance to go through the earlier episodes also. Yes – more tutorials are in the pipeline — another one will be published tomorrow on Web Activities.

      Cheers
      Romin

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s