Meteor - Application ToDo
Dans ce chapitre, nous allons apprendre à créer une application todo simple.
Étape 1 - Créer une application
Ouvrez l'invite de commande et exécutez la commande suivante -
C:\Users\username\Desktop>meteor create todo-appPour voir l'application, vous devez exécuter l'application avec le meteor commande et aller à http://localhost:3000
C:\Users\username\Desktop\todo-app>meteorÉtape 2 - Créer des dossiers et des fichiers
Au lieu de la structure de fichier par défaut, nous la refactoriserons. Créons unclient dossier, où nous allons créer todo-app.html, todo-app.css et todo-app.js.
C:\Users\username\Desktop\todo-app>mkdir client
C:\Users\username\Desktop\todo-app\client>touch todo-app.html
C:\Users\username\Desktop\todo-app\client>touch todo-app.jsNous allons également créer un server dossier avec server.js à l'intérieur.
C:\Users\username\Desktop\todo-app>mkdir server
C:\Users\username\Desktop\todo-app\server>touch server.jsEnfin, créons collections dossier avec task-collection.js fichier à l'intérieur.
C:\Users\username\Desktop\todo-app>mkdir server
C:\Users\username\Desktop\todo-app\collections>touch task-collection.jsVous pouvez voir la structure de l'application sur l'image suivante -
Étape 3 - client / todo-app.html
Notre première étape de développement consiste à créer du HTML pour l'application. Nous avons besoin d'un champ de saisie dans lequel nous pouvons ajouter de nouvelles tâches. Les tâches se présenteront sous la forme d'une liste avecdelete et checkFonctionnalité. Nous aurons également des fonctionnalités pour afficher ou masquer les tâches terminées.
<head>
<title>Todo App</title>
</head>
<body>
<h1>Todo List ({{incompleteCount}})</h1>
<label class = "hide-completed">
<input type = "checkbox" checked = "{{hideCompleted}}" />
Hide Completed Tasks
</label>
<form class = "new-task">
<input type = "text" name = "text" placeholder = "Add new tasks" />
</form>
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</body>
<template name = "task">
<li class = "{{#if checked}}checked{{/if}}">
<button class = "delete">x</button>
<input type = "checkbox" checked = "{{checked}}" class = "toggle-checked" />
<span>{{username}} - {{text}}</span>
</li>
</template>Étape 4 - Collections / task-collection.js
C'est l'endroit où nous allons simplement créer une nouvelle collection MongoDB, afin que nous puissions l'utiliser à la fois du côté serveur et du côté client.
Tasks = new Mongo.Collection("tasks");Étape 5 - server / server.js
Nous définirons des méthodes pour notre application côté serveur. Ces méthodes seront appelées à partir du client. Dans ce fichier, nous publierons également la requête de base de données.
// Publishing tasks from the server...
Meteor.publish("tasks", function () {
return Tasks.find({});
});
// Methods for handling MongoDb Tasks collection data...
Meteor.methods({
addTask: function (text) {
Tasks.insert({
text: text,
createdAt: new Date(),
});
},
deleteTask: function (taskId) {
var task = Tasks.findOne(taskId);
Tasks.remove(taskId);
},
setChecked: function (taskId, setChecked) {
var task = Tasks.findOne(taskId);
Tasks.update(taskId, { $set: { checked: setChecked} });
}
});Étape 6 - client / todo-app.js
Il s'agit du fichier JavaScript principal du client. Ce fichier peut également être refactorisé mais nous écrirons ici tout le code côté client. Tout d'abord, nous souscrivons à lataskcollection publiée sur le serveur. Ensuite, nous créonshelpers pour pouvoir gérer la logique de l'application, et enfin, nous définissons le events qui appellera les méthodes du serveur.
// Subscribing to the published tasks
Meteor.subscribe("tasks");
// Show/Hide functionality
Template.body.helpers({
tasks: function () {
if (Session.get("hideCompleted")) {
// If hide completed is checked, filter tasks
return Tasks.find({checked: {$ne: true}}, {sort: {createdAt: -1}});
} else {
// Otherwise, return all of the tasks
return Tasks.find({}, {sort: {createdAt: -1}});
}
},
hideCompleted: function () {
return Session.get("hideCompleted");
},
incompleteCount: function () {
return Tasks.find({checked: {$ne: true}}).count();
}
});
// Events for creating new tasks and Show/Hide functionality.
// Calling methods from the server
Template.body.events({
"submit .new-task": function (event) {
event.preventDefault();
var text = event.target.text.value;
Meteor.call("addTask", text);
event.target.text.value = "";
},
"change .hide-completed input": function (event) {
Session.set("hideCompleted", event.target.checked);
}
});
// Events for Deleting and Check/Uncheck functionality
Template.task.events({
"click .toggle-checked": function () {
// Set the checked property to the opposite of its current value
Meteor.call("setChecked", this._id, ! this.checked);
},
"click .delete": function () {
Meteor.call("deleteTask", this._id);
}
});Étape 7 - Déployer
Une fois le développement terminé, nous pouvons déployer l'application à partir de la fenêtre d'invite de commande. Le nom de déploiement de notre application seramy-first-todo-app.
C:\Users\username\Desktop\todo-app>meteor deploy my-first-todo-appNous pouvons ouvrir le http://my-first-todo-app.meteor.com/ pour commencer à utiliser notre application.
