Criando aplicações web com Node.js

Apresentação em tema: "Criando aplicações web com Node.js"— Transcrição da apresentação:

1 Criando aplicações web com Node.js
@charlesviegas Charles Viegas

2 Referências nodejs.org http://expressjs.com/
Livro: Node.js: aplicações web real-time com Node.js Caio Ribeiro Casa do código

3 Código fonte da solução

4 introdução ao node.js

5 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

6 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.

7 Exemplo BLOQUEANTE NÃO BLOQUEANTE ... String sql = "SELECT c FROM Contato"; Query q= em.createQuery(sql); List result = query.getResultList(); … var callback = function(err, rows) { if(err) throw err; console.log(rows); }); con.query("SELECT * FROM Contato", callback);

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

9 Instalação e Configuração
Acesse o site 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

10 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

11 NPM Node Package Manager Baseado em linha de comando
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

12 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.

13 package.json { "name": “nome_do_projeto",
"description": "Meu primeiro app em Node.js", "author": “Charles Viegas "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": "*" }

14 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

15 Prática 2 - Criando o package.json
{ "name": “casalista", "description": “App para lista de casamento em Node.js", "author": “Seu Nome "version": "1.0.0", "private": true }

16 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

17 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.

18 CommonJS O Node utiliza nativamente o padrão CommonJS para organização e carregamento dos módulos. var m2 = require(“./modulo2.js”); m2(“Ola Javaneiros”); modulo1.js module.exports = function(msg){ console.log(msg); } modulo2.js

19 dominando Express

20 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.

21 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

22 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.

23 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

24 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

25 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.

26 Iniciando um servidor Express
// Importa e instancia um servidor express var express = require("express"), app = express(); // Configurações futuras // Sobe o servidor HTTP na posta 3000 app.listen(3000, function () { console.log(“Servidor está no ar."); });

27 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: Você deve receber a mensagem: Cannot GET /

28 Definindo views // Define a pasta onde irão ficar as views
... // Configurações futuras // Define a pasta onde irão ficar as views app.set("views", __dirname + "/views"); // Define o template engine usado nas views app.set("view engine", "ejs");

29 Definindo conteúdo estático
// Configurações futuras ... // Define a pasta public para conteúdo estático app.use(express.static(__dirname + "/public"));

30 Definindo as rota inicial
// Configurações futuras ... // Responde ao acessar o localhost:3000/ app.use("/", function(req, res){ res.send("Ola Javaneiros"); });

31 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 Para testar o conteúdo estático abra também o endereço

32 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.

33 Express-load // Importa o módulo express-load
var express = require("express"), load = require("express-load"), app = express(); ... // Carrega todas as scripts da pasta controller e routes load("controllers") .then("routes") .into(app);

34 Prática 7 – Express-load
Adicione o express-load conforme slides anteriores. Reinicie o node visualizar as alterações.

35 Criando Roteadores É 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: app.use("/", function(req, res){ res.send("Ola Javaneiros"); });

36 Criando Roteadores E criaremos um módulo a parte só para roteamento.
module.exports = function (app) { var home = app.controllers.home; app.get("/", home.index); app.post("/entrar", home.entrar); };

37 Criando Controladores
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. module.exports = function (app) { var HomeController = { index: function (req, res) { res.render("home"); }, entrar: function (req, res) { } }; return HomeController; };

38 Prática 8 – Roteadores e Controladores
Crie os roteadores e controladores conforme slides anteriores.

39 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

40 Criando views com EJS Organizaremos nosso código da seguinte forma:
header.ejs footer.ejs home.ejs

41 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>

42 footer.ejs <footer class="navbar navbar-default navbar-fixed-bottom"> <div class="container"> Javaneiros </div> </footer> <script src="/bootstrap/js/jquery.js"></script> <script src="/bootstrap/js/bootstrap.js"></script> </body> </html>

43 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 %>

44 Prática 9 – Views Crie as views header, footer e home conforme slides anteriores.

45 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.

46 Body-parser var express = require("express"), bodyParser = require("body-parser"), load = require("express-load"), app = express(); … // Inclui o parser para formato json app.use(bodyParser.json()); // Inclui parser para urlencoded app.use(bodyParser.urlencoded({extended: true})); ...

47 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

48 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 })); ...

49 Prática 10 – Body-parser e Session
Adicione o body-parser e o express-session conforme slides anteriores.

50 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.

51 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"); } };

52 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

53 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); };

54 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; };

55 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 %>

56 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>

57 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>

58 Prática 12 – Final Crie o roteador, controlador e a view para a tela de presentes conforme slides anteriores.

59