Introdução ao Express

Fala galera! Tudo certo?

Hoje vou falar um pouco sobre o Express, que é um framework bastante interessante para Node.js. Com ele fica muito fácil para trabalharmos com MVC ou também construir uma API, de acordo com a definição no próprio site ele é um “framework web rápido, flexível e minimalista”.

O que é Express?

Mais uma vez usando uma definição do próprio site, o Express é uma estrutura web de roteamento e middlewares que tem uma funcionalidade mínima por si só: Um aplicativo do Express é essencialmente uma série de chamadas de funções de middleware.

O que é Middleware?

De uma maneira geral, middlewares são funções que tem acesso aos dados de requisição e de resposta, além disso, cada um deles tem acesso ao próximo middleware a ser invocado.
Então, basicamente, eu posso alterar esses dados, encerrar a requisição ou chamar um próximo passo. Se ainda está um tanto quanto confuso pra você, pode ver um pouco mais aqui ou aqui.

Então, mãos à obra!

Pra ficar bem fácil, vamos criar uma API bem simples, só pra exemplificar o funcionamento do Express. O primeiro passo, é criarmos o nosso aplicativo usando o comando npm init em nosso terminal. Com isso, o arquivo package.json será criado na pasta do projeto.
04 - NpmInitBefore

Com isso feito, o próximo passo é instalar o express, a notação “–save” serve para informar que a dependência do express deve estar em nosso package.json:

npm install express --save

Seu arquivo package.json deverá ficar semelhante à esse:

07 - PackageJson

Belezura! Agora é a vez de criar o nosso primeiro arquivo, o app.js, é nele que vamos iniciar a nossa aplicação e declarar os nossos middlewares, veja, com apenas essas linhas de código o nosso servidor já está em funcionamento:
app

Certo, agora o próximo passo é fazer a nossa aplicação responder à uma requisição, para isso vou retornar um json quando recebermos uma requisição na raiz da aplicação:
ok

Hora de testar! Vamos rodar a nossa aplicação em nosso terminal usando o comando:

 node app.js

Agora é só acessar a url em nosso navegador e ver a coisa acontecer:
navegador

Legal! Tudo certo até aqui, mas, e se acessarmos um recurso que não existe? Certamente não temos nada amigável para apresentar ao usuário, não é mesmo? Deem uma olhada:
recurso

O que podemos fazer para mudar isso? Um middleware! Ele vai ser a nossa última função à ser invocada, então, se o recurso requisitado não se enquadrar em nenhuma rota, deixamos pra ele avisar o usuário que não encontrou nada, vejam:
404

E agora, se acessarmos novamente o mesmo recurso, a resposta é a que definimos:
404Amigavel

Show de bola! Agora que estamos com tudo funcionando, vamos dividir as responsabilidades? Concordam comigo que vocês não vão deixar uma aplicação corporativa em um único arquivo né? Então vamos lá, de início, vamos dividir em três partes: middlewares, routes e controllers. Iniciando dos middlewares, já vamos colocar essa função de “404” em um arquivo distinto:
error

Com isso, vejam como fica o nosso arquivo app.js:
NovoApp

Se a gente rodar a aplicação novamente, não vamos perceber alteração alguma.
Com essa parte concluída, vamos construir o nosso controller, vejam só, agora essa parte da aplicação só toma conta de gerenciar o conteúdo da resposta, e as rotas vão ficar em outra parte:
controller

E por falar em rotas, o próximo passo é codifica-las, vejamos:
Rota

Vocês podem perceber que a variável do controller é definida com “app.controllers.index”, quem nos permite fazer isso é o express-load, que além disso também faz o carregamento dos nossos componentes de uma maneira bem fácil. Vejam como ficou o nosso app.js:
app-express-load

Tranquilão? Agora sim, dividimos as responsabilidades dentro da aplicação, se acessarmos a mesma rota de antes, vamos obter a mesma resposta, porém agora, o aplicativo está estruturado em pastas.

Autenticação

Pra finalizar vamos fazer uma autenticação, bem medíocre, só pra exemplificar o uso de middlewares, então vamos lá, o primeiro passo é criar um novo middleware, e fazer o que desejamos lá dentro, no nosso caso, vamos verificar se o header “authorization” está preenchido; caso não esteja, retornamos uma mensagem para o usuário e encerramos a requisição, caso contrário, prosseguimos para o próximo middleware:
Auth

Ok? Então agora é só declarar esse middleware antes de qualquer um no nosso app.js, vejam:
appAuth

Agora vejam, se tentarmos acessar qualquer recurso sem enviar o header “authorization” vamos ser “barrados”, vejam só:
sem-permissao

Agora, vou fazer a mesma requisição, porém enviando o header. Para fazer isso, vou usar o Postman. Podem ver que agora a aplicação se comportou normalmente, pois o header estava preenchido, e então o middleware acionou a função next, que no nosso caso é o carregamento das rotas e controllers, que por conseguinte, encontrou a rota e nos retornou o resultado:
Postman

Show de bola galera?! Bem fácil fazer a base do nosso projeto né? Para os próximos posts vamos fazer um CRUD para fixar a ideia das rotas e controllers.

Os exemplos de código estão disponíveis no GitHub: https://github.com/vmussak/exemplo-express

Por hoje é só, qualquer dúvida ou sugestão, estou à disposição! Até mais 😀

Anúncios

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s