Sebelum memulai, Anda harus mematuhi undang-undang dan peraturan setempat, dan jangan mengambil data yang diungkapkan tanpa izin.
Berikut beberapa hal yang Anda perlukan untuk tutorial ini:
Cheerio adalah alat untuk mengurai HTML dan XML di Node.js. Ini sangat populer di GitHub dan memiliki lebih dari 23 ribu bintang.
Ini cepat, fleksibel dan mudah digunakan. Karena ini mengimplementasikan subset JQuery, mudah untuk memulai dengan Cheerio jika Anda sudah familiar dengan JQuery.
Perbedaan utama antara Cheerio dan browser web adalah cheerio tidak menghasilkan rendering visual, memuat CSS, memuat sumber daya eksternal, atau menjalankan JavaScript. Itu hanya mem-parsing markup dan menyediakan API untuk memanipulasi struktur data yang dihasilkan. Ini menjelaskan mengapa ini juga sangat cepat - dokumentasi cheerio.
Jika Anda ingin menggunakan cheerio untuk mengambil halaman web, Anda harus menggunakan paket seperti axios atau node-fetch terlebih dahulu untuk mendapatkan tag.
Dalam contoh ini, kami akan merayapi kode ISO 3166-1 alpha-3 untuk semua negara dan yurisdiksi lain yang terdaftar di halaman Wikipedia ini. Itu terletak di bawah bagian kode saat ini pada halaman ISO 3166-1 alpha-3.
Berikut tampilan daftar negara/yurisdiksi dan kode terkaitnya:
Pada langkah ini, Anda akan membuat direktori untuk proyek Anda dengan menjalankan perintah berikut di terminal. Perintah ini akan membuat file bernama learn-cheerio . Anda dapat memberinya nama lain jika diinginkan.
mkdir learn-cheerio
learn-cheerio Setelah berhasil menjalankan perintah di atas, Anda akan melihat folder bernama dibuat.
Pada langkah selanjutnya, Anda akan membuka direktori yang baru saja Anda buat di editor teks favorit Anda dan menginisialisasi proyek.
Pada langkah ini, Anda akan menavigasi ke direktori proyek dan menginisialisasi proyek. Buka direktori yang Anda buat pada langkah sebelumnya di editor teks favorit Anda dan inisialisasi proyek dengan menjalankan perintah berikut.
npm init -y
Jika perintah di atas dijalankan dengan sukses, file package.json akan dibuat di root direktori proyek.
Pada langkah selanjutnya, Anda akan menginstal dependensi proyek.
Pada langkah ini, Anda akan menginstal dependensi proyek dengan menjalankan perintah berikut. Ini akan memakan waktu beberapa menit, jadi harap bersabar.
npm i axios cheerio cantik
Berhasil menjalankan perintah di atas akan mendaftarkan tiga dependensi dalam file di bawah bidang package.json . dependencies yang pertama adalah axios , yang kedua adalah cheerio , dan yang ketiga adalah pretty .
axios adalah klien http yang sangat populer yang dapat berjalan di node dan browser. Kami membutuhkannya karena cheerio adalah pengurai token.
Agar Cheerio dapat mengurai tag dan meng-crawl data yang Anda perlukan, kami memerlukan axios untuk mendapatkan tag dari situs web. Jika mau, Anda dapat menggunakan klien HTTP lain untuk mendapatkan token. Tidak harus axios .
Pretty merupakan paket npm untuk mempercantik markup sehingga dapat dibaca saat dicetak di terminal.
Di bagian selanjutnya, Anda akan memeriksa tag dari mana data akan diambil.
Sebelum mengambil data dari halaman web, penting untuk memahami struktur HTML halaman tersebut.
Pada langkah ini, Anda memeriksa struktur HTML halaman web yang datanya ingin Anda ambil.
Navigasikan ke halaman kode ISO 3166-1 alpha-3 di Wikipedia. Di bawah bagian "Kode Saat Ini", terdapat daftar negara dan kode terkait. CTRL + SHIFT + I Anda dapat membuka DevTools dengan menekan kombinasi tombol pada chrome atau dengan mengklik kanan dan memilih opsi "Inspeksi".
Ini daftar saya di chrome DevTools:
Di bagian selanjutnya, Anda akan menulis kode untuk merayapi web.
Di bagian ini, Anda akan menulis kode untuk mengikis data yang kita minati. Pertama jalankan perintah berikut yang akan membuat file app.js
sentuh app.js
Berhasil menjalankan perintah di atas akan membuat file app.js di direktori root direktori proyek.
Seperti paket Node lainnya, Anda harus memerlukan axios , cheerio , dan axios terlebih dahulu sebelum mulai menggunakannya. Anda dapat melakukannya dengan menambahkan kode berikut di bagian atas file pretty yang baru saja Anda buat. app.js
const axios = memerlukan("axios");
const cheerio = memerlukan("cheerio");
const Pretty = require("pretty"); Sebelum kita menulis kode untuk menggores data, kita perlu mempelajari cheerio . Kita akan mengurai markup di bawah ini dan mencoba memanipulasi struktur data yang dihasilkan. Ini akan membantu kita mempelajari sintaksis Cheerio dan metode yang paling umum digunakan.
Markup di bawah ini adalah elemen ul li yang berisi elemen kita.
markup konstan = ` <ul kelas="buah"> <li class="fruits__mango"> Mangga </li> <li class="fruits__apple">Apel </li> </ul> `;
Tambahkan deklarasi variabel di atas ke file app.js
cheerio dapat memuat tag menggunakan metode cheerio.load . Metode ini mengambil penanda sebagai parameter. Ini juga memerlukan dua parameter opsional tambahan. Jika Anda tertarik, Anda dapat membaca selengkapnya di dokumentasi.
Di bawah ini, kita meneruskan parameter pertama dan satu-satunya yang diperlukan dan menyimpan nilai kembalian dalam variabel $ . Kami menggunakan variabel ini karena kemiripan cheerio dengan Jquery $ . Anda dapat menggunakan nama variabel yang berbeda jika diinginkan.
Tambahkan kode berikut ke file app.js Anda:
const $ = cheerio.load(markup); console.log(pretty($.html()));
Jika sekarang Anda menjalankan kode di file node app.js dengan menjalankan perintah app.js di terminal, Anda seharusnya dapat melihat markup di terminal. Inilah yang saya lihat di terminal:
Cheerio mendukung sebagian besar pemilih CSS umum, seperti pemilih class , id dan element . Pada kode di bawah ini, kita memilih elemen dengan kelas fruits__mango dan kemudian mencatat elemen yang dipilih ke konsol. Tambahkan kode berikut ke file app.js Anda.
const mangga = $(".fruits__mangga");
console.log(mango.html()); // Mango Jika Anda menggunakan eksekusi perintah, baris kode di atas akan mencatat teks Mango di terminal. app.js``node app.js
Anda juga dapat memilih elemen dan mendapatkan atribut tertentu seperti class , id atau semua atribut dan nilainya yang sesuai.
Tambahkan kode berikut ke file app.js Anda:
const apple = $(".fruits__apple");
console.log(apple.attr("class")); // Kode di atas buah__apple akan masuk ke terminal fruits__apple . fruits__apple adalah kelas elemen yang dipilih.
Cheerio menyediakan metode .each untuk mengulang beberapa elemen yang dipilih.
Di bawah ini, kita memilih semua elemen dan mengulanginya menggunakan metode li . .each kita mencatat konten teks dari setiap item daftar di terminal.
Tambahkan kode berikut ke file app.js Anda.
const listItems = $("li");
konsol.log(listItems.panjang); // 2
listItems.each(fungsi (idx, el) {
konsol.log($(el).teks());
});
//Buah mangga
// Kode Apple di atas akan mencatat 2 , yang merupakan panjang item daftar. Setelah mengeksekusi kode, teks Mango dan akan ditampilkan di terminal. Apple``app.js
Cheerio menyediakan cara untuk menambahkan atau menambahkan elemen ke markup.
Metode append akan menambahkan elemen yang diteruskan sebagai parameter setelah elemen turunan terakhir dari elemen yang dipilih. Di sisi lain, prepend akan menambahkan elemen yang diteruskan sebelum anak pertama dari elemen yang dipilih.
Tambahkan kode berikut ke file app.js Anda:
const ul = $("ul");
ul.append("<li>Pisang</li>");
ul.prepend("<li>Nanas</li>");
console.log(pretty($.html())); Setelah menambahkan dan menambahkan elemen ke markup, inilah yang saya lihat ketika saya masuk ke terminal $.html() :
Ini adalah dasar-dasar Cheerio untuk membantu Anda memulai web scraping. Untuk mengikis data dari Wikipedia yang kami jelaskan di awal artikel ini, salin dan tempel kode berikut ke file app.js :
// Memuat dependensinya
// karena kita tidak akan mencatat html ke terminal
const axios = memerlukan("axios");
const cheerio = memerlukan("cheerio");
const fs = memerlukan("fs");
// URL halaman yang ingin kita gores
const url = "https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3";
// Fungsi async yang menghapus data
fungsi async scrapeData() {
mencoba {
// Ambil HTML halaman yang ingin kita scrap
const { data } = menunggu axios.get(url);
// Muat HTML yang kita ambil di baris sebelumnya
const $ = cheerio.beban(data);
// Pilih semua item daftar di kelas plainlist
const listItems = $(".plainlist ul li");
// Menyimpan data untuk semua negara
negara const = [];
// Gunakan metode .each untuk mengulang li yang kita pilih
listItems.each((idx, el) => {
// Objek yang menyimpan data untuk setiap negara/yurisdiksi
const negara = { nama: "", iso3: "" };
// Pilih konten teks dari elemen a dan span
// Simpan konten teks pada objek di atas
negara.nama = $(el).children("a").text();
negara.iso3 = $(el).children("span").text();
// Isi array negara dengan data negara
negara.push(negara);
});
// Mencatat array negara ke konsol
console.dir(negara);
// Tulis array negara di file country.json
fs.writeFile("coutries.json", JSON.stringify(negara, null, 2), (err) => {
jika (salah) {
konsol.kesalahan(err);
kembali;
}
console.log("Data berhasil ditulis ke file");
});
} menangkap (salah) {
konsol.kesalahan(err);
}
}
//Panggil fungsi di atas
scrapeData(); Dengan membaca kode, apakah Anda memahami apa yang terjadi? Jika belum, saya akan menjelaskannya secara detail sekarang. Saya juga mengomentari setiap baris kode untuk membantu Anda memahaminya.
Pada kode di atas, kita memerlukan semua dependensi di bagian atas file app.js dan kemudian kita mendeklarasikan fungsi scrapeData . Di dalam fungsinya, HTML yang diambil dari halaman yang perlu kita kikis kemudian dimuat ke dalam cheerio menggunakan axios .
Daftar negara dan kode iso3 yang sesuai disarangkan dalam elemen div dengan kelas plainlist . Elemen li dipilih dan kita lalu mengulanginya menggunakan metode .each . Data untuk setiap negara diambil dan disimpan dalam sebuah array.
Setelah menjalankan kode di atas menggunakan perintah node app.js , data yang diambil ditulis ke file countries.json dan dicetak di terminal. Ini adalah bagian dari apa yang saya lihat di terminal:
Terima kasih telah membaca artikel ini! Kami telah membahas penggunaan cheerio . Jika Anda ingin mempelajari lebih dalam dan memahami sepenuhnya cara kerjanya, Anda dapat membuka dokumentasi Cheerio.