O website da Estofados Bech é um e-commerce desenvolvido a fim de estudos. Nele é possível realizar a compra de diversos artigos vendidos pela Loja e Estofados Bech, tais como sofás, cadeiras e tecidos. O pagamento é realizado através do Mercado Pago, e a única ação que necessita ser feita antes da compra é a criação de uma conta no website.
Este site foi desenvolvido em 2020 durante a pandemia do coronavírus. Como eu estava com tempo livre, pois as aulas estavam paralisadas, resolvi estudar um pouco sobre desenvolvimento web. Então, após estudar o básico sobre ReactJS e Node.js, surgiu a ideia de criar um e-commerce, com o intuito de me desafiar e tentar desenvolver novas habilidades. O site começou a ser desenvolvido sob o nome de "Meu Website" porém, após comentar com um amigo que eu estava desenvolvendo um e-commerce, ele sugeriu que eu tentasse desenvolver um website para a loja da família dele, a Estofados Bech. De início já gostei da ideia, pois não precisaria desenvolver algo tão genérico, e no fim talvez o trabalho pudesse ser aproveitado e utilizado numa aplicação real. Entretanto, atualmente o website serve apenas a fim de estudos.
Atualmente o website tem uma versão de demonstração, com o seu back-end hospedado no Heroku e o front-end hospedado na Netlify. Para testar essa versão basta acessar o site https://estofadosbech.gabriellinke.dev.br. Para ter acesso a uma conta com permissões de administrador, entre em contato com o desenvolvedor. Uma explicação sobre o funcionamento pode ser encontrada a seguir.
Esta seção é destinada para explicar o funcionamento do Website. Ela será dividida em duas sub-seções, mostrando o website na perspectiva de um usuário e na perspectiva do administrador do Website.
Ao acessar o website, o usuário se depara com a Home page. Ele pode navegar livremente pelo site, entretanto, sem ter criado uma conta ele não será capaz de fazer compras. Para criar a conta basta utilizar o botão "Cadastre-se ou faça seu login" que se encontra no canto superior direito da tela.
Figura 1: Cadastre-se ou faça seu login.
Após clicar no botão, o usuário é redirecionado para a página de login. Se ele já tiver uma conta, basta inserir seu email e senha para realizar o login. No entanto, se ele ainda não tem uma conta cadastrada no website, basta clicar no botão "Criar conta".
Figura 2: Página de login com botão para criar conta.
Na nova página que se abre, o usuário precisa preencher seus dados e após isso clicar no botão de "Cadastrar-se". É importante salientar que ao realizar o cadastro o usuário está concordando com os Termos de uso e a Política de privacidade do website, que podem ser acessados através dos links presentes abaixo do formulário de cadastro.
Figura 3: Página de cadastro.
Agora, com a conta cadastrada, é possível realizar o login. Entretanto, não será possível fazer login se o usuário tiver esquecido da sua senha. Para estes casos existe o botão de "Esqueci minha senha". Ao clicar nele, o usuário é redirecionado para uma página onde ele deve inserir seu email e pedir a sua recuperação de senha.
Figura 4: Botão "Esqueci minha senha".
Figura 5: Formulário para recuperação de senha
Em alguns instantes, um email para recuperação da senha será enviado para o endereço de email informado no formulário. Esse email contém um link, que leva o usuário a uma página em que ele pode redefinir sua senha.
Figura 6: Email para recuperação de senha.
Figura 7: Formulário para alterar senha.
Existem diversas formas de navegação pelo site, e a primeira a ser mostrada é a navegação através do cabeçalho. No canto superior esquerdo existem 3 botões: o botão de "Home", que faz com que o usuário seja redirecionado para a Home, o botão de "Quem somos" que redireciona o usuário para uma página que mostra uma imagem, a localização e um breve texto sobre a loja, e o botão de "Contato", que redireciona para uma página com informações de contato, links para as redes sociais e um formulário para envio de mensagens.
Figura 8: Botões para navegação.
Figura 9: Página de Quem somos.
Figura 10: Página de Contato.
Para facilitar o contato do usuário com a loja, a página de contato dispõe de um formulário para envio de mensagens. Assim, o usuário pode mandar uma mensagem para a loja sem precisar sair do website. Para isso, basta preencher o seu nome, um email para onde pode ser enviada uma resposta, opcionalmente um telefone para contato e a mensagem em si.
Figura 11: Formulário para envio de mensagens através do site.
Figura 12: Demonstração de como a mensagem é recebida no email do administrador.
A próxima navegação é em procura dos produtos, e ela começa na Home page. Ao entrar na Home page é possível observar imagens de reformas de estofados feitas pela Estofados Bech. O usuário pode pedir uma reforma entrando em contato com a loja. Abaixo das imagens de reformas, podem ser encontrados todos os produtos cadastrados no website. Estes podem ser ordenados por ordem alfabética ou por ordem de preço.
Figura 13: Produtos na Home page.
Além de encontrar os produtos pela Home page também é possível filtrar a busca por produtos, e para isso existem dois métodos. O primeiro deles é encontrando os produtos através das categorias, que podem ser localizadas na parte inferior do cabeçalho. Ademais, também existe a possibilidade de realizar a busca por um produto utilizando a barra de pesquisa, localizada na parte central do cabeçalho.
Figura 14: Categoria de cadeiras.
Figura 15: Resultado da pesquisa por preta.
Após o usuário realizar as pesquisas e encontrar os produtos que deseja comprar, está na hora de iniciar as compras!
Para isso, o usuário primeiramente precisa clicar sobre o produto em que ele está interessado. Então, se abrirá a página de informações do produto. Nela o usuário pode visualizar todas as fotos do produto, a descrição do produto, e quantas unidades estão no estoque. Nessa página também há uma área onde o usuário pode inserir seu CEP e calcular o preço do frete daquele produto. Além disso, também estão presentes nessa página os botões para adicionar o produto ao carrinho e de continuar a compra.
Figura 16: Página do produto.
Se, na página do produto, o usuário clicar em "Adicionar ao carrinho" o produto será adicionado ao carrinho, que pode ser acessado clicando no ícone de carrinho, no canto superior direito da tela.
Figura 17: Ícone para acessar o carrinho e botão para adicionar produto ao carrinho.
Agora no carrinho, o usuário pode modificar a quantidade que ele deseja comprar, assim como pode remover o produto do carrinho. O carrinho pode ter um número ilimitado de produtos.
Figura 18: Carrinho do usuário.
Após definir os produtos que serão comprados, está na hora de fazer o pedido. É possível comprar apenas um produto, clicando em "Comprar" na página do produto. Porém, se o usuário quiser comprar mais de um produto, basta adicionar todos eles ao carrinho, e clicar em "Continuar a compra".
Figura 19: Comprando um produto.
Figura 20: Comprando pelo carrinho.
O próximo passo é completar um formulário com as informações pessoais e com o endereço de entrega dos produtos.
OBS: A compra de produtos no website tem o processamento do pagamento feito através do Mercado Pago, para que assim, o cliente possa ter uma maior segurança no seu pagamento. Atualmente, a conta vinculada para receber os pagamentos é uma conta de testes, dessa forma, para que seja possível simular uma compra, é necessário que o usuário abra o link do Mercado Pago em uma guia anônima ou em um navegador que não tenha nenhuma conta do Mercado Livre logada. Além disso, o email utilizado no formulário deve ser o email de uma conta de testes. Tente utilizar este email: [email protected]. Se houver algum problema, contate o desenvolvedor.
Figura 21: Formulário para realizar a compra.
Após submeter o formulário, o usuário é redirecionado para uma página onde deve conferir seus dados, os preços dos produtos e o preço do frete, antes de prosseguir para o pagamento.
Figura 22: Página para confirmação dos dados.
Ao clicar em "Pagar com Mercado Pago" o usuário é redirecionado para a página de pagamento do Mercado Pago. Nela estarão disponíveis diversas formas de pagamento. Também é possível que o usuário esteja em um navegador com uma conta do Mercado Livre logada ou tenha completado o formulário com uma conta que não é de testes. Nesse caso, aparecerá uma mensagem de erro, pois a conta vinculada ao Mercado Pago é uma conta de testes.
Figura 23: Página do Mercado Pago.
Figura 24: Página de erro.
Uma vez na página do Mercado Pago, é necessário escolher uma forma de pagamento. Nesse exemplo será utilizado o pagamento com cartão de crédito. Para testar o pagamento com cartão de crédito, utilize os cartões de teste do Mercado Pago.
Após selecionar o cartão como método de pagamento, preencha as informações com um cartão de teste. Após isso, continue o preenchimento dos formulários, confirme os dados e faça o pagamento
Figura 25: Preenchendo o formulário com os dados do cartão.
Figura 26: Confirmando pagamento.
Em alguns instantes o pagamento é aprovado e após alguns segundos o usuário é redirecionado de volta para o site da Estofados Bech. Após voltar para o site, há uma explicação de como o usuário poderá acompanhar a sua compra pelo site.
Figura 27: Pagamento aprovado.
Figura 28: Procedimentos após a compra.
O menu do usuário é o local onde o usuário pode verificar o andamento das suas compras e também alterar sua senha. Ele pode ser acessado clicando na imagem do usuário, ao lado do ícone de carrinho, no canto superior direito.
Figura 29: Ícone para acessar o menu do usuário.
Ao abrir o menu, o usuário tem três opções para navegar: a primeira delas é a de Acompanhar compras, onde o usuário pode verificar suas últimas compras e obter o código de rastreamento dos correios. A segunda é o Histórico de compras, onde o usuário pode observar todas as compras já realizadas no site, bem como a data da compra. A última das opções é a de Alterar senha, onde a única informação necessária para realizar a alteração é a senha atual.
Figura 30: Página para acompanhar compra.
Figura 31: Página do histórico de compra.
Figura 32: Página para alterar senha.
Ao logar no site com uma conta de administrador, novas funções são liberadas. A primeira delas é a de cadastrar produtos. Para isso, o administrador precisa clicar no ícone de "Novo produto" presente no cabeçalho. Então, ele será redirecionado para a página de cadastro do produto. Nessa página, é necessário preencher os principais dados do produto, como o nome o valor e a quantidade, adicionar uma foto do produto, além de ter que inserir as dimensões do produto, para que assim seja possível fazer o cálculo do frete.
Figura 33: Botão para criar produto.
Figura 34: Formulário para cadastro de produtos.
Além disso, também é possível alterar as informações de um produto já cadastrado. Para isso, basta clicar sobre o produto que se deseja alterar. Então, na página que se abre, é possível adicionar e remover fotos do produto, adicionar e remover descrições, alterar o nome, preço, quantidade disponível e quantidade de parcelas permitidas no cartão. Também há a possibilidade de excluir o produto.
Figura 35: Modificando produto.
Figura 36: Modificando produto: parte 2.
Quando um usuário concluir uma compra, um email será recebido. Esse email engloba as informações do comprador, além de conter o endereço onde o produto deve ser entregue. É importante salientar que, antes de enviar o produto, é necessário verificar a compra no Mercado Pago, pois pode ser que o pagamento ainda não tenha sido aprovado.
Figura 37: Email informando sobre uma possível compra.
Para verificar o andamento das compras, primeiro é necessário logar no Mercado Pago. Após ter efetuado o login, se abrirá a página de Atividades, onde constam todos os pedidos. Além dos pedidos, também é possível verificar o status do pagamento, se está pendente ou se foi aprovado. Ao clicar sobre um pedido com pagamento pendente, é possível observar todas as informações da compra, entretanto, há um aviso para não enviar o produto antes do pagamento ter sido aprovado. Ao clicar em um produto com o pagamento já aprovado, é possível observar os detalhes do pedido, além do email do comprador. Com esses dados em conjunto com os do email, já é possível fazer o envio dos produtos.
Figura 38: Página de Atividades contendo todos os pedidos.
Figura 39: Detalhes de um pedido com pagamento pendente.
Figura 40: Detalhes de um pedido com pagamento aprovado.
Assim que o pagamento tiver sido aprovado, é necessário iniciar o processo de envio. Para isso, o administrador verifica o email do processo de compra e separa os produtos que foram comprados. Após isso, é preciso o deslocamento até uma agência dos correios. Lá os objetos deverão ser postados com destino ao endereço presente no email. Após a postagem, o código de rastreamento deve ser guardado para os próximos procedimentos.
O próximo passo é informar o comprador que os objetos estão a caminho. Para isso, o administrador deve enviar um email para o endereço de email que o usuário deixou como contato, informando que a compra está a caminho e deixando a disposição o código de rastreamento. Além disso, é necessário cadastrar a compra no website, para que o usuário também possa ter acesso a esses dados através do site. Para realizar essa ação, o administrador precisa clicar no ícone para abrir o menu do usuário. Então, ele deve dirigir-se à aba de "Cadastrar produto para acompanhamento". Uma vez nessa página, ele cadastra os produtos usando o email da conta do usuário, a data da compra, o código de rastreamento, o id do produto e a quantidade comprada (todos esses dados estão presentes no email da compra). Nesse mesmo menu também é possível "Listar produtos em acompanhamento de um usuário". Para usar essa opção basta inserir o email do usuário, fazendo com que todas as compras realizadas por ele sejam listadas. Se houver algum erro no cadastro, também é possível excluí-lo através desta página. Após isso, o último procedimento a ser feito é acessar as páginas dos produtos vendidos e atualizar o número de produtos disponíveis.
Figura 41: Ícone para acessar o menu do usuário.
Figura 42: Cadastrar produto para acompanhamento.
Figura 43: Listar produtos em acompanhamento.
Além do que foi listado acima, o menu de usuário de uma conta de administrador ainda possui mais opções. Uma delas é a de consultar os dados do comprador através do código da compra do Mercado Pago. Esse recurso pode ser utilizado para confirmar alguns dados (como atualmente são utilizadas contas de teste, os dados de CPF e telefone são fixos).
Figura 44: Página para consultar os dados do comprador.
Como última opção do menu está a opção de modificar as imagens da home. Ela é utilizada para adicionar ou remover as imagens das reformas de estofados que são mostradas na home. A opção foi criada para que as imagens possam ser dinâmicas, sendo adicionadas as imagens das novas reformas e removidas as que não são mais pertinentes.
Figura 45: Página para alteração das imagens de reformas.
- Faça um clone do repositório:
$ git clone https://github.com/gabriellinke/Website-estofados-bech.git- Executando a Aplicação:
# API
$ cd server
# Instalando as dependências do projeto.
$ npm install
# Configurando o banco de dados e criando as tabelas.
$ npm run knex:migrate
# Criando os primeiros dados do banco de dados
$ npm run knex:seed
# Inicie a API
$ npm run dev
# Aplicação web
$ cd web
# Instalando as dependências do projeto.
$ yarn # ou npm install
# Inicie a aplicação web
$ yarn start # ou npm start
Acesse http://localhost:3000/ e veja o resultado.
Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
Projeto desenvolvido exclusivamente por Gabriel Henrique Linke