Skip to main content
เทคโนโลยี

Web Scraping ด้วย Node.JS

By มกราคม 6th, 2022No Comments

Web Scraping คืออะไร

Web Scraping เป็นวิธีดูดข้อมูลต่าง ๆ จากหน้าเว็บที่เปิดเผยต่อสาธารณะ เช่น ราคา ข้อความ รูปภาพ ข้อมูลติดต่อ และอื่นๆ อีกมากมาย Web Scraping มีประโยชน์อย่างมากสำหรับการรวบรวมข้อมูล จากที่อาจจะต้องใช้เวลานานในการรวบรวมข้อมูลจากเว็บนั้น ๆ

เขียนโดย
Sirasit Boonklang – BorntoDev Co., Ltd.

 

ตัวอย่างการใช้ประโยชน์ Web Scraping ได้แก่:

  • การดึงข้อมูลราคาสินค้าจากเว็บไซต์อีคอมเมิร์ซเช่น amazon, ebay หรือ alibaba
  • ดึงโพสต์ ไลค์ คอมเมนต์ ผู้ติดตาม จากโซเชียลมีเดีย 
  • ดึงข้อมูลผู้ติดต่อจากเว็บไซต์ต่าง ๆ เช่น Linkedin

 

ซึ่ง Web Scraping สามารถใช้เครื่องมือหรือภาษาที่หลากหลายในการทำ Web Scraping ได้

โดยวันนี้เราจะมาใช้ Puppeteer ซึ่งเป็นไลบรารี่สำหรับการทำ Web Scraping ใน Node.JS กัน

 

Puppeteer คืออะไร

Puppeteer เป็น Node ไลบรารี ที่มี API ระดับสูงเพื่อควบคุม Chrome หรือ Chromium ผ่านโปรโตคอล DevTools และ Puppeteer ทำงานแบบ headless  แต่สามารถกำหนดค่าให้เรียกใช้ Chrome หรือ Chromium แบบเต็มได้

 

Headless Chrome คือ วิธีการเรียกใช้เบราว์เซอร์ Chrome ในสภาพแวดล้อมที่ไม่มีส่วนหัว คือการใช้งาน Chrome โดยไม่ต้องใช้ Chrome! จะเป็นการนำคุณลักษณะแพลตฟอร์มเว็บที่ทันสมัยทั้งหมดที่มีให้โดย Chromium และเอ็นจิ้นการเรนเดอร์ Blink ไปยัง command line

 

ฟีเจอร์เด่น ๆ ของ Puppeteer  ได้แก่

  • ความสามารถในการแยกเนื้อหาข้อความขององค์ประกอบที่คัดลอกมา
  • ความสามารถในการโต้ตอบกับหน้าเว็บโดยการกรอกแบบฟอร์ม
  • ความสามารถในการทำ Web Scraping และดาวน์โหลดรูปภาพจากเว็บ

สามารถอ่านเพิ่มเติมเกี่ยวกับ Puppeteer  ได้ที่ puppeteer/puppeteer: Headless Chrome Node.js API (github.com)

 

มาเริ่มทำ Web Scraping ด้วย Node.JS กันเลย

1.หากยังไม่มี Node.JS ให้ทำการโหลด Node.JS ก่อนได้ที่ Download | Node.js (nodejs.org)

2.สร้างไฟล์ package.json ด้วยคำสั่ง npm init -y

3.ทำการติดตั้ง puppeteer ด้วยคำสั่ง npm i puppeteer 

4.เมื่อติดตั้ง puppeteer แล้ว และใช้คำสั่ง code .เพื่อเปิด Visual Studio Code  จะพบ node_modules ขึ้นมา

5.โดยตัวอย่างนี้เราจะทำการดึงคำพ้องความหมายของคำว่า “smart” จากเว็บ https://www.thesaurus.com/browse/smart

6.จากนั้นไปที่ Visual Studio Code แล้ว สร้างไฟล์ JavaScript โดยตัวอย่างนี้จะตั้งชื่อว่า “index.js” หรือสามารถตั้งชื่ออะไรก็ได้ตามต้องการ แต่จะต้องใช้ require(‘puppeteer’) ในบรรทัดแรกและสร้างฟังก์ชัน async ซึ่งเราจะเขียนโค้ดดังนี้

const puppeteer = require('puppeteer')

async function scrape() {
}
scrape()

7.ขั้นต่อไปให้เริ่มต้นอินสแตนซ์ของเบราว์เซอร์ใหม่และกำหนดตัวแปร “page” ซึ่งใช้สำหรับไปยังหน้าเว็บและคัดลอกองค์ประกอบภายในเนื้อหา HTML ของหน้าเว็บ

const puppeteer = require('puppeteer')

async function scrape() {
   const browser = await puppeteer.launch({})
   const page = await browser.newPage()
}
scrape()

8.หากต้องการค้นหาและคัดลอกคำพ้องความหมายของ “smart” ตัวแรก ก่อนอื่นให้ไปที่คำพ้องความหมายของ “smart” คลิกที่คำพ้องความหมายแรกและคลิกที่ “inspect” ซึ่งจะทำให้ DOM ของหน้าเว็บนี้ปรากฏขึ้นที่ด้านขวาของหน้าจอ

 

9.ต่อไปให้คลิกขวาที่องค์ประกอบ HTML ที่ไฮไลต์ซึ่งมีคำพ้องความหมายแรก แล้วคลิก “copy selector”

10.แล้วไปยังไฟล์ index.js ให้กำหนดตัวแปร “page” ไปที่ https://www.thesaurus.com/browse/smart ในอินสแตนซ์ของเบราว์เซอร์ที่สร้างขึ้นใหม่

11.ต่อไปกำหนดตัวแปร “element” โดยให้ page รอ element’s selector ที่ต้องการ ปรากฏใน DOM ของหน้าเว็บ

12.ข้อความใน element จะถูกดึงออกมาโดยใช้ฟังก์ชัน evaluate() และแสดงภายในตัวแปร “text” สุดท้ายก็ปิดอินสแตนซ์ของเบราว์เซอร์ โดยโค้ดจะเป็นดังนี้

const puppeteer = require('puppeteer')

async function scrape() {
   const browser = await puppeteer.launch({})
   const page = await browser.newPage()

   await page.goto('https://www.thesaurus.com/browse/smart')
   var element = await page.waitFor("#meanings > div.css-ixatld.e15rdun50 > ul > li:nth-child(1) > a")
   var text = await page.evaluate(element => element.textContent, element)
   console.log(text)
   browser.close()
}
scrape()

13.สามารถทดสอบสคริปต์ index.js โดยใช้คำสั่ง node index.js จะเห็นว่าสคริปต์ แสดงคำพ้องความหมายของคำว่า “smart” ตัวแรก

14.หากต้องการคำพ้องมากกว่าอันดับแรกเราสามารถใช้ for loop เข้ามาช่วยได้เช่น

const puppeteer = require('puppeteer')

async function scrape() {
   const browser = await puppeteer.launch({})
   const page = await browser.newPage()

   await page.goto('https://www.thesaurus.com/browse/smart')
   for(i = 1; i < 6; i++){
    var element = await page.waitFor("#meanings > div.css-ixatld.e15rdun50 > ul > li:nth-child(" + i + ") > a")
    var text = await page.evaluate(element => element.textContent, element)
    console.log(text)
   }
   browser.close()
}
scrape()

 

15.เสร็จแล้วก็สามารถลองรันด้วยคำสั่ง node index.js ได้เลยครับ

จะเห็นได้ว่าตอนนี้เราก็สามารถดึงข้อความหรือเนื้อหาจากเว็บได้แล้ว และการคัดลอกข้อมูลจากหน้าเว็บ จะเป็นอีกหนึ่งตัวช่วยในสร้างชุดข้อมูล (dataset) ที่อาจเป็นประโยชน์สำหรับการทำ Machine Learning การทำ Data Visualization หรือการวิเคราะห์ข้อมูล

 

ที่มา: Web Scraping in Node.js! – DEV Community

หากคุณสนใจพัฒนา สตาร์ทอัพ แอปพลิเคชัน
และ เทคโนโลยีของตัวเอง ?

อย่ารอช้า ! เรียนรู้ทักษะด้านดิจิทัลเพื่ออัพเกรดความสามารถของคุณ
เริ่มตั้งแต่พื้นฐาน พร้อมปฏิบัติจริงในรูปแบบหลักสูตรออนไลน์วันนี้

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้
    รายละเอียดคุกกี้

  • คุกกี้สำหรับการติดตามทางการตลาด

    ประเภทของคุกกี้ที่มีความจำเป็นในการใช้งานเพื่อการวิเคราะห์ และ นำเสนอโปรโมชัน สินค้า รวมถึงหลักสูตรฟรี และ สิทธิพิเศษต่าง ๆ คุณสามารถเลือกปิดคุกกี้ประเภทนี้ได้โดยไม่ส่งผลต่อการทำงานหลัก เว้นแต่การนำเสนอโปรโมชันที่อาจไม่ตรงกับความต้องการ
    รายละเอียดคุกกี้

บันทึกการตั้งค่า