- Meteor - Best Practices
- Meteor - ToDo App
- Meteor - Running on mobile
- Meteor - Deployment
- Meteor - Structure
- Meteor - Publish & Subscribe
- Meteor - Package.js
- Meteor - Methods
- Meteor - Accounts
- Meteor - Sorting
- Meteor - Security
- Meteor - Assets
- Meteor - Email
- Meteor - HTTP
- Meteor - EJSON
- Meteor - Timers
- Meteor - Blaze
- Meteor - Check
- Meteor - Core API
- Meteor - Packages
- Meteor - Tracker
- Meteor - Session
- Meteor - Events
- Meteor - Forms
- Meteor - Collections
- Meteor - Templates
- Meteor - First Application
- Meteor - Environment Setup
- Meteor - Overview
- Meteor - Home
Meteor Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Meteor - ToDo App
In this chapter, we will learn how to create a simple todo app.
Step1 - Create an App
Open the command prompt and run the following command −
C:UsersusernameDesktop>meteor create todo-app
To see the app, you need to run the app with the meteor command and go to http://localhost:3000
C:UsersusernameDesktop odo-app>meteor
Step2 - Create Folders and Files
Instead of default file structure, we will refactor it. Let s create a cpent folder, where we will create todo-app.html, todo-app.css and todo-app.js.
C:UsersusernameDesktop odo-app>mkdir cpent C:UsersusernameDesktop odo-appcpent>touch todo-app.html C:UsersusernameDesktop odo-appcpent>touch todo-app.js
We will also create a server folder with server.js inside.
C:UsersusernameDesktop odo-app>mkdir server C:UsersusernameDesktop odo-appserver>touch server.js
Finally, let s create collections folder with task-collection.js file inside.
C:UsersusernameDesktop odo-app>mkdir server C:UsersusernameDesktop odo-appcollections>touch task-collection.js
You can see the app structure on the following image −
![Meteor Todo App Structure](/meteor/images/meteor-todo-structure.jpg)
Step 3 - cpent/todo-app.html
Our first development step is to create HTML for the app. We need an input field where we can add new tasks. The tasks will be in the form of a pst with delete and check functionapty. We will also have functionapties for showing or hiding completed tasks.
<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"> <p class = "{{#if checked}}checked{{/if}}"> <button class = "delete">x</button> <input type = "checkbox" checked = "{{checked}}" class = "toggle-checked" /> <span>{{username}} - {{text}}</span> </p> </template>
Step 4 - collections/task-collection.js
This is the place where we will just create a new MongoDB Collection, so we can use it on both the server and the cpent side.
Tasks = new Mongo.Collection("tasks");
Step 5 - server/server.js
We will define methods for our app on the server side. These methods will be called from the cpent. In this file, we will also pubpsh the database query.
// Pubpshing tasks from the server... Meteor.pubpsh("tasks", function () { return Tasks.find({}); }); // Methods for handpng 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} }); } });
Step 6 - cpent/todo-app.js
This is the main cpent JavaScript file. This file can also be refactored but we will write all cpent side code here. First, we subscribe to the task collection that is pubpshed on the server. Then, we create helpers to be able to handle the app logic, and finally, we define the events that will call the methods from the server.
// Subscribing to the pubpshed tasks Meteor.subscribe("tasks"); // Show/Hide functionapty 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 functionapty. // Calpng 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 functionapty Template.task.events({ "cpck .toggle-checked": function () { // Set the checked property to the opposite of its current value Meteor.call("setChecked", this._id, ! this.checked); }, "cpck .delete": function () { Meteor.call("deleteTask", this._id); } });
Step 7 - Deploy
After we are done with the development, we can deploy the app from the command prompt window. The deployment name of our app will be my-first-todo-app.
C:UsersusernameDesktop odo-app>meteor deploy my-first-todo-app
We can open the http://my-first-todo-app.meteor.com/ to start using our app.
![Meteor Todo App Deploy](/meteor/images/meteor-todo-app-deployed.jpg)