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 desse repositório, utilizando uma branch específica e um Pull Request para colocar seus códigos.
- Habilidades
- Entregáveis
- Data de entrega
- Desenvolvimento
- Requisitos do projeto
- API Shopping Cart
- Observações técnicas
- 1. Crie uma listagem de produtos
- 2. Adicione o produto ao carrinho de compras
- 3. Remova o item do carrinho de compras ao clicar nele
- 4. Carregue o carrinho de compras através do LocalStorage ao iniciar a página
- 5. Some o valor total dos itens do carrinho de compras
- 6. Crie um botão para limpar carrinho de compras
- 7. Adicione um texto de "loading" durante uma requisição à API
- Depois de terminar o desenvolvimento (opcional)
- Revisando um Pull Request
- Avisos finais
Nesse projeto, você será capaz de:
- Fazer requisições a uma API (Application Programming Interface) do Mercado Livre;
- Utilizar os seus conhecimentos sobre JavaScript, CSS e HTML;
- Trabalhar com funções assíncronas;
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!
Nesse projeto vocês farão um carrinho de compras totalmente dinâmico! E o melhor: consumindo dados diretamente de uma API! Isso mesmo. Da sigla em inglês Application Programming Interface, uma API é um ponto de contato na internet com determinado serviço. Através de requisições HTTP a essa API é possível interagir com ela da forma como quem a criou planejou. Aqui usaremos a API do Mercado Livre para buscarmos produtos à venda.
Seu projeto deve ter o comportamento parecido com o do gif abaixo quando finalizado, não se preocupe em replicar o visual, o gif so ilustra o comportamento:
- Projeto individual;
- Serão
2dias de projeto. - Data de entrega para avaliação final do projeto:
27/09/2021 - 14:00h.
O seu Pull Request deverá conter os arquivos index.html, style.css e script.js, que conterão seu código HTML, CSS e JavaScript, respectivamente.
Caso você faça o download de bibliotecas externas, utilize o diretório libs (a partir da raiz do projeto) para colocar os arquivos (*.css, *.js, etc...) baixados.
Você pode adicionar outros arquivos se julgar necessário. Qualquer dúvida, procure a monitoria.
- Clone o repositório
git clone git@github.com:tryber/sd-015-b-project-shopping-cart.git.- Entre na pasta do repositório que você acabou de clonar:
cd sd-015-b-project-shopping-cart
- Instale as dependências e inicialize o projeto
- Instale as dependências:
npm install
- 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
commitsdo seu projeto- Você deve criar uma branch no seguinte formato:
nome-sobrenome-nome-do-projeto - Exemplo:
git checkout -b maria-silva-shopping-cart
- Você deve criar uma branch no seguinte formato:
- Quando fizer mudanças, adicione-as ao stage do Git e faça um
commit
- Verifique que as mudanças ainda não estão no stage
- Exemplo:
git status(devem aparecer listados os novos arquivos em vermelho)
- Exemplo:
- Adicione o novo arquivo ao stage do Git
- Exemplo:
git add .(adicionando todas as mudanças - que estavam em vermelho - ao stage do Git)git status(devem aparecer listados os arquivos em verde)
- Exemplo:
- Faça o
commitinicial- Exemplo:
git commit -m 'iniciando o projeto. VAMOS COM TUDO :rocket:'(fazendo o primeiro commit)git status(deve aparecer uma mensagem tipo nothing to commit )
- Exemplo:
- Adicione a sua branch com o novo
commitao repositório remoto
- Usando o exemplo anterior:
git push -u origin maria-silva-shopping-cart
- Crie um novo
Pull Request(PR)
- Vá até a página de Pull Requests do repositório no GitHub
- Clique no botão verde "New pull request"
- Clique na caixa de seleção "Compare" e escolha a sua branch com atenção
- Clique no botão verde "Create pull request"
- Adicione uma descrição para o Pull Request, um título claro que o identifique, e clique no botão verde "Create pull request"
- Não se preocupe em preencher mais nada por enquanto!
- Volte até a página de Pull Requests do repositório e confira que o seu Pull Request está criado
-
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 (o famosogit push); -
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 garantir a qualidade do código, vamos utilizar neste projeto os linters ESLint e Stylelint.
Assim o código estará alinhado com as boas práticas de desenvolvimento, sendo mais legível
e de fácil manutenção! Para rodá-los localmente no projeto, execute os comandos abaixo:
npm run lint
npm run lint:stylesEm caso de dúvidas, confira o material do course sobre ESLint e Stylelint.
Cypress é uma ferramenta de teste de front-end desenvolvida para a web. Você pode rodar o cypress localmente para verificar se seus requisitos estão passando, para isso execute um dos seguintes comandos:
Para executar os testes apenas no terminal:
npm testPara executar os testes e vê-los rodando em uma janela de navegador:
npm run cypress:openou
npx cypress openApós executar um dos dois comandos acima, será aberta uma janela de navegador e então basta clicar no nome do arquivo de teste que quiser executar (project.spec.js), ou para executar todos os testes clique em Run all specs
Você também pode assistir a este vídeo 😉🎙
Para rodar o cypress é preciso ter rodado o comando npm install anteriormente.
O manual da API do Mercado Livre contém muitas informações sobre ela. Utilizaremos alguns dos endpoints, e a forma de uso está detalhada no primeiro requisito.
A seguir, estão listados como será a avaliação do seu projeto e todos os requisitos que devem ser cumpridos. Leia-os atentamente e siga à risca o que for pedido. Em particular, atente-se para os nomes de classes que alguns elementos de seu projeto devem possuir. O não cumprimento de um requisito, total ou parcialmente, impactará em sua avaliação.
Você deve criar uma listagem de produtos que devem ser consultados através da API do Mercado Livre.
Você deve utilizar o endpoint:
"https://api.mercadolibre.com/sites/MLB/search?q=$QUERY"onde $QUERY deve ser o valor da sua busca. Para este trabalho, a busca deve ser obrigatóriamente o termo computador.
O retorno desse endpoint será algo no formato json. Por exemplo, se for pesquisado "computador":
{
"site_id": "MLB",
"query": "computador",
"paging": {
"total": 406861,
"offset": 0,
"limit": 50,
"primary_results": 1001
},
"results": [
{
"id": "MLB1341925291",
"site_id": "MLB",
"title": "Processador Intel Core I5-9400f 6 Núcleos 128 Gb",
"seller": {
"id": 385471334,
"permalink": null,
"power_seller_status": null,
"car_dealer": false,
"real_estate_agency": false,
"tags": []
},
"price": 899,
"currency_id": "BRL",
"available_quantity": 1,
"sold_quantity": 0,
"buying_mode": "buy_it_now",
"listing_type_id": "gold_pro",
"stop_time": "2039-10-10T04:00:00.000Z",
"condition": "new",
"permalink": "https://www.mercadolivre.com.br/processador-intel-core-i5-9400f-6-nucleos-128-gb/p/MLB13953199",
"thumbnail": "http://mlb-s2-p.mlstatic.com/813265-MLA32241773956_092019-I.jpg",
"accepts_mercadopago": true,
"installments": {
"quantity": 12,
"amount": 74.92,
"rate": 0,
"currency_id": "BRL"
},
"address": {
"state_id": "BR-SP",
"state_name": "São Paulo",
"city_id": "BR-SP-27",
"city_name": "São José dos Campos"
},
"shipping": {
"free_shipping": true,
"mode": "me2",
"tags": [
"fulfillment",
"mandatory_free_shipping"
],
"logistic_type": "fulfillment",
"store_pick_up": false
},
"seller_address": {
"id": "",
"comment": "",
"address_line": "",
"zip_code": "",
"country": {
"id": "BR",
"name": "Brasil"
},
"state": {
"id": "BR-SP",
"name": "São Paulo"
},
"city": {
"id": "BR-SP-27",
"name": "São José dos Campos"
},
"latitude": "",
"longitude": ""
},
"attributes": [
{
"source": 1,
"id": "ALPHANUMERIC_MODEL",
"value_id": "6382478",
"value_struct": null,
"values": [
{
"name": "BX80684I59400F",
"struct": null,
"source": 1,
"id": "6382478"
}
],
"attribute_group_id": "OTHERS",
"name": "Modelo alfanumérico",
"value_name": "BX80684I59400F",
"attribute_group_name": "Outros"
},
{
"id": "BRAND",
"value_struct": null,
"attribute_group_name": "Outros",
"attribute_group_id": "OTHERS",
"source": 1,
"name": "Marca",
"value_id": "15617",
"value_name": "Intel",
"values": [
{
"id": "15617",
"name": "Intel",
"struct": null,
"source": 1
}
]
},
{
"name": "Condição do item",
"value_id": "2230284",
"attribute_group_id": "OTHERS",
"attribute_group_name": "Outros",
"source": 1,
"id": "ITEM_CONDITION",
"value_name": "Novo",
"value_struct": null,
"values": [
{
"id": "2230284",
"name": "Novo",
"struct": null,
"source": 1
}
]
},
{
"id": "LINE",
"value_name": "Core i5",
"attribute_group_id": "OTHERS",
"attribute_group_name": "Outros",
"name": "Linha",
"value_id": "7769178",
"value_struct": null,
"values": [
{
"id": "7769178",
"name": "Core i5",
"struct": null,
"source": 1
}
],
"source": 1
},
{
"id": "MODEL",
"value_struct": null,
"values": [
{
"id": "6637008",
"name": "i5-9400F",
"struct": null,
"source": 1
}
],
"attribute_group_id": "OTHERS",
"name": "Modelo",
"value_id": "6637008",
"value_name": "i5-9400F",
"attribute_group_name": "Outros",
"source": 1
}
],
"differential_pricing": {
"id": 33580182
},
"original_price": null,
"category_id": "MLB1693",
"official_store_id": null,
"catalog_product_id": "MLB13953199",
"tags": [
"brand_verified",
"good_quality_picture",
"good_quality_thumbnail",
"immediate_payment",
"cart_eligible"
],
"catalog_listing": true
},
]
}A lista de produtos que devem ser exibidos é o array results no JSON acima.
Você deve utilizar a função createProductItemElement(product) para criar os componentes HTML referentes a um produto.
Adicione o elemento retornado da função createProductItemElement(product) como filho do elemento <section class="items">.
Obs: as variáveis sku, no código fornecido, se referem aos campos id retornados pela API.
Cada produto na página HTML possui um botão com o nome Adicionar ao carrinho!.
Ao clicar nesse botão você deve realizar uma requisição para o endpoint:
"https://api.mercadolibre.com/items/$ItemID"onde $ItemID deve ser o valor id do item selecionado.
Quando colocado o id MLB1341706310 retorno desse endpoint será algo no formato:
{
"id": "MLB1341706310",
"site_id": "MLB",
"title": "Processador Amd Ryzen 5 2600 6 Núcleos 64 Gb",
"subtitle": null,
"seller_id": 245718870,
"category_id": "MLB1693",
"official_store_id": 1929,
"price": 879,
"base_price": 879,
"original_price": null,
"currency_id": "BRL",
"initial_quantity": 0,
"available_quantity": 0,
"sold_quantity": 0,
...
"warranty": "Garantia de fábrica: 3 anos",
"catalog_product_id": "MLB9196241",
"domain_id": "MLB-COMPUTER_PROCESSORS",
"parent_item_id": null,
"differential_pricing": null,
"deal_ids": [],
"automatic_relist": false,
"date_created": "2019-10-15T18:13:00.000Z",
"last_updated": "2019-12-20T18:06:54.000Z",
"health": null,
"catalog_listing": true
}Preste atenção que o JSON deve conter apenas um item.
Você deve utilizar a função createCartItemElement() para criar os componentes HTML referentes a um item do carrinho.
Adicione o elemento retornado da função createCartItemElement(product) como filho do elemento <ol class="cart__items">.
Ao clicar no produto no carrinho de compra, ele deve ser removido da lista.
Para isso, uma função (já existente) chamada cartItemClickListener(event) deve ser implementada com a lógica necessária para realizar a remoção.
Ao carregar a página, o estado atual do carrinho de compras deve ser carregado do LocalStorage. Para que isso funcione, o carrinho de compras deve ser salvo no LocalStorage, ou seja, todas as adições e remoções devem ser abordadas para que a lista atual seja salva.
Cada vez que se adicionar um item ao carrinho de compras, será necessário somar seus valores e apresentá-los na página principal do projeto. O elemento que tem como filho o preço total dos itens do carrinho deve ter, obrigatóriamente, a classe total-price.
Obs: Devemos tomar cuidado, no entanto, pois estamos buscando os dados do produto em uma API. Portanto, é necessário garantir que a API já retornou as informações para somente depois realizar o cálculo da soma.
Crie um botão para remover todos os itens do carrinho de compras. Ele deve, obrigatóriamente, ter a classe empty-cart.
Uma requisição à API gasta um tempo e durante ele, ficamos sem saber se está tudo certo ou se algo deu errado.
Normalmente é utilizada alguma forma para mostrar que a requisição está em andamento.
Mostre a palavra "loading..." em algum lugar da página apenas durante a requisição à API. O elemento mostrado durante o carregamento da página deve, obrigatóriamente, ter a classe loading.
Para sinalizar que o seu projeto está pronto para o "Code Review" dos seus colegas, faça o seguinte:
-
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.
-
Caso tenha alguma dúvida, aqui tem um video explicativo.
Use o conteúdo sobre Code Review para te ajudar a revisar os Pull Requests.
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?