Scraping website merupakan motede pengambilan data-data yang ada di sebuah website dengan cara memilah-milah elemen dari website tersebut yang kemudian akan di ambil nilai-nilai atau isi dari elemen-elemen tersebut

Scraping website biasanya di gunakan untuk mengumpulkan data-data dari berbagai website yang ada di internet, perlu di ketahui secara umum scraping website tidaklah etis atau bisa di anggap mencuri konten karena pada dasarnya kita mengambil data-data website orang kecuali jika data tersebut bersifat terbuka atau kita sudah ijin ke pemilik website tersebut

kali ini kita akan mencoba mescraping website ecommerce yang cukup terkenal yaitu https://www.tokopedia.com

kita akan men-scrape data-data produk yang ada di fitur pencarian-nya contohnya seperti
https://www.tokopedia.com/search?st=product&q=laptop dimana kita mencari sebuah laptop

silahkan buka like pencarian produk tadi dan cobalah untuk meng-inspek halamannya

hal terpenting dalam scraping adalah kita mengetahui dengan tepat struktur website yang akan kita scraping

cobalah untuk mengarahkan inspek ke bagian nama dan harga produk

bisa kita lihat elemen yang memuat nama produk tersebut memiliki class dan atribute lainnya, nantinya class dan attribute ini bisa menjadi patokan untuk menyeleksi elemen yang sesuai saat proses scraping

oke kita lanjut ke proses scrapingnya, yang kalian perlukan adalah

• Node JS – https://nodejs.org/en/download
• Text/Code editor

pertama buatlah folder project baru contohnya “tutorial_scraping”

di dalam folder tersebut jalankan perintah berikut di terminal/cmd

npm init -y

perintah tadi akan menggenerate file baru bernama “package.json” yang di dalamnya berisi informasi dari projek kita mulai dari nama,deskripsi,dan versi projek kita

{
  "name": "tutorial_scraping",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
  
  },
}

berikutnya kita akan menginstall dependencies axios, cheerio dan puppeter

npm i cheerio puppeteer random-useragent

proses instalasi mungkin agak lama khusunya untuk puppeteer

cheerio akan kita gunakan untuk seleksi elemen html

random-useragent untuk menggenerate data identitas untuk browser puppeteer agar target scraping website tidak mencurigai kita sebagai request yang mencurigakan atau bot

sedangkan puppeteer berguna sebagai browser headless

Apa itu browser headless ?

browser headless pada dasarnya adalah browser seperti chrome dan firefox tapi versi ini versi headless atau tidak punya UI/GUI, kenapa kita perlu ini ? karena kita akan mengscraping website tokopedia yang dimana kontennya bisa ter-load jika menggunakan browser saja yang support javascript

artinya jika kita me-request website tokopedia menggunakan http client seperti axios hasil dari request tersebut akan halaman kosong saja atau kontennya kosong karena tokopedia semua kontennya hanya akan terload saat kita membukanya dengan browser, website seperti ini bisa di sebeut SPA (Single Page Application)

oke lanjut yang pertama buatlah file baru di dalam folder projek kita dengan nama “app.js” lalu kita panggil cheerio dan puppeteer

const cheerio = require("cheerio");
const puppeteer = require('puppeteer');
const randomUseragent = require('random-useragent');

kemudian kita inisiasi puppeteer-nya

(async () => {
    const url = "https://www.tokopedia.com/search?st=product&q=laptop";
    const randomAgent = randomUseragent.getRandom();
    const browser = await puppeteer.launch({
        args: [
            '--no-sandbox',
            '--disable-setuid-sandbox',
        ],
    });
    const context = await browser.createIncognitoBrowserContext();//mode penyamaran
    const page = await context.newPage();//membuat tab baru
    await page.setJavaScriptEnabled(true);//aktifkan javascript
    await page.setUserAgent(randomAgent);//setting user agent
    await page.goto(url, { waituntil: 'domcontentloaded', timeout: 0 });//tunggu proses dom/load pagenya selesai
    const body = await page.evaluate(() => {
        return document.querySelector('body').innerHTML;
    });//mendapatkan isi tag html body

    console.log(body);


    await browser.close();//close browser puppeteer jika sudah selesai
})();

kemudian bisa kita test dengan menajalankan perintah berikut di terminal/cmd

node app.js

prosesnya akan berlangsung beberapa detik hal ini karena pada dasarnya kita membuka browser puppeteer dan mengunjungi url tokopedia

jika berhasil kita bisa lihat di terminal/cmd kita akan muncul hasil berupa tulisan tag html yang panjang

selanjutnya dari hasil tag html kita akan memilah-milah elemen-elemen/data mana saja yang akan kita ambil menggunakan cheerio

const $ = cheerio.load(body);

kita akan menggunakan variable “$” jika kalian pernah menggunakan jquery mungkin akan tidak asing dengan ini

pertama kita kembali ke halaman https://www.tokopedia.com/search?st=product&q=laptop dan inspek lagi

untuk memudahkan dalam pemilahan elemen html kita akan cari elemen yang memuat/me-wrap semua data masing-masing produknya, kali ini saya memilih elemen dengan attribute data-testid=”master-product-card”

kembali ke kodingan kita akan seleksi elemen tersebut

const listItems = $('[data-testid="master-product-card"]');

setelah itu kita tinggal me loop elemen tersebut lalu kita tinggal menyari dan menyeleksi elemen yang berisi nilai/data yang kita inginkan contohnya kali ini saya akan menyeleksi elemen yang berisi nama,harga serta link tiap produknya, yaitu elemen dengan attribute [data-testid=”spnSRPProdName”] dan [data-testid=”spnSRPProdPrice”] perlu di ingat kalian bisa mengganti selektor tersebut dengan class misalnya .css-1b6t4dn untuk nama dan .css-1ksb19c untuk harga. saya menggunakan attribute data-testid agar mudah di baca

var resulst = [];
listItems.each(function (idx, el) {
    var nama = $('[data-testid="spnSRPProdName"]', el).text();
    var harga = $('[data-testid="spnSRPProdPrice"]', el).text();
    var link = $('a[href]', el).attr("href");
    if (harga != null && harga != "") {
        resulst.push({
            "nama": nama,
            "harga": harga,
            "link": link
        });
    }

});

console.dir(resulst);

kalian stop proses “node app.js” dengan meng-klik CTRTL+C atau close terminal/cmd-nya lalu jalankan lagi node app.js di terminal/cmd yang baru dan lihat hasilnya

berikut kode lengkapnya

const cheerio = require("cheerio");
const puppeteer = require('puppeteer');
const randomUseragent = require('random-useragent');

(async () => {
    const url = "https://www.tokopedia.com/search?st=product&q=laptop";
    const randomAgent = randomUseragent.getRandom();
    const browser = await puppeteer.launch({
        args: [
            '--no-sandbox',
            '--disable-setuid-sandbox',
        ],
    });
    const context = await browser.createIncognitoBrowserContext();//mode penyamaran
    const page = await context.newPage();//membuat tab baru
    await page.setJavaScriptEnabled(true);//aktifkan javascript
    await page.setUserAgent(randomAgent);//setting user agent
    await page.goto(url, { waituntil: 'domcontentloaded', timeout: 0 });//tunggu proses dom/load pagenya selesai
    const body = await page.evaluate(() => {
        return document.querySelector('body').innerHTML;
    });//mendapatkan isi tag html body

    const $ = cheerio.load(body);
    const listItems = $('[data-testid="master-product-card"]');

    var resulst = [];
    listItems.each(function (idx, el) {
        var nama = $('[data-testid="spnSRPProdName"]', el).text();
        var harga = $('[data-testid="spnSRPProdPrice"]', el).text();
        var link = $('a[href]', el).attr("href");
        if (harga != null && harga != "") {
            resulst.push({
                "nama": nama,
                "harga": harga,
                "link": link
            });
        }

    });

    console.dir(resulst);


    await browser.close();//close browser puppeteer jika sudah selesai
})();

kalian bisa mengubah urlnya dengan pencarian produk lainnya misalnya handphone atau bahkan menggunakan filter pencarian yang tersedia di tokopedia

jika mengalami masalah “Access Denied” atau data tidak muncul coba ganti user agentnnya manual contohnya seperti ini

await page.setUserAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36");

atau kalian bisa cari user agent browser yang kalian gunakan dengan mencari kata kunci “my user agent” di google