WDD 231: Desenvolvimento Frontend para Web I

S03 - Atividades de Aprendizagem: Usando uma API de Previsão do Tempo

Visão Geral

O poder da internet está na capacidade de compartilhar informações. A web é uma coleção de documentos que estão vinculados por meio de hiperlinks. A web também é uma coleção de APIs (Interfaces de Programação de Aplicações ou Application Programming Interfaces) que permitem acessar e usar dados de outras aplicações e serviços.

Esta atividade tem como objetivo apresentar uma fonte externa de dados climáticos que pode ser usada para fornecer informações meteorológicas em tempo real com base na localização e outros parâmetros.

Preparação

Esta atividade usa a API do OpenWeatherMap, e você precisará criar uma conta gratuita para usar os dados. Para criar a conta, basta enviar algumas informações básicas. Você não precisa usar cartão de crédito.
O conteúdo desse site está em inglês, e você precisará usar a tradução do seu navegador se quiser ver o conteúdo em português. Vamos usar o site traduzido para fazer o passo a passo.

OpenWeatherMap

  1. Acesse o OpenWeatherMap e traduza o site para o português usando a tradução do seu navegador. Encontre a caixa "Pesquisar cidade" abaixo da imagem principal da página. Logo ao lado direito você encontrará a opção do sistema de unidades a ser utilizado. Escolha "Sistema métrico: °C, m/s".
  2. Digite o nome da sua cidade e clique em Procurar.
    Dica: digite apenas o nome da cidade, sem estado ou país. O sistema vai sugerir opções.
  3. Clique no resultado da busca apropriado para sua cidade/localização.
  4. Confira os dados meteorológicos fornecidos. Você pode alternar entre resultados em sistema métrico (°C) ou imperial (°F) usando os botões no canto superior direito da interface de busca.
  5. Agora, acesse o menu de APIs.
  6. Na seção Dados meteorológicos atuais, as contas que você usará podem acessar gratuitamente as coleções:
    • Dados meteorológicos atuais
    • Previsão horária para 4 dias
    • Diversos outros

    Vale lembrar que essas são as coleções que você pode usar com a Conta Gratuita. As demais coleções só estão disponíveis para contas pagas. Sempre há limitações, independentemente da conta, por isso é importante consultar a documentação de qualquer API que você esteja usando.

  7. Captura de Tela dos Dados Meteorológicos Atuais da API do OpenWeatherMap
    API de Dados Meteorológicos Atuais
    Role para baixo até a seção Dados meteorológicos atuais e clique no botão da Documentação da API.

    A página Dados Meteorológicos Atuais explica como acessar os dados meteorológicos de um local. A maioria das APIs fornece documentação que facilita o uso dos dados. Nesse documento, você encontrará como fazer uma chamada de API, juntamente com exemplos de respostas.

  8. Na documentação da API Dados Meteorológicos Atuais, encontre a seção Como fazer uma chamada de API e estude os parâmetros e exemplos de API fornecidos.
  9. Adicione a página aos favoritos para consultar futuramente.

Crie uma conta

  1. Acesse a página OpenWeatherMap: Preços.
  2. Role para baixo até a seção Acesso gratuito. Nela você encontrará Condições meteorológicas atuais e previsões e Dados atuais, projeções e dados históricos para a educação. Na parte de baixo da primeira, você encontrará o botão Obtenha a chave da API. Esse tipo de conta será suficiente.

    Este serviço é fornecido sob a licença Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0). Os dados são abertos e licenciados pela Open Data Commons Open Database License (ODbL).

  3. Clique no botão Obtenha a chave da API.
  4. Siga as instruções de criação de conta para obter uma chave de API, que precisa ser guardada com segurança e usada somente por você. Essa chave exclusiva é necessária nas requisições de dados que você faz a este serviço.

    Não use chaves de API de outras pessoas. Fazer isso pode indicar que você não está aprendendo por meio de padrões comprovados de assimilação de conteúdo e, portanto, não está produzindo conteúdo original, o que é essencial para seu aprendizado.

  5. Registre a chave de API (appid) em um local seguro. Você precisará dela para esta atividade e para suas tarefas. Normalmente você receberá sua chave de API por e-mail. Caso isso não aconteça, basta clicar no seu usuário (lado direito do menu superior) e uma lista de opções aparecerá. Clique em Minhas chaves de API para ver sua chave.

Instruções da Atividade

Nesta atividade prática, você criará uma página simples que exibe algumas condições climáticas atuais para um local específico no mundo: Trier, Alemanha.

Localização

Porta Nigra em Trier, Alemanha
Trier, Alemanha – Porta Nigra
  1. Usando o Google Maps, encontre as coordenadas de latitude e longitude de Trier, Alemanha.
    1. Primeiro localize a cidade no mapa.
    2. No mapa, clique com o botão direito do mouse no nome da cidade.
    3. Clique nas coordenadas de latitude e longitude exibidas. Isso copiará as coordenadas para sua área de transferência.
      Não é necessário usar tantos números nas coordenadas para encontrar a estação meteorológica mais próxima. Use 2 (dois) dígitos após a casa decimal.
      Exemplo de informações de localização do Google Maps
      Informações de Localização
      Verifique Suas Coordenadas

      Trier, Alemanha, está localizada a 49.75° N de latitude e 6.64° L de longitude.

HTML

  1. Usando o VS Code, crie uma nova página HTML na sua pasta wdd231.
  2. Use o seguinte modelo para o corpo do seu documento HTML: 
    <h1>Teste da API do OpenWeatherMap.org</h1>
<main>
  <p>A temperatura atual em Trier, Alemanha é <span id="temp-atual"></span></p>
  <figure>
    <img id="icone-do-clima" src="" alt="">
    <figcaption></figcaption>
  </figure>
</main>
<footer>
  [Digite Seu Nome Aqui] | OpenWeatherMap.org | CC BY-SA 4.0
</footer>

JavaScript

  1. Crie um novo arquivo JavaScript e faça referência à fonte desse arquivo no seu arquivo HTML. Certifique-se de salvar esse arquivo em um local apropriado, considerando os padrões de arquivos e pastas do curso.
  2. No arquivo JavaScript, selecione todos os elementos HTML que precisarão ser processados e atribua-os às variáveis const.
    Avalie Seu Conhecimento – Exemplo 
    // selecione os elementos HTML no documento
const tempAtual = document.querySelector('#temp-atual');
const iconeDoClima = document.querySelector('#icone-do-clima');
const descrDaLegenda = document.querySelector('figcaption');
  3. Declare uma variável const chamada url e atribua a ela uma string de URL válida, conforme fornecido na documentação da API do OpenWeatherMap apresentada acima e que você salvou nos favoritos. 
    const url = 'https://api.openweathermap.org/data/2.5/___________';
    1. Use a API de Condições Meteorológicas chamada weather (clima).
    2. Inicie uma string de consulta com o caractere "?", conforme mostrado nos exemplos.
    3. Use & entre cada par chave-valor na string de consulta nas próximas etapas.
    4. Especifique a latitude e longitude de Trier, Alemanha, usando as informações que você coletou e os exemplos fornecidos.
    5. Defina as unidades: units=imperial para o sistema imperial ou units=metric para o sistema métrico (padrão no Brasil e na maior parte do mundo)
    6. Informe sua chave de API: "appid= [digite sua chave aqui]"
  4. Defina uma função assíncrona chamada apiFetch() que usa um bloco try para lidar com erros.
    1. Armazene os resultados da busca de URL em uma variável chamada resposta.
    2. Se a resposta for OK, armazene o resultado da conversão resposta.json() em uma variável chamada dados.
    3. Envie os resultados para o console para testes.
    4. Caso contrário, dispare um Erro usando resposta.text().
    5. Conclua o bloco catch exibindo qualquer erro de try no console.
  5. Lembre-se de invocar a função apiFetch() com uma chamada em algum lugar do seu script.
    Avalie Seu Conhecimento 
    async function apiFetch() {
  try {
    const resposta = await fetch(url);
    if (resposta.ok) {
      const dados = await resposta.json();
      console.log(dados); // somente teste
      // mostrarResultados(dados); // retire o comentário quando estiver pronto
    } else {
        throw Error(await resposta.text());
    }
  } catch (erro) {
      console.log(erro);
  }
}

apiFetch();
  6. Execute a página localmente e visualize a saída do console. Encontre a temperatura atual (main.temp), a descrição do evento climático (weather.description) e a referência do ícone de imagem (weather[0].icon) com 3 caracteres nos dados.

    O array de weather (clima) indica que pode haver mais de um evento climático atual. Você só precisa se concentrar no primeiro evento climático se houver mais de um.

    O ícone é apenas um nome de código predefinido que corresponde à biblioteca de imagens do OpenWeatherMap, encontrada nos endereços:

    • https://openweathermap.org/img/w/
      Exemplo de Chuva usando ícone 10d.png:
      https://openweathermap.org/img/w/10d.png
      Garoa
    • https://openweathermap.org/img/wn (Esta versão permite dimensionamento usando @.)
      Exemplo de chuva usando ícone 10d@2x:
      https://openweathermap.org/img/wn/10d@2x.png
      Garoa

    Todas essas imagens são do tipo .png. Aqui está um link para a documentação sobre ícones de condições meteorológicas.

  7. Crie a função mostrarResultados para gerar a saída para o documento HTML fornecido.
    Avalie Seu Conhecimento – Os espaços em branco são intencionais 
    function mostrarResultados(dados) {
  tempAtual.innerHTML = `${dados._____}&deg;F`;
  const iconesrc = `https://openweathermap.org/img/w/${______}.___`;
  let desc = dados.weather[0].______;
  iconeDoClima.setAttribute('___', _____);
  iconeDoClima.setAttribute('___', _____);
  descrDaLegenda.textContent = `${descr}`;
}

Essas etapas são demonstradas na série de vídeos a seguir.

▶️ API de Previsão do Tempo - Parte 1 (Visão geral)

▶️ API de Previsão do Tempo - Parte 2 (Buscando os dados)

▶️ Clima Atual Parte 3 (Adicionando JSON à página da web)

▶️ Clima Atual Parte 4 (Adicionando um pouco de CSS)

Teste

  1. Execute esta página localmente e teste os resultados, certificando-se de que não haja erros de JavaScript e que os dados meteorológicos atuais sejam exibidos com precisão.
  2. Depure seu código JavaScript conforme necessário.
  3. Caso encontre algum problema, compartilhe-o com seu grupo no Microsoft Teams.