Screencast series: App Basics for Firefox OS

Firefox OS est un système d'exploitation qui apporte les technologies du Web aux smartphones. Au lieu d'être un nouvel OS avec de nouvelles technologies et des environnements de développements, il est construit sur des technologies web standardisées utilisées depuis des années. Si vous êtes un développeur web et que vous voulez coder une application mobile, Firefox OS vous donne les outils pour le faire, sans devoir changer votre workflow ou apprendre à utiliser un nouvel environnement de développement. Dans cette collection de petites vidéos, les développeurs de Mozilla et de Telenor se sont rencontrés à Oslo, en Norvège pour expliquer en quelques étapes comment vous pouvez commencer à coder des applications pour Firefox OS.

Dans cette série vous apprendrez:

  • Comment coder votre première application pour Firefox OS.
  • Comment débuger et tester votre application sur votre ordinateur et sur un appareil physique.
  • Comment la publier sur le Marketplace Firefox .
  • Comment utiliser les APIs et les interfaces spéciales : Firefox OS offre un support du JavaScript pour tirer profit du hardware embarqué sur les smartphones.

Note: Chacune des vidéos est assez courte pour être regardée durant une courte pause; la série entière se regarde en moins d'une heure.

Code et environnement de développement
 

En plus des vidéos, vous pouvez télécharger les exemples de codes depuis GitHub. Si vous voulez essayer les exemples vous-même, vous devrez mettre en place un environnement de développement simplifié. Vous aurez besoin de:

  • Une version à jour de Firefox, qui est livrée avec les outils de développement dont vous aurez besoin — nous recommandons l'utilisation de Firefox Aurora ou Bêta si vous souhaitez vraiment "jouer" avec le must de la technologie.
  • Un éditeur de texte — dans les vidéos, nous utilisons Sublime Text, mais n'importe quel logiciel d'édition fera l'affaire. Si vous souhaitez développer nativement pour le web, vous pouvez essayer Adobe Brackets.
  • Un serveur local ou un serveur distant pour y envoyer les fichiers de démonstration. Certaines applications de démonstration nécessitent une connexion HTTP au lieu d'une connexion locale.

Introduction

Interviennent dans cette série Jan Jongboom (@janjongboom) et Sergi Mansilla (@sergimansilla) de Telenor Digital, de Chris Heilmann (@codepo8) de Mozilla; cette série a été tournée en trois jours à Oslo, en Norvège au siège social de Telenor, en février 2014.

Voici les trois d'entre nous qui vous parleront de cette série et ce à quoi vous attendre:

Section 1: Construire sa première application Firefox OS et la publier

Dans les cinq captures vidéos de la Section 1 nous vous montrons comment construire une application Firefox OS, comment la déboguer et la tester sur votre ordinateur — ainsi que sur un vrai appareil, et comment la mettre sur le Marketplace Firefox. Cela peut sembler être une charge de travail fastidieuse mais vous découvrirez bien assez vite que si vous savez déjà comment construire un site web, vous avez déjà accompli 90% du travail.

Plus qu'un site web

Les applications Firefox OS sont des applications HTML5. Par définition, elles utilisent les même technologies que les sites web. Vous pouvez commencer à écrire un site web et le transformer en application simplement en lui rajoutant un fichier manifeste (voir manifeste d'application pour plus de détails). Ce dernier dit à Firefox OS que vous écrivez une application et vous permet de:

Par essence, les applications HTML5 sont des sites web suralimentées et devraient suivre les mêmes règles, comme:

  • Une amélioration progresssive: Vérifiez que ce que vous voulez utiliser est vraiment disponible avant d'essayer d'y avoir accès.
  • Adaptation à leur environnement: Par exemple en utilisant les Media queries et des images Responsive pour optimiser les applications sur différents écrans, résolutions et vitesse de connexion disponible.
  • Une utilisation de l'HTML, du CSS et du JavaScript comme technlogies centrale.

La principale différence est que pour qu'un site web devienne une bonne application, vous devriez vraiment prendre en compte les utilisateurs mobile. Cela signifie tout d'abord que votre application devrait:

  • Fonctionner hors-ligne.
  • Permettre à vos utilisateurs de faire une chose et d'avoir une interface qui permette de le faire facilement.
  • Soit peu consommatrice de batterie, et de ressources processeur.

Dans beaucoup de cas, cela signifie que vous devriez faire amincir votre page web et simplifier l'interface. La bonne nouvelle est que tous les utilisateurs en bénéficieront.

Note: Pour en apprendre plus sur le design d'une bonne application HTML5, regardez du coté de la page Applications [fr].

Le manifeste d'application

Le manifeste d'application dans Firefox OS est un simple fichier JSON qui donne des informations au système d'exploitation sur votre application. C'est lui qui transforme une page web en application web ouverte. Dans celui-ci, vous allez définir le nom et demander au système d'exploitation d'avoir accès à plusieurs services et au matériel. Vous pouvez aussi définir l'orientation apropriée pour votre application et si besoin, la verrouiller.

Plus d'informations sur le manifeste et les outils qui peuvent vous aider:

Le Gestionnaire d'application

La façon la plus simple de commencer avec Firefox OS est d'utiliser le gestionnaire d'applications. Cet outil fait parti des outils de développement de Firefox pour pc et vous permet de vous connecter à un émulateur de Firefox OS tournant sur votre ordinateur, ou sur un véritable appareil Firefox OS si vous en possédez un. De là, vous pouvez jouer avec Firefox OS, installer des applications directement sur l'émulateur ou sur un vrai appareil, et les déboguer pendant qu'elle tournent sur Firefox OS. Ceci permettra de voir immédiatement les changements sans réinstaller ou mettre à jour les applications.

La vidéo suivante montre les premiers pas avec le Gestionnaire d'application dans l'émulateur:

Note: Le Gestionnaire d'application vous permet de déboguer sans problème vos applications même si vous êtes hors-ligne

Pour plus d'informations sur le Gestionnaire d'application:

L'essayer sur votre appareil

Tester vos applications sur l'émulateur c'est bien, mais vous ne pourrez pas dépasser les limites de l'environnement d'émulation. Si vous voulez tester les performances d'interaction de votre appareil, ou le faire réagir à l'orientation, vous aurez besoin d'un vrai appareil. Avec le Gestionnaire d'application et les outils de développements, vous pouvez regarder en détail ce qu'il se passe dans votre application sur votre appareil pendant son utilisation.

Publier sur le Marketplace

Le Marketplace de Firefox OS est l'endroit qui convient le mieux pour ajouter votre application dans la liste et la rendre accessible aux autres personnes et à leur appareil ainsi que sur le Web. Le Marketplace vous permet aussi de mettre à disposition votre application sur d'autres plateformes comme Firefox Desktop et Firefox pour Android. Vous pouvez aussi permettre aux utilisateurs de noter votre application, vous donner des retours d'utilisation, et acheter votre application en utilisant un simple processus de vérification. Rajouter votre application est très simple:

  • Envoyez au marketplace l'URL de votre fichier manifeste.
  • Ajoutez une descirption de votre application (qui permettra aussi aux gens de la trouver parmis plusieurs autres.)
  • Mettre des captures d'écrans ou des vidéos pour faire des démonstrations des fonctionnalités de votre appareil.
  • Choisir une catégorie pour votre application.
  • Fournissez-nous une adresse email pour vous contacter.
  • Donnez à vos utilisateurs finaux un lien vers votre politique de confidentialité et un site de support web.

Les applications soumises au Marketplace sont verifiées par l'équipe de vérification d'applications de Mozilla et vous serez notifié de l'état de votre soumission d'application dans les jours qui suivent. S'il y a des problèmes avec votre application vous recevrez un message durant la période de validation mais il se peut aussi que vous receviez des explications humaines de ce qui ne va pas et comment les réparer.

Note: Lisez Proposer une application sur le Firefox Marketplace pour plus d'informations sur le processus de soumission d'application.

Section 2: Sujets avancés du Firefox OS

Dans les première vidéos nous vous avons présenté Firefox OS et comment construire votre première application. Nous avons aussi expliqué comment déboguer votre application sur le pc, sur un vrai appareil et comment le proposer sur le Marketplace Firefox. Dans les cinq vidéos restantes nous allons aller plus loin dans l'explication des technologies qui permettent aux applications Firefox OS de gagner en puissance et vous donner accès aux fonctionnalités qui rendent le développement sur un smartphone ou une tablette intéressant pour les développeurs. Bien que certaines de ces technologies soient en cours de travaux sur le Firefox OS, elles sont toutes open-source et soumises aux standards. Travailler avec ces APIs aujourd'hui signifie que vous êtes prêt pour les prochains appareils et plateformes à venir.

APIs Web

Les smartphones contiennent de puissantes technologies: cameras, accéléromètre et un GPS pour ne nommer qu'eux. Le problème est que celles-ci n'étaient pas accessible par les technologies web, mais en créant des applications natives. Pour réparer cela, Mozilla et ses partenaires ont définit des APIs pour permettre aux développeurs de contrôler le matériel des appareils mobiles en utilisant le JavaScript de manière sécurisée. Elles sont appelées les Web APIs, elles sont libres et peuvent être implémentées. Firefox OS est la première plateforme qui les utilisent, la vidéo suivante vous en dira plus:

Plus d'informations sur les Web APIs:

  • La page de Wiki de description sur l'état de l'implémentation, qui comprend aussi des liens vers les standards auxquels elles sont rattachées.
  • Les articles sur Mozilla Hacks traitant des Web APIs.

Web Activities

Web Activities sont une alternative pour accéder au matériel d'un appareil. Au lieu d'utiliser une API pour communiquer directement avec l'appareil, les Web Activities vous permettent de créer un écosystème d'applications sur votre appareil qui communiqueront et partageront leur fonctionnalités. Par exemple, au lieu d'essayer d'accéder à la caméra directement, votre application peut utiliser une Web Activity pour demander une image et l'utilisateur utilisera son application favorite pour prendre une photo, qui sera ensuite envoyée à l'application correspondante.

Au lieu de demander aux utilisateurs l'accès à leur matériel (ce qui, en terme de sécurité est important) vous leur permettrez d'utiliser les applications auxquelles ils font déjà confiance pour s'occuper de ces fonctionnalités. Mieux encore, vous pouvez enregistrer votre application pour accomplir certaines tâches dans le système d'exploitation. Vous pouvez comparer les Web Activities à un Clic droit sur un fichier sur votre ordinateur et choisir quelle application utiliser pour ouvrir le fichier. Vous avez accès à plusieurs choix dont une pour demander au système d'exploitation de toujours utiliser cette application pour ouvrir ce type de fichier.

Les Web Activities permettent aux application de communiquer entre-elles, sur l'appareil, sans nécessiter de serveur entre. Tout ce qu'elles transmettent d'une application à l'autre sont les données finales.

Plus d'informations sur les Web Activities:

Push Notifications

Les Push Notifications, appelées en utilisant l'API Web SimplePush, sont un moyen de réveiller les applications quand un appareil reçoit un certain message. Cela vous permet de créer des applications qui peuvent rester éteintes, et donc qui économisent de la batterie, jusqu'à ce que vous en ayez besoin. Utiliser les notifications ainsi a aussi l'avantage de ne pas transporter de données. Ainsi Mozilla n'obtiendra jamais d'informations sur votre application et des attaquants potentiels ne pourront pas observer l'application.

Plus d'information sur les Push Notifications utilisant SimplePush:

Fonctionnalités hors-ligne

Les applications ne sont que peu utilisées si elles ne fonctionnent pas hors-ligne. C'est pourquoi la plupart des utilisateurs préfèrent les appliations installées plutôt que d'ouvrir un navigateur et regarder du contenu sur leur navigateur web mobile. Le nom "application web" sous-entend même qu'il faut avoir une connexion pour pouvoir l'utiliser. Nos utilisateurs seront hors-ligne parfois (dans un avion, dans un métro, là où il n'y a pas de connexion vers leur carte SIM) et nous devons nous assurer que nos applications resteront utilisable quand ça arrivera. HTML5 propose plusieurs technologies qui proposent des fonctionnalités hors-ligne, principalement AppCache et DOMStorage.

Plus d'informations sur les fonctionnalités hors-ligne:

  • La page de Wiki DOMStorage.
  • La page de Wiki AppCache.
  • Utiliser IndexedDB pour un stockage avancé chez le client.
  • LocalForage est une surcouche utilisée dans Firefox OS pour fournir la simplicité de DOMStorage avec la puissance de IndexedDB (expliqué en détail dans cet article de Mozilla Hacks

Où en trouver plus

Nous espèrons que cette série de vidéos vous aura donné une introduction claire pour construire vos premières applications web ouvertes. Si vous voulez en savoir plus, il existe quelques sources supplémentaires que vous pouvez regarder:

  • Le MDN App Center explique comment faire un design et construire une bonne application web ouverte
  • Le MDN Marketplace contient des instructions détaillées pour voir votre application listée dans le Firefox Marketplace, les différentes options de publications ainsi que la gestion des paiements.
  • Le Hacks Blog écrit de façon hebdomadaire sur les applications Firefox OS (provenant de l'équipe Mozilla et des développeurs tiers comme vous) et les technologies de pointe. C'est le meilleur endroit pour savoir ce qu'il y aura dans les prochaines versions de Firefox OS)
  • La partie Firefox OS du MDN et le wiki B2G proposent plus d'informations sur le système d'exploitation Firefox OS
  • Nous sommes souvent sur IRC, il suffit d'aller sur irc.mozilla.org et de nous trouver aux canaux comme #devrel, #b2g, #openwebapps ou #marketplace.

En espérant vous voir par ici,

Chris, Sergi et Jan

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : jwhitlock, Hell_Carlito, Ilphrin, maybe, Luejni, vincent38, Rostmacalo
 Dernière mise à jour par : jwhitlock,