62- آموزش جاوااسکریپت | پروژه عملی : قسمت 3 از 5 : نمایش پروفایل گیت‌هاب در رابط کاربری

در بخش قبل، دریافت اطلاعات از GitHub را کامل کردیم. یک کلاس برای ارتباط با API ساختیم و با استفاده از Promise و async/await، داده‌های کاربر را دریافت کردیم. حالا باید این داده‌ها را در رابط کاربری نمایش دهیم.

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

ساخت کلاس UI

ابتدا وارد فایل ui.js می‌شویم و کلاس UI را ایجاد می‌کنیم. در constructor، عنصری از صفحه که قرار است پروفایل داخل آن نمایش داده شود را انتخاب می‌کنیم.

class UI {
  constructor() {
    this.profile = document.getElementById('profile');
  }
}

در اینجا، عنصر #profile همان بخشی از صفحه است که به‌عنوان محل نمایش اطلاعات کاربر استفاده می‌شود.

ساخت متد نمایش پروفایل

حالا یک متد به نام showProfile می‌سازیم که اطلاعات کاربر را دریافت کند.

class UI {
  constructor() {
    this.profile = document.getElementById('profile');
  }

  showProfile(user) {
    
  }
}

ساخت نمونه از کلاس UI

حالا باید این کلاس را در فایل اصلی مقداردهی کنیم تا بتوانیم از آن استفاده کنیم.

const ui = new UI();

بعد از دریافت اطلاعات کاربر از GitHub، متد showProfile را صدا می‌زنیم و اطلاعات پروفایل را به آن می‌دهیم.

ui.showProfile(data.profile);

در اینجا، data.profile همان اطلاعات کاربری است که از متد دریافت اطلاعات GitHub برمی‌گردد.

بررسی داده‌های دریافتی

قبل از رندر کردن اطلاعات، بهتر است یک‌بار داده‌های کاربر را در کنسول بررسی کنیم.

console.log(user);

با این کار می‌توانیم ببینیم چه فیلدهایی از API دریافت می‌شوند و از همان‌ها در رابط کاربری استفاده کنیم.

رندر کردن اطلاعات کاربر در DOM

حالا داخل متد showProfile، با استفاده از template literal ساختار HTML را می‌سازیم و داخل عنصر profile قرار می‌دهیم.

class UI {
  constructor() {
    this.profile = document.getElementById('profile');
  }

  showProfile(user) {
    this.profile.innerHTML = `
      <div class="card card-body mb-3">
        <div class="row">
          <div class="col-md-3">
            <img class="img-fluid mb-2" src="${user.avatar_url}" />
            <a href="${user.html_url}" target="_blank" class="btn btn-primary btn-block mb-4">
              مشاهده پروفایل
            </a>
          </div>

          <div class="col-md-9">
            <span class="badge badge-primary">
              Public Repos: ${user.public_repos}
            </span>

            <span class="badge badge-secondary">
              Public Gists: ${user.public_gists}
            </span>

            <span class="badge badge-success">
              Followers: ${user.followers}
            </span>

            <span class="badge badge-info">
              Following: ${user.following}
            </span>

            <br><br>

            <ul class="list-group">
              <li class="list-group-item">
                Company: ${user.company}
              </li>
              <li class="list-group-item">
                Website/Blog: ${user.blog}
              </li>
              <li class="list-group-item">
                Location: ${user.location}
              </li>
              <li class="list-group-item">
                Member Since: ${user.created_at}
              </li>
            </ul>
          </div>
        </div>
      </div>

      <h3 class="page-heading mb-3">Latest Repos</h3>
      <div id="repos"></div>
    `;
  }
}

ساختار نمایش پروفایل

در این قالب:

• ستون اول برای تصویر آواتار و لینک پروفایل GitHub در نظر گرفته شده است.
• ستون دوم اطلاعات اصلی کاربر را نمایش می‌دهد.
• از badge‌های Bootstrap برای نمایش سریع اطلاعاتی مثل تعداد مخزن‌ها، تعداد gistها، دنبال‌کننده‌ها و دنبال‌شوندگان استفاده شده است.
• اطلاعات تکمیلی مثل شرکت، وب‌سایت، موقعیت مکانی و تاریخ عضویت نیز داخل یک list-group قرار گرفته‌اند.
• در انتها هم یک بخش خالی برای نمایش مخزن‌های اخیر در نظر گرفته شده است.

بهبود ظاهر دکمه

برای بهتر شدن فاصله دکمه با عناصر دیگر، کلاس mb-4 به لینک پروفایل اضافه شده است.

<a href="${user.html_url}" target="_blank" class="btn btn-primary btn-block mb-4">
  مشاهده پروفایل
</a>

این تغییر باعث می‌شود در نمایش واکنش‌گرا، فاصله‌ی مناسبی بین تصویر، دکمه و سایر بخش‌ها وجود داشته باشد.

نتیجه نهایی

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

اگر نام کاربری معتبر باشد، پروفایل به‌درستی نمایش داده می‌شود. اما اگر کاربر وجود نداشته باشد، GitHub خطای 404 Not Found برمی‌گرداند. در بخش بعدی، این وضعیت را مدیریت می‌کنیم تا هنگام پیدا نشدن کاربر، یک پیام هشدار در رابط کاربری نمایش داده شود و پروفایل قبلی همچنان در صفحه باقی بماند.