Uma reconstrução do Cardeasy.
É necessário ter o Java 21 e o Maven — estou usando a versão 3.8.7, mas não acho que a versão se tornará um problema para você. Peço a cautela com a formatação do código, você certamente não estará programando algo que apenas você verá.
Sobre o ambiente, recomendo o uso do VSCode com o Extension Pack for Java. Além disso, mesmo que não vá mexer no frontend, recomendo abrir o projeto inteiro, pois a referência para o arquivo do banco de dados database é relativa a pasta de execução do backend — e eu executei na raíz do projeto inteiro.
Como recomendações adicionais, recomendo as extensões EditorConfig for VSCode e Material Icon Theme. Sendo o primeiro bem mais importante, e o segundo muito mais uma questão de customização.
Você pode executar através do Extension Pack for Java. Ao executar o backend, o console do H2 está disponível em http://localhost:8080/console.
- O usuário e senha padrão é
admin; - O
JDBC URLéjdbc:h2:./database/database; - O
Driveréorg.h2.Driver.
A imagem abaixo ilustra a página de login do console.
A image abaixo ilustra o console após a autenticação bem sucedida.
Deixamos alguns dados mockados apenas para testes (alguns nomes e títulos podem não fazer muito sentido), pode alterar a vontade. Estão acessíveis através das contas:
- Pedro
- E-mail: pedro@gmail.com
- Senha: pedro
- Marcel
- E-mail: marcel@gmail.com
- Senha: marcel
- Eric
- E-mail: eric@gmail.com
- Senha: eric
- Artur
- E-mail: artur@gmail.com
- Senha: artur
Uma vez em execução, você conseguirá acessar todas as informações das rotas através do caminho http://localhost:8080/docs/swagger.
É necessário ter o Node 22 e o Pnpm — estou usando a versão 10.14.0, mas não acho que a versão se tornará um problema para você. Peço a cautela com a formatação do código, você certamente não estará programando algo que apenas você verá.
Sobre o ambiente, recomendo o uso do VSCode com o JavaScript and TypeScript Nightly e o Tailwind CSS IntelliSense.
Como recomendações adicionais, recomendo as extensões EditorConfig for VSCode, Material Icon Theme, Pretty TypeScript Errors e o TypeScript Importer. Sendo o primeiro bem mais importante, o segundo muito mais uma questão de customização e os dois últimos utilitários para o TypeScript.
Para executar o projeto, primeiramente você deve baixar todas as dependências.
cd frontend
pnpm install
pnpm approve-buildsSelecione tudo que aparecer no terminal com space após o último comando. E uma vez com todas as dependências instaladas, execute:
pnpm devPara os que não estão familiariazados com o Next.js, todas as páginas ficam na pasta app, embora imagens e outros arquivos estáticos públicos possam ficar no public. Este framework roteia automaticamente as páginas de acordo com as pastas e arquivos dentro da pasta app.
layout.tsxé um componente opcional que "cobre" toda página e páginas dentro das pastas de sua raiz;- Por exemplo, o
<html>que vai em todas as páginas fica noapp/layout.tsx, sendo olayout.tsxmais importante.
- Por exemplo, o
page.tsxé o componente da página propriamente dita.
Exemplos de roteamento:
.
├── components/ # Componentes da aplicação
├── services/ # Criei para colocar serviços que se comunicam com o backend
├── public/ # Arquivos estáticos públicos
├── app/ # Rotas da aplicação
│ ├── layout.tsx # Corpo <html> comum a todos
│ ├── page.tsx # Página da rota "/"
│ ├── login/ # Pasta da rota "/login"
│ ├── ├── page.tsx # Página da rota "/login"
│ ├── teams/[id]/ # Pasta da rota "/teams/{id}", se não mudou
│ ├── ├── page.tsx # Página da rota "/teams/{id}"
Se tratando de uma aplicação acadêmica que visa apenas o aprendizado, tomamos algumas escolhas visando a entrega. Por exemplo:
- Não há página de cartão que reune todas as entidades ligadas ao cartão;
- O foco era o
backend, e achamos mais fácil reutilizar componentes já existentes com tudo bem separado do que criar uma grande página para lidar com tudo que há nela.
- O foco era o
- Alguns elementos são arrastáveis, outros não;
- É chatinho de implementar e conflita com a paginação.
- Em uma aplicação real provavelmente faz mais sentido alguns
ids serlongao invés deint; - Algumas entidades só deveriam ter chave composta feita com a chave estrangeira, justamente por serem entidades fracas no modelo
EER. Mas ficou mais prático atribuir apenas oidpróprio de cada entidade nos casos possíveis; - Só há relacionamento
1:1por que foi uma das exigências; - Não deixamos um
dashboardpronto para abrir nografana, embora os containers necessários estejam configurados nodocker-compose.yml; - Etc.