Your SlideShare is downloading. ×
#FirefoxOS Web App development@CID Nyári Egyetem 2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

603
views

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
603
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. The Fox has been launched!
  • 3. - Firefox OS has been officially launched on 2nd July in Spain! - ZTE Open handset
  • 4. - Firefox OS has been officially launched on 12nd July in Poland! - Alcatel One touch fire handset
  • 5. Operating System
  • 6. https://mdn.mozillademos.org/files/4605/FirefoxOS.png
  • 7. Web Applications
  • 8. + Web APIs
  • 9. Development
  • 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. Manifest files
  • 12. appcache open web app
  • 13. appcache cache.manifest
  • 14. open web app manifest.webapp
  • 15. Let's write the application! Hello world!
  • 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. { "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. Security model
  • 19. APIs • for telephony • for device handling • for standard web development
  • 20. Hosted Privileged Certified
  • 21. App A App B Cookie A, IndexedDB A, Localstorage A Cookie B, IndexedDB B, Localstorage B Sandboxes
  • 22. iframes are back iframe - SMS iframe - keyboard Firefox OS – System iframe
  • 23. App App download install get App may communicate with the same origin
  • 24. App may communicate with services App App installinstall download
  • 25. app://identifier/path/withi n/zipfile/file.html The identifier is a uuid generated at install time.
  • 26. What is the situation with the camera?
  • 27. Is there any way to get a photo with my application?
  • 28. Application bus MozActivities Similar to Intents on Android
  • 29. var activity = new MozActivity({ name: "pick", data: { type: "image/jpeg" } });
  • 30. More about security and app lifcycle: https://wiki.mozilla.org/Apps/Security
  • 31. Testing
  • 32. Testing opportunities: • Use a real phone • Use the simulator
  • 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. Debug
  • 35. Remote debugging https://developer.mozilla.org/en- US/docs/Tools/Debugger
  • 36. adb logcat|grep GeckoConsole
  • 37. What about the stylessheets?
  • 38. Documentation
  • 39. https://developer.mozilla.org/en- US/docs/Web/Apps/FAQs
  • 40. Marketplace
  • 41. Publication methods • Hosted apps • Packaged apps
  • 42. About payments check this on MDN: https://developer.mozilla.org/en- US/docs/Web/Apps/Publishing/Marketplace_ Payments
  • 43. Announcements
  • 44. Apply today! Partner program for Hungarian Firefox OS developers http://itcafe.hu/hir/mozilla_firefox_os_partnerp rogram.html
  • 45. Apply today! Telenor Firefox OS application dev competition http://itcafe.hu/hir/firefox_os_app_verseny.ht ml
  • 46. Join today! Google+ group for Hungarian DevHub http://goo.gl/FdynYM
  • 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. Links
  • 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/