Slides da apresentação Node básico para front end developers realizada na trilha de Node.js no The Developers Conference Porto Alegre 2017. Códigos dos slides: https://gist.github.com/lucassanchez/6ae289aeae4001ab8ded53c5d3c50c49 Repositório: https://github.com/lucassanchez/js-tdc-poa-2017 The Developers Conference: www.thedevelopersconference.com.br/tdc/2017/portoalegre/trilhas

1. Node.js
básico para
front end
developers

2. Lucas Inocente
Front End Developer @ Zenvia
Co Fundador @ Fight Analytics
linkedin.com/in/lucassanchez

3. 2007 2017
Flash
My Space
jQuery / Wordpress
Fight Analytics
Zenvia

4. Place your screenshot here
FIGHT ANALYTICS
▸ Widget
▸ Real Time
▸ Mean.js
http://fightanalytics.cc

5. Place your screenshot here
ZENVIA
▸ Web Chat
▸ Plataforma de
conversação
▸ JS
http://zenvia.com.br

6. TODO MUNDO
ESCREVE
JAVASCRIPT

7. https://octoverse.github.com

8. PORÉM VÁRIOS %
SÃO PROJETOS DE
FRONT END

9. https://github.com/search?l=javascript&q=stars%3A%3E1&s=stars&type=Repositories

10. SE VOCÊ SABE
JAVASCRIPT DÁ
PRA ESCREVER
BACKEND TAMBÉM

11. SETUP

12. SETUP
▸ Node.js
▹ https://nodejs.org/en/
▸ MongoDB
▹ https://www.mongodb.com/

13. SETUP
▸ Códigos do slides:
https://gist.github.com/lucassanchez/6ae
289aeae4001ab8ded53c5d3c50c49
▸ Aplicação de exemplo:
https://github.com/lucassanchez/js-tdc-po
a-2017

14. CHAT
INTEGRADO
COM CHAT
BOT
PLATAFORMA
ZENVIA
Mongo
DB
FRONT-END
CHAT
BACK-END
CHAT

16. Front end

17. HELLO WORLD

18. HELLO WORLD
npm init
touch index.js
npm install express --save

19. 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('http://localhost:' + app.get('port'));
});
index.js

20. ESTRUTURA
MVC

21. ESTRUTURA MVC
mkdir app
mkdir app/controllers
mkdir app/views
mkdir app/routes
mkdir app/models

22. ESTRUTURA MVC
touch app/models/messageModel.js
touch app/routes/messageRoutes.js
touch app/controllers/messageController.js
touch app/views/chat.ejs

23. MODEL DA
APLICAÇÃO

24. MESSAGE MODEL
npm install mongoose --save
npm install body-parser --save

25. var mongoose = require('mongoose');
var Message = mongoose.model('Messages');
var MessageSchema = new Schema({
send_at: {
type: Date,
default: Date.now
},
status: {
type: String
},
content: {
type: String
}
});
module.exports = mongoose.model('Messages', MessageSchema);
app/models/messageModel.js

26. CONTROLLERS E
ROTAS DA
APLICAÇÃO

27. module.exports = function(app) {
var message = require('../controllers/messageController');
app.route('/messages')
.get(message.list)
.post(message.create);
};
app/routes/messageRoutes.js

28. 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);
});
};
app/controllers/messageController.js

29. var mongoose = require('mongoose');
var Message = require('./app/models/messageModel');
var bodyParser = require('body-parser');
// Conecta no mongo
mongoose.Promise = global.Promise;
mongoose.connect(process.env.MONGOURL || 'mongodb://127.0.0.1:27017/db-chat');
[...]
Ver: https://gist.github.com/lucassanchez/6ae289aeae4001ab8ded53c5d3c50c49#file-index-1-js
index.js

30. CRIAR NOVA
MENSAGEM

31. TESTE DE ENVIO
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'

32. HELLO WORLD
EJS

33. HELLO WORLD EJS
npm install ejs --save

34. app.use(express.static(__dirname + '/public'));
app.set('views', __dirname + '/app/views');
app.set('view engine', 'ejs');
index.js

35. app.route('/chat )
.get(message.chat)
app/routes/messageRoutes.js

36. exports.chat = function(req, res) {
Message.find({}, function(err, messages) {
if (err)
res.send(err);
res.render('chat');
});
};
app/controllers/messageController.js

37. <h1>Hello World</h1>
app/views/chat.ejs

38. VIEW DA
APLICAÇÃO

39. <!DOCTYPE html>
<html lang="pt-br">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstra
</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">
[...]
Ver: https://gist.github.com/lucassanchez/6ae289aeae4001ab8ded53c5d3c50c49#file-chat-1-ejs
app/views/chat.ejs

40. APLICAÇÃO LER
MENSAGENS

41. exports.chat = function(req, res) {
Message.find({}, function(err, messages) {
if (err)
res.send(err);
res.render(chat', {messages: messages});
});
};
app/controllers/messageController.js

42. <% 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 { %>
[...]
app/views/chat.ejs

44. Helpers:
▸ Códigos do slides:
https://gist.github.com/lucassanchez/6ae
289aeae4001ab8ded53c5d3c50c49
▸ Aplicação de exemplo:
https://github.com/lucassanchez/js-tdc-po
a-2017

45. Obrigado!
linkedin.com/in/lucassanchez
medium.com/@lucassanchez
twitter.com/lucassanchez
lucassanchez.github.io