A SOCIAL TRADING é uma rede social que tem o intuito de unir em um único lugar pessoas que se interessam por investimentos. A ideia é que veteranos e iniciantes possam trocar informações e que todos possam ter acesso a um conteúdo dedicado e específicos para eles.
Aqui você pode acessar nosso projeto: SOCIAL TRADING
Neste projeto construímos uma Rede Social que permite à qualquer usuário criar uma conta de acesso, logar-se com ela, criar, editar, deletar e dar likes em publicações.
O objetivo principal deste projeto é construir uma [Single-page Application(SPA)] na qual seja possível ler e escrever dados.
- A lógica do projeto foi implementada completamente em JavaScript (ES6+), HTML e CSS 😃. Neste projeto não há uso de frameworks ou bibliotecas de CSS e JS.
Este projeto inclui um boilerplate contendo estrutura de pastas e testes unitários (tests):
.
├── node_modules
├── src
| ├── image
| ├── pages
| | | └── about
| | | | └── about.css
| | | | └── about.js
| | | └── feed
| | | | └── feed.css
| | | | └── feed.js
| | | └── login
| | | | └── login.css
| | | | └── login.js
| | | └── register
| | | | └── register.css
| | | | └── register.js
| ├── config.js
| ├── firebase.js
| ├── index.html
| ├── main.js
└── test
└── data.spec.js
├── package-lock.json
├── package.json
├── README.md
Esse produto tem o intuito de sanar a necessidade de um público alvo específico: OS INVESTIDORES! A ideia é que essa rede social seja capaz de contruir um ambiente de troca e aprendizagem para jovens e/ou experientes investidores, fazendo com que o eles possam se relacionar entre si e simplificar o caminho e os acessos sobre as multiformas que os investimentos possam ter.
História 1: A página inicial deverá ter botões que intuitivamente orientem o usuário para logar com email e senha, cadastrar novo usuário e login pelo Google. Quando o usuário selecionar “cadastrar”, deverá ser direcionado à uma página onde indicará nome, email e senha. O clique em “entrar” irá direcionar para a página de feed se os campos email e senha estiverem preenchidos corretamente, caso contrário apresentará uma mensagem de erro. Da mesma forma será direcionado à página de feed se o login com google tiver sucesso ou apresentando o erro caso não logue.
História 2: A página de feed terá local para compartilhar textos em forma de post. O usuário deverá ser capaz de poder editar, bem como deletar possíveis posts feitos por ela.
História 3: Os usuários devem poder curtir os posts de outros usuários e poder fazê-lo uma única vez.
-
Critérios de aceitação: tudo o que deve acontecer para satisfazer as necessidades do usuário.
-
Definição de pronto: todos os aspectos técnicos que devem ser atendidos para que, como equipe, saibam que essa história está finalizada e pronta para ser publicada. Todas suas histórias de usuário (com exceções), devem incluir esses aspectos em sua definição de pronto (além de tudo o que precisa adicionar):
- Ser uma SPA.
- Ser responsivo.
- Receber code review de pelo menos uma parceira de outra equipe.
- Fazer tests unitários.
- Fazer testes manuais buscando erros e imperfeições simples.
- Fazer testes de usabilidade e incorporar o feedback dos usuários como melhorias.
- Fazer deploy do aplicativo e marcar a versão (git tag).
Definimos qual seria o fluxo que o usuário seguiria dentro do seu aplicativo e, com isso, criamos a interface do usuário (UI) que siga este fluxo.
A partir das Histórias de Usuário, Pesquisa de Campo, Definição de Desenho da Interface do Usuário concluímos que precisaríamos de uma Paleta de Cores que agregasse personalidade ao produto, ajudando assim o fácil reconhecimento do produto e remetece ao universo dos investimentos.
O primeiro resultado que chegamos foi representado através do Protótipo a seguir:
O projeto funciona bem em dispositivos de tela grande (computadores, laptops etc.) e
pequena (tablets, telefones celulares etc.). A técnica utilizada foi mobile first.
Essas considerações ajudarão você a escrever as definições de pronto de sua H.U.:
- Login:
- O usuário pode criar uma conta de acesso ou autenticar-se com conta de e-mail e senha e também com uma conta do Google.
- Validações:
- Somente usuários com contas válidas têm acesso permitido.
- Não haver usuários repetidos.
- A conta do usuário deve ser um email válido.
- O que o usuário digita no campo de senha (input) deve ser secreto.
- Comportamento:
- Quando o formulário de registro ou login é enviado, ele deve ser validado.
- Se houver erros, mensagens descritivas devem ser exibidas para ajudar o usuário.
- Validações:
- Ao publicar, há validação no conteúdo do input.
- Comportamento:
- Ao recarregar o aplicativo, é verificado se o usuário está logado antes de exibir o conteúdo,
- Consegue publicar um post.
- Pode dar e remover likes em uma publicação. Máximo de um por usuário.
- Visualiza contagem de likes.
- Pode excluir uma postagem específica.
- Solicitar confirmação antes de excluir um post.
- Ao clicar em editar um post, você pode alterar o texto para um input que permite editar o texto e salvar as alterações.
- Ao salvar as alterações, você voltaa ao texto normal, mas com a informação editada.
- Ao recarregar a página, poder ver os textos editados.
- A manipulação do DOM e a lógica estão separada (separação de responsabilidades).
- O aplicativo é um [Single Page Application (SPA)]
- Alterar e persistir dados. Os dados que você adiciona ou modifica persistem por todo o aplicativo.
-
Lembre-se de que não há setup de testes definido, isso dependerá da estrutura do seu projeto. Você não deve esquecer de pensar sobre os testes. Eles podem ajudar a definir a estrutura e sua lógica.
-
Os testes de unidade devem cobrir no mínimo 70% de statements, functions, lines e branches.
- O planejamento deste projeto se encontra no Trello
- O repositório deste projeto se encontra no GitHub
- O deploy deste projeto está hospedado no GitPages
- Este projeto foi desenvolvido por Daiane Oltramari, Karol Sontak e Suellen Escórcio.