محرك الدمى الدليل الكامل pt.1

محرك الدمى: الأداة القوية لأتمتة الويب

في مشهد تطوير الويب سريع الخطى اليوم، تعد الأتمتة أمرًا أساسيًا - وهنا يأتي دور Puppeteer. تم تطوير Puppeteer بواسطة Google، وهي مكتبة Node.js قوية تسمح للمطورين بالتحكم في متصفحات Chrome باستخدام JavaScript. سواء كنت تتنقل عبر الويب في وضع بدون رأس لتحقيق الكفاءة أو في متصفح كامل للحصول على تعليقات مرئية، فإن Puppeteer يجعل من السهل أكثر من أي وقت مضى أتمتة المهام مثل تجريف الويب والاختبار والمزيد. مع محرك الدمى، ما كان يتطلب مجهودًا يدويًا، أصبح الآن مجرد نص.

لماذا تجريف الويب؟

في مشروع حديث، عملت مع عميل كان يحتاج إلى صفحة مقصودة لمجتمع تداول العملات الأجنبية الخاص به. لقد أراد شيئًا مشابهًا لمؤشرات الأسهم التي تراها على MarketWatch أو Yahoo Finance، ولكن بدلاً من الأسهم، أراد أن يتم عرض أسعار تحويل العملات في الوقت الفعلي بقيمة 1 دولار أمريكي عبر الموقع.

على الرغم من توفر واجهات برمجة التطبيقات التي يمكنها توفير البيانات - مع حدود الاستخدام والرسوم الشهرية - إلا أنني رأيت فرصة لإنشاء حل مخصص باستخدام محرك الدمى. ومن خلال استثمار بعض الوقت مقدمًا، تمكنت من استخراج البيانات وعرضها مجانًا، مما أدى في النهاية إلى إنقاذ عميلي من التكاليف المتكررة.

موقع العملاء: Majesticpips.com

أصبح إعداد محرك الدمى أمرًا بسيطًا

قبل أن نتمكن من البدء في استخراج الويب بكل مجده، يجب علينا تثبيت محرك الدمى في تطبيقنا.

تمامًا كما هو موضح في المستندات

الخطوة 1

قم بتثبيت المكتبة باستخدام اختيارك من npm أو الغزل أو pnpm.

• npm ومحرك الدمى

• الغزل إضافة محرك الدمى

• pnpm إضافة محرك الدمى

سيؤدي هذا إلى تنزيل إصدار متوافق من Chrome أثناء التثبيت وهو ما يسهل على المبتدئين تشغيل الأشياء بسرعة.

إذا كنت مطورًا أكثر خبرة ولديك إصدار محدد من الكروم/الكروم ترغب في العمل معه؛ ثم تثبيت هذه الحزم

• npm و محرك الدمى الأساسية

• غزل يضيف محرك الدمى

• pnpm إضافة محرك الدمى الأساسي

سيكون الأفضل بالنسبة لك، وستكون الحزمة خفيفة الوزن لأنها تقوم فقط بتثبيت محرك الدمى وتترك إصدار Chrome لك لتقرره.

يعد تثبيت "محرك الدمى" هو الخيار الأفضل للاختبار لأول مرة. إنه يبسط الإعداد ويضمن أن لديك نسخة صالحة للعمل من Chromium، مما يسمح لك بالتركيز على كتابة البرامج النصية الخاصة بك.

الخطوة 2

الآن في ملف JS الخاص بك، قد ترغب في استيراد محرك الدمى للتطبيقات التي تستخدم أنظمة الوحدة النمطية ES (معايير ES6) مع إصدارات العقدة 12 وما فوق.

استيراد محرك الدمى من "محرك الدمى" ؛ (مُستَحسَن)
أو
استيراد محرك الدمى من 'محرك الدمى الأساسي'؛

أو يمكنك استخدام بناء الجملة المطلوب لنظام وحدة commonJs لـ Node.js المتوافق أيضًا مع الإصدارات الأقدم من Node.js.

محرك الدمى const = يتطلب('محرك الدمى');
أو
محرك الدمى الثابت = يتطلب('محرك الدمى الأساسي');

الخطوة 3

بعد استيراد محرك الدمى، يمكننا البدء في كتابة الأوامر لإجراء تجريف الويب. يوضح الكود أدناه ما ستحتاج إلى استخدامه.

نقوم بتشغيل المتصفح باستخدام هذه الطرق التي توفرها المكتبة.

const browser = await puppeteer.launch();

const page = await browser.newPage();

await browser.close();

puppeteer.launch() = تقوم هذه الطريقة بتشغيل نسخة متصفح جديدة.

browser.newPage() = تقوم هذه الطريقة بإنشاء صفحة (أو علامة تبويب) جديدة داخل مثيل المتصفح.

browser. Close() = هذه الطريقة تغلق نسخة المتصفح.

في puppeteer.launch()، يمكننا تمرير الوسائط لتخصيص تشغيل المتصفح وفقًا لتفضيلاتنا. سنتناول هذا بمزيد من التفصيل في الجزء الثاني. ومع ذلك، بشكل افتراضي، تحتوي puppeteer.launch() على قيم محددة مسبقًا، مثل تعيين وضع مقطوعة الرأس على true.

الخطوة 4

تم إطلاق المتصفح، ولدينا الآن صفحة جاهزة لتصفح الويب. دعنا ننتقل إلى موقع الويب حيث سنستخرج بعض البيانات.

في هذا المثال، سنقوم بجمع البيانات من موقع عروض الأسعار.

 await page.goto(https://quotes.toscrape.com/)

 await page.screenshot({ path: 'screenshot.png' })

لقد أضفت انتظار page.screenshot({ المسار: 'screenshot.png' }) إلى المزيج. هذه أداة رائعة للتأكد من أن كل شيء يسير وفقًا للخطة. عند تنفيذ هذا الكود، سيكون لديك ملف صورة في دليل المشروع الخاص بك يلتقط الحالة الحالية لموقع الويب الذي تقوم بنسخه. يمكنك أيضًا تعديل اسم الملف حسب رغبتك.

إذا تم التحقق من كل شيء، فانتقل إلى الخطوة 5.

الخطوة 5

الآن بعد أن بدأ البرنامج النصي في التبلور، فلنتعمق في الجزء الرئيسي الذي نستخرج فيه البيانات من صفحة الويب. إليك كيف يبدو البرنامج النصي لدينا حتى الآن:

const puppeteer = require('puppeteer');

(async () => {

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.goto(https://quotes.toscrape.com/)

await page.screenshot({ path: 'screenshot.png' })

 const quotesScraper = await page.evaluate(() => {

const quotes = document.querySelectorAll(".quote"); 
    const quotesArray = [];

   for (const quote of quotes) { 
       const texts = quote.querySelector(".text").innerText; 
         const author = quote.querySelector(".author").innerText;  

        quotesArray.push({
           quote: texts,
           author
         });

     }
     return quotesArray;
});

console.log(quotesScraper);

await browser.close();

})();

للتحقق من أنه تم نسخ البيانات بنجاح، يمكننا تشغيل العقدة "اسم ملف الخادم" في واجهة سطر الأوامر، وسيتم عرض البيانات في وحدة التحكم باستخدام console.log(quotesScraper);.

[
  {
    quote: '“The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking.”',
    author: 'Albert Einstein'
  },
  {
    quote: '“It is our choices, Harry, that show what we truly are, far more than our abilities.”',
    author: 'J.K. Rowling'
  },
  {
    quote: '“There are only two ways to live your life. One is as though nothing is a miracle. The other is as though everything is a miracle.”',
    author: 'Albert Einstein'
  },
  {
    quote: '“The person, be it gentleman or lady, who has not pleasure in a good novel, must be intolerably stupid.”',
    author: 'Jane Austen'
  },
  {
    quote: "“Imperfection is beauty, madness is genius and it's better to be absolutely ridiculous than absolutely boring.”",
    author: 'Marilyn Monroe'
  }
....
]

await page.evaluate(() => { ... }): هذا هو المكان الذي يحدث فيه السحر. تسمح لنا طريقة التقييم بتشغيل كود JavaScript في سياق الصفحة التي نقوم بتجميعها. يبدو الأمر كما لو كنت تفتح وحدة تحكم مطور المتصفح وتقوم بتشغيل الكود مباشرة على الصفحة.

const quote = document.querySelectorAll(".quote");: هنا، نقوم بتحديد جميع العناصر الموجودة في الصفحة التي تطابق فئة .quote. وهذا يعطينا قائمة عقدية لعناصر الاقتباس.

const quoteArray = [];: نقوم بتهيئة مصفوفة فارغة لتخزين علامات الاقتباس التي نستخرجها.

for (اقتباس ثابت لعلامات الاقتباس) { ... }: تتكرر هذه الحلقة فوق كل عنصر اقتباس. ولكل واحد نستخرج نص الاقتباس والمؤلف.

quotesArray.push({ quote: text, Author });: لكل اقتباس، نقوم بإنشاء كائن يحتوي على نص الاقتباس والمؤلف، ثم ندفع هذا الكائن إلى علامات الاقتباس.

return quoteArray;: أخيرًا، نعيد مصفوفة علامات الاقتباس، والتي يتم تخزينها بعد ذلك في quoteScraper في بيئة Node.js.

تعد هذه الطريقة لاستخراج البيانات فعالة لأنها تسمح لك بالتفاعل مع الصفحة تمامًا كما يفعل المستخدم، ولكن بطريقة آلية وبرمجية.

إغلاق المتصفح

انتظار المتصفح.إغلاق();: بعد حذف البيانات، من المهم إغلاق المتصفح لتحرير الموارد. يضمن هذا السطر أن نسخة المتصفح التي أطلقناها قد تم إيقاف تشغيلها بشكل صحيح.

نتطلع إلى الجزء 2

باستخدام هذا البرنامج النصي، نجحت في استخراج البيانات من موقع ويب باستخدام محرك الدمى. لكننا مجرد خدش سطح ما هو ممكن. في الجزء الثاني، سنستكشف تقنيات أكثر تقدمًا مثل التعامل مع المحتوى الديناميكي واستخدام Express.JS لإنشاء وظيفة واجهة برمجة التطبيقات (API) للبيانات المحذوفة. تابعونا بينما نتعمق أكثر في عالم محرك الدمى!