Aplicación Meteor - ToDo
En este capítulo, aprenderemos cómo crear una aplicación de tareas sencilla.
Paso 1: crea una aplicación
Abra el símbolo del sistema y ejecute el siguiente comando:
C:\Users\username\Desktop>meteor create todo-appPara ver la aplicación, debe ejecutar la aplicación con el meteor comando y ve a http://localhost:3000
C:\Users\username\Desktop\todo-app>meteorPaso 2: crear carpetas y archivos
En lugar de la estructura de archivo predeterminada, la refactorizaremos. Vamos a crear unclient carpeta, donde crearemos todo-app.html, todo-app.css y 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.jsTambién crearemos un server carpeta con server.js dentro.
C:\Users\username\Desktop\todo-app>mkdir server
C:\Users\username\Desktop\todo-app\server>touch server.jsFinalmente, creemos collections carpeta con task-collection.js archivo dentro.
C:\Users\username\Desktop\todo-app>mkdir server
C:\Users\username\Desktop\todo-app\collections>touch task-collection.jsPuede ver la estructura de la aplicación en la siguiente imagen:
Paso 3: cliente / todo-app.html
Nuestro primer paso de desarrollo es crear HTML para la aplicación. Necesitamos un campo de entrada donde podamos agregar nuevas tareas. Las tareas estarán en forma de lista condelete y checkfuncionalidad. También tendremos funcionalidades para mostrar u ocultar tareas completadas.
<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>Paso 4: colecciones / task-collection.js
Este es el lugar donde simplemente crearemos una nueva colección MongoDB, para que podamos usarla tanto en el servidor como en el lado del cliente.
Tasks = new Mongo.Collection("tasks");Paso 5 - server / server.js
Definiremos métodos para nuestra aplicación en el lado del servidor. Estos métodos se llamarán desde el cliente. En este archivo, también publicaremos la consulta de la base de datos.
// 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} });
}
});Paso 6: cliente / todo-app.js
Este es el archivo JavaScript del cliente principal. Este archivo también se puede refactorizar, pero escribiremos todo el código del lado del cliente aquí. Primero, nos suscribimos altaskcolección que se publica en el servidor. Entonces, creamoshelpers para poder manejar la lógica de la aplicación, y finalmente, definimos el events que llamará a los métodos desde el servidor.
// 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);
}
});Paso 7: Implementar
Una vez que hayamos terminado con el desarrollo, podemos implementar la aplicación desde la ventana del símbolo del sistema. El nombre de implementación de nuestra aplicación serámy-first-todo-app.
C:\Users\username\Desktop\todo-app>meteor deploy my-first-todo-appPodemos abrir el http://my-first-todo-app.meteor.com/ para comenzar a usar nuestra aplicación.
