(GAS-16) Bot Telegram: Belajar Scraping

9 menit saja |

Baik, kali ini kita belajar agak berat dikit ya. Yang ini sepertinya materi favorit. Banyak ditanyakan, namun juga banyak yang kepentok. Kita akan belajar scraping web, kemudian kita tampilkan pada bot Telegram.

Pendahuluan

Seperti biasa, saya jelaskan dahulu sebagai pengantar tulisan ini.

Latar Belakang

Asumsi

Asumsi yang dibangun pada tulisan yang ini, masih sama dengan sebelumnya.

  1. Sudah membaca dan praktek pada materi-materi sebelumnya, silakan cek halaman Daftar Materi Bot Telegram.
  2. Sudah bergabung pada grup @botIndonesia, penting untuk berdiskusi yak. Jangan chat pribadi, diskusi selalu di grup.
  3. Ini penting sekali, SUDAH PAHAM struktur HTML!

Jika belum paham nomor 3, belajar membuat web pakai HTML dulu ya. Karena yang akan kita pelajari lebih dari sekedar tahu HTML. Tapi juga tau tag dan class pada CSS yang diterapkan di web html.

Kenapa begitu? Karena ini bukan pelajaran dasar. Klo belajar dasar, langsung ke google!

Metode

Metode yang dipergunakan dalam tulisan kali ini, tidak harus sampai selesai dibaca. Bisa dipakai per bagian saja.

Akan diuraikan per kebutuhan, tidak diberikan contoh keseluruhan yang tinggal pakai.

Baca per Bagian materi, langsung bisa dipraktekkan dengan mendeploynya. Namun, tetap sangat disarankan dengan cara berurutan. Mengingat bisa saja satu sama lain sangat terkait.

Jika mengalami kesulitan, bisa melihat videonya (insyaAllah akan dibuatkan juga).

Pelajaran

Ini adalah materi ke 16.

Definisi

Scraping atau Web Scraping, itu apa seh? Definisinya cari di google aja ya. Atau bisa baca di wikipedia

Definisi menurut saya, yang sederhana. Yakni, istilah yang kita pakai buat ngambil isi website terus kita potong-potong, diambil yang mana yang diperlukan saja, trus kita pakai buat keperluan tertentu.

Contohnya kita buka website berita bola, kemudian melihat di sana isinya ada berita, jadwal sepak bola, klasemen, top skore, perolehan poin terakhir, dan lain sebagainya. Yang kita butuhkan hanya mengambil jadwal dan klasemen nya saja. Berita dan isi lainnya dirasa gak perlu. Sedangkan situsnya tersebut ga ada fitur RSS atau API nya. Maka jalan satu-satunya adalah dengan cara scraping ini, yakni mengambil isi webnya sebagian untuk kita manfaatkan.

Sejauh ini paham, kah? 😁

Tapi kita engga akan ngambil sampel berita bola. Saya nyari contoh berkali-kali bingung juga, makanya isi tulisan ini gak jadi-jadi. Kenapa gak ambil web bola? Karena kawatir terlalu rumit sebagian besar pada pusing. Jadi aku cari yang sederhana dulu buat menanamkan pemahaman dan bisa mudah dipraktekkan.

Library

Kita membutuhkan 2 library untuk belajar scraping di sini. Yang pertama tentu sudah kita kenal.

1. Telegram

Code: MHczUHrzvBLV1HsUn5XkOIfvg_do21SJR

Versi: Selalu gunakan versi terbaru (angka yang paling besar)

Sumber: Telegram Library

2. Cheerio

Code: 1ReeQ6WO8kKNxoaA_O0XEQ589cIrRvEBA9qcWpNqdOP17i47u6N9M5Xh0

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

ATAU

Code: MU756IKHJ2hAYP1glQmzgA4ZBvzIux02r

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

Referensi

Bisa dibaca langsung dari situs sumbernya: https://cheerio.js.org/


Baik, saya perkenalkan (bagi yang belum tahu) library baru yang akan kita pakai namanya adalah cheerio.

Cheerio ini terkenal (baca: dikenal, red.) sebagai alat bantu buat scraping. Yang sudah biasa develop web menggunakan jQuery tentu tidak asing dengan syntax-syntax nya, terutama saat bekerja dengan model selector-nya.

OK, masukkan kedua library tersebut kedalam proyek GAS. Seperti biasa, di menu Sumber Daya -> Pustaka.

Add Library

Praktek Pertama

Diawal-awal gak usah banyak teori, langsung praktek aja yak.. teorinya belakangan aja. Meski bakal puanjaaang materi ini nantinya. Sambil lihat contoh, pelajari baris demi baris dari source codenya.

Hmmm, buat praktek saya mikir web berita, web olahraga, web informasi gadget, perkiraan cuaca, dan lain-lain sampai bingung buat awalan pakai yang mana.

Daripada pusing nyari contoh web apa yang mau dipakai buat belajar, karena sudah 3 hari mikirinnya haha.. Kita kembali, pakai blog ini saja dah buat belajar scraping. Kita rombak blognya sedikit, diperbaiki biar enak dijadiin sample haha.

1. Tag Title

Okelah, langsung saja. Buat file script baru di GAS nya. Terserah dikasih nama apa, di saya kasih nama scraping.

Katakanlah ingin mengambil title (judul website).

FYI, title itu adalah tag HTML yang apabila di lihat source codenya, maka ada tulisan:

<title>Judul Websitenya</title>

Coba saja lihat isi source code blog ini.

Title Blog bangHasan

OKE, masuk ke codingannya. Buat sebuah fungsi. Cek langsung ini:

// fungsi scraping Blog BangHasan
function getBlogBangHasan() {

  // url target yang akan di scraping
  var urlTarget = 'https://blog.banghasan.com/';

  // url kita ambil isinya
  var response = UrlFetchApp.fetch(urlTarget);

  // jika web berhasil di ambil datanya, kodenya 200
  if (response.getResponseCode() === 200) {

    // web diambil text nya aja
    var content = response.getContentText();
    
    // kita load ke variable $ datanya
    // dengan parsingnya Cherio, library ke-2 yang kita pasangkan sebelumnya
    const $ = Cheerio.load(content);

    // ambil title webnya: Keheningan
    var title = $('title').text();

    // masukkan logger buat tahu hasilnya
    Logger.log(title);

    return title;
  }
}

Jalankan fungsi tersebut, kemudian lihat hasil log nya (ctrl+enter).

Get Title Blog bangHasan

Maka akan didapati sesuai title webnya: Keheningan

Penjelasan

Mari kita bongkar pemahamannya. Inti dari script di atas ada pada baris ini:

var title = $('title').text();

Artinya, membuat variable title dari tag HTML bernama title.

Kemudian isinya yang berupa text diambil menggunakan method .text()

Sampai sini paham? Kalau tak paham.. diulang-ulangi lagi bacanya!

2. Class Author

Setelah belajar mengambil isi tag HTML, kita belajar ngambil isi dari sebuah class CSS.

Class sering dipergunakan sebagai penanda atau blok tertentu. Untuk mengambil data yang ditandai dengan class CSS, kita pakai format:

$('.class')

Artinya nama class diawali dengan tanda titik (.)

Contoh penerapan, lihat kembali dan amati web blog ini. Kita akan ambil tulisan yang ada disamping kiri atas, berisi:

bangHasan
Peradaban dimulai dari terkecil, diri kita sendiri.

Tahu kan letaknya?

Oke, amati.. kita akan dapati classnya bernama author__content.

Class Author Blog bangHasan

Modif sedikit dari fungsi di atas:

// fungsi scraping Blog BangHasan
function getBlogBangHasan() {

  // url target yang akan di scraping
  var urlTarget = 'https://blog.banghasan.com/';

  // url kita ambil isinya
  var response = UrlFetchApp.fetch(urlTarget);

  // jika web berhasil di ambil datanya, kodenya 200
  if (response.getResponseCode() === 200) {

    // web diambil text nya aja
    var content = response.getContentText();
    
    // kita load ke variable $ datanya
    // dengan parsingnya Cherio, library ke-2 yang kita pasangkan sebelumnya
    const $ = Cheerio.load(content);

    // ambil author web: bangHasan Peradaban dimulai dari terkecil, diri kita sendiri.
    var author = $('.author__content').text();

    // masukkan logger buat tahu hasilnya
    Logger.log(author);

    return author;
  }
}

Seperti diatas, kalau dijalankan kemudian lihat lognya, maka akan kita dapati author infonya.

Author Blog bangHasan

3. Tulisan Terakhir

Berikutnya, kita akan coba ambil tulisan terakhir dari blog bangHasan.

Kali ini akan muncul banyak campuran dan kompleksitas. Nikmati dulu camilan, segelas es teh manis atau lainnya. Biar sedikit rileks hehe..

Gunakan inspect element di browser, misalnya kalau menggunakan Firefox tekan huruf Q. Sedangkan di browser Chrome tekan Ctrl+Shift+I.

inspect element Blog bangHasan

Dari situ, kita dapati blok tulisan berasal dari tag article dan class archive__item.

Untuk menggabung tag dan class, memanggilnya pakai format:

$('tag.class`)

Jadi kita panggil dengan cara: $('article.archive__item')

Dengan sedikit memodif lagi fungsi sebelumnya, kita akan dapatkan semua isi tulisannya. Yakni :

// fungsi scraping Blog BangHasan
function getBlogBangHasan() {

  // url target yang akan di scraping
  var urlTarget = 'https://blog.banghasan.com/';

  // url kita ambil isinya
  var response = UrlFetchApp.fetch(urlTarget);

  // jika web berhasil di ambil datanya, kodenya 200
  if (response.getResponseCode() === 200) {

    // web diambil text nya aja
    var content = response.getContentText();
    
    // kita load ke variable $ datanya
    // dengan parsingnya Cherio, library ke-2 yang kita pasangkan sebelumnya
    const $ = Cheerio.load(content);

    // ambil semua tulisan terakhir dari blog bangHasan
    var tulisan = $('article.archive__item').text();

    // masukkan logger buat tahu hasilnya
    Logger.log(tulisan);

    return tulisan;
  }
}

Kira-kira hasilnya seperti ini:

All Tulisan Terakhir Blog bangHasan

Semoga paham sejauh ini ya.. sekali lagi, kalau belum paham diulangi-ulangi sendiri.

Oke lanjut!

Gabungkan ke Bot

Kita buat fungsi scaping yang lebih lengkap, yakni gabungan dari scrapping diatas sekaligus merapikan. Kemudian nanti disematkan pada bot.

Fungsi

Fungsi ini masih mirip dengan diatas-atasnya. Hanya saja, kita breakdown agar isi Tulisan Terakhir hanya menampilkan Judul dan Waktu saja. Juga, jika di klik masuk ke URL yang dimaksud.

Perhatikan dengan teliti, penjelasan ada pada komentar script.

// fungsi scraping Blog BangHasan
function getBlogBangHasan() {

  // url target yang akan di scraping
  var urlTarget = 'https://blog.banghasan.com/';

  // url kita ambil isinya
  var response = UrlFetchApp.fetch(urlTarget);

  // jika web berhasil di ambil datanya, kodenya 200
  if (response.getResponseCode() === 200) {

    // web diambil text nya aja
    var content = response.getContentText();
    
    // kita load ke variable $ datanya
    // dengan parsingnya Cherio, library ke-2 yang kita pasangkan sebelumnya
    const $ = Cheerio.load(content);
    
    var author = $('.author__content').text();
    var hasil = author + "\n\n";
    
    // ambil semua tulisan terakhir dari blog bangHasan
    // sekaligus kita susun hasilnya
     $('article.archive__item').each((index, element) => {

        // pembuatan nomor urut
         var nomor = index+1;

        // ambil judulnya saja, kemudian kita rapiin yang kebanyakan spasi
        // tag H2 adalah judul artikel (lihat screenshot di artikel)
        var judul = $(element)
            .find('h2')
            .text()
            .replace(/\s\s+/g, ' ');

        // ambil link yang ada di dalamnya
        var link = $(element)
            .find('a')
            .attr('href');

        // ambil tanggal posting artikelnya
        var tanggal = $(element)
            .find('time')
            .text();
    
        // disusun buat ditampilkan
        hasil += nomor+'. <a href="'+urlTarget+link+'">'+judul.trim()+'</a>, <code>'+tanggal+'</code>\n\n';
    });

    // masukkan logger buat tahu hasilnya
    Logger.log(hasil);

    return hasil;
  }
}

Penjelasan detail tentang method tambahan di cherio, akan dibahas pada artikel berikutnya saja. Agar tak terlalu panjang di materi pertama ini.

Trigger Bot

Kemudian kita tambahkan trigger pesan ke dalam bot.

Bagi yang sudah biasa – belajar di materi sebelumnya, sudah gak bakal asing meletakkan dimananya kan. Terserah buat kalian ditaruh dimananya, yang penting bisa jalan aja kan hehe..

Yang belum mengerti, cari di source code bot mu tulisan var msg = update.message;

kemudian tambahkan dibawahnya:

    // Scraping Blog BangHasan
    // Trigger: /banghasan atau !banghasan
    if (/[\/!]banghasan/i.exec(msg.text) ) {
       var pesan = getBlogBangHasan();
       return tg.kirimPesan(msg.chat.id, pesan, 'HTML', true);
    }

Kira-kira seperti ini:

Source Code Trigger Bot

Deploy dan test bot dengan mengetikkan /banghasan atau !banghasan.

Kalau berhasil akan muncul seperti ini:

Tampilan Scraping Blog bangHasan

OKE SELESAI!

Materi pertama kita akhir dulu.

Dari sini sudah banyak belajar. Apa saja? Silakan disebutkan sendiri manfaat yang sudah di dapat.

Silakan praktekkan sampai berhasil!

Lanjutan

Kita akan lanjutkan pada tulisan ke-2 dan ke-3.

Memang sangat panjang, harapannya memang detail sehingga mudah dimengerti.

Referensi

📑 Semua materi Bot Telegram dengan Google Apps Script (GAS) saya cantumkan pada link ini

Youtube

Lihat daftar video: https://bit.ly/botIndonesia

Penutup

Sengaja tidak saya sertakan full source code nya. Karena kebanyakan langsung di copas dan dijalankan, dan keluarlah error, kemudian bertanya kok ga bisa.

Jika ada pertanyaan, saran atau masukkan silakan didiskusikan. Jika ingin diskusi live dan biasanya jawabannya juga lebih cepat, baiknya bergabung saja di group Telegram @botIndonesia.

PS. Artikel ini mulai ditulis sejak tanggal 17, namun baru selesai tanggal 20 Juli.

TIPS: Perbanyak coba-coba atau belajar scraping ini! 😘

Tinggalkan komentar