Meteor - แอพ ToDo

ในบทนี้เราจะเรียนรู้วิธีสร้างแอปสิ่งที่ต้องทำง่ายๆ

ขั้นที่ 1 - สร้างแอป

เปิดพรอมต์คำสั่งและเรียกใช้คำสั่งต่อไปนี้ -

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

หากต้องการดูแอปคุณต้องเรียกใช้แอปด้วยไฟล์ meteor คำสั่งและไปที่ http://localhost:3000

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

ขั้นที่ 2 - สร้างโฟลเดอร์และไฟล์

แทนที่จะเป็นโครงสร้างไฟล์เริ่มต้นเราจะปรับโครงสร้างใหม่ มาสร้างไฟล์client โฟลเดอร์ที่เราจะสร้าง todo-app.html, todo-app.css และ 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

เราจะสร้างไฟล์ server โฟลเดอร์ด้วย server.js ข้างใน.

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

สุดท้ายมาสร้าง collections โฟลเดอร์ด้วย task-collection.js ไฟล์ภายใน

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

คุณสามารถดูโครงสร้างแอปได้จากภาพต่อไปนี้ -

ขั้นตอนที่ 3 - client / todo-app.html

ขั้นตอนแรกในการพัฒนาของเราคือการสร้าง HTML สำหรับแอป เราต้องการช่องป้อนข้อมูลที่เราสามารถเพิ่มงานใหม่ได้ งานจะอยู่ในรูปแบบของรายการด้วยdelete และ checkฟังก์ชันการทำงาน นอกจากนี้เรายังมีฟังก์ชันสำหรับแสดงหรือซ่อนงานที่เสร็จสมบูรณ์

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

ขั้นตอนที่ 4 - คอลเลกชัน / งานคอลเลกชัน js

นี่คือสถานที่ที่เราจะสร้าง MongoDB Collection ใหม่เพื่อให้เราสามารถใช้งานได้ทั้งบนเซิร์ฟเวอร์และฝั่งไคลเอ็นต์

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

ขั้นตอนที่ 5 - เซิร์ฟเวอร์ / เซิร์ฟเวอร์ js

เราจะกำหนดวิธีการสำหรับแอปของเราที่ฝั่งเซิร์ฟเวอร์ วิธีการเหล่านี้จะถูกเรียกจากไคลเอนต์ ในไฟล์นี้เราจะเผยแพร่แบบสอบถามฐานข้อมูลด้วย

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

ขั้นตอนที่ 6 - client / todo-app.js

นี่คือไฟล์ JavaScript ของไคลเอ็นต์หลัก ไฟล์นี้สามารถ refactored ได้ แต่เราจะเขียนโค้ดฝั่งไคลเอ็นต์ทั้งหมดที่นี่ ขั้นแรกเราสมัครเป็นสมาชิกไฟล์taskคอลเลกชันที่เผยแพร่บนเซิร์ฟเวอร์ จากนั้นเราสร้างhelpers เพื่อให้สามารถจัดการกับตรรกะของแอปได้และสุดท้ายเรากำหนดไฟล์ events ที่จะเรียกวิธีการจากเซิร์ฟเวอร์

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

ขั้นตอนที่ 7 - ปรับใช้

หลังจากที่เราพัฒนาเสร็จแล้วเราสามารถปรับใช้แอพได้จากหน้าต่างพรอมต์คำสั่ง ชื่อการปรับใช้ของแอปของเราจะเป็นmy-first-todo-app.

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

เราสามารถเปิดไฟล์ http://my-first-todo-app.meteor.com/ เพื่อเริ่มใช้แอพของเรา