Express.js é um framework web para Node.js que simplifica o desenvolvimento de aplicativos e APIs robustas. Neste artigo, vamos mergulhar na jornada do básico ao avançado em Express.js, explorando suas funcionalidades e proporcionando exemplos práticos para cada nível de habilidade.
1. Inicializando um Aplicativo Simples
Instalação do Express.js:
Antes de começar, certifique-se de ter o Node.js instalado e crie um novo projeto utilizando o npm.
npm init -y npm install expressCriando um Servidor Express Simples:
Inicie um servidor Express básico respondendo a uma requisição GET.
Exemplo:
const express = require('express'); const app = express(); const porta = 3000; app.get('/', (req, res) => { res.send('Olá, Express!'); }); app.listen(porta, () => { console.log(`Servidor Express rodando em http://localhost:${porta}/`); });2. Rotas, Middlewares e Views
Trabalhando com Rotas:
Expanda seu aplicativo Express para incluir rotas que correspondem a diferentes URLs.
Exemplo:
const express = require('express'); const app = express(); const porta = 3000; app.get('/', (req, res) => { res.send('Página Inicial'); }); app.get('/sobre', (req, res) => { res.send('Página Sobre Nós'); }); app.listen(porta, () => { console.log(`Servidor Express rodando em http://localhost:${porta}/`); });Adicionando Middleware:
Integre middlewares para processar solicitações antes que cheguem às rotas.
Exemplo:
const express = require('express'); const app = express(); const porta = 3000; // Middleware de log para todas as solicitações app.use((req, res, next) => { console.log(`Requisição para: ${req.url}`); next(); }); app.get('/', (req, res) => { res.send('Página Inicial'); }); app.get('/sobre', (req, res) => { res.send('Página Sobre Nós'); }); app.listen(porta, () => { console.log(`Servidor Express rodando em http://localhost:${porta}/`); });3. Template Engines, Middlewares Personalizados e API Restful
Usando Template Engines:
Incorpore engines de modelo como o EJS para criar visualizações dinâmicas.
Exemplo:
npm install ejs const express = require('express'); const app = express(); const porta = 3000; app.set('view engine', 'ejs'); app.set('views', __dirname + '/views'); app.get('/', (req, res) => { res.render('index', { titulo: 'Página Inicial' }); }); app.get('/sobre', (req, res) => { res.render('sobre', { titulo: 'Página Sobre Nós' }); }); app.listen(porta, () => { console.log(`Servidor Express rodando em http://localhost:${porta}/`); });Middleware Personalizado e API Restful:
Crie middlewares personalizados para autenticação e implemente uma API RESTful.
Exemplo:
const express = require('express'); const app = express(); const porta = 3000; // Middleware de autenticação const autenticacaoMiddleware = (req, res, next) => { // Lógica de autenticação aqui next(); }; app.use(express.json()); // Rota para API RESTful app.get('/api/usuarios', autenticacaoMiddleware, (req, res) => { res.json({ mensagem: 'Listando usuários...' }); }); app.post('/api/usuarios', autenticacaoMiddleware, (req, res) => { // Lógica para adicionar usuário res.json({ mensagem: 'Usuário adicionado com sucesso!' }); }); app.listen(porta, () => { console.log(`Servidor Express rodando em http://localhost:${porta}/`); });Desafio Prático: Aplicação de Lista de Tarefas com Express.js
Objetivo:
Construir uma aplicação web simples para gerenciar uma lista de tarefas utilizando Express.js e Node.js.
Passo 1: Inicializando o Projeto
- Crie um novo diretório para o projeto:
mkdir lista-de-tarefas cd lista-de-tarefas- Inicialize o projeto Node.js:
npm init -y- Instale o Express.js:
npm install expressPasso 2: Estruturando a Aplicação
- Crie uma pasta chamada
viewspara armazenar os arquivos de visualização. - Crie um arquivo
index.ejsdentro da pastaviewscom o seguinte conteúdo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lista de Tarefas</title> </head> <body> <h1>Lista de Tarefas</h1> <ul> <% tarefas.forEach(tarefa => { %> <li><%= tarefa %></li> <% }); %> </ul> </body> </html>Passo 3: Implementando o Servidor Express
- Crie um arquivo chamado
app.jspara configurar o servidor Express:
const express = require('express'); const app = express(); const porta = 3000; app.set('view engine', 'ejs'); app.set('views', __dirname + '/views'); const tarefas = ['Comprar leite', 'Estudar Node.js', 'Preparar apresentação']; app.get('/', (req, res) => { res.render('index', { tarefas }); }); app.listen(porta, () => { console.log(`Servidor Express rodando em http://localhost:${porta}/`); });Passo 4: Executando o Desafio
- Execute o servidor Express:
node app.js- Acesse a aplicação em seu navegador: http://localhost:3000.
- Você verá a lista de tarefas inicialmente definida. O desafio é adicionar funcionalidades para adicionar, remover e marcar tarefas como concluídas.
Desafio Extra: Aprimorando a Aplicação
Explore novas funcionalidades, como formulários para adicionar tarefas, botões para marcar tarefas como concluídas e remover tarefas da lista. Utilize o Express.js para lidar com diferentes rotas e métodos HTTP.
Parabéns por concluir este desafio prático! Ao criar uma aplicação de lista de tarefas com Express.js e Node.js, você aplicou conceitos fundamentais e ganhou experiência prática no desenvolvimento web.
Continue explorando, expandindo a aplicação e adicionando novos recursos para consolidar seus conhecimentos. Este desafio é apenas o começo de muitas possibilidades emocionantes ao utilizar Express.js no desenvolvimento de aplicações web com Node.js. Continue desbravando e construindo com confiança!
Conclusão: Dominando Express.js para Desenvolvimento Web em Node.js
Express.js é uma ferramenta versátil para o desenvolvimento web com Node.js, adequada para projetos de todos os tamanhos. Desde a inicialização de um servidor simples até a criação de APIs RESTful avançadas, este artigo abrange os principais aspectos do Express.js em diferentes níveis de habilidade.
Ao aplicar esses exemplos em seus projetos, você estará pronto para criar aplicações web dinâmicas e eficientes com Express.js. Continue explorando e construindo, aproveitando todas as vantagens desse poderoso framework web para Node.js.
Deixe um comentário