Cách thu thập SPA hiện đại, PWA và các trang web động do AI điều khiển

❗ Tuyên bố miễn trừ trách nhiệm : Đây là Phần 2 trong loạt bài gồm sáu phần của chúng tôi về Advanced Web Scraping. Bạn muốn bắt đầu từ đầu? Hãy theo dõi bằng cách đọc Phần 1 !

Nếu bạn thích web scraping, có lẽ bạn đã quen thuộc với hầu hết các thách thức thông thường. Nhưng với Web thay đổi với tốc độ chóng mặt—đặc biệt là nhờ sự bùng nổ của AI—có rất nhiều biến số mới trong trò chơi scraping. Để trở thành chuyên gia web scraping, bạn phải nắm bắt được tất cả chúng! 🔍

Trong hướng dẫn này, bạn sẽ khám phá các kỹ thuật trích xuất dữ liệu web tiên tiến và tìm hiểu cách trích xuất dữ liệu từ các trang web hiện đại ngày nay, ngay cả khi kết hợp với SPA, PWA và AI! 💪

SPA, PWA và các trang web hỗ trợ AI có ý nghĩa gì?

Ngày xưa, các trang web chỉ là một loạt các trang tĩnh được quản lý bởi một máy chủ web. Quay trở lại thời điểm hiện tại, Web giống như một đô thị nhộn nhịp hơn. 🌇

Chúng tôi đã chuyển từ kết xuất phía máy chủ sang phía máy khách. Tại sao? Bởi vì các thiết bị di động của chúng tôi mạnh hơn bao giờ hết, nên việc để chúng xử lý một số tải là điều hợp lý. 📲

Chắc chắn, bạn có thể đã biết tất cả những điều đó—nhưng để đạt được vị trí như ngày hôm nay, chúng ta phải biết mình đã bắt đầu từ đâu. Ngày nay, Internet là sự kết hợp của các trang web tĩnh, các trang web động được kết xuất từ máy chủ, SPA, PWA, các trang web do AI điều khiển, v.v. 🕸️

Và đừng lo lắng—SPA, PWA và AI không phải là từ viết tắt bí mật của các cơ quan chính phủ. Hãy cùng phân tích bảng chữ cái này nhé. 🥣

SPA: Ứng dụng một trang

SPA ( Single Page Application ) không có nghĩa là nó thực sự là một trang, nhưng nó xử lý việc điều hướng mà không cần tải lại mọi thứ mỗi lần. Hãy nghĩ về nó giống như Netflix : nhấp chuột xung quanh và xem nội dung thay đổi ngay lập tức mà không cần tải lại trang khó chịu đó. 🍿

Nó mượt mà, nhanh chóng và giúp bạn luôn tập trung.

PWA: Ứng dụng web tiến bộ

PWA giống như các ứng dụng web được tăng cường sức mạnh. 💊

Về mặt kỹ thuật, PWA ( Ứng dụng web tiến bộ ) sử dụng các tính năng web tiên tiến để mang đến cho bạn cảm giác như đang sử dụng ứng dụng gốc ngay trên trình duyệt.

• Chức năng ngoại tuyến? ✅

• Thông báo đẩy? ✅

• Tải gần như ngay lập tức thông qua bộ nhớ đệm? ✅

  
  

Trong hầu hết các trường hợp, bạn cũng có thể cài đặt PWA trực tiếp trên thiết bị của mình!

Các trang web được hỗ trợ bởi AI

Các trang web được hỗ trợ bởi AI mang đến một chút phép thuật của máy học. Từ các thiết kế được tạo động và chatbot đến các đề xuất được cá nhân hóa, các trang web này khiến bạn cảm thấy như trang web biết bạn. 🤖 ✨

Không chỉ là duyệt web. Đó là trải nghiệm tương tác phù hợp với bạn.

Đây là phần thú vị

Những loại này không loại trừ lẫn nhau!

Bạn có thể xếp chúng thành từng lớp như parfait. 🍨 PWA cũng có thể là SPA và cả hai đều có thể tận dụng AI để làm mọi thứ thông minh hơn và nhanh hơn. Vâng, có thể hơi hoang dã ngoài kia!

Thu thập dữ liệu nâng cao: Điều hướng trong thế giới web ngày nay

Tóm lại, sự gia tăng của các SPA, PWA và các trang web được hỗ trợ bởi AI đã khiến web trở nên phức tạp hơn rất nhiều. Và, vâng, điều đó có nghĩa là việc thu thập dữ liệu web trở nên khó khăn hơn bao giờ hết, với rất nhiều yếu tố mới cần xem xét. 😣

Vậy còn Web 3.0 thì sao? Vâng, vẫn còn hơi sớm để nói về tác động của nó đối với việc thu thập dữ liệu web, nhưng một số chuyên gia đã đưa ra suy đoán…

Để bắt đầu vượt qua những trở ngại phổ biến nhất (và khó chịu nhất) hiện nay trong việc thu thập dữ liệu trang web hiện đại, hãy xem video này từ người bạn Forrest Knight của chúng tôi. Chương 3 đề cập chính xác đến những gì bạn đang tìm kiếm. 👇

Bây giờ chúng ta hãy cùng xem những điều bạn cần cân nhắc khi thực hiện thu thập dữ liệu web nâng cao trên các trang web hiện đại!

⚠️ Cảnh báo: Đừng nản lòng nếu bạn thấy một vài mẹo đầu tiên quen thuộc—hãy tiếp tục, vì sẽ có rất nhiều hiểu biết mới khi chúng ta đi sâu hơn! 🧠

Nội dung động thông qua AJAX và Kết xuất phía máy khách

Ngày nay, hầu hết các trang web đều được hiển thị đầy đủ ở phía máy khách thông qua JavaScript (đó là hiển thị phía máy khách ) hoặc có các phần động tải dữ liệu hoặc thay đổi DOM của trang khi bạn tương tác với trang.

Nếu bạn đã sử dụng trình duyệt trong thập kỷ qua, bạn sẽ biết chúng tôi đang nói về điều gì. Việc truy xuất dữ liệu động này không phải là phép thuật—nó được hỗ trợ bởi công nghệ AJAX! (Và không, không phải câu lạc bộ bóng đá Ajax 🔴⚪—một loại phép thuật khác ở đây 😉)

Có lẽ bạn đã biết AJAX là gì, nhưng nếu chưa biết, tài liệu của MDN là nơi tuyệt vời để bắt đầu . Vậy, AJAX có phải là vấn đề lớn đối với việc thu thập dữ liệu web không?

Với các công cụ tự động hóa trình duyệt như Playwright, Selenium hoặc Puppeteer , bạn có thể ra lệnh cho tập lệnh của mình tải trang web trong trình duyệt, bao gồm cả yêu cầu AJAX. Chỉ cần lấy một trong những công cụ trình duyệt không đầu tốt nhất và bạn đã sẵn sàng!

Để biết thêm hướng dẫn, hãy đọc hướng dẫn đầy đủ của chúng tôi về cách thu thập dữ liệu trang web động trong Python .

🚨 Nhưng khoan đã… Có một mẹo chuyên nghiệp! 🚨

Hầu hết các trang dựa trên AJAX đều kéo dữ liệu động thông qua các lệnh gọi API. Bạn có thể bắt các yêu cầu này bằng cách mở tab Mạng trong DevTools của trình duyệt trong khi tải trang:

Bạn sẽ thấy:

• Một hoặc nhiều REST API tới các điểm cuối khác nhau.

• Một hoặc nhiều lệnh gọi API GraphQL tới một điểm cuối duy nhất, mà bạn có thể truy vấn bằng GraphQL .

  
  

Trong cả hai trường hợp, điều này mở ra cánh cửa để thu thập dữ liệu bằng cách nhắm trực tiếp vào các lệnh gọi API đó. Chỉ cần chặn và kéo dữ liệu đó—dễ như vậy! 🎉

Xem video bên dưới để biết hướng dẫn nhanh:

Tải chậm, Cuộn vô hạn và Tương tác người dùng động

Các trang web tương tác hơn bao giờ hết, với các nhà thiết kế liên tục thử nghiệm những cách mới để giữ chân chúng ta. Mặt khác, một số tương tác, như cuộn vô hạn , thậm chí đã trở thành tiêu chuẩn. (Bạn đã bao giờ thấy mình cuộn vô tận trên Netflix chưa? Hãy đảm bảo kiểm tra đúng loạt phim !)

Vậy, làm thế nào chúng ta giải quyết được tất cả những tương tác khó khăn trong quá trình thu thập dữ liệu web?

Với các công cụ tự động hóa trình duyệt! (Đúng vậy, một lần nữa! 🎉)

Những cái hiện đại nhất, như Playwright , có các phương pháp tích hợp để xử lý các tương tác phổ biến. Và khi có điều gì đó độc đáo xuất hiện mà chúng không đề cập đến? Bạn thường có thể thêm mã JavaScript tùy chỉnh để thực hiện thủ thuật này.

Cụ thể:

• Playwright cung cấp phương thức evaluate() để chạy JS tùy chỉnh ngay trên trang.

• Selenium cung cấp execute_script() , cho phép bạn thực thi JavaScript trong trình duyệt.

  
  

Chúng tôi biết, bạn có thể đã nắm được những điều cơ bản này rồi, nên không cần phải đào sâu ở đây. Nhưng nếu bạn muốn biết đầy đủ, hãy xem hướng dẫn đầy đủ sau:

• Nhà viết kịch web scraping
• Quét web Selenium

Lưu trữ nội dung trong PWA

Đây là nơi mọi thứ trở nên hấp dẫn! 🌶️

PWA được xây dựng để hoạt động ngoại tuyến và phụ thuộc nhiều vào bộ nhớ đệm . Mặc dù điều đó rất tuyệt vời đối với người dùng cuối, nhưng nó lại gây đau đầu cho việc thu thập dữ liệu web vì bạn muốn lấy dữ liệu mới.

Vậy, bạn xử lý bộ nhớ đệm như thế nào khi thu thập dữ liệu—đặc biệt là khi xử lý PWA? Vâng, hầu hết thời gian, bạn sẽ sử dụng công cụ tự động hóa trình duyệt. Xét cho cùng, PWA thường được hiển thị ở phía máy khách và/hoặc dựa vào việc truy xuất dữ liệu động.

Tin tốt là gì? Các công cụ tự động hóa trình duyệt sẽ khởi chạy các phiên trình duyệt mới mỗi khi bạn chạy chúng. Và trong trường hợp của Puppeteer và Playwright, chúng thậm chí còn khởi chạy ở chế độ ẩn danh theo mặc định. Nhưng đây là điều đáng lưu ý: Các phiên ẩn danh/mới không phải là phiên không có bộ nhớ đệm hoặc cookie ! 🤯

Bạn càng tương tác nhiều với một trang web trong tập lệnh thu thập dữ liệu của mình, thì khả năng trình duyệt bắt đầu lưu trữ các yêu cầu càng cao—ngay cả ở chế độ ẩn danh. Để giải quyết vấn đề, bạn có thể khởi động lại trình duyệt không có giao diện theo định kỳ.

Hoặc, với Puppeteer, bạn có thể tắt hoàn toàn bộ nhớ đệm bằng một lệnh đơn giản :

 await page.setCacheEnabled(enabled)

Nhưng nếu máy chủ đằng sau PWA đang lưu trữ dữ liệu ở phía nó thì sao? Vâng, đó là một vấn đề hoàn toàn khác… 👹

Thật không may, bạn không thể làm được nhiều về bộ nhớ đệm phía máy chủ. Đồng thời, một số máy chủ phục vụ phản hồi được lưu trong bộ nhớ đệm dựa trên các tiêu đề trong các yêu cầu đến. Do đó, bạn có thể thử thay đổi một số tiêu đề yêu cầu, như User-Agent . 🔄

Khám phá User-Agent tốt nhất để thu thập dữ liệu web !

Nội dung theo ngữ cảnh cụ thể

Bạn có bao giờ thắc mắc tại sao các trang web dường như hiển thị cho bạn nội dung mà bạn gần như quá quan tâm không? Đó không phải là phép thuật—đó là công nghệ máy học đang hoạt động. 💡

Ngày nay, ngày càng nhiều trang web cung cấp nội dung được cá nhân hóa theo sở thích của bạn. Dựa trên các tìm kiếm, tương tác trên trang web, giao dịch mua, lượt xem và các hành vi trực tuyến khác của bạn, thuật toán ML hiểu được sở thích của bạn và các trang web cung cấp nội dung phù hợp .

Có hữu ích không? Chắc chắn là có - tiết kiệm rất nhiều thời gian! ⏱️

Có đạo đức không? Vâng, bạn đã đồng ý với các điều khoản dịch vụ đó, vậy thì... chúng ta hãy đồng ý nhé. 🤷

Nhưng đây là thách thức đối với việc trích xuất dữ liệu web: trước đây, bạn chỉ lo lắng về việc các trang web thỉnh thoảng thay đổi cấu trúc HTML. Bây giờ, các trang web thay đổi liên tục, có khả năng mang lại trải nghiệm khác nhau mỗi lần bạn truy cập.

Vậy, bạn xử lý việc này như thế nào? Để có được kết quả nhất quán, bạn có thể bắt đầu các công cụ tự động hóa trình duyệt của mình với các phiên được lưu trữ trước, giúp đảm bảo nội dung vẫn có thể dự đoán được. Các công cụ như Playwright cũng cung cấp một đối tượng BrowserContext cho mục đích đó:

 const browserContext = await browser.newContext({ // load the context storage state from a JSON file storageState: "session.json" }); const page = await context.newPage();

Để tránh nội dung được cá nhân hóa, bạn cũng nên hướng đến việc chuẩn hóa các thông số như ngôn ngữ và vị trí IP—vì những thông số này cũng có thể ảnh hưởng đến nội dung được hiển thị. 🗺️

Và đây là mẹo cuối cùng: Luôn kiểm tra các trang web ở chế độ ẩn danh trước khi thu thập dữ liệu. Theo cách đó, bạn sẽ có một phiên "bảng trắng", không có dữ liệu cá nhân. Điều này giúp bạn hiểu rõ hơn về nội dung thường có trên trang web. 🥷

Các trang web và trang web do AI tạo ra

Bây giờ, chủ đề nóng hổi nhất hiện nay: AI ! 🔥

AI đang viết lại sổ tay hướng dẫn về cách chúng ta xây dựng trang web. Những gì từng mất nhiều tháng, giờ chỉ mất vài giây hoặc vài phút! ⏱️

Để có cái nhìn tổng quan nhanh về cách công nghệ xây dựng web dựa trên AI đang thay đổi trò chơi, hãy xem video sau:

Kết quả là gì? Các trang web đang thay đổi bố cục, cấu trúc và thiết kế nhanh hơn bao giờ hết. Ngay cả nội dung cũng được xử lý bằng AI, với các biên tập viên tạo ra một lượng lớn văn bản, hình ảnh và video trong nháy mắt. ⚡

Và đó chỉ là sự khởi đầu…

Hãy tưởng tượng một tương lai mà các trang web có thể tạo ra các trang động dựa trên những gì bạn nhấp hoặc tìm kiếm. Giống như chúng đang biến đổi theo thời gian thực, thích ứng với từng người dùng.

Tất cả sự ngẫu nhiên đó là cơn ác mộng đối với các tập lệnh trích xuất dữ liệu web truyền thống. 😱

Tuy nhiên, đây là mặt trái. Cũng giống như AI tăng tốc độ cập nhật trang web, bạn có thể sử dụng công nghệ trích xuất dữ liệu web do AI hỗ trợ để điều chỉnh các tập lệnh của mình ngay lập tức. Bạn muốn tìm hiểu sâu hơn? Hãy đọc hướng dẫn về AI để trích xuất dữ liệu web .

Một giải pháp khả thi khác, đặc biệt là để tránh lỗi, là tạo các quy trình độc lập để theo dõi các trang để biết các thay đổi, cảnh báo bạn trước khi tập lệnh của bạn bị hỏng. Ví dụ, thông qua tin nhắn Telegram. 📩

Xem cách xây dựng bot thông báo thay đổi trang Telegram .

Phát hiện Bot AI: Mẹ của tất cả các công nghệ bảo vệ Bot

Hầu như mọi giải pháp chúng tôi đã đề cập cho đến nay đều cho rằng các trang web hiện đại có tính tương tác cao. Điều đó có nghĩa là nếu bạn muốn thu thập chúng, bạn phải sử dụng công cụ tự động hóa trình duyệt. Nhưng có một điểm yếu trong cách tiếp cận này: chính trình duyệt!

Trình duyệt không được xây dựng để thu thập dữ liệu! 😲

Chắc chắn, bạn có thể tinh chỉnh chúng bằng tiện ích mở rộng (như với Puppeteer Extra ) hoặc triển khai tất cả các tinh chỉnh được đề cập ở trên. Nhưng với công nghệ phát hiện bot do AI điều khiển ngày nay, các trình duyệt truyền thống ngày càng dễ phát hiện, đặc biệt là khi các trang web áp dụng công nghệ chống thu thập dữ liệu tiên tiến như phân tích hành vi người dùng .

Vậy, giải pháp là gì? Một trình duyệt thu thập dữ liệu mạnh mẽ có thể:

• Chạy ở chế độ hướng dẫn giống như trình duyệt thông thường để hòa nhập với người dùng thực tế.

• Dễ dàng mở rộng trên đám mây, giúp bạn tiết kiệm thời gian và chi phí cơ sở hạ tầng.

• Tích hợp các IP luân phiên từ một trong những mạng proxy lớn nhất và đáng tin cậy nhất.

• Tự động giải CAPTCHA, quản lý dấu vân tay trình duyệt và tùy chỉnh cookie và tiêu đề, đồng thời xử lý các lần thử lại cho bạn.

• Hoạt động liền mạch với các công cụ tự động hóa hàng đầu như Playwright, Selenium và Puppeteer.

  
  

Đây không chỉ là một ý tưởng mang tính tương lai. Nó ở đây, và nó chính xác là những gì mà Scraping Browser của Bright Data cung cấp. Bạn muốn xem sâu hơn? Hãy xem video này:

Suy nghĩ cuối cùng

Bây giờ bạn đã biết công nghệ thu thập dữ liệu web hiện đại đòi hỏi những gì, đặc biệt là khi xử lý các SPA và PWA do AI điều khiển!

Bạn chắc chắn đã học được một số mẹo chuyên nghiệp ở đây, nhưng hãy nhớ rằng, đây chỉ là Phần 2 trong cuộc phiêu lưu gồm sáu phần của chúng tôi về việc thu thập dữ liệu web nâng cao! Vì vậy, hãy thắt chặt dây an toàn vì chúng tôi sắp đi sâu vào công nghệ tiên tiến hơn nữa, các giải pháp thông minh và mẹo từ người trong cuộc.

Điểm dừng tiếp theo? Bí quyết tối ưu hóa để thu thập dữ liệu nhanh hơn và thông minh hơn! 🚀