Webscraping Node + puppeteer

Webscraping adalah metode yang di gunakan untuk mengekstrak dan mengambil data dari halaman tertentu bisa berupa gambar, teks, ataupun url pada suatu website, apabila website tersebut tidak menyediakan api yang dapat gunakan. dan puppeteer merupakan Library Node yang diperlukan untuk melakukan scraping. Di tulisan kali ini saya akan mencoba untuk melakukan scraping pada salah satu website untuk mengambil beberapa data.

Menentukan data yang akan di ambil

Website yang akan di ambil datanya disini adalah medium.com . untuk menentukan data yang akan di ambil kita bisa menekan F12 untuk membuka tab inspector, untuk mencari komponen/tag html pada website yang datanya akan di ambil.

sebagai contoh disini saya akan mengambil trending yang ada pada website medium.com , dengan cara mencopy selector seperti gambar di atas. contoh selector yang saya dapatkan

Mencoba Puppeteer

Setelah mendapatkan selector tahap berikutnya kita bisa mencoba untuk menguji coba scraping dengan mengunjungi web https://try-puppeteer.appspot.com/ .

disini kita bisa menguji coba selector yang telah di copy tadi menggunakan puppeteer, dengan merubah script seperti di bawah.

const browser = await puppeteer.launch();

const page = await browser.newPage();
await page.goto('https://medium.com');

const Log = await page.$$eval('#root > div > div.ar.do > div > div > div > div > div > div > div > div', item => item.map(data => data.innerText))

console.log(Log);
await page.screenshot({path: 'screenshot.png'});

await browser.close();

Penjelasan

Puppeteer adalah Library NodeJs yang menyediakan API untuk menjalankan browser chromium. Semua yang sering kita lakukan di browser, bisa kita convert & kontrol menggunakan Puppeteer.

• baris ke 1 akan menjalankan puppeter untuk membuka browser.
• baris ke 2 akan mengontrol puppeter untuk membuka tab baru pada browser.
• baris ke 3 akan mengarahkan tab browser yang telah terbuka menuju website medium.
• baris ke 4 membuat variabel untuk menampung data yang akan di scraping dengan proses : mencari tag html menggunakan selector yang telah di copy → mendapatkan tag yang di inginkan berbentuk array → looping tag html dan return data menjadi teks .
• baris ke 5 mencetak hasil data dalam bentuk teks ke console
• baris ke 6 screenshoot halaman medium.com .
• baris ke 7 menutup browser.

Hasil scraping

dari hasil ini kita telah mendapatkan list trending pada medium.com dalam bentuk teks.

dari sini kita sudah melakukan scraping pada website medium.com , disini saya hanya mencoba scraping melalui website yang di sediakan puppeteer. tetapi jika ingin mencobanya langung pada codingan bisa dengan menginstall package puppeteer pada nodejs.

Scraping dengan nodejs

untuk melakukan scraping kita bisa membuat project baru dengan comman.

npm init --y #[↵]

Installasi

Untuk install nya cukup memasukkan command ini di terminal.

npm i puppeteer #[↵]
# atau yarn add puppeteer [↵]

untuk penginstall Puppeteer, secara otomatis akan mendownload Chromium versi terbaru dengan size kira-kira [170MB → Mac] [ 282MB → Linux] [280MB → Windows] .

tapi jika kamu ingin menginstall versi ringannya bisa menggunakan .

npm i puppeteer-core #[↵]
#atau yarn add puppeteer-core [↵]

Setelah semua persiapan sudah siap , kita masuk ke bagian menulis codingan.

Scraping Code

buat file dengan nama index.js dan masukkan codingan di bawah ini.

// Mengimport Puppeter
const puppeteer = require("puppeteer");

// dilanjutkan dengan codingan yang telah di coba pada [https://try-puppeteer.appspot.com](https://try-puppeteer.appspot.com/)

(async () => {
    const browser = await puppeteer.launch();

    const page = await browser.newPage();
    await page.goto('https://medium.com');
    
    const Log = await page.$$eval('#root > div > div.ar.do > div > div > div > div > div > div > div > div', item => item.map(data => data.innerText))
    
    console.log(Log);
    await page.screenshot({path: 'screenshot.png'});
    
    await browser.close();
})();

# Pesan Penulis

Bagaimana cukup mudah kan? Puppeteer tidak hanya sekedar mengambil data seperti di atas tetapi kita bisa untuk mengambil data yang butuh authentikasi atau menyimpan cookies browser, menjalankan browser di belakang layar, dan banyak lagi , contoh aplikasi scraping yang saya buat bisa dilihat disini. Untuk Dokumentasi Lengkapnya dapat di lihat Disini.

Cukup itu yang dapat saya berikan, semoga bermanfaat. Terimakasih 😁