HACKING WITH B2G

Web apps and customisation

Rob Hawkes

Hi, I’m Rob Hawkes and this is a little intro to hacking around with Boot to Gecko.

B2G Gaia

B2G is actually two separate things; B2G and Gaia

The B2G side is the hardware-related stuff and JavaScript APIs that we need to make the phone work.

The B2G side is pretty much everything that you don’t see.

Gaia is the stuff you can see and the things you can interact with.

Although you can hack around with and help with the core Boot to Gecko functionality, you’ll probably be most interested in the front-end Gaia operating system and the Web apps that can be created for it.

Using B2G today

There are a few options

There are a 2 main options to start using and playing with B2G this evening.

If you have some knowledge of git, you can clone the Gaia repository and launch Gaia using a recent Firefox Nightly build.

Pros: - No build system  and very little setup required- Can use the Firefox dev tools

Cons:- The viewport is based on the size of the browser window- Many device-like things won't work- Apps are launched in separate, pinned tabs- Firefox Nightly might be unstable

http://nightly.mozilla.orghttps://github.com/andreasgal/gaia/

There is also gaia-devserver, a node-based tool for developing Gaia in Firefox Nightly.

https://github.com/jrburke/gaia-devserver

Gaia in Nightly

You’ll have to resize the browser to get it looking right but it’s a great way to quickly play with Gaia and start developing apps for it.

B2G Device

The other option is to use one of the 3 B2G devices that I’ve brought along this evening.

https://developer.mozilla.org/en/Mozilla/Boot_to_Gecko#Setting_up_.26_building_Boot_to_Gecko

Open Web Apps

Creating apps for Boot to Gecko

Open Web Apps is an initiative that is core to B2G and one that is important to the Web as a whole.

It’s a way of creating and distributing apps that puts the developers and users of apps back in charge.

It’s a way that embraces open technology and is for the good of the Web.

Getting started

How to create an app

Creating a Web app isn’t crazy hard, it’s just a case of understanding the new features in browsers.

https://developer.mozilla.org/en/Apps

Apps are websites

They use the same technology

Apps are websites and are built using the same technology and processes.

If you already know how to make a website then creating your first Web app is a breeze.

Application manifest

Turning a website into an app

The only thing that you need to do to turn a website into app is create an application manifest.

{

"version": "1.0",

"name": "MozillaBall",

"description": "Exciting Open Web development action!",

"icons": {

"16": "/img/icon-16.png",

"48": "/img/icon-48.png",

"128": "/img/icon-128.png"

},

"developer": {

"name": "Mozilla Labs",

"url": "http://mozillalabs.com"

},

"installs_allowed_from": [

"https://appstore.mozillalabs.com"

],

"default_locale": "en"

}

This is a JSON file that effectively describes your application; it’s name, icons, and other related data.

Manifest requirements

Important to remember

There are a couple of important things to remember when creating an application manifest.

Same domain

An element of security

The first is that it needs to be hosted from the same domain as your Web app.

This is pretty straightforward and it adds an element of security in that it is unlikely that a rouge manifest file will be able to be put on the same domain without your knowledge.

Content-type header

application/x-web-app-manifest+json

The second is that it needs to be served with a specific content type (application/x-web-app-manifest+json).

This is probably the most tricky process in turning a website into an app as it involves changing settings on your server or a bit of hackery in your manifest file.

If you don’t want to fiddle with your server then you can always set the content-type header using something like PHP or Node.js.

Manifest validator

Making sure everything is ok

If you want to make sure your manifest is valid you can have it checked at http://appmanifest.org

Installing apps

Through the browser or Marketplace

You can install apps in B2G through the browser or the Mozilla Marketplace.

You can also install apps on the desktop and Android using Firefox.

Installing an app

navigator.mozApps.install(manifestUrl)

Behind the scenes, installing an app is achieved through the new mozApps JavaScript API.

By passing the ‘install’ method a string URL to the app’s manifest file you will trigger the installation process.

An example of when you would call this method is after a user clicks on an “Install this app” button on your own website.

It would be called automatically if your app was installed from the Mozilla Marketplace, or any other external website.

The install method triggers an installation dialogue within the browser that allows the user to decide what to do with the app.

On Windows, a desktop shortcut is created for the app you installed and it will also be in the start menu.

On Mac, the app is added to your /Applications directory.

On B2G, the app is added to your homescreen.

Gaia hackery

Pushing apps and tweaks to the device

The 3 devices that I’ve brought along for you today are already set up ready to have applications pushed to them and things tweaked.

To do that you’ll need to plug the device into your computer and directly push updates to it.

This approach is useful for development as it allows you to quickly test things without having to upload the app to the Web and installing or updating it from there.

https://wiki.mozilla.org/B2G/DeveloperPhone#Advanced_Gaia_Hacking

The first thing you need is the Android Debug Bridge.

This allows you to communicate between your computer and the B2G device via a USB cable.

http://developer.android.com/sdk/index.html

Dev installation

https://github.com/andreasgal/gaia/

The next step, if you haven’t got it already, is to download Gaia from GitHub.

The very latest version may be unstable so it’s recommended to use the build that we’ve brought along and can provide you on a memory stick.

https://github.com/andreasgal/gaia/

Dev installation

Add app to ‘../gaia/apps/myapp’

Once you have Gaia then add or create your application in the ‘../gaia/apps/myapp’ directory.

Make sure to include the application manifest file.

Dev installation

make install-gaia

The last step is to push your app and any Gaia updates to the device.

That’s it!

Documentation

Everything that you need

Here are a few of the key places to go for documentation about developing on B2G and Open Web Apps.

Boot to Gecko MDN documentation

https://developer.mozilla.org/en/Mozilla/Boot_to_Gecko

Gaia Hacking documentation

https://wiki.mozilla.org/Gaia/Hacking

Open Web Apps documentation

https://developer.mozilla.org/en/Apps

Hack challenges

Ideas and possible projects

There are a few specific challenges that you might want to consider tonight.

Create a Web app

Something new or that already exists

Create a Web app

Customise Gaia

Create a new style or feature

Customise Gaia by creating a new style or feature

Fix a Gaia issue

Grab one and submit a patch

Fix a Gaia issue from GitHub and submit a patch.

Rob Hawkes

Rawkets.comHTML5 & WebSockets game

Twitter sentiment analysisDelving into your soul

RECENT PROJECTS

Rawkes.comPersonal website and blog

MORE COOL STUFF

Rawket ScientistTechnical Evangelist at Mozilla

@robhawkes

Slidesslideshare.net/robhawkes

Get in touch with me on Twitter: @robhawkes

Follow my blog (Rawkes) to keep up to date with stuff that I’m working on: http://rawkes.com

I’ve recently worked on a project that analyses sentiment on Twitter: http://rawkes.com/blog/2011/05/05/people-love-a-good-smooch-on-a-balcony

Rawkets is my multiplayer HTML5 and JavaScript game. Play it, it’s fun: http://rawkets.com

These slides are online at slideshare.net/robhawkes