Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a How to start developing apps for Firefox OS
Semelhante a How to start developing apps for Firefox OS (20)
Último
Último (20)
How to start developing apps for Firefox OS
- 1. How to start developing apps for Firefox OS Belén Albeza @ladybenko
- 2. Firefox OS? • It’s a 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 we need 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
- 10. File structure - hello/ - index.html - manifest.app - images/ - icon.png
- 11. index.html <!DOCTYPE html> <html> <head> <title>Hello world!</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. icon.png
- 14. Let’s try it!
- 15. Tools / Web Developer / Firefox OS Simulator
- 18. Distribute your apps on the web
- 19. You don’t need to 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 be aware 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. An e-Reader app
- 22. Features • Import ePub books 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 • Code inspired 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)
- 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