66- آموزش جاوااسکریپت | پروژه عملی : قسمت 2 از 4 - دریافت اطلاعات آب‌وهوا از API و ساخت کلاس Weather

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

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

---

ساخت کلاس Weather

ابتدا در فایل weather.js یک کلاس جدید تعریف می‌کنیم. این کلاس، کلید API، نام شهر و نام ایالت را نگهداری می‌کند.

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

توضیح بخش constructor

در اینجا:

• apiKey کلید دسترسی به API است
• city نام شهر را نگه می‌دارد
• state نام ایالت را نگه می‌دارد

مقدار apiKey باید با کلید واقعی API شما جایگزین شود.

---

ساخت متد دریافت اطلاعات آب‌وهوا

حالا باید متدی بسازیم که با استفاده از fetch اطلاعات آب‌وهوا را از API دریافت کند. برای این کار از async/await استفاده می‌کنیم.

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;
  }
}

---

چرا فقط current_observation را برمی‌گردانیم؟

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

این کار باعث می‌شود:

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

---

ساخت متد تغییر موقعیت

برای اینکه بعداً کاربر بتواند شهر و ایالت را تغییر دهد، یک متد دیگر هم به کلاس اضافه می‌کنیم.

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;
  }
}

این متد فقط مقادیر جدید city و state را در شیء فعلی ذخیره می‌کند تا درخواست بعدی با موقعیت جدید ارسال شود.

---

مقداردهی اولیه کلاس در app.js

بعد از ساخت کلاس Weather، باید آن را در فایل app.js مقداردهی کنیم. فعلاً می‌توانیم یک شهر و ایالت ثابت برای تست در نظر بگیریم.

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

در ادامه، این مقادیر از localStorage دریافت خواهند شد، اما فعلاً برای تست، مقدار ثابت کافی است.

---

فراخوانی متد getWeather

از آنجا که متد getWeather یک تابع async است، خروجی آن به‌صورت Promise برگردانده می‌شود. بنابراین باید با then و catch از آن استفاده کنیم.

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

در اینجا:

• در then داده‌های دریافتی را دریافت می‌کنیم
• در catch خطاهای احتمالی را مدیریت می‌کنیم

---

بررسی نتیجه در مرورگر

اگر کد را اجرا کنید و کنسول مرورگر را باز کنید، باید یک آبجکت شامل اطلاعات آب‌وهوای شهر انتخاب‌شده ببینید.

این آبجکت می‌تواند شامل داده‌هایی مثل موارد زیر باشد:

• موقعیت جغرافیایی
• وضعیت آب‌وهوا
• دما
• رطوبت
• شدت باد
• آیکون وضعیت آب‌وهوا

در این مرحله، فقط داده‌ها را در کنسول بررسی می‌کنیم تا مطمئن شویم درخواست به‌درستی انجام می‌شود.

---

رفع خطای نام کلاس

اگر با خطایی مثل نمونه زیر روبه‌رو شدید:

weather is not defined

یا

Weather is not defined

باید بررسی کنید که نام کلاس و شیء را درست نوشته باشید. چون JavaScript به حروف کوچک و بزرگ حساس است، Weather با weather تفاوت دارد.

نمونه صحیح:

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

---

تست متد changeLocation

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

weather.changeLocation('Miami', 'FL');

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

با این کار، اطلاعات آب‌وهوای شهر جدید دریافت می‌شود.

---

انتقال منطق دریافت آب‌وهوا به یک تابع جداگانه

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

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

این کار باعث می‌شود بعداً بتوانیم همین تابع را در بخش‌های مختلف برنامه فراخوانی کنیم.

---

اجرای دریافت اطلاعات هنگام بارگذاری صفحه

حالا می‌خواهیم به‌محض بارگذاری صفحه، اطلاعات آب‌وهوا دریافت شود. برای این کار از رویداد DOMContentLoaded استفاده می‌کنیم.

document.addEventListener('DOMContentLoaded', getWeather);

به این شکل، وقتی صفحه کامل بارگذاری شد، تابع getWeather اجرا می‌شود و اطلاعات آب‌وهوا دریافت خواهد شد.

---

ساختار فعلی فایل app.js

در این مرحله، فایل app.js می‌تواند به این شکل باشد:

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

document.addEventListener('DOMContentLoaded', getWeather);

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

---

نتیجه این بخش

تا اینجا توانستیم:

• کلاس Weather را بسازیم
• کلید API، شهر و ایالت را در آن ذخیره کنیم
• با استفاده از fetch اطلاعات آب‌وهوا را دریافت کنیم
• فقط بخش current_observation را برگردانیم
• امکان تغییر موقعیت را اضافه کنیم
• دریافت اطلاعات را هنگام بارگذاری صفحه اجرا کنیم

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

---

ادامه مسیر

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