- Lucas Romero - 11219154
- Larissa Freire - 11207731
- Otto Fernandes - 11275130
- O sistema deve ter 2 tipos de usuários: Clientes e Administradores
- Os administradores são responsáveis por registrar/gerenciar administradores, clientes e produtos/serviços fornecidos. O aplicativo já vem com um administrador de conta com senha admin.
- Clientes são usuários que acessam o sistema para comprar produtos/serviços.
- O registro do administrador inclui, pelo menos: nome, id, telefone, e-mail.
- O registro de cada cliente inclui, pelo menos: nome, id, endereço, telefone, e-mail
- Os registros de produtos/serviços incluem, no mínimo: nome, id, foto, descrição, preço, quantidade (em estoque), quantidade vendida.
- Sua loja pode vender produtos, serviços ou ambos (você decide)
- Venda de produtos (ou serviços): os produtos são selecionados, sua quantidade escolhida e são incluídos em um carrinho. Os produtos são comprados usando um número de cartão de crédito (qualquer número é aceito pelo sistema). A quantidade de produto vendida é subtraída da quantidade em estoque e adicionada à quantidade vendida. Os carrinhos são esvaziados somente mediante pagamento ou pelos clientes.
- Gerenciamento de produto/serviço: Os administradores podem criar/atualizar/ler/excluir (crud) novos produtos e serviços. Por exemplo, eles podem alterar a quantidade em estoque.
- O sistema deve fornecer requisitos de acessibilidade e boa usabilidade. O sistema deve ser responsivo.
- Nossa funcionalidade: Para os clientes mais frequentes nas compras, são enviados cupons de desconto em novas compras.
Decidimos implementar uma loja online de comidas e lanches de São Carlos. A funcionalidade é semelhante a do iFood, e a interface lembra bastante a navegação da Amazon. Conforme indicam os requisitos, teremos dois tipos de usuários, os clientes e os administradores. O cliente não precisa logar no site para navegar, apenas para finalizar a compra. Nas páginas dos lanches, o cliente pode visualiar informações sobre os produtos, como nome, preço e local de venda. Pode selecionar a quantidade, e colocar observações para o restaurante/lanchonete sobre seu pedido. Além disso, a administração pode, em sua interface, realizar todas as operações descritas nos requisitos sobre lanches: visualizar, atualizar, criar ou excluir. Finalmente, nos esforçamos para dar ao usuário final uma boa usabilidaede e interfaces responsivas. Esperamos que gostem :)
A navegação de páginas pode ser visualizada nesse link, no Figma.
A tela inicial mostra uma série de refeições que o cliente pode comprar, e clicar em cada imagem leva o usuário à página do produto. Lá, é possível ver mais informações sobre aquele produto - ou lanche - como preço, local do restaurante/lanchonete, descrição e comentários de outros usuários. Na página inicial, também podemos fazer uma pesquisa na barra superior, e chegamos à tela de produtos. Clicando em um produto, somos guiados à tela de produto.
Podemos acessar também as telas de cadastro e login, como mostra o diagrama.
A administração acessa sua tela de login por uma nova URL. Após logar, é mostrada uma tela onde pode pesquisar e acessar cada produto e fazer as devidas modificações. Também pode excluir um lanche e criar um novo, conforme os requisitos.
Além disso, pretendemos salvar no servidor:
- Informações sobre o cliente, como nome, endereço e histórico de compras;
- Informações sobre os produtos, como nome, estabelecimento que o produz e preço;
Nenhum comentário
Testamos nosso front-end usando a framework para teste de JavaScript Jest.
Testamos a maioria das páginas e componentes descartando páginas simplistas como de login e cadastro.
Todos os códigos dos testes feitos se encontram anexados em arquivos do tipo "test" nas pastas das páginas e componentes nos quais os testes foram realizados.
Caso queira testar é só executar o comando: npm test, no próprio terminal
Os testes para o backend foram realizados usando o PostMan e os arquivos com os testes se encontram na pasta PostMan_Backend com seus respectivos resultados.
Todos os testes realizados para o frontend deram resultado positivo, como ilustra o print abaixo mostrando a realização de 32 testes em 13 pastas distintas correspondentes aos componentes e páginas do app.
Para visualizar os resultados dos testes para o backend acesse o diretório PostMan_Backend onde se encontram as requisições e respostas para as funcionalidades do backend. Todos apresentaram resultados bem sucedidos com retornos esperados das requisições get, post, put e delete para a api.
Para rodar o projeto basta baixar esse repositório (ou cloná-lo na sua máquina).
Você pode baixar o yarn e o npm com seu gerenciador de pacotes padrão.
Para iniciar a aplicação vá ao diretório principal do projeto, o trab_web e de lá acesse a pasta backend com o comando "cd backend"
Para inciar o Backend basta rodar o comendo "sudo yarn dev"
Em outra aba do terminal rode o frontend na pasta "frontend" acessando pelo comendo "cd frontend" a partir do diretório principal "trab_web"
Para iniciar o frontend instale as dependências executando o comando nesse mesmo diretório: "npm install" e em seguida "yarn start"
Após isso basta abrir no seu browser uma guia no localhost da porta padrão 3000, e assim você poderá ver a aplicação em execução. Se quiser acessar alguma página manualmente digite no broser seu caminho: Exemplo para a página de login: http://localhost:3000/login
Você pode encontrar o caminho para todas as páginas acessando trab_web/frontend/src/routes.js
O protótipo do deploy se encontra no link: deploy, mas o deploy no heroku está desatualizado em relção ao que se encontra aqui no github.
(FirstMilestone) Já tivemos problemas relacionados à responsividade do nosso protótipo e com o aprendizado rápido de frameworks de css. O segundo fator impacta no primeiro, fazendo com que a tela principal tenha divergências em relação ao protótipo no Figma. Para o próximo milestone, esperamos ter resolvido esse problema, dominando os frameworks de front-end e dedicando mais tempo à usabilidade das nossas páginas.
(Second Milestone)
- Problemas detectados no First Milestone foram resolvidos.
- Dinâmica da apresentação e busca dos produtos e das informações solicitas ao servidor foram implementadas com exemplos simplistas e repetitivos no próprio código para simular a ação do servidor.