Memulai dengan Pengikisan Web dalam JavaScript

Pengikisan web adalah salah satu hal paling menarik di dunia pengkodean.

Apa itu pengikisan web?

Mengapa itu bahkan ada?

Mari kita cari tahu jawabannya.

Apa itu Pengikisan Web?

Pengikisan web adalah tugas otomatis untuk mengekstrak data dari situs web.

Ada banyak aplikasi pengikisan web. Mengekstrak harga produk dan membandingkannya dengan berbagai platform e-Commerce. Mendapatkan kutipan harian dari web. Membangun mesin pencari Anda sendiri seperti Google, Yahoo, dll., Daftarnya terus berlanjut.

Anda dapat melakukan lebih dari yang Anda pikirkan dengan web scraping. Setelah Anda mengetahui cara mengekstrak data dari situs web, Anda dapat melakukan apa pun yang Anda inginkan dengan data tersebut.

Program yang mengekstrak data dari situs web disebut pengikis web. Anda akan belajar menulis web scraper dalam JavaScript.

Terutama ada dua bagian untuk pengikisan web.

  • Mendapatkan data menggunakan pustaka permintaan dan browser tanpa kepala.
  • Parsing data untuk mengekstrak informasi yang tepat yang kita inginkan dari data.

Tanpa basa-basi mari kita mulai.

Pengaturan Proyek

Saya menganggap Anda telah menginstal Node, jika tidak, periksa panduan instalasi NodeJS.

Kita akan menggunakan paket node-fetch dan cheerio untuk web scraping di JavaScript. Mari siapkan proyek dengan npm agar bekerja dengan paket pihak ketiga.

Mari kita segera melihat langkah-langkah untuk menyelesaikan penyiapan kita.

  • Buat direktori bernama web_scraping dan arahkan ke sana.
  • Jalankan perintah npm init untuk menginisialisasi proyek.
  • Jawab semua pertanyaan berdasarkan preferensi Anda.
  • Sekarang, instal paket menggunakan perintah
npm install node-fetch cheerio

Mari kita lihat sekilas paket-paket yang diinstal.

  Temukan Siapa yang Tinggal di Lingkungan Anda?

pengambilan simpul

Paket node-fetch membawa window.fetch ke lingkungan node js. Ini membantu untuk membuat permintaan HTTP dan mendapatkan data mentah.

Cheerio

Paket Cheerio digunakan untuk mem-parsing dan mengekstrak informasi yang diperlukan dari data mentah.

Dua paket node-fetch dan cheerio cukup bagus untuk pengikisan web di JavaScript. Kami tidak akan melihat setiap metode yang disediakan paket. Kita akan melihat aliran pengikisan web dan metode yang paling berguna dalam aliran itu.

Anda akan mempelajari pengikisan web dengan melakukannya. Jadi, mari kita mulai bekerja.

Menggores Daftar Piala Dunia Kriket

Di sini, di bagian ini, kita akan melakukan pengikisan web yang sebenarnya.

Apa yang kita ekstrak?

Dari judul bagiannya, saya rasa Anda akan dengan mudah menebaknya. Ya, apa pun yang Anda pikirkan itu benar. Mari ekstrak semua pemenang dan runner-up piala dunia kriket sampai sekarang.

  • Buat file bernama extract_cricket_world_cups_list.js di proyek.
  • Kami akan menggunakan Piala Dunia Kriket Wikipedia halaman untuk mendapatkan informasi yang diinginkan.
  • Pertama, dapatkan data mentah menggunakan paket node-fetch.
  • Kode di bawah ini mendapatkan data mentah dari halaman Wikipedia di atas.
const fetch = require("node-fetch");

// function to get the raw data
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};

// URL for data
const URL = "https://en.wikipedia.org/wiki/Cricket_World_Cup";

// start of the program
const getCricketWorldCupsList = async () => {
   const cricketWorldCupRawData = await getRawData(URL);
   console.log(cricketWorldCupRawData);
};

// invoking the main function
getCricketWorldCupsList();

Kami mendapat data mentah dari URL. Sekarang saatnya mengekstrak informasi yang kita butuhkan dari data mentah. Mari kita gunakan paket cheerio untuk mengekstrak datanya.

  Bagaimana Mengaktifkan Obrolan Langsung di Situs Web Anda?

Mengekstrak data yang melibatkan tag HTML dengan cheerio sangatlah mudah. Sebelum masuk ke data sebenarnya, mari kita lihat beberapa contoh parsing data menggunakan cheerio.

  • Parsing data HTML menggunakan metode cheerio.load.
const parsedSampleData = cheerio.load(
      `<div id="container"><p id="title">I'm title</p></div>`
   );
  • Kami telah menguraikan kode HTML di atas. Bagaimana cara mengekstrak konten tag p darinya? Itu sama dengan pemilih dalam manipulasi JavaScript DOM.

console.log(parsedSampleData(β€œ#title”).text());

Anda dapat memilih tag yang Anda inginkan. Anda dapat memeriksa berbagai metode dari situs web resmi Cheerio.

  • Sekarang, saatnya mengekstrak daftar piala dunia. Untuk mengekstrak informasi, kita perlu mengetahui tag HTML yang terdapat informasi pada halaman. Pergi ke halaman Wikipedia piala dunia kriket dan periksa halaman untuk mendapatkan informasi tag HTML.

Ini kode lengkapnya.

const fetch = require("node-fetch");
const cheerio = require("cheerio");

// function to get the raw data
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};

// URL for data
const URL = "https://en.wikipedia.org/wiki/Cricket_World_Cup";

// start of the program
const getCricketWorldCupsList = async () => {
   const cricketWorldCupRawData = await getRawData(URL);

   // parsing the data
   const parsedCricketWorldCupData = cheerio.load(cricketWorldCupRawData);

   // extracting the table data
   const worldCupsDataTable = parsedCricketWorldCupData("table.wikitable")[0]
      .children[1].children;

   console.log("Year --- Winner --- Runner");
   worldCupsDataTable.forEach((row) => {
      // extracting `td` tags
      if (row.name === "tr") {
         let year = null,
            winner = null,
            runner = null;

         const columns = row.children.filter((column) => column.name === "td");

         // extracting year
         const yearColumn = columns[0];
         if (yearColumn) {
            year = yearColumn.children[0];
            if (year) {
               year = year.children[0].data;
            }
         }

         // extracting winner
         const winnerColumn = columns[3];
         if (winnerColumn) {
            winner = winnerColumn.children[1];
            if (winner) {
               winner = winner.children[0].data;
            }
         }

         // extracting runner
         const runnerColumn = columns[5];
         if (runnerColumn) {
            runner = runnerColumn.children[1];
            if (runner) {
               runner = runner.children[0].data;
            }
         }

         if (year && winner && runner) {
            console.log(`${year} --- ${winner} --- ${runner}`);
         }
      }
   });
};

// invoking the main function
getCricketWorldCupsList();

Dan, inilah data tergoresnya.

Year --- Winner --- Runner
1975 --- West Indies --- Australia
1979 --- West Indies --- England
1983 --- India --- West Indies
1987 --- Australia --- England
1992 --- Pakistan --- England
1996 --- Sri Lanka --- Australia
1999 --- Australia --- Pakistan
2003 --- Australia --- India
2007 --- Australia --- Sri Lanka
2011 --- India --- Sri Lanka
2015 --- Australia --- New Zealand
2019 --- England --- New Zealand

Keren 😎, kan?

  9 Template & Generator Rencana Pemasaran untuk UKM

Templat Menggores

Mendapatkan data mentah dari URL adalah hal biasa di setiap proyek pengikisan web. Satu-satunya bagian yang berubah adalah mengekstraksi data sesuai kebutuhan. Anda dapat mencoba kode di bawah ini sebagai templat.

const fetch = require("node-fetch");
const cheerio = require("cheerio");
const fs = require("fs");
// function to get the raw data
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};
// URL for data
const URL = "https://example.com/";
// start of the program
const scrapeData = async () => {
   const rawData = await getRawData(URL);
   // parsing the data
   const parsedData = cheerio.load(rawData);
   console.log(parsedData);
   // write code to extract the data
   // here
   // ...
   // ...
};
// invoking the main function
scrapeData();

Kesimpulan

Anda telah mempelajari cara mengikis halaman web. Sekarang, giliran Anda untuk berlatih coding.

Saya juga menyarankan untuk memeriksa kerangka kerja pengikisan web populer untuk mengeksplorasi dan solusi pengikisan web berbasis cloud.

Selamat Coding πŸ™‚

Senang membaca artikelnya? Bagaimana kalau berbagi dengan dunia?