Développer une application pour son smartphone avec firefox

De Sciencinfolycee
Révision datée du 18 juin 2014 à 11:58 par Vthierry (discussion | contributions) (Utiliser les technos HTML5/JS)
Aller à : navigation, rechercher

Développer une application pour son smartphone avec firefox

Quoi de plus cool quand on apprend à programmer de pouvoir faire sa propre application pour son smartphone, ou sa tablette, ou son ordinateur et bien entendu ceux de nos proches ?

Pas si simple : entre les systèmes très fermés d'Apple, les variantes des différents systèmes Android dont le système de développement n'est pas immédiat, et le fait qu'il faut finalement redévelopper l'application autant de fois que de plateformes … ah mais il y a une solution : développer l'application en HTML5/JavaScript elle tournera alors dans un navigateur donc sera disponible partout (et pourra même être encapsulée dans une vraie application avec un outil comme phonegap). La fondation mozilla propose même une solution toute simple:

en voici la description.

Installer ses outils

Il y a deux gestes à faire

  1. Choisir son éditeur pour créer les fichier: un simple éditeur comme brackets ou un environnement plus complexe de développement comme Eclipse.
  2. Installer un navigateur, dans les faits il vaut mieux utiliser firefox dans ce contexte et son App Manager

Tester une application pour se familiariser avec l'outil

  1. Récupérer les sources [ICI] (dézipper le fichier) ils serviront de modèle pour les applications suivantes:
    AppFirefoxTutoriel-2.png
  2. Dans firefox : lancer le manager d'application
    AppFirefoxTutoriel-1.png
  3. Puis effectuer les quatres opérations suivantes
    1. Ajouter l'application en ouvrant tout simplement le répertoire "battery-quickstart-starter-template-complete" qui a été dézipper
    2. Démarrer le simulateur
    3. Choisir l'OS par défaut
    4. Cliquer sur update pour charger l'application dans le simulateur
      AppFirefoxTutoriel-3.png

et vous voilà avec un smartphome simulé qui exécute votre application

AppFirefoxTutoriel-4.png
  1. Et alors ? À vous ! à partir de cet exemple il sera très facile de créer votre application de la tester et puis de la diffuser.

Ref: App quickstart

Partager mon application une fois terminée

  • On peut
    • soit la soumettre au marketplace de firefox,
    • soit publier le zip des sources sur un site de votre choix avec un fichier manifeste définira au moins le nom, lieux de téléchargement, version, et information sur le développeur
      AppFirefoxTutoriel-5.png
  • Ensuite de n'importe quel appareil on pourra:
    • lancer firefox et l'AppManager
    • télécharger l'application en donnant le lien vers le manifeste
      AppFirefoxTutoriel-6.png
    • et l asauver sur son smartphone ou tablette sous forme d'application.

Utiliser les technos HTML5/JS

  • Le point clé est avant toute implémentation de réfléchir au design de l'application: que voulons nous faire ? pour quel usage et usagers ? etc
  • On utilise ensuite deux groupes de technos
    • HTML et CSS pour créer les pages et les documents de l'application,
    • JavaScript et toutes les interfaces pour accéder à toutes les ressources que l'on souhaite (géolocalisation, caméras, …),
    • sans oublier les objets graphiques,

y compris pour des jeux. https://developer.mozilla.org/fr/docs/Web/HTML https://developer.mozilla.org/fr/docs/CSS