Scraper Documentation
Aplikasi ini scraping section "berita terpopuler" dari 7 outlet berita utama Indonesia. Kenapa terpopuler? Karena section ini nunjukin berita yang paling banyak dibaca, bukan cuma yang paling baru. Jadi lebih relevan buat ngerti apa yang lagi ramai di publik.
Tujuannya simpel: bandingin topik-topik trending di outlet kompetitor sama yang sudah diliput BeritaSatu, terus cari coverage gap (berita yang rame di mana-mana tapi belum ada di BeritaSatu).
Tiap outlet punya cara beda nampilin berita terpopuler. Ada yang pakai sidebar ranked list, ada yang punya halaman khusus, ada yang namain "trending". Dokumen ini jelasin section mana yang di-scrape dari tiap outlet.
Soal website yang diblokir: Tidak semua website bisa di-fetch langsung. Tribunnews dan BeritaSatu pasang proteksi anti-bot (CloudFront WAF dan Cloudflare) yang ngeblokir request otomatis. Buat outlet yang diblokir, aplikasi pakai Google News RSS sebagai alternatif. Caranya dengan ambil berita terbaru dari outlet tersebut yang terindeks di Google News. Keterbatasannya: Google News RSS kasih berita terbaru, bukan terpopuler, jadi hasilnya kurang akurat dibanding direct scraping.
Alur Kerja
Ringkasan Outlet
| Outlet | Metode | Nama Section | Status |
|---|---|---|---|
| Kompas | HTML Fetch | "Terpopuler" | Direct Scrape |
| Detik | HTML Fetch | "Terpopuler di Detikcom" | Direct Scrape |
| CNN Indonesia | HTML Fetch | "TERPOPULER" | Direct Scrape |
| Tempo | HTML Fetch | "ARTIKEL TRENDING" | Direct Scrape |
| Liputan6 | HTML Fetch | "Terpopuler" | Direct Scrape |
| Tribunnews | Google News RSS | "Populer" | Fallback |
| BeritaSatu | Google News RSS | "ARTIKEL TERPOPULER" | Outlet Kita |
Kompas
HTML Fetch
Section yang Di-scrape: "Terpopuler"
Di halaman utama Kompas, ada sidebar "Terpopuler" yang menampilkan 5 berita paling banyak dibaca. Daftar ini di-ranking 1 sampai 5 dan terus diupdate. Setiap item ada judul, kategori (Regional, News, Bola, dll), dan link ke artikel lengkap.
Detail Teknis
Halaman kompas.com sudah server-rendered, jadi konten langsung ada di HTML tanpa perlu JavaScript. Scraper pakai Cheerio untuk cari link dengan pola URL "kompas.com/read/" di dalam section Terpopuler.
a[href*="kompas.com/read/"]Detik
HTML Fetch
Section yang Di-scrape: "Terpopuler di Detikcom"
Detik punya halaman khusus "/terpopuler" yang isinya berita paling banyak dibaca dari semua kanal (detikNews, detikFinance, detikHealth, dll). Di halaman ini juga ada trending tags (#iran, #mudik, dll) dan daftar artikel lengkap dengan thumbnail, judul, sumber kanal, dan waktu.
Detail Teknis
Halaman /terpopuler sudah server-rendered. Artikel ada di dalam container div.media__text. Yang unik dari Detik: judul artikel bukan di dalam tag h2 atau h3, tapi langsung jadi teks di dalam tag a. URL artikel polanya detik.com/*/d-{id}. Mereka punya API trending (explore-api.detik.com/trending) tapi isinya cuma keyword, bukan artikel.
div.media__text aCNN Indonesia
HTML Fetch
Section yang Di-scrape: "TERPOPULER"
Di homepage CNN Indonesia ada section "TERPOPULER" yang berisi 6 berita paling banyak dibaca. Daftarnya bernomor 01 sampai 06 dengan label kategori (Internasional, Olahraga, dll). Ada juga link "LIHAT SEMUA" ke halaman /terpopuler.
Detail Teknis
Homepage CNN Indonesia sudah server-rendered, jadi section terpopuler langsung ada di HTML. Scraper cari element dengan atribut dtr-sec="terpopuler" atau text-matching pada heading "TERPOPULER". Catatan: halaman khusus /terpopuler justru butuh JavaScript untuk render, jadi kita ambil dari homepage saja.
[dtr-sec="terpopuler"] aTempo
HTML Fetch
Section yang Di-scrape: "ARTIKEL TRENDING"
Tempo pakai label "ARTIKEL TRENDING" (bukan "Terpopuler") di homepage-nya. Isinya 5 artikel yang lagi trending, satu artikel utama dengan gambar besar dan 4 lainnya dalam grid. Tempo juga punya "TOPIK TRENDING" yang berisi hashtag populer (#Mudik Lebaran, #Air Keras, dll).
Detail Teknis
Tempo dibangun pakai Nuxt.js dan sudah server-rendered. Data trending langsung ada di HTML dan juga di payload __NUXT_DATA__. Scraper cari span dengan teks "ARTIKEL TRENDING", lalu ambil link dari figcaption dan article di parent section. Kalau gagal, scraper fallback ke RSS feed di rss.tempo.co (50 artikel terbaru, tapi bukan khusus trending).
span:contains("ARTIKEL TRENDING") → parent section → figcaption aLiputan6
HTML Fetch
Section yang Di-scrape: "Terpopuler"
Di homepage Liputan6 ada section "Terpopuler" dengan 10 berita paling banyak dibaca. Lebih panjang dari outlet lain (10 vs 5-6), jadi kasih gambaran yang lebih lengkap soal tren pembaca. Setiap item ada judul dan timestamp.
Detail Teknis
Liputan6 pakai SSR tradisional. Section terpopuler tidak punya CSS class yang unik, cuma h2 dengan teks "Terpopuler" tanpa class atau ID. Scraper harus text-matching di tag h2, lalu ambil sibling ul yang berisi li dan a elements. Ada juga section "Trending" terpisah (hashtag) yang beda dari Terpopuler (artikel).
h2:contains("Terpopuler") → sibling ul → li aTribunnews
Google News RSSSection yang Di-scrape: "Populer"
Tribunnews punya halaman khusus "/populer" yang isinya berita paling banyak dibaca dengan filter waktu (6 jam, 12 jam, 1 hari, 3 hari, 1 minggu). Setiap artikel ada nomor ranking, judul, link, dan timestamp.
Detail Teknis
Website Tribunnews tidak bisa di-fetch langsung karena dilindungi CloudFront WAF (semua request otomatis kena 403 Forbidden). Halaman /populer juga butuh JavaScript untuk render konten. Jadi scraper pakai Google News RSS sebagai workaround, mengambil berita terbaru dari Tribunnews via Google News. Perlu dicatat ini bukan berita terpopuler, cuma berita terbaru yang terindeks Google.
div.lsi.pt10.pb10 > ul > li (membutuhkan headless browser)BeritaSatu
Google News RSSSection yang Di-scrape: "ARTIKEL TERPOPULER"
Di homepage BeritaSatu ada "ARTIKEL TERPOPULER" berisi 5 berita paling banyak dibaca, lengkap dengan kategori (NASIONAL, EKONOMI, INTERNASIONAL, dll). Ini outlet kita sendiri, jadi berita dari sini jadi baseline untuk perbandingan dengan kompetitor.
Detail Teknis
Website BeritaSatu tidak bisa di-fetch langsung karena dilindungi Cloudflare anti-bot (kena 403 + CAPTCHA challenge). Website-nya dibangun pakai Vue.js dengan scoped component attributes (data-v-*) yang tidak stabil buat scraping. RSS feed juga sudah dihentikan (410 Gone). Jadi scraper pakai Google News RSS sebagai workaround.
Vue.js scoped components (data-v-* attributes), tidak stabil