MATIN MOLKARA
SERIES: JavaScript — PART 65 OF 108

65- آموزش جاوااسکریپت | پروژه عملی : قسمت 1 از 4 - اپلیکیشن آب‌وهوا و طراحی رابط کاربری

در این بخش، پروژه اپلیکیشن آب‌وهوا را با JavaScript شروع می‌کنیم. ساختار فایل‌ها، استفاده از Bootstrap، طراحی رابط کاربری، فرم تغییر موقعیت و آماده‌سازی بخش نمایش اطلاعات آب‌وهوا را پیاده‌سازی خواهیم کرد.

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

در این بخش، تمرکز ما روی آماده‌سازی ساختار پروژه و طراحی رابط کاربری است.

معرفی پروژه

در این اپلیکیشن، کاربر می‌تواند اطلاعات آب‌وهوا را برای یک شهر و ایالت مشخص مشاهده کند. همچنین امکان تغییر موقعیت از طریق یک پنجره modal وجود دارد.

ویژگی‌های این پروژه:

  • دریافت اطلاعات آب‌وهوا از API
  • نمایش شهر و ایالت انتخاب‌شده
  • نمایش وضعیت آب‌وهوا
  • نمایش دما
  • نمایش آیکون شرایط آب‌وهوا
  • نمایش جزئیاتی مثل رطوبت، نقطه شبنم، دمای احساسی و باد
  • ذخیره شهر و ایالت در localStorage

API مورد استفاده

در این پروژه از API مربوط به Weather Underground استفاده می‌شود. برای استفاده از این سرویس، باید در وب‌سایت آن ثبت‌نام کنید و کلید API دریافت کنید.

ساختار کلی درخواست به این API به شکل زیر است:

http://api.wunderground.com/api/YOUR_API_KEY/conditions/q/STATE/CITY.json

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

  • وضعیت آب‌وهوا
  • دما
  • رطوبت
  • سرعت باد
  • نقطه شبنم
  • میزان بارش
  • آدرس آیکون آب‌وهوا

ساختار فایل‌های پروژه

برای اینکه پروژه ساختار بهتری داشته باشد، بخش‌های مختلف را در فایل‌های جداگانه قرار می‌دهیم.

فایل‌های مورد نیاز:

  • index.html
  • app.js
  • weather.js
  • ui.js
  • storage.js

هر فایل مسئول بخش مشخصی از برنامه است:

  • weather.js برای ارتباط با API
  • ui.js برای مدیریت رابط کاربری
  • storage.js برای کار با localStorage
  • app.js برای هماهنگی کلی برنامه

این نوع ساختار، پروژه را خواناتر و توسعه آن را ساده‌تر می‌کند.

آماده‌سازی فایل HTML

در ابتدای کار، فایل index.html را می‌سازیم و ساختار پایه صفحه را در آن قرار می‌دهیم. در این پروژه از Bootstrap و یکی از قالب‌های Bootswatch استفاده می‌کنیم تا ظاهر برنامه حرفه‌ای‌تر شود.

نمونه ساختار اولیه فایل:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>WeatherJS</title>

  <link rel="stylesheet" href="BOOTSWATCH_THEME_LINK">
</head>
<body>

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

  <script src="storage.js"></script>
  <script src="weather.js"></script>
  <script src="ui.js"></script>
  <script src="app.js"></script>
</body>
</html>

طراحی بخش اصلی رابط کاربری

در بدنه صفحه، ابتدا یک container ایجاد می‌کنیم تا محتوا در مرکز صفحه قرار بگیرد. سپس با استفاده از سیستم گرید Bootstrap، بخش نمایش آب‌وهوا را می‌سازیم.

کد بخش اصلی رابط کاربری:

<div class="container">
  <div class="row">
    <div class="col-md-6 mx-auto text-center bg-primary mt-5 p-5 rounded">
      <h1 id="w-location"></h1>
      <h3 class="text-dark" id="w-desc"></h3>
      <h3 id="w-string"></h3>
      <img id="w-icon" />

      <ul id="w-details" class="list-group mt-3">
        <li id="w-humidity" class="list-group-item"></li>
        <li id="w-dewpoint" class="list-group-item"></li>
        <li id="w-feels-like" class="list-group-item"></li>
        <li id="w-wind" class="list-group-item"></li>
      </ul>
    </div>
  </div>
</div>

توضیح عناصر این بخش

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

  • #w-location برای نمایش نام شهر و ایالت
  • #w-desc برای نمایش وضعیت آب‌وهوا
  • #w-string برای نمایش دما
  • #w-icon برای نمایش آیکون شرایط آب‌وهوا
  • #w-details برای نمایش جزئیات بیشتر

این روش باعث می‌شود بعداً بتوانیم با JavaScript هر بخش را جداگانه به‌روزرسانی کنیم.

دکمه تغییر موقعیت

برای اینکه کاربر بتواند موقعیت موردنظر خود را تغییر دهد، یک دکمه زیر بخش اصلی قرار می‌دهیم که پنجره modal را باز کند.

<hr>

<button
  class="btn btn-dark"
  data-toggle="modal"
  data-target="#locModal">
  Change Location
</button>

ساخت پنجره Modal

برای دریافت شهر و ایالت از کاربر، از کامپوننت modal در Bootstrap استفاده می‌کنیم.

<div class="modal fade" id="locModal" tabindex="-1" role="dialog" aria-labelledby="locModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="locModalLabel">Choose Location</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>

      <div class="modal-body">
        <form id="w-form">
          <div class="form-group">
            <label for="city">City</label>
            <input type="text" id="city" class="form-control">
          </div>

          <div class="form-group">
            <label for="state">State</label>
            <input type="text" id="state" class="form-control">
          </div>
        </form>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" id="w-change-btn" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

چرا این ساختار مناسب است؟

در این پروژه، همه HTML را با JavaScript تولید نمی‌کنیم. به‌جای آن، ابتدا ساختار صفحه را در HTML قرار می‌دهیم و بعد با JavaScript فقط محتوای عناصر را تغییر می‌دهیم.

این روش چند مزیت دارد:

  • خوانایی بهتر کد
  • مدیریت ساده‌تر رابط کاربری
  • جداسازی مناسب ساختار و منطق برنامه
  • نگهداری راحت‌تر در پروژه‌های بزرگ‌تر

نتیجه این بخش

تا اینجا:

  • ساختار پروژه را مشخص کردیم
  • فایل‌های برنامه را ایجاد کردیم
  • صفحه اصلی را با Bootstrap طراحی کردیم
  • بخش نمایش اطلاعات آب‌وهوا را آماده کردیم
  • دکمه تغییر موقعیت را ساختیم
  • فرم دریافت شهر و ایالت را داخل modal قرار دادیم

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

ادامه مسیر

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

// 0 comments
#JavaScript#Weather App#UI Design#Frontend Development#Bootstrap#Fetch API#API#LocalStorage

نظرات (0)

نظر خود را بنویسید