If you are like me, your spectrum of interest is large when it comes to technology. You may be a Python developer, but that does not mean you have not any interest in HTML, and it’s a good coincidence as it’s the foundation of my presentation. In this talk, Frédéric Harper will show you how you can use HTML5 with the power of JavaScript to build amazing mobile applications as to brush up what you previously published. Learn about the open web technologies, including WebAPIs, and tools designed to get you started developing HTML apps for Firefox OS, and the web.

1. Firefox OS
Python Montreal
HTML5 to the next level
2014-05-12
Frédéric Harper
Sr. Technical Evangelist @ Mozilla
@fharper | outofcomfortzone.net
CreativeCommons:https://bitly.com/RwaQxN

2. print("Sorry, I don’t speak Python")

3. Creative Commons: http://j.mp/1hCZYIe

4. Creative Commons: http://j.mp/1ljZuJC

7. 38 billion devices
connected in 2020
ABI Research - 2013-05-09 - http://j.mp/38billion

8. Creative Commons: http://j.mp/1gP4X4K

10. What you deserve

12. Built with the Web
Using HTML5, CSS3 and JavaScript
with a number of APIs
to build apps.

13. It’s open source

14. Some facts
§ 7 operator (17 committed) & 4 hardware partners
§ ZTE Open, Alcatel One Touch Fire, Geeksphone Keon,
Geeksphone Peak, LG FireWeb…
§ More to come: Flame, Huawei Y300, ZTE Open C,
Alcatel One Touche Fire C & E & S…
§ Aimed at emerging markets/low end market

18. A Firefox OS app?
§ Creating a hosted or packaged app
§ Using
§ Vanilla HTML5
§ Librairies…
§ Regular API
§ Privileged API
§ Certified API

19. HTML5 + manifest (JSON) = Firefox OS app
{
"version": “42",
"name": ”My amazing app",
"launch_path": "/index.html",
"description": ”My super amazing app do super amazing things",
"icons": {
"16": "/images/logo16.png”,},
"developer": {
"name": ”Frédéric Harper",
"url": "http://outofcomfortzone.net",
},
"default_locale": "en",
"permissions": {
"geolocation": {
"description": ”Get the long/lat of the user"
}
}
}

20. DEMO App Manager + Emberjs todomvc

21. Web APIs

22. Web APIs – Regular
• Alarm API
• Ambient light sensor
• Archive API
• Battery Status API
• Geolocation API
• IndexedDB
• Network Information API
• Notifications API
• Open WebApps
• Proximity sensor
• Push API
• Screen Orientation
• Vibration API
• Web Activities
• WebFM API
• WebPayment
packaged
hosted

23. Ambient Light Sensor

24. Ambient Light Sensor
window.addEventListener("devicelight", function (event) {
// The level of the ambient light in lux
// The lux values for "dim" typically begin below 50,
// and the values for "bright" begin above 10000
console.log(event.value);
});

25. DEMO Boilerplate – Ambient Light Sensor

26. Battery Status

27. Battery Status
var battery = navigator.battery;
if (battery) {
var batteryLevel = Math.round(battery.level * 100) + "%",
charging = (battery.charging)? “yes" : "no",
chargingTime = parseInt(battery.chargingTime / 60, 10,
dischargingTime = parseInt(battery.dischargingTime / 60, 10);
battery.addEventListener("levelchange", setStatus, false);
battery.addEventListener("chargingchange", setStatus, false);
battery.addEventListener("chargingtimechange", setStatus, false);
}

28. DEMO Boilerplate – Battery status

29. Web APIs – Privileged
• Browser API
• Contacts API
• Device Storage API
• systemXHR
• TCP Socket API
packaged

30. Browser

31. Browser
<div>
<span id='location-bar'></span>
<button onclick='go_button_clicked()'>Go</button>
</div>
<div id='load-status'></div>
<div id='security-status'></div>
<img id='favicon'>
<div id='title'></div>
<iframe mozbrowser src=‘yoursite.com' id='browser'></iframe>

32. Browser
addEventListener('mozbrowserloadstart', function(e) {
//Do stuff
});
/*
Possible values:
"mozbrowserloadstart“ "mozbrowserloadend"
"mozbrowserlocationchange“ "mozbrowsertitlechange"
"mozbrowsericonchange“ "mozbrowsersecuritychange"
"mozbrowsercontextmenu“ "mozbrowsererror"
"mozbrowserkeyevent“ "mozbrowsershowmodalprompt"
"mozbrowseropenwindow“ "mozbrowserclose"
*/

33. Web APIs – Certified
• Camera API
• Idle API
• Mobile Connection API
• Network Stats API
• Permissions API
• Power Management API
• Settings API
• Time/Clock API
• Voicemail
• WebBluetooth
• WebSMS
• WebTelephony
• WiFi Information API
OS/OEM

34. Web Activities

35. Web Activities
• browse
• configure
• costcontrol
• dial
• Open
• new
• mail
• websms/sms
• webcontacts/contact
• pick
• record
• save-bookmark
• share
• view
• update
packaged
hosted

36. Pick
var activity = new MozActivity({
name: "pick",
//Provide the data required
//by the filter of the activity
data: {
type: "image/jpeg"
}
});

37. Pick
activity.onsuccess = function () {
var img = document.createElement("img");
if (this.result.blob.type.indexOf("image") != -1) {
img.src = window.URL.createObjectURL(this.result.blob);
}
};
activity.onerror = function () {
//error
};

38. Dial
var call = new MozActivity({
name: "dial",
data: {
number: "+46777888999"
}
});

39. Web Activity Received Handler
"activities": {
"pick": {
"filters": {
"type": ["image/jpeg", "image/png"]
},
"disposition": "inline",
"returnValue": true,
"href": "/index.html#pick"
}
}

40. Don’t forget to handle it!
navigator.mozSetMessageHandler('activity', function(activityRequest) {
var option = activityRequest.source;
if (activityRequest.source.name === "pick") {
// Do something to handle the activity
if (picture) {
activityRequest.postResult(picture);
}
else {
activityRequest.postError("Unable to provide a picture");
}
}
});

41. Creative Commons: http://j.mp/1iZHGAW

42. How to start

43. Creative Commons: http://j.mp/1iquK8Q

44. Creative Commons: http://j.mp/Ilm7wx

45. Cordova & Phonegap

46. API implementations
• Camera
• Contacts
• Device
• Device-motion
• Geolocation
• Orientation
• Vibration

47. Free phone!
http://j.mp/mozPFA
Creative Commons: https://flic.kr/p/epEL3n

48. Simplicity…

49. Firefox Web Developer Tools

53. Creative Commons: http://j.mp/1gIdcPF
To infinity, and
beyond…

54. More Web APIs & features
• Calendar API
• FileHandle API Sync API
• Keyboard/IME API WebRTC
• HTTP-cache API
• Peer to Peer API
• Spellcheck API LogAPI
• Resource lock API
• UDP Datagram Socket API
• WebNFC
• WebUSB

55. When you’ll build your next app
You know you’ll have the API you need using HTML5

56. Resources
Firefox OS Simulator
http://j.mp/fxosSimulator
Firefox OS App Manager
http://j.mp/fxosAppManager
Mozilla Developer Network
https://developer.mozilla.org
StackOverflow forum
http://j.mp/fxosStackOverflow
Firefox OS Boilerplate
http://j.mp/fxosBoilerplate

57. Planning to port
or build a
Firefox OS app?
Please let me know!

58. http://yuldev.ca

59. Frédéric Harper
fharper@mozilla.com
@fharper
http://hacks.mozilla.com
http://outofcomfortzone.net