- Visão Geral do Projeto
- Funcionalidades Principais
- Tecnologias Utilizadas
- Estrutura do Projeto
- Instalação e Configuração
- Scripts de Desenvolvimento
- Mapeamento de Rotas
- Componentes e Responsabilidades
- Configurações Avançadas
- Testes e Qualidade de Código
- Contribuição
- Licença
Este repositório contém o código-fonte completo para o Editora UFNT Workspace, um sistema robusto dividido em uma aplicação Frontend Angular e um Backend Node.js/Express modular. O objetivo principal é fornecer uma plataforma moderna para gerenciamento e visualização do catálogo de livros de uma editora universitária, incluindo funcionalidades essenciais como navegação, submissões (em desenvolvimento) e autenticação de usuários.
A aplicação Frontend utiliza o Angular CLI v14.2.13 e segue as melhores práticas de desenvolvimento modular, enquanto o Backend (localizado em backend/) é construído com Express e Mongoose para persistência de dados no MongoDB.
A plataforma oferece as seguintes funcionalidades, baseadas nos componentes e rotas implementadas:
- Página Inicial (
/): Layout principal com barra de navegação (app-navbar), sessões de destaque (app-session) e barra lateral (app-sidebar). - Catálogo de Livros (
/books-catalogo): Visualização completa do catálogo com informações de paginação (1-26 de 766títulos, por exemplo). - Detalhe do Livro (
/book-details/:id): Exibição de informações detalhadas do livro, incluindo sinopse, palavras-chave e opções de download/compra (Adquirir PDF (50 BRL)). - Barra Lateral (
app-sidebar): Navegação por "Lançamentos", "Categorias" (e.g., Antropologia, Ciências Jurídicas), "Séries" (e.g., Coleção Geografia, Série Sociologia) e "Informações" (Leitores, Autores, Bibliotecários).
- Cadastro de Usuário (
/cadastro-usuario): Formulário completo para registro de novos usuários com campos para nome, email, telefone, senha e gênero. - Login (
/login): Formulário para autenticação de usuários com email e senha.
- Formas de Pagamento (
/books-pagamento): Detalhamento das modalidades de pagamento aceitas (PIX e Cartão de crédito), incluindo tarifas e dados de contato para suporte. - Submissões (
/books-submissoes): Página de informações sobre o processo de submissão, com um aviso de que a editora não está aceitando submissões no momento.
Este projeto é um monorepo simplificado que integra um frontend e um backend, utilizando as seguintes tecnologias:
| Tecnologia | Versão | Propósito | Fonte |
|---|---|---|---|
| Angular | ^14.2.0 |
Framework principal para a UI. | |
| TypeScript | ~4.7.2 |
Linguagem de programação tipada. | |
| RxJS | ~7.5.0 |
Programação reativa para manipulação de eventos. | |
| Axios | ^1.7.2 |
Cliente HTTP para requisições à API (listado em dependências). | |
| CSS/Sass | N/A | Estilização responsiva e modular. |
| Tecnologia | Versão | Propósito | Fonte |
|---|---|---|---|
| Node.js/Express | ^4.19.2 |
Servidor Web e API RESTful. | |
| Mongoose | ^8.4.5 |
Modelagem de objetos para MongoDB (ORM/ODM). | |
| TypeScript | ^5.5.3 |
Desenvolvimento backend tipado. | |
| dotenv | ^16.4.5 |
Gerenciamento de variáveis de ambiente. | |
| body-parser | ^1.20.2 |
Middleware para processamento de corpos de requisição. |
A estrutura do diretório src/app/ segue a convenção do Angular para modularidade e organização por funcionalidade:
src/
├── app/
│ ├── app-routing.module.ts # Definição das rotas principais da aplicação
│ ├── app.module.ts # Módulo raiz, declaração de todos os componentes
│ ├── book-detail/ # Componente para a página de detalhes do livro
│ │ ├── book-detail.component.ts
│ │ ├── book-detail.component.html
│ │ └── book-detail.component.css
│ ├── book-list/ # Componente para listagem de livros (abstração)
│ ├── cadastro-usuario/ # Componente para o formulário de cadastro
│ ├── catalogo/ # Componente para a visualização do catálogo principal
│ ├── formas-de-pagamento/ # Componente com informações sobre pagamentos
│ ├── login/ # Componente para a página de login
│ ├── main-layout/ # Componente de layout principal (Navbar + Session + Sidebar)
│ ├── navbar/ # Componente da barra de navegação (menu principal)
│ │ ├── navbar.component.ts # Inclui lógica para menu mobile (`menuShow()`)
│ ├── navigation-location/ # Componente de navegação (breadcrumbs), injetado no Cadastro
│ ├── session/ # Componente para exibição de destaques/lançamentos na home
│ ├── session-catalogo/ # Componente de listagem no catálogo
│ ├── sidebar/ # Componente da barra lateral de filtros e links
│ └── submissoes/ # Componente com a política de submissões
├── assets/ # Imagens (e.g., logo.png) e ícones (e.g., menu_white_36dp.svg)
├── environments/ # Configurações de ambiente (prod/dev)
├── favicon.ico # Ícone do navegador
└── index.html # Ponto de entrada da aplicação
O backend é simples e atua como uma API REST.
backend/
├── index.ts # Ponto de entrada do servidor (configura Express e porta)
├── package.json # Dependências do servidor (Express, Mongoose)
├── package-lock.json # Lockfile de dependências
├── .gitignore # Exclui node_modules e arquivos de configuração TS
└── tsconfig.json # Configuração do TypeScript
Siga os passos abaixo para configurar e rodar o projeto localmente.
- Node.js (Recomendado v16+)
- npm (ou yarn)
- Angular CLI (Instalado globalmente:
npm install -g @angular/cli) - Um servidor MongoDB em execução para o backend (local ou em nuvem, e.g., Atlas).
- Navegue para o diretório principal do projeto (
editora-workspace). - Instale as dependências do Frontend:
npm install
- Inicie o servidor de desenvolvimento Angular:
A aplicação estará acessível em
npm run start # ou use o comando ng serve nativo: # ng serve
http://localhost:4200/.
-
Crie um arquivo
.envno diretóriobackend/para configurar o ambiente.# Exemplo de conteúdo do .env PORT=3000 MONGO_URI="mongodb://localhost:27017/editora-db" # Adicione outras variáveis de ambiente aqui -
Navegue para o diretório do backend.
cd backend -
Instale as dependências do Backend:
npm install
-
Inicie o servidor Express (requer transpilação, idealmente com um watcher ou
ts-nodepara desenvolvimento. O arquivoindex.tsé o ponto de entrada).O script de
startdeve ser configurado nopackage.jsondo backend para transpilar e executar o código, ou usarts-node.# Exemplo de execução (assumindo script 'start' configurado para 'ts-node index.ts') npm start # Output esperado: [server]: Server is running at http://localhost:3000
Os principais scripts definidos no package.json do frontend:
| Comando | Descrição |
|---|---|
npm run ng |
Executa o Angular CLI (e.g., ng generate). |
npm run start |
Inicia o servidor de desenvolvimento. A navegação é automática para http://localhost:4200/. |
npm run build |
Constrói o projeto para deploy. Os artefatos são salvos no diretório dist/. |
npm run watch |
Constrói o projeto e observa as mudanças para reconstrução automática. |
npm run test |
Executa os testes de unidade via Karma. |
O arquivo src/app/app-routing.module.ts define as rotas da aplicação:
| Caminho URL | Componente | Descrição |
|---|---|---|
/ |
MainLayoutComponent |
Rota principal com o layout base. |
/books |
BookListComponent |
Listagem de livros (componente wrapper). |
/books/:id |
BookDetailComponent |
Rota dentro do layout principal (inativa no momento). |
/book-details/:id |
BookDetailComponent |
Rota para detalhes do livro (sem o MainLayout). |
/books-catalogo |
CatalogoComponent |
Página do Catálogo de Livros. |
/books-pagamento |
FormasDePagamentoComponent |
Página com as formas de pagamento. |
/books-submissoes |
SubmissoesComponent |
Página de informações sobre submissões. |
/cadastro-usuario |
CadastroUsuarioComponent |
Formulário de registro de novos usuários. |
/login |
LoginComponent |
Formulário de acesso ao sistema. |
O projeto utiliza uma variedade de componentes para construir a interface:
| Componente | Responsabilidade | Referência |
|---|---|---|
AppComponent |
Componente raiz que carrega o <router-outlet> principal. |
|
NavbarComponent |
Navegação principal e menu mobile (menuShow()). |
|
SidebarComponent |
Barra lateral de navegação para categorias e séries. | |
SessionComponent |
Exibição de carrossel ou grade de destaques/lançamentos (na home). | |
SessionCatalogoComponent |
Componente reutilizável para listagem de itens no catálogo. | |
NavigationLocationComponent |
Exibição da trilha de navegação ("Início / Atual"). | |
MainLayoutComponent |
Define o layout comum da aplicação (Navbar + Conteúdo + Sidebar). | |
BookDetailComponent |
Detalhes específicos de um livro. | |
LoginComponent |
Lógica e template para o formulário de login. | |
CadastroUsuarioComponent |
Lógica e template para o formulário de cadastro. |
O projeto utiliza uma configuração estrita de TypeScript para garantir alta qualidade e segurança de código:
{
"compilerOptions": {
"baseUrl": "./",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"target": "es2020",
"module": "es2020",
"lib": ["es2020", "dom"]
},
"angularCompilerOptions": {
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}Destaques: O uso de strict: true e strictTemplates: true indica um compromisso com código seguro e com menos erros em tempo de execução.
O arquivo de configuração define o suporte aos navegadores para garantir a compatibilidade e a otimização dos assets gerados:
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
Nota: Para verificar a lista de navegadores selecionados, use npx browserslist.
O servidor Node.js/Express (backend/index.ts) inicializa e escuta na porta definida nas variáveis de ambiente:
import express, { Express, Request, Response } from "express";
import dotenv from "dotenv";
dotenv.config();
const app: Express = express();
const port = process.env.PORT || 3000; // Usa PORT do .env ou 3000
app.get("/", (req: Request, res: Response) => {
res.send("Express + TypeScript Server")
})
app.listen(port, () => {
console.log(`[server]: Server is running at http://localhost:${port}`);
});Os testes de unidade são configurados para serem executados com Karma e [Jasmine].
Para executar os testes:
npm run test
# ou ng testA configuração do Karma utiliza o karma-chrome-launcher para execução no navegador e gera relatórios de cobertura em coverage/editora-workspace/.
Arquivos de teste para componentes essenciais já estão definidos, como em src/app/sidebar/sidebar.component.spec.ts:
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SidebarComponent } from './sidebar.component';
describe('SidebarComponent', () => {
let component: SidebarComponent;
let fixture: ComponentFixture<SidebarComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ SidebarComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(SidebarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});O teste verifica a criação bem-sucedida da instância do componente.
Siga os passos a seguir para contribuir com o projeto:
- Faça um fork do projeto.
- Crie uma branch para sua feature (
git checkout -b feature/AmazingFeature). - Comite suas mudanças (
git commit -m 'feat: Add AmazingFeature'). - Faça o push para a branch (
git push origin feature/AmazingFeature). - Abra um Pull Request.
Distribuído sob a licença ISC.
Para mais informações sobre o Angular CLI, utilize ng help ou confira a documentação oficial:
Este README.md foi gerado com base na análise da estrutura e conteúdo dos arquivos do projeto editora-workspace.