Meteor - ToDo App
Neste capítulo, aprenderemos como criar um aplicativo de tarefas simples.
Etapa 1 - Criar um aplicativo
Abra o prompt de comando e execute o seguinte comando -
C:\Users\username\Desktop>meteor create todo-appPara ver o aplicativo, você precisa executá-lo com o meteor comande e vá para http://localhost:3000
C:\Users\username\Desktop\todo-app>meteorEtapa 2 - Criar pastas e arquivos
Em vez da estrutura de arquivo padrão, iremos refatorá-la. Vamos criar umclient pasta, onde vamos criar todo-app.html, todo-app.css e 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.jsTambém criaremos um server pasta com server.js dentro.
C:\Users\username\Desktop\todo-app>mkdir server
C:\Users\username\Desktop\todo-app\server>touch server.jsFinalmente, vamos criar collections pasta com task-collection.js arquivo dentro.
C:\Users\username\Desktop\todo-app>mkdir server
C:\Users\username\Desktop\todo-app\collections>touch task-collection.jsVocê pode ver a estrutura do aplicativo na imagem a seguir -
Etapa 3 - client / todo-app.html
Nossa primeira etapa de desenvolvimento é criar HTML para o aplicativo. Precisamos de um campo de entrada onde podemos adicionar novas tarefas. As tarefas serão na forma de uma lista comdelete e checkfuncionalidade. Teremos também funcionalidades para mostrar ou ocultar tarefas concluídas.
<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>Etapa 4 - coleções / tarefa-coleção.js
Este é o lugar onde criaremos apenas uma nova coleção do MongoDB, para que possamos usá-la tanto no servidor quanto no cliente.
Tasks = new Mongo.Collection("tasks");Etapa 5 - server / server.js
Definiremos métodos para nosso aplicativo no lado do servidor. Esses métodos serão chamados do cliente. Neste arquivo, também publicaremos a consulta ao banco de dados.
// 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} });
}
});Etapa 6 - client / todo-app.js
Este é o arquivo JavaScript principal do cliente. Este arquivo também pode ser refatorado, mas escreveremos todo o código do lado do cliente aqui. Primeiro, nós assinamos otaskcoleção publicada no servidor. Então, nós criamoshelpers para ser capaz de lidar com a lógica do aplicativo e, finalmente, definimos o events que chamará os métodos do 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);
}
});Etapa 7 - Implantar
Depois que terminarmos o desenvolvimento, podemos implantar o aplicativo a partir da janela do prompt de comando. O nome de implantação do nosso aplicativo serámy-first-todo-app.
C:\Users\username\Desktop\todo-app>meteor deploy my-first-todo-appPodemos abrir o http://my-first-todo-app.meteor.com/ para começar a usar nosso aplicativo.
