Upload
robin-hawkes
View
118
Download
4
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
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