🛒 TecLoja: E-commerce de Tecnologia (JDK 17 + Angular Standalone)

Este projeto demonstra o desenvolvimento de um e-commerce completo de eletrônicos e produtos de tecnologia (TecLoja). Ele foi planejado especificamente para ser utilizado como estudo de caso prático nas aulas de Engenharia de Software e Banco de Dados.

A aplicação adota uma Arquitetura Multirepo moderna, mantendo o frontend e o backend em repositórios independentes do GitHub, com deploys automatizados na nuvem através de pipelines de CI/CD:

Backend (API): Desenvolvido em Java 17 com Spring Boot 3.x e Spring Data JPA, utilizando banco Neon PostgreSQL em produção e deploy em container Docker na Render.
Frontend (SPA): Desenvolvido em Angular 18+ utilizando Standalone Components e gerenciamento de reatividade moderno com Angular Signals, hospedado e distribuído via CDN na Netlify.

🎯 Objetivos Didáticos

Para Aulas de Banco de Dados:

Modelagem de Relacionamentos: Modelagem de relações 1:N (Categoria/Produto, Cliente/Pedido) e N:M (Pedido/Produto através de uma tabela associativa complexa ItemPedido contendo atributos como preço histórico e quantidade).
Mapeamento Objeto-Relacional (ORM): Mapeamento JPA com anotações de relacionamento, estratégias de carregamento (FetchType.LAZY vs EAGER), chaves estrangeiras e deleção física em cascata.
Massa de Dados Didática: Uso de scripts SQL e Seeders automatizados com dados reais de produtos eletrônicos para simulação prática.

Para Aulas de Engenharia de Software:

Arquitetura em Camadas (Separation of Concerns): Divisão lógica estrita (Controller, Service, Repository, DTO, Entity).
Segurança e JWT (Stateless): Autenticação stateless baseada em tokens JWT (geração, validação e autorização por papéis - ADMIN e USER).
Padrões de Projeto & SOLID: Injeção de Dependências, padrão DTO (Data Transfer Object) para proteção de dados das entidades, e tratamento globalizado de exceções.
DevOps e CI/CD Duplo: Conteinerização com Docker (multi-stage) e pipelines de integração e entrega contínua (GitHub Actions) com deploy isolado da API na Render e do Frontend na Netlify.

📚 Módulos do Curso

Parte III: O Ecossistema Mobile Híbrido (Ionic + Capacitor)

Parte IV: Qualidade de Software Frontend

Módulo 13: QA Frontend - Testes End-toEnd Automatizados com Cypress

📖 Documentação Técnica

Guia de Configuração do Ambiente — Instalação de Java, Node, Ionic CLI (Windows / Linux / macOS)
Erros Frequentes e Soluções — 25+ erros categorizados com causa e solução
Changelog — Histórico de alterações e correções do projeto

🚀 Guia Rápido de Execução e Testes (Manual do Estudante)

Para simular o ecossistema omnichannel completo em sua máquina local de forma autoguiada e sem erros, siga o roteiro passo a passo abaixo para inicializar e testar cada um dos três componentes principais:

💡 Atalho para Linux/macOS: Use o script interativo run_tecloja.sh para inicializar o ecossistema com um menu TUI colorido sem precisar abrir terminais manualmente:
./run_tecloja.sh
O script detecta automaticamente o emulador de terminal disponível (gnome-terminal, konsole, xterm) e abre janelas separadas para o backend e o frontend. Equivalente Windows: run_tecloja.ps1.

☕ 1. O Servidor Backend (API Spring Boot)

O backend gerencia as regras de negócio, persistência relacional H2, inativação por Soft Delete e segurança stateless.

Como Inicializar: Abra um terminal na pasta backend/ e execute:

# No Windows PowerShell:
./mvnw spring-boot:run
  
# No Windows CMD ou Linux/macOS:
./mvnw spring-boot:run

Credenciais de Testes Germinadas (Seeder): A base é populada de forma automática por DataSeeder.java ao iniciar:
- Usuário Administrador (ADMIN + USER): admin@tecloja.com Senha: admin123
- Usuário Cliente Padrão (USER): usuario@email.com Senha: usuario123
Como Testar a API Diretamente: Você pode testar a integridade profunda dos serviços executando a suíte de testes JUnit:
```
./mvnw clean test
```

💻 2. O Portal Web (Angular SPA)

O portal web disponibiliza a vitrine de tecnologia reativa para desktops e o painel de administração de produtos.

Como Inicializar: Abra um segundo terminal na pasta web/ e execute:
```
npm start
```
Acesse http://localhost:4200 no seu navegador.

Como Executar Testes Automatizados E2E (Cypress): Para rodar o robô de qualidade que preenche formulários e clica em botões de forma simulada:

# Roda os testes silenciosamente (Headless) no terminal:
npm run e2e
  
# Abre o painel interativo gráfico do Cypress para acompanhar o robô visualmente:
npx cypress open

📱 3. O Aplicativo Móvel (Ionic + Capacitor Híbrido)

O aplicativo móvel gerencia o consumo omnichannel reativo com persistência nativa e acesso a hardware físico.

Como Inicializar: Abra um terceiro terminal na pasta mobile/ e execute:
```
ionic serve
```
O Ionic abrirá automaticamente a tela no navegador em http://localhost:8100 (ou porta similar). Aperte F12 no navegador e ative a “Visualização Móvel/Responsiva” para simular a tela de um smartphone.
Como Testar Recursos Nativos no Navegador:
- Login Sandbox: Efetue o login com admin@tecloja.com / admin123. A gravação é armazenada assincronamente nas chaves internas do Capacitor Preferences.
- Câmera Móvel Simulada: Clique no avatar de perfil ou no ícone da câmera no topo da tela. Uma caixa de diálogo do @ionic/pwa-elements abrirá sobre a tela simulando o hardware do celular usando a webcam do seu computador para capturar e alterar a foto de perfil do usuário!

Voltar para Projetos

🥞 Portal de Conteúdos ADS

Portal de Conteúdos ADS