commit 5f6ad891286a43a83f02824d2e02f9233e7f7b87 Author: Anderson Date: Sun Nov 1 19:13:24 2026 -0300 feat: catalogo de herois Marvel e DC com express e bootstrap diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c2658d7 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules/ diff --git a/README.md b/README.md new file mode 100644 index 0000000..3c73f63 --- /dev/null +++ b/README.md @@ -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) diff --git a/index.js b/index.js new file mode 100644 index 0000000..0c42343 --- /dev/null +++ b/index.js @@ -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 ` + + + + + + ${titulo} + + + + + + +
+ ${conteudo} +
+ + + `; +} + +// 1. Página inicial – Rota / +app.get('/', (req, res) => { + const conteudo = +`
+

Catálogo de Heróis

+

Bem-vindo ao catálogo interativo dos universos Marvel e DC.

+
+ +
+
+
+
+
Universo Marvel
+

Acesse os personagens, quadrinhos e sagas da Casa das Ideias.

+ Explorar Marvel +
+
+
+
+
+
+
Universo DC
+

Descubra os heróis e protetores lendários da Liga da Justiça.

+ Explorar DC +
+
+
+
+ +
+ +

Personagens em Destaque

+
+ + Thor + Marvel + + + Homem-Aranha + Marvel + + + Batman + DC + + + Superman + DC + +
+ `; + + res.send(layout('Catálogo de Heróis', conteudo)); +}); + +// 2. Rotas das empresas – Rota /marvel +app.get('/marvel', (req, res) => { + const conteudo = +`
+
+ Marvel Comics +
+
+

+ A Marvel Comics é famosa por criar personagens humanos, com dilemas reais e poderes extraordinários, atuando nos Vingadores, X-Men e no cosmos. +

+ +
Personagens Disponíveis:
+
+ Thor + Homem-Aranha +
+ + ← Voltar para a Página Inicial +
+
+ `; + + res.send(layout('Marvel Comics', conteudo)); +}); + +// 2. Rotas das empresas – Rota /dc +app.get('/dc', (req, res) => { + const conteudo = +`
+
+ DC Comics +
+
+

+ 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. +

+ +
Personagens Disponíveis:
+
+ Batman + Superman +
+ + ← Voltar para a Página Inicial +
+
+ `; + + 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 = +`
+
+ Ficha do Personagem +
+
+

${nome}

+

+ Editora / Universo: + ${empresa} +

+ +
+ + ← Ver todos da ${empresa.toUpperCase()} + + Página Inicial +
+
+
+ `; + + res.send(layout(`${nome} - Detalhes`, conteudo)); +}); + +app.listen(PORT, () => { + console.log(`Servidor rodando em http://localhost:${PORT}`); +}); diff --git a/package.json b/package.json new file mode 100644 index 0000000..8ee6935 --- /dev/null +++ b/package.json @@ -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" + } +} \ No newline at end of file