(GAS) Library Cheerio

3 menit saja |

Ini adalah dokumentasi tambahan atau pengayaan untuk library cheerio. Dimana library ini sangat bermanfaat untuk scraping.

Pendahuluan

Bila pada sebelumnya kita sudah belajar cara pakainya, maka ini adalah dokumentasi pelengkapnya.

Jadi di sini bukan materi belajar awal, untuk contoh keseluruhan belajarlah dari materi sebelum-sebelumnya. Tidak perlu ditunjukkan ya. Jika, kamu langsung masuk ke sini tanpa ada pengetahuan sebelumnya, berarti ya kesasar.

Library

ID Library ini untuk tutorial Google Apps Script. Silakan ditambahkan ke proyek masing-masing, pilih salah satu saja.

Pilihlah versi yang paling tinggi (angka paling besar).

Sumber 1

Code: 1ReeQ6WO8kKNxoaA_O0XEQ589cIrRvEBA9qcWpNqdOP17i47u6N9M5Xh0

Sumber: https://github.com/tani/cheeriogs

Sumber 2

Code: MU756IKHJ2hAYP1glQmzgA4ZBvzIux02r

Sumber: https://github.com/3846masa/cheerio-gasify

Inisiasi

Contoh untuk meload dan menginisiasi:

function test() {
  var url = 'https://blog.banghasan.com';
  const response = UrlFetchApp.fetch(url);
  const $ = Cheerio.load(response.getContentText());
  Logger.log($('title').text());
}

Pengayaan

Source HTML

Misalnya ini contoh source code HTML yang akan kita pakai buat sample:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Situsku</title>
    <style>
        .demo {
            font-family:monospace;
        }

        #label {
            font-family: Arial, Helvetica, sans-serif;
            font-weight: bold;
        }

        .miring {
            font-style: italic;
        }
        
        .info{
            font-family: sans-serif;
        }
    </style>
</head>

<body>
    <main>
        <h1>Profilku</h1>

        <p class="demo">
            Aku adalah seorang programmer bot telegram.
        </p>

        <div>Mari kita <b>berkenalan</b> sebentar</div>

        <p>
            Hobiku adalah:
        </p>

        <ul>
            <li>Lari</li>
            <li>Gowes</li>
            <li>Berenang</li>
            <li>Hiking</li>
            <li class="miring">Membaca</li>
            <li>Mendengar Musik</li>
        </ul>

        <p class="info">Jika pengen tahu selengkapnya, lihat <a href="https://blog.banghasan.com">blogku</a> ya!</p>

        <div id="label">Terimakasih telah mampir.</div>

        
    </main>
</body>

</html>

Method

Ada 4 method yang sering dipergunakan.

text() untuk menghasilkan isi text di dalamnya
html() menghasilkan isi berupa source html yang telah dipilih
attr() mendapatkan isi atributnya
find() menemukan element lain di dalamnya
each() mengambil per satuan isi

Adapun method yang lain sering digunakan juga:

first() menuju ke element pertama yang ditemukan
last() menuju ke element terakhir yang ditemukan
parent() menuju ke element diatasnya
child() menuju ke element anaknya (dibawahnya/didalamnya)
next() menuju element berikutnya
prev() menuju element sebelumnya
filter() untuk membuat filter dari element yang sudah dipilih sebelumnya

Selectors

Beberapa selektor yang perlu diketahui:

$("*") untuk memilih semua element.
$("#label") memilih element dengan id="label"
$(".demo") memilih element dengan class="demo"
$("div") memilih semua element <div>
$("h1, div, p") memilih semua element sekaligus <h1>, <div>, dan <p>
$("p.demo") pilihan dengan menggabungkan element <p> dan class demo. Hasilnya: Aku adalah seorang programmer bot telegram.
$("div#label") pilihan dengan menggabungkan element <div> dan id label . Hasilnya: Terimakasih telah mampir.
$("li.miring") memilih element <li> dengan kelas miring. Hasilnya: Membaca
$("li").first() memilih element <li> yang pertama. Hasilnya: Lari
$("li").last() memilih element <li> yang pertama. Hasilnya: Mendengar Musik
$("b") memilih tag <b>, hasilnya berkenalan
$("b").parent() memilih tag diatasnya <b>, hasilnya Mari kita berkenalan sebentar
$("div > b") hasilnya berkenalan juga. Artinya mengambil tag <b> anaknya dari tag <div>
$("li").first().next().text() hasilnya gowes
$(".info > a") mendapatkan blogku
$(".info > a").attr("href"); untuk mendapatkan link dari blogku pada contoh diatas

Dan seterusnya, mungkin nanti diupdate kalau ga males dan banyak yang mencoba atau menanyakannya heheh

Looping

Untuk mendapatkan element-element yang serupa dan perlu tampilkan satu per satu, maka kita butuh looping.

Contohnya ingin mendapatkan daftar hobi diatas.

let hobbies = [];
$('li').each(function (i, e) {
    hobbies[i] = $(this).text();
});

Logger.log(hobbies);

variable i adalah index, sedangkan e adalah untuk element.

Hasilnya: ['Lari', 'Gowes', 'Berenang','Hiking','Membaca','Mendengar Musik' ]

Referensi

Penutup

Awalnya mau dijelaskan contoh di atas sekaligus hasilnya. Tapi males ngelanjutin haha.. ya sudah silakan dicoba-coba sendiri hasil dari selektor diatas.

Kemudian perkaya latihan ke web-web lainnya buat latihan.

Ingat: makin banyak mencoba, bakal makin lancar dan menambah pengalaman.

Yuk dishare

Twitter Facebook Google+ Telegram

bangHasan