Pedro_Fernandes__DDF_TECH_052025 - RedaPlus

📄 As documentações e a gestão de riscos podem ser encontradas na pasta /docs.

📚 Sumário:

1. 🎥 Apresentações
2. 🚀 Projeto
3. 🛠️ Configuração do Ambiente
4. 🧪 Testes
5. 🖼️ Capturas de Tela - Uso da Aplicação

Apresentações

1. Apresentação em Português:

• Apresentação

2. Apresentação em Inglês:

• Apresentação

Projeto

RedaPlus é um software que conecta professores e alunos, onde alunos podem enviar redações para serem corrigidas e utilizar AI para planejar a escrita de novas redações.

Foi desenvolvida com as seguintes tecnologias:

• Backend: Foi Utilizado Nest (NodeJS) devido a capacidade de injeção de dependências muito forte, modularização.

• Frontend: Desenvolvido com Next.js (React) e a biblioteca Minimals (baseada em MUI). Conforme descrito na seção de gestão de riscos, a escolha dessa biblioteca se baseou na sua ampla gama de componentes e funcionalidades, o que, mesmo que nem todos fossem utilizados, proporcionou maior produtividade e contribuiu para o cumprimento do prazo.

Configuração do Ambiente

🧩 Backend

1. Acesse a pasta do Backend:

cd Backend

2. Crie o arquivo .env a partir do .env.example (Mantenha todos os ENV em /Backend)

3. Instale as dependências com:

npm install

Após esses dois passos serem realizados com sucesso, você deverá ter um retorno parecido com esse:

Passos 1, 2 e 3 realizados com sucesso

Depois disso, podemos subir o container do backend, que é composto pelo:

• Backend;
• MySQL;
• N8N.

4. Sub os containers:

docker compose up

Após isso, você deverá ver algo como isso (Em caso de sucesso):

Passo 3 realizado com sucesso

Obs: Idealmente, o comando já irá buildar e subir a aplicação, mas caso contrário, é necessário buildar previamente.

5. 🔁 Configurar N8N: Acesse o seu N8N local, que você subiu no passo 3, como demonstrado na imagem logo acima, o meu está em http://localhost:5678.

   5.1. Para essa etapa, você verá a seguinte tela:

   Nessa etapa, pode utilizar seus dados.

   5.2 Clique em Get started e depois em skip:

   

   5.3 Abra o Workflow "My Workflow":

   Obs: Esse Workflow é importado de /Backend/n8n/exported-workflows.json

   5.4 Vamos inserir a API Key da OpenAI no modelo.

   

   Você verá essa tela:

   clique em Select Credentials ou se ja tiver configurado uma credential, clique no lápis que irá aparecer ao lado de Select Credentials.

   5.5 Após clicar em Select Credentials, a seguinte tela irá abrir, clique em expression:

   5.6 Insira agora na API Key, o seguinte dado: {{$('Dados').item.json.key.replace(/^'+|'+$/g, '')}} a key será enviada de forma automática e será obtidao do nó "Dados".

   5.7 Salve a sua alteração e feche esse nó:

   5.8 Agora Salve o Fluxo inteiro e ative o fluxo:

Com isso finalizamos a configuração do Backend e do N8N.

Obs: A justificativa da escolha do N8N se encontra nos documentos da gestão de riscos.

Agora vamos popular o banco, temos duas possibilidades:

• Utilizar o arquivo de Seed;
• Utilizar o /backup.

Nesse tutorial vamos utilizar a seed, mas sinta-se a vontade para escolher o que melhor se encaixa para você.

6. Para isso vamos utilizar o redaplus_seed_data.json que deve estar presente em /Backend/prisma/seed.

   6.1 Vamos abrir um novo terminal e acessar o container, com um comando como esse:

   docker exec -it backend_redaplus bash

   6.2 Dentro do container, vamos executar

   npx ts-node ./prisma/seed/population.ts 

   Esse comando pode demorar um pouco, mas ao final do processo, você verá essa tela em caso de sucesso:

Finalmente temos Backend + N8N configurados e Banco populado.

💻 Frontend

1. Acesse a pasta do Frontend:

cd Frontend/redaplus

2. Crie o arquivo .env a partir do .env.example (Mantenha todos os ENV em /Frontend/redaplus)

3. Instale as dependências com:

npm install

Você verá uma resposta parecida com essa ao final dos passos: Passo 1, 2 e 3 realizados com sucesso

4. Temos agora 2 opções:

• Iniciar em modo Dev: yarn dev
• Iniciar com build: yarn build && yarn start

Novamente, fica aberto a escolha, mas vamos buildar e iniciar após o build, até mesmo para auxiliar nos testes de integração.

Pode demorar um pouco, caso apareça retry ou alguma mensagem, fique tranquilo!

Após finalizar o processo, vamos ter essa mensagem no terminal:

Pronto! Frontend Configurado, podemos iniciar o uso do RedaPlus.

Testes

🧩 Backend

Para rodar os testes unitários no backend, siga os seguintes passos:

1. Acesse o Backend:

cd Backend

2. Execute yarn test

Você terá esse retorno no terminal:

💻 Frontend

Para rodar os testes de integração demonstrados no Frontend, suba o backend e o frontend como demonstrado nos passos anteriores e siga os seguintes passos:

1. Acesse o Frontend:

cd Frontend/redaplus

2. Execute npx cypress run

Você terá esse retorno no terminal:

Caso esteja com problemas ou queira ver no modo iterativo, também é possível acessar o modo interativo através de npx cypress open

Capturas de Tela - Uso da Aplicação

1. Tela de Login

2. Tela Inicial - Visão do Estudante:

3. Gráficos da Tela de Dashboard - Volume de dados do Estudante:

4. Tela de Planejamento:

   4.1 Antes de solicitar planejamento:

   4.2 Depois de solicitar planejamento:

5. Tela de visualizar redações + filtros:

6. Tela de criar redações:

7. Tela de Editar/Visualizar redação corrigida - Visão do Estudante:

8. Tela de Editar/Visualizar redação submetida - Visão do Estudante:

9. Tela de Usuários - Visão do Corretor:

10. Modal de detalhes do Usuários - Visão do Corretor:

11. Tela de criar Usuários - Visão do Corretor:

12. Tela de Editar Usuário - Visão do Corretor:

13. Gráficos da Tela de Dashboard - Volume de dados de todos usuários:

14. Tela de Opções: