Skip to content

Aplicação para gestão de conteúdos que permite a pessoa usuária criar, ler, atualizar e apagar conteúdos, bem como ter acesso ao histórico de modificações e recuperar uma atualização anterior.

Notifications You must be signed in to change notification settings

AirelRibeiro/gestor-de-conteudos

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Adicione seus 10 centavos!

image

Descrição:

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.

Configurações das estruturas:

Setup:

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.

Banco de dados:

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:

image

Backend:

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.

Frontend:

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.

Rodando o projeto na sua máquina

  1. Escolha um diretório e clone o repositório utilizando git clone:
  git@github.com:AirelRibeiro/gestor-de-conteudos.git
  1. Acesse o diretório do projeto gestor-de-conteudos e instale as dependências:
  cd gestor-de-conteudos
  npm install
  1. Então rode o script compose:up para montar a aplicação:
  npm run compose:up
  1. Entre no diretório de backend e utilize o script prepare:db para iniciar o banco MyNotes:
  cd backend
  npm run prepare:db
  1. 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.

Rode os testes da aplicação

  1. No diretório raiz do projeto, acesse o backend
  cd backend
  1. Agora basta rodar o script de teste:
  npm run test
  1. Para verificar a cobertura de testes da aplicação, rode o script test:coverage:
  npm run test:coverage

Testes do frontend

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:

  1. No diretório raiz do projeto, acesse o frontend
  cd frontend
  1. Agora basta rodar o script de teste:
  npm run test
  1. 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

Informações de deploy

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.

About

Aplicação para gestão de conteúdos que permite a pessoa usuária criar, ler, atualizar e apagar conteúdos, bem como ter acesso ao histórico de modificações e recuperar uma atualização anterior.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published