Share
Meteor est bien plus qu’un outil de prototypage rapide, mais c’est également très bien pour le prototypage. Dans ce didacticiel, nous allons passer d’un processus étonnamment simple à une simple application filaire HTML en une application fonctionnelle..
Nous allons créer une structure filaire simple d'une application de salle de discussion. Le processus que nous essayons de démontrer commence avec une structure filaire HTML / CSS pure, réalisée dans Meteor pour plus de commodité, qui peut ensuite être très facilement transformée en une application réelle, grâce à la facilité de développement de Meteor..
Remarque: Ce tutoriel est adapté de The Meteor Book, un guide étape par étape pour la création complète d'applications Meteor. Le livre vous guidera à travers la construction d'un site complet de nouvelles sociales multi-utilisateurs (think Reddit ou Digg), en commençant par la configuration de comptes d'utilisateurs et d'autorisations d'utilisateurs, jusqu'à la gestion du vote et du classement en temps réel..
Un précédent tutoriel de Meteor, ici sur Nettuts +, a montré comment installer Meteor et créer une application simple à l'aide du météore outil de ligne de commande. Dans ce tutoriel, nous allons faire les choses un peu différemment et utiliser Meteorite.
Meteorite est un wrapper créé par la communauté pour Meteor qui nous permet d'utiliser des packages non essentiels créés par d'autres membres de la communauté Meteor. Bien qu'un système de paquetage tiers intégré soit prévu pour Meteor lui-même, à la date de rédaction de cet article, aucun support n'est disponible, à l'exception de l'ensemble des paquetages pris en charge par l'équipe principale de Meteor. Meteorite a donc été créé pour nous permettre (à la communauté) de contourner cette limitation et de publier nos packages sur Atmosphere, le référentiel de packages Meteor..
Pour ce tutoriel, nous allons utiliser certains de ces packages écrits par la communauté. Nous devrons donc utiliser Meteorite. Pour commencer, installons-le en utilisant npm.
Remarque: Une copie de Node and npm doit être installée sur votre système. Si vous avez besoin d'aide pour ce processus, les instructions d'installation de Meteorite sont un bon point de départ..
npm installer Meteorite -g
Si vous utilisez Windows, la configuration est un peu plus complexe. Nous avons écrit un tutoriel détaillé sur notre site pour vous aider..
Maintenant que Meteorite est installé, nous utilisons le mrt outil de ligne de commande (qu’il installe pour nous) à la place de météore. Alors, commençons! Nous allons créer une application:
mrt créer un chat
Pour créer notre application filaire, nous utiliserons des packages de base nous permettant de développer rapidement des pages simples et de les acheminer. Ajoutons maintenant les paquets:
mrt add bootstrap-updated mrt add font-awesome mrt add routeur
Maintenant que nous avons sélectionné un style intéressant pour notre application, nous pouvons créer une maquette de l'écran de destination. Supprimez les fichiers HTML, CSS et JS initiaux créés par Meteor et créez les deux fichiers suivants dans une client répertoire (nous ne faisons rien encore sur le serveur).
(Vous pouvez également suivre les étapes de ce référentiel.)
bavarder > chambresBienvenue sur Meteor Chat
Veuillez sélectionner une salle pour discuter ou en créer une nouvelle
client / chat.html
var rooms = [nom: 'Meteor Talk', membres: 3, last_activité: 'il y a 1 minute', nom: 'Meteor Development', membres: 2, dernieractivité: 'il y a 5 minutes', nom: 'Meteor Core', membres: 0, dernière activité: 'il y a 3 jours']; Template.rooms.helpers (rooms: rooms);
client / chat.js
Après avoir ajouté ceci, vous devriez voir l’application simple suivante (si fausse), lorsque vous accédez à http: // localhost: 3000:
Les données dans le tableau des chambres sont fixé les données que nous avons entrées manuellement client / chat.js, mais l'avantage de cette approche est qu'elle nous permet de répéter le code HTML dans notre structure filaire sans avoir à copier / coller (ce qui est presque toujours une mauvaise idée)..
Maintenant, connectons une deuxième page. Nous allons utiliser le routeur pour choisir entre deux modèles de page; une avec le message de bienvenue et l'autre avec une liste de messages pour la chambre sélectionnée.
Commençons par ajouter quelques itinéraires simples. Le routeur fonctionne en mappant des URL sur des noms de modèles. Notre cas est assez simple. voici ce que nous ajoutons:
Accentsconagua
Meteor.Router.add ('/': 'home', '/ rooms /: id': 'room'); client / chat.js
> chambres renderPageBienvenue sur Meteor Chat
Veuillez sélectionner une salle pour discuter ou en créer une nouvelle
client / chat.html
Nous utilisons le renderPage aide dans notre fichier HTML pour indiquer où nous voulons que le modèle sélectionné soit dessiné, et, juste comme ça, nous pouvons naviguer entre les deux URL et voir le contenu à droite changer. Par défaut, on voit le 'maison' modèle, qui est mappé à la route /, et nous montre un beau message.
Si nous ajoutons un modèle de la 'pièce' route et ajouter des liens vers des salles spécifiques, nous pouvons maintenant suivre les liens:
prénom
client / chat.html template 'rooms'
Bienvenue dans une salle de discussion!
client / chat.html
Cela fonctionne car le routeur mappe les URL, telles que localhost: 3000 / rooms / 7, sur 'pièce' modèle. Pour l'instant, nous ne regarderons pas l'id (7, dans ce cas), mais nous allons bientôt!
Maintenant que nous avons routé une salle de discussion sur les URL, planifions en fait une discussion dans la salle. Encore une fois, nous sommes toujours en train de nous moquer, nous allons donc continuer à créer de fausses données dans notre fichier JavaScript et à les dessiner avec Handlebars:
var rooms = [nom: 'Meteor Talk', membres: 3, last_activity: 'il y a 1 minute', messages: [auteur: 'Tom', texte: 'Salut là Sacha!', auteur: 'Sacha' , texte: 'Hey Tom, comment vas-tu?', auteur: 'Tom', texte: 'Bon merci!',], nom: 'Développement des météores', membres: 2, dernieractivité: 'il y a 5 minutes', nom: 'Meteor Core', membres: 0, dernière activité: 'il y a 3 jours']; Template.room.helpers (room: rooms [0]);
client / chat.js
Nous avons donc ajouté des données de discussion à la première salle et nous les rendons simplement à chaque fois (pour le moment) sur le modèle de salle. Alors:
#with roomBienvenue sur name
#each messages
/avec/chaque auteur : texte
client / chat.html
Voila! Une démonstration de travail de notre application de salle de discussion:
Maintenant vient la partie amusante; nous avons construit assez simplement une structure filaire de données statiques, mais grâce à la puissance de Meteor Des collections, nous pouvons le rendre fonctionnel en un rien de temps.
Rappelez-vous qu'une collection s'occupe de la synchronisation des données entre le navigateur et le serveur, en écrivant ces données dans une base de données Mongo sur le serveur et en les distribuant à tous les autres clients connectés. Cela ressemble exactement à ce dont nous avons besoin pour une salle de discussion!
Premièrement, ajoutons une collection sur le client et le serveur, et ajoutons-y quelques données de fixture simples:
(Remarque: nous mettrons le fichier de collections dans le dossier lib / répertoire, de sorte que le code soit disponible à la fois sur le client et sur le serveur.)
var Rooms = nouvelle Meteor.Collection ('salles'); if (Meteor.isServer && Rooms.find (). count () == 0) var rooms = [nom: 'Meteor Talk', membres: 3, last_activity: 'il y a 1 minute', messages: [auteur: 'Tom', texte: 'Salut Sacha!', Auteur: 'Sacha', texte: 'Hey Tom, comment vas-tu?', Auteur: 'Tom', texte: 'Bon merci!', ], name: 'Meteor Development', membres: 2, dernieractivité: 'il y a 5 minutes', nom: 'Meteor Core', membres: 0, dernière activité: 'il y a 3 jours']; _.each (chambres, fonction (salle) Rooms.insert (salle);); lib / collections.js
Nous avons transféré nos données dans la collection, nous n’avons donc plus besoin de les relier manuellement à l’aide de nos modèles. Au lieu de cela, nous pouvons simplement récupérer ce que nous voulons dans la collection:
Meteor.Router.add ('/': 'home', '/ rooms /: id': function (id) Session.set ('currentRoomId', id); retourne 'room'); Template.rooms.helpers (rooms: function () return Rooms.find ();); Template.room.helpers (room: function () return Rooms.findOne (Session.get ('currentRoomId'))); client / chat.js
Nous avons apporté quelques modifications ici; Tout d'abord, nous utilisons Rooms.find () pour sélectionner toutes les pièces à passer dans le 'pièces' modèle. Deuxièmement, dans le 'pièce' modèle, nous sélectionnons simplement la pièce qui nous intéresse (Rooms.findOne ()), en utilisant la session pour passer par le bon identifiant.
Attendez! Quelle est la session? Comment avons-nous passé le identifiant? La session est le magasin mondial de Meteor état de l'application. Le contenu de la session doit contenir tout ce que Meteor a besoin de savoir pour redessiner l'application dans le même état que dans l'état actuel..
L'un des principaux objectifs du routeur est de placer la session dans un tel état lors de l'analyse des URL. Pour cette raison, nous pouvons fournir des fonctions de routage en tant que points d'extrémité pour les URL. et nous utilisons ces fonctions pour définir les variables de session en fonction du contenu de l'URL. Dans notre cas, le seul état requis par notre application est la pièce dans laquelle nous nous trouvons actuellement - que nous analysons en dehors de l’URL et que nous stockons dans le répertoire. 'currentRoomId' variable de session. Et il fonctionne!
Enfin, nous devons bien établir nos liens. afin que nous puissions faire:
prénom
client / chat.html
Maintenant que nous avons une collection contenant nos données de salle, nous pouvons commencer à la modifier comme bon nous semble. Nous pouvons ajouter de nouvelles discussions dans une salle, comme suit:
Rooms.update (Session.get ('currentRoomId'), $ push: messages: auteur: 'Sacha', texte: 'bon à entendre…'); 
Ou, nous pouvons même ajouter une nouvelle salle:
Rooms.insert (nom: 'Une nouvelle salle', membres: 0, last_activity: 'Jamais');
Le prochain défi consiste à câbler les formulaires pour effectuer de telles transformations, que nous laisserons comme exercice au lecteur (ou peut-être au prochain tutoriel).!
Si vous souhaitez en savoir plus sur Meteor, ne manquez pas notre prochain livre.!
