Développer une application pour son smartphone avec firefox : Différence entre versions

De Sciencinfolycee
Aller à : navigation, rechercher
(Page créée avec « =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... »)
 
m (Partager mon application une fois terminée)
 
(6 révisions intermédiaires par le même utilisateur non affichées)
Ligne 8 : Ligne 8 :
  
 
==Installer ses outils==
 
==Installer ses outils==
Il y a trois gestes à faire
+
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.
 
# 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 [
+
# 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]
    Firefox and other modern browsers to test your app. Firefox comes with a set of very useful standard debugging tools, and also provides the Firefox OS App Manager to further aid with testing.
+
==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
https://developer.mozilla.org/en-US/Apps/Quickstart
+
* On utilise ensuite deux groupes de technos
https://developer.mozilla.org/fr/Apps/Quickstart/Design/Fondamentaux_pour_design (oui ! en français)
+
** [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/Jeux
+
** [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/Web/HTML
 
https://developer.mozilla.org/fr/docs/CSS
 
https://developer.mozilla.org/fr/docs/CSS

Version actuelle datée du 18 juin 2014 à 12:00

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 la sauver sur son smartphone ou tablette sous forme d'application.
      • facile, non ?
  • Ref: App pulishing

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