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

ساخت یک برنامه 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 به روز می شود.
در اینجا نمای کامل برنامه هواشناسی در زیر آمده است.
بیایید آن را سرگرم کننده تر کنیم! من دوست دارم در مورد آب و هوای منطقه شما بدانم. با اطلاعات آب و هوای فعلی خود در زیر نظر دهید، و بیایید ببینیم آب و هوا در مکان های مختلف چگونه است.
اگر در مورد پروژه سوالی دارید، دریغ نکنید. از اینکه خواندید متشکریم و منتظر پروژه های هیجان انگیز بیشتر در سری Let’s Build باشید!
من در دسترس هستم توییتر، لینکدین و گیت هاب. مواظب پست وبلاگ آتی من باشید که در آن قسمت مهم دیگری از توسعه وب را بررسی خواهم کرد. به عنوان یک توسعه دهنده، خوشحالم که اطلاعات بیشتری را ارائه دهم. تا آن زمان، کد نویسی مبارک، و مراقب باشید!