التفاعل المتقدم مع مواقع الويب وواجهات API

14 أبريل 2025

مرحبًا بك في القسم 4! لقد غطّينا استخراج البيانات من المحتوى الثابت والمحتوى المعروض باستخدام JavaScript، بالإضافة إلى التنقل عبر المواقع متعددة الصفحات. والآن ننتقل إلى سيناريوهات أكثر تعقيدًا تتضمن التفاعل المباشر مع واجهات API، وإرسال النماذج، والمصادقة، وواجهات API المتخصصة مثل GraphQL. تُعد هذه التقنيات أساسية للتعامل مع تطبيقات الويب الحديثة.

1. المواقع المعتمدة على API (الفصل 7)

لا تقوم كثير من المواقع الحديثة بتحميل جميع بياناتها مع HTML الأولي. بدلًا من ذلك، تستخدم JavaScript لجلب البيانات من واجهات API الخلفية (غالبًا باستخدام fetch أو XMLHttpRequest) بعد تحميل الصفحة. وغالبًا ما يعني استخراج البيانات من هذه المواقع بكفاءة تجاوز واجهة المستخدم والتفاعل مباشرةً مع واجهات API هذه.

المفاهيم الأساسية:

  • تحديد طلبات API: استخدم أدوات المطور في متصفحك (تبويب Network) لاكتشاف الطلبات (غالبًا XHR/Fetch) التي تُرجع بيانات، وعادةً ما تكون بصيغة JSON.
  • استخراج البيانات من واجهات API مباشرةً: بمجرد العثور على نقطة نهاية API، يمكنك غالبًا إرسال الطلبات إليها مباشرةً باستخدام مكتبات مثل axios أو fetch المدمجة في Node.js. ويكون ذلك عادةً أسرع وأكثر موثوقية من أتمتة المتصفح.
  • التعامل مع Pagination والمعلمات: غالبًا ما تستخدم واجهات API معلمات الاستعلام لأغراض مثل Pagination (page, limit) أو التصفية أو الفرز. وستحتاج إلى فهمها وإعادة تطبيقها في سكربت الاستخراج الخاص بك.

التحدي (الفصل 7): ستستخرج البيانات من موقع تجارة إلكترونية تُحمَّل فيه قوائم المنتجات ديناميكيًا من RESTful API. تتمثل مهمتك في جلب جميع المنتجات عبر التفاعل مع واجهة API هذه، مع التعامل الصحيح مع Pagination.

اعثر على حل مرجعي يوضّح استخراج البيانات مباشرةً من API في الدليل exercises/chapter-07/solution/src/.

2. النماذج والمصادقة (الفصل 8)

في كثير من الأحيان، تكون البيانات القيّمة خلف شاشة تسجيل دخول أو تتطلب إرسال نماذج معقدة. على سبيل المثال، تتطلب منصة حجز السفر في الفصل 8 المصادقة للوصول إلى الوظائف الأساسية. ولكي تبحث عن الوجهات (باستخدام autocomplete)، وتحدد تواريخ السفر (بالتفاعل مع عنصر واجهة التقويم)، وتطبّق عوامل التصفية، وتعرض النتائج (بما في ذلك القوائم المميزة المتاحة فقط للمستخدمين المسجلين)، تحتاج أولًا إلى أتمتة عملية تسجيل الدخول. ويتضمن ذلك التعامل مع النماذج، وإدارة cookies الخاصة بالجلسة (بما في ذلك احتمالية انتهاء المهلة التي تتطلب إعادة المصادقة وحماية CSRF)، وفي النهاية التحكم في المتصفح لتنفيذ الإجراءات كما يفعل المستخدم الحقيقي.

المفاهيم الأساسية:

  • أتمتة إرسال النماذج: استخدم أدوات مثل Playwright أو Puppeteer لملء حقول الإدخال، وتحديد الخيارات، والنقر على الأزرار لإرسال النماذج (مثل نماذج تسجيل الدخول، وأشرطة البحث، وعناصر التحكم في التصفية).
  • إدارة المصادقة:
    • المعتمدة على Cookie: سجّل الدخول مرة واحدة، وغالبًا ما يتولى سياق المتصفح (الذي يديره Playwright/Puppeteer) التعامل مع cookies الخاصة بالجلسة تلقائيًا للطلبات اللاحقة.
    • المعتمدة على Token (مثل JWT): سجّل الدخول، واستخرج الـ token (غالبًا من local storage أو من استجابة API)، ثم ضمّنه في الترويسات (مثل Authorization: Bearer <token>) في طلبات API اللاحقة.
  • التعامل مع الجلسات: حافظ على حالة تسجيل الدخول عبر الصفحات أو الإجراءات المختلفة داخل أداة الاستخراج الخاصة بك.
  • الوصول إلى المحتوى المحمي: بعد إتمام المصادقة، يمكنك الانتقال إلى الصفحات أو استخراج البيانات التي لا تكون متاحة إلا للمستخدمين المسجلين.

التحدي (الفصل 8): يتضمن هذا الفصل عملية متعددة الخطوات: تسجيل الدخول إلى موقع، والانتقال إلى صفحة بحث، وملء نموذج معقد متعدد الأجزاء مع عوامل تصفية، واستخراج النتائج (بما في ذلك المحتوى المميز الذي لا يظهر إلا عند تسجيل الدخول)، وحتى حفظ البحث في لوحة تحكم المستخدم.

3. العمل مع واجهات GraphQL API (الفصل 9)

يُعد GraphQL بديلًا يزداد شيوعًا لواجهات REST API. فهو يتيح للعملاء طلب البيانات التي يحتاجونها بالضبط باستخدام لغة استعلام محددة.

المفاهيم الأساسية:

  • نقطة نهاية GraphQL: توجد عادةً نقطة نهاية واحدة (مثل /graphql أو /api/graphql).
  • لغة الاستعلام: ستحتاج إلى بناء استعلامات GraphQL لتحديد الحقول والعلاقات التي تريد استرجاعها. ويمكن أن تساعد أدوات مثل Insomnia أو Postman في استكشاف مخططات GraphQL.
  • Mutations: تُستخدم للإجراءات التي تغيّر البيانات (مثل تسجيل الدخول أو إرسال البيانات)، وهي مشابهة لـ POST/PUT/DELETE في REST.
  • المصادقة: غالبًا ما تتضمن إرسال ترويسة Authorization، على نحو مشابه لواجهات REST API، وعادةً ما يتم الحصول عليها بعد login mutation.

التحدي (الفصل 9): ستتفاعل مع موقع يعتمد على GraphQL API. وتتمثل المهمة في إجراء المصادقة عبر login mutation ثم جلب بيانات منظمة محددة عن التحديات وملفات المستخدمين الشخصية باستخدام استعلامات GraphQL.

إن إتقان هذه التقنيات المتقدمة يوسّع بشكل كبير نطاق المواقع والبيانات التي يمكنك استخراجها بفعالية. وتذكّر دائمًا أن تستخرج البيانات بمسؤولية وأن تحترم شروط الخدمة الخاصة بالمواقع.

استخراجًا موفقًا!