Voir la source de Développer une application pour son smartphone avec firefox

=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
# Choisir son éditeur pour créer les fichier: un simple éditeur comme [http://brackets.io brackets] ou un environnement plus complexe de développement comme Eclipse.
# Installer un navigateur, dans les faits il vaut mieux utiliser [http://www.mozilla.org/fr/firefox firefox] dans ce contexte et son [https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager App Manager]
==Tester une application pour se familiariser avec l'outil==
# Récupérer les sources [[https://wiki.inria.fr/wikis/sciencinfolycee/images/f/f3/Battery-quickstart-starter-template-complete.zip ICI]] (dézipper le fichier) ils serviront de modèle pour les applications suivantes: [[Image:AppFirefoxTutoriel-2.png|center]]
# Dans firefox : lancer le manager d'application [[Image:AppFirefoxTutoriel-1.png|800px|center]]
# Puis effectuer les quatres opérations suivantes
## Ajouter l'application en ouvrant tout simplement le répertoire "battery-quickstart-starter-template-complete" qui a été dézipper
## Démarrer le simulateur 
## Choisir l'OS par défaut
## Cliquer sur update pour charger l'application dans le simulateur [[Image:AppFirefoxTutoriel-3.png|800px|center]]
et vous voilà avec un smartphome simulé qui exécute votre application [[Image:AppFirefoxTutoriel-4.png|center]]
# 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: [https://developer.mozilla.org/en-US/Apps/Quickstart App quickstart]

==Partager mon application une fois terminée==
* On peut 
** soit la soumettre au [https://marketplace.firefox.com 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 [[Image:AppFirefoxTutoriel-5.png|center]]
* 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'' [[Image:AppFirefoxTutoriel-6.png|center]]
** et la sauver sur son smartphone ou tablette sous forme d'application.
*** facile, non ?
* Ref: [https://developer.mozilla.org/en-US/Marketplace/Options/Self_publishing App pulishing]

==Utiliser les technos HTML5/JS==
* Le point clé est avant toute implémentation de réfléchir au [https://developer.mozilla.org/fr/Apps/Quickstart/Design/Fondamentaux_pour_design design] de l'application: que voulons nous faire ? pour quel usage et usagers ? etc
* On utilise ensuite deux groupes de technos
** [https://developer.mozilla.org/fr/docs/Web/HTML HTML] et [https://developer.mozilla.org/fr/docs/CSS CSS] pour créer les pages et les documents de l'application,
** [https://developer.mozilla.org/fr/docs/Web/JavaScript JavaScript] et toutes les [https://developer.mozilla.org/fr/docs/Web/API interfaces] pour accéder à toutes les ressources que l'on souhaite (géolocalisation, caméras, …),
** sans oublier les [https://developer.mozilla.org/fr/docs/Web objets graphiques],
y compris pour des [https://developer.mozilla.org/fr/docs/Jeux jeux].
https://developer.mozilla.org/fr/docs/Web/HTML
https://developer.mozilla.org/fr/docs/CSS