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
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:
"description": "My first Firefox OS application",
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.
If you have some experience with HTML5 it should not take you more than 30 minutes to complete this tutorial (hoping all the driver stuff did not freak you out) but the test application make almost nothing so it’s probably you were wonder what are the next steps?
What can I really do with Firefox OS?
A brief introduction of Firefox OS applications
“The web is the platform” is what Mozilla wields when selling Firefox OS so any web application is a Firefox OS application. You need nothing more than an already running web app to say you have a Firefox OS app. In this tutorial you have learn how to build a packaged application which is no more than a normal web app compressed into a zip.
These applications are called web applications. They have access to all HTML5 APIs and have no special security policies.
But although HTML5 has a lot of APIs which can be exploited to provide rich applications with lots of cool features, you probably want to use some more device specific APIs such contacts, SMS, camera, Bluetooth, device storage…
Testing privileged / certified applications
With the Firefox OS Simulator, you can test and push any kind of application but take in count: in real life certified applications can only be pre-installed while privileged applications can only be installed from the Firefox Marketplace after a review of the source code to ensure some level of security.
Permissions and APIs
In order to use privileged or certified APIs you need to ask for permission. This is done by setting the keys “type” and “permissions” inside the manifest. Check MDN documentation to see the relationships between APIs, permissions and security levels.
Hacking Firefox OS: unleashing the true power
Firefox OS is a free software project and you can not only program your own applications but having the opportunity to provide a complete new experience by tweaking or replacing some Gaia components or even the whole system. If you want a child-focused device with two buttons for calling mom and dad, you can do it; if you want a device with a big red emergency button, you can do it; if you want a device not allowing phone communications at all, you can do it! But the process of customizing Gaia is very different from the process explained in this story. If you want to dive into Gaia hacking, please, check the MDN Hacking Gaia guide.
And that’s all, I hope this tutorial proves that Firefox OS development is quite easy and fast. Of course, much more can be said: how to debug an application? how to make an application to look “native”? how to use Firefox OS’ most representative features such as system messages or web activities? and I will write about them if this post is liked enough so, you know, comments please!
PD: At the moment of publishing this post, some colleagues from Telefonica Digital have release an interesting tool for Yeoman you can check if you are a command line enthusiastic. The tool provides you with a complete application skeleton you can use to quickly start the development.