Developing apps for Firefox OS

Hello Firefox

© Lead Image © Kiyoshi Takahase Segundo, 123RF.com

© Lead Image © Kiyoshi Takahase Segundo, 123RF.com

Article from Issue 175/2015
Author(s): , Author(s):

The ZTE Open C Firefox phone costs less than $70. The integrated developer environment in Firefox makes Firefox OS ideal for users who always wanted to develop their very own apps.

The smartphone world is divided into two camps – or three if you take a closer look. Google, Apple, and Microsoft drive events with Android, iOS, and Windows Phone (or Windows 10 in the near future). Beyond these mega-corp products, three open source systems for smartphones and tablets are waiting in the wings: Ubuntu Phone [1] by Canonical, Sailfish OS [2] by Jolla, and Mozilla Firefox OS [3]. Although the first two are still fairly rare, Firefox OS has long since become part of the mainstream in the emerging economies of Brazil, Costa Rica, and Peru. You will also find phones with Firefox OS in the portfolio of major providers, such as Telefónica and Verizon [4].

For a first step into the world of Firefox OS, I will be using a ZTE Open C [5]. With its 1.2GHz dual-core CPU, 4-inch display with a resolution of 480x800 pixels, and 512MB of RAM, this is an entry-level smartphone (for details, see Table 1). For the lean Firefox OS, this kind of computing performance is more than enough; a Raspberry Pi with just one quarter of the Open C's computing performance can magic a whole, usable, desktop onto the screen – in other words, you don't need much performance to display content.

Table 1

Technical Specifications – ZTE Open C

Feature

Details

Operating system

Firefox OS 1.3

Chipset

Qualcomm MSM8210 Snapdragon 200

CPU

Dual-core, 1.2GHz, Cortex-A7

GPU

Adreno 302

Display

4.0 inch (480x800)

Memory

4GB internal, 512MB RAM

Card slot

MicroSD, up to 32GB on top

Camera

3.15Mpx (max. 2048x1536)

WLAN

802.11b/g/n, hotspot

Battery

Li-Ion, 1400mAh

Dimensions

126x64.7x10.8mm, 125g

The ZTE Open C phone is available to buy on eBay and is priced at $69.99 [6]. First impressions are positive across the board; the phone nestles nicely in your palm and does not look inferior despite its low price. The initial setup is intuitive and quickly done. However, this is not a Firefox OS or ZTE Open C product review; instead, I will embark upon some entry-level app development on Firefox OS.

Getting Started

On the Firefox OS website, Mozilla [7] states that apps on Firefox phones work with HTML5, CSS, and JavaScript. This does not sound very complicated – especially not if you've worked on websites in the recent past. In fact, the Firefox OS user interface is nothing more than a web app that, in turn, can integrate more web apps. Mozilla is not alone in its approach of using web technologies to draw a desktop: Gnome 3 also relies heavily on HTML5 and JavaScript. Doing without languages such as C++ or Java offers other benefits as well; all you need is the Firefox WebIDE [8].

Before you launch into a "Hello World" test, you first need to change a couple of things on your Linux system to allow your operating system to mount the Firefox phone with appropriate permissions. To do this, you need the phone's USB ID. You can either take this from the database on the web [9] or just look for yourself. The lsusb command outputs the information you are looking for (Listing 1). In my case, the Firefox phone has a manufacturer ID of 19d2 and a product ID of 1350.

Listing 1

Getting Information

 

You need to pass in at least one of these IDs to udev for the service to mount the device. The easiest approach is to use the manufacturer ID, that is the group of digits in front of the colon. To do this, become root and create a 52-firefoxfone.rules file in /etc/udev/rules.d/; then, add the contents of Listing 2.

Listing 2

Addition to udev

 

If you use any other Firefox smartphone, you need to change the manufacturer ID (idVendor in the listing) to match the ID output by lsusb on your system. Next, run chmod to modify the permissions for the file and restart the udev service (Listing 3). The changes do not seem to have any visible effect, but you will need the udev rule when you attempt to access the device's debug interface at the latest.

Listing 3

Modify Permissions

 

WebIDE

To develop apps for Firefox OS, you do not need a major league developer environment like Anjuta, Eclipse, or Android Studio. The Firefox browser as of version 34 includes everything you need out of the box. In the Tools | Web Developer menu, you can run the developer environment for Firefox OS apps, dubbed WebIDE by Mozilla. When you get there, go to Project | New App and create an initial app for Firefox OS. To start with, you might like to take the Hello World application as a template (Figure 1); the remaining steps will be pretty much downhill after this.

Figure 1: The Firefox browser contains the WebIDE and demo projects for developing Firefox OS apps.

The rudimentary app contains just three files and a folder. index.html determines the contents and uses embedded CSS definitions to define the appearance of the app. app.js uses addEventListener to tell the system to execute the program object. manifest.webapp defines the program name, a description, the executing object, the program icons loaded from the icons/ subfolder, and the privileges. For an initial test, you will probably want to refrain from modifying these files.

To launch the Hello World app, you either need to connect your Firefox phone to your computer via USB or install a Firefox simulator. For an initial test, or a dummy run without a Firefox OS smartphone, your best bet is to use a simulator. Below Select Runtime, you can select Install Simulator to install a Firefox simulator. For test purposes, you will want to install the version that also runs on your Firefox device. If you do not currently own a phone with Firefox OS, select the latest version, Firefox OS 3.0. The WebIDE lists the simulated device below SIMULATORS in Select Runtime. Click on the entry to launch the simulator (Figure 2).

Figure 2: The simulated Firefox phone has the HelloWorld app installed via the WebIDE on its list of installed apps.

You can control the bits and bytes of the simulator just like a physical Firefox phone made of silicon and plastic. You can use the browser to surf the web and the Marketplace to install apps on the emulated system. The camera app only gives you a black picture, but in the future, the WebIDE will tap into the computer's webcam for this [10]. The two buttons at the bottom of the window take you back to the home screen or rotate the display.

Once the emulator is running, you will see three icons in the middle of the WebIDE above the editor area – similar to an audio player. Pressing the Install and Run triangle lets you transfer the program to the emulated system and run it immediately (Figure 3). Stop App terminates the application, even if it is frozen; Debug App opens the Firefox Developer Tools at the bottom of the window for debugging.

Figure 3: The HelloWorld app can't do anything, but you can install the demo project on the phone in less than five minutes.

To be able to run the app on a physical device, you must enable USB debugging on your Firefox phone. Depending on the version, this option could be nested deep in the device's settings. On older Firefox OS smartphones, you need to enable External Debugging under Settings | Device Information | Advanced Information | Developer.

On devices with Firefox 2.2 forward, go to Settings | Developer | Debugging via USB and then enable USB debugging for ADB and DevTools (Figure 4). The WebIDE then lists the phone below USB DEVICES in the Select Runtime drop-down. Press the install button for the developer environment and allow network access to the debugging interface. Shortly after this, the WebIDE installs the Hello World app and runs it just as in the emulator.

Figure 4: If you want to use the Firefox WebIDE to install apps on a genuine phone, you need to enable debugging mode.

Conclusions

Mozilla makes it very easy for users of Firefox OS to write their own apps for the Firefox phone. They don't even need a physical Firefox phone; a computer with the Firefox browser will do. On Android or iOS, you will not find it as easy to conjure a "Hello World" onto your phone's display. Additionally, basic knowledge of JavaScript, HTML5, and CSS is easier to acquire than Java or Objective C skills. On the Mozilla Developer Network (MDN), Mozilla also provides comprehensive help [11].

Critics might claim that Firefox OS is still a little immature, and they might point to the limited selection of apps, but the first Android versions were also very much in need of improvement. Given the performance that Firefox OS offers, remember how inexpensive the hardware is. You wouldn't compare an economy car with a Mercedes and complain about the lack of extras. A ZTE Open C costs one tenth the price of the latest iPhone.

Thus, if you are looking for easy entry into the world of app development, you won't go far wrong with Firefox OS. No other mobile operating system makes it so easy for newcomers to start programming. Additionally, if you are skeptical about the volume of data that Google, Apple, and Microsoft collects from users, you might also want to consider a Firefox phone. The development of Firefox OS is just starting to take off.

Buy this article as PDF

Express-Checkout as PDF
Price $2.95
(incl. VAT)

Buy Linux Magazine

SINGLE ISSUES
 
SUBSCRIPTIONS
 
TABLET & SMARTPHONE APPS
Get it on Google Play

US / Canada

Get it on Google Play

UK / Australia

Related content

comments powered by Disqus
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters

Support Our Work

Linux Magazine content is made possible with support from readers like you. Please consider contributing when you’ve found an article to be beneficial.

Learn More

News