Criando aplicações webcom Node.js

Charles Viegascharles.viegas@codate.com.br

@charlesviegas

Referências

• nodejs.org

• http://expressjs.com/

• https://github.com/expressjs/body-parser

• https://github.com/expressjs/session

• Livro: Node.js: aplicações web real-time com Node.js– Caio Ribeiro– Casa do código

Código fonte da solução

https://github.com/charlesviegas/minicurso-nodejs.git

INTRODUÇÃO AO NODE.JS

O que é o Node.js?

• Javascript no lado do servidor

• Construído sobre o engine V8 do Chrome

• Executa por linha de comando

• Projetado para alta concorrência

• Single thread

• Não bloqueante

• Utiliza o framework CommonsJS

Não bloqueia IO

• Esperar pedidos de I/O degrada a performance.

• O Node usa evento em JS para anexar retornos a chamadas de IO.

ExemploBLOQUEANTE

...String sql = "SELECT c FROM Contato";

Query q= em.createQuery(sql);

List result = query.getResultList(); ...

NÃO BLOQUEANTE

…var callback = function(err, rows) {

if(err) throw err;console.log(rows);

});

con.query("SELECT * FROM Contato", callback);…

Event Loop

• Ao invés de threads, o Node usa um loop de eventos, aliviando o overhead da troca de contexto.

Instalação e Configuração

• Acesse o site http://nodejs.org

• Faça download do executável e instale de forma padrão

• Verifique se a instalação funcionou corretamente executando os comandos:– node –version– npm --version

Prática 1 - Olá Javaneiros

• Abra o terminal e navegue para a pasta:– curso\pratica1

• Execute o comando: node olajavaneiros.js– Observe a saída no próprio terminal

• Execute o comando: node olajavaneiroshttp.js– Abra seu navegador e acesse a url impressa no terminal

NPM

• Node Package Manager– Gerencia os módulos do node, baixando da web os módulos e suas

dependências

• Baseado em linha de comando– npm install nome_do_modulo --save– npm install – g nome_do_modulo– npm remove nome_do_modulo– npm update nome_do_modulo– npm list

package.json• O Node utiliza o arquivo package.json para descrever os

metadados do projeto.– Nome, versão, dependências

• Deve estar presente na pasta raiz de cada projeto.

package.json{

"name": “nome_do_projeto","description": "Meu primeiro app em Node.js","author": “Charles Viegas <charles@email.com>","version": "1.0.0","private": true,"dependencies": {

"modulo-1": "1.0.0","modulo-2": "~1.0.0","modulo-3": ">=1.0.0"

},"devDependencies": {

"modulo-4": "*"}

}

Prática 2 - Criando o package.json

• Durante o curso iremos criar uma pequena aplicação para controlar uma lista de presentes para casamento.

• Crie a pasta raiz:– Nome: casalista

• Crie dentro da pasta o arquivo:– Nome: package.json– Conteúdo: name, description, author, version e private

• Execute dentro da pasta raiz o seguinte comando:– npm install

Prática 2 - Criando o package.json

{"name": “casalista","description": “App para lista de casamento em Node.js","author": “Seu Nome <seuemail@email.com>","version": "1.0.0","private": true

}

Objetos globais

• global: assim como nos browsers o Node também possui um contexto de alto nível.

• process: contém os dados do processo de execução.

• console: usado para imprimir mensagens nas saídas de fluxo padrões.

• Buffer: usado para manipular dados binários.

• require: usado para importação de módulos

Objetos globais

• __filename: o nome do arquivo que está sendo executado

• __dirname: o nome do diretório que reside o arquivo que está sendo executado.

• module: uma referência para o módulo corrente.

CommonJS

• O Node utiliza nativamente o padrão CommonJS para organização e carregamento dos módulos.

module.exports = function(msg){ console.log(msg);}

modulo2.js

var m2 = require(“./modulo2.js”);m2(“Ola Javaneiros”);

modulo1.js

DOMINANDO EXPRESS

O que é o Express?

• Escrever código usando a API HTTP do Node é muito trabalhoso.

• O Express é um módulo para desenvolvimento de aplicações web de grande escala.

Características do Express

• MVR (Model-View-Routes)

• MVC (Model-View-Controller)

• Roteamento de urls via callbacks

• Middleware

• Interface RESTFul

• Suporte a File Uploads

• Integração com Template Engines

Módulos do Express

• A partir da versão 4, o Express passou a ser distribuído em vários módulos, sendo eles:

– express: Módulo principal do express.

– express-load: Carregamento dinâmico de arquivos JS.

– express-session: Controle de sessões do usuário.

– method-override: Traduz método POST para PUT e DELETE.

– body-parser: Parser de campos do html para objeto JSON.

– cookie-parser: Parser de cookie para objeto JSON.

– ejs: Engine de template.

Prática 3 - Instalando o express

• Altere o seu package.json incluindo como dependência as últimas versões dos módulos:– express, express-load, express-session, method-override, body-

parser, cookie-parser e ejs

• Dentro da pasta raiz execute o comando:– npm install

• O npm vai criar a pasta node_modules e dentro delas todos os seus módulos

Prática 4 – Criando as pastas do projeto

• Copie para a pasta raiz do seu projeto a estrutura de pastas e arquivos definida em curso\pratica4

Prática 4 – Criando as pastas do projeto

• controllers: vai conter os nossos controladores (MVC).

• routes: vai conter os nossos roteadores.

• public: vai conter os css e imagens.

• views: vai conter as nossas views (MVC).

• app.js: arquivo JS principal do nosso projeto.

Atenção: por questões de simplificação não teremos o model (MVC) neste curso.

Iniciando um servidor Express

// Importa e instancia um servidor expressvar express = require("express"), app = express();

// Configurações futuras

// Sobe o servidor HTTP na posta 3000app.listen(3000, function () { console.log(“Servidor está no ar.");});

Prática 5 – Iniciando um servidor express

• Conforme exemplo anterior altere o arquivo app.js

• Execute o comando:– node app.js

• Abra o navegador no endereço: http://localhost:3000

• Você deve receber a mensagem: Cannot GET /

Definindo views

...// Configurações futuras

// Define a pasta onde irão ficar as viewsapp.set("views", __dirname + "/views");// Define o template engine usado nas viewsapp.set("view engine", "ejs");

...

Definindo conteúdo estático

// Configurações futuras

...

// Define a pasta public para conteúdo estáticoapp.use(express.static(__dirname + "/public"));

...

Definindo as rota inicial

// Configurações futuras

...

// Responde ao acessar o localhost:3000/app.use("/", function(req, res){ res.send("Ola Javaneiros");});...

Prática 6 – Definindo views, conteúdo estático e rota inicial

• Altere o arquivo app.js com os passos feitos nos últimos três slides.

• Reinicie o node visualizar as alterações.

• Para ver os resultados, abra seu navegador no endereço http://localhost:3000/

• Para testar o conteúdo estático abra também o endereço http://localhost:3000/app/css/style.css

Express-load

• Utilizaremos o express-load que carrega modulos dentro da instância do express simplementes informando a pasta onde estas scripts estão.

• Portanto, ao invés de usar o require(“nome_do_modulo”), nós utilizaremos o express-load para esta função.

Express-load

// Importa o módulo express-loadvar express = require("express"), load = require("express-load"), app = express();...

// Carrega todas as scripts da pasta controller e routesload("controllers") .then("routes") .into(app);

Prática 7 – Express-load

• Adicione o express-load conforme slides anteriores.

• Reinicie o node visualizar as alterações.

Criando Roteadores

app.use("/", function(req, res){ res.send("Ola Javaneiros");});

• É comum que os roteamento no express fiquem separados em módulos externos para melhorar a legibilidade do código.

• Portanto iremos remover o código abaixo da app.js:

Criando Roteadores

module.exports = function (app) { var home = app.controllers.home; app.get("/", home.index); app.post("/entrar", home.entrar);};

• E criaremos um módulo a parte só para roteamento.

Criando Controladores

module.exports = function (app) { var HomeController = { index: function (req, res) { res.render("home"); }, entrar: function (req, res) {

} }; return HomeController;};

• Os controladores controlam a sequência de execução e a navegação entre as páginas.

• Também é recomendável a separação da sua lógica num módulo separado.

Prática 8 – Roteadores e Controladores

• Crie os roteadores e controladores conforme slides anteriores.

Criando views com EJS

• Para criação das Views utilizaremos o EJS.

• O EJS permite imprimir o conteúdo de objetos JSON em partes do html

• Também permite a inclusão de loops, estruturas condições e includes

Criando views com EJS

• Organizaremos nosso código da seguinte forma:– header.ejs– footer.ejs– home.ejs

header.ejs

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Javaneiros - Lista de presentes de casamento</title> <link rel="stylesheet" href="/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="/bootstrap/css/bootstrap-theme.css"/> <link rel="stylesheet" href="/app/css/style.css" /></head><body>

footer.ejs

<footer class="navbar navbar-default navbar-fixed-bottom"> <div class="container"> Javaneiros 2014 </div></footer>

<script src="/bootstrap/js/jquery.js"></script><script src="/bootstrap/js/bootstrap.js"></script></body></html>

home.ejs

<% include ./header %>

<div class="container"> <form action="/entrar" method="post" role="form" class="form-signin"> <h2>Lista de presentes</h2> <input type="text" name="noivo" placeholder="Noivo" class="form-control"

required="required" autofocus="autofocus"/> <input type="text" name="noiva" placeholder="Noiva" class="form-control"

required="required"/> <button type="submit"

class="btn btn-lg btn-primary btn-block">Ver lista</button> </form></div>

<% include ./footer %>

Prática 9 – Views

• Crie as views header, footer e home conforme slides anteriores.

Body-parser

• O express utiliza o modulo body-parser para realizar a conversão dos dados submetidos por um formulário html em objeto JSON.

Body-parser

var express = require("express"), bodyParser = require("body-parser"), load = require("express-load"), app = express();…// Inclui o parser para formato jsonapp.use(bodyParser.json());

// Inclui parser para urlencodedapp.use(bodyParser.urlencoded({extended: true}));

...

Express-session

• Recurso que permite manter dados do usuário no servidor.

• Para acessar o objeto a ser mantido na sessão basta acessar req.session

Express-session

var express = require("express"), bodyParser = require("body-parser"), load = require("express-load"), expressSession = require("express-session"), app = express();…

app.use(expressSession({ secret: "keyboard cat", resave: false, saveUninitialized: true}));...

Prática 10 – Body-parser e Session

• Adicione o body-parser e o express-session conforme slides anteriores.

Manipulando session

• Agora iremos gravar na sessão do usuário os dados submetidos pela tela de home.

• Para isso, iremos alterar o controlador do home.

Manipulando Session

...var HomeController = { ... entrar: function (req, res) { var lista = { noivo : req.body.noivo, noiva : req.body.noiva, presentes : [] }; req.session.lista = lista; res.redirect("/presentes"); }};...

Prática 11 – Manipulando session

• Complete o código do HomeController conforme slide anterior.

• Após submeter o formulário você verá a seguinte mensagem: Cannot GET /presentes

routers\presente.js

module.exports = function (app) { var presentes = app.controllers.presentes; app.get("/presentes", presentes.index); app.get("/comprar/:id", presentes.comprar); app.post("/presentes", presentes.incluir);};

controllers\presente.js

module.exports = function (app) { var PresentesController = { index: function (req, res) { res.render("presentes", {presentes: req.session.lista.presentes}); }, incluir: function (req, res) { var lista = req.session.lista; var presente = { nome: req.body.nome, valor: req.body.valor }; lista.presentes.push(presente); res.redirect("/presentes"); }, comprar: function (req, res) { var id = req.params.id; req.session.lista.presentes[id].comprado = true; res.redirect("/presentes"); } }; return PresentesController;};

view\presentes.ejs

<% include ./header %><div class="container"> <div class="page-header"> <h1>Lista de presentes</h1> </div> <div class="row"> <!– ****************** Formulário --> </div> <div class="row"> <!– ****************** Tabela --> </div> <div class="row"> <a href="/">Sair</a> </div></div><% include ./footer %>

view\presentes.ejs - formulário

<div class="col-xs-12"> <form action="/presentes" method="post" role="form"> <div class="row"> <div class="col-xs-4"> <input type="text" name=“nome" placeholder="Presente"

class="form-control"/> </div> <div class="col-xs-4"> <input type="text" name=“valor" placeholder="Valor"

class="form-control"/> </div> <div class="col-xs-4"> <button type="submit" class="btn btn-default">Incluir</button> </div> </div> </form></div>

view\presentes.ejs - tabela<div class="col-xs-12"> <table class="table table-bordered table-striped"> <thead><tr> <th>Presente</th> <th>Valor</th><th>Ação</th> </tr></thead> <tbody> <% presentes.forEach(function(presente, index) { %> <tr> <td><%- presente.nome %></td> <td><%- presente.valor %></td> <td> <% if (!presente.comprado) {%> <a href="/comprar/<%- index %>">Comprar</a> <%}%> </td> </tr> <% }) %> </tbody> </table></div>

Prática 12 – Final

• Crie o roteador, controlador e a view para a tela de presentes conforme slides anteriores.