paint-brush
Modern SPA'lar, PWA'lar ve AI Destekli Dinamik Siteler Nasıl Kazınırile@brightdata
1,037 okumalar
1,037 okumalar

Modern SPA'lar, PWA'lar ve AI Destekli Dinamik Siteler Nasıl Kazınır

ile Bright Data9m2024/11/14
Read on Terminal Reader
Read this story w/o Javascript

Çok uzun; Okumak

Bu kılavuz, gelişmiş web kazıma serisinin 2. Bölümü, modern, dinamik web sitelerini kazımanın karmaşıklıklarını ele alıyor. Web, Tek Sayfalık Uygulamalar (SPA'lar), İleri Web Uygulamaları (PWA'lar) ve AI destekli sitelerle evrimleştikçe, geleneksel kazıma yeni zorluklarla karşı karşıya kalıyor. Kılavuz, SPA'ların kusursuz gezinmesini, PWA'ların uygulama benzeri özelliklerini ve AI'nın içeriği nasıl kişiselleştirdiğini açıklıyor; istemci tarafı işleme, AJAX ve önbelleğe alma gibi engeller yaratıyor. Kazıma teknikleri arasında tarayıcı otomasyon araçları (örneğin Playwright) ve bot algılamayı atlatma, dinamik verileri yönetme ve kişiselleştirilmiş içeriği işleme stratejileri yer alıyor. Kılavuz, daha iyi hız ve güvenilirlik için kazıma araçlarını optimize etmeye yönelik yaklaşan ipuçlarını önizliyor.

People Mentioned

Mention Thumbnail

Companies Mentioned

Mention Thumbnail
Mention Thumbnail

Coin Mentioned

Mention Thumbnail
featured image - Modern SPA'lar, PWA'lar ve AI Destekli Dinamik Siteler Nasıl Kazınır
Bright Data HackerNoon profile picture
0-item

Yasal Uyarı : Bu, Gelişmiş Web Kazıma hakkındaki altı parçalık serimizin 2. Bölümüdür. Baştan başlamak ister misiniz? 1. Bölümü okuyarak yetişin !


Web kazıma işine meraklıysanız, muhtemelen alışılmış zorlukların çoğuna aşinasınızdır. Ancak Web'in ışık hızında değişmesiyle (özellikle de yapay zeka patlaması sayesinde) kazıma oyununda bir sürü yeni değişken var. Bir web kazıma uzmanı olarak seviye atlamak için, hepsini kavramanız gerekir! 🔍


Bu kılavuzda, gelişmiş web kazıma tekniklerini keşfedecek ve günümüzün modern sitelerini, SPA'lar, PWA'lar ve yapay zekayı da kullanarak nasıl kazıyacağınızı öğreneceksiniz! 💪

SPA'lar, PWA'lar ve Yapay Zeka Destekli Sitelerin Durumu Nedir?

Eskiden web siteleri, bir web sunucusu tarafından yönetilen bir dizi statik sayfadan ibaretti. Günümüze geldiğimizde, Web daha çok hareketli bir metropole benziyor. 🌇


Sunucu tarafı işlemeden istemci tarafı işlemeye geçtik. Neden? Çünkü mobil cihazlarımız her zamankinden daha güçlü, bu yüzden yükün bir kısmını onların taşımasına izin vermek mantıklı. 📲


Elbette, muhtemelen bunların hepsini zaten biliyorsunuzdur—ama bugün bulunduğumuz yere gelmek için nereden başladığımızı bilmeliyiz. Günümüzde İnternet, statik sitelerin, dinamik sunucu tarafından oluşturulan sitelerin, SPA'ların, PWA'ların, AI tarafından yönetilen sitelerin ve daha fazlasının bir karışımıdır. 🕸️


Ve endişelenmeyin—SPA, PWA ve AI, devlet kurumları için gizli kısaltmalar değildir. Bu alfabe çorbasını parçalayalım. 🥣

SPA: Tek Sayfalık Başvuru

SPA ( Tek Sayfalık Uygulama ) kelimenin tam anlamıyla tek bir sayfa anlamına gelmez, ancak her seferinde her şeyi yeniden yüklemeden gezinmeyi halleder. Bunu Netflix gibi düşünün: etrafta tıklayın ve o sinir bozucu sayfa yeniden yüklemesi olmadan içeriğin anında değişmesini izleyin. 🍿


SPA'ları kullanırken sayfa yenileme konusunda şüpheleri olan tek kişi Fry değil


Akıcı, hızlı ve akışta kalmanızı sağlıyor.

PWA: İlerici Web Uygulaması

PWA'lar steroidli web uygulamaları gibidir. 💊


Teknik olarak konuşursak, bir PWA ( Progressive Web App ), tarayıcınızdan doğrudan yerel uygulama hissini vermek için son teknoloji web yeteneklerini kullanır.

  • Çevrimdışı işlevselliği? ✅

  • Anlık bildirimler? ✅

  • Önbelleğe alma yoluyla neredeyse anında yükleme? ✅


Çoğu durumda, PWA'ları doğrudan cihazınıza da yükleyebilirsiniz!

AI Destekli Siteler

Yapay zeka destekli siteler, makine öğrenimi büyüsünün bir tutamını getiriyor. Dinamik olarak oluşturulan tasarımlardan ve sohbet robotlarından kişiselleştirilmiş önerilere kadar, bu siteler sitenin sizi tanıdığını hissettiriyor. 🤖 ✨


Sadece gezinmek değil. Size uyum sağlayan etkileşimli bir deneyim.

İşte Eğlenceli Kısım

Bu kategoriler? Birbirini dışlayan değil!


Web → SPA → PWA → AI


Bunları parfait gibi katmanlayabilirsiniz. 🍨 Bir PWA aynı zamanda bir SPA olabilir ve her ikisi de işleri daha akıllı ve daha hızlı hale getirmek için AI'dan yararlanabilir. Yani evet, orada biraz çılgınlaşabilirsiniz!

Gelişmiş Veri Kazıma: Günümüzün Web Ormanında Gezinme

Uzun lafın kısası, SPA'ların, PWA'ların ve AI destekli sitelerin yükselişi web'i çok daha karmaşık hale getirdi. Ve evet, bu web kazımanın her zamankinden daha zor olduğu ve dikkate alınması gereken bir sürü yeni faktör olduğu anlamına geliyor. 😣


Peki ya Web 3.0 ? Web kazıma üzerindeki etkisinin ne olacağını söylemek için biraz erken, ancak bazı uzmanlar şimdiden spekülasyon yapıyor...


Günümüzün modern site taramasındaki en yaygın (ve can sıkıcı) engelleri aşmak için bir başlangıç yapmak amacıyla, arkadaşımız Forrest Knight'ın bu videosuna bir göz atın. 3. Bölüm tam olarak aradığınız şeyi kapsıyor. 👇


Şimdi modern sitelerde gelişmiş web kazıma yaparken nelere dikkat etmeniz gerektiğine bakalım!


⚠️ Uyarı: İlk birkaç ipucu size tanıdık geliyorsa cesaretiniz kırılmasın; devam edin, çünkü daha da derinleştikçe pek çok yeni fikirle karşılaşacaksınız! 🧠

AJAX ve İstemci Tarafı İşleme ile Dinamik İçerik

Günümüzde çoğu site ya JavaScript aracılığıyla istemci tarafında tam olarak oluşturuluyor (bu istemci tarafı oluşturmadır ) ya da etkileşime girdiğinizde veri yükleyen veya sayfanın DOM'unu değiştiren dinamik bölümlere sahip.


Son on yılda bir tarayıcı kullandıysanız, ne hakkında konuştuğumuzu biliyorsunuzdur. Bu dinamik veri alma işlemi sihir değil—AJAX teknolojisiyle destekleniyor! (Ve hayır, futbol kulübü Ajax değil 🔴⚪—burada farklı bir sihir var 😉)


Muhtemelen AJAX'ın ne olduğunu zaten biliyorsunuzdur, ancak bilmiyorsanız, MDN'nin belgeleri başlamak için harika bir yerdir . Peki, AJAX web kazıma için önemli bir şey mi?


Tam olarak değil…


Playwright, Selenium veya Puppeteer gibi tarayıcı otomasyon araçlarıyla, betiğinize AJAX istekleri de dahil olmak üzere bir web sayfasını bir tarayıcıda yüklemesini emredebilirsiniz. En iyi başsız tarayıcı araçlarından birini alın ve hazırsınız!


Daha fazla bilgi için Python'da dinamik sitelerin taranmasıyla ilgili tam eğitimimizi okuyun.


🚨 Ama, bekleyin... Profesyonel bir ipucu var! 🚨


Çoğu AJAX tabanlı sayfa API çağrıları aracılığıyla dinamik veri çeker. Bu istekleri, bir sayfa yüklenirken tarayıcınızın DevTools'unda sekmesini açarak yakalayabilirsiniz:


AJAX isteklerini filtrelemek için “Fetch/XHR”ye dikkat edin


Ya şunu göreceksiniz:

  • Farklı uç noktalara bir veya daha fazla REST API .

  • GraphQL kullanarak sorgulayabileceğiniz tek bir uç noktaya yapılan bir veya daha fazla GraphQL API çağrısı.


Her iki durumda da bu, doğrudan bu API çağrılarını hedefleyerek kazıma kapısını açar. Sadece bu verileri yakalayın ve çekin—bu kadar kolay! 🎉

Hızlı bir inceleme için aşağıdaki videoyu izleyin:

Tembel Yükleme, Sonsuz Kaydırma ve Dinamik Kullanıcı Etkileşimi

Web sayfaları her zamankinden daha etkileşimli, tasarımcılar bizi meşgul tutmak için sürekli yeni yollar deniyor. Öte yandan, sonsuz kaydırma gibi bazı etkileşimler standart hale bile geldi. (Hiç Netflix'te sonsuza dek kaydırdığınız oldu mu? Doğru diziyi izlediğinizden emin olun!)


Yeni şeyler öğrenme zamanı! Aşağı kaydırarak zamanınızı boşa harcamayı bırakın


Peki, web kazımadaki tüm bu zorlu etkileşimlerle nasıl başa çıkıyoruz? Davul sesi... 🥁


Tarayıcı otomasyon araçlarıyla! (Evet, yine! 🎉)


Eski haber iyi haberdir


Playwright gibi en modern olanlar, yaygın etkileşimleri ele almak için yerleşik yöntemlere sahiptir. Ve kapsamadıkları benzersiz bir şey ortaya çıktığında? Genellikle hileyi yapmak için özel JavaScript kodu ekleyebilirsiniz.


Özellikle:

  • Playwright, özel JS'yi doğrudan sayfada çalıştırmak için assess() metodunu sunuyor.

  • Selenium, tarayıcıda JavaScript çalıştırmanıza olanak tanıyan execute_script() fonksiyonunu sağlar.


Biliyoruz, muhtemelen bu temelleri zaten kavramışsınızdır, bu yüzden burada derinlemesine incelemeye gerek yok. Ancak tüm ayrıntıları öğrenmek istiyorsanız, şu eksiksiz kılavuzlara bakın:

PWA'larda İçerik Önbelleğe Alma

İşte işler burada kızışıyor! 🌶️


PWA'lar çevrimdışı çalışmak üzere oluşturulmuştur ve önbelleğe almaya büyük ölçüde güvenir. Bu, son kullanıcılar için harika olsa da, yeni verileri almak istediğiniz için web kazıma için baş ağrısı yaratır.


Önbelleğe alınmış verilerle uğraşmak zordur…


Peki, kazıma sırasında önbelleğe almayı nasıl halledersiniz—özellikle bir PWA ile uğraşırken? Eh, çoğu zaman bir tarayıcı otomasyon aracı kullanacaksınız. Sonuçta, PWA'lar genellikle istemci tarafında oluşturulur ve/veya dinamik veri alımına güvenir.


İyi haber mi? Tarayıcı otomasyon araçları her çalıştırdığınızda yeni tarayıcı oturumları başlatır. Ve Puppeteer ve Playwright durumunda, varsayılan olarak gizli modda bile başlatırlar. Ancak sorun şu: Gizli/Yeni oturumlar önbelleksiz veya çerezsiz değildir ! 🤯

Kazıma betiğinizde bir siteyle ne kadar çok etkileşim kurarsanız, tarayıcının istekleri önbelleğe alma olasılığı o kadar artar—gizli modda bile. Sorunu çözmek için, başsız tarayıcıyı periyodik olarak yeniden başlatabilirsiniz.


Veya Puppeteer ile basit bir komutla önbelleği tamamen devre dışı bırakabilirsiniz :


 await page.setCacheEnabled(enabled)


Peki ya PWA'nın arkasındaki sunucu kendi tarafında veri önbelleğe alıyorsa? Bu bambaşka bir canavar... 👹


Ne yazık ki, sunucu tarafı önbelleğe alma konusunda yapabileceğiniz pek bir şey yok. Aynı zamanda, bazı sunucular gelen isteklerdeki başlıklara göre önbelleğe alınmış yanıtlar sunar. Bu nedenle, User-Agent gibi bazı istek başlıklarını değiştirmeyi deneyebilirsiniz. 🔄


Web kazıma için en iyi Kullanıcı Aracısını keşfedin!

Bağlam-Belirli İçerik

Web sitelerinin size neden neredeyse fazlasıyla ilginizi çeken içerikler gösterdiğini hiç merak ettiniz mi? Bu sihir değil; makine öğreniminin iş başında olması. 💡

Günümüzde, giderek daha fazla web sayfası tercihlerinize göre uyarlanmış kişiselleştirilmiş içerikler sunmaktadır. Aramalarınıza, site etkileşimlerinize, satın alımlarınıza, görüntülemelerinize ve diğer çevrimiçi davranışlarınıza göre, ML algoritmaları neyi sevdiğinizi anlar ve web sayfaları buna göre içerik sunar .


Yararlı mı? Kesinlikle—çok büyük bir zaman tasarrufu! ⏱️


Etik mi? Pekala, hizmet şartlarını kabul ettin, o yüzden... evet diyelim. 🤷


Ancak web kazıma için zorluk şu: eskiden, sitelerin HTML yapılarını yalnızca ara sıra değiştirmesinden endişe ederdiniz. Şimdi, web sayfaları sürekli olarak değişiyor ve her ziyaretinizde potansiyel olarak farklı bir deneyim sunuyor.


Usta Yoda'yı dinleyin


Peki, bunu nasıl halledersiniz? Tutarlı sonuçlar elde etmek için, tarayıcı otomasyon araçlarınızı önceden depolanmış oturumlarla başlatabilirsiniz; bu, içeriğin öngörülebilir kalmasını sağlar. Playwright gibi araçlar, bu amaç için bir BrowserContext nesnesi de sağlar:


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


Kişiselleştirilmiş içerikten kaçınmak için dil ve IP konumu gibi parametreleri de standartlaştırmayı hedeflemelisiniz; çünkü bunlar da görüntülenen içeriği etkileyebilir. 🗺️


Ve işte son bir ipucu: Siteleri her zaman kazımadan önce gizli modda inceleyin. Bu şekilde, kişiselleştirilmiş verilerden arınmış, "boş bir sayfa" oturumu elde edersiniz. Bu, sitede normalde mevcut olan içeriği daha iyi anlamanıza yardımcı olur. 🥷

Yapay Zeka Tarafından Oluşturulan Siteler ve Web Sayfaları

Şimdi, şu anın sıcak konusu: Yapay Zeka ! 🔥


Yapay zeka, siteleri nasıl oluşturduğumuza dair oyun kitabını yeniden yazıyor. Eskiden aylar süren şey, artık saniyeler veya dakikalar içinde gerçekleşiyor! ⏱️


Yapay zeka tabanlı web oluşturma teknolojisinin oyunu nasıl dönüştürdüğüne dair hızlı bir genel bakış için aşağıdaki videoyu izleyin:


Sonuç? Siteler düzen, yapı ve tasarımı her zamankinden daha hızlı değiştiriyor. İçerik bile yapay zeka işlemine tabi tutuluyor ve editörler bir anda büyük miktarda metin, resim ve video üretiyor. ⚡


Ve bu daha başlangıç…


Ne?!?


Sitelerin tıkladığınız veya aradığınız şeye göre dinamik olarak sayfalar oluşturabildiği bir gelecek hayal edin. Sanki gerçek zamanlı olarak değişiyorlar ve her kullanıcıya uyum sağlıyorlar.


Tüm bu rastgelelik, geleneksel web kazıma komut dosyaları için bir kabustur. 😱


Ancak işin bir de ters tarafı var. Tıpkı AI'nın web sitesi güncellemelerini hızlandırması gibi, komut dosyalarınızı anında uyarlamak için AI destekli web kazımayı kullanabilirsiniz. Daha derine dalmak mı istiyorsunuz? Web kazıma için AI kılavuzunu okuyun.


Özellikle hatalardan kaçınmak için olası bir diğer çözüm, betiğiniz bozulmadan önce sizi uyaran sayfaları değişikliklere karşı izleyen bağımsız süreçler oluşturmaktır. Örneğin, bir Telegram mesajı aracılığıyla. 📩


Sayfa değişikliği Telegram bildirim botunun nasıl oluşturulacağını öğrenin.

AI-Bot Algılama: Tüm Bot Koruma Teknolojilerinin Anası

Şimdiye kadar ele aldığımız çözümlerin neredeyse hepsi modern sitelerin oldukça etkileşimli olduğunu varsayar. Yani onları kazımak istiyorsanız bir tarayıcı otomasyon aracı kullanmalısınız. Ancak bu yaklaşımda zayıf bir nokta var: tarayıcının kendisi!


Tarayıcılar veri toplamak için tasarlanmamıştır! 😲


Elbette, bunları uzantılarla ( Puppeteer Extra gibi) ayarlayabilir veya yukarıda belirtilen tüm ayarları uygulayabilirsiniz. Ancak günümüzün AI destekli bot algılama teknolojisiyle, geleneksel tarayıcıları tespit etmek giderek daha kolay hale geliyor, özellikle de siteler kullanıcı davranışı analizi gibi gelişmiş anti-scraping teknolojisini benimsediğinde.


Peki çözüm nedir? Güçlü bir kazıma tarayıcısı:

  • Gerçek kullanıcılarla uyum sağlamak için normal bir tarayıcı gibi başlıklı modda çalışır.

  • Bulutta zahmetsizce ölçeklenir, size zaman ve altyapı maliyetlerinden tasarruf sağlar.

  • En büyük ve en güvenilir proxy ağlarından birinden dönen IP'leri entegre eder.

  • CAPTCHA'ları otomatik olarak çözer, tarayıcı parmak izini yönetir, çerezleri ve başlıkları özelleştirir ve tüm bunları sizin için yeniden denemeleri yönetirken yapar.

  • Playwright, Selenium ve Puppeteer gibi en iyi otomasyon araçlarıyla kusursuz bir şekilde çalışır.


Bu sadece fütüristik bir fikir değil. Burada ve Bright Data'nın Scraping Browser'ının sunduğu şey tam olarak bu. Daha derin bir bakış mı istiyorsunuz? Bu videoyu izleyin:


Son Düşünceler

Artık modern web kazımanın ne gerektirdiğini biliyorsunuz; özellikle de yapay zeka destekli SPA'lar ve PWA'larla mücadele söz konusu olduğunda!


Burada kesinlikle bazı profesyonel ipuçları edindiniz, ancak unutmayın, bu gelişmiş web kazıma konusundaki altı bölümlük maceramızın sadece 2. Bölümü! Bu yüzden emniyet kemerlerinizi bağlı tutun çünkü daha da ileri teknolojiye, akıllı çözümlere ve içeriden ipuçlarına dalmak üzereyiz.


Bir sonraki durak? Daha hızlı, daha akıllı kazıyıcılar için optimizasyon sırları! 🚀