MDC13 - Firefox OS für Entwickler

Firefox OS für Entwickler Marcus Ross / @zahlenhelfer

<<< „Hi, I´m Marcus!“ about.me/marcus.ross

...und noch ein mobiles OS •  Februar 2013 –
FireFox OS 1.0 Release •  Fokus auf Low-‐End Geräte / Budget-‐Geräte •  2. Märkte als Start (Q1/2013) •  USA startet 2014 •  Open-‐Web-‐Gedanken im OS •  HTML/JS/CSS sind im Fokus •  Jeder Webentwickler kann aus FFOS Apps!

Firefox OS in Deutschland?

Firefox OS 1.1 Update (Okt. 2013) •  Import von
Kontakten (bisher nur Facebook) aus –  Gmail –  HotmailSupport für MMS-‐Bilder •  API für Push-‐Nachrichten •  Autokorrektur beim Tippen (virtual Keyboard) •  Speichern von Bildern/Videos aus dem Browser •  Speichern von Video/Audio/Bildern aus Emails in die Gallerie •  Telefon-‐App verbessert (Details bei langem Tap) •  Kalender-‐App verbessert (Swipe für Zeiteintrag)

Das Alcatel One Touch Fire •  3,5 Zoll Display
•  480x320 Pixel Auﬂösung •  3.2 Megapixel Kamera •  512 MB ROM / SD Slot •  256 MByte RAM Arbeitsspeicher •  1 GHz Qualcomm-‐Prozessor •  Akkukapazität: 1.400 mAh

Die drei G´s •  Gonck –  Low-‐level System
–  Linux Kernel wie auch in Android –  Einziger zu porjerender Teil für HW-‐Hersteller •  Gecko –  Lesen, Verarbeiten und darstellen von HTML, JavaScript, CSS –  quasi eine Browser-‐Runjme-‐Engine –  Bekannt aus Browsern wie SeaMonkey, Camino und Firefox –  Visuelle Effekte per Open GL ES in der Version 2.0 –  Zugriff auf die Hardware per JavaScript API •  Gaia –  Benutzeroberfläche für Firefox OS –  komplem in HTML, CSS und Javascript geschrieben

Alles Klar zum Starten •  Eine Idee • 
Texteditor •  FireFox Browser •  FireFox Simulator

Simulator installieren •  Bei OSX 10.9 – hmps://pp.mozilla.org/pub/mozilla.org/labs/
r2d2b2g/r2d2b2g-‐mac.xpi

Aktuelle Limits des Simulators •  Telephony •  WebSMS
•  WebBluetooth •  Ambient Light •  Proximity •  Network Informajon •  Vibrajon •  navigator.onLine /oﬄine events

let´s code some app´s •  MDC2013 Hallo Welt (Grundlegendes)
•  Bamery Status (Hardware Zugriﬀ) •  Bildauswahl (WebAcjvijes) •  Gaia-‐Listen (Gaia-‐Buidling Blocks)

Das Manifest webapp.manifest! {! "name": "MDC2013 ",  "description": "A
simple web app",  "launch_path": "/index.html",! "icons": {  "128": "/style/icons/earth.png"  }! }!

Hallo MDC-‐Welt <!DOCTYPE html>! <html>! <head>! <title>Meine erste App</title>!
</head>!! <body>! <h1>Hallo MDC2013</h1>! </body>! </html>!

API-‐Zugriﬀ •  Bamerie-‐Abfrage per API möglich navigator.battery.level! !

Akku-‐App index.html <!DOCTYPE html> <html> <head>
<jtle>Bamerie-‐Status</jtle> <meta name="viewport" content="width=device-‐width" /> <script src="jquery.min.js" type="text/javascript"></script> <script src="app.js"></script> </head> <body> <bumon id="get-‐bamery">Bamerie Status abrufen</bumon> <p>Wie voll ist der Akku? <span id="bamery-‐pct"></span></p> </body> </html>

JavaScript app.js! $(function() {! $("#get-battery").click(function(){! $("#battery-pct")! ! !.text(Math.round(! !
!navigator.battery.level * 100)! ! !+ "%");! });! });!

Web Acjvijes •  Akjonen rufen passende Apps auf
•  User darf wählen •  Bspl.: –  Mit welcher App werden Bilder angeschaut? –  Womit soll das PDF gelesen werden? •  damit quasi die Intents von Firefox OS

SMS senden als Acjvity var sms = new MozActivity({!
name: "new",! data: {! type: "websms/sms",! number: "+46777888999"! }! });

Web-‐Acjvijes (function () {! ! var pickImage = document.getElementById('get-picture');!
pickImage.onclick = function () {! var pick = new MozActivity({! name: "pick",! data: {! type: ["image/png", "image/jpg", "image/jpeg"]! }! });! ! pick.onsuccess = function () {! var img = document.createElement("img");! img.src = window.URL.createObjectURL(this.result.blob);! var imagePresenter = document.querySelector("#image-presenter");! imagePresenter.appendChild(img);! imagePresenter.style.display = "block";! };! ! pick.onerror = function () {! alert("Can't view the image!");! };! };! })();!

Acjvijes im Detail var pick = new MozActivity({! name:
"pick",! data: {! type: ["image/png", "image/jpg", "image/jpeg"]! }! });! pick.onsuccess = function () {! };! !

Gaia-‐Style hmp://buildingﬁrefoxos.com/building-‐blocks •  kein jQueryMob-‐Ansatz •  Graﬁkelemente
in CSS •  schnell und leicht •  Kompajbel mit Templajng und SPA

Oﬄine durch appcache.manifest CACHE MANIFEST ! # v 0.1
/ 12 ! ! CACHE:! css/app.css! img/coins/[email protected]! js/main.js js/lib/require.js! ! NETWORK: * ! http://* ! https://*! webapp.manifest "appcache_path": "/cache.manifest"

XHR und CORS?! webapp.manifest "permissions": {! "systemXHR": {}!
}! app.js var xhr = new XMLHttpRequest({! mozSystem: true! })!

Geht noch mehr? •  JS1K Demo auf FireFox OS
hmp://js1k.com/2010-‐ﬁrst/demo/171

DANKE! Marcus Ross – Zahlenhelfer Consuljng -‐ @zahlenhelfer
alle Folien auch auf www.speakerdeck.com/u/zahlenhelfer

MDC13 - Firefox OS für Entwickler

MDC13 - Firefox OS für Entwickler

Marcus Ross

More Decks by Marcus Ross

Other Decks in Technology

Featured

Transcript

Firefox OS für Entwickler Marcus Ross / @zahlenhelfer

<<< „Hi, I´m Marcus!“ about.me/marcus.ross

...und noch ein mobiles OS •  Februar 2013 –

Firefox OS in Deutschland?

Firefox OS 1.1 Update (Okt. 2013) •  Import von

Das Alcatel One Touch Fire •  3,5 Zoll Display

Die drei G´s •  Gonck –  Low-‐level System

Alles Klar zum Starten •  Eine Idee •

Simulator installieren •  Bei OSX 10.9 – hmps://pp.mozilla.org/pub/mozilla.org/labs/

Aktuelle Limits des Simulators •  Telephony •  WebSMS

let´s code some app´s •  MDC2013 Hallo Welt (Grundlegendes)

Das Manifest webapp.manifest! {! "name": "MDC2013 ",  "description": "A

Hallo MDC-‐Welt <!DOCTYPE html>! <html>! <head>! <title>Meine erste App</title>!

API-‐Zugriﬀ •  Bamerie-‐Abfrage per API möglich navigator.battery.level! !

Akku-‐App index.html <!DOCTYPE html> <html> <head>

JavaScript app.js! $(function() {! $("#get-battery").click(function(){! $("#battery-pct")! ! !.text(Math.round(! !

Web Acjvijes •  Akjonen rufen passende Apps auf

SMS senden als Acjvity var sms = new MozActivity({!

Web-‐Acjvijes (function () {! ! var pickImage = document.getElementById('get-picture');!

Acjvijes im Detail var pick = new MozActivity({! name:

Gaia-‐Style hmp://buildingﬁrefoxos.com/building-‐blocks •  kein jQueryMob-‐Ansatz •  Graﬁkelemente

Oﬄine durch appcache.manifest CACHE MANIFEST ! # v 0.1

XHR und CORS?! webapp.manifest "permissions": {! "systemXHR": {}!

Geht noch mehr? •  JS1K Demo auf FireFox OS

DANKE! Marcus Ross – Zahlenhelfer Consuljng -‐ @zahlenhelfer