Bởi Praveen Dubey
Lâu lắm rồi tôi phải thu thập dữ liệu từ một trang web để lấy các liên kết, sau đó dùng các liên kết trang đó để thu thập dữ liệu chi tiết bằng Selenium hoặc Puppeteer. Cấu trúc nội dung trên trang web hơi đặc biệt nên tôi không thể bắt đầu trực tiếp với Selenium và Node. Thêm vào đó, dữ liệu trên trang web quá lớn. Tôi phải nhanh chóng tìm ra cách để thu thập tất cả các liên kết trước, rồi truyền chúng để thu thập chi tiết từng trang.
Đó là lúc tôi khám phá ra cách thú vị này với Console API của trình duyệt. Bạn có thể sử dụng cách này trên bất kỳ trang web nào mà không cần cài đặt phức tạp, vì nó chỉ đơn giản là JavaScript.
Hãy cùng đi sâu vào chi tiết kỹ thuật.
Tổng Quan Cấp Cao
Để thu thập tất cả các liên kết trên một trang, tôi viết một đoạn JavaScript nhỏ trong console. Đoạn mã này thu thập tất cả các liên kết (mất 1–2 giờ vì cũng xử lý phân trang) và xuất ra một file json chứa tất cả dữ liệu đã thu thập. Điều cần lưu ý là bạn phải đảm bảo trang web hoạt động tương tự như một Single Page Application (SPA). Nếu không, trang sẽ tải lại khi bạn muốn thu thập nhiều trang hơn, và mã console của bạn sẽ biến mất.
Medium không làm mới trang trong một số trường hợp. Hiện tại, hãy cùng thu thập một bài viết và lưu dữ liệu đã thu thập vào file từ console tự động sau khi thu thập xong.
Nhưng trước khi làm điều đó, đây là demo nhanh về việc thực thi cuối cùng.
Demo
1. Lấy Instance Đối Tượng Console Từ Trình Duyệt
// Console API để xóa console trước khi ghi log dữ liệu mới
console.API;
if (typeof console._commandLineAPI !== 'undefined') {
console.API = console._commandLineAPI; // Chrome
} else if (typeof console._inspectorCommandLineAPI !== 'undefined'){
console.API = console._inspectorCommandLineAPI; // Safari
} else if (typeof console.clear !== 'undefined') {
console.API = console;
}
Đoạn mã này chỉ đơn giản cố gắng lấy instance đối tượng console dựa trên trình duyệt hiện tại của người dùng. Bạn có thể bỏ qua và gán trực tiếp instance cho trình duyệt của mình.
Ví dụ, nếu bạn dùng Chrome, đoạn mã dưới đây là đủ:
if (typeof console._commandLineAPI !== 'undefined') {
console.API = console._commandLineAPI; // Chrome
}
2. Định Nghĩa Hàm Hỗ Trợ Junior
Tôi giả định rằng bạn đã mở một bài viết Medium trong trình duyệt. Các dòng 6 đến 12 định nghĩa các thuộc tính phần tử DOM có thể dùng để trích xuất tiêu đề bài viết, số lượt vỗ tay, tên người dùng, URL ảnh hồ sơ, mô tả hồ sơ và thời gian đọc của bài viết.
Đây là những thông tin cơ bản tôi muốn trình diễn cho bài viết này. Bạn có thể thêm một vài yếu tố khác như trích xuất liên kết từ bài viết, tất cả hình ảnh, hoặc nhúng liên kết.
3. Định Nghĩa Hàm Hỗ Trợ Senior — "Con Quái Vật"
Khi chúng ta thu thập trang để lấy các yếu tố khác nhau, chúng ta sẽ lưu chúng trong một tập hợp (collection). Tập hợp này sẽ được truyền cho một trong các hàm chính.
Chúng ta đã định nghĩa một hàm tên là console.save. Nhiệm vụ của hàm này là xuất ra file csv/json với dữ liệu được truyền vào.
Nó tạo một đối tượng Blob với dữ liệu của chúng ta. Một đối tượng Blob đại diện cho một đối tượng giống file chứa dữ liệu thô, bất biến. Blob đại diện cho dữ liệu không nhất thiết phải ở định dạng JavaScript native.
Tạo blob được gắn vào thẻ link <a> mà trên đó một sự kiện click được kích hoạt.
Đây là demo nhanh về console.save với một array nhỏ được truyền làm dữ liệu.
Gộp tất cả các mảnh mã lại, chúng ta có:
- Instance Console API
- Hàm hỗ trợ trích xuất yếu tố
- Hàm Console Save để tạo file
Hãy thực thi console.save() trong trình duyệt để lưu dữ liệu vào file. Bạn có thể vào một bài viết trên Medium và chạy mã này trong console trình duyệt.
Tôi đã demo việc trích xuất dữ liệu từ một trang đơn lẻ, nhưng cùng mã có thể điều chỉnh để thu thập nhiều bài viết từ trang chủ của một nhà xuất bản. Ví dụ freeCodeCamp: bạn có thể điều hướng từ bài viết này sang bài viết khác và quay lại (sử dụng nút back của trình duyệt) trang chủ nhà xuất bản mà không làm mới trang.
Dưới đây là mã tối thiểu bạn cần để trích xuất nhiều bài viết từ trang chủ nhà xuất bản.
Hãy xem mã hoạt động để lấy mô tả hồ sơ từ nhiều bài viết.
Đối với bất kỳ ứng dụng loại này, sau khi đã thu thập dữ liệu, bạn có thể truyền nó cho hàm console.save và lưu vào file.
Hàm console save có thể gắn nhanh vào mã console của bạn và giúp bạn xuất dữ liệu ra file. Tôi không nói bạn bắt buộc phải dùng console để thu thập dữ liệu, nhưng đôi khi đây sẽ là cách nhanh hơn vì chúng ta đều rất quen làm việc với DOM bằng CSS selectors.
Bạn có thể tải mã từ Github
Cảm ơn bạn đã đọc bài viết này! Hy vọng nó cho bạn ý tưởng hay để thu thập dữ liệu nhanh chóng mà không cần cài đặt phức tạp. Hãy bấm nút clap nếu bạn thích! Nếu có thắc mắc, hãy gửi email cho tôi (praveend806 [at] gmail [dot] com).
Tài nguyên để tìm hiểu thêm về Console:
- Using the Console | Tools for Web Developers | Google Developers
Tìm hiểu cách điều hướng Chrome DevTools JavaScript Console. developers.google.com - Browser Console
Browser Console giống Web Console nhưng áp dụng cho toàn bộ trình duyệt thay vì một tab nội dung đơn lẻ. developer.mozilla.org - Blob
Một đối tượng Blob đại diện cho một đối tượng giống file chứa dữ liệu thô, bất biến. developer.mozilla.org
Học lập trình miễn phí. Chương trình mở của freeCodeCamp đã giúp hơn 40.000 người tìm được việc làm lập trình viên. Bắt đầu ngay