CloudAtlas #1 : une application pour tester Meteor.JS [tuto]

Ce premier article est issu d’un tutoriel disponible sur la page github du projet « cloudAtlas ». Il en reprend la première partie décrivant l’installation de Meteor.JS sous mac.

Meteor est un framework (plus précisément une « stack » de plusieurs applications) JavaScript assez récent permettant de développer des pages dynamiques et des applications en un rien de temps mais également en très peu de ligne de codes. Utilisant notamment Node.js, Meteor permet de développer son application uniquement en Javascript, côté client aussi bien, et c’est là la force du framework, que côté serveur. Une merveilleuse idée quand on constate le succès que connait aujourd’hui le langage, notamment simplifié et démocratisé par jQuery. Une merveilleuse idée surtout pour nous autres débutants qui apprécierons grandement de n’avoir qu’un seul langage de programmation à manipuler, et à tenter de comprendre.

Meteor gère par ailleurs pour nous la base de donnée nécessaire au développement du projet, en utilisant MongoDb, qu’il n’est pas utile de connaître, dans un premier temps. L’apprentissage de Meteor, et de son système de collections, nous en apprendra suffisamment sur son fonctionnement pour faire tourner notre première application.

Enfin, notons sans trop entrer dans la complexité du framework que Meteor tient son succès à sa réactivité : toute modification d’une donnée sera automatiquement et en temps réel prise en compte par toutes les applications et tous les utilisateurs, y compris du côté des interfaces utilisateurs, sans avoir à actualiser sa page. C’est une caractéristique éminemment essentielle pour des applications de discussion par exemple, de partage de donnée, de plateforme de collaboration en temps réel ou encore de liste à actualiser. Mais pas seulement, le champ des possibles reste grand ouvert !

De nombreux exemples et tutoriaux sont d’ores-et-déjà disponibles sur Internet :

• le site officiel de Meteor propose quelques exemples intéressants comme des tableaux de classement de résultats mis à jour en temps réel, des jeux ou encore une « liste des choses à faire » (todo list) s’actualisant aisément ;
• Nettuts+ propose notamment un tutoriel pour monter une application de chat, ou encore un autre pour créer un « panier » pour un site d’e-commerce s’actualisant en temps réel ;
• le site dédié discovermeteor.com propose plusieurs tutoriaux pour démarrer, notamment un reprenant la construction d’un petit forum, ainsi qu’un autre reprenant une partie du code de Telescope, un des premiers sites web entièrement développés sous Meteor ;
• w3resource propose quant à lui un tutoriel pour une application de partage de liens ;
• Sacha Grief propose sur SmashingMag un tutoriel très complet pour une application de partage de contact Twitter prenant en compte une connexion via son compte Twitter ;
• Andrew Scala propose également un tutoriel très détaillé pour comprendre les principales caractéristiques du framework ;
• enfin, Github est rempli d’exemples d’applications pour tester Meteor.

Ce tour d’horizon non-exhaustif illustre l’abondance des articles de qualité accompagnant l’apprentissage de Meteor mais met également en relief l’absence de tutoriel pour les francophones non-anglophones – à l’exception peut-être de la très bonne traduction de l’article d’Andrew Scala par Etienne Balit. Cet article se propose donc d’expliquer aussi succinctement que possible, et dans la langue de Zinedine Zidane, comment installer Meteor. Un second article, d’une longueur sensiblement plus importante, nous permettra de créer notre première application avec Meteor. L’application proposée sera par ailleurs très distincte de ce qui est déjà proposé.

L’idée est de créer une application qui servirait à plusieurs usages différents. Pour monter en généralité, l’application prend le nom générique de cloudAtlas. Elle se divise en deux parties. Dans une partie il s’agit d’enregistrer un « cloud » selon deux champs (un titre et un sous-titre par exemple) et de le classer en renseignant un troisième champ de référence. Dans une autre partie, il s’agit de retrouver n’importe quel cloud enregistré selon ce troisième champ de référence. L’application permet ainsi de classer des objets selon divers prix par exemple, puis de retrouver pour chaque prix les objets enregistrés ; elle peut permettre également de classer les films actuellement à l’affiche selon un système de notation (par exemple, entre 1 et 5 étoiles), puis de retrouver pour chaque note les différents films correspondants ; elle permet encore de classer des interlocuteurs selon des spécialisations, et pour chaque spécialisation retrouver le ou les interlocuteurs de référence… Bref, les exemples d’utilisation de ce cloudAtlas sont nombreux.

Mais avant tout…

Installer Meteor et créer l’application

L’installation s’effectue à partie du Terminal, mais diffère selon le système d’exploitation. Pour Mac, il suffira de taper cette ligne de code :

curl https://install.meteor.com | /bin/sh

L’installation nécessitera sans doute votre mot de passe de session utilisateur, et parfois l’ajout de l’entête sudo avant la ligne de code. Pour créer l’application, il suffit de rester dans le Terminal est de taper tout simplement :

meteor create MonApplication

et en l’occurrence ici, pour notre application :

meteor create cloudAtlas

Ainsi, pour démarrer notre application, il nous suffit de nous y rendre tout d’abord :

cd cloudAtlas

puis de la lancer avec Meteor :

meteor

Une fois l’application lancée, elle sera accessible à une adresse local depuis n’importe quel navigateur de votre poste : http://localhost:3000/ . On y trouvera par défaut une page « Hello World ! » vous souhaitant la bienvenue.

Les différents fichiers de code se trouveront quant à eux dans le dossier portant le nom de votre application. Dans le fichier cloudAtlas, situé dans le dossier Utilisateurs, on se retrouve ainsi avec 3 documents : cloudAtlas.js, cloudAtlas.html et cloudAtlas.css.

Mais ca y est, Meteor est installé, en 30 secondes nous sommes prêts à créer notre petite application pour comprendre le fonctionnement de la stack…