Wednesday, August 5, 2015

Setting up FireFox OS Development Environment on Windows



This post describes the setting up of FireFox OS development Environment on Windows for developing FireFox OS mobile apps.

 

About FireFox OS

FireFox OS is developed by Mozilla, the organization behind the Mozilla web browser. FireFox OS is a community driven project and the apps for this OS can be developed using HTML5 and Javascript.
 

Installation

You need Mozilla Firefox browser to develop and debug the firefox os Apps.
Install the latest version of Mozilla Firefox browser from the below link and install the browser.

https://www.mozilla.org/en-US/firefox/new/


Once Mozilla firefox is installed, launch the Mozilla browser and hit ‘Shift + F8’. This will launch the Web IDE. Alternatively you can launch Web IDE by Open Menu --> Developer -->Web IDE.

Web IDE is a browser based IDE that allows for web development and can be accessed from a web browser.

clip_image002


clip_image004


Once the Web IDE is launched, you can view the list of the components along with their installation status.


clip_image006


Click on the Ínstall’ against the latest version of the FireFox OS simulator to install the latest version of the simulator.


clip_image008


clip_image010


clip_image011


It won’t take long to install the Firefox OS simulator. Installing Firefox OS simulator is really fast.


clip_image013


Once the simulator is installed, click on ‘Select Runtime’ from the Firefox WebIDE.


clip_image015


In ‘Simulators’, select version of the Firefox OS you want to simulate. The simulator will be launched.


clip_image017


clip_image019


Now let us run a demo app in the simulator.


In Firefox WebIDE, click on ‘Open App’ and select ‘New App’.


clip_image021


Now you need to select a template for our demo app. Since this is our first app, we will select the ‘HelloWorld’ template.


clip_image023


Provide the project name. It can be anything you like, I just provided it as ‘HelloFireFoxOS’. Click ‘OK’ after providing the Project Name.


clip_image025


Provide a location where the projection can be saved.


clip_image027


The project is created and displayed in the Firefox WebIDE.


clip_image029


Select the Firefox OS version you want to simulate on right side drop down in the 2nd line of the Firefox WebIDE and click on clip_image031 symbol to launch the project in the simulator.


clip_image033


Once the app is launched on the simulator, the ‘Stop ‘button beside the ‘Start’ button will be enabled and the ‘Start’ button is changed to the ‘Install and Run.’


clip_image035


The app is launched in the simulator and the below screen is displayed. Since we haven’t really added any code and ran only the template, it is perfectly fine.


clip_image037


Click on stop button to stop the app running in the simulator.


clip_image039


Now let us make a small change to the app. Select índex.html’ and the file content is displayed.


clip_image041


Now let us change the ‘Hello World’ to ‘Hello Firefox OS’ and save the modifications by doing a Ctrl+S.


clip_image043


Now ‘Install & Run‘the app and modifications done are reflected in the app on the simulator.


clip_image045



This is a very basic demo of the sample app on FireFox OS, we should be able to build on this to create more complicated and useful apps.





2 comments: