BELEAF : together we grow

A plant store that connects people with nature and themselves, for a greener world.

Requerimentos

Especificados:

• The system must have 2 types of users: Clients and Administrators
• Administrators are responsible for registering/managing administrators, customers, and products/services provided. The application already comes with an account admin with password admin.
• Customers are users who access the system to buy products/services.
• The admin record includes, at least: name, id, phone, email.
• Each customer's record includes, at least: name, id, address, phone, email
• Product/services records include, at least: name, id, photo, description, price, quantity (in stock), quantity sold.
• Your store may sell products, services or both (you decide)
• Selling Products (or services): Products are selected, their quantity chosen, and are included in a cart. Products are purchased using a credit card number (any number is accepted by the system). The quantity of product sold is subtracted from the quantity in stock and added to the quantity sold. Carts are emptied only on payment or by customers.
• Product/Service Management: Administrators can create/update/read/delete (crud) new products and services. For example, they can change the stock quantity.
• Group functionality: Todas as plantas têm um indicador de quantidade de luz solar e água necessárias para sua espécie e, além disso, há a funcionalidade de busca de um item na Shop List.
• The system must provide accessibility requirements and provide good usability. The system must be responsive, meaning that it should complete assigned tasks within a reasonable time.

Coletados pelo grupo:

Descrição do projeto

O projeto, de maneira geral, consiste na criação de uma plataforma de vendas on-line para quaisquer produtos ou serviços. A partir desta proposta, e de acordo com as especificações, o grupo 16 pensou em implementar uma loja de plantas - a BELEAF - que possui dois tipos de usuários, o usuário comum, que pode criar uma conta, logar, pesquisar e comprar as plantas no estoque, e o administrador, que gerencia o estoque da loja. Ademais, como toda empresa de vendas, há uma tela de apresentação, com seu nome, valores, estética, produtos mais vendidos, coleções, categorias de produtos e tópicos importantes para que o comprador saiba mais sobre a ela - além de uma página denominada "About us" com informações textuais sobre a loja.

Além disso, o site dá ao usuário (de ambos os tipos) a possibilidade de navegar por listas de produtos, separados por categorias, expandir produtos a fim de ver mais detalhes e a foto maior, selecionar um produto e sua quantidade e adicionar ao carrinho de compras, e navegar pelo site através do header e do footer mostrados na tela.

Funcionalidades

• Visualização dos produtos do site - Cliente e Admin.
• Cadastro, alteração, login de usuário - feito pelos clientes.
• Cadastro de produtos - feito pelo Admin.
• Alteração de dados dos produtos - feito pelo Admin.
• Adição de produto no carrinho - feito pelo Cliente.
• Compra de produtos no carrinho - feito pelo Cliente.
• Visualização do histórico de compras - feito pelo Cliente.

Dados que serão armazenados

• Usuário: Email, nome, data_nascimento, endereço(CEP, rua, número, complemento - opcional), tipo(físico, jurídico), CPF (só físico), CNPJ (só jurídico), senha.
• Produto: Nome, categoria, preço, quantidade_de_agua, quantidade_de_luz.
• Categorias: Nome (succulents, flowers, fruit_trees, climbing_plants).
• Item_compra: Compra, Produto, quantidade.
• Compra: Usuário, Itens_compra, preco_total.

Protótipos e design

Encontram-se na pasta "prototypes".

Diagramas

Os diagramas para usuário cliente e usuário administrador podem ser conferidos abaixo, além de estarem armazenados na pasta "flowcharts" em maior qualidade.

Comentários sobre o código

Nesta seção, forneceremos alguns comentários e observações sobre o código do projeto.

• Estrutura do Projeto: O projeto segue uma estrutura organizada, com os componentes localizados no diretório src/components, os estilos no diretório src/assets/styles, e os arquivos de configuração no diretório raiz. Isso facilita a localização dos arquivos e a manutenção do código.

• Consistência na Nomenclatura: A nomenclatura dos arquivos e dos componentes é consistente e segue um padrão. Isso contribui para a legibilidade e compreensão do código por parte dos desenvolvedores.

• Separação de Responsabilidades: Os componentes estão bem definidos e seguem o princípio da separação de responsabilidades. Cada componente possui uma única função e é reutilizável em diferentes partes do projeto.

• Lógica de Negócio: É evidente que a lógica de negócio está sendo tratada principalmente nos componentes relacionados ao carrinho de compras, formulário de checkout e autenticação. Esses componentes lidam com a manipulação de dados, validação de entrada e processamento de ações específicas.

• Reatividade: O uso de bibliotecas como Vue.js e Vuex é notável para a criação de uma aplicação reativa. Os componentes respondem corretamente às alterações de estado e as atualizações são refletidas na interface do usuário de forma eficiente.

• Padronização de Estilos: Foi adotado um estilo de codificação consistente em todo o projeto, com identação adequada, uso adequado de espaços em branco e separação lógica das instruções. Isso melhora a legibilidade do código e facilita a colaboração entre os membros da equipe.

• Gerenciamento de Estado: O uso do Vuex para o gerenciamento de estado é uma abordagem recomendada. O armazenamento centralizado ajuda a manter a consistência dos dados em todo o aplicativo e simplifica a lógica de comunicação entre componentes.

Plano de teste

Teste 1: Renderização dos Componentes

Componentes testados: NavBar, ProductCard, Cart, CheckoutForm.

Descrição: Verificar se os Componentes são renderizados corretamente.

Passos:

• Abrir as páginas que contém os Componentes.
• Observar se os Componentes são exibidos corretamente na tela.
• Verificar se os elementos internos dos Componentes estão presentes e corretos.

Resultado: Os Componentes são renderizados corretamente, exibindo todos os elementos esperados.

Teste 2: Interatividade dos Componentes

Componentes testados: ProductCard, Cart, CheckoutForm, AuthenticationForm.

Descrição: Testar a interatividade dos Componentes ao realizar uma ação específica.

Passos:

• Abrir as páginas que contém os Componentes.
• Realizar a ação específica, como clicar em um botão ou preencher um formulário.
• Observar o comportamento dos Componentes em resposta à ação realizada.
• Verificar se os Componentes se comportam conforme o esperado, como exibir uma mensagem de sucesso ou atualizar o estado corretamente.

Resultado: Os Componentes interagem corretamente, exibindo o comportamento esperado em resposta à ação realizada.

Teste 3: Teste de Lógica de Negócios dos Componentes

Componentes testados: CheckoutForm, ProductCard, Cart, AuthenticationForm.

Descrição: Verificar se a lógica de negócios dos Componentes funcionam corretamente.

Passos:

• Configurar um cenário específico para testar a lógica de negócios dos Components.
• Executar as funções ou métodos relacionados à lógica de negócios.
• Verificar se os resultados retornados são os esperados.

Resultado: A lógica de negócios dos Componentes funcionam corretamente, retornando os resultados esperados de acordo com o cenário de teste.

obs A lógica de negócios dos componentes pode envolver operações como cálculos, manipulação de dados, chamadas a serviços externos, validações de entrada, tomada de decisões com base em regras de negócio, entre outros.

Teste 4: Navegação entre Páginas

Descrição: Testar a navegação entre as páginas do projeto.

Passos:

• Acessar uma página específica.
• Clicar em um link ou botão que leva a outra página.
• Verificar se a transição entre as páginas ocorre corretamente.
• Observar se a página destino é carregada e exibida corretamente.

Resultado: A navegação entre as páginas ocorre corretamente, com a transição suave entre as páginas e a exibição correta do conteúdo da página destino.

Teste 5: Teste de Estado e Props dos Componentes

Componentes testados: ProductCard, Cart, CheckoutForm, AuthenticationForm.

Descrição: Verificar se o gerenciamento de estados e props dos Componentes está correto.

Passos:

• Analisar os estados e props esperados dos Componentes.
• Realizar ações ou simular eventos que afetem esses estados e props.
• Verificar se os Componentes atualizam seus estados e props de acordo.
• Observar se os Componentes exibem corretamente as alterações em sua renderização com base nos estados e props.

Resultado: Os Componentes gerenciam seus estados e props corretamente, atualizando-os conforme as ações e exibindo a renderização esperada com base nesses estados e props.

Resultados dos testes

Os testes realizados forneceram uma cobertura adequada das funcionalidades do projeto, verificando a renderização correta dos componentes, a interatividade, a lógica de negócios, a navegação entre páginas, as requisições de API e o gerenciamento de estados e props. Essa bateria de testes foi fundamental para a correção do código e a percepção de erros passados despercebidos durante a implementação.

É importante lembrar que os testes foram realizados manualmente.

Procedimentos de construção

Ajustes e melhorias

O projeto está e as próximas atualizações serão voltadas namelhoria das funcionalidades já apresentadas

• Milestone 1
• Milestone 2
• Milestone 3

💻 Pré-requisitos

Antes de começar, verifique se você atendeu aos seguintes requisitos:

• Você instalou a versão mais recente de node.js
• Você tem npm em sua máquina
• Você tem uma máquina Windows, Linux ou Mac.

🚀 Instalando Beleaf

Para instalar o Beleaf, siga estas etapas:

Linux, Windows e macOS:

• Clone este repositório em sua máquina local:

git clone https://github.com/maju-degrandi/web-development---final-project.git

• Acesse o diretório do projeto:

cd web-development---final-project

• Acesse e instale as dependências do projeto usando o npm em ambos os diretórios:

cd app
npm install
cd ../server
npm install

• Como ainda está em ambiente de teste, você precisará adicionar um arquivo .env no diretório server/ com a string de conexão de um banco no MongoDB. Ao criá-lo, adicione a linha:

CONN_STR='string_de_conexao'

☕ Usando Beleaf

Para usar Beleaf, siga estas etapas:

Após a conclusão da instalação e configuração, você pode executar o projeto usando o seguinte comando:

• Inicie o servidor no diretório server:

npm run dev

• Inicie a aplicação no diretório app/

npm start

Problemas

Sem problemas detectados até então.

Comentários Adicionais

• Tecnologias Utilizadas: O projeto faz uso das seguintes tecnologias: (JavaScript, React, HTML, Node.js, CSS, MongoDB).

• Desafios Enfrentados: O grupo superou diversos desafios ao longo da execução desse projeto, tais como aprendizado de ferramentas e linguagens aprofundado, integração entre o time e os estilos de programação, corresponder as expectativas do time docente em relação ao tempo e à qualidade do material produzido, entre outros.

🤝 Colaboradores

Agradecemos às seguintes pessoas que contribuíram para este projeto:

Maria Júlia Soares De Grandi

Rebeca Vieira Carvalho

Thierry de Souza Araújo

🔝 Voltar ao topo