Создание приложения погоды с помощью Node.js и Express.js

Создание приложения погоды с помощью Node.js и Express.js — фантастический проект! В этом руководстве мы создадим простое погодное приложение, которое извлекает данные о погоде из API OpenWeatherMap на основе предоставленных пользователем местоположений. Затем мы будем отображать информацию о погоде в удобном для пользователя виде, включая почасовые и ежедневные прогнозы.

Предпосылки

Чтобы следовать этому руководству, на вашем компьютере должно быть установлено следующее:

Node.js: Вы можете скачать его с официального сайта (https://nodejs.org/).
npm: Node.js поставляется с предустановленным менеджером пакетов Node npm.
Ключ API от OpenWeatherMap: Зарегистрируйте бесплатную учетную запись для получения ключа API (https://home.openweathermap.org/users/sign_up).

Давайте начнем!

Шаг 1: Настройте проект

Создайте новый каталог для проекта и инициализируйте новый проект Node.js с помощью npm:

mkdir weather-app 
cd weather-app 
npm init -y

Шаг 2: Установите зависимости

Мы будем использовать Express.js в качестве веб-фреймворка и node-fetch для выполнения HTTP-запросов к API OpenWeatherMap. Установите эти пакеты:

npm install express node-fetch

express: быстрый и минималистичный веб-фреймворк для Node.js.
node-fetch: Облегченный модуль, который привносит window.fetch в Node.js, позволяя нам делать HTTP-запросы.

Шаг 3: Структура проекта

Создайте следующую структуру каталогов для нашего проекта:

weather-app
├── node_modules/
├── src/
│   └── routes/
└── index.js

Шаг 4: Внедрите сервер

В index.js настройте Express и добавьте маршрут для получения данных о погоде:

// index.js
const express = require('express');
const fetch = require('node-fetch');
const app = express();
const PORT = 3000;

const OPENWEATHERMAP_API_KEY = 'YOUR_OPENWEATHERMAP_API_KEY';

app.use(express.static('public'));

// Route to fetch weather data
app.get('/weather', async (req, res) => {
  const { location } = req.query;

  if (!location) {
    return res.status(400).json({ error: 'Missing location query parameter' });
  }

  const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(
    location
  )}&appid=${OPENWEATHERMAP_API_KEY}&units=metric`;

  try {
    const response = await fetch(apiUrl);
    const data = await response.json();
    if (data.cod !== 200) {
      return res.status(data.cod).json({ error: data.message });
    }

    const weatherData = {
      location: data.name,
      temperature: data.main.temp,
      description: data.weather[0].description,
      icon: data.weather[0].icon,
    };

    return res.json(weatherData);
  } catch (error) {
    console.error(error);
    return res.status(500).json({ error: 'Failed to fetch weather data' });
  }
});

app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

Обязательно замените YOUR_OPENWEATHERMAP_API_KEY вашим фактическим ключом API из OpenWeatherMap.

Шаг 5: Создайте интерфейс

В каталоге public создайте файл index.html для отображения данных о погоде:

<!-- public/index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Weather App</title>
</head>
<body>
  <h1>Weather App</h1>
  <form id="weatherForm">
    <label for="location">Enter location:</label>
    <input type="text" id="location" name="location" required />
    <button type="submit">Get Weather</button>
  </form>
  <div id="weatherInfo"></div>

  <script>
    const weatherForm = document.getElementById('weatherForm');
    const weatherInfo = document.getElementById('weatherInfo');

    weatherForm.addEventListener('submit', async (event) => {
      event.preventDefault();
      const formData = new FormData(weatherForm);
      const location = formData.get('location');
      const response = await fetch(`/weather?location=${encodeURIComponent(location)}`);
      const data = await response.json();
      displayWeatherData(data);
    });

    function displayWeatherData(data) {
      weatherInfo.innerHTML = `
        <h2>${data.location}</h2>
        <p>Temperature: ${data.temperature} °C</p>
        <p>Description: ${data.description}</p>
        <img src="http://openweathermap.org/img/w/${data.icon}.png" alt="${data.description}" />
      `;
    }
  </script>
</body>
</html>

Шаг 6: Запустите сервер

Теперь вы можете запустить сервер, выполнив:

node index.js

Откройте http://localhost:3000 в своем браузере, и вы должны увидеть приложение Погода. Введите местоположение в форму, нажмите «Получить погоду», и она отобразит информацию о погоде для этого местоположения.

Заключение

Поздравляем! Вы успешно создали приложение погоды, используя Node.js, Express.js и API OpenWeatherMap. Это базовый пример для начала работы, и вы можете улучшить его, добавив дополнительные функции, такие как отображение почасовых и ежедневных прогнозов, или используя интерфейсную структуру, такую как React или Vue.js, для более интерактивного пользовательского интерфейса. Удачного кодирования!

Поддержите меня кофе: https://www.buymeacoffee.com/sarahdev

Создание приложения погоды с помощью Node.js и Express.js — фантастический проект!