67- آموزش جاوااسکریپت | پروژه عملی : قسمت 3 از 4 - نمایش داده‌های آب‌وهوا در رابط کاربری با کلاس UI

در بخش قبل، کلاس Weather را ساختیم و اطلاعات آب‌وهوا را از API دریافت کردیم. حالا باید این داده‌ها را از حالت نمایش در کنسول خارج کنیم و داخل رابط کاربری قرار دهیم.

برای این کار، یک کلاس جدید به نام UI می‌سازیم. وظیفه این کلاس، دریافت داده‌های آب‌وهوا و قرار دادن آن‌ها داخل عناصر مشخص‌شده در صفحه است.

---

ساخت کلاس UI

ابتدا فایل ui.js را ایجاد می‌کنیم و کلاس UI را داخل آن می‌نویسیم. در سازنده این کلاس، همه عناصر صفحه که قرار است مقدار بگیرند را با getElementById انتخاب می‌کنیم.

class UI {
  constructor() {
    this.location = document.getElementById('w-location');
    this.desc = document.getElementById('w-desc');
    this.string = document.getElementById('w-string');
    this.icon = document.getElementById('w-icon');
    this.humidity = document.getElementById('w-humidity');
    this.feelsLike = document.getElementById('w-feels-like');
    this.dewpoint = document.getElementById('w-dewpoint');
    this.wind = document.getElementById('w-wind');
  }
}

---

چرا عناصر را جداگانه انتخاب می‌کنیم؟

در این پروژه، به‌جای اینکه یک قالب کامل HTML را با JavaScript جایگزین کنیم، هر بخش از اطلاعات را در یک عنصر جداگانه قرار می‌دهیم. این روش چند مزیت دارد:

• کنترل بهتر روی هر بخش از رابط کاربری
• خوانایی بیشتر کد
• توسعه و نگهداری ساده‌تر
• انعطاف‌پذیری بالاتر برای تغییر ظاهر یا محتوا

---

ساخت متد paint

حالا متدی به نام paint اضافه می‌کنیم. این متد، داده‌های دریافتی از API را گرفته و در عناصر صفحه قرار می‌دهد.

class UI {
  constructor() {
    this.location = document.getElementById('w-location');
    this.desc = document.getElementById('w-desc');
    this.string = document.getElementById('w-string');
    this.icon = document.getElementById('w-icon');
    this.humidity = document.getElementById('w-humidity');
    this.feelsLike = document.getElementById('w-feels-like');
    this.dewpoint = document.getElementById('w-dewpoint');
    this.wind = document.getElementById('w-wind');
  }

  paint(weather) {
    this.location.textContent = weather.display_location.full;
    this.desc.textContent = weather.weather;
    this.string.textContent = weather.temperature_string;
    this.icon.setAttribute('src', weather.icon_url);
    this.humidity.textContent = `رطوبت نسبی: ${weather.relative_humidity}`;
    this.feelsLike.textContent = `دمای احساسی: ${weather.feelslike_string}`;
    this.dewpoint.textContent = `نقطه شبنم: ${weather.dewpoint_string}`;
    this.wind.textContent = `باد: ${weather.wind_string}`;
  }
}

---

داده‌ها از کجا می‌آیند؟

اطلاعاتی که در متد paint استفاده می‌کنیم، از همان آبجکت current_observation می‌آیند که در کلاس Weather برمی‌گردانیم. به همین دلیل، دسترسی به داده‌ها ساده و مستقیم است.

مهم‌ترین فیلدهای استفاده‌شده در این بخش عبارت‌اند از:

• display_location.full برای نمایش شهر و ایالت
• weather برای نمایش وضعیت آب‌وهوا
• temperature_string برای نمایش دما
• icon_url برای نمایش آیکون وضعیت
• relative_humidity برای نمایش رطوبت
• feelslike_string برای نمایش دمای احساسی
• dewpoint_string برای نمایش نقطه شبنم
• wind_string برای نمایش سرعت یا وضعیت باد

---

به‌روزرسانی app.js

حالا باید یک نمونه از کلاس UI بسازیم و نتیجه دریافت‌شده از API را به متد paint بدهیم.

const weather = new Weather('Boston', 'MA');
const ui = new UI();

document.addEventListener('DOMContentLoaded', getWeather);

function getWeather() {
  weather.getWeather()
    .then(results => {
      ui.paint(results);
    })
    .catch(error => {
      console.log(error);
    });
}

---

نتیجه این تغییر

با این ساختار، دیگر فقط داده‌ها را در کنسول نمی‌بینیم؛ بلکه آن‌ها مستقیماً در صفحه نمایش داده می‌شوند. این یعنی رابط کاربری اپلیکیشن به اطلاعات واقعی متصل شده است.

در این مرحله:

• داده‌ها از API دریافت می‌شوند
• کلاس Weather مسئول گرفتن داده‌هاست
• کلاس UI مسئول نمایش داده‌هاست
• فایل app.js نقش هماهنگ‌کننده را دارد

این جداسازی باعث می‌شود پروژه تمیزتر، حرفه‌ای‌تر و قابل توسعه‌تر باشد.

---

ساختار نهایی این بخش

// weather.js
class Weather {
  constructor(city, state) {
    this.apiKey = 'YOUR_API_KEY';
    this.city = city;
    this.state = state;
  }

  async getWeather() {
    const response = await fetch(
      `http://api.wunderground.com/api/${this.apiKey}/conditions/q/${this.state}/${this.city}.json`
    );

    const responseData = await response.json();
    return responseData.current_observation;
  }

  changeLocation(city, state) {
    this.city = city;
    this.state = state;
  }
}

// ui.js
class UI {
  constructor() {
    this.location = document.getElementById('w-location');
    this.desc = document.getElementById('w-desc');
    this.string = document.getElementById('w-string');
    this.icon = document.getElementById('w-icon');
    this.humidity = document.getElementById('w-humidity');
    this.feelsLike = document.getElementById('w-feels-like');
    this.dewpoint = document.getElementById('w-dewpoint');
    this.wind = document.getElementById('w-wind');
  }

  paint(weather) {
    this.location.textContent = weather.display_location.full;
    this.desc.textContent = weather.weather;
    this.string.textContent = weather.temperature_string;
    this.icon.setAttribute('src', weather.icon_url);
    this.humidity.textContent = `رطوبت نسبی: ${weather.relative_humidity}`;
    this.feelsLike.textContent = `دمای احساسی: ${weather.feelslike_string}`;
    this.dewpoint.textContent = `نقطه شبنم: ${weather.dewpoint_string}`;
    this.wind.textContent = `باد: ${weather.wind_string}`;
  }
}

// app.js
const weather = new Weather('Boston', 'MA');
const ui = new UI();

document.addEventListener('DOMContentLoaded', getWeather);

function getWeather() {
  weather.getWeather()
    .then(results => {
      ui.paint(results);
    })
    .catch(error => {
      console.log(error);
    });
}

---

ادامه مسیر

در بخش بعدی، قابلیت تغییر موقعیت را کامل می‌کنیم. سپس داده‌های شهر و ایالت را در localStorage ذخیره می‌کنیم تا کاربر در مراجعه‌های بعدی همان موقعیت قبلی را ببیند.