DS & II

Capítulo 05 - Portais

Leitura de 4 min

🚀 Capítulo 05: Portais Interdimensionais (Tema: Rick and Morty)

NOTE

Este capítulo utiliza a temática de Rick and Morty para explicar as requisições HTTP e consumo de APIs. Abra um portal para buscar dados em servidores externos e exibi-los na sua tela!

1. 🎯 Objetivo da Aula

Aprender a fazer requisições de rede usando o comando fetch do JavaScript, compreender o formato de dados JSON e aprender a exibir informações vindas de uma API externa na sua página.

2. 🏢 O Cenário Prático (Seu Desafio)

O cientista brilhante (e maluco) Rick Sanchez e seu neto Morty viajam por todo o multiverso usando uma arma de portais. Quando Rick precisa de um cristal de energia raro ou de informações sobre a ficha criminal de um alienígena, ele não tem isso guardado na sua garagem. Ele abre um portal verde para outra dimensão, busca o que precisa lá e traz de volta para o seu laboratório!

No desenvolvimento web moderno, o nosso Frontend (o site) funciona como a garagem do Rick. Ele não guarda todas as informações do mundo.

  • Quando o usuário abre o app e quer ver a lista de produtos ou o clima atual, o Frontend precisa abrir um “portal” (uma requisição de rede) para conversar com o Backend (o Servidor).
  • Essa ponte de comunicação é o que chamamos de API. Seu desafio é abrir o seu primeiro portal!

🧠 Fundamentos: A Teoria Traduzida

🔌 1. O que é uma API?

API (Application Programming Interface) é como uma ponte que permite que dois sistemas conversem entre si. O criador da API deixa uma URL pública (um link). Quando o nosso JavaScript acessa esse link, a API responde entregando os dados que pedimos.

📦 2. O formato JSON:

As APIs geralmente respondem os dados em um formato chamado JSON (JavaScript Object Notation). Ele se parece muito com um objeto do JavaScript e serve para organizar as informações de forma que tanto humanos quanto computadores consigam ler facilmente:

{
  "nome": "Morty Smith",
  "especie": "Humano",
  "status": "Vivo"
}

🏹 3. O Comando fetch:

No JavaScript moderno, nós usamos a função fetch() para abrir o portal e buscar os dados. Como a internet pode demorar um pouco para responder, nós usamos os comandos async e await (que dizem para o código esperar a resposta chegar antes de continuar):

async function buscarPersonagem() {
    // 1. Abre o portal para a API
    let resposta = await fetch("https://rickandmortyapi.com/api/character/2");
    
    // 2. Transforma a resposta em um objeto legível
    let dados = await resposta.json();
    
    // 3. Usa os dados!
    console.log("O nome do personagem é: " + dados.name);
}

4. 📖 Exemplo Guiado: APIs Reais

Existem milhares de APIs gratuitas na internet para você treinar!

  • A Rick and Morty API entrega dados de todos os personagens da série.
  • A PokeAPI entrega dados de todos os Pokémons.
  • APIs de clima entregam a temperatura atual de qualquer cidade.

5. 🛠️ Prática Obrigatória 1: Entendendo o JSON

Olhe para o dado em formato JSON abaixo e responda:

{
  "id": 1,
  "title": "Gibi do Homem-Aranha",
  "price": 29.90,
  "available": true
}
  1. Qual o valor do preço (price) desse produto?
  2. Esse produto está disponível (available) para venda?

6. 🛠️ Prática Obrigatória 2: O Comando Fetch

  1. Por que nós precisamos usar a palavra mágica await antes do comando fetch no JavaScript? O que aconteceria se o código continuasse rodando sem esperar a resposta da internet chegar?

7. 📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo 05 FS_Portais) e clique em Commit to main.
  2. Envie para a Nuvem (Push): Clique em Push origin.

8. 📂 Estrutura de Pastas

proj_aplicacoes_full_stack/
├── capitulos/
│   ├── capitulo_05_portais.md
│   └── codigos/
│       └── cap05/
│           └── api_fetch.js

💡 Checkpoint de Lógica

Para usar o comando await dentro de uma função, a linha de criação da função obrigatoriamente precisa ter a palavra async antes! (Ex: async function minhaFuncao()).

10. 🔥 Desafio de Fixação

Tente usar o comando fetch no console do seu navegador para buscar dados de um Pokémon na PokeAPI.

🔑 Gabarito de Código/Fórmulas

Gabarito da Prática 1:

  1. 29.90.
  2. Sim (true). Gabarito da Prática 2:
  3. Porque a resposta da internet não é instantânea! O comando await faz o JavaScript pausar e esperar pacientemente os dados chegarem da API. Sem ele, o código tentaria usar os dados antes de eles existirem, gerando um erro de “undefined”.

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks