Tutoriel Application Météo

Créer une application météo avec les modèles

Ce tutoriel va vous apprendre à créer une application simple nommée weatherme.

Nous avons développé le modèle Open Web App Bootstrap dans le but de vous aider à démarrer dans l'écriture d'une Open Web App. Ces modèles sont des projets HTML/CSS et JavaScript. Ils sont donc d'ores et déjà prêts, vous permettant d'écrire votre application rapidement.

Le nom de code du modèle Open Web App est Mortar. Il dispose de nombreux modèles pour différents types d'applications. Cependant dans le cas présent, nous allons simplement utiliser le modèle nommé « app-stub ». C'est un modèle basique contenant JQuery, require.js, volo, Mozilla MarketPlace libraries, ainsi que d'autres trucs utiles.

Ce dont vous avez besoin

Node.js (requis par volo et d'autres outils décrits plus bas)
Git
un compte GitHub (un compte gratuit suffit)
Mortar

Mise en place

Pour démarrer, téléchargez le modèle. Vous pouvez tout aussi bien exécuter la commande suivante (git est un système de versionnage sous licence GPL) :

$ git clone [email protected]:mozilla/mortar-app-stub.git weatherme

Il va aussi nous falloir utiliser volo, si vous ne l'avez pas encore téléchargeé (npm vient avec node.js) :

$ npm install -g volo

volo est un outil d'automatisation de votre projet. Il vous permet entre autres de tester, optimiser et déployer votre code en une seule commande.

Note: Si vous avez déjà installé volo et que vous obtenez une erreur en l'exécutant, téléchargez la dernière version.

Développement

Nous sommes donc prêts à coder. Où sont alors les fichiers ? Eh bien, voici à quoi ressemble le dossier racine :

README.textile
package.json
tools
volofile
www

Les sources de votre projet se trouvent dans le dossier www. Les autres fichiers sont là pour permettre de tester et déployer votre code, ce que nous verrons un peu plus tard.

Si vous jetez un œil dans le dossier www, vous y trouverez un grand nombre de choses. La plupart viennent du projet HTML5 Boilerplate, mais il a été spéciallement modifié pour l'écriture d'Open Web Apps.

HTML

Pour ajouter du code HTML, ouvrez le fichier www/index.html. La première chose que vous devriez faire est d'ajouter un titre et une description dans les tags title et meta, puis ajouter le HTML de votre application dans le tag body. N'ajoutez pas de CSS ou JavaScript dans ce fichier, nous y viendrons après.

Vous pouvez voir le code ajouté pour l'application weatherme ici. Nous utilisons Twitter Bootstrap, vous pouvez donc voir un élément de navigation ainsi que quelques boutons.

Voyons à quoi ressemble notre HTML dans le navigateur. Exécutez cette commande à la racine de votre projet :

$ volo serve

Ceci monte un serveur tout simple sur votre ordinateur local, vous pouvez alors voir le résultat ici https://localhost:8008.

JavaScript

Ensuite, ajoutons quelques bibliothèques JavaScript, comme l'excellente underscore.js. Il est possible de l'ajouter en utilisant simplement la commande :

$ volo add underscore

La commande add trouve le projet sur GitHub pour le récupérer (vous pouvez aussi lui passer l'URL). Elle est maintenant disponible comme bibliothèque à importer avec require.js.

Écrivons alors un peu de JavaScript pour que notre application devienne utile. J'utilise l'API weather de Yahoo pour obtenir les données. Ouvrez www/js/app.js vous y verrez du JavaScript déjà présent. Celui-ci initialise require.js, inclut JQuery et quelques autres bibliothèques.

Vous verrez aussi la ligne suivante :

define(function(require) {

Celle-ci définit le module require.js. Vous pouvez aller chercher le code de weatherme ici.

Si vous voulez utiliser une bibliothèque JavaScript pour améliorer votre code, vous devez alors l'importer en premier lieu. Souvenez-vous, nous avions importé underscore.js il-y-a quelques lignes. Pour l'utiliser écrivez :

var _ = require('underscore');

require.js ne se lance jamais avec le tag <script>. Il pourrait y avoir quelques exceptions, mais tous les bibliothèques JavaScript devraient être importées avec require. Cela pour aider à la modularité, séparer les éléments, et améliorer la miniaturisation pour le déploiement.

weatherapp utilise le composant tab de Twitter Bootstrap, nous devons inclure son code JavaScript. Ajoutez alors cette ligne :

require('bootstrap/tab');

Qu'importe la valeur de retour, cela modifie un objet de JQuery. Vous pouvez retrouver le reste du code JavaScript de l'application sur sont dépot GitHub.

Note: jQuery et Twitter Bootstrap ont été ajoutés spécifiquement à la main pour cette application.

CSS

À présent, un peu de CSS. Ouvrez www/css/app.css vous y verrez importé defaults.css. Sentez-vous libre d'éditer default.css. Nous utilisons Twitter Bootstrap, décommentez donc la ligne suivante :

@import "bootstrap.css";

Elle permet d'inclure le CSS des composants du Twitter Bootstrap. Nous n'avons pas besoin du CSS responsive, nous allons donc laisser le reste en commentaire. Lorsque nous compilerons l'application pour le déploiement, tout sera placé dans un seul CSS minimisé.

Écrivez le reste du CSS de votre application ici. Le CSS de weatherme ce trouve ici.

Nous avons du HTML, du CSS et du JavaScript… C'est l'heure du test. Utilisez à nouveau la commande serve :

volo serve

Rendez-vous alors à l'adresse https://localhost:8008. Lancez-vous maintenant dans la chasse aux bogues !

Déploiement

Avant de déployer notre application, modifiez le fichier manifest.webapp. Ouvrez le fichier dans www, changez le nom, la description et autres. Si vous comptez utiliser GitHub assurez-vous que launch_path est défini par /<project-name>/ et pas simplement /.

Une fois prêt à déployer, construisez votre application avec build (dans la racine du projet) :

volo build

Ceci crée un dossier www-built avec tout votre JavaScript et CSS minimisé et concaténé. Si vous voulez tester, lancez la commande serve avec l'argument base :

volo serve base=www-built

Si vous voulez un appcache pour que votre application s'exécute hors-ligne, volo le générera pour vous. Il vous faut juste exécuter :

volo appcache

Cela créera le cache dans le dossier www-built (et compilera votre application si ce n'est déjà fait). Et voilà ! Tout vos fichiers seront utilisables hors-ligne !

Enfin, volo a une commande pour le déploiement sur GitHub. Nous recommandons GitHub car c'est simple d'utilisation et stable. Ceci n'est pas possible si vous avez une logique serveur, mais si votre application est purement orientée client, utilisez GitHub Pages. Il suffit d'exécuter :

volo ghdeploy

S'il n'existe pas, volo créera un dépot pour vous, et le poussera dans la branche gh-pages ce qui indiquera à GitHub de créer votre page à <username>.github.com/<project>. Dès lors votre application prend vie !

Pour les futures modifications, vous devriez avant tout compiler votre application app (volo build) et ensuite la déployer (volo ghdeploy). ghdeploy ne compile pas vous.