Relatório de produção

Sparrow

Introdução

Atendendo os requisitos da cliente, um e-commerce de bebidas foi iniciado pelo

integrantes do grupo.
Antes da programação ser iniciada de fato:

Foram discutidas as linguagens futuramente utilizadas, adjunto dos programas.

A cliente discutiu seus interesses e o a estrutura do projeto.

O grupo foi organizado por tarefas.

Desenvolvimento

Footer e Header

Estruturando o site, o footer e o header foram os primeiros componentes criados,

estabelecendo as estilizações e funções requeridas pela cliente e pelo protótipo criado
no figma. No primeiro estágio de ambos os componentes ainda não havia muitas
funções, até a implantação das navegações e um pequeno menu com as opções
'usuário' e 'carrinho' no header.

Carrossel

Em sequência ocorreu a criação do carrossel, um componente que permite a exibição

de inúmeros produtos, exibindo apenas alguns por vez, mas com a função de deslizar a
tela e mostrar os demais. Diversos vídeos e documentos foram consultados, para que
fosse possível puxar os produtos cadastrados em um arquivo json (banco de dados
teste) e posteriormente do banco de dados de fato.

Slider

Apresentado no topo da página home, imagens são exibidas, com o tamanho de

banner, podendo ser alteradas através de um processo parecido com o do carrossel.
Atualmente as imagens são puxadas de um arquivo, mas posteriormente serão
puxadas do banco de dados, que será quando elas estiverem prontas, as atuais são
apenas para testes.

Tela do produto
Acompanhando o carrossel, a tela do produto consiste em uma página que, através do
id do produto, é capaz de exibi-lo. Assim que o produto é selecionado seja pelo
carrossel ou pelo grid, esta tela é introduzida, trazendo informações de preço,
quantidade, imagem e nome do produto.
Há também botões que regulam a quantidade de produtos e o que adiciona ao
carrinho.

Carrinho

O funcionamento do carrinho ainda está limitado a adição de produtos exibidos numa

única página, na mesma do carrinho. É possivel acrescentar os produtos verticalmente
numa caixa, com a opção de adicionar mais produtos, escolher a quantidade e removê-
los. Quando não há nenhum produto no carrinho, uma tela específica é exibida na div
principal, deixando um botão responsável por retornar à home, em função de procurar
por bebidas.

Pedido personalizado

Consiste em um componente que se encontra na home, ainda sem interação com o

banco, mas que possui botões e inputs para a realização de pedidos personalizados.

Grids

Através do banco de dados, é possível selecionar a categoria de bebidas, exibindo

produtos alinhados daquela mesma categoria. Isso é possível através do
id_subcategoria, onde cada id equivale a uma subcategoria distinta que armazena
bebidas do mesmo tipo.

Tailwind

Durante o projeto, o tailwind foi adicionado para facilitar a estilização das páginas,
substituindo o css puro, de forma que exigiu com que os componentes já construídos
fossem reformados.

Responsividade

Aos poucos o site é formatado de forma responsiva, para telas pequenas, com um
grande auxílio do tailwind, que facilita esse processo. Até então componentes principais
como o home e header já estão responsivos e com funções únicas para usuários de
interfaces menores.

Banco de dados
A interação do banco de dados com o projeto foi realizada através do node js,
utilizando o MySQL Workbench como o banco.
Os produtos já são todos exibidos no site; no carrossel, grids e carrossel, adjunto de
suas informações. Além disso, o banner também é puxado, sendo um componente
visual que complementa a home.
Atualmente é trabalhado o processo de adicionar o produto ao carrinho, com direito a
cadastrar no banco e vincular os itens ao cliente.