איך כותבים קרולר

קרולר מאפשר לנו לקרוא מידע באופן אוטומטי מאתרים, ולשמור אותו בפורמט הנוח לנו. אז איך כותבים? נעשה את זה קצר. נתחיל ונגמור בשיטה הכי אפקטיבית, גם אם היא לא הכי יעילה: לקרוא את האתר בעזרת התוכנה Puppeteer.

תוכנת "פאפטיר" מאפשרת לנו לגלוש אל האתר ולעשות אינטראקציה עם האלמנטים של העמוד. כל זאת מבלי לראות את הדפדפן. על מנת להתקין את התוכנה יש להתקין Node JS ראשית כל. אחרי זה מתקינים את פאפטיר בעזרת NPM. לא ניכנס לתהליך ההתקנה במאמר זה.

אופן ההפעלה

יש לכתוב סקריפט של JavaScript כמובן, המתאר את מה שהיינו עושים בעמוד לו היינו רוצים לקחת את המידע ישירות מה- DOM. "דום" זה עמוד ה- HTML כאשר הוא קם לחיים בדפדפן והופך לאינטראקטיבי. ממש כביכול בעזרת jQuery. או אז, נריץ את הסקריפט ונחכה לתוצאות.

דוגמא

בדוגמא הזו נרצה לקרוא את כל שמות המאמרים מעמוד הבלוג שלנו. נתמקד בעמוד הראשון. לאחר צפייה קלה בקוד המקור ניתן לומר שהסלקטור הזה יעשה את העבודה

.post-body h4

לכן בטח השורה הזו תופיע במקום כלשהו בסקריפט

var elements = document.querySelectorAll(".post body h4");

הסקריפט הסופי, שפותח את העמוד הנכון, מחכה שהוא ייטען, סוקר את האלמנטים המתאימים לסלקטור (הכותרות של המאמרים) ומדפיס אותם על המסך – הוא להלן:

קוד

var puppeteer = require('puppeteer');
var url = 'https://itgoldman.com/blog/';
async function run() {
	var browser = await puppeteer.launch();
	var page = await browser.newPage();
	var selector = '.post-body h4';
	await page.goto(url);
	await page.waitForSelector(selector);
	var results = await page.evaluate(function() {
		var selector = '.post-body h4';
		var items = document.querySelectorAll(selector)
		var results = []
		items.forEach((item) => {
			results.push(item.innerText.trim());
		});
		return results;
	})
	browser.close();
	var json = JSON.stringify(results, null, 4);
	console.log(json);
}
run();

פלט של הקרולר

[
    "? עדכון SEO",
    "איך עשינו מצב לילה באתר?",
    "למה לא להשתמש ב- CSS ומה ההבדל בין LESS ל- SASS?",
    "החיים כמתכנת פרילנסר",
    "מהו התוסף הכי טוב לוורדפרס, למתכנתים?"
]

והכי כיף בפיתוח הזה? שאפשר לעשות את כל זה בלי לצאת מה- VS Code שלנו. ואו.

בהצלחה