دانلود اسکریپت JavaScript HTML اپلیکیشن آب‌وهوا از طریق API OpenWeatherMap


در دنیای امروز، پیش‌بینی وضعیت آب‌وهوا و دسترسی سریع و آسان به اطلاعات مربوط به شرایط جوی، اهمیت زیادی پیدا کرده است. به همین دلیل، توسعه‌دهندگان وب و برنامه‌نویسان، همواره به دنبال راهکارهای نوین و کارآمد برای پیاده‌سازی اپلیکیشن‌های مربوط به آب‌وهوا هستند. یکی از بهترین و محبوب‌ترین روش‌ها، استفاده از APIهای معتبر و قدرتمند، مانند OpenWeatherMap است. در این مقاله، به صورت کامل و جامع، درباره نحوه دانلود و استفاده از اسکریپت JavaScript و HTML برای ساخت یک اپلیکیشن آب‌وهوا از طریق API OpenWeatherMap توضیح خواهیم داد.
مقدمه: اهمیت API در توسعه اپلیکیشن‌های آب‌وهوا
API یا رابط برنامه‌نویسی نرم‌افزار، مجموعه‌ای از توابع و پروتکل‌ها است که امکان ارتباط و انتقال داده‌ها بین نرم‌افزارها را فراهم می‌کند. در حوزه وضعیت آب‌وهوا، APIها نقش کلیدی دارند، چون می‌توانند داده‌های زنده، دقیق و به‌روز را از سرویس‌های معتبر دریافت و در اپلیکیشن‌های مختلف نمایش دهند. یکی از برترین سرویس‌ها در این حوزه، OpenWeatherMap است که با ارائه APIهای رایگان و پولی، اطلاعات متنوع و قابل اعتماد درباره وضعیت جوی، دما، رطوبت، باد، فشار هوا و پیش‌بینی‌های بلندمدت و کوتاه‌مدت را در اختیار توسعه‌دهندگان قرار می‌دهد.
گام نخست: ثبت‌نام و دریافت API کلید (API Key)
قبل از هر چیز، برای استفاده از API OpenWeatherMap باید در سایت رسمی آن ثبت‌نام کنید. پس از ثبت‌نام، یک API کلید منحصر به فرد دریافت می‌کنید که باید در درخواست‌های API خود از آن استفاده کنید. این کلید، نقش هویت‌دهنده را دارد و به سرویس اجازه می‌دهد درخواست‌های شما را معتبر و امن بشمارد. ثبت‌نام بسیار ساده است؛ کافی است وارد سایت openweathermap.org شوید، فرم ثبت‌نام را پر کنید و پس از فعال‌سازی حساب، به بخش API Keys بروید و کلید خود را دریافت نمایید.
نحوه ساخت درخواست API و دریافت داده‌ها
پس از دریافت API کلید، حال می‌توانید درخواست‌های HTTP به سرور OpenWeatherMap ارسال کنید. این درخواست‌ها معمولا به صورت URLهای خاص هستند که پارامترهای مختلفی مانند شهر، کشور، نوع داده‌هایی که می‌خواهید دریافت کنید و زبان پاسخ را مشخص می‌کنند. برای مثال، درخواست برای دریافت اطلاعات آب‌وهوا در تهران، به صورت زیر است:
plaintext  


http://api.openweathermap.org/data/
  1. 5/weather?q=Tehran&appid=YOUR_API_KEY&units=metric&lang=fa

در این URL، `q=Tehran` نام شهر، `appid=YOUR_API_KEY` کلید API، `units=metric` برای دریافت داده‌ها به واحد سلسیوس، و `lang=fa` برای زبان فارسی است. با ارسال این درخواست، سرور، داده‌های مربوط به وضعیت آب‌وهوا در تهران را برمی‌گرداند که در قالب JSON است، یعنی به صورت ساختاری و قابل خواندن برای برنامه.
ساخت اپلیکیشن آب‌وهوا با HTML و JavaScript
برای پیاده‌سازی این درخواست و نمایش داده‌ها، باید یک صفحه HTML ساده بسازید و در آن اسکریپت JavaScript قرار دهید. در ادامه، یک نمونه کد کامل و کاربردی آورده‌ایم، که به راحتی می‌توانید آن را کپی و در پروژه خود استفاده کنید.
کد HTML و JavaScript:
html  


<!DOCTYPE html>


<html lang="fa">


<head>


<meta charset="UTF-8" />


<meta name="viewport" content="width=device-width, initial-scale=
  1. 0" />


<title>اپلیکیشن آب‌وهوا</title>


<style>


  body { font-family: Tahoma, Verdana, sans-serif; background-color: #f0f8ff; padding: 20px; }


  #weatherContainer { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,
  1. 1); }


  h1 { text-align: center; }


  #city { font-size: 24px; font-weight: bold; }


  #temp { font-size: 48px; margin: 10px 0; }


  #desc { fon...  ← ادامه مطلب در magicfile.ir