Apache Cordova Tutorials

This is a series on setting up the development environments for various mobile platforms and using the various cordova core API's for developing Apache cordova apps.


Installing NodeJs on Windows

Setting up Mozilla FirefoxOS development environment on Windows.

Setting up Mozilla FirefoxOS development environment on Mac

Setting up Mozilla FirefoxOS development environment on Ubuntu

Setting up Windows Mobile Development environment.

Setting up Mozilla FireFox OS development environment and Simulator on Mac.

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.

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.





Once the Web IDE is launched, you can create a new app, open existing app, install new simulator or launch the existing simulators.



To install a new simulator, select ‘Select Runtime’ –> Install Simulator.



This will display the list of all the available FireFox OS simulators. If the simulator is already installed, a ‘uninstall’ button will be displayed against the simulator and if the simulator is not yet installed, a ‘install’ button will be displayed against the simulator.





Click on ‘Install’ button against the simulator you want to install to start the installation process.



Installation of FireFox OS simulator on Mac takes some time, so wait till the installation is complete.



Once the installation is complete, ‘Uninstall’ button will be displayed against the simulator installed.



Once the simulator is installed, click on ‘Select Rutime’ from the Firefox WebID and you can the see the installed version of the simulator under the ‘Simulators’ section.



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



Now let us run a demo app in the simulator.
In Firefox WebIDE, click on ‘Open App’ and select ‘New App’.



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



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



Provide a location where the projection can be saved.



The project is created and displayed in the Firefox WebIDE.



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



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.’



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.



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



Now let us make a small change to the code and see if the change is reflected in the simulator. On the FireFox Menu bar select ‘Device Preferences’



On the Device Preferences, In General section, Select ‘Show editor’ if it is not already selected. This will displayed the editor if it is not already displayed.



As you can see, the app project structure along with the editor is displayed after we changed the preferences above.



Now let us make a small change to the app. Select índex.html’ and the file content is displayed.
Change the ‘Hello World’ to ‘Hello Firefox OS’ and save the modifications.





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



The installation of Mozilla FireFox OS development environment is similar on the Windows, Linux or the Mac platforms as the Web IDE is integrated into Mozilla FireFox browser and so all the process will be similar. We have seen on how to set up FireFox OS development environment, including how to install the simulators and running simulators on Mac and also we created a sample application. The process for creating complex apps is also similar, but you need to have better understanding of the FireFox OS API’s.

Setting up FireFox OS development environment on Ubuntu.

Mozilla FireFox comes preinstalled on Ubuntu OS. If it is not preinstalled on your flavor of Linux, install Mozilla FireFox from the below link.

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

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.





Once the Web IDE is launched, you can create new apps, open existing apps, launch the simulators or create new simulators.



To install a new simulator, select ‘Select Runtime’’ and Click on ‘Install Simulator’ to install a new simulator.





Click on the ‘Install’ against the latest version of the FireFox OS simulator to install the latest version of the simulator.







It won’t take long to install the Firefox OS simulator. Installing Firefox OS simulator is really fast.
Once the simulator is installed, click on ‘Select Runtime’ from the Firefox WebIDE.





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



Now let us run a demo app in the simulator.
In Firefox WebIDE, click on ‘Open App’ and select ‘New App’.



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



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



Select a location where the projection can be saved.





The project is created and displayed in the Firefox WebIDE.



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



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.’
 




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.



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



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



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



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



We have configured the environment to develop FireFox apps and test them on simulators and ran sample apps. We should be able to create more complicated apps following the same process.

< Previous