Aplicativo mobile em React-Native que consiste em uma loja virtual com gerenciamento de carrinho.
- React-Native
Para executar o projeto é necessário ter os seguintes requisitos:
- Node 12.x ou superior
- Yarn 1.21 ou superior
- Android-Sdk (Para instalar o app em dispositivos Android)
- Dispositivo macOS configurado (Para instalar o app em dispositivos iOS)
$ git clone https://github.com/felipedmsantos95/gomarketplace
$ cd gomarketplace
Dentro do diretório do projeto pela primeira vez, você deve executar o comando yarn
para instalar as dependências, então será possível rodar os seguintes scripts:
$ yarn json-server --host endereco_do_servidor server.json -p 3333
Para exibir dados em tela, há um arquivo para ser utilizado como uma espécie de fake API para prover esses dados. Para isso, há no package.json uma dependência chamada json-server, e um arquivo chamado server.json que contém os dados para uma rota /products
.
$ yarn android
$ cd ios
$ pod install
$ cd ..
$ yarn ios
$ yarn start
Nesse desafio, você desenvolverá uma nova aplicação, a GoMarketplace. Dessa vez é hora de você praticar o que você aprendeu até agora no React Native junto com o TypeScript, utilizando rotas, Async Storage e a Context API.
-
Listar os produtos da fake API
: Sua páginaDashboard
deve ser capaz de exibir uma listagem através de uma tabela, com os campostitle
,image_url
eprice
. -
Adicionar itens ao carrinho
: Em toda sua aplicação, você deve utilizar o Contexto chamadocart
que deixamos disponível. Você vai precisar completar as funcionalidades dentro dehooks/cart.tsx
para que você consiga adicionar itens ao carrinho. -
Exibir itens do carrinho
: Na páginaCart
você deve exibir todos os itens do carrinho, junto com a quantidade, valor único, valor subtotal dos itens e total de todos os items. -
Aumentar quantidade de itens do carrinho
: Na páginaCart
você deve permitir que o usuário aumente a quantidade de itens do mesmo produto, para isso você pode utilizar a funçãoincrement
dentro do seu contexto em/src/hooks/cart.tsx
. -
Diminuir quantidade de um item do carrinho
: Na páginaCart
você deve permitir que o usuário decremente a quantidade de itens do mesmo produto, para isso você pode utilizar a funçãodecrement
dentro do seu contexto em/src/hooks/cart.tsx
. -
Exibir valor total dos itens no carrinho
: Tanto na páginaDashboard
, tanto na páginaCart
você deve exibir o valor total de todos os itens que estão no seu carrinho.
Para esse desafio temos os seguintes testes:
-
should be able to list the products
: Para que esse teste passe, sua aplicação deve permitir que sejam listados na sua telaDashboard
, toda os produtos que são retornadas do Fake API. Essa listagem deve exibir otitle
e oprice
que deve ser formatado utilizando a funçãoIntl
. -
should be able to add a product to the cart
: Para que esse teste passe, você deve permitir que seja possível adicionar produtos da suaDashboard
ao carrinho, utilizando o contexto decart
disponibilizado. -
should be able to list the products on the cart
: Para que esse teste passe, você deve permitir que seja possível listar os produtos que estão salvos no contexto do seu carrinho na páginaCart
, nessa página exiba o nome do produto e o subtotal total de cada produto (price * quantity). -
should be able to calculate the cart total
: Para que esse teste passe, tanto na páginaDashboard
, tanto na páginaCart
você deve exibir o valor total de todos os itens que estão no seu carrinho. -
should be able to show the total quantity of itens in the cart
: Para que esse teste passe, tanto na páginaDashboard
, tanto na páginaCart
você deve exibir o número total de itens que estão no seu carrinho. -
should be able to increment product quantity on the cart
: Para que esse teste passe, você deve permitir que seja possível incrementar a quantidade de um produto do seu carrinho, utilizando o contexto decart
disponibilizado. -
should be able to decrement product quantity on the cart
: Para que esse teste passe, você deve permitir que seja possível decrementar a quantidade de um produto do seu carrinho, utilizando o contexto decart
disponibilizado. -
should be able to navigate to the cart
: Para que esse teste passe, no seu componenteFloatingCart
na Dashboard, você deve permitir que ao clicar no botão de carrinho com o testID denavigate-to-cart-button
, o usuário seja redirecionado para a páginaCart
. -
should be able to add products to the cart
: Para que esse teste passe, no seu arquivo onde contém o contexto do carrinho, você deve permitir que a funçãoaddToCart
adicione um novo item ao carrinho. -
should be able to increment quantity
: Para que esse teste passe, no seu arquivo onde contém o contexto do carrinho, você deve permitir que a funçãoincrement
incremente em1
unidade a quantidade de um item que está armazenado no contexto. -
should be able to decrement quantity
: Para que esse teste passe, no seu arquivo onde contém o contexto do carrinho, você deve permitir que a funçãodecrement
decremente em1
unidade a quantidade de um item que está armazenado no contexto. -
should store products in AsyncStorage while adding, incrementing and decrementing
: Para que esse teste passe, no seu arquivo onde contém o contexto do carrinho você deve permitir que todas as atualizações que você fizer no carrinho, sejam salvas no AsyncStorage. Por exemplo, ao adicionar um item ao carrinho, adicione-o também no AsyncStorage. Lembre de também atualizar o valor do AsyncStorage quando você incrementar ou decrementar a quantidade de um item. -
should load products from AsyncStorage
: Para que esse teste passe, no seu arquivo onde contém o contexto do carrinho, você deve permitir que todos os produtos que foram adicionados sejam buscados do AsyncStorage.