پیاده‌سازی منطق جست‌وجو و ارتباط با GitHub API با Async/Await

پس از طراحی ساختار اولیه HTML در بخش قبل، در این مرحله کدنویسی جاوااسکریپت برنامه را آغاز می‌کنیم. هدف اصلی این بخش، دریافت ورودی کاربر به‌محض تایپ، ارسال درخواست به GitHub API با async/await و آماده‌سازی ساختار شرطی برای نمایش اطلاعات، خطا یا پاک‌کردن صفحه است.

---

۱. تنظیم Event Listener در app.js

فایل app.js نقطه ورود (Entry Point) برنامه ماست. ابتدا باید المان ورودی جست‌وجو را از DOM انتخاب کرده و رویداد keyup را روی آن تعریف کنیم تا با رها شدن هر کلید حین تایپ، مقدار جاری خوانده شود.

// Init Search Input
const searchUser = document.getElementById('searchUser');

// Search input event listener
searchUser.addEventListener('keyup', (e) => {
  // Get input text
  const userText = e.target.value;

  if (userText !== '') {
    // Make http call
    console.log(userText);
  } else {
    // Clear profile
  }
});

بررسی مراحل کد:

1. المان <input id="searchUser"> توسط document.getElementById انتخاب می‌شود.
2. با رویداد keyup، با هر بار فشردن و رها شدن کلید، تابع فراخوانی می‌شود.
3. مقدار متنی واردشده با e.target.value خوانده شده و در متغیر userText قرار می‌گیرد.
4. شرط if (userText !== '') بررسی می‌کند که ورودی خالی نباشد. اگر کاربر تمام متن را پاک کند، بخش else اجرا می‌شود که بعداً وظیفه پاک‌کردن پروفایل از UI را بر عهده خواهد داشت.

---

۲. پیاده‌سازی کلاس GitHub در github.js

کلاس GitHub مسئولیت تمام تعاملات با API گیت‌هاب را دارد. در این کلاس متغیرهای احراز هویت را درون constructor تعریف کرده و متد ناهمگام getUser را می‌سازیم.

class GitHub {
  constructor() {
    this.client_id = 'YOUR_CLIENT_ID';
    this.client_secret = 'YOUR_CLIENT_SECRET';
  }

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

    const profile = await profileResponse.json();

    return {
      profile
    };
  }
}

نکات فنی پیاده‌سازی:

• ذخیره کلیدها در Constructor: شناسه‌های this.client_id و this.client_secret به عنوان ویژگی‌های شیء ذخیره می‌شوند تا در ساخت Query String به کار روند.
• استفاده از Query String: پارامترهای client_id با علامت ? و client_secret با & به انتهای آدرس اضافه می‌شوند.
• انتخاب نام profileResponse: چون در مراحل بعد درخواست دومی برای مخازن (reposResponse) به همین متد اضافه خواهد شد، متغیر اول اختصاصاً profileResponse نام‌گذاری می‌شود.
• خروجی به صورت شیء (Object): به جای بازگرداندن مستقیم داده پروفایل، یک شیء بازگردانده می‌شود:

  return {
    profile
  };
  

  (در استاندارد ES6 نوشتن { profile } معادل { profile: profile } است). این الگو به ما اجازه می‌دهد داده مخازن کاربر (repos) را بعداً بدون شکستن ساختار پاسخ، به همین شیء اضافه کنیم.

---

۳. اتصال app.js به کلاس GitHub و مدیریت پاسخ

حالا به فایل app.js بازمی‌گردیم، کلاس GitHub را نمونه‌سازی (Instantiate) کرده و خروجی getUser را کنترل می‌کنیم:

// Init GitHub
const github = new GitHub();

// Init Search Input
const searchUser = document.getElementById('searchUser');

// Search input event listener
searchUser.addEventListener('keyup', (e) => {
  // Get input text
  const userText = e.target.value;

  if (userText !== '') {
    // Make http call
    github.getUser(userText)
      .then(data => {
        if (data.profile.message === 'Not Found') {
          // Show alert (User not found)
          console.log('User not found');
        } else {
          // Show profile
          console.log(data.profile);
        }
      });
  } else {
    // Clear profile
    console.log('Clear profile');
  }
});

---

۴. نحوه تشخیص کاربر نامعتبر در GitHub API

هنگامی که کاربری با نام مشخص در گیت‌هاب پیدا نشود، API یک پاسخ با بدنه زیر بازمی‌گرداند:

{
  "message": "Not Found",
  "documentation_url": "https://docs.github.com/rest/..."
}

به همین دلیل با شرط زیر وضعیت را تفکیک می‌کنیم:

if (data.profile.message === 'Not Found') {
  // کاربر وجود ندارد -> نمایش پیام خطا
} else {
  // کاربر پیدا شد -> نمایش مشخصات در UI
}

---

۵. تست و عیب‌یابی اولیه

با باز کردن کنسول مرورگر (F12):

1. با تایپ حرف به حرف یک نام (مثلاً b سپس br و سپس bradtraversy)، در هر مرحله آبجکت حاوی profile و اطلاعات کامل آن کاربر در کنسول چاپ می‌شود.
2. با تایپ یک رشته نامعتبر که حسابی برای آن وجود ندارد، پیام 'User not found' در کنسول لاگ می‌شود.
3. در صورت پاک شدن کامل باکس جستجو، بخش else فعال می‌شود.

نکته حساس به حروف کوچک و بزرگ: در تعریف نمونه کلاس، نام فایل اسکریپت در HTML یا نام متغیرها دقت کنید (مثلاً new GitHub() با حرف G و H بزرگ) تا با خطای GitHub is not defined مواجه نشوید.

---

جمع‌بندی این بخش

در این مرحله:

• رویداد keyup ورودی جست‌وجو را پیاده‌سازی کردیم.
• کلاس GitHub را با متد ناهمگام getUser و احراز هویت از طریق Query String ساختیم.
• پاسخ دریافتی را در ساختار شیء بسته‌بندی کردیم تا آماده افزودن مخازن در مراحل بعد باشد.
• شرط‌های مربوط به کاربر معتبر، کاربر یافت‌نشده (Not Found) و ورودی خالی (Clear) را در app.js پیکربندی کردیم.

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