بیایید یک برنامه هواشناسی با جاوا اسکریپت بسازیم

ek3nk4r 2023-06-17

0 309 خواندن این مطلب 8 دقیقه زمان میبرد

بیایید یک برنامه هواشناسی با جاوا اسکریپت بسازیم

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

ساخت یک برنامه JavaScript Weather یک انتخاب پروژه عالی برای مبتدیان است، زیرا درک اساسی از DOM (مدل شیء سند) و نحوه استفاده از آن را نشان می دهد واکشی API برای واکشی داده ها از سرویس های خارجی

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

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

نگاهی اجمالی به برنامه خیره کننده ای که ما کدنویسی خواهیم کرد، بیندازید.

برنامه آب و هوا

در اینجا نسخه نمایشی زنده برای بررسی آب و هوا برنامه ☁ وجود دارد.

توجه: من یک مرور مختصر از نکات و مراحل کلیدی ارائه کرده ام که می توانید در کد خود در این مقاله بگنجانید. اگر می‌خواهید کد کامل را مرور کنید، لطفاً از مخزن Github من بازدید کنید. به راحتی آن را بررسی کنید!

HTML پایه
CSS پایه
جاوا اسکریپت پایه (دانستن از JavaScript Async/Await یک امتیاز مثبت است)

چه چیزی یاد خواهیم گرفت؟ با ایجاد این اپلیکیشن، در زمینه های زیر دانش کسب خواهیم کرد:

تعامل با DOM
استفاده از Fetch API
پیاده سازی یک سرویس API شخص ثالث

اکنون که پیش نیازها و جزئیات ضروری را درک کرده ایم، بیایید مستقیماً وارد ساختمان شویم.

خوب، بنابراین من اخیراً در مورد مفهوم APIها یاد گرفتم که به نظرم جذاب است. مدت کوتاهی پس از یادگیری در مورد آن، من به طور تصادفی با هکاتون Mini JS-thon (هکاتون یک هفته ای) که توسط FemCode آفریقا. تصمیم گرفتم شرکت کنم و حدس بزنم چه چیزی ساخته ام؟ یک برنامه آب و هوا در زمان واقعی.

پیش بینی آب و هوا: اطلاعات آب و هوا را در زمان واقعی برای شهر مشخص شده نمایش می دهد.
ورودی کاربر: این ویژگی به کاربران امکان می دهد نام شهری را که می خواهند از پیش بینی آب و هوا مطلع شوند، وارد کنند.
این نرم افزار جزئیات رطوبت و فشار هوا را ارائه می دهد.
تبدیل دما: این ویژگی به شما امکان می دهد پیش بینی آب و هوا را بر حسب سانتیگراد (درجه سانتیگراد) و فارنهایت (درجه فارنهایت) مشاهده کنید.

فهرست مطالب

مرحله 1

اول از همه، ما باید محیط را تنظیم کنیم و همه منابع را اضافه کنیم. از ویرایشگر کد دلخواه خود استفاده کنید، پوشه ای به نام «برنامه آب و هوا» ایجاد کنید یا هر نامی را که ترجیح می دهید انتخاب کنید. در داخل پوشه، پوشه ها و فایل های لازم را ایجاد کنید و منابع مورد نیاز را مانند تصویر زیر اضافه کنید. 👇👇

توضیحات تصویر

می توانید تمامی منابع را از لینک ارائه شده 👉 اینجا 👈 دانلود کنید.

گام 2

با ایجاد قالب استاندارد فایل HTML شروع کنید. عنوان دلخواه خود را انتخاب کنید
پیوند دهید style.css و index.js فایل‌ها و فونت مورد نظر گوگل را درج کنید. من فونت Lora را وارد کرده ام style.css. (می توانید فونت های بیشتری را در فونت های گوگل کاوش کنید).

نشانه گذاری برنامه

فایل HTML پایه ای خواهد بود، هیچ چیز پیچیده ای نیست. همچنین فایل HTML باید هم به فایل CSS و هم به فایل JS پیوند داده شود.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!----------------- cSS ----------------->
    <link rel="stylesheet" href="./style.css" />
    <!----------------- Favicon ----------------->
    <link rel="shortcut icon" href="../images/clouds.png" type="image/x-icon" />
    <title>Weather App</title>
  </head>
  <body>
    <div class="card">
        <h1>Weather App</h1>

        <!-- Search bar start -->
        <div class="search">
            <input id="search-result" type="text" placeholder="enter city name" spellcheck="false" name="city" required/>
            <button class="btn">search</button>
        </div>
        <!-- Search bar end -->

        <div class="err">
            <p>Invalid city name</p>
        </div>

        <!-- Weather Section start -->
        <div class="weather">
            <img src="images/clouds.png" alt=" clouds" class="weather-icon" />
            <h1 id="temp" class="temp"></h1>
            <h2 class="city">Lagos, NG</h2>
        <!-- Weather Section end -->

        <!-- Card section start -->
        <div class="details">
            <div class="col">
                <img src="../images/humidity.png" alt="humidity" />

                <div class="card-details">
                    <p class="humidity">66%</p>
                    <p>Humidity</p>
                </div>
            </div>


            <div class="col">
                <img src="../images/barometer.png" alt="barometer" />

                <div class="card-details">
                    <p class="pressure">1013</p>
                    <p>Air pressure</p>
                </div>
            </div>
        </div>

        <!-- degree button -->
        <div class="degree-button">
            <button id="celcius" class="btn-item1">°C</button>
            <button id="farenheit" class="btn-item2">°F</button>
        <div>
        </div>
    </div>
      <script src="index.js"></script>
    </body>
  </html>
  </body>
</html>

مرحله 3 – فایل Index را استایل کنید

با یک ظاهر طراحی شده شروع کنید body و عناصر دیگر

@import url("");
*{
  margin:0;
  padding:0;
  font-family: "Lora", serif;
  box-sizing: border-box;
}

body{
background: #e8eA96;
}

مرحله 4 – بازیابی داده ها از API

برای به دست آوردن اطلاعات آب و هوا، درک فرآیند ضروری است. به دست آوردن داده ها به یک سرویس شخص ثالث متکی است، به نام OpenWeatherMap، وب سایتی که داده های آب و هوای متنوعی را از طریق API ارائه می دهد. با ادغام این API در برنامه ما، می توانیم از داده های آب و هوا در وب سایت خود استفاده کنیم. در این زمینه، یک API به عنوان یک واسطه، شبیه به یک پیشخدمت، عمل می کند و انتقال داده ها از سرور به مشتری را بر اساس درخواست های خاص مشتری تسهیل می کند.

برای استفاده از API، باید یک کلید API بدست آورید. بیایید روند به دست آوردن کلید API خود را بررسی کنیم:

مرحله 1: مرحله 1: از OpenWeatherMap بازدید کنید و گزینه “ورود به سیستم” را انتخاب کنید.

توضیحات تصویر

گام 2: اگر حساب کاربری ندارید، روی گزینه «ثبت نشده؟ ایجاد حساب کاربری» کلیک کنید.

توضیحات تصویر

مرحله 3: فرم را پر کنید و روی Sign up کلیک کنید تا حساب کاربری خود را ایجاد کنید.

توضیحات تصویر

مرحله 4: به منو بروید و گزینه API را انتخاب کنید.

مرحله 5: برای به دست آوردن اطلاعات فعلی آب و هوا، لازم است در سرویس API داده های آب و هوا مشترک شوید. برای ادامه روی دکمه Subscribe کلیک کنید.

توضیحات تصویر

مرحله 6: بعد، یک پنجره قیمت گذاری ظاهر می شود. ما به هیچ طرح پولی نیاز نداریم. بنابراین، از بین گزینه های موجود، گزینه رایگان را انتخاب کنید، و ما تقریباً به پایان رسیده ایم.

توضیحات تصویر

مرحله 7: هنگامی که با موفقیت مشترک شدید، نام پروفایل خود را در گوشه سمت راست بالا پیدا کرده و روی آن کلیک کنید. از منوی کشویی، My API Keys را انتخاب کنید.

توضیحات تصویر
مرحله 8: کلید API شما در این بخش نمایش داده می شود. به یاد داشته باشید که آن را ایمن نگه دارید و از به اشتراک گذاری آن به صورت عمومی با کسی خودداری کنید.

توضیحات تصویر

اکنون که کلید API خود را به دست آورده‌ایم، بیایید دوباره به ساخت برنامه خود بپردازیم. 😎

مرحله 5: بخش کدگذاری جاوا اسکریپت

درک نحوه ادغام APIها در جاوا اسکریپت در استفاده از APIها برای برنامه های وب ضروری است. کد کامل زیر را برای شما قرار داده ام تا بررسی کنید و درک کاملی از عملکرد آن به دست آورید.

بیایید با دریافت کلید API و URL نقطه پایانی شروع کنیم.

// API key and endpoint URL
let apiKey = "8b3c2188b1fe57******************";//Enter your API key here
let apiUrl ="https://api.openweathermap.org/data/2.5/weather?units=metric&lang=en";

کد بالا تعریف می کند apiKey متغیر، که باید با کلید API خود که از OpenWeatherMap به دست آمده جایگزین شود. را apiUrl متغیر شامل URL پایه برای ایجاد درخواست های API به نقطه پایانی آب و هوای OpenWeatherMap است. این شامل پارامترهای پرس و جو برای واحدها (متریک) و زبان (انگلیسی) است.

// DOM elements
let searchBox = document.querySelector(".search input");
let searchButton = document.querySelector(".search button");
let weather_icon = document.querySelector(".weather-icon");

سپس با استفاده از عناصر DOM را انتخاب می کنیم document.querySelector و آنها را به متغیرها اختصاص داد: searchBox (فیلد ورودی)، searchButton (دکمه)، و weather_icon (عنصر تصویر برای نماد آب و هوا).

// Variable to store Celsius value
let cel;

را cel متغیر برای ذخیره مقدار دمای سانتیگراد اعلام شده است.

// Function to check the weather for a city
async function checkWeather(city) {
  try {
    // Make API call to fetch weather data
    const response = await fetch(`${apiUrl}&q=${city}&appid=${apiKey}`);

    if (!response.ok) {
      throw new Error("Unable to fetch weather data.");
    }

    // Parse the response JSON
    const data = await response.json();

    // Update the DOM with weather information
    document.querySelector(".city").innerHTML = data.name;
    const tempCelcius = Math.round(data.main.temp);
    document.querySelector(".temp").innerHTML = tempCelcius + "°C";
    document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
    document.querySelector(".pressure").innerHTML = data.main.pressure;

    // Set the weather icon based on weather conditions
    if (data.weather[0].main === "Clouds") {
      weather_icon.src = "../images/clouds.png";
    } else if (data.weather[0].main === "Clear") {
      weather_icon.src = "../images/clear.png";
    } else if (data.weather[0].main === "Rain") {
      weather_icon.src = "../images/rain.png";
    } else if (data.weather[0].main === "Drizzle") {
      weather_icon.src = "../images/drizzle.png";
    } else if (data.weather[0].main === "Mist") {
      weather_icon.src = "../images/mist.png";
    }

    // Display the weather section and hide error message
    document.querySelector(".weather").style.display = "block";
    document.querySelector(".err").style.display = "none";

    // Store the Celsius value
    cel = tempCelcius;
  } catch (error) {
    // Display error message and hide weather section
    document.querySelector(".err").style.display = "block";
    document.querySelector(".weather").style.display = "none";
    console.error(error);
  }
}

در ادامه an را تعریف می کنیم async تابع نامگذاری شده checkWeather که وظیفه بررسی آب و هوای یک شهر خاص را بر عهده دارد.
در اینجا توضیحی درباره کاری که کد انجام می دهد آورده شده است:

checkWeather()یک پارامتر می گیرد city، که نشان دهنده شهری است که آب و هوا برای آن باید بررسی شود.
در داخل تابع، یک تماس API برای واکشی داده های آب و هوا با استفاده از آن برقرار می کند fetch تابع. فراخوانی API به API OpenWeatherMap با مشخص شده انجام می شود city و apiKey.
اگر پاسخ API موفقیت آمیز نباشد (کد وضعیت غیر از 200)، با پیغام “Unable to fetch data آب و هوا” خطایی می دهد.
اگر فراخوانی API موفقیت آمیز باشد، پاسخ JSON را با استفاده از آن تجزیه می کند response.json() روش.
سپس این تابع DOM (HTML) را با اطلاعات آب و هوای به دست آمده از پاسخ API به روز می کند. نام شهر، دما بر حسب سانتیگراد، رطوبت و مقادیر فشار را به عناصر HTML مربوطه آنها تنظیم می کند.
بر اساس شرایط آب و هوایی به دست آمده از پاسخ API، آن را تنظیم می کند src ویژگی از weather_icon عنصر به فایل تصویری نماد آب و هوا مربوطه.
با تنظیم قسمت آب و هوا را نمایش می دهد display ویژگی سبک به block و پیغام خطا را با تنظیم آن پنهان می کند display دارایی به none.
مقدار دمای سلسیوس در ذخیره می شود cel متغیر برای استفاده بعدی
اگر در حین اجرای برنامه خطایی رخ دهد try بلاک، خطا را دریافت می کند، پیام خطا را نمایش می دهد، بخش آب و هوا را پنهان می کند و خطا را در کنسول ثبت می کند.


// Event listener for search button click
searchButton.addEventListener("click", () => {
  const city = searchBox.value.trim();
  if (city !== "") {
    // Call checkWeather function with the entered city
    checkWeather(city);
  }
});

// Event listener for Fahrenheit button click
document.getElementById("farenheit").addEventListener("click", () => {
  // Convert Celsius to Fahrenheit and update the HTML
  if (cel !== undefined) {
    let fer = Math.floor(cel * 1.8 + 32);
    document.querySelector(".temp").innerHTML = fer + "°F";
  }
});

// Event listener for Celsius button click
document.getElementById("celcius").addEventListener("click", () => {
  // Restore the Celsius value and update the HTML
  if (cel !== undefined) {
    document.querySelector(".temp").innerHTML = cel + "°C";
  }
});

در اینجا قطعه کد بالا چه کاری انجام می دهد:

دکمه جستجو یک شنونده رویداد دارد که با کلیک کردن فعال می شود. را فرا می خواند checkWeather() تابع با نام شهر وارد شده به دست آمده از قسمت ورودی جستجو.
دکمه فارنهایت یک شنونده رویداد دارد که با کلیک کردن، دمای سانتیگراد را به فارنهایت تبدیل می کند. HTML را با دمای تبدیل شده به روز می کند.
دکمه سلسیوس یک شنونده رویداد دارد که دمای سانتیگراد را بازیابی می کند و با کلیک روی HTML به روز می شود.

در اینجا نمای کامل برنامه هواشناسی در زیر آمده است.

giphy

بیایید آن را سرگرم کننده تر کنیم! من دوست دارم در مورد آب و هوای منطقه شما بدانم. با اطلاعات آب و هوای فعلی خود در زیر نظر دهید، و بیایید ببینیم آب و هوا در مکان های مختلف چگونه است.

اگر در مورد پروژه سوالی دارید، دریغ نکنید. از اینکه خواندید متشکریم و منتظر پروژه های هیجان انگیز بیشتر در سری Let’s Build باشید!

من در دسترس هستم توییتر، لینکدین و گیت هاب. مواظب پست وبلاگ آتی من باشید که در آن قسمت مهم دیگری از توسعه وب را بررسی خواهم کرد. به عنوان یک توسعه دهنده، خوشحالم که اطلاعات بیشتری را ارائه دهم. تا آن زمان، کد نویسی مبارک، و مراقب باشید!