From 4f8629f613575f66ecbe281eb9706ef93fd4ec4b Mon Sep 17 00:00:00 2001 From: Lucas Date: Mon, 10 Jun 2024 00:43:39 -0300 Subject: [PATCH] PT --- README.md | 104 ++++++++++++++++++++++++++++++++++++- assets/exemplo.md | 114 +++++++++++++++++++++++++++++++++++++++++ assets/missingno.png | Bin 0 -> 615 bytes assets/screenshot.png | Bin 0 -> 13348 bytes assets/screenshot2.png | Bin 0 -> 5804 bytes src/index.html | 28 ++++++++++ src/script.js | 23 +++++++++ src/style.css | 24 +++++++++ 8 files changed, 292 insertions(+), 1 deletion(-) create mode 100644 assets/exemplo.md create mode 100644 assets/missingno.png create mode 100644 assets/screenshot.png create mode 100644 assets/screenshot2.png create mode 100644 src/index.html create mode 100644 src/script.js create mode 100644 src/style.css diff --git a/README.md b/README.md index 424ce74..ebc7ee9 100644 --- a/README.md +++ b/README.md @@ -1 +1,103 @@ -# Desafio-3-2024.1-Backend +# Aprendendo como utilizar um serviço de API + +# Desafio Pokedex utilizando pokeapi.co + +![screenshot](assets/screenshot.png) + +Neste desafio você irá terminar de implementar o funcionamento da Pokedex utilizando o serviço pokeapi.co para conseguir as informações e imagens dos Pokémons. A Pokedex começará mostrando o primeiro pokémon com seu nome e imagem, ao usuário clicar nos botões "anterior" e "próximo" ele irá mudar o Pokémon mostrado e irá navegar na lista de Pokémons fornecidos pela api pokeapi. Quando o usuário clicar no botão anterior estando no primeiro Pokémon, ele irá para o último Pokémon. E se ele estiver no último e clicar em próximo, o contrário acontecerá, ele irá retornar para o primeiro. + +![screenshot](assets/screenshot2.png) + +Caso surjam dúvidas, você pode utilizar o canal da capacitação no slack, contatar algum membro ou conversar com seu squad. + +Na EngNet utilizamos uma ferramenta personalizada do ChatGPT para aprendizado e melhor rendimento no desenvolvimento dos projetos, chamada de ZillaGPT. Você pode utilizar o ZillaGPT como seu professor particular para consultar informações técnicas sobre o javascript. [https://zillagpt.engnetconsultoria.com.br/](https://zillagpt.engnetconsultoria.com.br/) + +### Entrega + +- Você deve realizar um fork deste repositório para sua conta pessoal no GitHub. A entrega só será considerada válida se estiver incluída em uma release no seu novo repositório no GitHub. Se o candidato não souber como realizar um Fork, Commit, Push e uma Release no GitHub, deverá pesquisar ou pedir ajuda. O desafio também avaliará sua independência. + +- Após fazer a release do seu repositório enviei o arquivo zip da release para o Google Classroom + +- Você não deve excluir o repositório e nem a release após a entrega, pois a utilização do GitHub será avaliada. + +### PokeApi + +#### [Link da documentação do pokeapi.co](https://pokeapi.co/docs/v2) + +Você poderá utilizar a seguinte url da api para pegar a lista de todos os pokémons: + +``` +https://pokeapi.co/api/v2/pokemon/?offset=0&limit=1292 +``` + +Para pegar as informações do Pokémon atual utilize o seguinte endereço de url da api: + +``` +https://pokeapi.co/api/v2/pokemon/nome_do_pokemon + +ou + +https://pokeapi.co/api/v2/pokemon/numero_do_pokemon_apartir_do_numero_um +``` + +O parâmetro "offset" define a partir de qual pokémon começará a lista(array) de pokémons que deseja receber. Já o parâmetro "limit" define até qual número de pokémon você irá receber nessa lista. Esses parâmetros foram criados com o objetivo de reduzir o consumo de dados ao carregar uma grande quantidade de informações. Como a quantidade de pokémons máxima de 1292 é considerada pequena para quantidade de processamento do computador e velocidade da rede. Não é considerado um problema carregar todos os pokémons de uma vez nesse caso. No entanto, em uma situação em que houvesse um milhão de pokémons, isso poderia se tornar um problema. Se você não utilizar os parâmetros "offset" e "limit" a api "https://pokeapi.co/api/v2/pokemon/" irá retornar somente 20 pokémons por padrão, o que é uma quantidade muito pequena para esse desafio. Esse recurso de limitar o número de resultados em uma api se chama paginação ou pagination. + +### Imagem do Pokémon + +Para a imagem do Pokémon você utilizará o seguinte atributo fornecido pelo resultado da api para o pokémon especifico: + +``` +{ + "sprites": { + "front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/X.png", + } +} +``` + +#### [Exemplo de resultados da API](assets/exemplo.md) + +### Async/Await + +Para conseguir fazer esse desafio você precisa aprender como funciona o modo assíncrono do javascript. Como criar uma função assíncrona e utilizar o await. + +[Mario Souto explicando Async e Await](https://www.youtube.com/watch?v=q28lfkBd9F4) + +#### [Link da documentação do Async no w3schools](https://www.w3schools.com/js/js_async.asp) + +#### [Link da documentação do Async da Mozilla](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/async_function) + +### Fetch + +Para conseguir utilizar a api você pode utilizar a função fetch nativa do Javascript. + +#### [Vídeo de como usar o fetch](https://www.youtube.com/watch?v=m3K8DP4kVXQ&t=1s) + +#### [Link da documentação do Fetch API no w3schools](https://www.w3schools.com/jsref/api_fetch.asp) + +#### [Link da documentação do Fetch API da Mozilla](https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API) + +#### [Tutorial do Fetch API Devmedia](https://www.devmedia.com.br/javascript-fetch/41206) + +Também será necessário utilizar o Response.json() para converter os dados fornecido pela api para objeto javascript. + +#### [Vídeo explicando .json()](https://www.youtube.com/watch?v=PmDtOBtZzhQ) + +#### [Link da documentação do Response.json() da Mozilla](https://developer.mozilla.org/en-US/docs/Web/API/Response/json) + +O JSON.parse() é outra forma de converter os dados da api em JSON para objeto javascript, no caso ele converter uma string em sintaxe JSON para objeto javascript, diferentemente do "Response".json() que converte a resposta da api diretamente para objeto javascript. + +#### [Vídeo explicando JSON.parse()](https://www.youtube.com/watch?v=cq5oTRH5_ZM) + +#### [Link da documentação do JSON.parse() no w3schools](https://www.w3schools.com/js/js_json_parse.asp) + +### Sugestões de extensões para o Visual Studio Code + +- Live Server - permite visualizar o arquivo html atualizando automaticamente toda vez que uma alteração for salva + +### Material complementar + +#### [O que é uma api](https://youtu.be/PIro1he52Xw?t=101) + +### Desafio extra opcional + +Complemente a sua pokedex com mais informações sobre o Pokémon e deixe a interface mais bonita. diff --git a/assets/exemplo.md b/assets/exemplo.md new file mode 100644 index 0000000..5c35a7a --- /dev/null +++ b/assets/exemplo.md @@ -0,0 +1,114 @@ +Exemplo de resultado da api solicitando pela url https://pokeapi.co/api/v2/pokemon/?offset=0&limit=1292: + +``` +{ + "count": 1292, + "next": null, + "previous": null, + "results": [ + { + "name": "bulbasaur", + "url": "https://pokeapi.co/api/v2/pokemon/1/" + }, + { + "name": "ivysaur", + "url": "https://pokeapi.co/api/v2/pokemon/2/" + }, + { + "name": "venusaur", + "url": "https://pokeapi.co/api/v2/pokemon/3/" + }, + { + "name": "charmander", + "url": "https://pokeapi.co/api/v2/pokemon/4/" + }, + { + "name": "charmeleon", + "url": "https://pokeapi.co/api/v2/pokemon/5/" + }, + { + "name": "charizard", + "url": "https://pokeapi.co/api/v2/pokemon/6/" + }, + { + "name": "squirtle", + "url": "https://pokeapi.co/api/v2/pokemon/7/" + }, + { + "name": "wartortle", + "url": "https://pokeapi.co/api/v2/pokemon/8/" + }, + { + "name": "blastoise", + "url": "https://pokeapi.co/api/v2/pokemon/9/" + }, +E assim por diante.................. +``` + +Exemplo de resultado da api solicitando pela url https://pokeapi.co/api/v2/pokemon/bulbasaur ou https://pokeapi.co/api/v2/pokemon/1 (Pokemon[0] do array): + +``` +{ + "abilities": [ + { + "ability": { + "name": "overgrow", + "url": "https://pokeapi.co/api/v2/ability/65/" + }, + "is_hidden": false, + "slot": 1 + }, + { + "ability": { + "name": "chlorophyll", + "url": "https://pokeapi.co/api/v2/ability/34/" + }, + "is_hidden": true, + "slot": 3 + } + ], + "base_experience": 64, + "forms": [ + { + "name": "bulbasaur", + "url": "https://pokeapi.co/api/v2/pokemon-form/1/" + } + ], + "game_indices": [ + { + "game_index": 153, + "version": { + "name": "red", + "url": "https://pokeapi.co/api/v2/version/1/" + } + }, + { + "game_index": 153, + "version": { + "name": "blue", + "url": "https://pokeapi.co/api/v2/version/2/" + } + }, + { + "game_index": 153, + "version": { + "name": "yellow", + "url": "https://pokeapi.co/api/v2/version/3/" + } + }, + { + "game_index": 1, + "version": { + "name": "gold", + "url": "https://pokeapi.co/api/v2/version/4/" + } + }, + { + "game_index": 1, + "version": { + "name": "silver", + "url": "https://pokeapi.co/api/v2/version/5/" + } + }, +E assim por diante.................. +``` diff --git a/assets/missingno.png b/assets/missingno.png new file mode 100644 index 0000000000000000000000000000000000000000..ca2a826e5ece474d43b71fe0c6e10842ac3072f4 GIT binary patch literal 615 zcmeAS@N?(olHy`uVBq!ia0vp^2_VeD3?#3*wSy!Wi-X*q7}lMWc?smOq&xaLGB9lH z=l+w(3gq(#_=LEgJ9lpF+O!gCx8@dNswPKP~<M1MGDaH3!W~HAsNnZr(aBJR^V~n`1*hSXOAM@jiPxuucOa(cYKuNcztc_ z^RrVLf|$HGHB=WMF^XI-Y-`^XTg4g9cd3_m@|-mf1oTrxEe}TTnGn2$W#0a+=XM-^ ztSWhM-uLHk_(axtaOh|s;SN}k!YCdgRK#r7zsNEq!P|9(jAQnWi|k)yW+*)C=bv@= zHZNDYL1SBsjX+v}MKedqS*f(u@3Zr*HW*(Q^imgSOwY87THIyWeTg&s;Ee|UDTlvQ zac4K~+s}UT*Y8J#hRpX51wF8|>j=-C!52_>>eIsV6YL*fMMr`hhA~4?2H-de7`bb)&+^6Z>5iKHe&OXx?=A>(ZV6L?o7%x!#a`DvGa$cu$~lPhm2Dt(YUxS+f3;PU-HQ_Z&}%;j$a zInc#m+k>_V^KUQ+zYsg~;JHGJq{z7hrsy3{?|yRspRnU`HutP8(oCR$h+$}+yQ(>F zVTz*@gL8<2-NgAq4`i&&Yis%2JhbdJEdrlB`rIV$YWA;d!SzFhm-la!$Bd33rbC~9 Z@&|OaJ=33k7?c7SJYD@<);T3K0RWzl1jYaW literal 0 HcmV?d00001 diff --git a/assets/screenshot.png b/assets/screenshot.png new file mode 100644 index 0000000000000000000000000000000000000000..07e8ce72f8bf494952373a36609f91b0aba0c173 GIT binary patch literal 13348 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 literal 0 HcmV?d00001 diff --git a/assets/screenshot2.png b/assets/screenshot2.png new file mode 100644 index 0000000000000000000000000000000000000000..de2be2415c8593ae0a6e702b2123d82481d20a12 GIT binary patch literal 5804 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 + + + + + + + + PokeApi + + + +
+

Nome do Pokemon

+ Imagem do Pokemon +
+ + +
+
+ + + + diff --git a/src/script.js b/src/script.js new file mode 100644 index 0000000..5fae0ec --- /dev/null +++ b/src/script.js @@ -0,0 +1,23 @@ +//função de mudar imagem pelo id e pela url +function changeImage(id, url) { + document.getElementById(id).src = url; +} +//função de mudar texto pelo id e pelo texto +function changeText(id, text) { + document.getElementById(id).innerText = text; +} + +// Daqui para baixo voce ira escrever +// o código para resolver o desafio + +function previousPokemon() { + alert("Pokemon Anterior"); + //abra o terminal em inspecionar no chrome para visualizar + console.log("Pokemon Anterior"); +} + +function nextPokemon() { + alert("Pokemon Seguinte"); + //abra o terminal em inspecionar no chrome para visualizar + console.log("Pokemon Seguinte"); +} diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..b613119 --- /dev/null +++ b/src/style.css @@ -0,0 +1,24 @@ +body { + font-family: "Roboto", sans-serif; +} + +div.pageContent { + margin-top: 5em; + height: 100%; + text-align: center; +} + +img.img_sprite_front_default { + width: 96px; + height: 96px; + margin-block: 1em; +} + +button#previous, +button#next { + border: none; + padding: 10px 20px; + text-align: center; + display: inline-block; + font-size: 18px; +}