Na Parte 2: Configurando as Rotas do Express eu mostrei como montarmos as rotas de 3 maneiras diferentes. E hoje veremos como adicionar os nossos controllers, com o bônus de adicionarmos protecões nas nossas rotas com os pacotes cors, helmet e também os nossos primeiros testes com mocha e chai.
Criando nossa interface controller.
Aqui, para continuar a nossa prática de POO que o typescript fornece, vamos criar uma interface que servirá de base para os nossos controllers. Logo criamos so diretório /controllers e dentro dela criaremos o arquivo controller-interface.ts:
import { Request, Response } from 'express'
export interface Controller {
get (req: Request, res: Response): void
post (req: Request, res: Response): void
put (req: Request, res: Response): void
delete (req: Request, res: Response): void
}
Aqui importamos os tipos Request e Response do express para que possamos passa-los nas nossas rotas. Delcaramos nessa interface que todo controller deve ter as funções get, post, put e delete que representam os respectivos métodos HTTP de mesmo nome.
Criando nosso primeiro controller: QueryController.
Agora que temos uma base para os nosso futuros controllers, vamos criar o controller que ficará responsável pela rota que receberá as queries em SQL, para isso criaremos o arquivo query-controller.ts dentro da pasta /controllers:
import { Request, Response } from 'express'
import { Controller } from "./controller-interface";
export class QueryController implements Controller {
constructor() {
}
public get (req: Request, res: Response): void {
//TODO: Implementar a lógica de realizar queries através do método GET, com passagem dos parâmetros na URL.
res.status(200).send({
message: "Rota \'/api/v1/query/\' recebeu o método GET e respondeu com uma função do QueryController."
})
}
public post (req: Request, res: Response): void {
//TODO: Implementar a lógica de realizar queries através do método POST, com passagem dos parâmetros no body em um JSON.
res.status(201).send({
message: "Rota \'/api/v1/query/\' recebeu o método POST e respondeu com uma função do QueryController"
})
}
public put (req: Request, res: Response): void {
res.status(405).send({
message: "Rota \'/api/v1/query/\' recebeu o método PUT, mas este método não é permitido."
})
}
public delete (req: Request, res: Response): void {
res.status(405).send({
message: "Rota \'/api/v1/query/\' recebeu o método DELETE, mas este método não é permitido."
})
}
}
Como o nosso QueryController implementa a interface Controller, precisamos que ele implemente os quatros métodos da interface. Como nosso projeto, até agora, só usará os métodos GET e POST, as funções put e delete irá retornar o status 405 identificando que na nossa api os méstodos PUT e DELETE não são permitidos e retornam um json que contem o campo message com a mensagem que tem a mesma informação.
Alterando o arquivo de rotas das queries.
Agora iremos modificar o arquivo responsável pelas rotas das queries, /routes/query-routes.ts, para usar as funções do nosso QueryController:
import { Router } from 'express'
import { Route, BaseRoutes } from './base-routes'
import { QueryController } from '../controllers/query-controller'
export class QueryRoutes extends BaseRoutes {
private controller: QueryController = new QueryController()
/**
* Variável que receberá o Router do express.
*/
private router: Router = Router()
/**
* Array contendo as rotas com o path, tipo, middlewares e funções.
*
* Declaramos aqui todas as nossas rotas referente ao path '/query'.
*/
private routes: Array<Route> = [
{
path: "/query",
type: "get",
middlewares: [],
controllerFunction: this.controller.get
},
{
path: "/query",
type: "post",
middlewares: [],
controllerFunction: this.controller.post
},
{
path: "/query",
type: "put",
middlewares: [],
controllerFunction: this.controller.put
},
{
path: "/query",
type: "delete",
middlewares: [],
controllerFunction: this.controller.delete
},
]
constructor(basePath: string) {
super(basePath)
}
/**
* Seta as rotas e as coloca no Router do express.
*
* @param router Router da aplicação Express para adicionar rotas nele.
* @returns uma flag que indica se o setup aconteceu 'true', ou não aconteceu 'false'.
*/
public setup (router: Router): boolean {
this.router = router
const routes: Array<Route> = this.routes
if (routes.length === 0) {
return false
}
routes.forEach((element: Route) => {
if (element.type === "get") {
router.route(element.path).get(element.middlewares, element.controllerFunction)
}
if (element.type === "post") {
router.route(element.path).post(element.middlewares, element.controllerFunction)
}
if (element.type === "put") {
router.route(element.path).put(element.middlewares, element.controllerFunction)
}
if (element.type === "delete") {
router.route(element.path).delete(element.middlewares, element.controllerFunction)
}
});
return true
}
/**
* Método getter da variável router.
*
* @returns o objeto Router do Express relacionado às rotas da classe.
*/
public getRouter (): Router {
return this.router
}
/**
* Método getter da variável router.
*
* @returns o objeto Router do Express relacionado às rotas da classe.
*/
public getRoutes (): Array<Route> {
return this.routes
}
/**
* Método setter para a variável basePath.
*
* Deve ser utilizado antes de setar as rotas na inicialização da aplicação.
*
* @param newRoutes array que contém as novas rotas a serem utilizadas.
*/
public setRoutes (newRoutes: Array<Route>) {
return this.routes = newRoutes
}
}
Como já haviamos deixado tudo pronto, a única coisa que fizemos foi modificar a variável routes do tipo Array de Route. Bem direto e simples não é mesmo? E com isso terminamos de adicionar nosso primeiro controller à nossa aplicação.
No próximo artigo estarei adicionando a conexão com a API do Twitter e também já realizaremos nossa primeira query em SQL para consumir a API do Twitter.
Os bônus!
Bônus 01: Adicionando mais segurança à nossa aplicação express.
Como boa prática de segurança, na documentação do próprio express, eles recomendam o uso de dois pacotes: cors e helmet.
CORS - Configurando o CORS de maneira fácil no express!
Com o pacote cors, fica fácil de configurar o CORS de nossa aplicação. Para isso, vamos instalar a dependência:
npm install --save cors
npm install --save--dev @types/cors
E depois adicionamos as seguintes linhas no nosso arquivo index.ts na raíz do projeto:
//...
import cors from 'cors'
//...
app.use(cors())
//...
Para saber mais em como configurar de maneira mais avançada o cors basta acessar a documentação!
Helmet - Protegendo o cabeçalho da sua aplicação!
O helmet é o pacote que nos ajuda a proteger a nossa aplicação de alguma vulnerabildiades. Essa segurança é aplicada no cabeçalho da nossa aplicação.
Ele é um conjunto de nove funções middlewares e você pode saber mais (acessando aqui a documentação)[https://expressjs.com/pt-br/advanced/best-practice-security.html]! Para instalar basta usar o comando:
npm install --save helmet
E depois adicionamos as seguintes linhas no nosso arquivo index.ts na raíz do projeto:
//...
import helmet from 'helmet'
//...
app.use(helment())
//...
Bônus 02: Adicionando os primeiros tests!
Lembra que na parte 01 nos testamos nossa aplicação ao acessar o navegador, na parte 02 eu nem mencionei como testar, mas você poderia ter realizado requisições usando o Insomnia ou Postman. Mas para deixar nossa aplicação mais robusta, iremos adicionar nessa primeira parte os testes unitários!
Para isso vamos adicionar o mocha e o chai, e os tipos de ambos né?! Mas em breve explicação: o mocha é um framework de testes javascript voltado para Node.js e o chai é uma biblioteca, ou lib para os íntimos, de asserções para javascript no Node.js ou no navegador.
E vamos instala-los agora:
npm install --save-dev mocha chai chai-http @types/chai @types/mocha
Detalhe no chai-http que eu não comentei né? Então é uma adicional ao chai para realizar asserções em requisições http, bacana né?
Agora vamos escrever nosso primeiro teste, mas antes vamos criar uma pasta chamada /test e dentro dela o arquivo query.test.ts (o nome do arquivo pode ser qualquer um, contanto que seja .ts também ok?)
Dentro do nosso arquivo vamos escrever o seguinte código:
// Durante os testes, a variavel 'env' é definida como 'test'.
process.env.NODE_ENV = 'test'
import chai from 'chai'
import chaiHttp from 'chai-http'
import server from '../index'
const should = chai.should()
chai.use(chaiHttp)
describe('Queries', () => {
/**
* Testa a rota '/query' com o método GET.
*/
describe('[GET]/route', () => {
it('Deve retornar o STATUS 200 e um JSON contendo o campo mensagem.', (done) => {
chai.request(server)
.get('/api/v1/query')
.end((err, res) => {
res.should.have.status(200)
res.body.should.be.a('object')
res.body.message.should.be.a('string')
done()
})
})
})
/**
* Testa a rota '/query' com o método POST.
*/
describe('[POST]/route', () => {
it('Deve retornar o STATUS 201 e um JSON contendo o campo mensagem.', (done) => {
chai.request(server)
.post('/api/v1/query')
.end((err, res) => {
res.should.have.status(201)
res.body.should.be.a('object')
res.body.message.should.be.a('string')
done()
})
})
})
/**
* Testa a rota '/query' com o método PUT.
*/
describe('[PUT]/route', () => {
it('Deve retornar o STATUS 405 e um JSON contendo o campo mensagem.', (done) => {
chai.request(server)
.put('/api/v1/query')
.end((err, res) => {
res.should.have.status(405)
res.body.should.be.a('object')
res.body.message.should.be.a('string')
done()
})
})
})
/**
* Testa a rota '/query' com o método DELETE.
*/
describe('[DELETE]/route', () => {
it('Deve retornar o STATUS 405 e um JSON contendo o campo mensagem.', (done) => {
chai.request(server)
.delete('/api/v1/query')
.end((err, res) => {
res.should.have.status(405)
res.body.should.be.a('object')
res.body.message.should.be.a('string')
done()
})
})
})
})
O arquivo de teste é auto-explicativo e bem direto, se você tiver o inglês arranhando aí, mas se não tiver vou explicar aqui o cada um faz:
- describe(): é uma função que descreve (e loga no terminal) o teste descrito (quem diria né?!) e recebe uma função de callback;
- it(): é uma função parecida com o describe(), mas nela de fato será executado os testes assertidos por nós;
- chai.request(): é uma função que recebe o nosso arquivo do servidor e então realiza requisições nele;
- .get()/.post()/.put()/.delete(): são funções que definem o método HTTP e recebem como parâmetro a rota da requisição, até parece com o nosso controller!
- .end(): função que finaliza a cadeia e irá executar as asserções
Para saber mais sobre as asserções, recomendo ler a documentação do chai.
Agora nós vamos alterar o nosso index.ts para funcionar como um módulo e poder ser importado no arquivo de teste, basta adicionar a seguinte linha no final do arquivo:
//[...]
export default app
E por final, vamos alterar o nosso script de test no arquivo package.json:
"scripts": {
"test": "mocha -r ts-node/register test/**/*.ts",
"start": "node index.js",
"dev": "nodemon index.ts",
"build": "tsc --project ./"
}
O nosso script de test invoca o mocha com a flag -r para ele ser de maneira recursiva; o arqugmento ts-node/register serve para o nosso compilador de ts executar antes dos testes e o chai funcionar com o ES6; por fim o argumento test/**/*.ts serve para indicarmos a pasta de test, o nível que ele deve acesssar e a extensão dos arquivos.
Agora para executar os testes basta rodar:
npm test
Se tudo deu certo, no seu terminal deve ter algo assim:
Servidor rodando em http://localhost:3000
Queries
[GET]/route
√ Deve retornar o STATUS 200 e um JSON contendo o campo mensagem.
[POST]/route
√ Deve retornar o STATUS 201 e um JSON contendo o campo mensagem.
[PUT]/route
√ Deve retornar o STATUS 405 e um JSON contendo o campo mensagem.
[DELETE]/route
√ Deve retornar o STATUS 405 e um JSON contendo o campo mensagem.
4 passing (48ms)
E por hoje é só. Lembrando que você pode acompanhar o projeto através do repositório no github aqui!
Top comments (0)