How to start developing apps for Firefox OS
-
Upload
benko -
Category
Technology
-
view
4.637 -
download
1
Transcript of How to start developing apps for Firefox OS
![Page 1: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/1.jpg)
How to start developing apps for
Firefox OS
Belén Albeza @ladybenko
![Page 2: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/2.jpg)
Firefox OS?
• It’s a OS for mobile devices
![Page 3: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/3.jpg)
Firefox OS components
Gonk
Gecko
Gaia
Kernel + HW abstraction layer
“Browser” engine (backend)
UI System apps (frontend)
![Page 4: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/4.jpg)
App dev technologies
• Native apps for Firefox OS are web apps
• HTML5
• CSS3
• JavaScript
![Page 5: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/5.jpg)
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)
![Page 6: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/6.jpg)
Gaia Building Blocks
• Pre-made UI components, with HTML + CSS ready to copy & paste!
• JS libraries to detect gestures, access to local storage, etc.
![Page 7: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/7.jpg)
![Page 8: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/8.jpg)
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
![Page 9: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/9.jpg)
Hello World app
![Page 10: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/10.jpg)
File structure
- hello/
- index.html
- manifest.app
- images/
- icon.png
![Page 11: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/11.jpg)
index.html<!DOCTYPE html><html><head> <title>Hello world!</title></head><body> <h1>Hello World</h1></body></html>
![Page 12: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/12.jpg)
manifest.app
{ "name": "Hello World", "description": "Lorem ipsum blah blah blah", "launch_path": "/index.html", "icons": { "128": "/images/icon.png" }}
![Page 13: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/13.jpg)
icon.png
![Page 14: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/14.jpg)
Let’s try it!
![Page 15: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/15.jpg)
Tools / Web Developer / Firefox OS Simulator
![Page 16: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/16.jpg)
Select the manifest
![Page 17: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/17.jpg)
![Page 18: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/18.jpg)
Distribute your apps on the web
![Page 19: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/19.jpg)
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
![Page 20: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/20.jpg)
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
![Page 21: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/21.jpg)
An e-Reader app
![Page 22: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/22.jpg)
Features
• Import ePub books from the SD Card
• Sort books by author/title/last access
• Table of contents
• Remeber last page read
![Page 23: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/23.jpg)
Import ePubs (I)
• Ask for permission to read the SD Card + local storage
![Page 24: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/24.jpg)
manifest.webapp
"device-storage:sdcard":{ "description": "Required to import books from the SD card", "access": "readonly"},"storage": { "description": "Required to store imported books"}
![Page 25: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/25.jpg)
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
![Page 26: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/26.jpg)
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
![Page 27: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/27.jpg)
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)
![Page 28: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/28.jpg)
Thanks!Questions?
![Page 29: How to start developing apps for Firefox OS](https://reader030.fdocuments.us/reader030/viewer/2022020207/5549b102b4c905bc6d8b4816/html5/thumbnails/29.jpg)
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