RAM Ranch
Projeto para a matéria SSC0219 - Introdução ao desenvolvimento web.
Requisitos
-
O sistema deve ter 2 tipos de usuários:
- Administradores:
- Registrar/Editar/Deletar usuários.
- Registrar/Editar/Deletar produtos.
- O sistema, por padrão, deve ter uma conta de administrador admin@ramranch.com, prédefina com senha admin.
- Clientes:
- Criar uma conta.
- Comprar produtos.
- Administradores:
-
Listagem de produtos:
- Deve ser possivel filtrar os produtos, para facilitar achar o tipo de RAM desejado:
- Funcionalidade específica
- Tipo de memória, ex: SDRAM, DRR, DDR2, DDR3, LPDDR3, DDR4, etc.
- Formato do módulo, ex: SODIMM, DIMM.
- Capacidade, ex: 16 GB;
- Frequência, ex: 1866Mhz.
- Deve ser possivel filtrar os produtos, para facilitar achar o tipo de RAM desejado:
-
Venda de produtos:
- Clientes podem escolher produtos, os quais são adicionados a um carrinho.
- Clientes podem alterar a quantidade de um produto no carrinho.
- Clientes podem remover produtos do carrinho.
- Clientes podem esvaziar o carrinho manualmente.
- A compra deve ser concluída usando um cartão de crédito.
- O carrinho deve ser esvaziado depois de uma conclusão de compra.
-
Gerenciamento de produtos:
- Administradores podem adicionar, editar e remover produtos.
- Produtos contém os seguintes dados:
- id
- nome
- descrição
- foto
- preço
- quantidade estoque
- quantidade vendida
- tipo de memória
- formato do módulo
- capacidade
- frenquencia
-
Gerenciamento de usuarios:
- Clientes pode registrar contas.
- Administradores podem adicionar, editar e remover usuários.
- Todo usuário contém os seguintes dados:
- id
- senha
- nome
- telefone
- Adicionalmente clientes tem o seguinte campo:
- endereço
-
O sistema deve ser acessivel e ter boa usuabilidade.
-
O sistema deve ser responsivo.
Descrição do projeto
RAM Ranch é uma loja especializada em vender módulos de memória RAM dos mais variados tipos.
Comentários sobre o código
O código do frontend está localizado na pasta frontend. Foi utilizado a api IndexedDB do browser para a persistencia dos usuários e produtos. Existe uma conta de administrador com email admin e senha admin, mas outras contas podem ser cadastradas. Não foi implementada ainda a funcionalidade de filtros, devido a falta de suporte da IndexedDB para queries complexas.
Estrutura:
- frontend/public/index.html - A página que contém o React.
- frontend/src/index.js - O script principal, inicializa a DB e transfere controle ao React.
- frontend/src/App.scss - Contém o tema do materialize, bugfixes ao materialize e estilos novos usados em todo app.
- frontend/src/components - Contém todos componentes React.
- frontend/src/model - Contém as estruturas que representam os dados da aplicação.
- frontend/src/repository - Contém as classe que permitem acesso aos modelos.
Plano de teste
Manualmente checar utilizando um navegador que:
- Todas páginas renderizam como esperado.
- Não há erros ou avisos no console.
Automaticamente, em cada commit:
- Rodar uma build completa via Github Actions.
- Se a build concluir com sucesso, fazer o deploy no servidor.
Procedimento de compilação
Para rodar a aplicação.
docker-compose -f docker-compose-yml up -d --build
firefox localhost:3002
Para parar a aplicação.
docker-compose -f docker-compose-yml down
Problemas enfrentados
O materialize não é atualizado desde de 2018, o que causou dificuldades de resolver versões de dependencias, e não integra bem com o react devido ao uso de jQuery.
Comentários
Mockups(desenho) das telas, e o diagrama de navegação podem ser encontrados no arquivo: Mockups.pdf