Utiliser les modèles applicatifs

Afin de vous aider à écrire des applications web rapidement, nous vous proposons quelques modèles prêts à l'emploi. Chaque modèle est un projet web qui comporte des outils censés faciliter le build et le déploiement.

Ce que vous obtiendrez:

  • Un projet HTML minimaliste bien structuré
  • Un manifest.webapp préconçu
  • Une bibliothèque JavaScript permettant d'interagir avec le MarketPlace
  • require.js pour structurer votre code JavaScript
  • volo pour l'automatisation du développement local et le déploiement
  • Des layouts préconçus (venant de certains modèles)

Tous les modèles sont accessibles sur le dépot mortar. Notamment :

  • mortar-app-stub : un modèle vierge comprenant uniquement l'essentiel pour démarrer
  • mortar-list-detail : comprenant la bibliothèque de layouts configurés pour vous
  • mortar-game-stub : un modèle de jeu web minimaliste gérant les entrées et une render loop

Démarrer avec l'App Stub Template

Vous pouvez utiliser git afin d'obtenir le modèle à cette adresse:

git clone https://github.com/mozilla/mortar-app-stub.git myapp

Nous vous recommandons cependant d'utiliser volo. Il s'agit d'un outil automatisant les projets, d'autant que vous pourrez en tirer toute la quintessence avec ce modèle, laissez-vous tenter et installez-le. Pour ce faire, il vous faudra node.js téléchargeable ici. Une fois node.js téléchargé et installé, installez volo (vous aurez sans doute à préfixer la commande avec sudo si celle-ci échoue à cause de permissions insuffisantes) :

npm install -g volo

Utiliser la commande create de volo, suivie par un nom de dossier pour votre projet ainsi que par mozilla/ et le nom du modèle mortar que vous souhaitez utiliser :

volo create myapp mozilla/mortar-app-stub

Vous pourrez utiliser la même commande create avec les futurs modèles en changeant simplement l'URL du modèle.

Et maintenant ?

Vos fichiers HTML, CSS et JavaScript sont dans le même dossier www, commencez-donc à coder! Il-y-a un paquet de chose dans ce dossier, alors sentez-vous libre d'en supprimer si vous pensez que certaines d'entres elle sont inutiles.

Le modèle utilise require.js pour gerer le JavaScript. En jetant un œil dans www/js/app.js vous y verrez le module principale défini et chargant quelques bibliothèques comme zepto. La bibliothèque JavaScript du MarketPlace y est aussi incluse, permettant les payements in-app et la vérification des reçus. Cela vous est inutile si vous développez une application gratuite et sans achat in-app.

Juste après vous trouverez la ligne suivante:

define(function(require) {

Elle définit le module principal de votre application, vous devriez donc démarrer le code de votre application dans cette fonction. Vous pouvez utiliser require pour charger d'autres modules, de la même façon qu'est chargé zepto. Allez voir require.js API afin d'en apprendre plus sur les modules.

Note : Par défaut les modules sont chargés depuis www/js/lib. Si vous voulez charger quelque chose se trouvant dans www/js, le dossier de votre application, utilisez la syntaxe require('./mylib') à la place de require('mylib')

Vous pouvez éditer le CSS dans www/css/app.css. Typiquement vous devriez importer des fichiers CSS additionnels avec @import au lieu d'utiliser le tag <link>. Cela permet à volo d'optimiser votre CSS lors du build pour le déploiement.

Enfin, volo met à votre disposition certaines commandes très utilisées :

$ volo serve         # Crée un serveur de déploiement local
$ volo add <library> # Ajoute une bibliothèque JavaScript
$ volo build         # Construit une version optimisée de l'application dans le dossier www-built
$ volo ghdeploy      # Déploie la version construite sur GitHub (vous devez utiliser volo build avant) 

Toutes ces commandes doivent être utilisées à la racine de votre projet. Il y a d'autres commandes, dont vous pouvez afficher la liste en tapant simplement volo.

Note : volo en lui-même n'a que quelques commandes intégrées. Le modèle fournit serve, build, ghdeploy, et quelques autres.

Tutoriel

Pour plus d'informations à propos de ce modèle, allez voir le tutoriel Weather App qui détaille comment créer une application météo, étape par étape. Il détaille notamment certaines commandes volo ainsi que le modèle en lui-même.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : Goofy, Irbis
 Dernière mise à jour par : Goofy,