Programação Web Back-end

Assunto: Programação Web com Express.js

Diego Addan
[email protected]

Universidade Tecnológica Federal do Paraná (UTFPR)

Câmpus Cornélio Procópio
Departamento de Computação

1
Conteúdo

1 Node Js
2 Olá Mundo
3 Express
4 Rotas
5 Parâmetros
6 Validação de parâmetros
Node Js

3
Visão geral
■ Site oficial: https://nodejs.org/
■ Documentação: https://nodejs.dev/learn
■ Javascript (História https://youtu.be/Sh6lK57Cuk4)
■ V8 Google Javascript Engine (https://v8.dev/)

4
Principais características

■ JavaScript assíncrono
■ Orientado a eventos
■ Funções de callback
■ Uso de módulos
■ Operações de I/O não-bloqueantes

5
Olá Mundo

6
Linha de comando

1 Instalação: node -v
2 Criar o arquivo main.js
console.log("Ola Mundo!")
3 Executar:
node main.js

7
Servidor web

1 Modificar o arquivo main.js

2 Executar:
node main.js

8
Criando um projeto
1 Instalar npm
2 npm init
3 npm install nodemon
(Para todo o sistema: sudo npm install -g nodemon)
4 Adicionar a linha: (arquivo package.json )
"start": "nodemon main"
5 Executar:
nodemon index.js
npx nodemon index.js
npm start
9
Requisição

■ req.headers
Dicionário com todos os cabeçalhos HTTP recebidos

■ req.method
Método HTTP da requisição

■ req.rawHeaders
Cabeçalhos HTTP no formato texto

■ req.url
URL da requisição

10
Resposta

■ end() Finaliza a requisição HTTP para o cliente

■ getHeader() Retorna o valor de um cabeçalho HTTP
■ setHeader() Define o valor de um cabeçalho HTTP
■ statusCode Define o código de retorno da resposta
■ write() Escreve uma mensagem na saída

11
Express

12
O que é o Express?

■ Framework web para Node Js

■ Encapsula as requisições/respostas HTTP
■ https://expressjs.com/

13
Ola Mundo!

1 Instalação - https://expressjs.com/en/starter/installing.html

npm install express

2 Criar o arquivo principal

3 Executar

14
O que mudou?

15
Usando o gerador do Express

1 npx express-generator
2 Instalar as dependências (npm install)
3 Rodar a aplicação (npm start)

16
Requisição

req.app
req.app Propriedade com uma referência para a aplicação
req.baseUrl A URL no qual o roteador foi montado.
req.body Os parâmetros enviados no corpo da mensagem HTTP
req.cookies Acesso aos cookies
req.hostname Nome do host que está hospedando a aplicação
req.ip O ip remoto da requisição
req.method Método utilizado pela requisição HTTP
req.params Recebe os parâmetros envaidos pela URL
req.query Parâmetros enviados por GET

17
Resposta

res.download() Devolve um arquivo para ser baixado

res.end() Finaliza a resposta encerrando a requisição
res.json() Envia um objeto JSON como resposta
res.jsonp() Envia um objeto JSON como resposta com suporte a JSONP
res.redirect() Redireciona uma requisição
res.render() Renderiza um template de resposta
res.send() Envia uma resposta em qualquer formato
res.sendFile() Envia um arquivo como um binário
res.sendStatus() Define o código de retorno da resposta HTTP

18
Middlewares
■ Funções que processam uma requisição/resposta HTTP
■ Realizam as seguintes tarefas:
▶ Executam qualquer código
▶ Alteram os objetos de requisição e resposta
▶ Finalizam um requisição HTTP
▶ Chamam o próximo middleware
■ Tipos de middlewares:
▶ Application-level
▶ Router-level
▶ Error-handling
▶ Built-in
▶ Third-party
19
Criando Middlewares (Application-level)

■ Acontece por meio do método app.use()

■ A função de callback recebe um terceiro argumento
app.use(function (req, res, next) {
console.log("Time:", Date.now())
next()
})
■ Atende a todas as requisições

20
Gerenciando erros (Error-handling)

■ As funções de callbacks recebem 4 parâmetros

app.use(function ( err , req, res, next) {
console.error(err.stack)
res.status(500).send("Algo deu errado!")
})

21
Arquivos estáticos

■ Disponibiliza todos os arquivos de uma pasta

app.use(express.static("public"))
■ Cria um caminho virtual para acessar os arquivos
app.use("/static", express.static("public"))

22
Rotas

23
Definindo rotas

■ Define como a aplicação responde a uma requisição

específica
▶ Método HTTP
▶ Caminho solicitado
▶ Callback a ser executado
■ Exemplo: app.get("/", (req, res) => { ... })
■ all representa todos os métodos HTTP

24
Curingas e Parâmetros

■ O path pode utilizar Regex para tornar a URL dinâmica

app.get(/.*fly$/, (req, res) => { ... }

■ Os parâmetros são definidos com ‘:’

app.get("/users/:userId/books/:bookId", (req, res) => {}

■ Use req.params para obter os valores

25
Gerenciadores de rotas

■ app.route() faz o encadeamento de diferentes

métodos HTTP para a mesma URL:
app.route("/book").get(...).post(...).put(...)
■ express.Router permite gerenciar um grupo de rotas:
var router = express.Router()
router.get("/", (req, res) => {...})
router.get("/detail", (req, res) => {...})
app.use("/client", router)

26
Parâmetros

27
Objeto de requisição

■ headers / rawHeaders
■ url
■ method
■ params
■ query
■ body
■ cookies

28
Parâmetros

■ http://www.meusite.com/produtos/geral/1
■ app.get("/produtos/:categ/:id/", myfunc)
■ const categ = req.params.categ
■ const id = req.params.id
■ const {categ, id} = req.params

29
Query String

■ http://www.meusite.com/prods?categ=geral&id=1
■ app.get("/produtos", myfunc)
■ const categ = req.query.categ
■ const id = req.query.id
■ const {categ, id} = req.query

30
Body params

■ <form action="http://www.meusite.com/produtos" method=‘post’>...</form>

■ app.post("/produtos", myfunc)
■ const categ = req.body.categ
■ const id = req.body.id
■ const {categ, id} = req.body

31
Body Parser

■ Permite receber o uso dos dados enviados por POST

▶ Instalar o body-parser:
npm install body-parser
▶ Importar a biblioteca:
var bodyParser = require(’body-parser’)
▶ Registrar o Middleware:
app.use(bodyParser.urlencoded( extended: false ))
app.use(bodyParser.json())

32
Body parser com o Express

■ O Express também disponibiliza uma alternativa para o

body-parser
▶ app.use(express.urlencoded())
▶ app.use(express.json())

33
Boas práticas

■ Sempre validar os dados recebidos

■ Uso de middlewares é uma boa alternativa

34
Validação de parâmetros

35
Joi

■ Descritor de schema e validador de dados

■ https://www.npmjs.com/package/joi
■ Instalação:
npm install joi
■ Utilização:
▶ Validando cada campo individualmente
▶ Por meio de um schema

36
Criação do schema

37
Validação

■ Schema válido:
schema.validate({ username: ’abc’, birth_year: 1994 })
// -> { value: { username: ’abc’, birth_year: 1994 } }

■ Schema inválido:
schema.validate({});
// -> { value: {}, error: ’"username"is required’ }}

38
Validação sem usar um modelo

■ Joi.string().required().validate(valor)
■ Joi.number().greater(0).validate(valor)

39
Tipos de dados suportados

■ Number
greater, integer, less, max, min, multiple, negative, port, positive, precision, sign

■ String
alphanum, creditCard, domain, email, ip, length, lowercase, max, min, pattern, trim, uppercase

■ Date
greater, less, max, min

40