1. 2G
H onB
IT ati
W mis
G
IN d custo es
CK an bH
aw
k
A pps
H ba
Ro
We
Hi, I’m Rob Hawkes and this is a little intro to hacking around with Boot to Gecko.
2. 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.
3. 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.
4. a y
d
to ns
2 G tio
g B op
sin are a f ew
U he
re
T
There are a 2 main options to start using and playing with B2G this evening.
5. 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.org
https://github.com/andreasgal/gaia/
6. There is also gaia-devserver, a node-based tool for developing Gaia in Firefox Nightly.
https://github.com/jrburke/gaia-devserver
7. 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.
8. 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
9. p s
Ap
W eb Gecko
pen r Boot to
O ps
fo
ap
ng
ati
Cre
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.
10. te d
r
ta app
g s
ttin te
an
Ge to
crea
How
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
11. tes
bsi
we olo
gy
ar e tec
hn
ps me
Ap et
he
sa
us
ey
Th
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.
12. fe st
n i
a
m o an a pp
io n int
a t ite
plic we
bs
Ap rninga
Tu
The only thing that you need to do to turn a website into app is create an application
manifest.
13. {
"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.
14. nts
e
irem ember
q u
t re ttor
em
fes tan
ni mp
or
Ma I
There are a couple of important things to remember when creating an application manifest.
15. a in
o m ty
e d curi
am nt of se
S me
ele
An
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.
16. 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.
17. to r
a
lid s ok
va
st hin
g i
nife everyt
Ma su
re
king
Ma
If you want to make sure your manifest is valid you can have it checked at http://
appmanifest.org
18. p s
a p
lin g ce
tal etp
la
Ins rM
ark
sero
brow
the
gh
hrou
T
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.
19. 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.
20. 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.
21. ery
a ck ce
ia h de
vi
Ga ot
he
ak st
e
tw
nd
sa
pp
ga
hin
Pus
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
22. 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
23. 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/
24. 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.
25. Dev installation
make install-gaia
The last step is to push your app and any Gaia updates to the device.
That’s it!
26. io n
ta t
en ne
ed
cum ty
ou
Do gt
ha
thin
ery
Ev
Here are a few of the key places to go for documentation about developing on B2G and Open
Web Apps.
27. Boot to Gecko MDN documentation
https://developer.mozilla.org/en/Mozilla/Boot_to_Gecko
29. Open Web Apps documentation
https://developer.mozilla.org/en/Apps
30. ge s
n
lle jects
cha ro
ack ssiblep
H nd
po
easa
Id
There are a few specific challenges that you might want to consider tonight.
31. p p
b a
We xis
ts
e a ad
ye
at lre
Cre ortha
ta
w
ne
thing
e
Som
Create a Web app
32. aia
e G
is
m or fea ture
sto yle
Cu st
new
a
ate
Cre
Customise Gaia by creating a new style or feature
33. u e
iss
aia tch
a G it a
pa
Fix su
bm
nd
ea
on
Grab
Fix a Gaia issue from GitHub and submit a patch.
34. Rob Hawkes
@robhawkes
Rawkes.com
Personal website and blog
RECENT PROJECTS MORE COOL STUFF
Twitter sentiment analysis Rawket Scientist
Delving into your soul Technical Evangelist at Mozilla
Rawkets.com Slides
HTML5 & WebSockets game slideshare.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
