Meteor - App ToDo

In questo capitolo impareremo come creare una semplice app todo.

Passaggio 1: creare un'app

Apri il prompt dei comandi ed esegui il seguente comando:

C:\Users\username\Desktop>meteor create todo-app

Per vedere l'app, devi eseguire l'app con l'estensione meteor comando e vai a http://localhost:3000

C:\Users\username\Desktop\todo-app>meteor

Passaggio 2: creare cartelle e file

Invece della struttura del file predefinita, la rifattorizzeremo. Creiamo un fileclient cartella, dove creeremo 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.js

Creeremo anche un file server cartella con server.js dentro.

C:\Users\username\Desktop\todo-app>mkdir server
C:\Users\username\Desktop\todo-app\server>touch server.js

Infine, creiamo collections cartella con task-collection.js file all'interno.

C:\Users\username\Desktop\todo-app>mkdir server
C:\Users\username\Desktop\todo-app\collections>touch task-collection.js

Puoi vedere la struttura dell'app nella seguente immagine:

Passaggio 3: client / todo-app.html

Il nostro primo passo di sviluppo è creare HTML per l'app. Abbiamo bisogno di un campo di input dove possiamo aggiungere nuove attività. Le attività saranno sotto forma di un elenco condelete e checkfunzionalità. Avremo anche funzionalità per mostrare o nascondere le attività completate.

<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>

Passaggio 4: collezioni / task-collection.js

Questo è il luogo in cui creeremo solo una nuova raccolta MongoDB, in modo da poterla utilizzare sia sul lato server che sul lato client.

Tasks = new Mongo.Collection("tasks");

Passaggio 5: server / server.js

Definiremo i metodi per la nostra app lato server. Questi metodi verranno chiamati dal client. In questo file pubblicheremo anche la query del database.

// 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} });
   }
});

Passaggio 6: client / todo-app.js

Questo è il file JavaScript del client principale. Questo file può anche essere modificato, ma scriveremo qui tutto il codice lato client. Per prima cosa, ci iscriviamo altaskraccolta pubblicata sul server. Quindi, creiamohelpers per poter gestire la logica dell'app e, infine, definiamo il file events che chiamerà i metodi dal server.

// 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);
   }
});

Passaggio 7: distribuzione

Al termine dello sviluppo, possiamo distribuire l'app dalla finestra del prompt dei comandi. Il nome della distribuzione della nostra app saràmy-first-todo-app.

C:\Users\username\Desktop\todo-app>meteor deploy my-first-todo-app

Possiamo aprire il file http://my-first-todo-app.meteor.com/ per iniziare a utilizzare la nostra app.