3. Criando outro projeto
package name: (aula3)
version: (1.0.0)
description: Projeto para a aula 3 de TAP
entry point: (index.js)
test command:
git repository:
keywords:
author: Bruno Catao
license: (ISC)
About to write to C:Usersbrunodevtap2019.1aula3package.json:
...
Is this OK? (yes)
4. Express
• Framework Web (https://expressjs.com/pt-br/)
• Instalação
• npm install express --save
• Boas práticas:
• Vamos criar uma pasta src e deixar o código lá dentro
• Vamos criar o script principal (src/main.js)
• Isso ajuda a separar as coisas
• Depois vamos ter outras pastas como static, build, tests ...
7. Roteamento Básico
• Definição de rotas:
• app.METHOD(PATH, HANDLER)
• Onde:
• app – é uma instância do Express
• METHOD – é um método de solicitação HTTP (get, post, put, delete)
• PATH – é uma URI (/, /login, /produtos, /produtos/:id)
• HANDLER – é a função executada quando a rota é correspondida
10. Problemas
• O Node não recarrega automaticamente:
• Se você altera os scripts, precisa parar o servidor e executar novamente
• Solução: nodemon (https://nodemon.io/)
• O arquivo de rotas pode ficar muito grande:
• Pelo menos 5 URLs para a API de cada recurso:
• Recupera todos, Recupera um, Adiciona, Altera e Remove
• Solução: separar as rotas de cada recurso em módulos diferentes
• Como receber os dados do corpo da mensagem ?
• Seja de um formulário, seja requisição GET/POST/PUSH
• Solução: utilizar o módulo body-parser
11. Nodemon
• Utilitário que monitora mudanças no código fonte
• Automaticamente reinicia o servidor
• Instalação:
• npm install -g nodemon
• Utilização:
• É só escrever nodemon ao invés de node
• Ex: nodemon srcmain.js
• Ex: nodemon --watch src srcmain.js
12. Nodemon - Configuração
• É possível dizer que arquivos ignorar e o delay para verificar os
arquivos;
• Normalmente, a configuração é feita no arquivo package.json:
14. Quando ocorre alguma mudança
nodemon srcmain.js
[nodemon] 1.18.10
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node .srcmain.js`
Aplicação no ar em http://localhost:3000
[nodemon] restarting due to changes...
[nodemon] starting `node .srcmain.js`
Aplicação no ar em http://localhost:3000
15. Modularizando as rotas
• Vamos criar uma pasta controllers (as rotas serão o C do MVC):
• As rotas recebem os dados da camada de apresentação (view), verificam se
está tudo certo, executam alguma transformação (se necessário) e repassam
para a camada de negócios;
• Também fazem o trabalho inverso: recebem os dados (model) da camada de
negócios, executam as transformações necessárias e enviam para a camada
de apresentação (view);
• Dentro, vamos criar um arquivo livros.js
18. Métodos de Resposta do Objeto Response
• res.download – Envia um arquivo para download
• res.end – Termina o processo de resposta
• res.json – Envia uma resposta JSON
• res.jsonp – Envia uma resposta JSONP (com callback)
• res.redirect – Redireciona a solicitação
• res.render – Exibe uma resposta a partir de um template
• res.send – Envia bytes (pode ser um string) como resposta
• res.sendFile – Envia um arquivo
• res.sendStatus – Envia um status (ex. 200, 404, 500 ...)
19. Camada de Negócios
• Vamos criar uma pasta repositories
• Dentro, vamos criar um arquivo LivrosRepository.js
• Por enquanto esse script irá manter os livros em memória (array),
posteriormente podemos utilizar um arquivo ou banco de dados para
persistir os livros
21. Body Parser
• Módulo que extrai as informações do corpo da mensagem HTTP e cria
um objeto JavaScript
• Instalação:
• npm install body-parser --save
• Utilização:
• app.use(bodyParser.FORMATO)
• Ex: app.use(bodyParser.urlencoded( ))
• Ex: app.use(bodyParser.json( ))
• Observação:
• O bodyParser deve ser adicionando antes das rotas
25. Deixando tudo no padrão REST
• As operações de adicionar devem retornar o novo objeto adicionado,
com o ID correspondente;
• O mesmo deve acontecer com a operação de alterar;
• Para isso, alteraremos o repositor para retornar o objeto
criado/alterado;
• Lembrem-se, por razões de simplicidade, todo o código está sem as
checagens quanto aos dados de entrada, validações, etc.
30. Servindo Arquivos Estáticos
• É só usar o middleware static:
• app.use(express.static(PASTA_ONDE_ESTÃO_OS_ARQUIVOS));
• Ex: app.use(express.static('public'));
• O Express consulta os arquivos em relação ao diretório estático, para
que o nome do diretório estático não faça parte da URL
• Exemplos de URLs:
• http://localhost:3000/images/kitten.jpg
• http://localhost:3000/css/style.css
• http://localhost:3000/js/app.js
• http://localhost:3000/hello.html
31. Servindo Arquivos Estáticos
• O caminho fornecido para a função express.static é relativa ao
diretório a partir do qual você inicia o node;
• Se você executar o aplicativo express a partir de outro diretório, é
mais seguro utilizar o caminho absoluto do diretório para o qual
deseja entregar:
• app.use('/static', express.static(__dirname + '/public'));
32. Utilizando Templates
• Caso você queira fazer algo além de exportar uma API ou servir
arquivos estáticos, nós vamos precisar de uma template engine;
• Atualmente, o Express suporta:
• PUG
• Mustache
• EJS