FIREFOX OS
Nagy Gergő
gergo.istvan.nagy [at] mozilla [dot] hu
Budapest.js – javascript meetup
2013.06.17.
Operating System
https://mdn.mozillademos.org/files/4605/FirefoxOS.png
Web Applications
+ Web APIs
Development
APIs
• for telephony
• for device handling
• for standard web development
What APIs are available for my application?
• Hosted application
• Privileged apps
• Certified apps
What is the situation with the camera?
Is there any way to get a photo with my
application?
Application bus
MozActivities
Similar to Intents on Android
var activity = new MozActivity({
name: "pick",
data: {
type: "image/jpeg"
}
});
Custom activities to work together with third
party apps!
https://github.com/daf182/moz-activity
Manifest files
appcache
open web app
appcache
cache.manifest
open web app
manifest.webapp
Three way of testing:
• Use a real phone
• Use the simulator
• Use the emulator (r2d2b2g)
The easiest way is the esimulator:
• available as simple Firefox Add-on
• manifest file validation
• remote debugging
• remote console
• push to device
Let's write the application!
Hello world!
Application development steps
• edit html and css files to create UI
• implement application logic in javascript
• write manifest for the OS
• open your manifest in the simulator
<!DOCTYPE html>
<html>
<head>
<title>Hello meetup!</title>
</head>
<body>
<h1>
Hello Budapest JS meetup!
</h1>
</body>
</html>
{
"version": "0.1",
"name": "HelloBPJS",
"description": "Firefox OS Open Web App",
"launch_path": "/index.html",
"developer": {
"name": "Gergo Nagy"
},
"icons": {
"60" : "/image/icons/icon-60.png"
}
}
What about the stylessheets?
Documentation
Marketplace
Publication methods
• Hosted apps
• Packaged apps
The final demo!
https://github.com/daf182/shake2bounce
Thanks for watching!
Links
https://github.com/mozilla/r2d2b2g
https://developer.mozilla.org/en-US/docs/WebAPI
https://developer.mozilla.org/en-US/docs/Web/Apps/App_permissions?redirectlocale=en-
US&redirectslug=Apps%2FApp_permissions
https://marketplace.firefox.com/developers/docs/quick_start
https://marketplace.firefox.com/
http://www.mozilla.org/en-US/styleguide/products/firefoxos/icons/
http://buildingfirefoxos.com/

#FirefoxOS js-meetup