कठपुतली पूर्ण गाइड भाग 1

कठपुतली: वेब स्वचालन के लिए पावर टूल

आज के तेज़ गति वाले वेब विकास परिदृश्य में, स्वचालन महत्वपूर्ण है - और यहीं पर पपेटियर आता है। Google द्वारा विकसित, पपेटियर एक शक्तिशाली Node.js लाइब्रेरी है जो डेवलपर्स को जावास्क्रिप्ट का उपयोग करके क्रोम ब्राउज़र को नियंत्रित करने की अनुमति देती है। चाहे आप दक्षता के लिए वेब को हेडलेस मोड में नेविगेट कर रहे हों या विज़ुअल फीडबैक के लिए पूर्ण ब्राउज़र में, पपेटियर वेब स्क्रैपिंग, परीक्षण और अधिक जैसे कार्यों को स्वचालित करना पहले से कहीं अधिक आसान बनाता है। कठपुतली के साथ, जिसके लिए पहले मैन्युअल प्रयास की आवश्यकता होती थी, वह अब केवल एक स्क्रिप्ट दूर है।

वेब स्क्रैपिंग क्यों?

हाल ही के एक प्रोजेक्ट में, मैंने एक ऐसे ग्राहक के साथ काम किया, जिसे अपने विदेशी मुद्रा व्यापार समुदाय के लिए एक लैंडिंग पृष्ठ की आवश्यकता थी। वह कुछ वैसा ही स्टॉक टिकर चाहता था जैसा आप मार्केटवॉच या याहू फाइनेंस पर देखते हैं, लेकिन स्टॉक के बजाय, वह साइट पर $1 USD के लिए वास्तविक समय की मुद्रा रूपांतरण दरें प्रदर्शित करना चाहता था।

हालांकि ऐसे एपीआई उपलब्ध हैं जो डेटा प्रदान कर सकते हैं - उपयोग सीमा और मासिक शुल्क के साथ - मैंने पपेटियर का उपयोग करके एक कस्टम समाधान बनाने का अवसर देखा। पहले से कुछ समय निवेश करके, मैं डेटा को निःशुल्क प्रदर्शित करने और प्रदर्शित करने में सक्षम हुआ, अंततः अपने ग्राहक को आवर्ती लागतों से बचाया।

ग्राहकों की वेबसाइट: Magesticpips.com

कठपुतली की स्थापना करना सरल बना दिया गया

इससे पहले कि हम वेब को उसकी संपूर्ण महिमा के लिए स्क्रैप करना शुरू कर सकें, हमें अपने एप्लिकेशन में कठपुतली इंस्टॉल करना होगा।

जैसा दस्तावेज़ों में बताया गया है

स्टेप 1

अपनी पसंद के एनपीएम, यार्न या पीएनपीएम का उपयोग करके लाइब्रेरी स्थापित करें।

• npm मैं कठपुतली

• यार्न कठपुतली जोड़ें

• pnpm कठपुतली जोड़ें

यह इंस्टॉलेशन के दौरान क्रोम का संगत संस्करण डाउनलोड करेगा जिससे शुरुआती लोगों के लिए चीजों को जल्दी से चलाना आसान हो जाएगा।

यदि आप अधिक अनुभवी डेवलपर हैं और आपके पास विशिष्ट क्रोम/क्रोमियम संस्करण है जिसके साथ आप काम करना चाहेंगे; फिर इन पैकेजों को स्थापित करना

• npm i कठपुतली-कोर

• यार्न कठपुतली-कोर जोड़ें

• pnpm कठपुतली-कोर जोड़ें

आपके लिए सबसे अच्छा होगा, पैकेज हल्का होगा क्योंकि यह केवल कठपुतली स्थापित करता है और क्रोम संस्करण को निर्णय लेने के लिए आपके ऊपर छोड़ देता है।

पहली बार परीक्षक के लिए 'कठपुतली' स्थापित करना बेहतर विकल्प है। यह सेटअप को सरल बनाता है और सुनिश्चित करता है कि आपके पास क्रोमियम का एक कार्यशील संस्करण है, जिससे आप अपनी स्क्रिप्ट लिखने पर ध्यान केंद्रित कर सकते हैं।

चरण दो

अब अपनी जेएस फ़ाइल पर, आप नोड संस्करण 12 और उससे ऊपर के साथ ईएस मॉड्यूल सिस्टम (ईएस6 मानकों) का उपयोग करने वाले अनुप्रयोगों के लिए कठपुतली आयात करना चाहेंगे।

'कठपुतली' से कठपुतली आयात करें; (अनुशंसित)
या
'कठपुतली-कोर' से कठपुतली आयात करें;

या आप Node.js के लिए CommonJs मॉड्यूल सिस्टम के लिए आवश्यक सिंटैक्स का उपयोग कर सकते हैं जो Node.js के पुराने संस्करणों के साथ भी संगत है।

स्थिर कठपुतली = आवश्यकता('कठपुतली');
या
स्थिरांक कठपुतली = आवश्यकता('कठपुतली-कोर');

चरण 3

पपेटियर आयात करने के बाद, हम वेब स्क्रैपिंग करने के लिए कमांड लिखना शुरू कर सकते हैं। नीचे दिया गया कोड दिखाता है कि आपको क्या उपयोग करने की आवश्यकता होगी।

हम लाइब्रेरी द्वारा प्रदान की गई इन विधियों का उपयोग करके ब्राउज़र लॉन्च करते हैं।

const browser = await puppeteer.launch();

const page = await browser.newPage();

await browser.close();

puppeteer.launch() = यह विधि एक नया ब्राउज़र इंस्टेंस लॉन्च करती है।

browser.newPage() = यह विधि ब्राउज़र इंस्टेंस के भीतर एक नया पेज (या टैब) बनाती है।

browser.close() = यह विधि ब्राउज़र इंस्टेंस को बंद कर देती है।

puppeteer.launch() में, हम अपनी प्राथमिकताओं के अनुसार ब्राउज़र लॉन्च को अनुकूलित करने के लिए तर्क पारित कर सकते हैं। हम इसे भाग 2 में और अधिक विस्तार से कवर करेंगे। हालाँकि, डिफ़ॉल्ट रूप से, puppeteer.launch() में पूर्व निर्धारित मान होते हैं, जैसे कि हेडलेस मोड को सत्य पर सेट किया जाता है।

चरण 4

ब्राउज़र लॉन्च हो गया है, और अब हमारे पास वेब सर्फ करने के लिए एक पेज तैयार है। आइए उस वेबसाइट पर जाएँ जहाँ हम कुछ डेटा स्क्रैप करेंगे।

इस उदाहरण के लिए, हम एक कोट्स वेबसाइट से डेटा स्क्रैप करेंगे।

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

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

मैंने मिश्रण में wait page.screenshot({ path: '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();

})();

यह सत्यापित करने के लिए कि डेटा सफलतापूर्वक स्क्रैप किया गया था, हम सीएलआई में नोड "सर्वर-फ़ाइल-नाम" चला सकते हैं, और डेटा कंसोल में कंसोल.लॉग (कोट्सस्क्रैपर) का उपयोग करके प्रदर्शित किया जाएगा।

[
  {
    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(() => { ... }): यहीं पर जादू होता है। मूल्यांकन विधि हमें उस पृष्ठ के संदर्भ में जावास्क्रिप्ट कोड चलाने की अनुमति देती है जिसे हम स्क्रैप कर रहे हैं। यह ऐसा है मानो आप ब्राउज़र का डेवलपर कंसोल खोल रहे हैं और कोड को सीधे पेज पर चला रहे हैं।

const quotes = document.querySelectorAll('quote');: यहां, हम पृष्ठ पर उन सभी तत्वों का चयन कर रहे हैं जो .quote वर्ग से मेल खाते हैं। यह हमें उद्धरण तत्वों की एक नोडल सूची देता है।

const quotesArray = [];: हम अपने द्वारा निकाले गए उद्धरणों को संग्रहीत करने के लिए एक खाली सरणी प्रारंभ करते हैं।

के लिए (उद्धरणों का स्थिरांक उद्धरण) { ... }: यह लूप प्रत्येक उद्धरण तत्व पर पुनरावृत्त होता है। प्रत्येक के लिए, हम उद्धरण और लेखक का पाठ निकालते हैं।

quotesArray.push({उद्धरण: टेक्स्ट, लेखक });: प्रत्येक उद्धरण के लिए, हम एक ऑब्जेक्ट बनाते हैं जिसमें उद्धरण टेक्स्ट और लेखक होता है, फिर इस ऑब्जेक्ट को quotesArray में धकेलते हैं।

रिटर्न कोट्सअरे;: अंत में, हम कोट्स की सरणी लौटाते हैं, जिसे बाद में हमारे नोड.जेएस वातावरण में कोट्सस्क्रेपर में संग्रहीत किया जाता है।

डेटा निकालने की यह विधि शक्तिशाली है क्योंकि यह आपको उपयोगकर्ता की तरह ही पेज के साथ इंटरैक्ट करने की अनुमति देती है, लेकिन स्वचालित और प्रोग्रामेटिक तरीके से।

ब्राउज़र बंद करना

ब्राउज़र का इंतजार करें। बंद करें();: डेटा को स्क्रैप करने के बाद, संसाधनों को खाली करने के लिए ब्राउज़र को बंद करना महत्वपूर्ण है। यह लाइन सुनिश्चित करती है कि हमारे द्वारा लॉन्च किया गया ब्राउज़र इंस्टेंस ठीक से बंद हो गया है।

भाग 2 की प्रतीक्षा है

इस स्क्रिप्ट के साथ, आपने Puppeteer का उपयोग करके एक वेबसाइट से सफलतापूर्वक डेटा स्क्रैप कर लिया है। लेकिन हम बस जो संभव है उसकी सतह को खंगाल रहे हैं। भाग 2 में, हम गतिशील सामग्री को संभालने जैसी अधिक उन्नत तकनीकों का पता लगाएंगे और स्क्रैप किए गए डेटा की एपीआई कार्यक्षमता बनाने के लिए Express.JS का उपयोग करेंगे। हमारे साथ बने रहें क्योंकि हम कठपुतली की दुनिया में गहराई से उतर रहे हैं!