MeusRelatos - Construindo uma Pokedex com JavaScript

Há algumas semanas estou participando do bootcamp Desenvolvimento Frontend com Angular - DIO ft. Banco PAN. Aprendi a lançar e puxar dados entre repositórios locais e remotos com Git, criar designs e estilos maneiros utilizando HTML5 e CSS3 e quando vi, estava todo serelepe fazendo até uma continha de vezes dentro de um documento .js.

Construí - com ajuda das aulas, é claro - uma website no modelo de Pokédex que atribuía aos blocos de cada monstrinho seu nome, foto e tipo, e para completar, o fundo de cada bloco era dinâmico, colorido conforme o tipo principal do bixinho.

(Valeu demais, Sr. Johannsen de Paula 😜. Ficou lindo)

O único problema foi: não entendi a lógica da programação, de certa forma. Eu assisti às aulas e consegui chegar ao resultado, mas vejo agora que estava apenas pausando e copiando os códigos com medo de me perder. Eram tantas funções dentro de funções dentro de funções que meus olhos doíam. Até que chegou o dia... o dia em que vi o bendito desafio:

O Desafio da Pokédex

A ordem era simples do tipo:

Faça uma implementação nesse projeto, adicionando detalhes sobre os Pokémon. Pode ser sobre ataques, status base ou qualquer coisa. Você só precisa usar o que aprendeu e enviar :)

Gelei. Bem, parece que eu não havia aprendido nada 🤩🤩 Como todo programador deve ser, não baixei a cabeça e parti pra tentar superar esse obstáculo.

A Jornada de Aprendizado com JavaScript

No que se refere aos conceitos aplicados na criação da página, me perdi logo no começo. Para solicitar os dados de uma API, lembrava ter sido utilizado o conceito de "fetch(url).then", abrindo função dentro de função dentro de função.

Entretanto, no código final, o qual eu > já deveria saber < implementar, eis o que constava:

javascript

pokeApi.getPokemons = (offset = 0, limit = 5) => {
const url =
  `https://pokeapi.co/api/v2/pokemon?offset=${offset}&limit=${limit}`


return fetch(url)
  .then((response) => response.json())
  .then((jsonBody) => jsonBody.results)
  .then((pokemons) => pokemons.map(pokeApi.getPokemonDetail))
  .then((detailRequests) => Promise.all(detailRequests))
  .then((pokemonDetails) => pokemonDetails);

Eu escrevi isso, mas não sabia explicar o que significava o tal "=>", de onde saiu tanto ".then" e, confesso, nem de onde veio aquele map. Se há entre nós alguém como eu, que não sabia ou ainda não sabe sobre os conceitos que citei, favor se revele nesses comentários 😗

Modelei minha implementação como sendo uma nova aba que abre ao clicarmos no Pokémon selecionado. Nessa nova tela, seriam utilizados dados já obtidos e uma nova lista de dados específicos do Pokémon - as base status. Decidi que o melhor para que eu entendesse tudo seria montar um novo arquivo .js para a página de detalhes ao invés de bater cabeça para entender aquela receita de bolo que escrevi sem perceber.

Mas o que eu aprendi com toda essa história? Deixe-me compartilhar:

Arrow Functions (=>): Servem para simplificar o código, porque acabamos reduzindo o número de linhas. Você acaba por trocar as chaves + return por uma simples seta. Olha só:

javascript

// Função Normal
function somaNormal(a, b) {
return a + b;
}

// Arrow Function
const somaArrow = (a, b) => a + b; 

Viu? Menos palavras, mesma eficiência! É como transformar um discurso de 10 minutos em uma bio do Instagram.

Fetch API: É como enviar um mensageiro para trazer informações de um lugar distante. Tipo assim:

javascript

// Sem Fetch
const dadosSemFetch = obterDados();

// Com Fetch
const dadosComFetch = fetch('https://api.pokedex.com/'); 

É como mandar um 'alô' para a API e ela te responder com os dados que você pediu!

Promises: É igual ao que parece kkj. São como promessas dos amigos, e de certa forma trabalham junto com a Fetch API. Você pede algo e ele promete voltar com uma resposta. Mas como a vida é imprevisível, pode ser que você receba um "sim" ou "não" só mais tarde. Em código, seria algo assim:

javascript

// Sem Promise 
const resultadoSemPromise = fazerAlgo();
// Com Promise 
const resultadoComPromise = fazerAlgo().then(resposta => { // faz alguma coisa com a resposta }); 

É uma forma de dizer: "Vou fazer isso, e quando estiver pronto, eu te aviso!". Isso porque tanto a requisição quanto a resposta podem demorar a chegar dependendo de alguns fatores:

• Funcionamento do servidor;
• Velocidade da nossa internet;
• Destino da requisição incorreto;

No começo, os conceitos podem parecer estranhos, mas depois que você pega o jeito, é como aprender a andar de bicicleta. No final, você está pedalando com o vento no rosto! Depois desse desafio, já me dispus a trabalhar em um novo projeto, dessa vez com a API ViaCEP, mas isso é conteúdo pra outro de meus relatos.

Conclusão

A experiência de desenvolver o consumo de uma API pela primeira vez foi desafiadora, mas extremamente enriquecedora. Posso dizer com muita felicidade que agora sei como implementar o conceito de Fetch API, promises e responses, como solicitar dados específicos de uma API, convertê-los para .json e lançá-los na página. Depois de muito choro e confusão, a alegria finalmente veio.

Sim, eu consegui entregar o desafio! Caso queiram dar uma espiada ou tenham sugestões de melhoria, o repositório que contém minha codificação já pode ser acessado em meu GitHub. Se leu até aqui, meu muito obrigado!

Se sei capturar os monstrinhos de uma API, seria eu o mais novo treinador Pokémon?

Alguém, por favor, se identifique com esta história. Se eu pensar que fui o único a passar por isso, vou pipocar de vergonha ;-;