Published on

Web Scraping dengan JSDOM #1

4 min read

Authors

Sebelumnya, saya sudah membuat video tentang web scraping menggunakan JSDOM. bisa kamu tonton video diatas

Pada artikel kali ini, saya akan berbagi tutorial yang saya ketahui sejauh ini tentang web scraping.

Apa itu Web Scraping?

Web Scraping adalah suatu proses pengambilan/pengekstrakan data tertentu yang ada di sebuah website, yang nantinya bisa disajikan dalam format/file tertentu.

Pada umumnya, Web Scraping sering digunakan untuk pengambilan data produk toko online secara massal, dimana data tersebut bisa digunakan kembali untuk mereka yang ingin berjualan online tanpa ribet ngisi data manual. Bisa juga dijadikan RESt Api yang nantinya, data bisa diolah lagi disajikan ke dalam aplikasi yang dikembangkan oleh para developers.

Ah, mungkin kalian sudah paham ya, apa itu Web Scraping. Jadi, langsung saja ke intinya saja. 😅

Persiapan

Sebelum memulai siapkan dulu kebutuhan untuk mengeksekusi anu

  1. Node.js - Download
  2. VSCode - Download
  3. Browser

Kalo udah, kemudian bikin dulu folder project nya, biar lebih rapih.

Buka cmd, ketik

mkdir nama-folder

sebagai contoh disini saya pakai nama lumbung lalu masuk ke direktori yang udah dibuat, ketik

cd nama-folder

langsung saja ketik code . biar masuk ke VSCode dan otomatis membuka folder project nya.

kemudian balik lagi ke cmd, ketik

npm init -y

untuk menginisialisasi package.json. lanjut ke penginstallan dependencies, disini kita hanya butuh Axios dan JSDOM. selera sih, mau pake axios, node-fetch, got, dll.

npm install axios jsdom

Pada studi kasus kali ini, kita akan njajal scrape web https://apkmody.io/ , yang nantinya akan kita sajikan dalam format JSON. Buka browser, masuk ke web tersebut. jangan lupa juga buat aktifin Dev Tools (CTRL+Shift+I) / F12

Misalkan, aku mau cari aplikasi Candy Crush. disini kita akan mengambil data Title, Version, Link (tanda warna hijau)

kita buat file js lalu tulis kodingan seperti ini

const { default: axios } = require("axios");
const { JSDOM } = require('jsdom');

async function searchAPK(query) {
    try {
        // ambil data html dari web pakai axios
        const { data } = await axios.get('https://apkmody.io/?s=' + encodeURI(query));

        // kita load DOM pakai jsdom
        let dom = new JSDOM(data).window.document

        // karena data yang akan kita ambil berupa list, maka kita gunakan querySelectorAll
        let list = [...dom.querySelectorAll('div.container > div.flex-container > div.flex-item')]

        // atau juga bisa seperti ini: let list = [...dom.querySelectorAll('div.flex-item')]

        // declare variabel untuk menampung hasil
        let result = []

        for (let element of list) {
            // kita masukkan data ke dalam variabel result
            result.push({
                title: element.querySelector('article > div > a > div.card-body > div > h2').textContent,
                version: element.querySelector('article > div > a > div.card-body > p').textContent.trim(),
                link: element.querySelector('article > a').getAttribute('href')
            })
        }

        return result
    } catch (error) {
        throw error
    }
}

searchAPK('candy crush').then(console.log)

ketika di jalankan, maka akan mereturn hasil seperti ini:

Penjelasan

[...] adalah iterator, baca penjelasannya: javascript three dots

  • let list = [...dom.querySelectorAll('div.flex-item')]

kita bisa langsung mengambil data pakai div.flex-item, karena itu merupakan parent element

  • title: element.querySelector('article > div > a > div.card-body > div > h2').textContent,

variabel element adalah parent, karena awalnya berupa array, jadi kita bisa gunakan looping for of. title menggunakan HTML Tags h2, jadi kita ambil pakai querySelector. kita hanya butuh isinya aja jadi kita ambil pakai textContent

source kode nanti akan saya upload ke github.

kurang lebih seperti itu, kalo masih ada yang kurang paham bisa tanyakan di komentar, atau mungkin aku buat tutorial selanjutnya

© 2022 Muhamad Ristiyanto | Template by karanpratapsingh