How to start developing apps for Firefox OS Belén Albeza @ladybenko
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
How to start developing apps for
Firefox OS
Belén Albeza @ladybenko
Firefox OS?
• It’s a OS for mobile devices
Firefox OS components
Gonk
Gecko
Gaia
Kernel + HW abstraction layer
“Browser” engine (backend)
UI System apps (frontend)
App dev technologies
• Native apps for Firefox OS are web apps
• HTML5
• CSS3
• JavaScript
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)
Gaia Building Blocks
• Pre-made UI components, with HTML + CSS ready to copy & paste!
• JS libraries to detect gestures, access to local storage, etc.
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
Hello World app
File structure
- hello/
- index.html
- manifest.app
- images/
- icon.png
index.html<!DOCTYPE html><html><head> <title>Hello world!</title></head><body> <h1>Hello World</h1></body></html>
manifest.app
{ "name": "Hello World", "description": "Lorem ipsum blah blah blah", "launch_path": "/index.html", "icons": { "128": "/images/icon.png" }}
icon.png
Let’s try it!
Tools / Web Developer / Firefox OS Simulator
Select the manifest
Distribute your apps on the web
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
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
An e-Reader app
Features
• Import ePub books from the SD Card
• Sort books by author/title/last access
• Table of contents
• Remeber last page read
Import ePubs (I)
• Ask for permission to read the SD Card + local storage
manifest.webapp
"device-storage:sdcard":{ "description": "Required to import books from the SD card", "access": "readonly"},"storage": { "description": "Required to store imported books"}
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
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
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)
Thanks!Questions?
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
Related Documents
