Desenvolvimento de Aplicação de Previsão do Tempo Semanal

Introdução

Neste projeto, você aprenderá como criar uma aplicação de previsão do tempo que exibe as informações meteorológicas semanais para uma localização específica. O projeto envolve a obtenção de dados meteorológicos de uma API, a análise da resposta e a atualização dinâmica dos elementos HTML para apresentar a previsão do tempo ao usuário.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como obter dados de previsão do tempo de uma API usando a funcionalidade AJAX do jQuery
• Como vincular os dados obtidos aos elementos HTML correspondentes na página web
• Como exibir as informações de previsão do tempo semanal em um formato amigável ao usuário

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Criar uma aplicação simples de previsão do tempo que fornece aos usuários informações meteorológicas semanais
• Entender como fazer requisições AJAX para obter dados de uma API
• Demonstrar a capacidade de manipular o DOM e atualizar elementos HTML usando jQuery

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga os passos abaixo para completar esta etapa:

Abra a pasta do projeto. A estrutura de diretórios é a seguinte:

├── images        ## recursos de imagem
├── js            ## diretório para arquivos js e arquivos json
├── index.html    ## página de previsão do tempo
├── style.css     ## arquivo css

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente; você verá a página.

Obter Dados da Previsão do Tempo

Nesta etapa, você aprenderá como obter os dados de previsão do tempo semanal para W-town usando a API fornecida.

1. Abra o arquivo js/index.js no seu editor de código.
2. Localize a função getweather(), que é responsável por obter os dados de previsão do tempo.
3. Dentro da função getweather(), use o método $.get() do jQuery para fazer uma requisição GET para o endpoint da API js/weather.json.

// TODO
$.get("js/weather.json", function (data) {
  // Bind the weather forecast data to the HTML elements
  // ...
});

4. Os dados de resposta da API serão passados para a função de callback como o parâmetro data. Esses dados contêm as informações de previsão do tempo semanal.

Vincular Dados da Previsão do Tempo ao HTML

Nesta etapa, você aprenderá como vincular os dados de previsão do tempo obtidos aos elementos HTML correspondentes na página.

1. Dentro da função de callback do método $.get(), localize o código onde você vinculará os dados ao HTML.
2. Use jQuery para selecionar os elementos HTML necessários, como o ícone do tempo, a descrição do tempo, a temperatura e as informações sobre o vento.

function getweather() {
  // TODO
  $.get("js/weather.json", function (data) {
    let item = $(".item");
    let img, one, two, three, time;
    for (let i = 0; i < data.result.length; i++) {
      img = item[i].children[0];
      one = item[i].children[1].children[0];
      two = item[i].children[1].children[1];
      three = item[i].children[1].children[2];
      time = item[i].children[1].children[3].children;
      img.src = data.result[i].weather_icon;
      one.innerText = data.result[i].weather;
      two.innerText = data.result[i].temperature;
      three.innerText = data.result[i].winp;
      time[0].innerText = data.result[i].days;
      time[1].innerText = data.result[i].week;
    }
  });
}

3. O código acima itera através do array data.result, que contém as informações de previsão do tempo semanal. Para cada item, ele seleciona os elementos HTML correspondentes e atualiza seu conteúdo com os dados da resposta da API.
4. Salve as alterações no arquivo js/index.js.
5. Atualize a página da web e você deverá ver as informações de previsão do tempo semanal exibidas conforme mostrado na imagem de destino.

Parabéns! Você concluiu com sucesso o projeto de previsão do tempo, obtendo os dados da API e vinculando-os aos elementos HTML na página.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.