Hi again!
The other day in TID I was told there is not much information about how to start a HTML5 application for Firefox OS and deploy it into the device. There is. Seriously. But I have to admit there is not a straight way to the topic and you could get lost in the middle of all the available information. So this is a try to provide a quick and basic Firefox OS application tutorial.
Step 0: set-up the environment
Firefox Nightly
Nightly is the latest version of Firefox. Always. Built every night from the source-code. You can download it from the Nightly’s official site.
Before open it, it is very important you close all sessions of Firefox.
Firefox OS Simulator
This is an extension to Firefox; grab it by clicking on «+ Add to Firefox» from the Firefox OS Simulator add-on page.
The device and drivers
If you are fortunate enough then you have a Firefox OS device. If not, you can purchase one from Geekphone’s store. You need its drivers as well and they depend on the device you have and the operating system of your PC.
- iOS users need nothing at all. Lucky ones!
- Linux users need to add UDEV rules according to Android’s developer guide. You can use this (unverified) universal rule.
- Windows users should install an unsigned modified Android driver from Geeksphone.
Finally, in the device go to Settings > Information > More information > Developer and enable «Remote debugging».
Now you are ready to start developing Firefox OS applications!
Step 1: the first app
Before starting, create a new folder. Name it as you want (i.e. myapp) and enter the folder. All your application files will go here.
Open your favorite text editor and create a new document named «index.html». Now enter the following HTML5 code and save it inside the folder you created before.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="pragma" content="no-cache" />
</head>
<body>
<p>This is my first Firefox OS application.</p>
</body>
</html>
If you are not used with HTML5, let’s take a quick review to the code:
- Line 1 indicates the navigator we are using HTML5.
- Line 2 is the beginning of the HTML5 document.
- Line 3 indicates the beginning of the head section where metadata goes.
- Line 4 is metadata saying the document is encoded in «UTF-8».
- Line 5 is more metadata saying you don’t want Firefox OS to cache the content. This is very convenient while developing.
- Line 6 indicates the end of the head section.
- Line 7 indicates the beginning of the body section where content goes.
- Line 8 is a paragraph with some text.
- Line 9 indicates the end of the body section.
- And line 10 indicates the end of the HTML5 document.
Step 2: the manifest
The index.html is one of the two things you need to make a Firefox OS application. Again, use your favorite text editor an create another file named «manifest.webapp», Put this text inside:
{
"name": "MyApp",
"description": "My first Firefox OS application",
"launch_path": "index.html"
}
This is a JSON file. Again, if you never read about this format before let’s review what is it saying:
- Line 1 indicates the beginning of a JSON object. A JSON object is a list of pairs «key»: «value».
- Line 2 is the key «name» which indicates the name of the application.
- Line 3 contains the key «description» with the description of the application.
- Line 4 has the key «launch_path» which says Firefox OS what file must be opened when launching the application.
- Line 5 ends the JSON object.
Step 3: test your application!
Yes, you’ve read well, it’s time to test your application. Nothing more is needed. Now open Nightly and click on Tools menu, then go to Web Developer > Firefox OS Simulator.
This will open the dashboard. Click on «Add directory» button and navigate to the folder you created in step 1. Select the manifest file and accept. This will launch the Firefox OS simulator allowing you to see your application as if it were running in a real device.
If you modify the application while the application is still running, go to «App» menu, then «Refresh» to reload the app.
Step 4: testing on the device!
If you have a device, connect it to your PC. If the drivers are installed properly you should see the phrase «Device connected» below the «Simulator» switch. Furthermore, your application entry will display a «Push» button.
Press the «Push» button and your application will be uploaded to your phone. The first time you upload an application, a prompt will be displayed on it. If you accept, the application will be installed and a status message will appear when finished.
Then you can go to your home screen and search for your application. Open it and see the results.
Note there is no such thing as Refresh in your real device. If you change the source files in your PC, you need to push your application again. Furthermore, you must close the application and reopen to see the changes.
Congratulations. You have written and run your first Firefox OS application.
Uno + uno = diez 