Web App
Development
Firefox OS
Nagy Gergő
Hungarian Firefox OS Engagement team
Dev Team Lead
gergo.istvan.nagy [at] mozill...
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 m...
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 20...
{
"version": "0.1",
"name": "HelloNYE",
"description": "Firefox OS Open Web App",
"launch_path": "/index.html",
"developer...
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
install
get
App may communicate
with the same origin
App may communicate
with services
App
App
installinstall
download
app://identifier/path/withi
n/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
• remo...
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 Hungarian
Firefox OS developers
http://itcafe.hu/hir/mozilla_firefox_os_partnerp
rogram.h...
Apply today!
Telenor Firefox OS application dev
competition
http://itcafe.hu/hir/firefox_os_app_verseny.ht
ml
Join today!
Google+ group for
Hungarian DevHub
http://goo.gl/FdynYM
Thanks for watching!
Nagy Gergő
Hungarian Firefox OS Engagement team
Dev Team Lead
gergo.istvan.nagy [at] mozilla [dot] hu...
Links
https://github.com/mozilla/r2d2b2g
https://developer.mozilla.org/en-US/docs/WebAPI
https://developer.mozilla.org/en-US/doc...
#FirefoxOS Web App development@CID Nyári Egyetem 2013
#FirefoxOS Web App development@CID Nyári Egyetem 2013
#FirefoxOS Web App development@CID Nyári Egyetem 2013
#FirefoxOS Web App development@CID Nyári Egyetem 2013
#FirefoxOS Web App development@CID Nyári Egyetem 2013
#FirefoxOS Web App development@CID Nyári Egyetem 2013
#FirefoxOS Web App development@CID Nyári Egyetem 2013
#FirefoxOS Web App development@CID Nyári Egyetem 2013
#FirefoxOS Web App development@CID Nyári Egyetem 2013
Upcoming SlideShare
Loading in...5
×

#FirefoxOS Web App development@CID Nyári Egyetem 2013

637

Published on

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
637
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "#FirefoxOS Web App development@CID Nyári Egyetem 2013"

  1. 1. Web App Development Firefox OS Nagy Gergő Hungarian Firefox OS Engagement team Dev Team Lead gergo.istvan.nagy [at] mozilla [dot] hu Nyári egyetem 2013.07.24-25.
  2. 2. The Fox has been launched!
  3. 3. - Firefox OS has been officially launched on 2nd July in Spain! - ZTE Open handset
  4. 4. - Firefox OS has been officially launched on 12nd July in Poland! - Alcatel One touch fire handset
  5. 5. Operating System
  6. 6. https://mdn.mozillademos.org/files/4605/FirefoxOS.png
  7. 7. Web Applications
  8. 8. + Web APIs
  9. 9. Development
  10. 10. 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
  11. 11. Manifest files
  12. 12. appcache open web app
  13. 13. appcache cache.manifest
  14. 14. open web app manifest.webapp
  15. 15. Let's write the application! Hello world!
  16. 16. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello NYE13!</title> </head> <body> <h1>Hello Nyári Egyetem 2013!</h1> </body> </html>
  17. 17. { "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" } }
  18. 18. Security model
  19. 19. APIs • for telephony • for device handling • for standard web development
  20. 20. Hosted Privileged Certified
  21. 21. App A App B Cookie A, IndexedDB A, Localstorage A Cookie B, IndexedDB B, Localstorage B Sandboxes
  22. 22. iframes are back iframe - SMS iframe - keyboard Firefox OS – System iframe
  23. 23. App App download install get App may communicate with the same origin
  24. 24. App may communicate with services App App installinstall download
  25. 25. app://identifier/path/withi n/zipfile/file.html The identifier is a uuid generated at install time.
  26. 26. What is the situation with the camera?
  27. 27. Is there any way to get a photo with my application?
  28. 28. Application bus MozActivities Similar to Intents on Android
  29. 29. var activity = new MozActivity({ name: "pick", data: { type: "image/jpeg" } });
  30. 30. More about security and app lifcycle: https://wiki.mozilla.org/Apps/Security
  31. 31. Testing
  32. 32. Testing opportunities: • Use a real phone • Use the simulator
  33. 33. The easiest way is the simulator: • available as simple Firefox Add-on • manifest file validation • receipt testing • remote debugging • remote console • push to device
  34. 34. Debug
  35. 35. Remote debugging https://developer.mozilla.org/en- US/docs/Tools/Debugger
  36. 36. adb logcat|grep GeckoConsole
  37. 37. What about the stylessheets?
  38. 38. Documentation
  39. 39. https://developer.mozilla.org/en- US/docs/Web/Apps/FAQs
  40. 40. Marketplace
  41. 41. Publication methods • Hosted apps • Packaged apps
  42. 42. About payments check this on MDN: https://developer.mozilla.org/en- US/docs/Web/Apps/Publishing/Marketplace_ Payments
  43. 43. Announcements
  44. 44. Apply today! Partner program for Hungarian Firefox OS developers http://itcafe.hu/hir/mozilla_firefox_os_partnerp rogram.html
  45. 45. Apply today! Telenor Firefox OS application dev competition http://itcafe.hu/hir/firefox_os_app_verseny.ht ml
  46. 46. Join today! Google+ group for Hungarian DevHub http://goo.gl/FdynYM
  47. 47. Thanks for watching! Nagy Gergő Hungarian Firefox OS Engagement team Dev Team Lead gergo.istvan.nagy [at] mozilla [dot] hu Nyári egyetem 2013.07.24-25.
  48. 48. Links
  49. 49. 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/ https://air.mozilla.org/ui-testing-of-firefox-os/ http://itcafe.hu/hir/mozilla_firefox_os_kisokos.html https://github.com/daf182/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×