GoMarketplace

English   |    Português   

Prévia da Aplicação

Sobre

Aplicativo mobile em React-Native que consiste em uma loja virtual com gerenciamento de carrinho.

Tecnologias utilizadas

• React-Native

Requisitos

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)

Executando o projeto

Clonando o projeto

$ git clone https://github.com/felipedmsantos95/gomarketplace
$ cd gomarketplace

Scripts para execução do projeto

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:

Executar Fake API

$ 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.

Instalar o aplicativo em dispositivos com sistema operacional Android

$ yarn android

Instalar o aplicativo em dispositivos com sistema operacional iOS

$ cd ios
$ pod install
$ cd ..
$ yarn ios

Metro Bundle para modo de desenvolvimento

$ yarn start

Enunciado do desafio proposto

Sobre o desafio

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.

Funcionalidades da aplicação

• Listar os produtos da fake API: Sua página Dashboard deve ser capaz de exibir uma listagem através de uma tabela, com os campos title, image_url e price.

• Adicionar itens ao carrinho: Em toda sua aplicação, você deve utilizar o Contexto chamado cart que deixamos disponível. Você vai precisar completar as funcionalidades dentro de hooks/cart.tsx para que você consiga adicionar itens ao carrinho.

• Exibir itens do carrinho: Na página Cart 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ágina Cart você deve permitir que o usuário aumente a quantidade de itens do mesmo produto, para isso você pode utilizar a função increment dentro do seu contexto em /src/hooks/cart.tsx.

• Diminuir quantidade de um item do carrinho: Na página Cart você deve permitir que o usuário decremente a quantidade de itens do mesmo produto, para isso você pode utilizar a função decrement dentro do seu contexto em /src/hooks/cart.tsx.

• Exibir valor total dos itens no carrinho: Tanto na página Dashboard, tanto na página Cart você deve exibir o valor total de todos os itens que estão no seu carrinho.

Específicação dos testes

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 tela Dashboard, toda os produtos que são retornadas do Fake API. Essa listagem deve exibir o title e o price que deve ser formatado utilizando a função Intl.

• 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 sua Dashboard ao carrinho, utilizando o contexto de cart 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ágina Cart, 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ágina Dashboard, tanto na página Cart 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ágina Dashboard, tanto na página Cart 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 de cart 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 de cart disponibilizado.

• should be able to navigate to the cart: Para que esse teste passe, no seu componente FloatingCart na Dashboard, você deve permitir que ao clicar no botão de carrinho com o testID de navigate-to-cart-button, o usuário seja redirecionado para a página Cart.

• 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ção addToCart 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ção increment incremente em 1 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ção decrement decremente em 1 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.