Fxos

496 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
496
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Fxos

  1. 1. Plan •Introduction •Architecture •Guidelines •Création d'un écran •Manifest •Hosted/Packaged apps •Permissions •WebAPIs/WebActivities •Simulateur •Gaia Building Blocks •Hands-on
  2. 2. 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é.
  3. 3. 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
  4. 4. 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
  5. 5. 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.
  6. 6. UI Guidelines http://www.mozilla.org/en-US/styleguide/products/firefox-os/ !
  7. 7. Création d’un écran http://en.wikipedia.org/wiki/Single-page_application <body role="application"> <section role="region" id="first-screen"> <header> <h1>My application</h1> </header> ! <article> My content </article> </section> ! <!-- Other sections --> </body>
  8. 8. Manifest https://developer.mozilla.org/en-US/Apps/Developing/Manifest manifest.webapp { "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" } } }
  9. 9. Manifest Portage rapide
  10. 10. Hosted vs Packaged Apps 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 Packaged 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)
  11. 11. Différentes permissions https://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.
  12. 12. Différentes permissions
  13. 13. Web APIs https://developer.mozilla.org/en-US/docs/WebAPI Permettent d’accéder au hardware // If this device supports the vibrate API... if ('vibrate' in navigator) { // ... vibrate for a second navigator.vibrate(1000); } // Saving a contact var contact = new mozContact(); contact.init({name: 'Odin'}); var request = navigator.mozContacts.save(contact); request.onsuccess = function() { /*...*/ }; request.onerror = function() { /*...*/ }; // Making calls var call = new MozActivity({ name: "dial", data: { number: "5555-9999" } });
  14. 14. WebActivities https://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" } });
  15. 15. Simulateur https://addons.mozilla.org/fr/firefox/addon/firefox-os-simulator/
  16. 16. Tips Control + Shift + M Command + Option + M
  17. 17. Gaia Building Blocks http://buildingfirefoxos.com/ CSS animations Buttons Drawer (slide panel) ActionBar (headers) Input Lists Progress Value selectors etc…
  18. 18. Hands-on

×