Meteor-ToDoアプリ

この章では、簡単なToDoアプリを作成する方法を学びます。

ステップ1-アプリを作成する

コマンドプロンプトを開き、次のコマンドを実行します-

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

アプリを表示するには、 meteor コマンドでアプリを実行し、 http：//localhost：3000 に移動する必要があります

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

ステップ2-フォルダーとファイルの作成

デフォルトのファイル構造の代わりに、リファクタリングします。 todo-appl、todo-app.css 、 todo-app.js を作成する client フォルダーを作成しましょう。

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

また、 server.js を含む server フォルダーも作成します。

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

最後に、内部に task-collection.js ファイルを含む collections フォルダーを作成しましょう。

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

次の画像でアプリの構造を見ることができます-

流星Todoアプリの構造

ステップ3-client/todo-appl

開発の最初のステップは、アプリの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>

ステップ4-collections/task-collection.js

これは、新しいMongoDBコレクションを作成する場所なので、サーバー側とクライアント側の両方で使用できます。

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

ステップ5-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} });
   }
});

ステップ6-client/todo-app.js

これはメインクライアントJavaScriptファイルです。このファイルはリファクタリングすることもできますが、ここですべてのクライアント側コードを記述します。まず、サーバーで公開されている task コレクションをサブスクライブします。次に、アプリロジックを処理できるように*ヘルパー*を作成し、最後に、サーバーからメソッドを呼び出す*イベント*を定義します。

//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/*を開いて、アプリの使用を開始できます。

Meteor Todo App Deploy

Meteor-todo-app