Adicione seus 10 centavos é uma aplicação de gestão de conteúdos que permite a pessoa usuária criar, ler, atualizar e apagar conteúdos; formatá-los na sua criação com editor wysiwyg, bem como consultar o histórico de modificações e recuperar uma atualização anterior, se assim o desejar.
A aplicação é compostade três camadas: banco de dados, backend e frontend. Essas camadas estão isoladas entre si em containers Docker, que funcionam em conjunto geridos pelo Docker-compose.
O banco de dados da aplicação é o MyNotes, suportado pelo MySQL, um sistema de gerenciamento de bancos de dados relacionais open-source. O banco conta com duas tabelas, uma para armazenar os conteúdos, denominada contents e outra para armazenar o histórico das alterações feitas nos conteúdos ao longo do tempo,denominada histories. As tabelas possuem campos e relacionamento conforme demonstrado no esque abaixo:
A ligação entre o banco de dados e o frontend é feita por meio de uma API RESTful, contando com as camadas MSC (Model, Service e Controller) e uma camada adicional de middlewares para validação de requisições e tratamento de erros. A API foi contruída em Node.js e teve seus endpoints estruturados com uso do Express; a manipulação do banco de dados foi facilitada pelo uso da ORM Sequelize. É uma API CRUD (Create, Read, Update and Delete), permitindo operações de criação, leitura, atualização e exclusão de conteúdos.
O desenvolvimento foi orientado ao comportamento, utilizando Typescript e aplicando conceitos de Programação Orientada a Objetos. Os testes desenvolvidos foram de integração e fizeram uso de Mocha, Chai, Chai-http e Sinon. A documentação completa das rotas da API pode ser encontrada no Postman, clicando no ícone abaixo.
O frontend da aplicação foi desenvolvido em React. Ela é composta de cinco rotas, viabilizadas pelo React-Router-Dom; sendo elas para listar todos os conteúdos, pesquisar conteúdos por título, visualizar histórico de atualizações, atualizar conteúdos e criá-los. O desenvolvimento do frontend também foi orientado ao comportamento, com os testes sendo End2End, desenvolvidos utilizando Cypress.A estrutura seguida empregou a organização de diretórios por funcionalidades, contando com as separações entre components, page, helpers e style; enquanto isso, a estilização da página foi feita utilizando CSS.
- Escolha um diretório e clone o repositório utilizando git clone:
git@github.com:AirelRibeiro/gestor-de-conteudos.git
- Acesse o diretório do projeto gestor-de-conteudos e instale as dependências:
cd gestor-de-conteudos
npm install
- Então rode o script compose:up para montar a aplicação:
npm run compose:up
- Entre no diretório de backend e utilize o script prepare:db para iniciar o banco MyNotes:
cd backend
npm run prepare:db
- Por fim, com o banco funcionando, acesse o projeto via navegador, usando a seguinte url:
http://localhost:3000
Para sua melhor experiência o script prepare:db também popula o banco com 10 conteúdos, então a página inicial da aplicação irá lista-los assim que carregar.
- No diretório raiz do projeto, acesse o backend
cd backend
- Agora basta rodar o script de teste:
npm run test
- Para verificar a cobertura de testes da aplicação, rode o script test:coverage:
npm run test:coverage
Observação importante: Optou-se por não fazer mcks para os testes de frontend, visando ter uma interação real com a API no momento dos testes, assim, antes de sequir os passos abaixo, verifique que executou todos os passos da seção Rodando o projeto na sua máquina:
- No diretório raiz do projeto, acesse o frontend
cd frontend
- Agora basta rodar o script de teste:
npm run test
- Quando o Cypress abrir, você só precisa rodar as specs:
0_header.cy.js
1_home.cy.js
2_history.cy.js
3_search.cy.js
4_formDemostration.cy.js
Para deploy do banco e do backend foi utilizada a plataforma Railway. Dessa forma, por uma questão de capacidade de armazenamento, o banco utilizado na plataforma foi o PostgreSQL, sendo realizadas nas variáveis de ambiente as devidas alterações. Como também trata-se de um banco SQL e a manipulação das tabelas é feita por meio do Sequelize, nenhuma refatoração foi necessária no código do backend.
Enquanto isso, o deploy do frontend da aplicação foi realizado na Vercel e pode ser acessada para visualização e interação neste endereço.