Kod

Jak scrapować strony internetowe za pomocą JavaScript i Node.js

Jak scrapować strony internetowe za pomocą JavaScript i Node.js

Kurs z zatrudnieniem: „Zawód: Frontend Developer”

Dowiedz się więcej

Dziennikarz RIA Novosti i autor kanału Dark Lord of Communications dostarcza aktualnych wiadomości i materiałów analitycznych. Jego doświadczenie zawodowe i dogłębna znajomość aktualnych trendów medialnych pozwalają mu tworzyć wysokiej jakości treści. Kanał publikuje artykuły na temat bieżących wydarzeń, polityki i problemów społecznych, co czyni go cennym źródłem informacji dla szerokiego grona odbiorców.

Linki stanowią ważny element treści internetowych, ułatwiając nawigację i poprawiając komfort użytkowania. Pozwalają użytkownikom szybko poruszać się między stronami i znajdować potrzebne informacje. Ważne jest, aby poprawnie skonstruować linki, aby były zrozumiałe zarówno dla użytkowników, jak i wyszukiwarek. Użycie słów kluczowych w tekście linku może zwiększyć widoczność strony w wyszukiwarkach. Warto również zwrócić uwagę na linki wewnętrzne i zewnętrzne. Linki wewnętrzne pomagają rozłożyć ciężar strony i wydłużyć czas spędzony przez użytkownika na stronie, podczas gdy linki zewnętrzne mogą zwiększyć autorytet i zaufanie do zasobu. Optymalizacja linków pomaga poprawić SEO i podnieść pozycję witryny w wyszukiwarkach.

Scraping, czyli analiza składniowa stron internetowych, to zautomatyzowany proces gromadzenia danych z internetu. Ta metoda ma wiele zastosowań w zawodach związanych z przetwarzaniem informacji. Na przykład, analizując artykuły z różnych stron internetowych za pomocą JavaScript i frameworka Node.js, możemy zademonstrować, jak przydatna może być dla współczesnych dziennikarzy, specjalistów PR i marketerów, którzy na pierwszy rzut oka mogą nie mieć doświadczenia w programowaniu. Analiza pozwala na efektywne wyodrębnianie i analizowanie danych, upraszczając pracę z informacjami i zwiększając produktywność w różnych dziedzinach.

Jeśli posiadasz stronę internetową i chcesz przejrzeć wszystkie artykuły na niej zawarte, aby zgłębić konkretny temat lub utworzyć zbiór wiadomości, proces ten może być czasochłonny ze względu na dużą liczbę stron. W takiej sytuacji rozsądne byłoby najpierw sporządzenie listy wszystkich publikacji, a następnie filtrowanie potrzebnych materiałów. To znacznie uprości wyszukiwanie i przyspieszy proces analizy informacji. Wykorzystanie narzędzi do automatycznej ekstrakcji danych ze strony internetowej może być doskonałym rozwiązaniem tego problemu.

Jak działa scraping stron internetowych

Proces zbierania danych ze strony internetowej można scharakteryzować w następujących krokach. Najpierw należy określić witrynę docelową i rodzaj informacji, które chcemy wyodrębnić. Następnie należy użyć narzędzi do analizy struktury witryny i jej kodu HTML, aby zrozumieć, gdzie znajdują się pożądane dane. Następnie informacje są zbierane za pomocą narzędzi programowych, takich jak web scrapery. Uzyskane dane można ustrukturyzować i zapisać w wygodnym formacie do dalszej analizy. Ważne jest również uwzględnienie prawnych aspektów gromadzenia danych, aby uniknąć naruszenia praw właścicieli treści. Prawidłowe podejście do zbierania danych pozwoli na efektywne wykorzystanie uzyskanych informacji do analizy i podejmowania decyzji.

  • Określamy witrynę źródłową i pożądane dane.
  • Określamy metodę paginacji (nawigację po stronach) i strukturę kodu witryny.
  • Korzystając z wielu możliwych metod, wykonujemy sekwencyjne żądania sieciowe dla każdej strony. Jeśli witryna posiada API, korzystamy z niego; jeśli nie, korzystamy z innych narzędzi.
  • Konwertujemy uzyskane dane do wygodnego formatu.
  • Zapisujemy dane końcowe do pliku.

Sukces w biznesie online w dużej mierze zależy od wysokiej jakości analizy witryny. Ważne jest, aby zidentyfikować kluczowe aspekty wpływające na jej skuteczność. Konieczne jest zbadanie aktualnych wskaźników ruchu, ocena czynników behawioralnych użytkowników i przeprowadzenie analizy konkurencji. Ponadto należy zwrócić uwagę na optymalizację treści i parametry techniczne witryny, aby poprawić jej widoczność w wyszukiwarkach. Pomoże to zidentyfikować mocne i słabe strony, co w przyszłości pozwoli na opracowanie strategii zwiększenia konwersji i poprawy doświadczeń użytkowników.

  • Jak przebiega przejście do następnej strony? Jest to konieczne, aby parser mógł wykonywać wszystkie czynności automatycznie; w przeciwnym razie gromadzenie zakończy się na pierwszej stronie. Zazwyczaj dzieje się tak po kliknięciu przycisku, takiego jak „Dalej” lub „Następna strona”, a parser symuluje kliknięcie.
  • Prawidłowe i dokładne miejsce, w którym znajdują się wymagane materiały w znacznikach HTML witryny. Aby to zrobić, należy określić lokalizację (zagnieżdżenie) bloków, a także ich selektory.

Żądania powinny być wysyłane „uprzejmie”, z pewnym opóźnieniem, aby uniknąć negatywnego wpływu na witrynę źródłową. Na przykład nie zaleca się uruchamiania pętli, która wysyła setki natychmiastowych żądań do wszystkich stron archiwum jednocześnie. Może to prowadzić do przeciążenia serwera i zablokowania adresu IP. Prawidłowe podejście do wysyłania żądań przyczynia się do wydajniejszego i bezpieczniejszego pobierania danych.

Naruszenie praw autorskich jest surowo zabronione. Przed opracowaniem scrapera należy uważnie przeczytać umowę użytkownika, która może zawierać bezpośrednie zakazy automatycznego gromadzenia danych. Przestrzeganie tych zasad pomoże uniknąć konsekwencji prawnych i ochronić prawa właścicieli treści.

W przykładzie scrapowania wybrałem dwie witryny o różnym podejściu do paginacji. Pierwsza witryna korzysta z przycisku „Następna strona”, który umożliwia przejście do następnego zestawu danych. Druga witryna implementuje nieskończone ładowanie treści, co zapewnia płynne przeglądanie bez konieczności przechodzenia na nową stronę. Te różnice w paginacji wpływają na metody analizy składniowej i wymagają dostosowanego podejścia w zależności od struktury witryny.

Instalacja niezbędnego oprogramowania

Nasz parser, opracowany w JavaScript, będzie działał w środowisku uruchomieniowym Node.js. Aby zwiększyć wydajność przetwarzania danych, użyjemy dodatkowych modułów, takich jak axios dla żądań HTTP i jsdom do pracy z dokumentami HTML. Umożliwi nam to wyodrębnianie i analizowanie informacji ze stron internetowych, zapewniając wysoką szybkość i dokładność przetwarzania.

  • Korzystając z języka JavaScript, będziemy deklarować zmienne i stałe, a także uruchamiać funkcje i pętle.
  • Infrastruktura Node.js pozwoli Ci to wszystko zrobić nie w przeglądarce, ale za pomocą wiersza poleceń systemu Windows.
  • Moduł fs (skrót od systemu plików) wbudowany w Node.js umożliwia współpracę z systemem plików komputera w celu tworzenia plików z wynikami.
  • Dodatkowo dostępny do pobrania moduł axios umożliwi Ci wygodne wysyłanie żądań HTTP za pomocą linków.
  • Dodatkowo dostępny do pobrania moduł jsdom umożliwi Ci analizowanie otrzymanego wyniku jako drzewa DOM, tak jakby odbywało się to w przeglądarce.

Zacznijmy od zainstalowania Node.js. Najpierw wejdź na oficjalną stronę internetową i pobierz plik instalacyjny. Zainstaluj Node.js, postępując zgodnie z instrukcjami wyświetlanymi na ekranie. Po zakończeniu instalacji będziesz mógł korzystać z kodu JavaScript za pośrednictwem wiersza poleceń, co pozwoli Ci uruchamiać pliki JS i wykonywać pojedyncze polecenia. Zapewnia to wygodny i wydajny sposób pracy z JavaScript.

Po zainstalowaniu Node.js otrzymasz menedżera pakietów npm, który umożliwia instalację różnych modułów, takich jak axios i jsdom. Aby to zrobić, otwórz wiersz poleceń i uruchom polecenia npm install axios i npm install jsdom pojedynczo, czekając na zainstalowanie każdego pakietu. Możesz zainstalować moduły w folderze domyślnym lub w folderze swojego projektu, w zależności od preferencji.

Dodatkowe moduły wybraliśmy na podstawie ich popularności, o czym świadczą cotygodniowe statystyki pobrań w katalogu npm. Częste korzystanie z tych rozwiązań świadczy o ich niezawodności i skuteczności.

Analiza witryny z pierwszym typem paginacji: pojedyncze strony, klikalne

W klasycznym podejściu każda strona witryny zawierająca materiały stanowi odrębną jednostkę, a użytkownik inicjuje przejście poprzez kliknięcie. Aby analiza była efektywna, konieczne jest sekwencyjne odwiedzanie wszystkich stron, zatrzymując się na każdej z nich w celu wyodrębnienia niezbędnych danych. Proces ten trwa do wyczerpania wszystkich dostępnych stron. Ta metoda zapewnia systematyczne gromadzenie informacji i pozwala na staranne przetwarzanie zawartości witryny.

Przyjrzyjmy się, jak wdrażana jest ta migracja na stronie internetowej branżowego magazynu „Dziennikarz” i przeanalizujmy ją. Witryna ta została wybrana do analizy z kilku powodów. Po pierwsze, dostarcza interesujących treści do analizy. Po drugie, struktura witryny pozwala na łatwe wyodrębnienie niezbędnych danych. Wreszcie, „Journalist” jest autorytatywnym źródłem informacji w swojej dziedzinie, co czyni go odpowiednim tematem do badań i pozyskiwania informacji.

  • Po pierwsze, redaktor Skillbox Media „Kod” i ja zgodziliśmy się, że to fajny magazyn :)
  • Po drugie, struktura paginacji magazynu sprawia, że ​​nadaje się on do prezentacji technologii.
  • Po trzecie, redaktorzy „Journalist” uprzejmie zgodzili się nam pomóc.

Strona zawiera ponad 160 stron materiałów z sześciu lat, co łącznie daje prawie 3000 artykułów. Spowoduje to utworzenie pliku HTML zawierającego listę tytułów artykułów z odpowiadającymi im linkami. Plik ten stanie się wygodnym narzędziem do nawigacji i wyszukiwania informacji na stronie, umożliwiając użytkownikom łatwe znalezienie potrzebnych materiałów.

Rozważamy wprowadzenie metody nawigacji między stronami. Przejście między nimi odbywa się poprzez kliknięcie przycisku „Czytaj więcej” pod artykułami. Ten przycisk wysyła żądanie do serwera, tworząc adres URL w formacie «https://jrnlst.ru/node?page=2». W rezultacie na bieżącej stronie ładowane są dodatkowe materiały powiązane z kolejnym zestawem treści. Takie podejście poprawia komfort użytkowania, umożliwiając użytkownikom łatwe wyszukiwanie i przeglądanie powiązanych artykułów bez opuszczania bieżącej strony.

Wybierzemy drugą metodę dostępną na stronie, używając linków w formacie «https://jrnlst.ru/?page=[numer strony]». Linki te umożliwiają ładowanie konkretnych stron z artykułami. Numeracja rozpoczyna się od strony zerowej, która jest stroną główną, chociaż ta informacja nie zawsze jest wyraźnie podana.

Określamy ostatnią stronę, na której kończymy zbieranie informacji. W chwili pisania tego tekstu ustaliłem, że ostatnia strona ma numer 162. Na tej stronie, zamiast przycisku przejścia, pod artykułami znajduje się prosty napis: „To wszystko na razie”.

Znalazłem to dość łatwo. Zacząłem od linków z dowolnymi numerami stron, zaczynając od «page=200» (to było tylko przypuszczenie) i stopniowo zmniejszając numery. Należy pamiętać, że wynik zależy od funkcji witryny, czasu jej istnienia i przewidywanej częstotliwości aktualizacji. Ostatecznie naliczyliśmy 163 strony, wliczając stronę zerową (główną).

Aby skutecznie wyodrębnić informacje z kodu HTML, należy wskazać parserowi, gdzie dokładnie znajduje się żądana treść. Za pomocą narzędzi do tworzenia stron internetowych wbudowanych w przeglądarkę można przeanalizować strukturę kodu i określić ścieżkę do żądanych nagłówków. Znajdują się one w następujący sposób: element z klasą «block-views-articles-latest-on-front-block» → pierwszy element z klasą «view-content» → wszystkie elementy z klasą «flex-teaser-square» (po kolei) → w każdym z nich pierwszy element z klasą «views-field views-field-title» → i wreszcie w każdym z tych elementów pierwszy znacznik ‘a’, który jest hiperłączem z tytułem artykułu. To podejście pozwala szybko i dokładnie znaleźć dane potrzebne do dalszej analizy lub przetwarzania.

Lokalizacja bloku z artykułem Zrzut ekranu: Evgeny Kolesnikov dla Skillbox Media

Mając już wszystkie niezbędne dane do parsowania, możemy rozpocząć automatyzację procesu gromadzenia materiałów. Automatyzacja gromadzenia informacji znacznie uprości i przyspieszy pracę, pozwalając nam skupić się na analizie i przetwarzaniu danych. Skuteczny parser pomoże nam wyodrębnić istotne materiały, co poprawi jakość treści i zwiększy ich trafność.

Nasz parser będzie zawierał dwa pliki: plik JS zawierający kod główny oraz plik BAT, który umożliwi uruchomienie parsera jednym kliknięciem. Takie podejście zapewnia wygodę i łatwość obsługi, a także pozwala na łatwą integrację parsera z procesami pracy. Plik JS będzie odpowiedzialny za logikę przetwarzania danych, a plik BAT uprości uruchomienie parsera użytkownikom niezaznajomionym z programowaniem.

  • Utwórzmy plik o nazwie „JJ Articles Parser.js” (JJ to wygodny skrót od „Journalist Magazine” – nie ma tu żadnej magii). Ten plik będzie zawierał prawie cały nasz kod wykonywalny.
  • Utwórzmy plik start.bat i zapiszmy w nim następujące polecenia:

Wszystko jest tu jasne jak słońce:

  • Pierwszy wiersz służy do użycia polecenia cd w celu zmiany dysku i folderu.
  • Drugi wiersz uruchamia interpreter Node.js i natychmiast przekazuje do niego nasz plik JS w celu przetworzenia.
  • Polecenie pause zapobiega zamknięciu wiersza poleceń po wykonaniu kodu.

Teraz przejdźmy do kodu parsera. W tej sekcji skupimy się na kluczowych aspektach tworzenia efektywnego parsera, który może wyodrębniać dane z różnych źródeł. Omówimy główne funkcje i metody, które pomogą w stworzeniu niezawodnego narzędzia do parsowania. Ważne jest, aby pamiętać, że optymalny kod nie tylko wykonuje zadanie, ale jest również łatwo skalowalny i łatwy w utrzymaniu. Skupimy się również na obsłudze błędów i zapewnieniu prawidłowej interakcji ze stronami internetowymi, aby zapewnić niezawodne działanie parsera w różnych warunkach.

Kod można przeglądać na platformie Pastebin.

Tworzenie kodu programu wymaga precyzji i dokładności. Podczas programowania ważne jest monitorowanie liczby wierszy kodu, aby zapewnić jego czytelność i łatwość konserwacji. W takim przypadku optymalnie jest ograniczyć się do 50 wierszy, uwzględniając komentarze i powiadomienia, które pomogą użytkownikowi zrozumieć, co dzieje się w programie.

Komentarze odgrywają kluczową rolę w kodzie, ponieważ wyjaśniają logikę i strukturę programu. Powiadomienia konsoli są również przydatne do monitorowania wykonywania programu i identyfikowania potencjalnych błędów. Prawidłowe użycie tych elementów nie tylko poprawia jakość kodu, ale także ułatwia jego późniejszą edycję.

Staraj się, aby każdy wiersz kodu był zrozumiały i funkcjonalny. Unikaj niepotrzebnej złożoności i duplikacji, aby zachować zwartość. Upewnij się, że komentarze są jasne i zawierają wszystkie istotne informacje, wyjaśniając każdy istotny fragment kodu.

Ostatecznie, napisanie programu w limicie 50 wierszy wymaga dbałości o szczegóły i umiejętności zwięzłego wyrażania myśli. Poprawia to nie tylko jakość kodu, ale także ogólne postrzeganie projektu.

Koncepcja tego parsera opiera się na analizie i przetwarzaniu danych. Gromadzi on informacje z różnych źródeł, strukturyzując je do dalszego wykorzystania. Głównym zadaniem parsera jest wyodrębnienie niezbędnych informacji ze stron internetowych lub innych formatów danych, takich jak interfejsy API. Proces obejmuje następujące kroki: wysyłanie żądań do zasobów docelowych, odbieranie odpowiedzi, parsowanie kodu HTML lub formatu JSON oraz wyodrębnianie i zapisywanie niezbędnych danych. Takie podejście pozwala na wydajne przetwarzanie dużych wolumenów informacji i automatyzację rutynowych zadań, znacznie przyspieszając proces pobierania danych. Korzystanie z parsera może być przydatne w wielu obszarach, w tym w marketingu, analizie konkurencji i badaniach rynku.

  • Połącz niezbędne moduły.
  • Zdefiniuj stałe: liczbę stron witryny, główną część linku (z wyjątkiem numeru strony, który się zmienia).
  • Zdefiniuj wartości początkowe głównych zmiennych: początek przeglądania od strony zerowej i zerowe opóźnienie żądania, które będzie stale wzrastać.
  • Zdefiniuj główną funkcję parsera o nazwie paginator(), która zawiera prawie cały kod.
  • Ostatni wiersz uruchamia tę funkcję.

Funkcja paginator() odgrywa ważną rolę w organizowaniu nawigacji po stronach z treścią. Jest ona odpowiedzialna za podział dużych ilości danych na mniejsze, łatwiejsze do odczytania części, co znacznie upraszcza proces wyszukiwania informacji. Paginacja pomaga poprawić komfort użytkownika, umożliwiając użytkownikom łatwe nawigowanie między stronami i znajdowanie potrzebnych treści. Co więcej, poprawna implementacja funkcji paginator() może pozytywnie wpłynąć na SEO, ponieważ wyszukiwarki lepiej indeksują ustrukturyzowaną treść. Zrozumienie i skonfigurowanie tej funkcji jest kluczem do stworzenia wydajnej i przyjaznej dla użytkownika aplikacji internetowej.

W ramach tej funkcji zaimplementowano inną – getArticles(), która generuje link do następnej strony, używając niezmiennej „części bazowej” i numeru strony. Wykonuje żądanie GET za pomocą biblioteki Axios i przetwarza wynikowe drzewo DOM za pomocą modułu jsdom. Następnie funkcja wyodrębnia wszystkie linki z bieżącej strony, konwertuje je z linków względnych na bezwzględne, zapisuje wynik do pliku i zwiększa numer strony dla następnego żądania.

Pętla for, która uruchamia wewnętrzną funkcję getArticles(), jest planowana do uruchomienia z rosnącym opóźnieniem. Ustawione opóźnienie wynosi 10 sekund, co nie wpływa znacząco na wydajność witryny i skraca całkowity czas wykonania. Ten czas jest zalecany przez twórców witryny w dyrektywie crawl-delay w pliku robots.txt, chociaż nie wszyscy programiści stosują się do tej praktyki, ponieważ dyrektywa ta jest uważana za przestarzałą. Każde nowe uruchomienie funkcji inicjuje żądanie przejścia do poprzedniej strony, ponieważ zmienna odpowiedzialna za numer strony jest zwiększana z każdym uruchomieniem. Pozwala to na wydajne przetwarzanie danych i minimalizuje obciążenie serwera.

Funkcja getArticles() jest wykonywana do momentu, aż wartość zmiennej odpowiedzialnej za numer następnej strony przekroczy stałą set, która reprezentuje całkowitą liczbę stron. W takim przypadku wykonywanie kodu zostaje zatrzymane, a na konsoli wyświetlane jest powiadomienie. Zapobiega to niekończącym się próbom dostępu do witryny przez parser, co jest niepraktyczne. Optymalizacja procesu pobierania danych pozwala na efektywne wykorzystanie zasobów i zapewnia działanie parsera w ramach określonych ograniczeń.

Wynik analizy spisu treści czasopisma „Journalist”. Zrzut ekranu: Evgeny Kolesnikov dla Skillbox Media

Po ukończeniu i poprawnym skonfigurowaniu kodu wystarczy go uruchomić, klikając plik start.bat, i monitorować proces w czasie rzeczywistym. Zgodnie z planem, w ciągu około pół godziny zostanie wygenerowany plik HTML zawierający listę wszystkich 2920 artykułów z linkami. Ten proces pozwala na efektywne gromadzenie i porządkowanie informacji, co znacznie upraszcza dalszą pracę z treścią.

Scrapowanie witryny z drugim typem paginacji: nieskończone ładowanie po kliknięciu

Druga metoda polega na dodawaniu kolejnych artykułów do tej samej strony. Zazwyczaj w takich przypadkach nie ma prostego sposobu na przejście do konkretnej daty lub do końca treści. Strony z artykułami istnieją, ale służą jedynie serwerowi przetwarzającemu żądania ładowania, a nie użytkownikom. Dlatego ważne jest, aby zoptymalizować proces ładowania, aby poprawić doświadczenia użytkowników i zwiększyć widoczność strony w wyszukiwarkach.

Aby zademonstrować metodę paginacji, przeszukamy sekcję „Kod” Skillbox Media, koncentrując się wyłącznie na artykułach, z wyłączeniem wiadomości. W tym kontekście pojawia się pytanie, jak zastosować wcześniej opisane zasady gromadzenia danych, jeśli na stronie nie ma widocznej paginacji. Wykonamy te same kroki, co w poprzednim przykładzie, aby skutecznie wyodrębnić wymagane informacje.

W tej sytuacji konieczne jest inne podejście do analizy. Aby to zrobić, otwórz narzędzia do tworzenia stron internetowych w przeglądarce i przejdź do zakładki „Sieć”. Umożliwi to monitorowanie żądań witryny. Następnie na stronie kategorii kliknij przycisk „Pokaż więcej”, aby załadować dodatkowe materiały. Ta metoda pomoże Ci zapoznać się z treścią i skuteczniej korzystać ze strony.

Kliknięcie przycisku powoduje wysłanie żądania POST do witryny Skillbox Media. Zrzut ekranu: Evgeny Kolesnikov dla Skillbox Media

Lista żądań wyświetla żądanie POST do witryny skillbox.by w celu wykonania pliku PHP o nazwie getArticlesIndex.php. Odpowiedź na to żądanie jest zwracana w formacie JSON, który jest powszechnie używany do przesyłania danych. Adres URL żądania: https://skillbox.by/local/ajax/getArticlesIndex.php. Na karcie „Żądanie” można zobaczyć parametry, z którymi wysyłane jest to żądanie.

Parametr „PAGE_NUM”, ustawiony w tym przypadku na 2, określa bieżący numer strony. Parametr „SECTION_ID”, równy 10, odpowiada kategorii „Code”, którą planujemy przeanalizować. Parametr „COUNT”, równy 7, określa liczbę materiałów wyświetlanych na stronie. Te ustawienia pozwalają efektywnie organizować wyświetlanie treści zgodnie z określoną kategorią i liczbą artykułów.

Dodatkowe artykuły są ładowane za pomocą żądania POST, a nie GET. Zazwyczaj żądanie GET służy do pobierania danych z serwera, podczas gdy żądanie POST służy do ich wysyłania. Powody tego wyboru to osobny temat, wykraczający poza zakres tego tekstu. Podczas tworzenia parsera ważne jest, aby wziąć pod uwagę logikę ustaloną przez twórców witryny. Jednak dla zabawy można przeprowadzić mały eksperyment i zbadać, jak wpływa to na przetwarzanie danych.

Jeśli skopiujemy powyższy link i klikniemy go bez podania parametrów, witryna zwróci błąd («status: error») – po prostu nie będzie wiedziała, o jakie informacje pytamy. W tym przypadku przeglądarka wyśle ​​żądanie GET, a nie POST, ale witryna nadal odpowie (komunikat o błędzie jest również komunikatem).

Komunikat o błędzie podczas wysyłania żądania GET Zrzut ekranu: Evgeny Kolesnikov dla Skillbox Media

Podczas wykonywania bezpośredniego żądania do określonego łącza z poprawnymi parametrami, wynikiem żądania GET będzie odpowiedź JSON zawierająca kod HTML dodatkowych artykułów i status „ok”. Pozwala to skutecznie uzyskać istotne informacje i dane do dalszego przetwarzania.

Połączmy link bazowy z określonymi parametrami w jeden ciąg: https://skillbox.by/local/ajax/getArticlesIndex.php?params[SECTION_ID]=10&params[CODE_EXCLUDE]=news&params[FIRST_IS_FULL]=Y&params[COUNT]=7&params[PAGE_NUM]=2&params[FIELDS][]=PROPERTY_FAKE_COUNTER&params[CACHE_TYPE]=A&params[COMPONENT_TEMPLATE]=articles. Wykonując żądanie GET dla tego linku, otrzymamy dane w formacie JSON. Będzie to odzwierciedlać znaczniki listy artykułów na drugiej stronie. Można to łatwo sprawdzić, wyszukując je po tytułach artykułów dostępnych w witrynie. Takie podejście pozwala na efektywne wyodrębnianie informacji i dostosowywanie ich do potrzeb użytkownika.

Odpowiedź witryny Skillbox Media na żądanie GET dotyczące drugiej strony sekcji „Kod”. Zrzut ekranu: Jewgienij Kolesnikow dla Skillbox Media

Skoro omówiliśmy już strukturę paginacji, musimy wyjaśnić, gdzie dokładnie parser powinien się zatrzymać — gdzie kończą się artykuły. Zdefiniowanie punktów końcowych artykułów jest ważne dla usprawnienia procesu gromadzenia danych i poprawy jakości treści. Pomoże to uniknąć powtarzających się informacji i skupić się na najbardziej istotnych i wartościowych materiałach. Prawidłowe ustawienie punktów końcowych parsera zapewnia wydajne wyodrębnianie informacji i poprawia wydajność treści.

Zapytanie „Skillbox launched media” zwraca artykuł zatytułowany „Wybór artykułów Skillbox na cześć uruchomienia mediów”, opublikowany 8 lipca 2018 r. na blogu Skillbox na platformie Medium. Sugeruje to, że treści na stronie zaczęły pojawiać się mniej więcej w pierwszej połowie 2018 r.

Aby określić numer ostatniej strony, używamy metody brute-force parametru «[PAGE_NUM]». Jeśli żądany numer strony nie jest podany, witryna automatycznie przekierowuje na pierwszą stronę. W takim przypadku konieczne jest zmniejszenie numeru strony, aby poprawnie wyświetlić treść.

W momencie pisania tego tekstu ostatnia strona sekcji „Kod” miała numer 101, a każda strona zawierała siedem artykułów. Sugeruje to, że całkowita liczba artykułów w tej kategorii wynosi około 707. W rzeczywistości liczba ta wyniosła 705, ponieważ ostatnia strona zawiera tylko pięć publikacji. Autor mógł zweryfikować liczbę artykułów z redaktorem sekcji, który potwierdziłby dokładność obliczeń, ale nie zawsze jest to możliwe. Sądząc po informacjach podanych na stronie, pierwszy artykuł w sekcji nosi tytuł „Jakiego języka programowania powinien nauczyć się początkujący? Wybór JavaScript” z 3 maja 2018 r.

Tak wygląda koniec sekcji, jeśli przewiniesz do niego ręcznie (jednak nie powinieneś tego robić) Zrzut ekranu: Evgeny Kolesnikov dla Skillbox Media

Wróćmy do pierwszej strony sekcji i użyjmy narzędzi dla programistów stron internetowych, aby określić lokalizację linków do artykułów. Pozwoli nam to skutecznie wskazać je parserowi i zoptymalizować proces gromadzenia danych.

Lokalizacja bloku z przypiętym artykułem Zrzut ekranu: Evgeny Kolesnikov dla Skillbox Media

Nie ma problemów z artykułem po przypięciu — jest on unikalny i prezentowany w elemencie z klasą «important-block__main-title».

Lokalizacja bloku ze zwykłym artykułem Zrzut ekranu: Evgeny Kolesnikov dla Skillbox Media

W tym przypadku mamy do czynienia z elementem blokowym z klasą „media-catalog__tile-title”, który jest zagnieżdżony w linku. Może się to wydawać nietypowe, ponieważ tytuł zawiera tylko tekst, a link nie ma żadnej klasy. Możemy jednak rozwiązać ten problem dzięki odpowiedniej nawigacji i optymalizacji struktury HTML. Prawidłowe podejście do nawigacji zapewni wygodę użytkownika i poprawi indeksowanie witryny przez wyszukiwarki.

Utwórz dwa pliki: skbx_code_articles_parser.js dla kodu i start.bat do jego uruchomienia. Plik wsadowy (.bat) zmieni się tylko nieznacznie — zmieni się tylko ścieżka i nazwa uruchamianego skryptu. Wklej poniższy kod do pliku JavaScript:

Przeglądanie kodu w Pastebin umożliwia szybkie udostępnianie oprogramowania i skryptów innym użytkownikom. Ta usługa zapewnia wygodny interfejs do przesyłania i przechowywania kodu, który można łatwo przeglądać i edytować. Pastebin obsługuje wiele języków programowania, co czyni go idealnym narzędziem dla programistów i studentów. Za pomocą Pastebin możesz tworzyć tymczasowe lub stałe linki do swojego kodu, ułatwiając współpracę i dzielenie się wiedzą. Jeśli potrzebujesz udostępnić fragment kodu lub uzyskać pomoc w programowaniu, Pastebin to doskonały wybór.

Nasz kod uległ zmianom, ale pozostaje podobny do poprzednich wersji. Zwróć uwagę na kilka kluczowych niuansów:

  • Wykonujemy żądanie POST, a nie GET, dlatego zamiast axios.get() użyjemy axios.post() (linia 29).
  • Używamy interfejsu URLSearchParams do przekazywania i odczytywania parametrów żądania sieciowego znajdujących się powyżej w specjalnym formacie (linie 14–23, 27 i 62–63).
  • Krótko wspominamy o pobieraniu danych z formatu JSON, ale tylko w jednej linii (linie 32–33).
  • Na każdej stronie najpierw analizujemy osobno przypięty artykuł, a następnie sześć zwykłych artykułów, zgodnie z logiką układu witryny.
Wynik analizy sekcji „Kod” w aplikacji Skillbox Media Zrzut ekranu: Evgeny Kolesnikov dla Skillbox Media

Uruchom parser, klikając plik start.bat i poczekaj na wynik po około 17 minutach. W rezultacie otrzymasz plik HTML zawierający listę 705 artykułów.

Nic nie trwa wiecznie

Twój parser może się również przydać. Możesz zapoznać się z tym materiałem dzień lub rok po jego publikacji. W momencie pisania tego tekstu witryna Skillbox Media wyświetlała siedem artykułów na stronie: jeden przypięty i sześć poniżej. Jednak twórcy niespodziewanie zwiększyli liczbę materiałów do 14, które są teraz ułożone w następującej kolejności: jeden przypięty, sześć poniżej, następnie jeden ponownie przypięty i sześć kolejnych na dole strony.

Należy pamiętać, że podczas tworzenia scrapera do zbierania danych ze stron internetowych należy zdawać sobie sprawę, że projekt i struktura materiałów na stronie mogą ulec zmianie. Oznacza to, że scraper nie będzie działał bezbłędnie na tym samym zasobie przez długi czas. Regularne aktualizowanie i dostosowywanie scrapera do zmian na stronie docelowej jest ważnym elementem jego efektywnego działania. Należy być przygotowanym na wprowadzanie zmian w kodzie i testowanie scrapera, aby upewnić się, że jest on zgodny z aktualną strukturą danych.

Podczas testów odkryto, że kod pomyślnie przetwarza żądania dotyczące 14 materiałów zamiast 7. Wynika to z faktu, że parametry określające numer strony i liczbę artykułów na niej są ze sobą powiązane. W rezultacie odpowiedź serwera jest dostosowana do żądania, nawet jeśli opiera się na przestarzałym modelu. Takie podejście zapewnia elastyczność i pozwala użytkownikom uzyskać potrzebne informacje w optymalnym formacie.

Aby zoptymalizować nawigację i poprawić logikę wyświetlania treści, zalecamy zmianę liczby stron w stałej poprzez określenie wartości stanowiącej połowę tej wartości. Należy również ponownie rozważyć kolejność iterowania elementów na stronach. Wraz ze wzrostem liczby artykułów na każdej stronie ważne jest zachowanie prawidłowej kolejności. Aby to zrobić, należy zdefiniować algorytm, który będzie wyglądał następująco: najpierw należy umieścić pierwszy przypięty element, następnie zwykłe artykuły od pierwszego do szóstego, następnie drugi przypięty element, a na końcu zwykłe artykuły od siódmego do dwunastego. Ta zmiana pomoże poprawić odbiór treści i ułatwi nawigację użytkownikom.

Wnioski

Przeanalizowaliśmy dwie skuteczne metody automatycznego gromadzenia materiałów z witryn medialnych. Istnieje jednak wiele innych możliwości. Na przykład, możesz przeanalizować listę materiałów w arkuszu kalkulacyjnym Excel lub zapisać ją w pliku zakładek, aby później zaimportować ją do przeglądarki. Można również stworzyć atrakcyjny projekt prezentacji danych, zautomatyzować wysyłanie wyników do czatu Telegram za pomocą bota, sortować materiały i przeprowadzać analizę treści, w tym analizować kategorie, słowa kluczowe i częstotliwość publikacji. Dodatkowo, możesz wdrożyć funkcje oznaczania materiałów jako przeczytanych i wiele więcej – jedynym ograniczeniem jest Twoja wyobraźnia.

Kod przedstawiony powyżej może być daleki od doskonałości, ponieważ został stworzony nie przez zawodowego programistę, a przez dziennikarza, który wykorzystuje programowanie w swojej pracy. Ten punkt podkreśla znaczenie i dostępność programowania dla każdego. W dzisiejszym świecie umiejętności programowania stają się niezbędne i każdy może je opanować, jeśli tylko jest gotów wyjść poza swoje zwykłe metody i odkryć nowe podejścia.

Przeczytaj także:

  • Jak dodać JavaScript bez przeładowywania witryny
  • Czym jest framework i jak wybrać framework front-end: wskazówki od doświadczonych programistów
  • Poradnik dla początkujących dotyczący pisania w JavaScript