O projeto a seguir, apresenta-se como uma solução de um sistema para:
- coletar do usuário respostas às perguntas pré-cadastradas por meio de um cliente web;
- analisar as respostas e por meio de um score dar o peso pras respostas;
- escrever a resposta em um arquivo
.txtno servidor. - exibir a pontuação das respostas para o usuário
Como diferencial, não há conteúdo estático no projeto fora dos JSONs de cliente e servidor. Logo, a edição dos arquivos JSON na pasta constants de cliente e servidor é o suficiente para cadastrar novas questões ou alterar/remover as existentes do lado do cliente, assim como, criar ou alterar novas pontuações baseadas nas respostas do lado do servidor.
Lembre-se: O projeto utilizou-se de uma estrutura monorepo para facilitar o desenvolvimento. O deploy deverá ser feito em ambientes separados para segurança (Dica: O
dockerjá está configurado para rodar o ambiente de desenvolvimento, poucas alterações serão necessárias para o deploy da imagem em algum registry para posteriormente colocar em produção.)
Opção Docker:
- Você pode rodar o comando
docker-compose upna raiz. Na primeira execução, o comando vai fazer o build da imagem o que pode levar alguns minutos, após utilize apenas esse comando para rodar seu ambiente de desenvolvimento nas próximas;
Opção Local:
- Faça o
git clonedo projeto - Rode na raiz do projeto o comando:
npm install && cd react_client && npm install
- Rode o comando:
npm run devna raiz; - Acesse o app em:
http://localhost:3000;
A função de edição das questões em formato JSON, você descobre abaixo como fazer. Essa abstração busca permitir edições rápidas nas questões apresentadas e igualmente alteração do score registrado pelo sistema. Nesse formato, mesmo a internacionalização(tradução) também poderá ser aplicada mais facilmente.
react_client/src/constants/survey.json
Nesse arquivo devemos configurar como será a visualização da pesquisa, você poderá acrescentar perguntas, editar ou remover a seu critério sem precisar refazer um build quando em produção. Veja o padrão:
{
"survey": "Título da Pesquisa",
"questions": {
"question1": {
"statement": "Enunciado",
"type": "Tipo",
"answers": ["respostas", "aceitas"],
"error": "Mensagem de erro"
},
},
"answers": {
"respostas": "Respostas",
"aceitas": "Aceitas",
"pelo": "Pelo",
"servidor": "Servidor",
},
"responses": {
"positives": "Positiva",
}
}Dessa forma, é possível acrescentar ou alterar questões.
Temos disponíveis as questões do tipo: "select", "textarea" e "radio"
Para sincronizar as novas questões com o backend veja a próxima seção. Ainda no frontend, para concluir a edição se houver validações a serem feitas você poderá configurar no arquivo:
react_client/src/constants/validation.ts
Utilizamos a popular lib yup para as validações.
Lembre-se de alterar também o arquivo
src/types/types.tsque conterá guardiões de tipo. Caso necessário novo build esse passo é obrigatório, pois o compilador doTypescriptestá configurado em modo estrito com pouca permissividade.
src/constants/pointsByAnswer.json
O JSON do servidor é configurado aninhando-se o número da questão, as classificações de respostas aceitas e finalmente a pontuação de cada resposta em seu grupo como no exemplo abaixo:
{
"question1": {
"positives": {
"yes": 1
},
"negatives": {
"no": 1
}
}Cadastramos a pontuação da questão e as possibilidades de resposta seguindo esse padrão.
Lembre-se de alterar também o arquivo
src/types/types.tsque conterá guardiões de tipo para o backend. Caso necessário novo build esse passo é obrigatório, pois o compilador doTypescriptestá configurado em modo estrito com pouca permissividade.
O servidor API REST está configurado para rodar na porta 5000 por default no ambiente de desenvolvimento.
localhost:5000
Respondendo às requisições HTTP, esse servidor possui esquema de validação própria das entradas aceitas via lib Ajv. A validação do lado do backend pode ser encontrada no JSON
schemas/answer.json
Também deve ser editado após a compilação para acomodar a validação das novas questões ou mais possibilidades de respostas pra mesma questão.
Abaixo um exemplo do modelo do contrato encontrado nas rotas disponíveis:
-
Rota
/answer -
Request
{ "question1": "yes", "question2": "yes", "question3": "now", "question4": "I would like to improve my technical and softskill abilities at GRX" }
-
Response
{ "positives": 4, "negatives": 0, "not_avaliated": 0 }
A integração das bibliotecas React Query e React-hook-forms foi bastante desafiadora a medida em que elas fazem o gerenciamento dos estados no formulário e requisição do servidor. Foi adicionado à proposta um botão de reset para a pessoa poder responder novamente. Houve um trabalho longo para orquestrar esses estados da biblioteca de forms, dos componentes com o react-query. Em tempo, o maior entendimento do código do react-hook-forms, pesquisa de issues no github e leitura do código fonte foi a fonte para conseguir fazer funcionar o reset.
Seria interessante a criação de testes ao longo do processo de desenvolvimento, como não foi feito, deveria-se fazer no mínimo um teste de integração. O teste cobrindo os casos de envio e erro ajudariam muito no desenvolvimento de novas features posteriormente, como a inclusão de novos tipos de questões.
O desafio proposto embora pareça simples à primeira vista, ele é capaz de te desafiar. O desafio passa principalmente em relação às arquiteturas possíveis e seleção de ferramentas e tecnologias que você possa utilizar na solução. A abstração para modelos mais dinâmicos é compreendida em fase mais avançada do projeto e traz uma experiência importante na criação de softwares fullstack. Talvez eu pudesse sugerir um prazo maior pra realização do projeto em bom nível sem extrapolar o prazo.
UNLICENSED yet.
Celso Oliva - celsodevelop