Download as PDF, PPTX
More Related Content
Similar to How to start developing apps for Firefox OS
How to start developing apps for Firefox OS
- 1. How to start developingapps for Firefox OS Belén Albeza @ladybenko
- 2. Firefox OS? • It’sa OS for mobile devices
- 3. Firefox OS components Gonk Kernel + HW abstraction layer Gecko “Browser” engine (backend) Gaia UI System apps (frontend)
- 4. App dev technologies •Native apps for Firefox OS are web apps • HTML5 • CSS3 • JavaScript
- 5. What? No SDK? •There are Firefox Web APIs (https:// wiki.mozilla.org/WebAPI) • Phone calls, SMS’s, Bluetooth, camera, location, vibration, contacts, etc. • But they are JavaScript APIs :) • Gaia Building Blocks + JS (https:// github.com/mozilla-b2g/Gaia-UI-Building- Blocks)
- 6. Gaia Building Blocks •Pre-made UI components, with HTML + CSS ready to copy & paste! • JS libraries to detect gestures, access to local storage, etc.
- 8. What do weneed to start? • Firefox Nightly (http://nightly.mozilla.org/) • B2G Simulator (https://addons.mozilla.org/ en-us/firefox/addon/firefox-os-simulator/) • Your favourite text editor
- 9.
- 10. File structure - hello/ - index.html - manifest.app - images/ - icon.png
- 11. index.html <!DOCTYPE html> <html> <head> <title>Helloworld!</title> </head> <body> <h1>Hello World</h1> </body> </html>
- 12. manifest.app { "name": "Hello World", "description": "Lorem ipsum blah blah blah", "launch_path": "/index.html", "icons": { "128": "/images/icon.png" } }
- 13.
- 14.
- 15. Tools / WebDeveloper / Firefox OS Simulator
- 16.
- 18. Distribute your appson the web
- 19. You don’t needto be in a marketplace window.navigator.mozApps.install(url); https://developer.mozilla.org/en-US/docs/Apps/ Getting_Started#Installing_the_app
- 20. Stuff to beaware of... • Don’t use eval (that rules out a lot of libraries)! • Performance • Don’t use template libraries (like mustache.js) • Do you really need jQuery / mootools? • Take a look at the memory
- 21.
- 22. Features • Import ePubbooks from the SD Card • Sort books by author/title/last access • Table of contents • Remeber last page read
- 23. Import ePubs (I) •Ask for permission to read the SD Card + local storage
- 24. manifest.webapp "device-storage:sdcard":{ "description": "Required to import books from the SD card", "access": "readonly" }, "storage": { "description": "Required to store imported books" }
- 25. Import ePubs (II) •An ePub is just a zip containing HTML + metadata • Use js-inflate + js-unzip to read this zip file • Use an extended version of js-epub to parse the contents
- 26. Display eBooks • Codeinspired by Monocle • Books are rendered using CSS3’s columns rules to create the “pages” (so content is a veeery long horizontal stripe) • To improve performance, books are divided into “chunks”, based on the table of contents
- 27. Gaia’s BB +libs • Use of Gaia’s Building Blocks to have something pretty :) • Libs • mediadb.js (access to SD card) • async_storage.js (indexDB local storage) • gesture_detector.js (gestures)
- 28.
- 29. Resources • Wiki https://developer.mozilla.org/en/docs/Mozilla/ Firefox_OS • Sample app http://robnyman.github.com/Firefox- OS-Boilerplate-App/ • Firefox OS simulator https://addons.mozilla.org/en- US/firefox/addon/firefox-os-simulator/ • Compile B2G and Gaia https:// developer.mozilla.org/en-US/docs/Mozilla/ Firefox_OS/Building_and_installing_Firefox_OS