Firefox OS

Firefox OS

Icons of B2G, Firefox OS and Mozilla Apps

“Kazé”

Fabien Cazenave
Développeur Mozilla
kazé sur irc.mozilla.org
@fabi1cazenave sur twitter
@fabi1cazenave sur github

Introduction

Welcome mat
  • Qui est Mozilla ?
  • Un nouveau challenge
  • Firefox OS
  • Apps/API/Activities
  • Outils
Photo by the McClouds

Mozilla est connu pour son navigateur web Firefox

Firefox

Le Manifeste Mozilla

  • Internet est une ressource publique mondiale qui doit demeurer ouverte et accessible
  • Internet doit enrichir la vie de tout le monde.
  • La sécurité des personnes sur Internet est fondamentale et ne peut pas être considérée comme optionnelle
  • Chacun doit avoir la possibilité de façonner son utilisation d'Internet

Ce qu'a fait Mozilla…

About Internet Explorer 6 infoBrowser Logos

Un nouveau challenge

Responsive Design Photo by Jason Weaver

Des promesses non tenues

Smartphone equals HTML5

La réalité

Apps Photo by Michael Gil

Plateformes mobiles propriétaires

Android / iOS / other

La plateforme mobile qu’on mérite

Keep calm and trust HTML5

La plateforme mobile qu’on mérite

  • le logiciel est multiplate-formes et multi-supports
  • pour l’utilisateur : découvrabilité et continuité entre bureau et mobile
  • pour le développeur : une techno déjà maîtrisée, ouverte et normalisée
  • pas de silo : relation directe entre client et développeurs/éditeurs

Un nouveau marché

World wide web

Mise à jour du monde mobile

Nokia couldn't take photos
  • Ciblé sur les nouveaux marchés émergeants
  • Appareils très bon marché
  • Technologies Web d'un bout à l'autre
  • 18 partenaires mobiles, 4 partenaires matériels

Firefox OS

Firefox OS
Gonk, Gecko and Gaia Photo by Alesa Dam

Architecture

Firefox OS architecture

Open Web Apps

Apps

Firefox OS apps

What makes a great app?

Une app = un site web

Firefox OS apps
  • + un manifeste
  • + des Web API
  • + des Web Activities

app.manifest

{
  "name": "Mon application",
  "description": "Une description courte de l'application",
  "launch_path": "/",
  "icons": { "128": "/img/icone-128.png" },
  "developer": {
    "name": "Votre nom ou organisation",
    "url": "http://votre-site-web.org"
  },
  "default_locale": "fr"
}

https://developer.mozilla.org/fr/docs/Applications/Manifeste

Trois niveaux d'accès…

  • Apps hébergées - stockées sur votre serveur, faciles à mettre à jour, accès limité aux WebAPIs.
  • Apps privilégiées - vérifiées par le magasin d'applications (Marketplace) et signées.
  • Apps certifiées - parties de l'OS, uniquement par Mozilla et ses partenaires.

App permissions

WebAPIs

Web API (apps hébergées)

  • Vibration API
  • Screen Orientation
  • Geolocation API
  • Mouse Lock API
  • Open WebApps
  • Network Information API
  • Battery Status API
  • Alarm API
  • Push Notifications API
  • WebFM API / FMRadio
  • WebPayment
  • IndexedDB
  • Ambient light sensor
  • Proximity sensor
  • Notification

Utilisation des WebAPI

Exemple : la batterie

          var b = navigator.battery;
          if (b) {
            var level = Math.round(b.level * 100) + "%",
                charging = (b.charging) ? "" : "not ",
                chargeTime = parseInt(b.chargingTime / 60, 10),
                dischargeTime = parseInt(b.dischargingTime/60,10);
            b.addEventListener("levelchange", show);
            b.addEventListener("chargingchange", show);
            b.addEventListener("chargingtimechange", show);
            b.addEventListener("dischargingtimechange", show);
          }
        

Web APIs (apps privilégiées)

  • Device Storage API
  • Browser API
  • TCP Socket API
  • Contacts API
  • systemXHR

Utilisation des WebAPI

Web APIs (apps certifiées)

  • WebTelephony
  • WebSMS
  • Idle API
  • Settings API
  • Power Management API
  • Mobile Connection API
  • WiFi Information API
  • WebBluetooth
  • Permissions API
  • Network Stats API
  • Camera API
  • Time/Clock API
  • Attention screen
  • Voicemail

Using WebAPIs to make the web layer more capable

Web Activities

Web activities

  • configure
  • costcontrol
  • dial
  • open
  • pick
  • record
  • save-bookmark
  • share
  • view
  • new + type (sms, contact, …)

Obtenir une image du téléphone

Pick activity
        var getphoto = new MozActivity({
          name: "pick",
          data: {
            type: ["image/png",
                   "image/jpg", 
                   "image/jpeg"]
          }
        });
      

Préparer un numéro de téléphone

        var call = new MozActivity({
          name: "dial",
          data: {
            number: "+3280033800"
          }
        });
      

Activités pour app hébergées : aussi sous Android

Foxkeh loves android

Outils

L'éditeur est le navigateur !

Developer tools

Le simulateur Firefox OS

Simulator

Firefox OS Simulator

Téléphones développeurs

Keon, Peak

Geeksphone

  • Keon – Snapdragon S1 à 1 GHz, 512 Mo RAM, écran 3.5", 91 €
  • Peak/Peak+ – Snapdragon S4×2 à 1,2 GHz, 512 Mo/1 Go RAM, écran 4.3", 149 €

http://www.geeksphone.com/

Pour le grand public

Keon, Peak
  • ZTE Open – Espagne (Movistar), ZTE UK sur eBay
  • Alcatel One Touch Fire – Pologne (T-Mobile), Allemagne (Congstar)
  • LG Fireweb – Brésil
  • À venir : Huawei, Sony, …

http://youtu.be/Iu8q-oISbas

Où trouver plus d'informations…

Que pouvez-vous faire ?

  • Coder – écrivez des apps, contribuez à Gaia, contribuez à FxOS
  • Utiliser – utilisez le Marketplace, utilisez les Web API, utilisez FxOS
  • Feedback – donner votre avis sur les API, demandez des fonctionnalités, testez et signalez les bugs, …

Merci

Red panda (Firefox)

Template des slides : github.com/codepo8/mozilla-presentation-templates

Photo by Yortw