#firefoxos web app development@cid nyári egyetem 2013
TRANSCRIPT
Web App Development
Firefox OS
Nagy GergőHungarian Firefox OS Engagement teamDev Team Leadgergo.istvan.nagy [at] mozilla [dot] huNyári egyetem2013.07.24-25.
The Fox has been launched!
- Firefox OS has been officially launched on 2nd July in Spain!- ZTE Open handset
- Firefox OS has been officially launched on 12nd July in Poland!- Alcatel One touch fire handset
Operating System
https://mdn.mozillademos.org/files/4605/FirefoxOS.png
Web Applications
+ Web APIs
Development
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
Manifest files
appcache
open web app
appcache
cache.manifest
open web app
manifest.webapp
Let's write the application!
Hello world!
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Hello NYE13!</title> </head> <body> <h1>Hello Nyári Egyetem 2013!</h1> </body></html>
{ "version": "0.1", "name": "HelloNYE", "description": "Firefox OS Open Web App", "launch_path": "/index.html", "developer": { "name": "Gergo Nagy" },
"icons": { "60" : "/image/icons/icon-60.png"
}}
Security model
APIs
• for telephony• for device handling• for standard web development
Hosted
Privileged
Certified
App A App B
Cookie A,IndexedDB A,Localstorage A
Cookie B,IndexedDB B,Localstorage B
Sandboxes
iframes are back
iframe - SMS
iframe - keyboard
Firefox OS – System iframe
App
App
download
installget
App may communicatewith the same origin
App may communicatewith services
App
App
installinstall
download
app://identifier/path/within/zipfile/
file.html
The identifier is a uuid generated at
install time.
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" }});
More about security and app lifcycle:
https://wiki.mozilla.org/Apps/Security
Testing
Testing opportunities:
• Use a real phone• Use the simulator
The easiest way is the simulator:
• available as simple Firefox Add-on• manifest file validation• receipt testing• remote debugging• remote console• push to device
Debug
Remote debugging
https://developer.mozilla.org/en-US/docs/Tools/Debugger
adb logcat|grep GeckoConsole
What about the stylessheets?
Documentation
https://developer.mozilla.org/en-US/docs/Web/Apps/FAQs
Marketplace
Publication methods
• Hosted apps• Packaged apps
About payments check this on MDN:
https://developer.mozilla.org/en-US/docs/Web/Apps/Publishing/Marketplace_Payments
Announcements
Apply today!
Partner program for HungarianFirefox OS developers
http://itcafe.hu/hir/mozilla_firefox_os_partnerprogram.html
Apply today!
Telenor Firefox OS application dev competition
http://itcafe.hu/hir/firefox_os_app_verseny.html
Join today!
Google+ group for Hungarian DevHub
http://goo.gl/FdynYM
Thanks for watching!
Nagy GergőHungarian Firefox OS Engagement teamDev Team Leadgergo.istvan.nagy [at] mozilla [dot] huNyári egyetem2013.07.24-25.
Links
https://github.com/mozilla/r2d2b2ghttps://developer.mozilla.org/en-US/docs/WebAPIhttps://developer.mozilla.org/en-US/docs/Web/Apps/App_permissions?redirectlocale=en-US&redirectslug=Apps%2FApp_permissionshttps://marketplace.firefox.com/developers/docs/quick_starthttps://marketplace.firefox.com/http://www.mozilla.org/en-US/styleguide/products/firefoxos/icons/http://buildingfirefoxos.com/https://air.mozilla.org/ui-testing-of-firefox-os/http://itcafe.hu/hir/mozilla_firefox_os_kisokos.htmlhttps://github.com/daf182/