آموزش برنامه ToDo در Meteor

erfan molaei

3 سال پیش

آموزش برنامه ToDo در Meteor

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش برنامه ToDo در Meteor خواهیم پرداخت.

در این فصل ، ما می آموزیم که چگونه یک برنامه TODO ساده بسازیم.

مرحله ۱ – ایجاد یک برنامه

خط فرمان را باز کرده و دستور زیر را اجرا کنید –

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

برای دیدن برنامه ، باید برنامه را با دستور meteor اجرا کنید و به آدرس http: // localhost: 3000 بروید

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

مرحله ۲ – ایجاد پوشه ها و پرونده ها

به جای ساختار فایل پیش فرض ، ما آن را دوباره فاکتور می کنیم. بیایید یک پوشه مشتری ایجاد کنیم ، جایی که 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.js در داخل ایجاد خواهیم کرد.

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

در آخر ، بیایید پوشه مجموعه ها را با فایل task-collection.js در داخل ایجاد کنیم.

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

شما می توانید ساختار برنامه را در تصویر زیر مشاهده کنید –

Meteor Todo App Structure

مرحله ۳ – client/todo-app.html

اولین قدم توسعه ما ایجاد HTML برای برنامه است. ما به یک قسمت ورودی نیاز داریم که بتوانیم کارهای جدیدی به آن اضافه کنیم. وظایف به صورت لیستی با قابلیت حذف و بررسی خواهد بود. ما همچنین ویژگی هایی برای نشان دادن یا پنهان کردن کارهای انجام شده خواهیم داشت.

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

مرحله ۴ – collections/task-collection.js

این مکانی است که ما فقط یک مجموعه جدید MongoDB ایجاد خواهیم کرد ، بنابراین می توانیم از آن در سمت سرور و سرویس گیرنده استفاده کنیم.

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

مرحله ۵ – server / server.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} });
   }
});

مرحله ۶ – client/todo-app.js

این پرونده اصلی JavaScript مشتری است. این پرونده همچنین می تواند دوباره ویرایش شود اما ما همه کد سمت مشتری را در اینجا می نویسیم. ابتدا ، ما عضو مجموعه کارهایی هستیم که در سرور منتشر می شود. سپس ، کمکی برای ایجاد توانایی مدیریت منطق برنامه ایجاد می کنیم و در آخر ، رویدادهایی را تعریف می کنیم که از سرور فراخوانی می کنند.

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

مرحله ۷ – استقرار

پس از پایان کار، می توانیم برنامه را از پنجره خط فرمان مستقر کنیم. نام استقرار برنامه ما برنامه اولین کار من خواهد بود.

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

برای شروع استفاده از برنامه ما می توانیم http://my-first-todo-app.meteor.com/ را باز کنیم.

Meteor Todo App Deploy

منبع.

لیست جلسات قبل آموزش Meteor

برچسب ها : آموزش Meteor آموزش برنامه نویسی موبایل

نویسنده مطلب erfan molaei

آموزش برنامه ToDo در Meteor

آموزش برنامه ToDo در Meteor

مرحله ۱ – ایجاد یک برنامه

مرحله ۲ – ایجاد پوشه ها و پرونده ها

مرحله ۳ – client/todo-app.html

مرحله ۴ – collections/task-collection.js

مرحله ۵ – server / server.js

مرحله ۶ – client/todo-app.js

مرحله ۷ – استقرار

لیست جلسات قبل آموزش Meteor

دیدگاه شما

بدون دیدگاه

آموزش برنامه ToDo در Meteor

مرحله ۱ – ایجاد یک برنامه

مرحله ۲ – ایجاد پوشه ها و پرونده ها

مرحله ۳ – client/todo-app.html

مرحله ۴ – collections/task-collection.js

مرحله ۵ – server / server.js

مرحله ۶ – client/todo-app.js

مرحله ۷ – استقرار

لیست جلسات قبل آموزش Meteor

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه