Projeto E-commerce

Esse projeto foi um desafio proposto pelo curso Jovem Programador Senac módulo 3, que consiste em explorar um pouco do que aprendemos durante o curso englobando as principais stacks estudadas no curso.

Este trabalho era individual e o tema proposto pelo desafio era um E-commerce de uma loja de livros, para isso deveríamos usar o framework Django para desenvolver este projeto.

Basicamente este projeto deveria ter ao menos o seguinte:

Esses acima eram os requisitos mínimos do projeto.

Como pensei e desenvolvi esse projeto

Para fazer o Front End, eu utilizei o Bootstrap para aproveitar suas funcionalidades e também a responsividade.

Quanto ao conteúdo do site, fiz um cadastro básico de livros que é feito utilizando a interface administrativa do próprio Django. Criei também um cadastro de categorias para dividir os livros por categoria, pensando em facilitar as consultas.

Os principais campos de cadastro do livro são: 

Na barra de navegação coloquei o campo de pesquisa, onde é possível pesquisar por um termo e o sistema retorna se aquele termo está presente no título, autor, ou categoria.

Nesta barra de navegação também tem um pequeno menu com as categorias, onde, ao clicar em uma delas o sistema retornará todos os livros daquela categoria em uma lista.

Quando o usuário estiver autenticado, vai ter também um menu com algumas funções que o usuário pode fazer, sendo elas:

Além disso, nessa mesma barra de navegação terá também o ícone para o carrinho de compras, e a indicação de quantos itens estão no carrinho, e também a opção para fazer logout.

Barra de navegação sem o usuário logado
Barra de navegação com o usuário logado

Na página inicial coloquei um carrossel que mostra os cinco livros com a melhor média de classificação, e logo abaixo uma galeria com as  novidades, que são os oito últimos livros adicionados ao sistema.

Exemplo da tela inicial

Acessando o botão “mais títulos” no final da página inicial, vai abrir uma lista com todos os títulos cadastrados em ordem alfabética pelo título, com uma paginação apresentando 5 livros por página.

Exemplo da lista de produtos

Esse exemplo de tela também é a que aparece para as categorias, ou então para as consultas feitas pela barra de pesquisa.

Nessa lista aparecem as informações do livro como:

Selecionando algum item da lista, vai aparecer os dados detalhados desse item, como por exemplo, sua sinopse, sua média de avaliação, seu preço, se o produto está em estoque e também as opções de adicionar ao carrinho, deixar uma avaliação, ou ver todas as avaliações.

As avaliações podem ser anônimas caso a pessoa não queira se identificar, ou não esteja autenticada no sistema.

Se o produto não estiver em estoque não vai aparecer a opção de adicionar ao carrinho, ao invés disso vai aparecer a opção “Avise me quando estiver disponível”.

Exemplo da tela de informações do produto

Se o usuário não estiver devidamente autenticado e clicar em “Adicionar ao carrinho”, será direcionado a tela de login para fazer autenticação, e logo após, poderá retornar e adicionar o item ao seu carrinho, caso ele já esteja autenticado, poderá diretamente adicionar o item ao seu carrinho.

Carrinho de compras

Ao entrar na tela do carrinho, o usuário verá todos os itens adicionados em seu carrinho, tendo a possibilidade de adicionar, ou remover unidades daquele item, e também as opções de finalizar pedido ou adicionar mais produtos.

Ainda nesta tela, tem a opção de calcular o frete (como é apenas um trabalho didático, considerei como regra de negócio que o frete de cada livro custa R$ 4,99 e se comprar acima de 10 unidades, o frete é grátis).

Caso o usuário tente finalizar o pedido sem calcular o frete o sistema não vai permitir, solicitando que calcule o frete para prosseguir.

Exemplo da tela de carrinho de compras

Após calcular o frete já é possível finalizar o pedido, com isso, o usuário será direcionado para a tela de finalização do pedido.

Ao finalizar o pedido, caso o usuário não tenha nenhum endereço de entrega cadastrado, ele será redirecionado a tela de cadastro de endereço, e se já tiver algum endereço cadastrado, será direcionado para a tela de conclusão do pedido.

Caso ele queira adicionar um novo endereço de entrega, também haverá a opção nessa tela para cadastrar um novo endereço.

Exemplo da tela de seleção de endereço e forma de pagamento

Após isso, o usuário deverá selecionar o endereço de entrega que prefere, e também a forma de pagamento, e então será possível prosseguir para a última parte que é a finalização do pedido.

Nesta parte basta o usuário conferir se está tudo de acordo, caso não esteja ele pode retornar e fazer as correções necessárias, e se estiver tudo de acordo, basta confirmar a compra.

Exemplo da tela de confirmação da compra

Após isso, o sistema já vai dar baixa no estoque dos livros, e o usuário já poderá acessar no seu painel os dados de seus pedidos.

Conclusão final do projeto

Vale lembrar que como se trata de um projeto didático, foram abstraídas diversas funcionalidades que sei que um E-commerce de verdade deve ter.

O desafio era apenas a lógica básica de um E-commerce, com o carrinho de compras, os pedidos e o controle de estoque.

Foi um projeto bastante desafiador para um programador de nível inicial como eu, mas que serviu para colocar em prática e exercitar bastante a lógica de um E-commerce.

Neste projeto foi exercitado bastante a parte dos models e das views do Django, inclusive, como fiz deploy deste projeto em minha VPS, tive que utilizar o Cloudinary para hospedar as imagens das capas dos livros.

Vou postar abaixo um link para o deploy em minha VPS e também um link para o projeto no meu Github.