ภาพรวมระดับสูง
เมื่อก่อนผมต้องทำการ crawl เว็บไซต์เพื่อหาลิงก์ จากนั้นนำลิงก์เหล่านั้นไป crawl ข้อมูลรายละเอียดโดยใช้ Selenium หรือ Puppeteer แต่โครงสร้างข้อมูลของเว็บไซต์นั้นซับซ้อน ทำให้ไม่สามารถเริ่มต้นด้วย Selenium และ Node.js ได้โดยตรง นอกจากนี้ ข้อมูลบนเว็บไซต์มีปริมาณมากมาย จึงจำเป็นต้องหาวิธีการ crawl ลิงก์ทั้งหมดก่อน แล้วค่อยส่งต่อไปทำการ crawl รายละเอียดของแต่ละหน้า
นั่นคือจุดที่ผมค้นพบเทคนิคน่าสนใจกับ Browser Console API วิธีนี้ใช้ได้กับเว็บไซต์ใดๆ โดยไม่ต้องตั้งค่ามากนัก เพราะมันแค่ JavaScript ธรรมดา
1. การดึงอินสแตนซ์ Console Object จากเบราว์เซอร์
// Console API เพื่อล้างคอนโซลก่อนบันทึกข้อมูลใหม่
console.API;
if (typeof console._commandLineAPI !== 'undefined') {
console.API = console._commandLineAPI; // Chrome
} else if (typeof console._inspectorCommandLineAPI !== 'undefined') {
console.API = console._inspectorCommandLineAPI; // Safari
} else if (typeof console.clear !== 'undefined') {
console.API = console;
}
โค้ดข้างต้นพยายามดึงอินสแตนซ์ Console Object ตามเบราว์เซอร์ที่ผู้ใช้ใช้อยู่ คุณสามารถข้ามส่วนนี้ไปได้เลย และกำหนดอินสแตนซ์โดยตรงตามเบราว์เซอร์ของคุณ
ตัวอย่างเช่น ถ้าใช้ Chrome โค้ดด้านล่างก็เพียงพอแล้ว:
if (typeof console._commandLineAPI !== 'undefined') {
console.API = console._commandLineAPI; // Chrome
}
2. การกำหนดฟังก์ชันช่วยเหลือ Junior
สมมติว่าคุณได้เปิดบทความ Medium ไว้ในเบราว์เซอร์แล้ว บรรทัดที่ 6-12 กำหนดแอตทริบิวต์ของ DOM Element ที่ใช้สำหรับดึง หัวข้อบทความ, จำนวนเคลป, ชื่อผู้ใช้, URL รูปโปรไฟล์, คำอธิบายโปรไฟล์ และเวลาอ่าน ตามลำดับ
นี่คือข้อมูลพื้นฐานที่ต้องการแสดงสำหรับบทความนี้ คุณสามารถเพิ่มองค์ประกอบอื่นๆ ได้ เช่น การดึงลิงก์จากบทความ, รูปภาพทั้งหมด หรือลิงก์ฝัง (embed links)
3. การกำหนดฟังก์ชันช่วยเหลือ Senior — ฟังก์ชันหลัก
ขณะที่เรากำลัง crawl หน้าเว็บเพื่อหาองค์ประกอบต่างๆ เราจะเก็บข้อมูลเหล่านั้นไว้ในคอลเลกชัน คอลเลกชันนี้จะถูกส่งต่อไปยังฟังก์ชันหลักหนึ่ง
เราได้กำหนดฟังก์ชันชื่อ console.save ฟังก์ชันนี้มีหน้าที่สร้างไฟล์ CSV/JSON จากข้อมูลที่ส่งเข้าไป
มันสร้าง Blob Object พร้อมข้อมูลของเรา Blob object แทนออบเจกต์คล้ายไฟล์ของข้อมูลดิบที่ไม่เปลี่ยนแปลง Blobs แทนข้อมูลที่ไม่จำเป็นต้องอยู่ในรูปแบบ JavaScript ต้นฉบับ
การสร้าง blob จะถูกผูกกับแท็กลิงก์ <a> ซึ่งจะมีการกระตุ้นเหตุการณ์คลิก (click event)
นี่คือตัวอย่างการใช้งาน console.save พร้อมข้อมูล array ขนาดเล็ก:
[Demo GIF แสดงการทำงาน]
การรวมโค้ดทั้งหมดเข้าด้วยกัน
เมื่อรวมชิ้นส่วนโค้ดทั้งหมดเข้าด้วยกัน เราจะได้:
- Console API Instance
- ฟังก์ชันช่วยเหลือสำหรับแยกองค์ประกอบ
- ฟังก์ชัน Console Save สำหรับสร้างไฟล์
ลองรัน console.save() ในเบราว์เซอร์เพื่อบันทึกข้อมูลลงไฟล์ คุณสามารถไปที่บทความบน Medium และรันโค้ดนี้ใน Browser Console ได้เลย
[Demo GIF แสดงการทำงาน]
ผมได้แสดงตัวอย่างการดึงข้อมูลจากหน้าเดียว แต่โค้ดเดียวกันนี้สามารถปรับใช้เพื่อ crawl หลายบทความจากหน้าแรกของ Publisher ได้ ตัวอย่างเช่น freeCodeCamp: คุณสามารถนำทางจากบทความหนึ่งไปอีกบทความหนึ่ง และกลับมาที่หน้าแรกของ Publisher (โดยใช้ปุ่ม Back ของเบราว์เซอร์) โดยหน้าเว็บไม่ถูกโหลดใหม่
ด้านล่างคือโค้ดขั้นต่ำที่จำเป็นสำหรับการดึงหลายบทความจากหน้าแรกของ Publisher:
[Demo GIF แสดงการดึงคำอธิบายโปรไฟล์จากหลายบทความ]
สำหรับแอปพลิเคชันแบบนี้ หลังจากที่คุณ scrape ข้อมูลได้แล้ว สามารถส่งต่อไปยังฟังก์ชัน console.save เพื่อจัดเก็บในไฟล์ได้ทันที
ฟังก์ชัน console save สามารถผูกกับโค้ดคอนโซลของคุณได้อย่างรวดเร็ว และช่วยให้คุณ dump ข้อมูลลงไฟล์ได้ ผมไม่ได้บอกว่าคุณ ต้อง ใช้คอนโซลในการ scrape ข้อมูล แต่บางครั้งวิธีนี้จะเร็วกว่ามาก เนื่องจากเราทุกคนคุ้นเคยกับการทำงานกับ DOM โดยใช้ CSS Selectors
คุณสามารถดาวน์โหลดโค้ดจาก GitHub ได้
ขอบคุณที่อ่านบทความนี้! หวังว่าจะให้ไอเดียก้าวหน้าในการ scrape ข้อมูลอย่างรวดเร็วโดยไม่ต้องตั้งค่ามากนัก กดปุ่มเคลปถ้าชอบ! หากมีคำถาม ส่งอีเมลมาที่ praveend806 [at] gmail [dot] com
แหล่งข้อมูลเพิ่มเติมเกี่ยวกับ Console:
- Using the Console | Tools for Web Developers | Google Developers
เรียนรู้วิธีนำทาง Chrome DevTools JavaScript Console - Browser Console
Browser Console คล้าย Web Console แต่ใช้กับเบราว์เซอร์ทั้งหมดแทนที่จะเป็นแท็บเนื้อหาเดียว - Blob
Blob object แทนออบเจกต์คล้ายไฟล์ของข้อมูลดิบที่ไม่เปลี่ยนแปลง
Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started
