Skip to content

Instantly share code, notes, and snippets.

@lucasinocente

lucasinocente/1.sh

Last active November 13, 2017 03:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lucasinocente/6ae289aeae4001ab8ded53c5d3c50c49 to your computer and use it in GitHub Desktop.
Save lucasinocente/6ae289aeae4001ab8ded53c5d3c50c49 to your computer and use it in GitHub Desktop.
Download ZIP
Códigos dos slides da palestra "Node.js básico para front end developers"
Raw
1.sh
npm init
npm install express --save
touch index.js
Raw
2.sh
mkdir app
mkdir app/views
mkdir app/controllers
mkdir app/models
mkdir app/routes
touch app/models/messageModel.js
touch app/controllers/messageController.js
touch app/routes/messageRoutes.js
touch app/views/chat.ejs
Raw
3.sh
npm install mongoose --save
npm install body-parser --save
Raw
4.sh
curl http://localhost:3000/messages
curl -X POST -v \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-d '{
"content":"Lorem Ipsum Plataforma",
"status": "received"
}' \
'http://localhost:3000/messages'
curl -X POST -v \
-H 'Content-Type: application/json' \
-H 'Accept: application/json' \
-d '{
"content":"Lorem Ipsum Client",
"status": "sent"
}' \
'http://localhost:3000/messages'
Raw
5.sh
npm install ejs --save
Raw
chat[0].ejs
// app/controllers/
<h1>Hello World</h1>
Raw
chat[1].ejs
//app/views/chat.ejs
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Node básico para front end developers @ TDC Porto Alegre 2017</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<style>
.message {
margin-top: 20px;
overflow: hidden;
}
.form {
position: fixed;
bottom: 20px;
left: 0px;
width: 100%;
}
.chat {
padding-bottom: 140px;
}
</style>
</head>
<body>
<div class="chat">
<div class="container" id="container">
<div class="message">
<div class="card w-55 float-left bg-light">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="message">
<div class="card w-55 float-right bg-info text-white">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
<div class="form">
<div class="container">
<form class="card">
<div class="card-body">
<div class="row">
<div class="col-9 col-sm-10">
<input id="message" type="text" class="form-control" placeholder="Type your message here...">
</div>
<div class="col-3 col-sm-2">
<button class="btn btn-info btn-block">></button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Raw
chat[3].ejs
// app/views/chat.ejs
<% messages.forEach(function(message,index) { %>
<div class="message">
<% if (message.status == "received") { %>
<div class="card w-55 float-left bg-light">
<div class="card-body">
<p class="card-text"><%= message.content %></p>
</div>
</div>
<% } else { %>
<div class="card w-55 float-right bg-info text-white">
<div class="card-body">
<p class="card-text"><%= message.content %></p>
</div>
</div>
<% } %>
</div>
<% }); %>
Raw
index[0].js
//index.js
var express = require('express');
var app = express();
app.set('port', (process.env.PORT || 3000));
app.get('/', function(req, res) {
res.send('Hello TDC');
});
app.listen(app.get('port'), function() {
console.log('App running at http://localhost:' + app.get('port'));
});
Raw
index[1].js
// index.js
var express = require('express');
var app = express();
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
var Message = require('./app/models/messageModel');
var routes = require('./app/routes/messageRoutes');
mongoose.Promise = global.Promise;
mongoose.connect(process.env.MONGOURL || 'mongodb://127.0.0.1:27017/db-chat');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
routes(app);
app.set('port', (process.env.PORT || 3000));
app.listen(app.get('port'), function() {
console.log('App running at http://localhost:' + app.get('port'));
});
Raw
index[2].js
// index.js
// [...]
// Adicionar entre o código
app.use(express.static(__dirname + '/public'));
app.set('views', __dirname + '/app/views');
app.set('view engine', 'ejs');
// [...]
Raw
messageController[0].js
// app/controllers/messageController.js
var mongoose = require('mongoose');
var Message = mongoose.model('Messages');
exports.list = function(req, res) {
Message.find({}, function(err, message) {
if (err)
res.send(err);
res.json(message);
});
};
exports.create = function(req, res) {
var newMessage = new Message(req.body);
newMessage.save(function(err, message) {
if (err)
res.send(err);
res.json(message);
});
};
Raw
messageController[1].js
// app/controllers/messageController.js
exports.chat = function(req, res) {
Message.find({}, function(err, messages) {
if (err)
res.send(err);
res.render('chat');
});
};
Raw
messageController[2].js
// app/controllers/messageController.js
exports.chat = function(req, res) {
Message.find({}, function(err, messages) {
if (err)
res.send(err);
res.render('chat', {messages: messages});
});
};
Raw
messageModel.js
// app/models/messageModel.js
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var MessageSchema = new Schema({
send_at: {
type: Date,
default: Date.now
},
status: {
type: String
},
content: {
type: String
}
});
module.exports = mongoose.model('Messages', MessageSchema);
Raw
messageRoutes[0].js
// app/routes/messageRoutes.js
module.exports = function(app) {
var message = require('../controllers/messageController');
app.route('/messages')
.get(message.list)
.post(message.create);
};
Raw
messageRoutes[1].js
// app/routes/messageRoutes.js
module.exports = function(app) {
var message = require('../controllers/messageController');
app.route('/messages')
.get(message.list)
.post(message.create);
app.route('/chat')
.get(message.chat);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment