Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (8)
Destaque
Semelhante a Fxos
Semelhante a Fxos (20)
Mais de Nilhcem
Fxos
- 2. Plan •Introduction •Architecture •Guidelines •Création d'un écran •Manifest •Hosted/Packaged apps •Permissions •WebAPIs/WebActivities •Simulateur •Gaia Building Blocks •Hands-on
- 3. 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é.
- 4. 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
- 5. 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
- 6. 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.
- 8. 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>
- 9. 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" } } }
- 11. 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)
- 12. 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.
- 14. 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" } });
- 15. 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" } });
- 17. Tips Control + Shift + M Command + Option + M
- 18. Gaia Building Blocks http://buildingfirefoxos.com/ CSS animations Buttons Drawer (slide panel) ActionBar (headers) Input Lists Progress Value selectors etc…
- 20. Hands-on