Share
Ce que vous allez créerMeteor vous fournit un flux de travail de développement rapide qui créera des applications Web isomorphes qui «fonctionnent». L’architecture de Meteor est vraiment magnifique dans la mesure où elle mettra à jour tous les clients connectés à votre application simultanément, tout de suite. Cela a d'énormes implications pour la création d'applications Web réactives.
Meteor a été conçu pour une utilisation facile, et heureusement, cette philosophie a été adoptée dès le début..
L'installation est aussi simple que d'exécuter la commande suivante sur les systèmes Linux / Mac OS X:
curl https://install.meteor.com/ | sh
Les utilisateurs Windows peuvent télécharger l'installateur officiel.
Ceci est fait en ligne de commande via le météore outil. Pour créer une nouvelle application nommée mon_meteor_app Dans votre répertoire personnel, procédez comme suit:
$ meteor crée ~ / mon_meteor_app $ cd ~ / mon_meteor_app $ meteor
Vous pourrez maintenant accéder à votre application meteor via http: // localhost: 3000-port 3000 est la valeur par défaut..
Par défaut, les fichiers suivants sont créés:
~ / my_meteor_app: ├── mon_meteor_app.css mon_meteor_app.html mon_meteor_app.js
le mon_meteor_app.html file contient le balisage requis pour afficher la page-Meteor utilise une syntaxe de style pour les accolades. Tout le code de vos fichiers HTML est compilé avec le compilateur de Meteor Spacebars. Les barres d'espace utilisent des instructions entourées de doubles accolades telles que #chaque et #si pour vous permettre d'ajouter une logique et des données à vos vues.
Vous pouvez transmettre des données dans les modèles à partir de votre code JavaScript en définissant des assistants et en itérant des tableaux que nous pouvons utiliser. #each items.
le mon_meteor_app.js Le fichier contient à la fois le code JavaScript requis pour démarrer le client et le serveur. Tous les événements pour le client ou les directives peuvent être spécifiés dans ce fichier.
le css le fichier sert à styler votre application et est vide par défaut.
Meteor analyse tous les fichiers HTML de votre dossier d'applications et identifie trois balises de niveau supérieur: , , et .
Tout à l'intérieur de tout balises est ajouté à la section de tête du code HTML envoyé au client, et tout ce qui est à l'intérieur tags est ajouté à la section body, comme dans un fichier HTML classique.
Tout à l'intérieur balises est compilé dans des modèles Meteor, qui peuvent être inclus dans HTML avec > templateName ou référencé dans votre JavaScript avec Template.templateName.
Remplacez le code HTML par défaut par ce qui suit:
Ma liste de tâches Ma liste de tâches
Construit en utilisant Meteor Framework!
#each tasks > task / each
texte
Ici nous spécifions un modèle et #chaque boucle pour créer une liste à puces. Terminez l'exemple en ajoutant à la mon_meteor_app.js:
if (Meteor.isClient) // Le code ici ne fonctionne que sur le client // Attribuez des tâches pour renseigner vos données Template.body.helpers (tasks: [text: "Plantez des concombres dans du fumier frais", text: "Déplacez les avocats dans des pots plus grands", text: "Allez à la pêche avec Ben", text: "Amenez la femme au yoga", text: "Annuler l'abonnement à la télévision"]);
Jetez un coup d'oeil dans votre navigateur au résultat final. Nous pouvons maintenant aller plus loin en implémentant des données persistantes avec une collection MongoDB.
Meteor facilite le travail avec les données. Avec les collectes, les données sont disponibles dans n'importe quelle partie de votre code car elles peuvent être consultées à la fois par le client et le serveur. Cela facilite grandement l’écriture de la logique de vue et la mise à jour automatique de la page..
Dans Meteor, tous les composants de vue liés à une collecte de données affichent automatiquement les dernières modifications apportées aux données, de sorte qu'elles sont réactives en temps réel..
Change ton mon_meteor_app.js fichier à utiliser MongoDB avec les éléments suivants:
Accentsconagua
Tasks = new Mongo.Collection ("tâches"); if (Meteor.isClient) // Ce code ne s'exécute que sur le client Template.body.helpers (tasks: function () return Tasks.find ();); La ligne Tasks = new Mongo.Collection ("tâches"); indique à Meteor de créer une collection MongoDB nommée les tâches. La répercussion de ceci dans Meteor est que, sur le client, il crée une connexion en cache à la collection de serveurs..
Pour insérer des données, nous pouvons utiliser la console des serveurs. Pour le démarrer depuis une nouvelle fenêtre de terminal, CD dans le répertoire de votre application et exécutez-le (ceci doit être fait pendant que météore s'exécute dans un onglet séparé):
météore mongo
Maintenant, dans la console pour la base de données Mongo de votre application, ajoutez un enregistrement avec:
db.tasks.insert (text: "Nouvelle tâche de mongo!", createdAt: new Date ());
Jetez un coup d'œil dans le navigateur pour voir les mises à jour. Ouvrez les outils de développement et dans la console, exécutez les tâches suivantes:
Tasks.insert (text: "directement dans la console", createdAt: new Date ());
Votre liste va maintenant se mettre à jour dynamiquement à l'écran. Ouvrez une fenêtre de navigateur distincte dans une nouvelle instance de votre bureau. Exécuter une autre insertion dans la console.
Vous verrez les deux instances se mettre à jour en temps réel sans avoir à actualiser la page. Imaginez maintenant les implications de la mise à jour de la base de données et de Meteor mettant à jour tous les clients.
C'est pourquoi Meteor est facile à créer pour une application réellement réactive. Les utilisateurs pourront voir les données se mettre à jour en temps réel de manière collaborative dans le navigateur..
Le projet meteor a un serveur de paquets public de isobuild paquets. Cela vous permet d’ajouter rapidement des fonctionnalités à votre application Meteor en installant simplement un package via le météore ajouter syntaxe.
Meteor peut aussi ajouter npm forfaits via le météore ajouter syntaxe. Rendons notre affichage un peu plus agréable dans notre exemple précédent en ajoutant le des moments paquet pour un formatage de date facile.
$ meteor add momentjs: moment
Maintenant que vous avez un moment disponible dans votre application, vous pouvez simplement l'utiliser. Vous n'avez pas besoin de faire vous-même.
Modifiez le modèle HTML comme suit:
Ma liste de tâches Ma liste de tâches
> todo# chaque tâches
- text createdAt
/chaque
Maintenant, nous mettons à jour nos fonctions d'assistance dans le mon_meteor_app.js fichier:
Tasks = new Mongo.Collection ("tâches"); if (Meteor.isClient) // Ce code ne fonctionne que sur le client Template.todo.helpers (tasks: function () return Tasks.find ();, createdAt: function () return moment (this .createdAt) .fromNow ();); Basculez vers la fenêtre de votre navigateur et tant que le météore Si la commande est toujours en cours d'exécution dans le terminal, vous verrez votre liste mise à jour avec des moments fournissant la mesure du temps. Agréable!
Ajouter une authentification OAuth à votre application est maintenant très simple. Pour ce faire, il suffit d'ajouter deux packages à l'aide de la commande suivante:
$ meteor ajouter des comptes-google $ meteor ajouter des comptes-ui
Une fois ces packages ajoutés à votre application, vous pouvez simplement ajouter le > loginButtons modèle intégré à votre mon_meteor_app.html fichier. Lors du rechargement dans un navigateur, vous verrez un bouton pour configurer la fonctionnalité de connexion Google. Suivez les étapes fournies et vous êtes prêt, c'est aussi simple que cela.
Meteor est un cadre fantastique qui gagne de plus en plus en popularité, et je pense qu'il est facile de comprendre pourquoi, en raison de la conception et de la mise en œuvre simples de packages. Prototyper rapidement des applications en une semaine n'est pas grave quand Meteor est dans votre boîte à outils.
Si vous souhaitez en savoir plus sur Meteor, continuez à lire en ligne avec son excellente documentation..
