todo-app-nodejs

steps to create a simple todo app with node.js

node setup

• create a new folder on your machine
• Download and install node.js from here.
• node opens the node shell in terminal, test it
• inside the folder, npm init from terminal for creation of package.json file

hello world app

• create a hello.js file with the following:

console.log("hello");

• try it out with node hello.js

hello world server

• install express: npm install express --save
• the --save option saves this as needed dependency to the package.json file
• create an app.js file with the following:

varexpress=require('express')varapp=express()app.get('/',function(req,res){console.log("Request arrived.");res.send('Hello World');})app.listen(3000,function(){console.log('The server is set up, and listening on port 3000.')});

• type node app.js in the terminal, then open http://localhost:3000 in your browser.
• You should see "Request arrived" every time you refresh the page in your browser.

install further packages and MongoDB setup

• npm install mongoose --save
• mkdir db
• add db to your .gitignore file
• windows: "c:\Program Files\MongoDB\Server\3.2\bin\mongod.exe" --dbpath db
• mac osx: start mongodb process with mongod --dbpath=./db
• npm install body-parser --save
• npm install multer --save
• npm install pug --save

todo list server

• add the following to your app.js file:

varexpress=require('express');//parserekvarbodyParser=require('body-parser');varmulter=require('multer');varupload=multer();//dbvarmongoose=require('mongoose');mongoose.connect('mongodb://localhost/node-todo-app');//app deklaralasvarapp=express();// define model =================varTodo=mongoose.model('Todo',{text : String});//viewapp.set('view engine','pug');app.set('views','./views');//parseapp.use(bodyParser.json());app.use(bodyParser.urlencoded({extended: true}));app.use(upload.array());//static fileok a public mappabanapp.use(express.static('public'));//fooldalapp.get('/',function(req,res){console.log('request for home');Todo.find(function(err,todos){vartexts=[];for(vari=0;i<todos.length;++i){texts.push(todos[i].text);}console.log(texts);res.render('home',{todos: texts});});});app.listen(3000,function(){console.log('The server is set up, and listening on port 3000.');});

• mkdir views
• add the following to your views/home.pug file:

html
head
title My Todo list
script(src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js")
link(rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous")
link(rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"crossorigin="anonymous")
script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous")
body
table.table.table-striped
thead
tr
th TODO
tbody
each todo in todos
tr
td= todo
a(href="/add_todo") I add a Todo

• in another terminal, node app.js, then open localhost:3000 in your browser.

add todo

• add the following to your app.js file:

//todo hozzaadasapp.get('/add_todo',function(req,res){console.log('request for add_todo');res.render('add_todo');});app.post('/add',function(req,res){res.render('add');console.log('add todo: '+req.body.todo_text);Todo.create({text: req.body.todo_text})});

• add the following to your views/add_todo.pug file:

html
head
title Add TODO
script(src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js")
link(rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous")
link(rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"crossorigin="anonymous")
script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"crossorigin="anonymous")
body
form.form-inline(action="/add", method="POST")
div.form-group
label(for="todo_text") TODO:
input.form-control(name="todo_text"placeholder="write your Todo here")
button.btn-primary(type="submit") Save

• add the following to your views/add.pug file:

html
head
title My first todo app
body
h3 Saving was successful
a(href="/") Back to all the Todos

• run node app.js again, and add several todos. Meanwhile see in your console what happens after every click.

Final thoughts

Ha végeztél a fentiekkel, érdemes átolvasni, és végigcsinálni ezt a tutorialt is.