View
100
Download
0
Category
Preview:
Citation preview
Plan•Introduction •Architecture •Guidelines •Création d'un écran •Manifest •Hosted/Packaged apps •Permissions •WebAPIs/WebActivities •Simulateur •Gaia Building Blocks •Hands-on
Firefox OS ???http://www.mozilla.org/en-US/mission/
Nom de code : Boot To Gecko (B2G) !
Firefox OS = Implémentation de la mission de la fondation Mozilla (construire un meilleur Internet et un web plus ouvert et accessible à tous) sur la mobilité.
Firefox OS ???Terminaux disponibles à la vente depuis Juillet 2013
Espagne, Pologne, Uruguay, Venezuela, Colombie, Mexique, Brésil…
ZTE Open - Alcatel One Touch - Geeksphone Keon / Peaks
Architecture
Gonk : Noyau Linux + custom-built HAL (Hardware Abstraction Layer) Gecko : Moteur de rendu HTML, CSS, JS basé sur celui du navigateur Firefox + Gestion des Web API Gaia : Interface utilisateur - Ensemble d’applications HTML5
Architecture
- + =Gonk : Noyau Linux basé sur la version fournie par Android Open Source Project Communication avec le device via ADB (Android Debug Bridge) Fichiers apk (/system/app/) et police Roboto dans le filesystème Build.prop ClockWorkMod etc.
UI Guidelines
!
http://www.mozilla.org/en-US/styleguide/products/firefox-os/
Création d’un écran
<body role="application"> <section role="region" id="first-screen"> <header> <h1>My application</h1> </header> ! <article> My content </article> </section> ! <!-- Other sections --> </body>
http://en.wikipedia.org/wiki/Single-page_application
Manifesthttps://developer.mozilla.org/en-US/Apps/Developing/Manifest
{
"version": "1",
"name": "Firefox OS Boilerplate App",
"launch_path": "/index.html",
"description": "Boilerplate Firefox OS app with example use cases to get started",
"icons": {
"60": "/images/logo60.png",
"128": "/images/logo128.png"
},
"developer": {
"name": "Robert Nyman",
"url": "http://robertnyman.com"
},
"default_locale": "en",
"permissions": {
"desktop-notification": {
"description": "To show notifications"
},
"geolocation": {
"description": "Marking out user location"
}
}
}
manifest.webapp
ManifestPortage rapide
Hosted vs Packaged AppsPackaged apps
!
!
•Distribuées dans un fichier .zip et installées dans l'appareil
•Accès aux APIs du système •Mises à jour moins souples que pour les hosted apps (publication, validation Firefox Marketplace)
Hosted apps !
!
•Hébergées sur votre propre serveur (comme n’importe quel site)
•Peuvent être installées sur le device (avec un peu de JS + Manifest)
•Facile à maintenir •Difficile de gérer le offline (appcache)
•Limitées dans les APIs du système qu’elles peuvent utiliser
Différentes permissionshttps://developer.mozilla.org/en-US/docs/WebAPI
• Plain (web, default) : Toutes les apps qui ne déclarent aucune permission particulière dans leur Manifest entrent dans cette catégorie. Elles ont accès à la plupart des APIs qui sont fournies dans les navigateurs, mais n’ont pas accès aux WebAPIs de Mozilla !
• Privileged : Accès à la plupart des APIs + certaines plus sensibles comme l’API des contacts du téléphone ou les alarmes système. Ces applications doivent être approuvées par Mozilla et signées par le MarketPlace pour pouvoir être installées sur les devices des utilisateurs - Processus de review plus long. !
• Certified : Seulement pour Mozilla et ses partenaires (constructeurs, telecom…) : Les applications certifiées ont accès à toutes les APIs, même les plus critiques (passer des appels etc.). Seules les apps inclues par défaut dans le système sont certifiées.
Différentes permissions
Web APIs
Permettent d’accéder au hardware
https://developer.mozilla.org/en-US/docs/WebAPI
// If this device supports the vibrate API... if ('vibrate' in navigator) { // ... vibrate for a second navigator.vibrate(1000); }
// Making calls var call = new MozActivity({ name: "dial", data: { number: "5555-9999" } });
// Saving a contact var contact = new mozContact(); contact.init({name: 'Odin'}); var request = navigator.mozContacts.save(contact); request.onsuccess = function() { /*...*/ }; request.onerror = function() { /*...*/ };
WebActivitieshttps://hacks.mozilla.org/2013/01/introducing-web-activities/
Similaire aux Intents (appels de fonctionnalités d’autres apps)
// Open an image picker var pick = new MozActivity({ name: "pick", data: { type: ["image/png", "image/jpg", "image/jpeg"] } });
// Open a URL var openURL = new MozActivity({ name: "view", data: { type: "url", // Possibly text/html in future versions url: "http://www.xebia.fr" } });
Simulateurhttps://addons.mozilla.org/fr/firefox/addon/firefox-os-simulator/
TipsControl + Shift + M
Command + Option + M
Gaia Building Blocks
CSS animations Buttons Drawer (slide panel) ActionBar (headers) Input Lists Progress Value selectors etc…
http://buildingfirefoxos.com/
Hands-on
Recommended