PT

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.

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..................
+```

src/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <link rel="stylesheet" href="style.css" />
+  <!--carregar arquivo css-->
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!--ajuste de tela em smartphones-->
+    <title>PokeApi</title>
+    <!--titulo da aba da pagina-->
+  </head>
+  <body>
+    <div class="pageContent">
+      <h2 id="name">Nome do Pokemon</h2>
+      <img
+        id="img_sprite_front_default"
+        src="../assets/missingno.png"
+        alt="Imagem do Pokemon"
+      />
+      <div>
+        <button id="previous" onclick="previousPokemon()">Anterior</button>
+        <button id="next" onclick="nextPokemon()">Proximo</button>
+      </div>
+    </div>
+  </body>
+  <script src="script.js" type="text/javascript"></script>
+  <!--carregar arquivo js-->
+</html>

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");
+}

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;
+}