Esse projeto consiste na implementacão das features relacionadas ao processo de realizacão e gerência de um pedido em um app de delivery de comida.
O projeto é dividido em duas partes: o servidor, que implementa uma API RESTful, e o front-end, que apresenta uma interface web.
O servidor foi implementado em Typescript, fazendo uso de Node.js, enquanto que o front-end foi implementado em Vue.js.
O projeto pode ser dividido em duas grandes partes que interagem entre si, o carrinho de compras, e o pedido em si.
O carrinho de compras é onde o usuário armazena preliminarmente os itens que pretende pedir a medida que os escolhe do cardápio. Um carrinho de compras deve conter apenas item de único restaurante, como foi decidido em discussão com os stakeholders. O carrinho pode ter itens adicionados a si. Esses itens podem ser atualizados ou removidos depois disso. Além disso, o carrinho pode rápidamente ser limpo.
Uma vez que o usuário esteja satisfeito com seu carrinho, e deseje realizar o pedido, isso pode ser feito, criando um objeto especial Pedido, baseado no carrinho. O pedido tem as informacões sobre os itens do carrinho, porém estes se tornam agora imutaveis, e outras informacões são adicionadas, como informacões sobre o valor final, e data e hora do pedido. Além disso, um pagamento deve ser realizado pelo sistema de pagamentos (implementado por uma outra equipe e apenas mockado neste projeto). Após isso, o pedido é enviado para o restaurante, tornando-se uma comanda com a qual o restaurante pode interagir. A mudanca no status da comanda, realizada pelo restaurante, pode ser observada pelo pedido, que sua vez pode modificar seu próprio status de acordo, o que permite a notificacão ao usuário, etc.
Neste projeto, fomos guiados quase unicamente pelo paradigma orientado a objetos, com cada uma das entidades do projeto sendo implementada como uma classe. Além disso, fizemos uso do padrão Observer para que o usuário possa ser notificado das atualizacões ao seu pedido, e o pedido possa ser notificado das atualizacões de seu pagamento e comanda. Além disso, implementamos uma classe usando o padrão Singleton para ser usada na simulacao do servico de pagamentos.
O objetivo com o uso do padrão Observer foi reduzir a acoplagem entre as classes usuário, pedido, e restaurante, permitindo entregar uma interface diferente ao usuário daquela que é entregue ao restaurante, uma vez que essas classes, conceitualmente, tem interacões (e "interesses") diferentes com um pedido.
GET /usuario/:id/carrinho: Retorna o carrinho de compras do usuário com a dada ID.POST /usuario/:id/carrinho: Adiciona o item passado no corpo da requisicão ao carrinho de compras do usuário com a dada ID. Retorna o carrinho atualizado.DELETE /usuario/:id/carrinho/:idItem: Remove o item com a dada idItem do carrinho de compras do usuário com a dada ID. Retorna o carrinho atualizado.DELETE /usuario/:id/carrinho: Limpa o carrinho de compras do usuário com a dada ID. Retorna o carrinho atualizado.PUT /usuario/:id/carrinho: Atualiza o item passado no corpo da requisicão no carrinho de compras do usuário com a dada ID. Retorna o carrinho atualizado.GET /usuario/:id/carrinho/total: Retorna o valor total do carrinho de compras do usuário com a dada ID.GET /usuario/:id/pedido: Retorna todos os pedidos do usuário com a dada ID.POST /usuario/:id/pedido: Cria um novo pedido a partir do carrinho de compras do usuário, retornando a lista de pedidos do usuário atualizada.PUT /usuario/:id/pedidos/:idPedido/cancelar: Cancela o pedido com a dada ID, retornando a lista de pedidos do usuário atualizada.
Além desses endpoints, que são os diretamente relevantes à implementacão das features desse projeto, nós apresentamos também algumas endpoints auxiliares:
GET /login: Simula o processo de login de um usuário, sendo usada para permitir a demonstracão do fato de que o carrinho é individual.GET /usuario/:id: Pega o nome do usuário com a dada ID para que possa ser apresentado na interface.POST /configs: Permite que algumas configuracões de teste sejam definidas, como o comportamento esperado das APIs externas.
No servidor, nós temos dois tipos de testes sendo realizados: testes unitários e testes de endpoint. Os testes unitário estão associados as funcionalidades das duas principais classes: Carrinho e Pedido. Já os testes de endpoint testam se os códigos de status são os esperados.
Para rodar o servidor, basta entrar na pasta /server e executar o comando npm start. Isso requer, é claro, que as devidas dependências (detalhadas no arquivo package.json) estejam instaladas, o que pode ser feito com o comando npm install.
Os testes podem ser executados com npm test, com as mesmas condicões acima.
Além disso, o comando npm test:commit pode ser utilizado para testar apenas a versão que será criada com o próximo commit (ou seja, ele usa apenas as modificacões que estão na staging area do git para os testes, descartando temporariamente qualquer modificacão que não vá ser adicionada no commit).
Para o front-end foi utilizado a tecnologia do Vue.js conjuntamente com o Vuetify, que é uma biblioteca de UI que possui uma facilidade e liberdade na criação de we-bapps, VueRouter, a biblioteca oficial do Vue.js para navegação entre diferentes telas, e o Vuex, que é uma biblioteca de gerenciamento de estado.
Finalmente, para os testes foi utilizado o framework Cypress, que é uma ferramenta poderosa que possibilita a escrita de testes rápidos de maneira fácil e que são confiáveis.
Para acessar os recuros disponíveis no aplicativo, é necessário primeiro fazer um login simples, onde é pedido o nome de usuário. A partir disso podemos acessar a tela de pedidos e a tela de carrinho através dos botões presentes na navbar.
Para executar o aplicativo, precisamos primeiro instalar suas depedências através do npm install.
Após instalados as depedências, podemos executar o aplicativo através do comando npm run serve que iniciará o aplicativo no endereço padrão localhost:8080 (caso a porta 8080 esteja ocupada, esta será incrementada em 1, ou seja será localhost:8081).
Ao rodar os testes end-to-end, o front-end faz modificacões no servidor, de forma que este precisa ser reiniciado antes de uma segunda testagem.
Podemos executar os testes de duas maneiras:
npx cypress opennpm run tests:e2e
O primeiro comando npx cypress open irá executar o Cypress no modo GUI, caso queira executar todos os testes sem visualizar o que está acontecendo podemos executar o comando npx cypress run que executará todos os testes através do CLI.
O segundo comando npm run test:e2e irá iniciar o aplicativo em modo de produção e quando este estiver em execução, ira executar o Cypress em modo GUI. Caso queira executar todos os testes sem a GUI podemos passar a opção --headless ao comando.