Vamos criar um projeto de finanças em 2 etapas, a primeira será uma API com Java!
Esse projeto foi gerado pelo Windsurf IA.
A segunda etapa será em ReactJS, e será nosso FrontEnd.
Segue o prompt que utilizamos:
Vou criar um projeto Spring Boot para organizador de finanças com Java 17.Vamos trabalhar com alguns pontos, como é apenas um mvp utilizaremos o banco H2 embutido, será utilizada a arquitetura MVC. também teremos algumas regras que serão utilzadas para desenvolver nosso sistema essas regras podem ser colunas no banco de dados que são: Separe renda fixa e variável. Liste todas as despesas. Divida gastos por categorias. Separe essenciais de supérfluos. Identifique gastos recorrentes. Analise gastos invisíveis. Quebre despesas grandes em mensais. Visualize tudo em uma lista simples. Elimine o que não agrega valor.
Após isso segue uma imagem do que foi feito:
Para melhorar o nosso projeto, também solicitei que fossem criados testes unitários, para pegar quaisquer erros que pudessem ser gerados na criação das classes do nosso projeto, com isso reduzimos alguns erros que poderiam nos custar um bom tempo, segue o prompt:
agora gostaria que fossem gerados testes unitários para todos os endpoints criados, para que possamos garantir que estão todos funcionando, além de detectar possíveis bugs e falhas que possam gerar exceções
o resultado foi que corrigimos vários erros e tivemos essa mensagem:
como nossa aplicação está ok, o próximo passo foi solicitar a documentação da API para que possamos utilizar no próximo projeto que será em REACTJS, segue o Prompt:
agora gere uma documentação de api completa para que seja utilizada em um projeto react, importante ser observados os testes unitários para que o front end não crie bugs na comunicação com o backend
Que gerou esse resultado:
Agora foi feita a criação do front end, segue o prompt:
crie um projeto em reactjs que atenda aos documentos: API_DOCUMENTATION.md, REACT_COMPONENT_EXAMPLE.tsx e REACT_INTEGRATION_EXAMPLE.md que estão localizados em: C:\Users\Naja Info\CascadeProjects\windsurf-project\organizador-financas Siga exatamente a documentação, além disso crie um dashboard em que seja possivel ver os saldos em um consolidados com todas as informações organizadas e bem separadas o endpoint da api é http://localhost:8080/ pode fazer com que as chamadas apontem para ele
Um ponto de atenção aqui é que a IA pode ficar meio travada com a criação de arquivos com a extensão .json, nesse caso eu solicitei o seguinte:
crie a principio o sem o arquivo package.json e depois eu crio para prosseguirmos, e o nome do projeto é projeto-financas-view
Deu certo e começou a geração do projeto, mas o windsurf reclamou da tsconfig.json também, no caso eu criei os 2 arquivos e preenchi com os dados que me foram fornecidos, como no exemplo:
como resultado faltaram os últimos passos que eu solicitei através do prompt após a imagem:
siga com os passos 1,2,3 e 4, parta para o passo seguinte quando o atual estiver ok
tive alguns erros de cors, mas fiz o ajuste no backend, para permitir acesso externo (no caso o front end é visto como um acesso externo) e o resultado foi:
o dashboard gerado e se eu quiser cadastrar uma nova transação, basta clicar no botão e surgirá a opção de cadastrar:
em meu exemplo já tinha cadastrado algumas coisas e aí o valor foi adicionado.
Por hoje é isso pessoal, vou deixar o link do github para quem quiser baixar o projeto e se divertir, nele contem os requisitos para rodar o projeto, se quiser facilitar mais ainda pode pedir para o windsurf ou qualquer outra IA que estiver utilizando, para baixar ou trazer os links de donwload dos mesmos.
Projeto finanças em REACT AQUI
Projet financas em java (API) AQUI
Quaisquer dúvidas ou sugestão, estou a disposição =)