91 lines
3.3 KiB
Markdown
91 lines
3.3 KiB
Markdown
# DBE-S03 - Catálogo de Times com Express e EJS
|
|
|
|
**Aluno:** Anderson Valadares Pinto (20251PL.TSIAD0018) [SLS]
|
|
|
|
Aplicação web desenvolvida para a disciplina de **Desenvolvimento Back-End (DBE)** - Semana 03. O projeto demonstra a construção de rotas no **Express**, passagem de dados do servidor para a camada de apresentação e renderização dinâmica de páginas utilizando **EJS (Embedded JavaScript)** e estilização com **Bootstrap 5**.
|
|
|
|
---
|
|
|
|
## 🛠️ Tecnologias Utilizadas
|
|
|
|
- **Node.js**: Ambiente de execução JavaScript no servidor com suporte a **ES Modules** (`"type": "module"`).
|
|
- **Express.js**: Framework minimalista para criação de servidores HTTP e roteamento dinâmico.
|
|
- **EJS (Embedded JavaScript)**: Mecanismo de templates para renderização dinâmica no lado do servidor (SSR).
|
|
- **Bootstrap 5 & Bootstrap Icons (CDN)**: Framework CSS responsivo e ícones para uma interface moderna e acessível.
|
|
|
|
---
|
|
|
|
## ⚽ Clubes e Estádios Cadastrados
|
|
|
|
Conforme os requisitos da atividade, foram selecionadas equipes com estádios distintos:
|
|
|
|
1. **Flamengo**: Estádio do Maracanã, Rio de Janeiro - RJ
|
|
2. **Palmeiras**: Nubank Parque, São Paulo - SP
|
|
3. **Cruzeiro**: Estádio Mineirão, Belo Horizonte - MG
|
|
4. **Athletico-PR**: Ligga Arena (Popular, Arena da Baixada), Curitiba - PR
|
|
5. **Bahia**: Arena Fonte Nova, Salvador - BA
|
|
6. **Red Bull Bragantino**: Estádio Municipal Cícero de Souza Marques, Bragança Paulista - SP
|
|
7. **São Paulo**: MorumBIS, São Paulo - SP
|
|
|
|
---
|
|
|
|
## 📌 Rotas e Endpoints
|
|
|
|
| Método | Rota | Descrição |
|
|
|---|---|---|
|
|
| `GET` | `/` | Página inicial com mensagem de boas-vindas e resumo do catálogo. |
|
|
| `GET` | `/times` | Lista completa dos times em formato tabular com identificador, estádio, cidade e link de ação. |
|
|
| `GET` | `/times/:id` | Rota dinâmica por ID com conversão de parâmetro numérico, exibindo os detalhes completos do clube ou mensagem amigável de não encontrado (HTTP 404). |
|
|
|
|
### Exemplos de URLs para Testes:
|
|
- `http://localhost:3000/` — Boas-vindas
|
|
- `http://localhost:3000/times` — Relação completa de clubes
|
|
- `http://localhost:3000/times/1` — Detalhes do Flamengo
|
|
- `http://localhost:3000/times/2` — Detalhes do Palmeiras
|
|
- `http://localhost:3000/times/3` — Detalhes do Cruzeiro
|
|
- `http://localhost:3000/times/999` — Resposta de time não encontrado (404)
|
|
|
|
---
|
|
|
|
## 📂 Estrutura do Projeto
|
|
|
|
```
|
|
DBE-S03/
|
|
├── views/
|
|
│ ├── index.ejs # Página de boas-vindas
|
|
│ ├── times.ejs # Listagem tabular com loop EJS
|
|
│ └── detalhe.ejs # Exibição detalhada por time ou mensagem de erro
|
|
├── .gitignore
|
|
├── index.js # Servidor Express, rotas e dados em array
|
|
├── package.json # Configurações do projeto e dependências
|
|
└── README.md # Documentação do projeto
|
|
```
|
|
|
|
---
|
|
|
|
## 🚀 Como Executar o Projeto Localmente
|
|
|
|
1. **Clone o repositório:**
|
|
```bash
|
|
git clone https://gitea.tsiad.com.br/anderson/DBE-S03.git
|
|
cd DBE-S03
|
|
```
|
|
|
|
2. **Instale as dependências:**
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. **Inicie a aplicação:**
|
|
- Modo padrão:
|
|
```bash
|
|
npm start
|
|
```
|
|
- Modo de desenvolvimento (watch mode):
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
4. **Acesse no navegador:**
|
|
[http://localhost:3000](http://localhost:3000)
|