سكريبت حالة الطقس لعرض درجة حرارة الطقس في بلوجر

الأن أصبح بامكاننا تصفح المواقع أو المدونات و مشاهدة حالة الطقس مباشرة وبدون الحاجة الى مغادرة الموقع أو المدونة التي نتصفحها للذهاب الى مواقع متخصصة بعرض حالات الطقس. اليوم نشرح لكم في مدونه مستر ميدو اضافه بسيطة و مميزة لمدونات بلوجر هي اضافة تمكن زائر مدونتك معرفة حالة الطقس ودرجة حرارة الجو في مدينته.

سكريبت لعرض حالة الطقس

هذا كود جافا سكريبت لعرض معلومات الطقس لمدينة معينة. يتم الحصول على موقع المستخدم الحالي عن طريق API الخاص بالموقع ومن ثم يتم الحصول على إسم المدينة باستخدام خدمة API لمعرفة إسم المدينة عن طريق تحديد خطوط الطول والعرض. ثم يتم الحصول على معلومات الطقس للمدينة الحالية عن طريق API من موقع Openweathermap.org. وتحديداً، يتم عرض الحرارة الحالية وإسم المدينة على صفحة الويب.

مشاهدة حالة الطقس

اضافة اداة حالة الطقس الى بلوجر

لاضافة سكريبت Weather widgets حالة الطقس الى مدونة بلوجر وتعمل بشكل صحيح عليك اتباع الشرح والخطوات بعناية.

1. - اذهب الى موقع Openweathermap.org وانشاء حساب واستخرج مفتاح API_KEY خاص بك.
2. - اذهب الى الصفحه الرئيسيه بلوجر.
3. - من القائمه في الجانب الايمن اذهب الى الصفحات.
4. - قم بانشاء صفحه جديده واعطيها اسم Weather.
5. - قم بنسخ الكود التالي والصقه في الصفحه الذي انشاتها.

هذا الكود قابل للتطوير، يمكن إضافة مزيد من المعلومات عن الطقس على سبيل المثال، الضغط الجوي والرطوبة ومدة الشمس وغير ذلك. يمكن أيضًا تخصيص تصميم الناتج وتحسين تجربة المستخدم بما يناسبك.

<div id="weather"></div>
<script>
const API_KEY = "your_api_key_here";
const weatherElement = document.querySelector("#weather");
async function getWeather() {
  try {
    const position = await getCurrentPosition();
    const lat = position.coords.latitude;
    const lon = position.coords.longitude;
    const city = await getCityName(lat, lon);
    const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}`);
    const data = await response.json();
    const temperature = data.main.temp - 273.15;
    weatherElement.innerHTML =  `<p class="note">Temperature in ${city}: ${temperature.toFixed(1)}°C.</p>`;
  } catch (error) {
    weatherElement.innerHTML = `<p class="note wr">Error: ${error.message}.</p>`;
  }
}
async function getCurrentPosition() {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(resolve, error => {
      reject(error);
    });
  });
}
async function getCityName(lat, lon) {
  const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}`);
  const data = await response.json();
  return data.name;
}
getWeather();
</script>

<style>
  #weather {
    text-align: center;
    font-family: Arial, sans-serif;
  }
  
  .note {
    color: #333;
    font-size: 20px;
  }
  
  .wr {
    color: red;
  }
  
  .week-forecast {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 18px;
    display: inline-block;
  }
  
  .week-forecast li {
    margin: 10px 0;
  }
</style>

<div id="weather"></div>

شرح الكود والتعديل عليه

هذا الكود يقوم بعرض درجة حرارة الطقس في مدينة معينة على الصفحة الخاصة بك. يتم الحصول على موقع الجهاز الحالي باستخدام دالة getCurrentPosition و تحويل إحداثيات الطول و العرض إلى اسم المدينة باستخدام دالة getCityName. ثم يتم الإطلاع على درجة حرارة الطقس في هذه المدينة باستخدام API الخاص ب OpenWeatherMap. وفي النهاية، يتم عرض الدرجة الحالية لدرجة حرارة الطقس على الصفحة على العنصر الذي يتم تحديده بواسطة الإختيار #weather.
يتم تخزين مفتاح API خاص بك في المتغير API_KEY. الدالات getCurrentPosition و getCityName كلاهما تعد دالات تابعة لإجراء عملية غير متزعجة و تعطي إشعاراً إذا كانت العملية ناجحة أو لم تنجح. و عند عدم النجاح، ستعرض الدالة الخاصة بعرض الخطأ الذي حدث.
يتم تشغيل الدالة getWeather عند تحميل الصفحة و يتم تشغيل الدالات الأخرى من داخل دالة getWeather.

ينتهي هنا موضوعنا عن "سكريبت حالة الطقس لعرض درجة حرارة الطقس في بلوجر"، ونلتقي في موضوع جديد على مدونة مستر ميدو. دمتم في امان الله :)

فتح رابط التوجية