# SKY STORE

**Erick Vinicius Oliveira de Paiva**

**Maria Clara Sales Jabali Maruch**

**Pedro Vítor Felix da Costa**

---

_Curso de Engenharia de Software, Unidade Praça da Liberdade_

_Instituto de Informática e Ciências Exatas – Pontifícia Universidade Católica de Minas Gerais (PUC MINAS), Belo Horizonte – MG – Brasil_

---

A Sky Store consiste em uma plataforma web que disponibilza artes da cliente em questão para venda,
além de disponibilzar os serviços de design realizados individualmente por ela. Com isso, o objetivo principal desse
projeto é prover uma forma automatizada de realizar o processo completo de compras de artes prontas, e também fazer
encomendas personalizadas de artes digitais. Ademais, a plataforma irá conter, também, todo o portifólio da cliente,
tal como suas artes já realizadas além de suas informações pessoais. Assim, com a implementação em código feita pela
equipe de desenvolvimento, foi possível obter não somente todas as funcionalidades citadas anteriormente, como também
um perfil em que é possível o usuário alterar os dados pessoais de sua conta e visualizar seu histórico de compras,
além da ordem de pedido da encomenda.

---

## 1. Introdução

1.1 Contextualização

O e-commerce é a abreviação em inglês de comércio eletrônico, que, como o própio nome diz, trata-se de uma plataforma digital para venda de produtos e serviços de trabalhadores autônomos ou empresas.

Contudo, apesar de existir tal meio atual para que os trabalhadores autônomos possam vender seus trabalhos, grande parte do processo de venda existente ainda é feito de maneira manual, sem a ajuda de uma plataforma digital.

1.2 Problema

Sendo assim, há aproximadamente 4 anos, Danyele Fernandes, estudante de Design na FUMEC e trabalhadora autônoma, tinha um grande problema na venda de seus produtos,
uma vez que para ser realizada a venda a ações eram feitas de maneira manual entre ela e o usuário comprador, seja no processo de compra
de artes pré disponibilizadas ou no processo de encomenda de uma arte personalizada. Além disso, também havia uma dificuldade
para conseguir divulgar seu trabalho, já que seu portifólio não continha todas as informações que era de seu interesse para divulgação.

1.3 Objetivo geral

Dessa forma, para proporcionar uma solução para a Danyele, é necessário produzir uma plataforma web em que
haverá um time de desenvolvedores front-end e back-end envolvido, o qual deve prover um sistema agradável visualmente
para os clientes da Danyele. À essa vista, tal sistema deverá ser possível realizar compras de artes por prateleira, encomendas de artes e ilustrações personalizadas, além de um portfólio único para a Danyele. Outrossim, também deve ser capaz de forncer manutenção de maneira automatizada à cliente.

1.3.1 Objetivos específicos

* Realizar metologodia "Design Sprint" como técnica de elicitação para extração de requisitos.
* Avaliar qual a melhor tecnologia presente no mercado para prover a solução em código.
* Traçar pontos negativos e positivos sobre a tecnologia utilizada.
* Impulsionar a divulgação do trabalho da cliente.
* Desenvolver a venda de produtos de prateleira.
* Desenvolver a venda de produtos por encomenda.

1.4 Justificativas

Devido a carência informada de um processo automatizado pela Danyele, o time de desenvolvedores se comprometeu a criar essa plataforma tanto para aprendizado do time sobre as tecnologias React e Firebase, quanto para atender a necessidade aprensentada por ela.

## 2. Stakeholders

De maneira clara, há de se afirmar que há uma necessidade por parte de Danyele, no qual nomeamos de "cliente",
deseja ter uma plataforma para gerenciar todo o seu processo de venda, além da divulgação de suas informações.
Outrossim, do outro lado do negócio em questão, há os usuários, pessoas físicas e jurídicas que desejam
obter algum produto da cliente, por meio de uma plataforma dinâmica de aquisição de compras, de modo a facilitar
o processo de obtenção dos bens desejados.

## 3. Proposta da solução

O sistema é uma plataforma web que possui a página inicial com uma breve explicação sobre a proposta do site e sobre a artista. Na aba encomendas o sistema possuirá uma explicação do processo para realizar encomendas e um link que levará para o primeiro passo deste processo. Na última parte do fluxo de encomendas o usuário preencherá o formulário de envio, que será redirecionado para a cliente e ela possa fazer contato com o usuário e fechar o orçamento da encomenda. Além disso, o site possuíra uma página dedicada para a vendas de arte de prateleira, pré fabricadas pela artista, que serão vendidas digitalmente num formato de e-commerce. O portfólio da cliente será disponibilizado em uma página separada, mostrando tabalhos anteriores e a descrição de cada um deles. Complementando o portfólio, na aba "Sobre Mim" irá conter um texto sobre a Danyele.

Porém, não será possível desenvolver algumas funcionalidades para o site, tal como portfólio com interação dinâmica durante a manutenção, portfólio com adição de imagens personalizadas durante a manutenção da cliente, chatbot para interação cliente x usuário dentro da plataforma, área de acompanhamento do processo de produção da arte por encomenda, a disponibilização do download da arte por encomenda e um filtro por proporção e orientação na prateleira.

## 4. Projeto da Solução

Tendo definido a proposta de solução, e também feito, por meio do Adobe XD, o protótipo do sistema, é preciso avaliar as ferramentes de desenvolvimento disponíveis no mercado para escolher a que melhor se enquadra no projeto de solução. Assim, o uso de diagrama de classes e caso de uso foi usado de suporte para a escolha.
Com isso, foram escolhidas a tecnologia front-end ReactJs para densenvolvimento do projeto visual, o NodeJs como back-end para desenvolvimento do servidor existente, o Firebase como banco de dados não-relacional que irá receber os dados do sistema, o Stripe (API de pagamentos online) para prover o pagamento dos produtos e o Heroku para a hospedagem da plataforma.

## 5. Artefatos principais

A partir do processo de Design Sprint, da criação do protótipo e escolha das ferramentas para o desenvolvimento, o software destinado a venda e encomenda de artes digitais foi criado.

5.1. Página Inicial

O site inicia na página principal, que exibe um menu para acesso de todas as páginas e um botão principal que leva o usuário ao foco do site, as encomendas.

5.2. Encomendas

Ao clicar no botão citado acima, o sistema exibe uma página que mostra o fluxograma de como realizar uma encomenda e, ao final da página, existe um botão para iniciar o processo.

Um modal se abre e exibe duas imagens com os textos "Ilustração Digital" e "Arte Digital". O processo de encomenda irá se dividir entre essas duas categorias.

5.2.1. Encomendas - Ilustração Digital

No segundo passo, o usuário seleciona o tipo de Ilustração Digital desejado e no terceiro e último passo preenche o formulário com os dados pessoais e a descrição detalhada do produto a ser encomendado.


5.2.2. Encomendas - Arte Digital

Os passos para Arte Digital são bem similares com a encomenda de Ilustrações, o que diferencia são os tipos da passo 2 e formulário na última etapa.

5.3. Prateleira

Além de encomendar uma arte digital, é possível que o usuário adquira produtos prontos que são disponibilizados em formato de e-commerce na Prateleira.

5.3.1. Carrinho de Compras

Ao clicar no ícone de carrinho de compras exibido abaixo de cada arte, o sistema abre o modal do carrinho de compras, que também pode ser acessado por um ícone de carrinho no canto direito do menu, similar ao citado anteriormente.


5.3.2. Checkout

Ao pressionar "Comprar" no carrinho de compras, o usuário é direcionado para a primeira etapa do checkout, um formulário a ser preenchido com os dados pessoais

Na etapa seguinte se escolhe a forma de pagamento, cartão ou boleto. Caso tenha sido escolhido cartão, o usuário deverá preencher os dados de pagamentos requeridos.



5.4. Portfólio

Na página do portólio são exibidos trabalhos realizados anteriormente pela cliente. Na primeira página são mostradas apenas as imagens principais de cada trabalho realizado.


Ao clicar em uma dessas imagens citadas acima, o sistema abre uma nova página que mostra todo o material desenvolvido e uma descrição sobre o processo de criação do projeto.


5.5. Perfil do Usuário

Após realizar o cadastro e login, o ícone de login no canto direito do menu se transforma no ícone de usuário logado, a partir dele é possível acessar a página de perfil do usuário e a histórico de encomendas.

Acessando o Perfil, o usuário encontra o status da última encomenda realizada por ele, além de links para alterar os dados de cadastro e para ver os históricos de compras e encomendas.


5.5.3. Alteração de dados

Ao selecionar o "Dados pessoais", o site exibe um formulário que possibilita a alteração do nome e e-mail cadastrado.


Ao clicar em "Alterar senha", é exibido um modal para a alteração da senha cadastra.


5.5.2. Históricos

O link "Minhas encomendas" redireciona o usuário para uma página que mostra todas as encomendas realizadas por ele.


O mesmo se aplica ao link "Histórico de compras", o usuário será redirecionado para uma página em que é possível ver todos os produtos de prateleira adquiridos, sendo possível baixá-los pelo botão "Baixar imagem".


5.6. Manutenção do Site

Além disso, foi desenvolvido um sistema de manutenção do site que possibilita a alteração das informações presentes nele. Quando a cliente realiza o login com a conta de administrador, diferentemente do login do usuário, o sistema exibe um ícone com a logo da Sky e clicando nele é possível acessar as páginas de manutenção.

A página de manutenção do portfólio mostra todos os itens já inseridos, permitindo adicionar novos itens ou editar os existentes.


Ao clicar no "Adicionar item" ou no "Editar", se exibe o formulário abaixo. Quando acesado pelo "Editar", as informações do item inserido são exibidas nos campos do formulário.


A página de manutenção da prateleira possibilita que a cliente modifique os dados sobre itens já inseridos, os exclua ou então adicione novos produtos.


Os botões "Adicionar item" e "Editar" funcionam de maneira semalhante aos da manutenção do portfólio, o que diferencia é o formulário.


Na página de produtos prateleira os itens podem ser filtrados por categorias do submenu. Essas categorias podem ser editadas e para acessar a página de manutenção do submenu, deve-se pressionar o botão "Submenu Database" na página de manutenção da prateleira.


Além disso, foi requisitado pela cliente que as encomendas possuíssem um status de preparação, para o cliente poder acompanhar a encomenda. Sendo assim, a partir do ícone de administrador, no item "Encomendas", é possível acessar a página abaixo, que exibe todas as encomendas solicitadas por usuários.

Nessa página é possível editar o status de preparação de cada encomenda.


## 6. Conclusão

Inicialmente foi proposto o desenvolvimento de uma aplicação web que automatizasse o processo de encomendas de artes digitais da cliente. Era esperado a utilização do processo de Desing Sprint para aprofundar nas dores da designer e desenvolver um sistema que fosse compatível com soluções já existentes no mercado. Além disso, tinha-se o intuito de disponibilizar uma plataforma para venda de artes pré-fabricadas e que a aplicação web impulsionasse a divulgação do trabalho e consequentemente as vendas.

As ferramentas escolhidas pelos desenvolvedores atenderam as expectativas. O Firebase na versão gratuita atende o número de requisições e quantidade de informações armazenadas pela aplicação, apesar de limitar a estrutração dos dados. O React facilitou o desenvolvimennto do front-end com a utilização de bibliotecas que fornecem alguns componentes pré-prontos. O Stripe possibilitou o integração rápida do pagamento, mas apresentou limitações em relação a tradução das funcionalidades oferecidas.

Pode se dizer que os objetivos iniciais foram todos atendidos e que as funcionalidades propostas foram realizadas. O impulsionamento da divulgação do trabalho da cliente será analisado nos próximos meses, a partir do momento que a aplicação começar a ser divulgada.

# APÊNDICES

**Repositório:** https://github.com/ICEI-PUC-Minas-PPLES-TI/plf-es-2021-2-ti3-6653100-sky-store

Do vídeo de apresentação.