Hacking Gaia

14 Sep 2012

Mozilla's Firefox OS also known as b2g is an awesome feat from the community towards its goal to provide platform for innovation and creativity. It was a necessary step considering the growth of mobile market. Smart phone is a front which lacks an open and powerful OS, which let's you hack into every aspect of the user experience(There is Android but it's not that easy to customize it.). In b2g, just by changing a CSS file or by modifying a JavaScript file, you can change the look and functionality of your phone dramatically.

B2g uses Gaia for it's UI. Gaia is all Html5,CSS and JavaScript. It can even run on a desktop browser(except the ). The whole OS is far from first release but you can start creating apps for it right now and try them on emulator, your desktop browser(for development purpose) or on your phone.

There are two steps for building  b2g and start working on an app. I have tried these steps on Linux and works for an emulator.

Building B2G:

If you don't want the pain of sitting around your laptop for hours, waiting for the compilation to finish, you can directly download latest version of b2g from here.
If you still want to compile it by yourself then go ahead else skip to next part.

Getting the source code from mozilla-central:

 hg clone http://hg.mozilla.org/mozilla-central src  
If you encounter an 'Command not found hg' you need to install Mercurial: https://developer.mozilla.org/en/Installing_Mercurial

Update the code:
 cd src  
hg pull && hg update

Create a '.mozconfig' file in mozilla-central source directory and paste following in the file. Also read comments and act accordingly.

  mk_add_options MOZ_OBJDIR=../build   
#Here put NUMBER_OF_CORES_IN_YOUR_PROCESSOR+1 in place of '9'
mk_add_options MOZ_MAKE_FLAGS="-j9 -s"
ac_add_options --enable-application=b2g
ac_add_options --disable-libjpeg-turbo
# This option is required if you want to be able to run Gaia's tests
ac_add_options --enable-tests
# turn on mozTelephony/mozSms interfaces
# Only turn this line on if you actually have a dev phone
# you want to forward to. If you get crashes at startup,
# make sure this line is commented.
#ac_add_options --enable-b2g-ril

Now, build:

 make -f client.mk build  
If you face any errors or difficulty in this step, refer this for required library installation and other difficulties, but DO NOT change the '.mozconfig' file.

Now you can go and have some coffee or even a nap because this is going to take long.

Building Gaia Profile:

First, clone repository from Github and update it:

 git clone https://github.com/mozilla-b2g/gaia gaia  
cd gaia
git fetch
git merge origin/master

Compile it:

Now, if you have downloaded nightly build of b2g then run:

 /path/to/b2g -profile profile  
 ../build/dist/bin/b2g -profile profile  


All the apps are in /gaia/apps directory.

Steps to add a new app:

To create and test a new app on the emulator, create a new directory under apps directory.
Add your Html,CSS and JavaScript code in the directory and create a 'manifest.webapp' file with necessary information about the app. You can checkout  pre-installed apps manifest files for reference.
After doing that, append your app details in the file gaia/webapps.js. Like if your app name is 'HelloWorld', then you will make a directory named 'helloworld' in gaia/apps directory and put all you app code there.
Now create a 'manifest.webapp' file in 'helloworld' directory and fill in necessary details like app name, developer name, orientation, language localisation etc.
Now append following in webapps.js file where all the apps are added to a js object:

 "helloworld": {  
"origin": rootPath.replace('%%%', 'helloworld'),
"installOrigin": "http://helloworld.localhost.org:8080",
"receipt": null,
"installTime": 132333986000,
"manifestURL": "http://helloworld.localhost.org:8080/manifest.webapp"

Now run following in gaia directory:

 make install-gaia
/path/to/b2g -profile profile

Now you can run your app in emulator and check it out.
You can find more details about running Gaia on phone or on a browser here.

Discussion, links, and tweets

Software Engineer at AWS using simulation to train robots. I am obsessed about history.