MATIN MOLKARA
SERIES: JavaScript — PART 64 OF 108

64- آموزش جاوااسکریپت | پروژه عملی : قسمت 5 از 5 : نمایش مخزن‌های کاربر GitHub و تکمیل پروژه جست‌وجوی پروفایل

در این بخش، دریافت و نمایش مخزن‌های کاربر GitHub را به پروژه اضافه می‌کنیم. با استفاده از یک درخواست جدید به API، آخرین مخزن‌ها را دریافت می‌کنیم و آن‌ها را در رابط کاربری با JavaScript و Bootstrap نمایش می‌دهیم.

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

در این بخش، یک درخواست جدید به GitHub API اضافه می‌کنیم تا آخرین مخزن‌های کاربر دریافت شوند. سپس آن‌ها را در کلاس UI رندر می‌کنیم.

دریافت مخزن‌های کاربر از GitHub API

برای دریافت اطلاعات مخزن‌ها، باید در فایل github.js یک درخواست جدید مشابه درخواست پروفایل ایجاد کنیم.

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

تعریف تنظیمات مربوط به مخزن‌ها

ابتدا در constructor، تعداد مخزن‌هایی که می‌خواهیم نمایش دهیم و نحوه مرتب‌سازی آن‌ها را مشخص می‌کنیم.

class GitHub {
  constructor() {
    this.client_id = 'YOUR_CLIENT_ID';
    this.client_secret = 'YOUR_CLIENT_SECRET';
    this.repos_count = 5;
    this.repos_sort = 'created: asc';
  }
}

در اینجا:

  • repos_count تعداد مخزن‌های قابل نمایش را مشخص می‌کند.
  • repos_sort ترتیب مرتب‌سازی مخزن‌ها را تعیین می‌کند.

در این آموزش، تعداد مخزن‌ها روی ۵ قرار داده شده تا فقط آخرین موارد نمایش داده شوند.

ساخت درخواست دریافت مخزن‌ها

حالا داخل متد دریافت اطلاعات کاربر، یک درخواست جدید برای repos اضافه می‌کنیم.

async getUser(user) {
  const profileResponse = await fetch(
    `https://api.github.com/users/${user}?client_id=${this.client_id}&client_secret=${this.client_secret}`
  );

  const repoResponse = await fetch(
    `https://api.github.com/users/${user}/repos?per_page=${this.repos_count}&sort=${this.repos_sort}&client_id=${this.client_id}&client_secret=${this.client_secret}`
  );

  const profile = await profileResponse.json();
  const repos = await repoResponse.json();

  return {
    profile,
    repos
  };
}

توضیح پارامترهای URL

در آدرس مربوط به مخزن‌ها از دو query string مهم استفاده شده است:

  • per_page=${this.repos_count}
    تعداد مخزن‌هایی که باید برگردانده شود.

  • sort=${this.repos_sort}
    نوع مرتب‌سازی مخزن‌ها.

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

نمایش مخزن‌ها در فایل اصلی برنامه

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

ui.showProfile(data.profile);
ui.showRepos(data.repose);

در اینجا:

  • data.profile برای نمایش اطلاعات کاربر استفاده می‌شود.
  • data.repose آرایه‌ای از مخزن‌های کاربر است.

ساخت متد showRepos در کلاس UI

اکنون باید در فایل ui.js متدی به نام showRepos بسازیم تا آرایه مخزن‌ها را دریافت و در صفحه رندر کند.

showRepos(repos) {
  let output = '';

  repos.forEach(function(repo) {
    output += `
      <div class="card card-body mb-2">
        <div class="row">
          <div class="col-md-6">
            <a href="${repo.html_url}" target="_blank">${repo.name}</a>
          </div>
          <div class="col-md-6">
            <span class="badge badge-primary">
              Stars: ${repo.stargazers_count}
            </span>
            <span class="badge badge-secondary">
              Watchers: ${repo.watchers_count}
            </span>
            <span class="badge badge-success">
              Forks: ${repo.forks_count}
            </span>
          </div>
        </div>
      </div>
    `;
  });

  document.getElementById('repos').innerHTML = output;
}

ساختار نمایش هر مخزن

در این متد، برای هر مخزن یک کارت ساخته می‌شود که شامل این اطلاعات است:

  • نام مخزن
  • لینک مستقیم به صفحه مخزن در GitHub
  • تعداد ستاره‌ها
  • تعداد watcherها
  • تعداد forkها

برای این کار از forEach استفاده شده تا روی آرایه repos پیمایش انجام شود و خروجی HTML به‌صورت داینامیک تولید شود.

چرا از output += استفاده می‌کنیم؟

در هر تکرار، HTML مربوط به یک مخزن به متغیر output اضافه می‌شود. در پایان، کل این خروجی داخل عنصر #repos قرار می‌گیرد.

let output = '';

و در پایان:

document.getElementById('repos').innerHTML = output;

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

رفع خطای نام متغیر

در این بخش، اگر با خطایی مانند زیر مواجه شدید:

reposResponse is not defined

احتمال زیادی وجود دارد که نام متغیر را در یک بخش به شکل repoResponse و در بخش دیگر به شکل reposResponse نوشته باشید. باید نام متغیر در همه جا یکسان باشد.

نمونه صحیح:

const repoResponse = await fetch(...);
const repos = await repoResponse.json();

نتیجه نهایی پروژه

بعد از انجام این مراحل، برنامه می‌تواند:

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

این یعنی پروژه جست‌وجوی کاربران GitHub به‌طور کامل پیاده‌سازی شده است.

این پروژه چه مفاهیمی را تمرین می‌دهد؟

این پروژه برای مرور و تمرین چند مفهوم مهم در JavaScript بسیار مفید است، از جمله:

  • Fetch API
  • Promises
  • async/await
  • کلاس‌ها (Classes)
  • توابع پیکانی (Arrow Functions)
  • رویدادها (Events)
  • کار با DOM
  • ساختاردهی بهتر پروژه با فایل‌های جداگانه

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

ادامه مسیر

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

// 0 comments
#JavaScript#Frontend Development#Repositories#Bootstrap#DOM#Async Await#Fetch API#GitHub API

نظرات (0)

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