Trabalho da disciplina Introdução ao Desenvolvimento Web - SCC0219
- Joao Pedro Favoretti (Nusp: 11316055)
- Lucas Pilla Pimentel (Nusp: 10633328)
- Luiz Fernando Santos (Nusp: 10892680)
- O sistema deve ter dois tipos de usuário:
- Administradores: São responsáveis por gerenciar administradores, clientes e podutos. Para utilizar a conta de administrador, utilize as credenciais
admin@admin.com:adminno formato (email:senha) - Clientes: São usuários que acessam o sistema para comprar produtos.
- Administradores: São responsáveis por gerenciar administradores, clientes e podutos. Para utilizar a conta de administrador, utilize as credenciais
- Para armazenar os dados é preciso ter os seguintes registros:
- admin: id, nome, telefone e email;
- cliente: id, nome, endereço, telefone e email;
- produto: id, nome, foto, descrição, preço, quantidade em estoque e quantidade vendida;
- Específico - receita: id, nome, foto, ingredientes e descricao;
- Carrinho: "estrutura" onde os usuários devem adicionar os produtos que desejam comprar, e então prosseguir para o checkout.
- Checkout: O sistema deve solicitar pelo cartão de crédito e senha do cliente. Conclui-se a compra e esvazia o carrinho.
- O carrinho pode ser esvaziado apenas após o pagamento ou pelo cliente.
- Gerenciamento dos produtos: administradores podem criar/atualizar/ler/deletar algum produto. Por exemplo, mudar a quantidade em estoque.
- Funcionalidade específica: Ao acessar os detalhes do produto, o cliente pode ver uma descricao com nomes de possíveis receitas para se fazer com aquele ingrediente, assim como um video no Youtube de uma receita sendo feita.
- O sistema deve atender os requisitos de acessibilidade e prover boa usabilidade. Além disso o sistema deve ser responsivo.
Esse projeto consiste no desenvolvimento de uma aplicação online para uma loja de ingredientes, a qual terá algumas funcionalidades:
- Login e cadastro
- Cliente pode dicionar ou remover produtos do carrinho
- Processo de checkout
- Opções para gerenciamento de clientes e produtos exclusivas para administradores.
- Funcionaliade específica dessa aplicação: Ao clicar para visualizar um ingrediente do site, o cliente poderá ver sugestões de possíveis receitas para fazer com o ingrediente. Além de ser direcionado à um video no Youtube sobre a receita caso exista.
A fim de atender essas funcionalidades será necessário guardar informações referente a(o):
- admin: id, nome, telefone e email;
- cliente: id, nome, endereço, telefone e email;
- produto: id, nome, foto, descrição, preço, quantidade em estoque e quantidade vendida;
- receita: id, nome, foto, ingredientes e descrição;
O diagrama de navegação da aplicação com as páginas desenvolvidas pode ser visto na seguinte imagem:
Para visualizar as páginas estáticas implementadas para prototipação, é possível utilizar os seguintes links:
Código relacionado ao frontend está dentro da pasta frontend.
Código relacionado ao backend está dentro da pasta backend.
Código relacionado ao banco de dados esta dentro da pasta mongo.
A estrutura de pastas do projeto:
Para deixar o código padronizado, usamos a seguinte estrutura de pastas no projeto:
- public: Arquivos para configurar a aplicação em Vue (index.html e favicon.ico)
- src: Arquivos usados para criar o conteudo do site
- assets: Contem arquivos estaticos do projeto (No nosso caso só possui a imagem que usamos para nossa loja)
- components: Componentes principais que usamos pelo projeto todo.
- plugins: Arquivos de configurações de plugins
- router: Possui arquivo para configuração de rotas
- services: Pasta que futuramente ficará as URIs de serviços que faremos usando o backend
- shared: Arquivos compartilhados pelo código, como filtros, styles, validations, etc..
- store: Onde ficaram os módulos que usamos nas telas.
- views: Arquivos considerados telas principais do site, tal como Inicio, Carrinho e Painel do Administrador.
Além disso, vale comentar que por baixo das telas da pasta views, criamos um arquivo chamado DashboardLayout.vue para servir como root("/") do nosso objeto de rotas. E foi assim que fizemos as transições por meio do Navigation Drawer da tela.
A estrutura de pastas do projeto:
- db: Dentro da pasta db, temos os arquivos usados como Schema para usar o banco de dados
- index.js: Arquivo de configuração do banco de dados
- product.js: Arquivo para configuração dos produtos do site
- user.js: Arquivo para configurar os schemas dos usuarios cadastrados no site
- index.js: Arquivo com as rotas utilizadas no backend
Como para utilizar o banco, é necessário que se efetue uma serie de comandos, utilizamos a ferramenta do docker para facilitar o processo.
Dentro da pasta /mongo/ temos o arquivo docker-compose.yaml utilizado para rodar o banco de dados.
No plano de testes utilizado não foi utilizado nenhuma biblioteca de testes unitários. Os testes foram realizados na mão nos campos de entrada. Para sanar todos os casos possíveis nos campos de input, usamos a biblioteca "yup" para validar as entradas "on blur" e mascaras para não permitir que o campo seja preenchido da forma indevida.
Um exemplo de validação é o formulario de login do site. No campo de e-mail, é exigido que o formato do e-mail seja valido, caso o contrário o botão de "Entrar" não é habilitado. Do mesmo modo o campo de senha espera uma senha de 6 digitos sem caracteres alfabeticos (Usamos uma máscara no campo para não permitir que caracteres alfabeticos sejam utilizados).
Os demais campos pelo site tem suas devidas validações e mascaras quando necessário.
Para rodar o site na sua máquina, você deve ter o Node e o gerenciador de pacotes npm instalado na sua máquina. Caso você não tenha, faça o download pelo site oficial, de acordo com o seu sistema operacional.
Para rodar o banco de dados, achamos que ficou muito mais facil utilizar o docker-compose. Para isso, é necessário que, para rodar o projeto, tenha o docker-compose instalado na máquina. Utilizando esse link, e seguindo os passos do site, é bem trivial realizar a instalação. Para qualquer dúvida durante a instalação, os membros do grupo estão disponíveis para ajudar por e-mail ou Telegram.
* É essencial rodar o banco de dados antes de rodar o projeto do frontend e do backend
Com o Docker-compose instalado, entre no diretório /mongo/. Para rodar o banco de dados utilize o comando:
docker-compose up
Após ter o npm instalado, entre no diretório /frontend/ e utilize o seguinte comando para instalar todas as dependencias do frontend:
npm install
Após instalar as dependencias do projeto, para rodar a aplicação utilize o comando:
npm run serve
Também com o npm instalado, entre no diretório /backend/ e utilize o seguinte comando para instalar todas as dependencias do backend:
npm install
Após instalar as dependencias do projeto, para rodar a apliação utilize o comando:
npm run dev
Assim, depois que o processo terminar, utilize seu navegador para acessar o endereço localhost:8080 e acessar o site.
Por conta de problemas de tempo, não conseguimos fazer todas as features que planejamos para o projeto.
Os códigos para as páginas estáticas implementadas:
Além disso, é possivel baixar o arquivo Website-Prototype.fig e importar direto pelo software do Figma para ver o projeto pelo próprio aplicativo.
Imagens (.PNG) de todos os componentes desenvolvidos no Figma estão salvos na pasta /Mockup/images-mockup onde também podem ser visualizados.
Ao rodar primeiramente o projeto, o banco de dados estará vazio. Somente será possível logar com as credenciais de administrador (admin@admin.com:admin).
Para criar novos usuários, basta criar uma nova conta pelo site. Do mesmo modo para adicionar novos produtos, basta adicionar-los utilizando o Painel Adiministrador no usuario admin.