feat: catalogo de herois Marvel e DC com express e bootstrap
This commit is contained in:
anderson committed
commit
5f6ad89128
4 files changed
+254
No files matched your search
@@ -0,0 +1 @@
|
||||
node_modules/
|
||||
@@ -0,0 +1,57 @@
|
||||
# DBE-S02 - Catálogo de Heróis (Marvel e DC)
|
||||
|
||||
Aplicação web desenvolvida para a disciplina de **Desenvolvimento Back-End (DBE)** - Semana 02. O projeto demonstra a criação de um servidor com **Node.js** e **Express**, rotas dinâmicas com parâmetros de requisição (`req.params`) e interface estilizada com **Bootstrap 5**.
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ Tecnologias Utilizadas
|
||||
|
||||
- **Node.js**: Ambiente de execução JavaScript no servidor.
|
||||
- **Express.js**: Framework minimalista para criação de rotas e APIs.
|
||||
- **Bootstrap 5 (CDN)**: Framework CSS para estilização moderna e responsiva.
|
||||
- **HTML5 / Template Literals**: Renderização dinâmica de layouts e páginas.
|
||||
|
||||
---
|
||||
|
||||
## 📌 Rotas e Funcionalidades
|
||||
|
||||
| Método | Rota | Descrição |
|
||||
|---|---|---|
|
||||
| `GET` | `/` | Página inicial com cards de navegação e heróis em destaque. |
|
||||
| `GET` | `/marvel` | Lista de personagens do Universo Marvel Comics com links diretos. |
|
||||
| `GET` | `/dc` | Lista de personagens do Universo DC Comics com links diretos. |
|
||||
| `GET` | `/personagem/:empresa/:nome` | Rota dinâmica com parâmetros obrigatórios que exibe a ficha do herói com tema personalizado (vermelho para Marvel, azul para DC). |
|
||||
|
||||
### Exemplos de URLs Dinâmicas:
|
||||
- `http://localhost:3030/personagem/marvel/Thor`
|
||||
- `http://localhost:3030/personagem/marvel/Homem-Aranha`
|
||||
- `http://localhost:3030/personagem/dc/Batman`
|
||||
- `http://localhost:3030/personagem/dc/Superman`
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Como Executar o Projeto Localmente
|
||||
|
||||
1. **Clone o repositório:**
|
||||
```bash
|
||||
git clone https://gitea.tsiad.com.br/anderson/DBE-S02.git
|
||||
cd DBE-S02
|
||||
```
|
||||
|
||||
2. **Instale as dependências:**
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
3. **Inicie o servidor:**
|
||||
- Modo padrão:
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
- Modo de desenvolvimento (watch mode):
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
4. **Acesse no navegador:**
|
||||
[http://localhost:3030](http://localhost:3030)
|
||||
@@ -0,0 +1,177 @@
|
||||
const express = require('express');
|
||||
|
||||
const app = express();
|
||||
const PORT = process.env.PORT || 3030;
|
||||
|
||||
// Função geradora de layout com o CDN do Bootstrap 5
|
||||
function layout(titulo, conteudo) {
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>${titulo}</title>
|
||||
<!-- Bootstrap 5 CSS via CDN -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-light">
|
||||
<nav class="navbar navbar-dark bg-dark mb-4">
|
||||
<div class="container">
|
||||
<a class="navbar-brand fw-bold" href="/">Catálogo de Heróis</a>
|
||||
<div>
|
||||
<a class="btn btn-outline-danger btn-sm me-2" href="/marvel">Marvel</a>
|
||||
<a class="btn btn-outline-primary btn-sm" href="/dc">DC Comics</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="container">
|
||||
${conteudo}
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
}
|
||||
|
||||
// 1. Página inicial – Rota /
|
||||
app.get('/', (req, res) => {
|
||||
const conteudo =
|
||||
` <div class="p-4 mb-4 bg-white rounded-3 shadow-sm border">
|
||||
<h1 class="display-6 fw-bold">Catálogo de Heróis</h1>
|
||||
<p class="lead text-muted">Bem-vindo ao catálogo interativo dos universos Marvel e DC.</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4 mb-4">
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100 border-danger shadow-sm">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-danger fw-bold">Universo Marvel</h5>
|
||||
<p class="card-text text-secondary">Acesse os personagens, quadrinhos e sagas da Casa das Ideias.</p>
|
||||
<a href="/marvel" class="btn btn-danger">Explorar Marvel</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100 border-primary shadow-sm">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-primary fw-bold">Universo DC</h5>
|
||||
<p class="card-text text-secondary">Descubra os heróis e protetores lendários da Liga da Justiça.</p>
|
||||
<a href="/dc" class="btn btn-primary">Explorar DC</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<h3 class="h4 mb-3">Personagens em Destaque</h3>
|
||||
<div class="list-group shadow-sm">
|
||||
<a href="/personagem/marvel/Thor" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
Thor
|
||||
<span class="badge bg-danger rounded-pill">Marvel</span>
|
||||
</a>
|
||||
<a href="/personagem/marvel/Homem-Aranha" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
Homem-Aranha
|
||||
<span class="badge bg-danger rounded-pill">Marvel</span>
|
||||
</a>
|
||||
<a href="/personagem/dc/Batman" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
Batman
|
||||
<span class="badge bg-primary rounded-pill">DC</span>
|
||||
</a>
|
||||
<a href="/personagem/dc/Superman" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
Superman
|
||||
<span class="badge bg-primary rounded-pill">DC</span>
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
res.send(layout('Catálogo de Heróis', conteudo));
|
||||
});
|
||||
|
||||
// 2. Rotas das empresas – Rota /marvel
|
||||
app.get('/marvel', (req, res) => {
|
||||
const conteudo =
|
||||
` <div class="card border-danger shadow-sm mb-4">
|
||||
<div class="card-header bg-danger text-white fw-bold">
|
||||
Marvel Comics
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
A Marvel Comics é famosa por criar personagens humanos, com dilemas reais e poderes extraordinários, atuando nos Vingadores, X-Men e no cosmos.
|
||||
</p>
|
||||
|
||||
<h5 class="mt-4 mb-3">Personagens Disponíveis:</h5>
|
||||
<div class="list-group mb-4">
|
||||
<a href="/personagem/marvel/Thor" class="list-group-item list-group-item-action">Thor</a>
|
||||
<a href="/personagem/marvel/Homem-Aranha" class="list-group-item list-group-item-action">Homem-Aranha</a>
|
||||
</div>
|
||||
|
||||
<a href="/" class="btn btn-outline-secondary">← Voltar para a Página Inicial</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
res.send(layout('Marvel Comics', conteudo));
|
||||
});
|
||||
|
||||
// 2. Rotas das empresas – Rota /dc
|
||||
app.get('/dc', (req, res) => {
|
||||
const conteudo =
|
||||
` <div class="card border-primary shadow-sm mb-4">
|
||||
<div class="card-header bg-primary text-white fw-bold">
|
||||
DC Comics
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-text">
|
||||
A DC Comics abriga alguns dos maiores ícones míticos dos quadrinhos, como a Liga da Justiça e protetores de cidades clássicas como Gotham e Metrópolis.
|
||||
</p>
|
||||
|
||||
<h5 class="mt-4 mb-3">Personagens Disponíveis:</h5>
|
||||
<div class="list-group mb-4">
|
||||
<a href="/personagem/dc/Batman" class="list-group-item list-group-item-action">Batman</a>
|
||||
<a href="/personagem/dc/Superman" class="list-group-item list-group-item-action">Superman</a>
|
||||
</div>
|
||||
|
||||
<a href="/" class="btn btn-outline-secondary">← Voltar para a Página Inicial</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
res.send(layout('DC Comics', conteudo));
|
||||
});
|
||||
|
||||
// 3. Rota com parâmetros obrigatórios – /personagem/:empresa/:nome
|
||||
app.get('/personagem/:empresa/:nome', (req, res) => {
|
||||
const { empresa, nome } = req.params;
|
||||
const isMarvel = empresa.toLowerCase() === 'marvel';
|
||||
const corTema = isMarvel ? 'danger' : 'primary';
|
||||
|
||||
const conteudo =
|
||||
` <div class="card border-${corTema} shadow-sm">
|
||||
<div class="card-header bg-${corTema} text-white fw-bold">
|
||||
Ficha do Personagem
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title fw-bold">${nome}</h2>
|
||||
<p class="card-text">
|
||||
Editora / Universo:
|
||||
<span class="badge bg-${corTema} text-uppercase fs-6">${empresa}</span>
|
||||
</p>
|
||||
|
||||
<div class="mt-4 pt-3 border-top">
|
||||
<a href="/${empresa.toLowerCase()}" class="btn btn-outline-${corTema} me-2">
|
||||
← Ver todos da ${empresa.toUpperCase()}
|
||||
</a>
|
||||
<a href="/" class="btn btn-outline-secondary">Página Inicial</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
res.send(layout(`${nome} - Detalhes`, conteudo));
|
||||
});
|
||||
|
||||
app.listen(PORT, () => {
|
||||
console.log(`Servidor rodando em http://localhost:${PORT}`);
|
||||
});
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "dbe-s02",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "node index.js",
|
||||
"dev": "node --watch index.js"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://gitea.tsiad.com.br/anderson/DBE-S02.git"
|
||||
},
|
||||
"keywords": [],
|
||||
"type": "commonjs",
|
||||
"dependencies": {
|
||||
"express": "^5.3.0"
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user