Ao iniciar este projeto, você concorda com as diretrizes do Código de Ética e Conduta e do Manual da Pessoa Estudante da Trybe.
Você já usa o GitHub diariamente para desenvolver os exercícios, certo? Agora, para desenvolver os projetos, você deverá seguir as instruções a seguir. Fique atento a cada passo, e se tiver qualquer dúvida, nos envie por Slack! #vqv 🚀
Aqui você vai encontrar os detalhes de como estruturar o desenvolvimento do seu projeto a partir deste repositório, utilizando uma branch específica e um Pull Request para colocar seus códigos.
- Boas vindas ao repositório do projeto Trybe Wallet!
- Sumário
- Habilidades
- Entregáveis
- Instruções para entregar seu projeto
- Como desenvolver
- Requisitos do projeto
- Avisos Finais
Neste projeto, verificamos se voce é capaz de:
-
Criar um store Redux em aplicações React
-
Criar reducers no Redux em aplicações React
-
Criar actions no Redux em aplicações React
-
Criar dispatchers no Redux em aplicações React
-
Conectar Redux aos componentes React
-
Criar actions assíncronas na sua aplicação React que faz uso de Redux.
Neste projeto você vai desenvolver uma carteira de controle de gastos com conversor de moedas, ao utilizar essa aplicação um usuário deverá ser capaz de:
- Adicionar, remover e editar um gasto;
- Visualizar uma tabelas com seus gastos;
- Visualizar o total de gastos convertidos para uma moeda de escolha;
Para entregar o seu projeto você deverá criar um Pull Request neste repositório.
Lembre-se que você pode consultar nosso conteúdo sobre Git & GitHub sempre que precisar!
Você deve desenvolver uma aplicação em React que use Redux como ferramenta de manipulação de estado.
Através dessa aplicação, será possível realizar as operações básicas de criação e manipulação de um estado de redux.
-
Projeto individual.
-
Serão 2 dias de projeto.
-
Data de entrega para avaliação final do projeto:
09/08/2021 - 14:00h.
- Clone o repositório
git clone [email protected]:tryber/sd-012-project-trybewallet.git.- Entre na pasta do repositório que você acabou de clonar:
cd sd-012-project-trybewallet
- Instale as dependências e inicialize o projeto
- Instale as dependências:
npm install
- Inicialize o projeto:
npm start(uma nova página deve abrir no seu navegador com um texto simples)
- Verifique que os testes estão executando:
npm test(os testes devem rodar e falhar)
- Crie uma branch a partir da branch
master
- Verifique que você está na branch
master- Exemplo:
git branch
- Exemplo:
- Se não estiver, mude para a branch
master- Exemplo:
git checkout master
- Exemplo:
- Agora, crie uma branch onde você vai guardar os commits do seu projeto
-
Faça
commitsdas alterações que você fizer no código regularmente -
Lembre-se de sempre após um (ou alguns)
commitsatualizar o repositório remoto -
Os comandos que você utilizará com mais frequência são:
git status(para verificar o que está em vermelho - fora do stage - e o que está em verde - no stage)git add(para adicionar arquivos ao stage do Git)git commit(para criar um commit com os arquivos que estão no stage do Git)git push -u nome-da-branch(para enviar o commit para o repositório remoto na primeira vez que fizer opushde uma nova branch)git push(para enviar o commit para o repositório remoto após o passo anterior)
Para "entregar" seu projeto, siga os passos a seguir:
- Vá até a página DO SEU Pull Request, adicione a label de "code-review" e marque seus colegas
- No menu à direita, clique no link "Labels" e escolha a label code-review
- No menu à direita, clique no link "Assignees" e escolha o seu usuário
- No menu à direita, clique no link "Reviewers" e digite
students, selecione o timetryber/students-sd-00
Nessa aplicação você deverá obrigatoriamente utilizar o seguinte formato do estado global:
{
user: {
email: '',
},
wallet: {
currencies: [],
expenses: []
}
}
É importante respeitar esse formato para que o avaliador funcione corretamente. Você pode adicionar novos campos ao seu estado global, mas essa estrutura básica deve se manter. Por exemplo, você pode adicionar uma propriedade isFetching no seu estado. Mas você não pode salvar as despesas em uma chave diferente de wallet.expenses.
Outra coisa importante: devido a estrutura que o avaliador utiliza para realizar os testes, é necessário que o seu <Provider /> e o seu <BrowserRouter /> estejam no arquivo index.js e não no <App />.
Para garantir a qualidade do código, vamos utilizar neste projeto o linter ESLint. Assim o código estará alinhado com as boas práticas de desenvolvimento, sendo mais legível e de fácil manutenção! Para rodar o linter localmente no projeto, execute o comando abaixo:
npm run lint
⚠ PULL REQUESTS COM ISSUES DE LINTER NÃO SERÃO AVALIADAS. ATENTE-SE PARA RESOLVÊ-LAS ANTES DE FINALIZAR O DESENVOLVIMENTO! ⚠
Aqui encontram-se os requisitos do projeto. Em cada requisito você encontrara uma imagem de um protótipo de como sua aplicação deve ficar. Estilo da página não será avaliado.
Pra usarmos o Redux DevTools com o Redux-Thunk, vamos utilizar uma biblioteca chamada composeWithDevTools, ela já está no package.json, a única coisa que você vai precisar fazer é configurar a sua store, por exemplo:
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import reducer from '../reducers';
const store = createStore(
reducer,
composeWithDevTools(
applyMiddleware(thunk),
),
);
export default store;
Sua página web irá consumir os dados da API do awesomeapi API de Cotações para realizar a busca de câmbio de moedas. Para realizar essas buscas, vocês precisarão consultar o seguinte endpoint:
O retorno desse endpoint será algo no formato:
{
{
"USD": {
"code":"USD",
"codein":"BRL",
"name":"Dólar Comercial",
"high":"5.6689",
"low":"5.6071",
"varBid":"-0.0166",
"pctChange":"-0.29",
"bid":"5.6173",
"ask":"5.6183",
"timestamp":"1601476370",
"create_date":"2020-09-30 11:32:53"
},
...
}
}
Se você quiser aprender mais informações sobre a API, veja a documentação.
Vamos utilizar React Testing Library para execução dos testes unitários.
Esse framework de testes utiliza algumas marcações no código para verificar a solução proposta, uma dessas marcações é o atributo data-testid e faremos uso dele aqui.
Na descrição dos requisitos (logo abaixo) será pedido que seja feita a adição de atributos data-testid nos elementos HTML. Vamos a um exemplo para deixar claro essa configuração:
Se o requisito pedir "crie um botão e adicione o id de teste (ou data-testid) com o valor my-action, você pode criar:
<button data-testid="my-action"></button>ou
<a data-testid="my-action"><a/>ou seja, o atributo data-testid="my-action" servirá para o React Testing Library(RTL) identificar o elemento e dessa forma, conseguiremos realizar testes unitários focados no comportamento da aplicação.
Em alguns requisitos, utilizamos o getByRole para poder selecionar os elementos de forma semântica. Portanto atente-se às instruções de cada requisito. Por exemplo, se o requisito pedir explicitamente um button, você deverá utilizar exatamente esse elemento.
Afim de verificar a solução proposta, você pode executar todos os testes unitários localmente, basta executar:
npm testPara rodar apenas um teste, basta a utilização da função .only após o describe. Com isso, será possível que apenas um requisito rode localmente e seja avaliado.
Caso queira avaliar apenas um tópico do requisito, você também pode usar o .only após o test.
Crie uma página para que a pessoa usuária se identifique, com email e senha. Esta página deve ser a página inicial de seu aplicativo.
-
A rota para esta página deve ser ‘/’.
-
Você deve criar um local para que a pessoa usuária insira seu email e senha. Utilize o atributo
data-testid="email-input"para o email edata-testid="password-input"para a senha. -
Crie um botão com o texto ‘Entrar’.
O que será testado:
- A rota para esta página deve ser "/"
- Existe um local para que o usuário insira seu email e senha
- Existe um botão com o texto "Entrar"
-
O email está no formato válido, como '[email protected]'.
-
A senha possui 6 ou mais caracteres.
-
Salve o email no estado da aplicação, com a chave email, assim que a pessoa usuária logar.
-
A rota deve ser mudada para '/carteira' após o clique no botão 'Entrar'.
O que será testado:
- O botão de "Entrar" está desabilitado ao entrar na página
- O botão de "Entrar está desabilitado quando um email inválido é digitado
- O botão de "Entrar" está habilitado quando um email e uma senha válidos são passados
-
Salve o email no estado da aplicação, com a chave email, assim que o usuário logar.
-
A rota deve ser mudada para
/carteiraquando o login for efetuado com sucesso.
O que será testado:
- O estado global possui a chave `email` no formato esperado
- A rota deve ser mudada para `/carteira` após o clique no botão
Crie uma página para gerenciar a carteira de gastos em diversas moedas, e que traga a despesa total em uma moeda só. Esta página deve ser renderizada por um componente chamado Wallet.
-
A rota para esta página deve ser
/carteira -
O componente deve se chamar Wallet e estar localizado na pasta
src/pagesno arquivoWallet.js
O que será testado:
- A rota para esta página deve ser "/carteira"
- O componente deve se chamar Wallet e estar localizado na pasta "src/pages"
-
Um elemento que exiba o email da pessoa usuária que fez login.
- Adicione o atributo
data-testid="email-field".
- Adicione o atributo
Dica: você deve pegar o email do estado global da aplicação (no Redux)
-
Um campo com a despesa total gerada pela lista de gastos.
-
Adicione o atributo
data-testid="total-field". -
Inicialmente esse campo deve exibir o valor
0
-
-
Um campo que mostre qual câmbio está sendo utilizado, que será neste caso será 'BRL'.
- Adicione o atributo
data-testid="header-currency-field".
- Adicione o atributo
O que será testado:
- Um elemento que exiba o email do usuário que fez login.
- Crie um campo com a despesa total gerada pela lista de gastos.
- Crie um campo que mostre que qual câmbio está sendo utilizado, que será neste caso "BRL"
Dica: atente-se ao formato sugerido pelo React para criar formulários.
<form>
<label>
Nome:
<input type="text" name="name" />
</label>
</form>
-
Um campo para adicionar valor da despesa.
- O campo deverá ter a label
Valor.
- O campo deverá ter a label
-
Um campo de texto para adicionar a descrição da despesa.
- O campo deverá ter a label
Descrição.
- O campo deverá ter a label
-
Um campo de select para adicionar em qual moeda será registrada a despesa.
-
O campo deverá ter a label
Moeda. -
O campo deverá ser um
<select>. -
As opções do select serão preenchidas através da consulta à API. Isso será feito em um requisito mais a frente. Nesse momento você pode deixar o
<select>vazio.
-
-
Um campo para adicionar qual método de pagamento será utilizado.
-
O campo deverá ter a label
Método de pagamento. -
Este campo deve ser um
<select>. A pessoa usuária deve poder escolher entre os campos: 'Dinheiro', 'Cartão de crédito' e 'Cartão de débito'.
-
-
Um campo para selecionar uma categoria (tag) para a despesa.
-
Este campo deve ser um
<select>. A pessoa usuária deve poder escolher entre os campos: 'Alimentação', 'Lazer', 'Trabalho', 'Transporte' e 'Saúde'. -
O campo deverá ter a label
Tag.
-
7. Implemente a lógica para preencher as opções do campo "Moedas", buscando as siglas das moedas da API:
-
Ao entrar na página
/carteira, você deverá fazer uma requisição para a API das moedas e preencher as opções do<select>de "Moedas" com os valores retornados. Utilizando as siglas das moedas. -
As opções devem conter os valores: 'USD', 'CAD', 'EUR', 'GBP', 'ARS', 'BTC', 'LTC', 'JPY', 'CHF', 'AUD', 'CNY', 'ILS', 'ETH' e 'XRP'.
-
Esses valores devem vir da API através do endpoint: https://economia.awesomeapi.com.br/json/all.
-
Remova das informações trazidas pela API a opção 'USDT' (Dólar Turismo).
-
-
Desenvolva a funcionalidade do botão "Adicionar despesa" de modo que ao clicar no botão, as seguintes ações sejam executadas:
-
Os valores dos campos devem ser salvos no estado da aplicação, na chave expenses, dentro de um array contendo todos gastos que serão adicionados:
-
O
idda despesa deve ser um número sequencial, começando em 0. Ou seja: a primeira despesa terá id 0, a segunda terá id 1, a terceira id 2, e assim por diante. -
Você deverá salvar a cotação do câmbio feita no momento da adição para ter esse dado quando for efetuar uma edição do gasto. Caso você não tenha essa informação salva, o valor da cotação trazida poderá ser diferente do obtido anteriormente.
Atenção nesse ponto: você deverá fazer uma requisição para API e buscar a cotação no momento que o botão de
Adicionar despesafor apertado. Para isso você deve utilizar um thunk. Atente-se ao formato do objeto da despesa descrito abaixo: o valor retornado pela API deverá ficar dentro da chaveexchangeRates.
-
-
Após adicionar a despesa, atualize a soma total das despesas. Essa informação deve ficar no header dentro do elemento com
data-testid="total-field" -
As despesas salvas no Redux ficarão com um formato semelhante ao seguinte:
Clique para expandir.
expenses: [{ "id": 0, "value": "3", "description": "Hot Dog", "currency": "USD", "method": "Dinheiro", "tag": "Alimentação", "exchangeRates": { "USD": { "code": "USD", "name": "Dólar Comercial", "ask": "5.6208", ... }, "CAD": { "code": "CAD", "name": "Dólar Canadense", "ask": "4.2313", ... }, "EUR": { "code": "EUR", "name": "Euro", "ask": "6.6112", ... }, "GBP": { "code": "GBP", "name": "Libra Esterlina", "ask": "7.2498", ... }, "ARS": { "code": "ARS", "name": "Peso Argentino", "ask": "0.0729", ... }, "BTC": { "code": "BTC", "name": "Bitcoin", "ask": "60299", ... }, "LTC": { "code": "LTC", "name": "Litecoin", "ask": "261.69", ... }, "JPY": { "code": "JPY", "name": "Iene Japonês", "ask": "0.05301", ... }, "CHF": { "code": "CHF", "name": "Franco Suíço", "ask": "6.1297", ... }, "AUD": { "code": "AUD", "name": "Dólar Australiano", "ask": "4.0124", ... }, "CNY": { "code": "CNY", "name": "Yuan Chinês", "ask": "0.8278", ... }, "ILS": { "code": "ILS", "name": "Novo Shekel Israelense", "ask": "1.6514", ... }, "ETH": { "code": "ETH", "name": "Ethereum", "ask": "5184", ... }, "XRP": { "code": "XRP", "name": "Ripple", "ask": "1.4", ... } } }]
-
-
A tabela deve possuir um cabeçalho exatamente com os campos Descrição, Tag, Método de pagamento, Valor, Moeda, Câmbio utilizado, Valor convertido, Moeda de conversão e Editar/Excluir
-
Atente-se ao formato semântico da tabela. Utilize os elementos corretos para o cabeçalho, para as linhas e para as células.
-
A tabela deve ser alimentada pelo estado da aplicação, que estará disponível na chave expenses que vem do reducer
wallet.-
O campo de Moeda e Moeda de Conversão deverão conter o nome da moeda. Portanto, ao invés de 'USD' ou 'EUR', deve conter "Dólar Comercial" e "Euro", respectivamente
-
Por padrão, o campo 'Moeda de conversão' exibirá 'Real'
-
Atenção também às casas decimais dos campos. Como são valores contábeis, eles devem apresentar duas casas após a vírgula. Arredonde sua resposta somente na hora de renderizar o resultado, e para os cálculos utilize sempre os valores vindos da API (utilize o campo
askque vem da API). -
Utilize sempre o formato
0.00(número - ponto - duas casas decimais)
-
O que será testado:
- A tabela deve possuir um cabeçalho com os campos Descrição, Tag, Método de pagamento, Valor, Moeda, Câmbio utilizado, Valor convertido e Moeda de conversão.
- A tabela deve ser alimentada pelo estado da aplicação, que estará disponível na chave expenses que vem do reducer wallet.
-
O botão deve estar na linha da tabela e deve possuir
data-testid="delete-btn". -
Ao ser clicado, o botão deleta a linha da tabela, alterando o estado global.
O que será testado:
- O botão deve estar dentro do último item da linha da tabela e deve possuir `data-testid="delete-btn"`
- Ao ser clicado, o botão deleta a linha da tabela, alterando o estado global
-
O botão deve estar dentro da linha da tabela e deve possuir
data-testid="edit-btn" -
Ao ser clicado, o botão habilita um formulário para editar a linha da tabela. Ao clicar em "Editar despesa" ela é atualizada, alterando o estado global.
-
O formulário deverá ter os mesmos
data-testiddo formulário de adicionar despesa. Você pode reaproveitá-lo. -
O botão para submeter a despesa para edição deverá conter exatamente o texto "Editar despesa"
Atenção: o câmbio utilizado na edição deve ser o mesmo do cálculo feito na adição do gasto.
-
O que será testado:
- O botão deve estar dentro do último item da linha da tabela e deve possuir `data-testid="edit-btn"
- Ao ser clicado, o botão habilita um formulário para editar a linha da tabela. Ao clicar em "Editar despesa" ela é atualizada, alterando o estado global
Ao finalizar e submeter o projeto, não se esqueça de avaliar sua experiência preenchendo o formulário. Leva menos de 3 minutos!
Link: FORMULÁRIO DE AVALIAÇÃO DE PROJETO
O avaliador automático não necessariamente avalia seu projeto na ordem em que os requisitos aparecem no readme. Isso acontece para deixar o processo de avaliação mais rápido. Então, não se assuste se isso acontecer, ok?
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent