การใช้งาน Web Scraping ในภาษา Next.js แบบง่ายๆ

ในยุคที่ข้อมูลมีความสำคัญสูงสุดสำหรับการตัดสินใจและการพัฒนาธุรกิจ ข้อมูลที่อยู่บนเว็บกลายเป็นแหล่งทรัพยากรที่มีค่ามาก อย่างไรก็ตาม การค้นหาข้อมูลที่ถูกต้องจากเว็บมักใช้เวลานานและอาจไม่สามารถนำข้อมูลที่ต้องการออกมาได้ในทันที Web scraping จึงเป็นเครื่องมือที่มีประโยชน์ในการดึงข้อมูลจากเว็บไซต์ต่างๆ

วันนี้เราจะมาทดลองใช้ Web Scraping ด้วย Next.js ซึ่งเป็น Framework ที่ถูกพัฒนาขึ้นบน React.js ช่วยให้การสร้าง Web Application เป็นเรื่องง่ายและรวดเร็ว

Web Scraping คืออะไร?

Web scraping คือกระบวนการที่อนุญาตให้เราดึงข้อมูลจากเว็บไซต์โดยอัตโนมัติ โดยใช้โปรแกรมหรือสคริปต์ในการทำงาน ซึ่งสามารถนำข้อมูลที่ได้มาวิเคราะห์ ใช้งาน หรือเก็บรักษาได้ตามความต้องการ

เหตุใดจึงเลือก Next.js สำหรับ Web Scraping?

Next.js มาพร้อมกับฟีเจอร์ที่หลากหลาย เช่น Server-side rendering, Static site generation และ API routes ที่ช่วยให้เราสามารถทำการดึงข้อมูลได้อย่างมีประสิทธิภาพ นอกจากนี้ Next.js ยังง่ายต่อการใช้งานและมี Community ที่เข้มแข็ง ซึ่งสามารถให้ความช่วยเหลือได้ในกรณีที่เกิดปัญหา

การติดตั้ง Next.js

ขั้นแรกเราจะต้องเริ่มจากการติดตั้ง Next.js ในระบบของเราก่อน โดยใช้คำสั่งดังนี้:

 npx create-next-app web-scraper
cd web-scraper

จากนั้นติดตั้ง `axios` และ `cheerio` ซึ่งเป็น Bibliotheca ที่เราจะใช้ในการดึงข้อมูลและจัดการกับ DOM:

 npm install axios cheerio

ตัวอย่างโค้ด Web Scraping

ในตัวอย่างนี้เราจะทำการดึงข้อมูลจากเว็บไซต์ Wikipedia เกี่ยวกับ "Programming Languages" ดังนี้:

สร้างไฟล์ API

เราจะสร้าง API endpoint ใน Next.js ซึ่งเราจะใช้ในการดึงข้อมูลจาก Wikipedia

1. เปิดโฟลเดอร์ `pages/api` และสร้างไฟล์ชื่อ `scrape.js`

2. ใส่โค้ดด้านล่างนี้ลงไป

 import axios from 'axios';
import cheerio from 'cheerio';

export default async function handler(req, res) {
  const url = 'https://en.wikipedia.org/wiki/Programming_language';

  try {
    const { data } = await axios.get(url);
    const $ = cheerio.load(data);
    const programmingLanguages = [];

    $('table.wikitable tbody tr').each((index, element) => {
      const language = $(element).find('td:nth-child(1)').text().trim();
      const releaseYear = $(element).find('td:nth-child(3)').text().trim();

      if (language) {
        programmingLanguages.push({ language, releaseYear });
      }
    });

    res.status(200).json(programmingLanguages);
  } catch (error) {
    res.status(500).json({ error: 'Error loading data' });
  }
}

การทำงานของโค้ด

- เราจะสร้างตัวแปร `programmingLanguages` เพื่อเก็บข้อมูลที่เราดึงมาจากตารางในหน้า Wikipedia

- ในขั้นตอน `each()` เราจะดึงข้อมูลชนิดภาษาและปีที่มีการปล่อยออกมาจากตารางใน Wikipedia

ทดสอบ API

เมื่อเราได้สร้าง API เรียบร้อยแล้ว เราสามารถทดสอบได้โดยการรันโปรเจคด้วยคำสั่ง:

 npm run dev

และเปิดหน้าเว็บบราวเซอร์ที่ `http://localhost:3000/api/scrape` คุณจะเห็นข้อมูลภาษาโปรแกรมที่ถูกดึงมาจาก Wikipedia ในรูปแบบ JSON

Use Case ในโลกจริง

ข้อควรระวัง เมื่อใช้ Web Scraping

เรียนรู้เพิ่มเติมที่ EPT

ทุกวันนี้ Programming เป็นสกิลที่มีความสำคัญ ซึ่งการเรียนรู้วิธี Web Scraping ถือเป็นหนึ่งในพื้นฐานที่ดีในการเริ่มต้น พื้นฐานการเขียนโค้ด การและการทำงานกับข้อมูลมีค่ามากในหลายๆ แวดวง หากคุณสนใจที่จะเริ่มต้นเรียนรู้เกี่ยวกับการเขียนโปรแกรม Web Scraping หรือทักษะการเขียนโปรแกรมที่จำเป็นในการพัฒนาทักษะเหล่านี้ สามารถเข้าร่วมกับเราได้ที่ EPT (Expert-Programming-Tutor) ซึ่งเรามีหลักสูตรที่ออกแบบเป็นพิเศษเพื่อสนับสนุนการเรียนรู้ของคุณ!

มาเริ่มเรียนรู้การเขียนโปรแกรมไปด้วยกันที่ EPT กันเถอะ!

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