متین ملک آرا | توسعه‌دهنده وب

89- آموزش جاوااسکریپت | پروژه عملی: قسمت 2 از 12- ساخت رابط کاربری پروژه Calorie Tracker با Module Pattern

در این بخش، رابط کاربری پروژه Calorie Tracker را با HTML، Materialize CSS و Font Awesome آماده می‌کنیم. همچنین فایل‌های اولیه پروژه را می‌سازیم تا در ادامه، منطق برنامه را با JavaScript و Module Pattern پیاده‌سازی کنیم.

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

برای طراحی رابط کاربری از Materialize CSS استفاده می‌کنیم و آیکن‌ها را نیز با Font Awesome در اختیار خواهیم داشت. پس از آماده‌سازی ظاهر برنامه، در بخش‌های بعدی وارد پیاده‌سازی ماژول‌ها و منطق اصلی برنامه می‌شویم.

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

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

در ابتدای کار، یک پوشه برای پروژه ایجاد می‌کنیم و دو فایل اصلی می‌سازیم:

index.html
app.js

فایل index.html برای ساخت رابط کاربری استفاده می‌شود و فایل app.js در ادامه، محل نگهداری ماژول‌ها و منطق برنامه خواهد بود.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Track Calorie | Meal & Calorie Tracker</title>
</head>
<body>
</body>
</html>

اضافه‌کردن کتابخانه‌های موردنیاز

برای ظاهر برنامه به فایل‌های CDN مربوط به Materialize CSS، jQuery، Materialize JavaScript و Font Awesome نیاز داریم.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Track Calorie | Meal & Calorie Tracker</title>

  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
  />

  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
  />
</head>
<body>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

چرا این فایل‌ها را اضافه می‌کنیم؟

Materialize CSS برای طراحی سریع رابط کاربری
Font Awesome برای استفاده از آیکن‌ها
jQuery به‌عنوان پیش‌نیاز نسخه مورد استفاده از Materialize
Materialize JS برای امکانات تعاملی رابط کاربری

پس از اضافه‌کردن این فایل‌ها، بهتر است صفحه را در مرورگر باز کنید و از نبود خطا در کنسول مطمئن شوید.

ساخت نوار بالای برنامه

در بالای صفحه، یک نوار ناوبری ساده قرار می‌دهیم که شامل موارد زیر است:

عنوان برنامه
دکمه Clear All

<!-- Navbar -->
<nav>
  <div class="nav-wrapper blue">
    <div class="container">
      <a href="#" class="brand-logo center">Track Calorie</a>
      <ul class="right">
        <li>
          <a href="#" class="clear-btn btn blue lighten-3">Clear All</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

این بخش فقط برای نمایش عنوان و عملیات پاک‌کردن همه آیتم‌ها در نظر گرفته شده است.

ساخت کارت فرم

در ادامه، یک کارت برای فرم ورود اطلاعات ایجاد می‌کنیم. این فرم شامل دو ورودی اصلی است:

نام وعده غذایی
تعداد کالری

همچنین چند دکمه برای افزودن، ویرایش، حذف و بازگشت در نظر می‌گیریم.

<div class="container">
  <div class="card">
    <div class="card-content">
      <span class="card-title">Add Meal / Food Item</span>

      <form class="col">
        <div class="row">
          <div class="input-field col s6">
            <input
              type="text"
              placeholder="Add Item"
              id="item-name"
            />
            <label for="item-name">Meal</label>
          </div>

          <div class="input-field col s6">
            <input
              type="text"
              placeholder="Add Calories"
              id="item-calories"
            />
            <label for="item-calories">Calories</label>
          </div>
        </div>

        <button class="add-btn btn blue darken-3">
          <i class="fa fa-plus"></i> Add Meal
        </button>

        <!--
        <button class="update-btn btn orange">
          <i class="fa fa-pencil-alt"></i> Update Meal
        </button>

        <button class="delete-btn btn red">
          <i class="far fa-trash-alt"></i> Delete Meal
        </button>
        -->

        <button class="back-btn btn grey pull-right">
          <i class="fa fa-chevron-circle-left"></i> Back
        </button>
      </form>
    </div>
  </div>
</div>

دلیل کامنت‌کردن بعضی دکمه‌ها

در این مرحله، همه دکمه‌ها به‌طور هم‌زمان نباید نمایش داده شوند.
برای مثال:

در حالت عادی فقط دکمه افزودن نمایش داده می‌شود
در حالت ویرایش، دکمه‌های بروزرسانی، حذف و بازگشت فعال می‌شوند

به همین دلیل، برخی دکمه‌ها فعلاً به‌صورت کامنت قرار می‌گیرند تا در بخش JavaScript بر اساس وضعیت برنامه نمایش داده شوند.

نمایش مجموع کالری‌ها

در زیر فرم، بخشی برای نمایش مجموع کالری‌ها قرار می‌دهیم. این مقدار در ابتدا صفر است و بعداً با JavaScript به‌روزرسانی خواهد شد.

<!-- Calorie Count -->
<h3 class="center-align">
  Total Calories: <span class="total-calories">0</span>
</h3>

ساخت لیست آیتم‌ها

در پایین صفحه، یک لیست برای نمایش وعده‌های غذایی ثبت‌شده قرار می‌دهیم.
این لیست در ادامه به‌صورت پویا با JavaScript ساخته خواهد شد، اما برای درک بهتر ساختار HTML، یک نمونه اولیه از آیتم‌ها را می‌نویسیم و سپس آن را کامنت می‌کنیم.

<!-- Item List -->
<ul id="item-list" class="collection">
  <!--
  <li class="collection-item" id="item-0">
    <strong>Steak Dinner</strong>: <em>1200 Calories</em>
    <a href="#" class="secondary-content">
      <i class="fa fa-pencil-alt"></i>
    </a>
  </li>

  <li class="collection-item" id="item-1">
    <strong>Cookie</strong>: <em>400 Calories</em>
    <a href="#" class="secondary-content">
      <i class="fa fa-pencil-alt"></i>
    </a>
  </li>

  <li class="collection-item" id="item-2">
    <strong>Eggs</strong>: <em>300 Calories</em>
    <a href="#" class="secondary-content">
      <i class="fa fa-pencil-alt"></i>
    </a>
  </li>
  -->
</ul>

نکته مهم

آیتم‌های این لیست در نسخه نهایی به‌صورت دستی داخل HTML قرار نمی‌گیرند.
در عوض، JavaScript آن‌ها را بر اساس داده‌های برنامه تولید و در صفحه نمایش می‌دهد.

نسخه کامل HTML اولیه

در پایان این بخش، ساختار اولیه فایل index.html به‌شکل زیر خواهد بود:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Track Calorie | Meal & Calorie Tracker</title>

  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
  />
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
  />
</head>
<body>
  <!-- Navbar -->
  <nav>
    <div class="nav-wrapper blue">
      <div class="container">
        <a href="#" class="brand-logo center">Track Calorie</a>
        <ul class="right">
          <li>
            <a href="#" class="clear-btn btn blue lighten-3">Clear All</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <br />

  <div class="container">
    <!-- Form Card -->
    <div class="card">
      <div class="card-content">
        <span class="card-title">Add Meal / Food Item</span>

        <form class="col">
          <div class="row">
            <div class="input-field col s6">
              <input
                type="text"
                placeholder="Add Item"
                id="item-name"
              />
              <label for="item-name">Meal</label>
            </div>

            <div class="input-field col s6">
              <input
                type="text"
                placeholder="Add Calories"
                id="item-calories"
              />
              <label for="item-calories">Calories</label>
            </div>
          </div>

          <button class="add-btn btn blue darken-3">
            <i class="fa fa-plus"></i> Add Meal
          </button>

          <!--
          <button class="update-btn btn orange">
            <i class="fa fa-pencil-alt"></i> Update Meal
          </button>

          <button class="delete-btn btn red">
            <i class="far fa-trash-alt"></i> Delete Meal
          </button>
          -->

          <button class="back-btn btn grey pull-right">
            <i class="fa fa-chevron-circle-left"></i> Back
          </button>
        </form>
      </div>
    </div>

    <!-- Calorie Count -->
    <h3 class="center-align">
      Total Calories: <span class="total-calories">0</span>
    </h3>

    <!-- Item List -->
    <ul id="item-list" class="collection">
      <!--
      <li class="collection-item" id="item-0">
        <strong>Steak Dinner</strong>: <em>1200 Calories</em>
        <a href="#" class="secondary-content">
          <i class="fa fa-pencil-alt"></i>
        </a>
      </li>

      <li class="collection-item" id="item-1">
        <strong>Cookie</strong>: <em>400 Calories</em>
        <a href="#" class="secondary-content">
          <i class="fa fa-pencil-alt"></i>
        </a>
      </li>

      <li class="collection-item" id="item-2">
        <strong>Eggs</strong>: <em>300 Calories</em>
        <a href="#" class="secondary-content">
          <i class="fa fa-pencil-alt"></i>
        </a>
      </li>
      -->
    </ul>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

جمع‌بندی

در این بخش، رابط کاربری اولیه پروژه Calorie Tracker را آماده کردیم. در این مرحله:

فایل‌های اصلی پروژه را ساختیم
کتابخانه‌های موردنیاز را به صفحه اضافه کردیم
نوار بالایی برنامه را ایجاد کردیم
فرم ورود اطلاعات را ساختیم
بخش نمایش مجموع کالری‌ها را اضافه کردیم
ساختار لیست آیتم‌ها را آماده کردیم

در بخش بعدی، وارد پیاده‌سازی JavaScript می‌شویم و ماژول‌ها و کنترل‌کننده‌های اصلی برنامه را ایجاد خواهیم کرد.