2G                       H onB                     IT ati                    W mis                  G                IN d ...
B2G                                        GaiaB2G is actually two separate things; B2G and GaiaThe B2G side is the hardwa...
Gaia is the stuff you can see and the things you can interact with.Although you can hack around with and help with the cor...
a y                                                        d                                                      to ns   ...
If you have some knowledge of git, you can clone the Gaia repository and launch Gaia using arecent Firefox Nightly build.P...
There is also gaia-devserver, a node-based tool for developing Gaia in Firefox Nightly.https://github.com/jrburke/gaia-dev...
Gaia in NightlyYou’ll have to resize the browser to get it looking right but it’s a great way to quickly playwith Gaia and...
B2G DeviceThe other option is to use one of the 3 B2G devices that I’ve brought along this evening.https://developer.mozil...
p s                                                    Ap                                              W  eb Gecko        ...
te d                                                           r                                                       ta ...
tes                                                          bsi                                                        we...
fe st                                                     n  i                                                   a        ...
{              "version": "1.0",              "name": "MozillaBall",              "description": "Exciting Open Web develo...
nts                                                 e                                          irem ember                 ...
a in                                                       o m ty                                                    e d  ...
Content-type header       application/x-web-app-manifest+jsonThe second is that it needs to be served with a specific conte...
to r                                                               a                                                      ...
p s                                                         a p                                                   lin g   ...
Installing an app      navigator.mozApps.install(manifestUrl)Behind the scenes, installing an app is achieved through the ...
The install method triggers an installation dialogue within the browser that allows the user todecide what to do with the ...
ery                                                        a ck ce                                                    ia h...
The first thing you need is the Android Debug Bridge.This allows you to communicate between your computer and the B2G devic...
Dev installation         https://github.com/andreasgal/gaia/The next step, if you haven’t got it already, is to download G...
Dev installation             Add app to ‘../gaia/apps/myapp’Once you have Gaia then add or create your application in the ...
Dev installation                            make install-gaiaThe last step is to push your app and any Gaia updates to the...
io n                                                   ta  t                                                en          ne...
Boot to Gecko MDN documentationhttps://developer.mozilla.org/en/Mozilla/Boot_to_Gecko
Gaia Hacking documentationhttps://wiki.mozilla.org/Gaia/Hacking
Open Web Apps documentationhttps://developer.mozilla.org/en/Apps
ge s                                                           n                                                        ll...
p p                                      b a                                    We      xis                               ...
aia                                                     e G                                                  is           ...
u  e                                                          iss                                                      aia...
Rob Hawkes                       @robhawkes             Rawkes.com             Personal website and blog   RECENT PROJECTS...
Upcoming SlideShare
Loading in...5
×

Hacking with B2G – Web Apps and Customisation

1,646
-1

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,646
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Hacking with B2G – Web Apps and Customisation

  1. 1. 2G H onB IT ati W mis G IN d custo es CK an bH aw k A pps H ba Ro WeHi, I’m Rob Hawkes and this is a little intro to hacking around with Boot to Gecko.
  2. 2. B2G GaiaB2G is actually two separate things; B2G and GaiaThe B2G side is the hardware-related stuff and JavaScript APIs that we need to make thephone work.The B2G side is pretty much everything that you don’t see.
  3. 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’llprobablybe most interested in the front-end Gaia operating system and the Web apps that can becreated for it.
  4. 4. a y d to ns 2 G tio g B op sin are a f ew U he re TThere are a 2 main options to start using and playing with B2G this evening.
  5. 5. If you have some knowledge of git, you can clone the Gaia repository and launch Gaia using arecent Firefox Nightly build.Pros: - No build system  and very little setup required- Can use the Firefox dev toolsCons:- The viewport is based on the size of the browser window- Many device-like things wont work- Apps are launched in separate, pinned tabs- Firefox Nightly might be unstablehttp://nightly.mozilla.orghttps://github.com/andreasgal/gaia/
  6. 6. There is also gaia-devserver, a node-based tool for developing Gaia in Firefox Nightly.https://github.com/jrburke/gaia-devserver
  7. 7. Gaia in NightlyYou’ll have to resize the browser to get it looking right but it’s a great way to quickly playwith Gaia and start developing apps for it.
  8. 8. B2G DeviceThe 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. 9. p s Ap W eb Gecko pen r Boot to O ps fo ap ng ati CreOpen Web Apps is an initiative that is core to B2G and one that is important to the Web as awhole.It’s a way of creating and distributing apps that puts the developers and users of apps backin charge.It’s a way that embraces open technology and is for the good of the Web.
  10. 10. te d r ta app g s ttin te an Ge to crea HowCreating a Web app isn’t crazy hard, it’s just a case of understanding the new features inbrowsers.https://developer.mozilla.org/en/Apps
  11. 11. tes bsi we olo gy ar e tec hn ps me Ap et he sa us ey ThApps 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. 12. fe st n i a m o an a pp io n int a t ite plic we bs Ap rninga TuThe only thing that you need to do to turn a website into app is create an applicationmanifest.
  13. 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 otherrelated data.
  14. 14. nts e irem ember q u t re ttor em fes tan ni mp or Ma IThere are a couple of important things to remember when creating an application manifest.
  15. 15. a in o m ty e d curi am nt of se S me ele AnThe 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 arouge manifest file will be able to be put on the same domain without your knowledge.
  16. 16. Content-type header application/x-web-app-manifest+jsonThe 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 involveschanging 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 headerusing something like PHP or Node.js.
  17. 17. to r a lid s ok va st hin g i nife everyt Ma su re king MaIf you want to make sure your manifest is valid you can have it checked at http://appmanifest.org
  18. 18. p s a p lin g ce tal etp la Ins rM ark sero brow the gh hrou TYou 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. 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 theinstallation 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 anyother external website.
  20. 20. The install method triggers an installation dialogue within the browser that allows the user todecide what to do with the app.On Windows, a desktop shortcut is created for the app you installed and it will also be in thestart menu.On Mac, the app is added to your /Applications directory.On B2G, the app is added to your homescreen.
  21. 21. ery a ck ce ia h de vi Ga ot he ak st e tw nd sa pp ga hin PusThe 3 devices that I’ve brought along for you today are already set up ready to haveapplications 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 havingto upload the app to the Web and installing or updating it from there.https://wiki.mozilla.org/B2G/DeveloperPhone#Advanced_Gaia_Hacking
  22. 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. 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’vebrought along and can provide you on a memory stick.https://github.com/andreasgal/gaia/
  24. 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. 25. Dev installation make install-gaiaThe last step is to push your app and any Gaia updates to the device.That’s it!
  26. 26. io n ta t en ne ed cum ty ou Do gt ha thin ery EvHere are a few of the key places to go for documentation about developing on B2G and OpenWeb Apps.
  27. 27. Boot to Gecko MDN documentationhttps://developer.mozilla.org/en/Mozilla/Boot_to_Gecko
  28. 28. Gaia Hacking documentationhttps://wiki.mozilla.org/Gaia/Hacking
  29. 29. Open Web Apps documentationhttps://developer.mozilla.org/en/Apps
  30. 30. ge s n lle jects cha ro ack ssiblep H nd po easa IdThere are a few specific challenges that you might want to consider tonight.
  31. 31. p p b a We xis ts e a ad ye at lre Cre ortha ta w ne thing e SomCreate a Web app
  32. 32. aia e G is m or fea ture sto yle Cu st new a ate CreCustomise Gaia by creating a new style or feature
  33. 33. u e iss aia tch a G it a pa Fix su bm nd ea on GrabFix a Gaia issue from GitHub and submit a patch.
  34. 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/robhawkesGet in touch with me on Twitter: @robhawkesFollow my blog (Rawkes) to keep up to date with stuff that I’m working on: http://rawkes.comI’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-balconyRawkets is my multiplayer HTML5 and JavaScript game. Play it, it’s fun: http://rawkets.comThese slides are online at slideshare.net/robhawkes

×